/* ============================================
   ALTERNART - MAPA INTERATIVO
   Visual Cartografico Premium
   ============================================ */

:root {
    --font-offset: 0;
}

/* Font offset global - altera o tamanho base do rem, afetando TODOS os textos */
html {
    font-size: calc(16px + var(--font-offset) * 2px);
}

.hidden {
    display: none !important;
}

:root {
    --bg-dark: #1a1410;
    --bg-medium: #2c2418;
    --bg-light: #3d3226;
    --gold: #c9a84c;
    --gold-light: #e8d38a;
    --gold-dark: #8b6914;
    --parchment: #f4e4c1;
    --parchment-dark: #d4c4a1;
    --text-light: #f0e6d2;
    --text-muted: #a09080;
    --red-danger: #c0392b;
    --red-light: #e74c3c;
    --green-safe: #27ae60;
    --blue-info: #2980b9;
    --purple: #8e44ad;
    --shadow-strong: 0 4px 20px rgba(0,0,0,0.6);
    --shadow-glow: 0 0 20px rgba(201,168,76,0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================
   SCROLLBAR GLOBAL - Estilo Medieval
   ============================================ */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--gold-dark) rgba(0,0,0,0.2);
}

/* WebKit (Chrome, Edge, Safari) */
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
}

*::-webkit-scrollbar-thumb {
    background: var(--gold-dark);
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.3);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

body {
    font-family: 'Lora', serif;
    background: var(--bg-dark);
    color: var(--text-light);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

/* ============================================
   TOP NAVIGATION BAR
   ============================================ */

#top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: 76px;
    z-index: 1000;
    display: flex;
    align-items: center;
    flex-wrap: wrap;          /* permite quebra natural sempre que nao couber */
    column-gap: 18px;
    row-gap: 10px;
    padding: 10px 22px;
    background: linear-gradient(180deg, rgba(26,20,16,0.97) 0%, rgba(26,20,16,0.85) 100%);
    border-bottom: 2px solid var(--gold-dark);
    box-shadow: 0 2px 20px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
}

#top-bar::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ORDEM VISUAL na linha 1:  left  center  status  ...  right (margin-left:auto) */
#nav-left {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    order: 1;
}

#nav-center {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    order: 2;
}

#nav-status {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    order: 3;
}

#nav-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-left: auto;
    order: 4;
}

/* Quebra estrategica: abaixo de 1180px o status quebra para a 2a linha
   ocupando largura inteira, centralizado. Demais elementos permanecem em cima. */
@media (max-width: 1180px) {
    #nav-status {
        order: 99;
        flex: 1 1 100%;
        justify-content: center;
        padding-top: 8px;
        margin-top: 4px;
        border-top: 1px solid rgba(201, 168, 76, 0.15);
    }
}

#nav-compass {
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 0 8px rgba(201,168,76,0.5));
    animation: compassSpin 20s linear infinite;
}

@keyframes compassSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#nav-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(201,168,76,0.4), 0 2px 4px rgba(0,0,0,0.8);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-medium) 100%);
    border: 1px solid var(--gold-dark);
    border-radius: 6px;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-btn:hover {
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);
    color: var(--bg-dark);
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
}

.nav-btn:active {
    transform: translateY(0);
}

/* Botao de nav desabilitado (feature ainda nao concluida): visivel mas inerte */
.nav-btn:disabled,
.nav-btn.nav-btn-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.6);
    pointer-events: none;
}
.nav-btn:disabled:hover,
.nav-btn.nav-btn-disabled:hover {
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-medium) 100%);
    color: var(--gold);
    box-shadow: none;
    transform: none;
}

/* Breadcrumb */
#breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 1px;
}

#breadcrumb .crumb {
    cursor: pointer;
    color: var(--gold-dark);
    transition: color 0.2s;
}

#breadcrumb .crumb:hover {
    color: var(--gold);
}

#breadcrumb .crumb-separator {
    color: var(--text-muted);
    font-size: 0.7rem;
}

#breadcrumb .crumb-active {
    color: var(--gold-light);
    font-weight: 600;
}

/* ============================================
   MAP CONTAINER
   ============================================ */

#map {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: #0a1628;
}

/* Leaflet custom styles */
.leaflet-container {
    background: #0a1628 !important;
    font-family: 'Lora', serif;
}

/* Empurra os controles de zoom para baixo da topbar (76px + folga) */
.leaflet-top.leaflet-left { top: 92px !important; }

.leaflet-control-zoom {
    border: 1px solid var(--gold-dark) !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: var(--shadow-strong) !important;
}

.leaflet-control-zoom a {
    background: var(--bg-medium) !important;
    color: var(--gold) !important;
    border-color: var(--gold-dark) !important;
    font-size: 18px !important;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    transition: all 0.2s;
}

.leaflet-control-zoom a:hover {
    background: var(--gold-dark) !important;
    color: var(--bg-dark) !important;
}

/* Disable attribution for cleaner look */
.leaflet-control-attribution {
    display: none !important;
}

/* ============================================
   CONTINENT POLYGONS (SVG OVERLAY)
   ============================================ */

.continent-polygon {
    cursor: pointer;
    transition: all 0.4s ease;
    stroke-width: 2.5;
    stroke-dasharray: 8, 4;
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.5));
}

.continent-polygon:hover {
    stroke-width: 3.5;
    stroke-dasharray: none;
    filter: drop-shadow(0 0 12px rgba(201,168,76,0.6));
}

/* ============================================
   CUSTOM MARKERS & TOOLTIPS
   ============================================ */

.continent-label {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    font-family: 'Cinzel Decorative', serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--parchment) !important;
    text-shadow: 0 0 10px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.7), 2px 2px 4px rgba(0,0,0,0.9) !important;
    white-space: nowrap !important;
    text-align: center !important;
    pointer-events: none !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

.continent-icon-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px !important;
    height: 80px !important;
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

.continent-icon-marker .rpg-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.continent-icon-marker .rpg-icon-emoji {
    font-size: 48px;
}

.continent-icon-marker:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 2px 12px rgba(201,168,76,0.5));
}
}

/* Island markers */
.island-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    background: radial-gradient(circle, rgba(30,24,18,0.85) 40%, transparent 70%);
    border: 1.5px solid rgba(201,168,76,0.4);
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
    animation: markerPulse 4s ease-in-out infinite;
}

.island-marker:hover {
    transform: scale(1.2);
    border-color: var(--gold);
    box-shadow: 0 0 20px rgba(201,168,76,0.4);
}

/* Region markers — icon + badge only, no background circle */
.region-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px !important;
    height: 80px !important;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

.region-marker .rpg-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.region-marker .rpg-icon-emoji {
    font-size: 48px;
    line-height: 1;
}

.region-marker::after {
    display: none;
}

/* Mystery region */
.region-marker-mystery {
    opacity: 0.85;
}

.region-mystery-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(0,0,0,0.8));
}

.region-mystery-progress {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: var(--gold-light);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid rgba(201,168,76,0.3);
    white-space: nowrap;
}

.label-mystery {
    color: var(--text-muted) !important;
    font-style: italic;
}

/* Nav Character Selector */
#nav-char-selector {
    display: flex;
    justify-content: center;
}

.nav-char-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.nav-char-btn:hover {
    border-color: var(--gold);
}

.nav-char-img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.nav-char-placeholder {
    font-size: 0.9rem;
}

.nav-char-name {
    font-size: 0.7rem;
    color: var(--parchment);
    font-weight: 600;
}

.nav-char-arrow {
    font-size: 0.6rem;
    color: var(--gold);
}

/* Map connection lines animation */
.map-connection-line {
    animation: connection-flow 2s linear infinite;
}

@keyframes connection-flow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -36; }
}

.region-marker:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 2px 12px rgba(201,168,76,0.5));
}

.region-marker .difficulty-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    border: 2px solid rgba(0,0,0,0.6);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Override Leaflet default tooltip white-space */
.leaflet-tooltip {
    white-space: normal !important;
}

/* Custom Tooltip */
.custom-tooltip {
    background: linear-gradient(160deg, rgba(34,28,20,0.98) 0%, rgba(22,18,12,0.98) 100%) !important;
    border: 1px solid var(--gold-dark) !important;
    border-radius: 10px !important;
    padding: 0 !important;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.7),
        0 0 0 1px rgba(201,168,76,0.08),
        0 0 20px rgba(201,168,76,0.1) !important;
    color: var(--text-light) !important;
    font-family: 'Lora', serif !important;
    font-size: 17px !important;
    max-width: 400px !important;
    min-width: 300px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    overflow: hidden !important;
}

.custom-tooltip::before {
    border-top-color: var(--gold-dark) !important;
}

.custom-tooltip .tooltip-inner {
    padding: 16px 18px;
}

.custom-tooltip .tooltip-title {
    font-family: 'Cinzel', serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 8px;
    letter-spacing: 1px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(201,168,76,0.15);
}

.custom-tooltip .tooltip-desc {
    color: var(--parchment-dark);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 12px;
}

.custom-tooltip .tooltip-stats {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.custom-tooltip .tooltip-stat {
    flex: 1;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(201,168,76,0.12);
    border-radius: 6px;
    padding: 6px 10px;
    text-align: center;
}

.custom-tooltip .tooltip-stat-value {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--gold-light);
    display: block;
}

.custom-tooltip .tooltip-stat-label {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.custom-tooltip .tooltip-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 15px;
    color: var(--text-muted);
}

.custom-tooltip .tooltip-info span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.custom-tooltip .tooltip-click {
    margin-top: 0;
    padding: 10px 18px;
    background: rgba(201,168,76,0.08);
    border-top: 1px solid rgba(201,168,76,0.15);
    font-size: 15px;
    color: var(--gold);
    text-align: center;
    font-style: italic;
    letter-spacing: 0.5px;
}

/* ============================================
   REGION DETAIL PANEL
   ============================================ */

#region-panel {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

#region-panel.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

#region-panel.hidden #region-panel-content {
    transform: scale(0.92) translateY(30px);
}

#region-panel-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(10px);
}

#region-panel-content {
    position: relative;
    width: 92%;
    max-width: 750px;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(160deg, #2a2016 0%, #1a1410 40%, #221c14 100%);
    border: 2px solid var(--gold-dark);
    border-radius: 14px;
    padding: 0;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.8),
        0 0 0 1px rgba(201,168,76,0.1),
        0 0 40px rgba(201,168,76,0.08);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#region-panel-close {
    position: sticky;
    top: 10px;
    float: right;
    margin: 10px 14px 0 0;
    z-index: 10;
    background: rgba(26,20,16,0.8);
    border: 1px solid var(--gold-dark);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    color: var(--gold);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}

#region-panel-close:hover {
    background: var(--gold);
    color: var(--bg-dark);
    transform: rotate(90deg);
}

/* Hero section: full-width image */
#region-panel-hero {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    margin-top: -44px; /* compensate for sticky close btn */
    border-radius: 14px 14px 0 0;
}

#region-panel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.7) saturate(1.2);
}

#region-panel-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(26,20,16,1) 0%, rgba(26,20,16,0.4) 40%, transparent 70%);
    pointer-events: none;
}

#region-panel-name {
    display: none;
}

#region-panel-info {
    padding: 18px 24px 16px;
}

#region-panel-desc {
    color: var(--parchment-dark);
    font-size: 0.95rem;
    line-height: 1.7;
    font-style: italic;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-bottom: 16px;
}

#region-panel-difficulty {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.difficulty-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#region-panel-difficulty .label {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gold-dark);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.difficulty-value-text {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: 1px;
}

.difficulty-bar-container {
    width: 100%;
    height: 8px;
    background: rgba(0,0,0,0.5);
    border-radius: 4px;
    border: 1px solid rgba(201,168,76,0.2);
    position: relative;
    overflow: hidden;
}

.difficulty-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 1s ease-out;
    position: relative;
    overflow: hidden;
}

.difficulty-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
    animation: barShine 2s linear infinite;
}

@keyframes barShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Divider */
.panel-divider {
    height: 1px;
    margin: 0 24px;
    background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
    opacity: 0.5;
}

/* ============================================
   MONSTER LIST
   ============================================ */

#region-panel-monsters {
    padding: 18px 24px 24px;
    overflow: hidden;
}

#region-panel-monsters h3 {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: var(--gold);
    margin-bottom: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.monster-card {
    display: flex;
    gap: 14px;
    padding: 14px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, rgba(61,50,38,0.4) 0%, rgba(26,20,16,0.4) 100%);
    border: 1px solid rgba(201,168,76,0.15);
    border-radius: 10px;
    transition: all 0.25s ease;
    cursor: default;
    overflow: hidden;
}

.monster-card:hover {
    border-color: var(--gold-dark);
    background: linear-gradient(135deg, rgba(61,50,38,0.6) 0%, rgba(26,20,16,0.6) 100%);
    transform: translateX(3px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3), -3px 0 12px rgba(201,168,76,0.08);
}

.monster-card-img {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    object-fit: contain;
    background: linear-gradient(135deg, rgba(30,24,18,0.6) 0%, rgba(15,12,8,0.8) 100%);
    border: 2px solid var(--gold-dark);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    padding: 4px;
}

.monster-card-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.monster-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    flex-wrap: wrap;
    gap: 6px;
}

.monster-card-name {
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--parchment);
    letter-spacing: 1px;
}

.monster-card-types {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

.monster-type-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    border: 2px solid rgba(201,168,76,0.4);
    padding: 3px;
}

.monster-rarity-star {
    color: #5dade2;
    font-size: 1rem;
    margin-right: 4px;
    text-shadow: 0 0 6px rgba(41,128,185,0.6);
}

.monster-card-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 10px;
    font-style: italic;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.monster-card-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Region monster detail meta */
.region-monster-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.region-monster-raridade {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 3px 12px;
    border-radius: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.raridade-comum { background: rgba(160,144,128,0.2); color: var(--text-muted); border: 1px solid rgba(160,144,128,0.3); }
.raridade-raro { background: rgba(41,128,185,0.2); color: #5dade2; border: 1px solid rgba(41,128,185,0.4); }
.raridade-epico { background: rgba(142,68,173,0.2); color: #bb8fce; border: 1px solid rgba(142,68,173,0.4); }
.raridade-lendario { background: rgba(201,168,76,0.2); color: var(--gold-light); border: 1px solid rgba(201,168,76,0.4); }

.region-monster-qty {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.region-monster-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

#region-monster-detail {
    padding-top: 4px;
}

/* Shop icon for city commerce */
/* City Shop Grid */
.city-shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.city-shop-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(201,168,76,0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.city-shop-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201,168,76,0.15);
}

.city-shop-icon {
    font-size: 1.8rem;
    margin-bottom: 6px;
}

.city-shop-name {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--parchment);
    margin-bottom: 4px;
}

.city-shop-desc {
    font-size: 0.65rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.shop-icon-wrapper {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(201,168,76,0.15) 0%, rgba(61,50,38,0.4) 100%);
    border: 2px solid var(--gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.shop-icon {
    font-size: 32px;
}

.skill-tag {
    padding: 4px 12px;
    background: rgba(201,168,76,0.1);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--gold-light);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ============================================
   MAP TRANSITION OVERLAY
   ============================================ */

#map-transition {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#map-transition.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.transition-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, #1a1410 0%, #0d0a07 70%, #000 100%);
}

.transition-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

#map-transition.active .transition-content {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.2s;
}

.transition-compass {
    width: 64px;
    height: 64px;
    animation: transitionSpin 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    filter: drop-shadow(0 0 25px rgba(201,168,76,0.7));
}

@keyframes transitionSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

.transition-text {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold);
    text-shadow: 0 0 30px rgba(201,168,76,0.5), 0 2px 8px rgba(0,0,0,0.9);
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: center;
    max-width: 400px;
}

.transition-bar {
    width: 180px;
    height: 3px;
    background: rgba(201,168,76,0.15);
    border-radius: 2px;
    overflow: hidden;
}

.transition-bar-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-dark));
    border-radius: 2px;
    transition: width 0.8s ease-out;
}

#map-transition.active .transition-bar-fill {
    animation: transitionFill 1s ease-out forwards;
    animation-delay: 0.3s;
}

@keyframes transitionFill {
    0% { width: 0%; }
    70% { width: 90%; }
    100% { width: 100%; }
}

/* Exit transition (zoom out feel) */
#map-transition.exit .transition-content {
    transform: scale(1.2);
    opacity: 0;
    transition: transform 0.4s ease-in, opacity 0.4s ease;
    transition-delay: 0s;
}

#map-transition.exit {
    opacity: 0;
    transition: opacity 0.5s ease 0.1s, visibility 0.5s ease 0.1s;
}

/* ============================================
   LOADING SCREEN
   ============================================ */

#loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: radial-gradient(circle at center, #2c2418 0%, #1a1410 60%, #0d0a07 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

#loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

.loading-content {
    text-align: center;
}

.loading-compass {
    width: 80px;
    height: 80px;
    animation: compassSpin 2s linear infinite;
    filter: drop-shadow(0 0 20px rgba(201,168,76,0.6));
    margin-bottom: 24px;
}

.loading-content h2 {
    font-family: 'Cinzel Decorative', serif;
    color: var(--gold);
    font-size: 1.4rem;
    letter-spacing: 3px;
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(201,168,76,0.4);
}

.loading-bar {
    width: 250px;
    height: 4px;
    background: rgba(201,168,76,0.2);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto;
}

.loading-bar-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-dark));
    border-radius: 2px;
    transition: width 0.4s ease;
}

@keyframes loadingFill {
    0% { width: 0%; }
    60% { width: 85%; }
    100% { width: 100%; }
}

/* ============================================
   WORLD MAP SVG BACKGROUND PATTERN
   ============================================ */

.map-bg-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   CONTINENT HOVER POPUP STYLES
   ============================================ */

.leaflet-popup-content-wrapper {
    background: linear-gradient(135deg, rgba(26,20,16,0.97) 0%, rgba(44,36,24,0.97) 100%) !important;
    border: 1px solid var(--gold-dark) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.7), 0 0 20px rgba(201,168,76,0.15) !important;
    color: var(--text-light) !important;
    padding: 0 !important;
}

.leaflet-popup-content {
    margin: 0 !important;
    font-family: 'Lora', serif !important;
    min-width: 220px;
}

.leaflet-popup-tip {
    background: var(--bg-medium) !important;
    border: 1px solid var(--gold-dark) !important;
    box-shadow: none !important;
}

.leaflet-popup-close-button {
    color: var(--gold) !important;
    font-size: 20px !important;
    padding: 6px 10px !important;
}

.leaflet-popup-close-button:hover {
    color: var(--gold-light) !important;
}

/* Popup Content Styling */
.popup-content {
    padding: 16px 20px;
}

.popup-content h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: var(--gold);
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.popup-content p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 12px;
}

.popup-content .popup-footer {
    padding-top: 8px;
    border-top: 1px solid rgba(201,168,76,0.2);
    text-align: center;
}

.popup-content .popup-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);
    border: none;
    border-radius: 6px;
    color: var(--bg-dark);
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.popup-content .popup-btn:hover {
    box-shadow: 0 0 15px rgba(201,168,76,0.5);
    transform: translateY(-1px);
}

.popup-regions-count {
    font-size: 0.75rem;
    color: var(--gold-dark);
    margin-bottom: 4px;
}

/* ============================================
   ANIMATED OCEAN TILES
   ============================================ */

.ocean-bg {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(25,55,80,0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(20,50,75,0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(30,60,85,0.3) 0%, transparent 40%),
        linear-gradient(180deg, #0d1b2a 0%, #1b2838 40%, #162030 100%);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    #nav-title {
        font-size: 1.1rem;
        letter-spacing: 1px;
    }

    #nav-compass {
        width: 28px;
        height: 28px;
    }

    #breadcrumb {
        font-size: 0.65rem;
    }

    .nav-btn {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    .continent-label {
        font-size: 12px !important;
    }

    #region-panel-content {
        width: 95%;
        max-height: 88vh;
    }

    #region-panel-hero {
        height: 160px;
    }

    #region-panel-name {
        font-size: 1.2rem;
    }

    .monster-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .monster-card-img {
        width: 80px;
        height: 80px;
    }
}

/* ============================================
   EDITOR MODE
   ============================================ */

/* Edit / Save / Cancel buttons */
#edit-mode-btn,
#cancel-edit-btn {
    position: absolute;
    top: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--gold-dark);
    background: var(--bg-dark);
    color: var(--gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: all 0.3s ease;
}

#edit-mode-btn { left: 12px; }
#cancel-edit-btn { left: 56px; }

#edit-mode-btn:hover { background: var(--gold-dark); color: var(--parchment); }
#cancel-edit-btn { border-color: var(--red-danger); color: var(--red-light); }
#cancel-edit-btn:hover { background: var(--red-danger); color: #fff; }

.edit-mode #edit-mode-btn {
    border-color: var(--green-safe);
    color: var(--green-safe);
    box-shadow: 0 0 12px rgba(39,174,96,0.4);
}

/* Inputs */
.edit-input,
.edit-textarea {
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--gold-dark);
    color: var(--parchment);
    font-family: 'Lora', serif;
    font-size: 0.95rem;
    border-radius: 6px;
    padding: 8px 12px;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.edit-input:focus,
.edit-textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 8px rgba(201,168,76,0.3);
    outline: none;
}

/* Anti-autofill: o Chrome pinta inputs preenchidos por autocomplete de branco/
   amarelo, ignorando o `background`. O box-shadow inset forca de volta o fundo
   escuro da paleta. Cobre todos os inputs do projeto: .edit-input + os modais
   (.mestre-form-body) + o form de habilidade. */
.edit-input:-webkit-autofill,
.edit-input:-webkit-autofill:hover,
.edit-input:-webkit-autofill:focus,
.edit-textarea:-webkit-autofill,
.mestre-form-body input:-webkit-autofill,
.mestre-form-body input:-webkit-autofill:hover,
.mestre-form-body input:-webkit-autofill:focus,
.mestre-form-body textarea:-webkit-autofill,
.hab-form-content input:-webkit-autofill,
.hab-form-content textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px rgba(15,10,5,0.98) inset;
    -webkit-text-fill-color: var(--parchment, #e8d8b8);
    caret-color: var(--parchment, #e8d8b8);
    transition: background-color 9999s ease-in-out 0s;
}

.edit-textarea {
    resize: vertical;
    min-height: 60px;
}

.edit-name {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    background: transparent;
    border: 1px dashed var(--gold-dark);
}

.edit-sm {
    width: auto;
    min-width: 80px;
    padding: 4px 8px;
    font-size: 0.85rem;
}

.edit-emoji {
    width: 60px;
    text-align: center;
    font-size: 1.5rem;
    padding: 4px;
}

/* Range slider */
.edit-range-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-range {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--bg-light);
    border-radius: 3px;
    outline: none;
}

.edit-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gold);
    cursor: pointer;
    border: 2px solid var(--gold-dark);
}

.edit-range-value {
    color: var(--gold-light);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.1rem;
    min-width: 30px;
    text-align: center;
}

/* Nivel wrap */
/* Chances Editor */
.edit-chances-section {
    margin-top: 12px;
    padding: 10px;
    border: 1px solid rgba(201,168,76,0.15);
    border-radius: 8px;
    background: rgba(0,0,0,0.15);
}

.chances-editor-title {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.chances-editor-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(201,168,76,0.1);
}

.chances-editor-special {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chances-editor-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chances-editor-label {
    flex: 0 0 70px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.chances-editor-val {
    flex: 0 0 36px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--parchment);
}

.chances-editor-btn {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 4px;
    background: rgba(0,0,0,0.3);
    color: var(--gold-light);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s;
}

.chances-editor-btn:hover {
    background: rgba(201,168,76,0.2);
}

.edit-nivel-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 8px 0;
}

.edit-nivel-wrap .label {
    color: var(--text-muted);
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.edit-nivel {
    max-width: 120px;
}

/* Edit card fields */
.edit-card-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0;
}

.edit-field-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

.edit-field-inline span {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.edit-field-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.edit-field-block span {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Skills editing */
.edit-skills-section {
    margin-top: 6px;
}

.edit-skills-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 6px;
}

.edit-skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.skill-tag.editable {
    position: relative;
    padding-right: 22px;
}

.skill-remove {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--red-light);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
}

.skill-remove:hover { color: #fff; }

.skill-add-wrap {
    display: flex;
    gap: 4px;
    align-items: center;
}

.edit-skill-input {
    width: 140px !important;
    padding: 4px 8px !important;
    font-size: 0.85rem !important;
}

select.edit-skill-input {
    width: 100% !important;
    flex: 1;
    min-width: 0;
}

.btn-skill-add {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--gold-dark);
    background: transparent;
    color: var(--gold);
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-skill-add:hover { background: var(--gold-dark); color: var(--parchment); }

/* Delete button on cards */
.card-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--red-danger);
    background: rgba(192,57,43,0.2);
    color: var(--red-light);
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.edit-card { position: relative; }
.edit-card:hover .card-delete-btn { opacity: 1; }
.card-delete-btn:hover { background: var(--red-danger); color: #fff; }

/* Add item */
.add-item-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    padding: 12px;
    border: 2px dashed var(--gold-dark);
    border-radius: 10px;
    background: rgba(0,0,0,0.2);
}

.add-monster-select {
    flex: 1;
}

.btn-add-item {
    padding: 8px 16px;
    border: 2px solid var(--gold-dark);
    border-radius: 8px;
    background: transparent;
    color: var(--gold);
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: all 0.2s;
}

.btn-add-item:hover { background: var(--gold-dark); color: var(--parchment); }
.btn-add-item.full-width { width: 100%; margin-top: 12px; }

/* ============================================
   BESTIARY PANEL
   ============================================ */

/* Habilidades Panel (same pattern as bestiary) */
#habilidades-panel { position: fixed; inset: 0; z-index: 2000; transition: opacity 0.3s; }
#habilidades-panel.hidden { display: none; }
#habilidades-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.7); }
#habilidades-content {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 92%; max-width: 700px; max-height: 85vh; overflow-y: auto;
    background: linear-gradient(135deg, var(--bg-dark), var(--bg-medium));
    border: 2px solid var(--gold-dark); border-radius: 14px;
    padding: 24px; box-shadow: var(--shadow-strong), var(--shadow-glow);
}

.habilidades-list-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hab-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(201,168,76,0.15);
    border-radius: 8px;
    background: rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.2s;
}

.hab-list-item:hover {
    border-color: var(--gold-dark);
    background: rgba(201,168,76,0.05);
}

.hab-tipo-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--gold-dark);
    padding: 1px;
    object-fit: contain;
}

.hab-info { flex: 1; min-width: 0; }
.hab-nome { color: var(--parchment); font-weight: 700; font-size: 0.9rem; }
.hab-meta { color: var(--text-muted); font-size: 0.7rem; }

.hab-cor-tag {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}

.hab-cor-negra { background: rgba(192,57,43,0.3); color: #e74c3c; }
.hab-cor-branca { background: rgba(46,204,113,0.3); color: #2ecc71; }

.hab-actions {
    display: flex;
    gap: 4px;
}

.hab-actions button {
    width: 24px; height: 24px; border-radius: 50%;
    border: 1px solid rgba(201,168,76,0.2); background: rgba(0,0,0,0.3);
    color: var(--text-muted); cursor: pointer; font-size: 0.7rem;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}

.hab-actions button:hover { border-color: var(--gold); color: var(--gold); }
.hab-actions .hab-delete:hover { border-color: var(--red-danger); color: var(--red-danger); }

/* Region character selector - positioned top-right of hero */
.region-char-selector {
    position: absolute;
    top: 50px;
    right: 10px;
    z-index: 5;
}

.region-char-active {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 5px;
    border-radius: 24px;
    background: rgba(0,0,0,0.7);
    border: 1.5px solid rgba(201,168,76,0.4);
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}

.region-char-active:hover {
    border-color: var(--gold);
    background: rgba(0,0,0,0.85);
}

.region-char-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--gold-dark);
    object-fit: cover;
}

.region-char-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    font-size: 1rem;
}

.region-char-info {
    display: flex;
    flex-direction: column;
}

.region-char-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: var(--parchment);
    font-size: 0.7rem;
    line-height: 1.1;
}

.region-char-level {
    font-size: 0.6rem;
    color: var(--gold);
}

.region-char-switch-icon {
    font-size: 0.8rem;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.region-char-active:hover .region-char-switch-icon {
    opacity: 1;
}

.region-char-selected {
    border-color: var(--gold) !important;
    background: rgba(201,168,76,0.1) !important;
}

/* Region search area */
.region-search-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px 0;
}

.region-search-info {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}

.region-chances-readonly {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 6px 0;
}

.region-chance-tag {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.05);
}

.region-search-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.region-search-btn {
    font-size: 1rem !important;
    padding: 12px 32px !important;
}

.region-catalog-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(201,168,76,0.3);
    background: rgba(0,0,0,0.4);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.region-catalog-btn:hover {
    border-color: var(--gold);
    background: rgba(201,168,76,0.1);
}

/* Catalog modal */
.catalog-modal {
    max-width: 500px;
}

.catalog-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
}

.catalog-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(201,168,76,0.1);
}

.catalog-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(0,0,0,0.3);
}

.catalog-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.catalog-name {
    color: var(--parchment);
    font-weight: 700;
    font-size: 0.85rem;
}

.catalog-rar {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.catalog-rar-comum { color: #999; }
.catalog-rar-raro { color: #5dade2; }
.catalog-rar-epico { color: #bb8fce; }
.catalog-rar-lendario { color: var(--gold-light); }

.catalog-types {
    display: flex;
    gap: 4px;
}

/* Chances Modal */
.chances-modal {
    max-width: 460px;
}

.chances-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 450px;
    overflow-y: auto;
    padding: 4px 0;
}

.chances-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chances-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chances-raridade {
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chances-percent {
    font-weight: 700;
    font-size: 0.95rem;
}

.chances-bar-bg {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}

.chances-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.chances-monstros {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 8px;
}

.chances-monstro-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0,0,0,0.2);
}

.chances-monstro-item .catalog-img {
    width: 32px;
    height: 32px;
}

.chances-monstro-item .catalog-name {
    flex: 1;
    font-size: 0.8rem;
}

.chances-monstro-percent {
    color: var(--parchment);
    font-weight: 700;
    font-size: 0.8rem;
    opacity: 0.8;
}

.chances-monstro-none {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-style: italic;
}

/* ============================================
   SHINY MONSTER - Efeito Holografico/Foil
   ============================================ */

.shiny-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* F7.7: selos de limitado (medalha) / exclusivo (estrela) sobre o card do monstro. */
.monster-selo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.95rem;
    line-height: 1;
    z-index: 6;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}
.monster-selo-limitado {
    left: 2px;
    width: 22px;
    height: auto;
}
.monster-selo-exclusivo {
    right: 2px;
    width: 22px;
    height: auto;
}

/* === ARQUITETURA DE CAMADAS DE VARIANTE ===
   Cada variante (shiny/elite/ultimate/unique) tem sua propria <span class="variant-layer
   variant-X"></span> dentro do .shiny-wrapper. Quando ha mais de uma variante, o wrapper
   ganha .multi-N e cada layer alterna em slot via opacity (crossfade suave entre as cores
   antes de ir pra proxima). Isso evita poluicao visual e cria uma transicao agradavel. */

.variant-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-sizing: border-box;
}

/* Keyframes de slot: cada variante visivel ~1/N do ciclo, com ~8% de crossfade nas bordas */
@keyframes variant-slot-2 {
    0%, 100% { opacity: 1; }
    42%      { opacity: 1; }
    50%      { opacity: 0; }
    92%      { opacity: 0; }
}
@keyframes variant-slot-3 {
    0%, 100% { opacity: 1; }
    27%      { opacity: 1; }
    33%      { opacity: 0; }
    94%      { opacity: 0; }
}
@keyframes variant-slot-4 {
    0%, 100% { opacity: 1; }
    20%      { opacity: 1; }
    25%      { opacity: 0; }
    95%      { opacity: 0; }
}

/* === FOIL HOLOGRAFICO (shiny layer) === */
.variant-layer.variant-shiny {
    background: linear-gradient(
        135deg,
        transparent 15%,
        rgba(255,255,255,0.18) 30%,
        rgba(180,130,255,0.12) 40%,
        rgba(100,200,255,0.12) 50%,
        rgba(255,220,100,0.10) 60%,
        rgba(255,255,255,0.18) 70%,
        transparent 85%
    );
    background-size: 250% 250%;
    animation: shiny-foil 3s ease-in-out infinite;
    mix-blend-mode: screen;
}

@keyframes shiny-foil {
    0%, 100% { background-position: 0% 0%; }
    50%      { background-position: 100% 100%; }
}

@keyframes shiny-sparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.3); }
}

/* === Bordas APROVADAS (oficiais) ===
   Aplicadas na IMAGEM do monstro via .shiny-wrapper.is-{elite,ultimate}.

   Elite    = #10 do modal de teste (cyan + magenta + dourado)
   Ultimate = #7  do modal de teste (vermelho neon + branco + magenta)
*/

/* Shake comum aos wrappers Elite/Ultimate (Unique não tem shake) */
.shiny-wrapper.is-elite,
.shiny-wrapper.is-ultimate {
    position: relative;
    display: inline-block;
    animation: official-shake 1.8s ease-in-out infinite;
}
.shiny-wrapper.is-unique {
    position: relative;
    display: inline-block;
}
@keyframes official-shake {
    0%, 100% { transform: translate(0, 0); }
    20%      { transform: translate(-1px, 0); }
    40%      { transform: translate(1px, 1px); }
    60%      { transform: translate(0, -1px); }
    80%      { transform: translate(1px, 0); }
}

/* === ELITE LAYER: cyan / magenta / dourado glitch === */
.variant-layer.variant-elite {
    border: 2px solid #ffd700;
    border-radius: 6px;
    z-index: 4;
    box-shadow:
        -3px 0 0 rgba(255, 0, 200, 0.6),
        3px 0 0 rgba(0, 220, 255, 0.6),
        0 0 8px rgba(255, 215, 0, 0.6);
    animation: elite-glitch 2.4s steps(8) infinite;
}
@keyframes elite-glitch {
    0%, 100% { box-shadow: -3px 0 0 rgba(255,0,200,0.6),  3px 0 0 rgba(0,220,255,0.6), 0 0 8px rgba(255,215,0,0.6); }
    25%      { box-shadow:  4px 0 0 rgba(255,0,200,0.6), -4px 0 0 rgba(0,220,255,0.6), 0 0 12px rgba(255,215,0,0.7); }
    50%      { box-shadow: -2px 2px 0 rgba(255,0,200,0.6), 2px -2px 0 rgba(0,220,255,0.6), 0 0 10px rgba(255,215,0,0.6); }
    75%      { box-shadow:  3px -1px 0 rgba(255,0,200,0.6), -3px 1px 0 rgba(0,220,255,0.6), 0 0 14px rgba(255,215,0,0.8); }
}

/* === ULTIMATE LAYER: vermelho sangue (#8b0000 DarkRed) com glitch
   em sombras vermelho-escuro + crimson splash (substituiu o antigo
   neon vermelho + branco + magenta). === */
.variant-layer.variant-ultimate {
    border: 2px solid #8b0000;
    border-radius: 6px;
    z-index: 4;
    box-shadow:
        -3px 0 0 rgba(60, 0, 0, 0.85),
         3px 0 0 rgba(255, 80, 80, 0.7),
        0 0 14px rgba(139, 0, 0, 0.7);
    animation: ultimate-glitch 2.4s steps(8) infinite;
}
@keyframes ultimate-glitch {
    0%, 100% { box-shadow: -3px 0 0 rgba(60,0,0,0.85),  3px 0 0 rgba(255,80,80,0.7), 0 0 14px rgba(139,0,0,0.7); }
    25%      { box-shadow:  4px 0 0 rgba(60,0,0,0.85), -4px 0 0 rgba(255,80,80,0.7), 0 0 22px rgba(139,0,0,0.9); }
    50%      { box-shadow: -2px 2px 0 rgba(60,0,0,0.85), 2px -2px 0 rgba(255,80,80,0.7), 0 0 18px rgba(139,0,0,0.8); }
    75%      { box-shadow:  3px -1px 0 rgba(60,0,0,0.85), -3px 1px 0 rgba(255,80,80,0.7), 0 0 26px rgba(139,0,0,1); }
}

/* === UNIQUE LAYER: L-Bracket dourado nos 4 cantos (::before) +
       Cross Sweep X que aparece, some e volta (::after) === */
.variant-layer.variant-unique {
    z-index: 4;
}
.variant-layer.variant-unique::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(#ffb070,#ffb070), linear-gradient(#ffb070,#ffb070),
        linear-gradient(#ffb070,#ffb070), linear-gradient(#ffb070,#ffb070),
        linear-gradient(#ffb070,#ffb070), linear-gradient(#ffb070,#ffb070),
        linear-gradient(#ffb070,#ffb070), linear-gradient(#ffb070,#ffb070);
    background-size:
        18px 4px, 4px 18px, 18px 4px, 4px 18px,
        18px 4px, 4px 18px, 18px 4px, 4px 18px;
    background-position:
        0 0, 0 0, 100% 0, 100% 0,
        0 100%, 0 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
    animation: corner-pulse-d4 2.4s ease-in-out infinite;
}
.variant-layer.variant-unique::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    background:
        linear-gradient(60deg,  transparent 38%, rgba(255,240,190,0.55) 47%, rgba(255,215,135,0.95) 50%, rgba(255,240,190,0.55) 53%, transparent 62%),
        linear-gradient(-60deg, transparent 38%, rgba(255,240,190,0.55) 47%, rgba(255,215,135,0.95) 50%, rgba(255,240,190,0.55) 53%, transparent 62%);
    background-size: 220% 220%, 220% 220%;
    background-repeat: no-repeat, no-repeat;
    animation: unique-cross-sweep 6.4s ease-in-out infinite;
}
@keyframes unique-cross-sweep {
    0%, 8%    { opacity: 0; background-position: -110% 110%, 110% 110%; }
    14%       { opacity: 1; }
    32%       { opacity: 1; background-position: 110% -110%, -110% -110%; }
    40%, 100% { opacity: 0; background-position: 110% -110%, -110% -110%; }
}

/* === MULTI-VARIANTE: adiciona slot de crossfade as layers ===
   Cada variant-layer mantem sua animacao primaria + ganha animacao de slot que
   alterna sua opacidade. animation-delay negativo defasa cada slot conforme
   a posicao (--slot) atribuida no HTML. === */

/* multi-2: ELITE + ULTIMATE alternam em ciclo 4s (cada visivel ~2s + crossfade ~0.32s).
   Shiny e Unique NAO entram no rodizio - sempre visiveis quando presentes. */
.shiny-wrapper.multi-2 .variant-layer.variant-elite {
    animation: elite-glitch 2.4s steps(8) infinite, variant-slot-2 4s linear infinite;
    animation-delay: 0s, calc(var(--slot, 0) * -2s);
}
.shiny-wrapper.multi-2 .variant-layer.variant-ultimate {
    animation: ultimate-glitch 2.4s steps(8) infinite, variant-slot-2 4s linear infinite;
    animation-delay: 0s, calc(var(--slot, 0) * -2s);
}

/* Stack: shiny no fundo, elite/ultimate no meio, unique no topo */
.variant-layer.variant-shiny    { z-index: 3; }
.variant-layer.variant-elite,
.variant-layer.variant-ultimate { z-index: 4; }
.variant-layer.variant-unique   { z-index: 5; }

@keyframes elite-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.15); }
}

/* Editor Shiny */
.shiny-editor-section {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 8px;
    background: rgba(0,0,0,0.2);
}

.shiny-editor-title {
    color: var(--gold-light);
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.shiny-preview-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 14px;
}

.shiny-preview-box {
    text-align: center;
}

.shiny-preview-box img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(0,0,0,0.3);
}

.shiny-preview-box .shiny-wrapper {
    width: 80px;
    height: 80px;
}

.shiny-preview-box .shiny-wrapper img {
    width: 80px;
    height: 80px;
}

.shiny-preview-label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shiny-preview-arrow {
    color: var(--gold-dark);
    font-size: 1.2rem;
}

.shiny-sliders {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shiny-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shiny-slider-row label {
    flex: 0 0 110px;
    font-size: 0.75rem;
    color: var(--parchment-dark);
}

.shiny-slider-row input[type="range"] {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    outline: none;
}

.shiny-slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gold);
    cursor: pointer;
    border: 2px solid var(--bg-dark);
}

.shiny-slider-row input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gold);
    cursor: pointer;
    border: 2px solid var(--bg-dark);
}

.shiny-slider-val {
    flex: 0 0 50px;
    text-align: right;
    font-size: 0.75rem;
    color: var(--gold-light);
    font-weight: 700;
}

.shiny-slider-row input[type="color"] {
    width: 28px;
    height: 28px;
    border: 2px solid var(--gold-dark);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.shiny-slider-row input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 1px;
}

.shiny-slider-row input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}

/* Shiny Presets */
.shiny-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 10px;
}

.shiny-presets-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 2px;
}

.shiny-preset-btn {
    padding: 4px 8px;
    font-size: 0.7rem;
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 4px;
    background: rgba(0,0,0,0.2);
    color: var(--parchment-dark);
    cursor: pointer;
    transition: all 0.2s;
}

.shiny-preset-btn:hover {
    background: rgba(201,168,76,0.15);
    border-color: var(--gold);
    color: var(--gold-light);
}

.encounter-shiny-label {
    color: #ffe066;
    font-size: 0.8rem;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255,224,102,0.6);
    animation: shiny-sparkle 2s ease-in-out infinite;
}

.encounter-elite-label {
    color: #ffd700;
    font-size: 0.8rem;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255,215,0,0.6);
    animation: elite-pulse 2.5s ease-in-out infinite;
}

.encounter-unique-label {
    color: #ffb070;
    font-size: 0.8rem;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255,176,112,0.7);
    animation: elite-pulse 2.5s ease-in-out infinite;
}

/* Monster Encounter Animation */
.encounter-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.95) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: encounterFadeIn 0.5s ease-out;
}

@keyframes encounterFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.encounter-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.encounter-silhouette {
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.6s ease-out;
}

.encounter-silhouette.visible {
    opacity: 1;
    transform: scale(1);
}

.encounter-silhouette .encounter-img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    filter: brightness(0) drop-shadow(0 0 20px rgba(201,168,76,0.3));
    transition: filter 0.8s ease-out;
}

.encounter-silhouette.revealed .encounter-img {
    filter: brightness(1) drop-shadow(0 0 30px rgba(201,168,76,0.5));
}

/* Shiny Flash */
.shiny-flash {
    position: fixed;
    inset: 0;
    z-index: 9001;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
}

.shiny-flash.active {
    opacity: 1;
    animation: shiny-glow 2s ease-out forwards;
}

@keyframes shiny-glow {
    0% { background: transparent; }
    8% { background: radial-gradient(circle at 50% 45%, rgba(255,240,150,0.5) 0%, transparent 60%); }
    25% { background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.35) 0%, rgba(255,215,0,0.1) 40%, transparent 70%); }
    50% { background: radial-gradient(circle at 50% 45%, rgba(255,240,150,0.15) 0%, transparent 50%); }
    100% { background: transparent; opacity: 0; }
}

.shiny-spark {
    position: absolute;
    color: #ffe066;
    pointer-events: none;
    opacity: 0;
    animation: shiny-spark-fly var(--dur) ease-out var(--delay) forwards;
    text-shadow: 0 0 6px rgba(255,224,102,0.9), 0 0 15px rgba(255,180,0,0.5);
}

@keyframes shiny-spark-fly {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.3);
    }
    20% {
        opacity: 1;
        transform: translate(calc(var(--dx) * 0.3), calc(var(--dy) * 0.3)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(0.5);
    }
}

.monster-card-modal-img {
    width: 160px;
    height: 160px;
    object-fit: contain;
}

.encounter-info {
    text-align: center;
    animation: encounterSlideUp 0.5s ease-out;
}

.encounter-info.hidden {
    display: none;
}

@keyframes encounterSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.encounter-name {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.8rem;
    color: var(--gold-light);
    margin-bottom: 8px;
}

.encounter-details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}

.encounter-level {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: var(--parchment);
    font-size: 1.1rem;
}

.encounter-raridade {
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.encounter-rar-comum { background: rgba(150,150,150,0.3); color: #ccc; }
.encounter-rar-raro { background: rgba(41,128,185,0.3); color: #5dade2; }
.encounter-rar-epico { background: rgba(142,68,173,0.3); color: #bb8fce; }
.encounter-rar-lendario { background: rgba(201,168,76,0.3); color: var(--gold-light); }

.encounter-types {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.encounter-text {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: var(--text-muted);
    animation: encounterPulse 1.5s ease-in-out infinite;
}

.encounter-text.clickable {
    color: var(--gold);
    cursor: pointer;
    animation: encounterPulse 0.8s ease-in-out infinite;
}

@keyframes encounterPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Game Modal */
/* v0.32.65: z-index alto pra ficar acima de TODOS os modais (mestrar-backdrop=11500, mestre-painel-backdrop=9500) */
.game-modal-backdrop { z-index: 12000 !important; }
.game-modal { max-width: 420px; }
.game-modal-msg {
    color: var(--parchment);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 4px;
}

.hf-range-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hf-range-wrap input[type="range"] {
    flex: 1;
    accent-color: var(--gold);
}

.hf-range-wrap span {
    min-width: 20px;
    text-align: center;
    color: var(--gold-light);
    font-weight: 700;
}

#bestiary-panel {
    position: fixed;
    inset: 0;
    z-index: 2000;
    transition: opacity 0.3s;
}

#bestiary-panel.hidden {
    display: none;
}

#bestiary-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
}

#bestiary-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: 800px;
    max-height: 85vh;
    overflow-y: auto;
    background: linear-gradient(135deg, var(--bg-dark), var(--bg-medium));
    border: 2px solid var(--gold-dark);
    border-radius: 14px;
    padding: 24px;
    box-shadow: var(--shadow-strong), var(--shadow-glow);
}

.bestiary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.bestiary-header h2 {
    font-family: 'Cinzel Decorative', serif;
    color: var(--gold-light);
    font-size: 1.6rem;
}

/* Botao de fechar padronizado para todos os paineis */
.panel-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--gold-dark);
    background: var(--bg-dark);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-close-btn:hover { color: var(--parchment); border-color: var(--gold); }

.bestiary-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

#bestiary-search { flex: 1; }

/* Filtro avancado do bestiario */
.bestiary-filter-wrap {
    position: relative;
}

.bestiary-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(201,168,76,0.1);
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 6px;
    color: var(--gold-light);
    cursor: pointer;
    transition: all 0.2s;
}

.bestiary-filter-btn:hover {
    background: var(--gold-dark);
    color: var(--bg-dark);
}

.bestiary-filter-btn.active {
    background: var(--gold);
    color: var(--bg-dark);
    border-color: var(--gold-light);
    box-shadow: 0 0 10px rgba(201,168,76,0.4);
}

.bestiary-filter-dropdown {
    position: absolute;
    top: 44px;
    right: 0;
    z-index: 100;
    background: var(--bg-dark);
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 8px;
    padding: 12px;
    min-width: 280px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}

.bestiary-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: var(--gold);
}

.bestiary-filter-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
}

.bestiary-filter-clear:hover {
    color: var(--gold-light);
}

/* v0.36.0: chips do filtro de NPC (tipo + visibilidade) */
.npc-filter-vis-row,
.npc-filter-tipo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0 8px;
}
.npc-vis-chip,
.npc-tipo-chip {
    background: rgba(0, 0, 0, 0.4);
    color: var(--gold-light, #f3da9c);
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 999px;
    padding: 5px 12px;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.npc-vis-chip:hover,
.npc-tipo-chip:hover {
    border-color: var(--gold-light, #f3da9c);
}
.npc-vis-chip.selected,
.npc-tipo-chip.selected {
    background: linear-gradient(135deg, var(--gold-light, #f3da9c), var(--gold-dark, #8b6914));
    color: #1a120a;
    border-color: var(--gold, #c9a84c);
    font-weight: 700;
}

/* v0.32.37 — filtro de tipos: grid 5 colunas, ICONES SO (sem texto) */
.bestiary-filter-tipos {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.bestiary-filter-tipo-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 50%;
    border: 1px solid rgba(201,168,76,0.2);
    background: rgba(0,0,0,0.3);
    cursor: pointer;
    transition: all 0.2s;
}

.bestiary-filter-tipo-tag img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: contain;
}

.bestiary-filter-tipo-tag:hover {
    border-color: var(--gold-dark);
    background: rgba(201,168,76,0.08);
}

.bestiary-filter-tipo-tag.selected {
    border-color: var(--gold);
    background: rgba(201,168,76,0.2);
    color: var(--gold-light);
}

/* Bestiary grid of cards — 5 por linha, 10 por pagina */
.bestiary-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    padding: 4px 0;
}

/* Paginacao do bestiario */
.bestiary-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 8px 0;
}

.bestiary-pagination button {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(201,168,76,0.3);
    color: var(--text-light);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.bestiary-pagination button:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(201,168,76,0.1);
}

.bestiary-pagination button:disabled {
    opacity: 0.3;
    cursor: default;
}

.bestiary-pagination .bestiary-page-info {
    color: var(--text-muted);
    font-size: 0.85rem;
    min-width: 80px;
    text-align: center;
}

/* v0.39.7: pagina\u{e7}\u{e3}o do passe (jogador) fica logo abaixo das recompensas,
   dentro de .passe-grid mas FORA do .passe-page-content. Assim ela centraliza
   na largura visivel do modal (n\u{e3}o na largura total do conteudo, que pode
   ter scroll horizontal). `position: sticky; left: 0` mant\u{e9}m os bot\u{f5}es
   visiveis mesmo quando o usuario rola horizontalmente nas recompensas. */
.passe-grid > .bestiary-pagination {
    margin-top: 8px;
    padding: 2px 0;
    flex-shrink: 0;
    align-self: stretch;
    position: sticky;
    left: 0;
    width: 100%;
}

/* Bestiary card (Pokemon style) */
.bestiary-card {
    position: relative; /* v0.32.37: ancorar overlays (X/nuvem) no card secreto */
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 12px;
    background: rgba(0,0,0,0.3);
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
}

.bestiary-card:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(201,168,76,0.15);
}

.bestiary-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, rgba(0,0,0,0.4), rgba(201,168,76,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bestiary-card-img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

/* Fase 12 — Bestiario com sombras */
.monster-undiscovered {
    filter: brightness(0) saturate(0) !important;
    opacity: 0.78;
    transition: filter 0.4s ease, opacity 0.4s ease;
}

.catalog-entry-undiscovered .catalog-name {
    color: #555;
    font-style: italic;
    letter-spacing: 0.18em;
}

.catalog-entry-undiscovered {
    position: relative;
}

.catalog-entry-undiscovered::after {
    content: '?';
    position: absolute;
    top: 6px;
    right: 8px;
    font-family: var(--font-display, 'Cinzel', serif);
    font-weight: 700;
    color: rgba(201, 168, 76, 0.55);
    font-size: 1rem;
    pointer-events: none;
}

.monstro-encontrado-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    object-fit: contain;
    pointer-events: auto;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
    z-index: 3;
}

/* Shiny wrapper dentro de cards do bestiario */
.bestiary-card-img-wrap > .shiny-wrapper {
    width: 80%;
    height: 80%;
}

.bestiary-card-img-wrap > .shiny-wrapper > .bestiary-card-img {
    width: 100%;
    height: 100%;
}

/* SHINY FOIL — card inteiro. Quando o monstro shiny esta dentro de um
   .bestiary-card-img-wrap, o foil cobre TODO o palco — nao so os 80% da
   imagem. Reaproveita o gradiente de .variant-layer.variant-shiny (2229)
   e o @keyframes shiny-foil (2245). Em battle/arena/encounter (sem este
   wrapper) o foil continua dentro do .shiny-wrapper, inalterado. */
.bestiary-card-img-wrap:has(> .shiny-wrapper.is-shiny)::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        135deg,
        transparent 15%,
        rgba(255,255,255,0.18) 30%,
        rgba(180,130,255,0.12) 40%,
        rgba(100,200,255,0.12) 50%,
        rgba(255,220,100,0.10) 60%,
        rgba(255,255,255,0.18) 70%,
        transparent 85%
    );
    background-size: 250% 250%;
    animation: shiny-foil 3s ease-in-out infinite;
    mix-blend-mode: screen;
}

/* Evita foil duplicado: a layer shiny interna (80%) some no palco. */
.bestiary-card-img-wrap > .shiny-wrapper.is-shiny > .variant-layer.variant-shiny {
    display: none;
}

/* Shiny + Elite/Ultimate: wrapper sobe acima do foil de card para que as
   bordas glitch (variant-layer z:4 interna) continuem nitidas. */
.bestiary-card-img-wrap > .shiny-wrapper.is-elite,
.bestiary-card-img-wrap > .shiny-wrapper.is-ultimate {
    z-index: 2;
}

/* Card oculto pelo narrador (is-hidden) — esconde tambem o foil novo. */
.bestiary-card.is-hidden .bestiary-card-img-wrap::after {
    display: none;
}

/* ============================================
   ELITE BORDER TEMPLATES — teste comparativo (10 opcoes).
   Quando body.elite-tpl-N ativo, a borda elite cobre TODO o card
   (.bestiary-card-img-wrap), em versoes mais neutras que a borda
   elite original (que ficava so no .shiny-wrapper, 80% da imagem).
   Toggle e persistencia em engine/ui/elite_border_test.js.
   ============================================ */

/* Base: em qualquer template ativo, suprime a variant-elite interna
   (que cobria so a imagem) e o shake do wrapper — o efeito agora vive
   no card inteiro. Em battle/arena/encounter (sem .bestiary-card-img-wrap)
   nada disso casa, comportamento atual intacto. */
body[class*="elite-tpl-"] .bestiary-card-img-wrap > .shiny-wrapper.is-elite > .variant-layer.variant-elite {
    display: none;
}
body[class*="elite-tpl-"] .bestiary-card-img-wrap > .shiny-wrapper.is-elite {
    animation: none;
}

/* Paleta tricolor herdada do glitch elite original (.variant-layer.variant-elite):
   ouro #ffd700 (borda), magenta rgba(255,0,200,.6) (esquerda),
   ciano  rgba(0,220,255,.6) (direita), glow rgba(255,215,0,.6).
   Todos os templates usam essa mesma identidade — variando intensidade,
   distribuicao espacial e tipo de movimento. */

/* Template 0 — Glitch portado: replica fiel do .variant-layer.variant-elite
   original (offsets +-3/4px, 4 keyframes), agora cobrindo o card inteiro. */
body.elite-tpl-0 .bestiary-card-img-wrap:has(> .shiny-wrapper.is-elite)::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border: 3px solid #ffd700;
    box-sizing: border-box;
    animation: elite-tpl-glitch-full 2.4s steps(8) infinite;
}
@keyframes elite-tpl-glitch-full {
    0%, 100% { box-shadow: -3px 0 0 rgba(255,0,200,0.6),  3px 0 0 rgba(0,220,255,0.6), 0 0 8px rgba(255,215,0,0.6); }
    25%      { box-shadow:  4px 0 0 rgba(255,0,200,0.6), -4px 0 0 rgba(0,220,255,0.6), 0 0 12px rgba(255,215,0,0.7); }
    50%      { box-shadow: -2px 2px 0 rgba(255,0,200,0.6), 2px -2px 0 rgba(0,220,255,0.6), 0 0 10px rgba(255,215,0,0.6); }
    75%      { box-shadow:  3px -1px 0 rgba(255,0,200,0.6), -3px 1px 0 rgba(0,220,255,0.6), 0 0 14px rgba(255,215,0,0.8); }
}

/* Template 1 — Glitch sutil: mesma paleta, offsets +-1px (menos frenetico). */
body.elite-tpl-1 .bestiary-card-img-wrap:has(> .shiny-wrapper.is-elite)::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border: 3px solid #ffd700;
    box-sizing: border-box;
    animation: elite-tpl-glitch-1 2.4s steps(8) infinite;
}
@keyframes elite-tpl-glitch-1 {
    0%, 100% { box-shadow: -1px 0 0 rgba(255,0,200,0.5),  1px 0 0 rgba(0,220,255,0.5), 0 0 6px rgba(255,215,0,0.5); }
    50%      { box-shadow:  1px 0 0 rgba(255,0,200,0.5), -1px 0 0 rgba(0,220,255,0.5), 0 0 8px rgba(255,215,0,0.6); }
}

/* Template 2 — Glitch medio: offsets +-2px. */
body.elite-tpl-2 .bestiary-card-img-wrap:has(> .shiny-wrapper.is-elite)::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border: 3px solid #ffd700;
    box-sizing: border-box;
    animation: elite-tpl-glitch-2 2.4s steps(8) infinite;
}
@keyframes elite-tpl-glitch-2 {
    0%, 100% { box-shadow: -2px 0 0 rgba(255,0,200,0.55),  2px 0 0 rgba(0,220,255,0.55), 0 0 7px rgba(255,215,0,0.55); }
    25%      { box-shadow:  2px 0 0 rgba(255,0,200,0.55), -2px 0 0 rgba(0,220,255,0.55), 0 0 9px rgba(255,215,0,0.65); }
    50%      { box-shadow: -1px 1px 0 rgba(255,0,200,0.55), 1px -1px 0 rgba(0,220,255,0.55), 0 0 8px rgba(255,215,0,0.6); }
    75%      { box-shadow:  2px -1px 0 rgba(255,0,200,0.55), -2px 1px 0 rgba(0,220,255,0.55), 0 0 10px rgba(255,215,0,0.7); }
}

/* Template 3 — Glitch lento: offsets do template 0, animacao em 4s
   (mesma intensidade visual, ritmo mais calmo). */
body.elite-tpl-3 .bestiary-card-img-wrap:has(> .shiny-wrapper.is-elite)::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border: 3px solid #ffd700;
    box-sizing: border-box;
    animation: elite-tpl-glitch-full 4s steps(10) infinite;
}

/* Template 4 — Borda gold + inset glow tricolor pulsante (magenta -> gold -> ciano). */
body.elite-tpl-4 .bestiary-card-img-wrap:has(> .shiny-wrapper.is-elite)::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border: 3px solid #ffd700;
    box-sizing: border-box;
    animation: elite-tpl-glow-cycle 4s ease-in-out infinite;
}
@keyframes elite-tpl-glow-cycle {
    0%, 100% { box-shadow: inset 0 0 14px rgba(255,0,200,0.55); }
    33%      { box-shadow: inset 0 0 16px rgba(255,215,0,0.7); }
    66%      { box-shadow: inset 0 0 14px rgba(0,220,255,0.55); }
}

/* Template 5 — Cantos coloridos: 4 L-brackets, um por cor da paleta
   (TL ouro, TR ciano, BL magenta, BR ouro). */
body.elite-tpl-5 .bestiary-card-img-wrap:has(> .shiny-wrapper.is-elite)::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        linear-gradient(#ffd700, #ffd700), linear-gradient(#ffd700, #ffd700),
        linear-gradient(#00dcff, #00dcff), linear-gradient(#00dcff, #00dcff),
        linear-gradient(#ff00c8, #ff00c8), linear-gradient(#ff00c8, #ff00c8),
        linear-gradient(#ffd700, #ffd700), linear-gradient(#ffd700, #ffd700);
    background-size:
        22px 5px, 5px 22px, 22px 5px, 5px 22px,
        22px 5px, 5px 22px, 22px 5px, 5px 22px;
    background-position:
        0 0, 0 0, 100% 0, 100% 0,
        0 100%, 0 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
}

/* Template 6 — Borda dupla com acento tricolor + glitch sutil. */
body.elite-tpl-6 .bestiary-card-img-wrap:has(> .shiny-wrapper.is-elite)::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border: 2px solid #ffd700;
    box-shadow:
        inset 0 0 0 5px transparent,
        inset 0 0 0 6px rgba(255,215,0,0.55),
        inset 3px 0 0 6px rgba(255,0,200,0.35),
        inset -3px 0 0 6px rgba(0,220,255,0.35);
    box-sizing: border-box;
}

/* Template 7 — Sweep tricolor: faixa horizontal ciano-ouro-magenta percorrendo. */
body.elite-tpl-7 .bestiary-card-img-wrap:has(> .shiny-wrapper.is-elite)::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border: 3px solid #ffd700;
    box-sizing: border-box;
    background: linear-gradient(90deg,
        transparent 20%,
        rgba(0,220,255,0.38) 40%,
        rgba(255,215,0,0.55) 50%,
        rgba(255,0,200,0.38) 60%,
        transparent 80%);
    background-size: 250% 100%;
    mix-blend-mode: screen;
    animation: elite-tpl-sweep 3s ease-in-out infinite;
}
@keyframes elite-tpl-sweep {
    0%, 100% { background-position: -80% 0; }
    50%      { background-position: 180% 0; }
}

/* Template 8 — Gradiente arco-iris: borda com ROYGBIV completo
   (vermelho -> laranja -> amarelo -> verde -> azul -> anil -> violeta ->
   vermelho de volta) deslizando, mask exclude pra vazar so na borda. */
body.elite-tpl-8 .bestiary-card-img-wrap:has(> .shiny-wrapper.is-elite)::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    padding: 3px;
    background: linear-gradient(135deg,
        #ff0000, #ff7f00, #ffff00, #00ff00,
        #0080ff, #4b0082, #9400d3, #ff0000);
    background-size: 300% 300%;
    -webkit-mask:
        linear-gradient(#000, #000) content-box,
        linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000, #000) content-box,
                  linear-gradient(#000, #000);
            mask-composite: exclude;
    animation: elite-tpl-grad 4s linear infinite;
    box-sizing: border-box;
}
@keyframes elite-tpl-grad {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* Template 9 — Aurora difusa: borda gold + nebulosas radiais ciano/magenta
   nos cantos opostos + glow inset gold. Sem animacao (mais sereno). */
body.elite-tpl-9 .bestiary-card-img-wrap:has(> .shiny-wrapper.is-elite)::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border: 3px solid #ffd700;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 18% 28%, rgba(0,220,255,0.22), transparent 55%),
        radial-gradient(circle at 82% 72%, rgba(255,0,200,0.22), transparent 55%);
    box-shadow: inset 0 0 14px rgba(255,215,0,0.45);
}

/* Em card escondido pelo narrador, esconde o template tambem. */
.bestiary-card.is-hidden .bestiary-card-img-wrap::before {
    display: none;
}

/* ============================================
   ULTIMATE BORDER no palco — extensao alinhada com a Elite.
   Antes Elite e Ultimate alternavam por crossfade (variant-slot-2 4s).
   Agora ambas coexistem simultaneamente:
     - Sozinhas: ocupam o anel externo do palco (0-3px do edge).
     - Juntas: Elite externa (0-3px), Ultimate logo dentro (3px+),
       com Elite por cima (z:5 > variant-ultimate z:4) em qualquer
       sobreposicao de cantos/sombras.
   Mantem a identidade Ultimate (vermelho #ff2244 + glitch magenta/branco).
   So vale dentro do .bestiary-card-img-wrap; em battle/arena/encounter
   o comportamento atual (variant-ultimate na area da imagem 80%) fica intacto.
   ============================================ */

/* Expande variant-ultimate pra alcancar a borda do palco inteiro.
   12.5% = (100/80 - 1)/2 -- o quanto cada lado precisa "vazar" alem do
   .shiny-wrapper (que ocupa 80% do palco) pra tocar a borda do wrap. */
body[class*="elite-tpl-"] .bestiary-card-img-wrap > .shiny-wrapper.is-ultimate > .variant-layer.variant-ultimate {
    inset: -12.5%;
    /* Substitui o border solido + glitch da base por um GRADIENTE DE FOGO
       animado (preto -> sangue -> vermelho -> laranja -> amarelo flamejante)
       deslizando. Mesma tecnica de mask exclude do template arco-iris elite
       (#8), reaproveitando o keyframe elite-tpl-grad. */
    border: none;
    box-shadow: none;
    padding: 5px;
    border-radius: 0;
    background: linear-gradient(135deg,
        #2d0000, #6b0000, #c41e3a, #ff4500, #ffaa00,
        #ff4500, #c41e3a, #6b0000, #2d0000);
    background-size: 300% 300%;
    -webkit-mask:
        linear-gradient(#000, #000) content-box,
        linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000, #000) content-box,
                  linear-gradient(#000, #000);
            mask-composite: exclude;
    animation: elite-tpl-grad 4s linear infinite;
    box-sizing: border-box;
}

/* Quando Elite tambem ativa, Ultimate recua 3px (fica logo apos a Elite). */
body[class*="elite-tpl-"] .bestiary-card-img-wrap:has(> .shiny-wrapper.is-elite) > .shiny-wrapper.is-ultimate > .variant-layer.variant-ultimate {
    inset: calc(-12.5% + 3px);
}

/* Desliga o shake do .shiny-wrapper.is-ultimate (mesma logica do is-elite):
   o efeito agora vive no palco, nao na imagem. */
body[class*="elite-tpl-"] .bestiary-card-img-wrap > .shiny-wrapper.is-ultimate {
    animation: none;
}

/* Quando ambas ativas, Elite ::before sobe pra z:5 -- acima do variant-
   ultimate (z:4) e variant-unique (z:3 em palco) -- garantindo "elite
   por cima" em qualquer overlap. Ainda fica abaixo dos overlays
   (selo z:6, numero z:50). */
.bestiary-card-img-wrap:has(> .shiny-wrapper.is-elite):has(> .shiny-wrapper.is-ultimate)::before,
.bestiary-card-img-wrap:has(> .shiny-wrapper.is-elite):has(> .shiny-wrapper.is-unique)::before {
    z-index: 5;
}

/* ============================================
   UNIQUE BORDER no palco — extensao em ESCALA DO CARD INTEIRO,
   preservando o visual ORIGINAL (L-brackets dourados nos 4 cantos via
   ::before + cross-sweep X iridescente via ::after). Antes ficava nos
   cantos da imagem (80%); agora os cantos vao nos cantos do palco.
   Prioridade visual: TERCEIRA -- atras de Elite (z:5) e Ultimate (z:4).
   Posicao em cascata, recua conforme as outras tambem ativas:
     - sozinho:                       cantos no edge do palco
     - + Elite:                       3px pra dentro
     - + Ultimate:                    5px pra dentro
     - + Elite + Ultimate:            8px pra dentro (3+5)
   So vale dentro do palco. Em battle/arena/encounter, mantem o
   comportamento atual (cantos na area da imagem 80%).
   ============================================ */

/* Base: expande variant-unique pra ocupar o palco inteiro. As pseudos
   ::before (L-brackets) e ::after (cross-sweep) continuam normais
   pois ja usam inset:0 do proprio variant-unique. */
body[class*="elite-tpl-"] .bestiary-card-img-wrap > .shiny-wrapper.is-unique > .variant-layer.variant-unique {
    inset: -12.5%;
    z-index: 3;
}

/* Com Elite presente: recua 3px (cantos logo apos a borda Elite). */
body[class*="elite-tpl-"] .bestiary-card-img-wrap:has(> .shiny-wrapper.is-elite) > .shiny-wrapper.is-unique > .variant-layer.variant-unique {
    inset: calc(-12.5% + 3px);
}

/* Com Ultimate presente: recua 5px (cantos logo apos a borda Ultimate). */
body[class*="elite-tpl-"] .bestiary-card-img-wrap:has(> .shiny-wrapper.is-ultimate) > .shiny-wrapper.is-unique > .variant-layer.variant-unique {
    inset: calc(-12.5% + 5px);
}

/* Com Elite + Ultimate: recua 8px (apos os dois, 3+5). Maior especificidade
   (2 :has) garante prioridade sobre as regras single-:has acima. */
body[class*="elite-tpl-"] .bestiary-card-img-wrap:has(> .shiny-wrapper.is-elite):has(> .shiny-wrapper.is-ultimate) > .shiny-wrapper.is-unique > .variant-layer.variant-unique {
    inset: calc(-12.5% + 8px);
}

/* Cor das L-brackets pulsando naturalmente entre shades de #ffb070 (peach
   base do Unique). Filter (brightness + saturate + hue-rotate) no ::before
   muda a tonalidade sem mexer na geometria. A keyframe original
   `corner-pulse-d4` referenciada no CSS-base nao tem definicao (no-op),
   entao este override "ativa" a animacao. Escopo: so no palco. */
@keyframes unique-bracket-shade {
    0%, 100% { filter: brightness(0.78) saturate(1.15) hue-rotate(-6deg); }
    50%      { filter: brightness(1.25) saturate(0.95) hue-rotate(6deg);  }
}
body[class*="elite-tpl-"] .bestiary-card-img-wrap > .shiny-wrapper.is-unique > .variant-layer.variant-unique::before {
    animation: unique-bracket-shade 3.2s ease-in-out infinite;
}

/* Shiny wrapper em contextos flex com tamanho fixo */
.encounter-silhouette > .shiny-wrapper {
    width: 200px;
    height: 200px;
}

.arena-img-wrap > .shiny-wrapper {
    width: 80px;
    height: 80px;
}

.monster-select-wild > .shiny-wrapper,
.monster-select-top > .shiny-wrapper {
    width: 64px;
    height: 64px;
}

.battle-monster-row > .shiny-wrapper {
    width: 42px;
    height: 42px;
}

.battle-monster-row > .shiny-wrapper > .battle-mon-img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
}

.bestiary-card-numero {
    position: absolute;
    top: 6px;
    left: 6px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--gold);
    background: rgba(0,0,0,0.6);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    /* v0.32.20: numero do monstro sempre por cima dos efeitos do card
       (unique, shiny overlays, ultimate borders, etc) */
    z-index: 50;
}

.bestiary-card-raridade {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.85rem;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 1px;
    font-weight: 700;
    z-index: 2;
}

.bestiary-card-raridade.raridade-raro { background: rgba(41,128,185,0.5); color: #fff; }
.bestiary-card-raridade.raridade-epico { background: rgba(142,68,173,0.5); color: #fff; }
.bestiary-card-raridade.raridade-lendario { background: rgba(201,168,76,0.5); color: #fff; }

.bestiary-card-bottom {
    padding: 8px 10px;
    text-align: center;
}

.bestiary-card-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: var(--parchment);
    font-size: 1rem;
    /* line-height fixo: o auto-fit (fitCardNames) muda o font-size, mas o slot
       do nome continua com a MESMA altura — assim a parte de baixo do card nao
       cresce/encolhe e a imagem mantem proporcao fixa. */
    line-height: 20px;
    display: block;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
}

.bestiary-card-empty {
    opacity: 0.4;
    pointer-events: none;
}

.bestiary-card-types {
    display: flex;
    justify-content: center;
    align-items: center;
    /* altura fixa de 1 fileira de icone (.monster-type-icon-sm = 33px): cards
       sem tipo (ou com icone que falhou) nao colapsam a parte de baixo. */
    min-height: 33px;
    gap: 4px;
}

.monster-type-icon-sm {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    border: 1.5px solid var(--gold-dark);
    background: linear-gradient(135deg, rgba(0,0,0,0.3), rgba(201,168,76,0.1));
    padding: 2px;
    object-fit: contain;
}

/* Bestiary detail view */
.bestiary-back-btn {
    background: none;
    border: none;
    color: var(--gold);
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    padding: 8px 0;
    margin-bottom: 12px;
    transition: color 0.2s;
}

.bestiary-back-btn:hover { color: var(--gold-light); }

.bestiary-detail-content {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.bestiary-detail-img-wrap {
    position: relative;
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(0,0,0,0.4), rgba(201,168,76,0.1));
    border-radius: 14px;
    border: 2px solid var(--gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bestiary-detail-img {
    width: 85%;
    height: 85%;
    object-fit: contain;
}

.bestiary-detail-numero {
    position: absolute;
    top: 8px;
    left: 8px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--gold-light);
    background: rgba(0,0,0,0.7);
    padding: 4px 10px;
    border-radius: 6px;
}

.bestiary-detail-info { flex: 1; }

.bestiary-detail-name {
    font-family: 'Cinzel Decorative', serif;
    color: var(--gold-light);
    font-size: 1.5rem;
    margin: 0 0 10px;
}

.bestiary-detail-types {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--text-muted);
    font-size: 1.05rem;
    text-transform: capitalize;
}

.bestiary-detail-desc {
    color: var(--parchment);
    font-family: 'Lora', serif;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 20px;
}

.bestiary-detail-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px 12px;
    margin-bottom: 12px;
}

.bestiary-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.bestiary-stat-val {
    font-weight: 700;
    color: var(--gold-light);
}

.bestiary-detail-actions {
    display: flex;
    gap: 10px;
}

/* Bestiary detail habilidades */
.bestiary-detail-habilidades {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

/* Evolution Tree */
.evo-section {
    margin: 12px 0;
}
.evo-section-title {
    color: var(--gold-light);
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 8px;
}
.evo-tree-wrap {
    overflow-x: auto;
    padding: 8px 0;
}
.evo-tree-canvas {
    position: relative;
}
.evo-svg {
    pointer-events: none;
}
.evo-line {
    fill: none;
    stroke: rgba(201,168,76,0.5);
    stroke-width: 2;
}
.evo-arrowhead {
    fill: rgba(201,168,76,0.6);
}
.evo-card {
    text-align: center;
    cursor: pointer;
    border: 2px solid rgba(201,168,76,0.15);
    border-radius: 8px;
    padding: 4px;
    background: rgba(0,0,0,0.2);
    transition: border-color 0.2s, transform 0.2s;
    box-sizing: border-box;
}
.evo-card:hover {
    border-color: var(--gold-light);
    transform: scale(1.05);
    z-index: 2;
}
.evo-card.evo-active {
    border-color: var(--gold-light);
    box-shadow: 0 0 10px rgba(201,168,76,0.3);
    background: rgba(201,168,76,0.08);
}
.evo-card-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.evo-card-name {
    font-size: 0.6rem;
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bestiary form habilidades */
.bf-habilidades-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 4px;
}

/* Paste area for image upload */
/* Image upload area (file picker + paste + drag & drop) */
.img-upload-area {
    position: relative;
    border: 2px dashed rgba(201,168,76,0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
    margin-bottom: 8px;
    overflow: hidden;
}

.img-upload-area:hover,
.img-upload-area.drag-over {
    border-color: var(--gold);
    background: rgba(201,168,76,0.05);
}

.img-file-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.img-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 20px;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}

.img-upload-placeholder .img-upload-icon {
    font-size: 1.8rem;
}

.img-upload-area:hover .img-upload-placeholder {
    color: var(--gold);
}

.img-upload-preview {
    width: 100%;
    max-height: 200px;
    object-fit: contain;
    display: block;
    padding: 8px;
    background: rgba(0,0,0,0.3);
}

/* Keep old class for backward compat */
.paste-area {
    border: 2px dashed rgba(201,168,76,0.3);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
    margin-bottom: 8px;
}

.paste-area:hover,
.paste-area:focus {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(201,168,76,0.05);
}

.bf-img-preview {
    width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: 10px;
    border: 2px solid var(--gold-dark);
    margin-bottom: 8px;
    background: rgba(0,0,0,0.3);
}

/* Bestiary form */
#bestiary-form {
    margin-top: 20px;
    padding: 20px;
    border: 2px solid var(--gold-dark);
    border-radius: 12px;
    background: rgba(0,0,0,0.3);
}

#bestiary-form h3 {
    font-family: 'Cinzel', serif;
    color: var(--gold-light);
    margin-bottom: 16px;
}

/* v0.33.0: stepper (5 steps) */
.bf-stepper-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(201, 168, 76, 0.18);
}
/* v0.33.8: chips do stepper viraram botoes-icone no padrao do top-bar (nav-btn) */
.bf-step-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid var(--gold-dark);
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-medium) 100%);
    color: var(--gold);
    font-family: 'Cinzel', serif;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.bf-step-chip:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);
    border-color: var(--gold-light);
    color: var(--bg-dark);
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
}
.bf-step-chip.active {
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);
    border-color: var(--gold-light);
    color: var(--bg-dark);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35) inset, var(--shadow-glow);
}
.bf-step-chip.completed {
    color: #2ecc71;
    border-color: rgba(46, 204, 113, 0.55);
    background: linear-gradient(135deg, rgba(46,204,113,0.18) 0%, rgba(46,204,113,0.08) 100%);
}
.bf-step-chip.completed.active {
    color: var(--bg-dark);
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);
    border-color: var(--gold-light);
}
.bf-step-chip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.bf-step-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}
.bf-step-chip-icon svg { display: block; }
.bf-step-chip-sep {
    width: 14px;
    height: 1px;
    background: rgba(201, 168, 76, 0.3);
    flex: 0 0 auto;
}
.bf-stepper-progress {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.6px;
    margin-bottom: 14px;
}
.bf-step-hidden { display: none !important; }

/* v0.33.0: toggle Auto/Manual no campo Numero */
.bf-id-mode-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 4px;
}
.bf-id-mode {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
}
.bf-id-mode input[type="radio"] { accent-color: var(--gold-light); }
.bf-id-auto-hint {
    color: rgba(201, 168, 76, 0.65);
    font-size: 0.72rem;
    font-style: italic;
    text-transform: none;
    letter-spacing: normal;
}
.bf-id-auto-hint.bf-step-hidden { display: none !important; }

/* v0.33.0: seletor "Imagem do Monstro" no Step 2 */
.bf-imagem-monster-wrap {
    margin-bottom: 8px;
    padding: 10px;
    border: 1px dashed rgba(201, 168, 76, 0.35);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
}
.bf-imagem-monster-wrap > input { margin-bottom: 8px; }
.bf-imagem-monster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
}
.bf-imagem-monster-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    border-radius: 6px;
    border: 1px solid rgba(201, 168, 76, 0.18);
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.bf-imagem-monster-card:hover {
    border-color: var(--gold-light);
    background: rgba(201, 168, 76, 0.12);
    transform: translateY(-1px);
}
.bf-imagem-monster-card img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    pointer-events: none;
}
.bf-imagem-monster-card-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70px;
}
.bf-imagem-monster-card.selected {
    border-color: var(--gold-light);
    background: rgba(201, 168, 76, 0.2);
    box-shadow: 0 0 0 1px var(--gold-light) inset;
}
/* v0.41.9: regras .bf-imagem-monster-selected removidas — elemento sumiu do HTML. */

/* v0.33.0: layout 2 colunas (controles + preview) no Step 5 secreto */
.bf-secreto-defaults-row {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 16px;
    align-items: start;
}
.bf-secreto-defaults-controls { min-width: 0; }
.bf-instance-preview {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(201, 168, 76, 0.28);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.bf-instance-preview-title {
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-align: center;
    width: 100%;
}
.bf-instance-preview-img-wrap {
    position: relative;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed rgba(201, 168, 76, 0.18);
    border-radius: 8px;
}
.bf-instance-preview-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.bf-instance-preview-badges {
    position: absolute;
    top: 4px;
    left: 4px;
    display: flex;
    gap: 3px;
    z-index: 2;
}
.bf-instance-preview-badges .bf-badge {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--gold-light);
    color: var(--gold-light);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.65rem;
    line-height: 1.2;
}
.bf-instance-preview-badges .bf-badge.shiny { color: #ff9; border-color: #ff9; }
.bf-instance-preview-badges .bf-badge.elite { color: #f7d36b; border-color: #f7d36b; }
.bf-instance-preview-badges .bf-badge.unique { color: #b08bff; border-color: #b08bff; }
.bf-instance-preview-name {
    color: var(--gold-light);
    font-size: 0.85rem;
    text-align: center;
}
.bf-instance-preview-stats {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.bf-instance-preview-stats .stat-key { text-transform: uppercase; letter-spacing: 0.4px; }
.bf-instance-preview-stats .stat-val { color: var(--gold-light); text-align: right; }

@media (max-width: 720px) {
    .bf-secreto-defaults-row { grid-template-columns: 1fr; }
    .bf-instance-preview { width: 100%; }
}
/* v0.33.20: stepper nav centralizado com setas-icone + Salvar */
.bf-stepper-nav {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.bf-stepper-nav #bf-save { min-width: 110px; }
.bf-step-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--gold-dark);
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-medium) 100%);
    color: var(--gold);
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.bf-step-nav-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);
    border-color: var(--gold-light);
    color: var(--bg-dark);
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
}
.bf-step-nav-btn:active:not(:disabled) { transform: translateY(0); }
.bf-step-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    color: var(--text-muted);
    border-color: rgba(201, 168, 76, 0.18);
}
.bf-step-nav-btn svg { display: block; }

@media (max-width: 720px) {
    .bf-stepper-header { gap: 2px; padding: 6px 2px; }
    .bf-step-chip { padding: 5px 6px; }
    .bf-step-chip-icon { width: 18px; height: 18px; }
    .bf-step-chip-icon svg { width: 18px; height: 18px; }
    .bf-step-chip-sep { width: 6px; }
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-grid .full-width { grid-column: 1 / -1; }

/* Drop add row */
.bf-drop-add-wrap {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

/* Drop tags */
.drop-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    border: 1px solid rgba(201,168,76,0.2);
    background: rgba(0,0,0,0.2);
}

.drop-tag-comum { color: #999; }
.drop-tag-incomum { color: #2ecc71; border-color: rgba(46,204,113,0.3); }
.drop-tag-raro { color: #5dade2; border-color: rgba(41,128,185,0.3); }
.drop-tag-lendario { color: var(--gold-light); border-color: rgba(201,168,76,0.4); }

.drop-tag .drop-valor { color: var(--text-muted); font-size: 0.65rem; }

/* Bestiary attributes grid */
.bf-attributes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
}

.bf-attr-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 4px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(201, 168, 76, 0.12);
    border-radius: 6px;
    transition: border-color 0.15s, background 0.15s;
}

/* v0.33.7: bf-attr-item com Peças adiciona uma 3a linha pra Peças (Def Fisica/Magica) */
.bf-attr-item-with-pecas {
    grid-template-rows: auto auto auto;
}
.bf-attr-pecas-row {
    grid-row: 3;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed rgba(201, 168, 76, 0.2);
}
.bf-attr-pecas-label {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--gold-dark);
    text-transform: uppercase;
    flex-shrink: 0;
}
.bf-attr-pecas-select {
    flex: 1 1 auto;
    background: rgba(0, 0, 0, 0.5);
    color: var(--parchment);
    border: 1px solid var(--gold-dark);
    border-radius: 4px;
    padding: 4px 6px;
    font-family: 'Lora', serif;
    font-size: 0.78rem;
    cursor: pointer;
}
.bf-attr-pecas-select:hover { border-color: var(--gold-light); }
.bf-attr-pecas-select:focus {
    outline: none;
    border-color: var(--gold-light);
    box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.25);
}
.bf-attr-pecas-select option {
    background: #1a120a;
    color: var(--parchment);
}

/* v0.33.7: Evoluções escondidas em modo armazem */
.bestiary-form-armazem .bf-evolucoes-section {
    display: none !important;
}
/* v0.33.12: Versao Shiny escondida em modo armazem (e cadastro do char, nao do bestiario) */
.bestiary-form-armazem #bf-shiny-section {
    display: none !important;
}
/* v0.33.13: previews de imagem (selected box + upload preview img) escondidos em modo armazem.
   No armazem o card selecionado fica destacado dentro do grid — nao precisa preview separado. */
.bestiary-form-armazem #bf-img-preview,
.bestiary-form-armazem #bf-upload-area {
    display: none !important;
}

.bf-attr-item:hover {
    border-color: rgba(201, 168, 76, 0.3);
    background: rgba(0, 0, 0, 0.35);
}

.bf-attr-tier-label {
    grid-row: 1;
    grid-column: 1;
    color: var(--gold-dark);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
}

.bf-attr-label {
    grid-row: 1;
    grid-column: 2;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.bf-attr-tier-select {
    grid-row: 2;
    grid-column: 1;
    width: 56px;
    padding: 4px 4px;
    background: rgba(0, 0, 0, 0.5);
    color: var(--gold-light);
    border: 1px solid var(--gold-dark);
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    text-align-last: center;
    cursor: pointer;
}

.bf-attr-tier-select:hover {
    border-color: var(--gold-light);
}

.bf-attr-tier-select:focus {
    outline: none;
    border-color: var(--gold-light);
    box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.25);
}

.bf-attr-slider-wrap {
    grid-row: 2;
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bf-attr-slider-wrap input[type="range"] {
    flex: 1;
    min-width: 0;
    accent-color: var(--gold);
}

.bf-attr-val {
    min-width: 22px;
    text-align: center;
    color: var(--gold-light);
    font-weight: 700;
    font-size: 0.9rem;
    font-family: 'Cinzel', serif;
}

@media (max-width: 720px) {
    .bf-attributes-grid {
        grid-template-columns: 1fr;
    }
}

/* v0.32.52 — slider do Tier Mestre segue o pattern visual dos atributos
   (mesma altura, mesma cor de thumb, mesma cor do valor). */
.bf-tier-mestre-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 6px;
}
.bf-tier-mestre-row input[type="range"] {
    flex: 1 1 auto;
    min-width: 0;
    accent-color: var(--gold);
}
.bf-tier-mestre-row > span {
    min-width: 110px;
    text-align: center;
    color: var(--gold-light);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}

.btn-save {
    padding: 10px 24px;
    border: 2px solid var(--green-safe);
    border-radius: 8px;
    background: rgba(39,174,96,0.2);
    color: var(--green-safe);
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.btn-save:hover { background: var(--green-safe); color: #fff; }

.btn-cancel {
    padding: 10px 24px;
    border: 2px solid var(--text-muted);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.btn-cancel:hover { border-color: var(--parchment); color: var(--parchment); }

.empty-msg {
    color: var(--text-muted);
    text-align: center;
    padding: 24px;
    font-style: italic;
}

/* ============================================
   MAP EDITOR
   ============================================ */

#map-editor-panel {
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    z-index: 1100;
    pointer-events: none;
}

.map-editor-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 100%;
    background: linear-gradient(180deg, var(--bg-dark) 0%, #151010 100%);
    border-left: 2px solid var(--gold-dark);
    box-shadow: -4px 0 20px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    pointer-events: all;
    overflow: hidden;
}

.map-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(201,168,76,0.2);
}

.map-editor-header h3 {
    font-family: 'Cinzel', serif;
    color: var(--gold);
    font-size: 1rem;
    margin: 0;
}

.map-editor-header button {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.map-editor-header button:hover {
    color: #e74c3c;
    background: rgba(231,76,60,0.15);
}

.map-editor-tools {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(201,168,76,0.15);
}

.me-tool-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--bg-light);
    border: 1px solid var(--gold-dark);
    border-radius: 6px;
    color: var(--text-light);
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.me-tool-btn:hover {
    background: var(--gold-dark);
    color: var(--bg-dark);
}

.me-tool-btn.active {
    background: var(--gold);
    color: var(--bg-dark);
    border-color: var(--gold-light);
    box-shadow: 0 0 10px rgba(201,168,76,0.4);
}

.map-editor-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.me-region-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(201,168,76,0.1);
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.me-region-item:hover {
    background: rgba(201,168,76,0.08);
    border-color: var(--gold-dark);
}

.me-region-item .me-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
}

.me-region-item .me-icon svg,
.me-region-item .me-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.me-region-item .me-info {
    flex: 1;
    min-width: 0;
}

.me-region-item .me-info .me-name {
    color: var(--text-light);
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.me-region-item .me-info .me-coords {
    color: var(--text-muted);
    font-size: 0.65rem;
    margin-top: 2px;
}

.me-region-item .me-actions {
    display: flex;
    gap: 4px;
}

.me-region-item .me-actions button {
    background: none;
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 0.75rem;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.me-region-item .me-actions button:hover {
    color: var(--gold);
    border-color: var(--gold);
}

.me-region-item .me-actions button.me-delete:hover {
    color: #e74c3c;
    border-color: #e74c3c;
}

/* Map Editor Form */
.map-editor-form {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.me-form-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.me-back-btn {
    background: none;
    border: 1px solid rgba(201,168,76,0.3);
    color: var(--gold);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1;
}

.me-back-btn:hover {
    background: rgba(201,168,76,0.1);
    border-color: var(--gold);
}

.me-form-header h4 {
    margin: 0;
}

.map-editor-form h4 {
    font-family: 'Cinzel', serif;
    color: var(--gold);
    font-size: 0.95rem;
    margin: 0 0 4px 0;
}

.map-editor-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.me-nivel-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.me-nivel-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.me-nivel-inputs input {
    flex: 1;
    width: auto !important;
}

.me-nivel-sep {
    color: var(--text-muted);
    font-weight: 700;
}

.me-emoji-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.me-emoji-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.me-emoji-hint {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-style: italic;
}

.me-icon-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.me-icon-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.me-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-height: 500px;
    overflow-y: auto;
    padding: 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    border: 1px solid rgba(201,168,76,0.1);
}

.me-icon-cat-header {
    grid-column: 1 / -1;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 2px 2px;
    border-bottom: 1px solid rgba(201,168,76,0.15);
    margin-top: 4px;
}

.me-icon-cat-header:first-child {
    margin-top: 0;
}

.me-icon-option {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: rgba(255,255,255,0.03);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    padding: 6px;
}

.me-icon-option svg,
.me-icon-option img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}

.me-icon-option:hover {
    background: rgba(201,168,76,0.15);
    border-color: var(--gold-dark);
    color: var(--gold);
    transform: scale(1.15);
}

.me-icon-option.selected {
    background: rgba(201,168,76,0.25);
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 8px rgba(201,168,76,0.3);
}

/* Active state for map editor button */
#btn-map-editor.active {
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);
    color: var(--bg-dark);
    box-shadow: var(--shadow-glow);
}

/* Draggable marker style */
.region-marker-draggable {
    cursor: grab !important;
    animation: markerPulse 1.5s ease-in-out infinite;
}

.region-marker-draggable:active {
    cursor: grabbing !important;
}

@keyframes markerPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(201,168,76,0.3); }
    50% { box-shadow: 0 0 40px rgba(201,168,76,0.7); }
}

/* Click-to-place crosshair */
.map-placing-point {
    cursor: crosshair !important;
}

/* World Editor - Bounds Form */
.wb-bounds-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.wb-bound-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wb-bound-field span {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
}

.wb-bound-field .edit-input {
    text-align: center;
    font-size: 0.9rem;
}

.wb-bounds-quick {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.wb-quick-btn {
    flex: 1;
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
}

.wb-submap-section {
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 10px;
    margin-top: 6px;
}

.wb-submap-preview {
    text-align: center;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wb-submap-remove:hover {
    background: rgba(200,50,50,0.5) !important;
}

.me-bounds-form label {
    display: block;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.me-bounds-form label .edit-input,
.me-bounds-form label .edit-textarea {
    margin-top: 4px;
    width: 100%;
}

/* ============================================
   PERSONAGENS PANEL
   ============================================ */

#personagens-panel {
    position: fixed;
    inset: 0;
    z-index: 2000;
    transition: opacity 0.3s;
}

#personagens-panel.hidden { display: none; }

#personagens-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
}

#personagens-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 94%;
    max-width: 900px;
    max-height: 88vh;
    overflow-y: auto;
    background: linear-gradient(135deg, var(--bg-dark), var(--bg-medium));
    border: 2px solid var(--gold-dark);
    border-radius: 14px;
    padding: 24px;
    box-shadow: var(--shadow-strong), var(--shadow-glow);
}

/* personagens-close agora usa .panel-close-btn */

#char-back-btn {
    border: none;
    background: none;
    color: var(--gold);
    cursor: pointer;
    padding: 4px;
}

#char-back-btn:hover { color: var(--gold-light); }

/* Character selection grid */
.char-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.char-select-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 12px;
    background: rgba(0,0,0,0.3);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.char-select-card:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(201,168,76,0.15);
}

.char-select-card-name {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1rem;
    color: var(--gold-light);
    margin-bottom: 8px;
    text-align: center;
}

.char-select-card-img {
    /* v0.38.3: retrato 3x4 igual ao da ficha */
    width: 105px;
    height: 140px;
    border-radius: 8px;
    border: 2px solid var(--gold-dark);
    object-fit: cover;
    background: linear-gradient(135deg, rgba(0,0,0,0.4), rgba(201,168,76,0.08));
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.char-select-card-img-placeholder {
    width: 105px;
    height: 140px;
    border-radius: 8px;
    border: 2px dashed var(--gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    background: rgba(0,0,0,0.2);
}

.char-select-card-info {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

.char-select-card-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(192,57,43,0.4);
    background: rgba(0,0,0,0.5);
    color: var(--red-danger);
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.char-select-card:hover .char-select-card-delete { opacity: 1; }
.char-select-card-delete:hover { background: var(--red-danger); color: #fff; }

/* Character sheet */
.char-sheet-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(201,168,76,0.2);
}

.char-sheet-portrait {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid var(--gold);
    object-fit: cover;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.4), rgba(201,168,76,0.08));
}

.char-sheet-portrait-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px dashed var(--gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--text-muted);
    flex-shrink: 0;
    background: rgba(0,0,0,0.2);
}

.char-sheet-info {
    flex: 1;
    min-width: 0;
}

.char-sheet-top-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.char-sheet-info h2 {
    font-family: 'Cinzel Decorative', serif;
    color: var(--gold-light);
    font-size: 1.5rem;
    margin: 0;
}

.char-sheet-info .char-age {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.char-level-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.char-level-badge {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: var(--gold);
    font-size: 0.9rem;
}

.char-level-tier {
    font-size: 0.7rem;
    color: var(--text-muted);
    background: rgba(201,168,76,0.1);
    padding: 1px 6px;
    border-radius: 4px;
}

.xp-bar-char {
    height: 8px !important;
    width: 100%;
}

.char-xp-text {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Pontos de Treinador */
.char-points-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.char-points-available {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.char-points-available strong {
    color: var(--gold-light);
}

.char-points-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.potencial-cell-label {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.char-sheet-edit-btn {
    margin-left: auto !important;
    background: none;
    border: 1px solid var(--gold-dark);
    color: var(--gold);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.char-sheet-edit-btn:hover { border-color: var(--gold); background: rgba(201,168,76,0.1); }

/* Section blocks */
.char-section {
    margin-bottom: 24px;
}

.char-section-title {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: var(--gold);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(201,168,76,0.15);
    display: flex;
    align-items: center;
    gap: 8px;
}

.char-section-title span { font-size: 1.2rem; }

/* Potencial grid */
.potencial-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.potencial-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border-radius: 8px;
    position: relative;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(201,168,76,0.1);
    transition: border-color 0.2s;
}

.potencial-cell:hover { border-color: rgba(201,168,76,0.3); }

.potencial-cell img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--gold-dark);
    padding: 1px;
    object-fit: contain;
    background: linear-gradient(135deg, rgba(0,0,0,0.3), rgba(201,168,76,0.1));
}

.potencial-tier-badge {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bg-dark);
    background: var(--gold);
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1.3;
}

.potencial-value-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}

.potencial-info-tipo-btn {
    width: 22px;
    height: 22px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
    flex-shrink: 0;
    color: var(--gold-dark);
}

.potencial-info-tipo-btn:hover {
    opacity: 1;
    color: var(--gold);
}

.potencial-info-btn {
    font-size: 0.8rem;
    color: var(--gold-dark);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    margin-left: 4px;
}

.potencial-info-btn:hover {
    opacity: 1;
    color: var(--gold);
}

.potencial-value {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--gold-light);
    margin: 3px 0 2px;
    min-width: 28px;
    text-align: center;
}

.potencial-tier-bar {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 3px;
}

.potencial-tier-fill {
    height: 100%;
    background: var(--gold);
    border-radius: 2px;
    transition: width 0.3s;
}

/* Potencial info modals */
.pot-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    margin-top: 8px;
}

.pot-info-table th {
    color: var(--gold);
    text-align: left;
    padding: 3px 6px;
    border-bottom: 1px solid rgba(201,168,76,0.2);
    font-size: 0.65rem;
    text-transform: uppercase;
}

.pot-info-table td {
    padding: 3px 6px;
    color: var(--parchment-dark);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.pot-benefits-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 6px;
}

.pot-benefit-row {
    font-size: 0.72rem;
    padding: 3px 0;
}

.pot-benefit-row.locked {
    opacity: 0.5;
}

.pot-benefit-row.unlocked {
    color: var(--parchment);
}

.potencial-btns {
    display: flex;
    gap: 6px;
}

.potencial-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(201,168,76,0.3);
    background: rgba(0,0,0,0.3);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
}

.potencial-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(201,168,76,0.15);
}

.potencial-btn.minus:hover { border-color: var(--red-danger); color: var(--red-danger); }

/* Dinheiro line */
.dinheiro-line {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.dinheiro-display {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.25);
    border-radius: 8px;
    border: 1px solid rgba(201,168,76,0.35);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.4);
}

.dinheiro-icon { font-size: 1.4rem; }

.dinheiro-input {
    flex: 1;
    width: 120px;
    background: transparent;
    border: none;
    color: var(--gold-light);
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    font-weight: 700;
    padding: 4px 8px;
    text-align: right;
    appearance: textfield;
    -moz-appearance: textfield;
}
/* Esconde os spinners default brancos do input number (Chrome/Safari) */
.dinheiro-input::-webkit-outer-spin-button,
.dinheiro-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.dinheiro-input:focus {
    outline: none;
    color: #fff;
    text-shadow: 0 0 4px rgba(201,168,76,0.5);
}

/* Setas customizadas externas (so para narrador) */
.dinheiro-arrows {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dinheiro-arrow {
    width: 32px;
    flex: 1;
    border: 1px solid rgba(201,168,76,0.35);
    background: linear-gradient(180deg, rgba(201,168,76,0.18) 0%, rgba(0,0,0,0.4) 100%);
    color: var(--gold-light);
    font-size: 0.7rem;
    cursor: pointer;
    border-radius: 4px;
    line-height: 1;
    user-select: none;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.dinheiro-arrow:hover { border-color: var(--gold); background: linear-gradient(180deg, rgba(201,168,76,0.35) 0%, rgba(0,0,0,0.45) 100%); }
.dinheiro-arrow:active { transform: scale(0.92); }

.dinheiro-label {
    font-family: 'Cinzel', serif;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Equipamentos section */
.equipamento-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    border: 1px solid rgba(201,168,76,0.15);
    cursor: pointer;
    transition: all 0.2s;
}

.equipamento-slot:hover {
    border-color: var(--gold);
    background: rgba(201,168,76,0.05);
}

.equipamento-icon { font-size: 1.6rem; }

.equipamento-info {
    flex: 1;
}

.equipamento-nome {
    font-family: 'Cinzel', serif;
    color: var(--parchment);
    font-size: 0.9rem;
    font-weight: 700;
}

.equipamento-desc {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.equipamento-empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85rem;
}

/* Mochila grid */
.mochila-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.mochila-slot {
    aspect-ratio: 1;
    border-radius: 5px;
    border: 1.5px dashed rgba(201,168,76,0.2);
    background: rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    font-size: 1.3rem;
    padding: 2px;
}

.mochila-slot:hover {
    border-color: var(--gold);
    background: rgba(201,168,76,0.05);
}

.mochila-slot.filled {
    border-style: solid;
    border-color: rgba(201,168,76,0.3);
    background: rgba(0,0,0,0.25);
    padding: 3px;
}

.mochila-slot.filled:hover {
    border-color: var(--gold);
}

/* V34 — X de descarte no slot da mochila. Versao menor do char-monster-remove
   ajustada pra slots pequenos. So aparece em filled (X em slot vazio nao
   faria sentido). Click no X dispara confirmacao + endpoint audit. */
.mochila-slot-remove {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(120, 35, 40, 0.55);
    background: rgba(40, 15, 18, 0.7);
    color: rgba(220, 150, 150, 0.7);
    cursor: pointer;
    padding: 0;
    display: none; /* aparece so no hover (regra abaixo) */
    align-items: center;
    justify-content: center;
    z-index: 4;
    transition: transform 0.15s, background 0.15s, color 0.15s;
}
.mochila-slot-remove svg {
    width: 10px;
    height: 10px;
    display: block;
}
.mochila-slot.filled:hover .mochila-slot-remove,
.mochila-slot-remove:focus-visible {
    display: flex;
}
.mochila-slot-remove:hover {
    background: linear-gradient(180deg, #6e1d23 0%, #2a0a0d 100%);
    color: #fff;
    border-color: #2a0a0d;
    transform: scale(1.15);
}
.mochila-slot-remove:active { transform: scale(0.92); }

.mochila-slot-qty {
    position: absolute;
    bottom: 1px;
    right: 1px;
    background: rgba(0,0,0,0.75);
    color: var(--gold-light);
    font-size: 0.65rem;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid rgba(201,168,76,0.3);
}

.mochila-slot-empty {
    font-size: 1rem;
    color: rgba(201,168,76,0.12);
}

/* Item modal (inside personagens panel) */
.char-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.char-modal {
    background: linear-gradient(135deg, var(--bg-dark), var(--bg-medium));
    border: 2px solid var(--gold-dark);
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 480px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: var(--shadow-strong), var(--shadow-glow);
}

.char-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.char-modal-header h3 {
    font-family: 'Cinzel', serif;
    color: var(--gold-light);
    font-size: 1.15rem;
    margin: 0;
}

.char-modal-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--gold-dark);
    background: var(--bg-dark);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.char-modal-close:hover { color: var(--parchment); border-color: var(--gold); }

.char-modal h3 {
    font-family: 'Cinzel', serif;
    color: var(--gold-light);
    margin-bottom: 14px;
    font-size: 1rem;
}

.char-modal label {
    display: block;
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.char-modal label .edit-input,
.char-modal label .edit-textarea {
    margin-top: 4px;
    width: 100%;
}

.char-modal .form-actions {
    margin-top: 14px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Monster picker modal (larger) */
.monster-picker-modal {
    max-width: 840px;
    max-height: 80vh;
}

.monster-picker-search {
    margin-bottom: 12px;
}

.monster-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 4px 0;
}

.monster-picker-grid .bestiary-card.selected {
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(201,168,76,0.3);
}

/* Character form */
.char-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.char-form-grid .full-width { grid-column: 1 / -1; }

.char-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Char monstros section */
/* legacy: char-monstros-grid removed, now uses ativos + armazem grids */

.char-monster-apelido {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: var(--gold-light);
    font-size: 0.6rem;
    font-family: 'Cinzel', serif;
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 3;
}

.char-monster-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(120, 35, 40, 0.55);
    background: rgba(40, 15, 18, 0.6);
    color: rgba(220, 150, 150, 0.65);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 0.15s, box-shadow 0.15s, background 0.2s, color 0.2s, border-color 0.2s;
    z-index: 5;
    opacity: 0.55;
}
.char-monster-remove:hover {
    opacity: 1;
    transform: scale(1.1);
    background: linear-gradient(180deg, #6e1d23 0%, #2a0a0d 100%);
    color: #fff;
    border-color: #2a0a0d;
    box-shadow: 0 0 12px rgba(120, 30, 35, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.char-monster-remove:active { transform: scale(0.95); }

.char-add-monster-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(201,168,76,0.2);
    border-radius: 12px;
    background: rgba(0,0,0,0.15);
    cursor: pointer;
    transition: all 0.2s;
    min-height: 120px;
    color: var(--text-muted);
    font-size: 0.8rem;
    gap: 6px;
}

.char-add-monster-card:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(201,168,76,0.05);
}

/* Monstros Ativos */
.monstros-ativos-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.monstros-ativos-grid > * {
    min-width: 0;
}

.monstro-ativo-slot {
    position: relative;
}

.monstro-ativo-slot .bestiary-card {
    border: 2px solid var(--gold-dark);
    background: rgba(201,168,76,0.05);
    box-shadow: 0 0 8px rgba(201,168,76,0.1);
}

.monstro-ativo-empty {
    cursor: pointer;
    transition: all 0.2s;
}

.monstro-ativo-empty:hover {
    border-color: var(--gold);
    background: rgba(201,168,76,0.1);
}

.monstro-ativo-add {
    font-size: 1.8rem;
    color: var(--gold-dark);
}

.monstro-ativo-empty:hover .monstro-ativo-add {
    color: var(--gold);
}

.monstro-ativo-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.monstro-ativo-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(192,57,43,0.5);
    background: rgba(0,0,0,0.8);
    color: var(--red-danger);
    cursor: pointer;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s;
}

.monstro-ativo-slot:hover .monstro-ativo-remove { opacity: 1; }
.monstro-ativo-remove:hover { background: var(--red-danger); color: #fff; }

/* Armazem */
.monstros-armazem-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.monstros-armazem-grid > * {
    min-width: 0;
}

/* Armazem Filters */
.armazem-filters {
    margin-bottom: 8px;
}

.armazem-sort-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.armazem-sort-btn {
    padding: 3px 8px;
    font-size: 0.65rem;
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 3px;
    background: rgba(0,0,0,0.2);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.armazem-sort-btn:hover {
    border-color: var(--gold-dark);
    color: var(--parchment-dark);
}

.armazem-sort-btn.active {
    background: rgba(201,168,76,0.15);
    border-color: var(--gold);
    color: var(--gold-light);
}

.armazem-tipo-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.armazem-tipo-filter {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(201,168,76,0.1);
    padding: 1px;
    cursor: pointer;
    opacity: 0.4;
    transition: all 0.15s;
}

.armazem-tipo-filter:hover {
    opacity: 0.7;
    border-color: var(--gold-dark);
}

.armazem-tipo-filter.skill-shop-tipo-active {
    opacity: 1;
    border-color: var(--gold);
    background: rgba(201,168,76,0.1);
}

.monstro-armazem-card {
    position: relative;
    cursor: pointer;
}

.monstro-armazem-card .bestiary-card {
    height: 100%;
}

.monstro-armazem-empty {
    border: 1px dashed rgba(201,168,76,0.1);
    border-radius: 12px;
    background: rgba(0,0,0,0.1);
}

.monstros-armazem-grid .char-add-monster-card {
    min-height: 0;
}

.pick-active-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
}

.pick-active-row {
    cursor: pointer;
    border-radius: 6px;
    padding: 6px 8px;
    transition: background 0.2s;
}

.pick-active-row:hover {
    background: rgba(201,168,76,0.1);
}

.pick-active-row.pick-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pick-active-row.pick-disabled:hover {
    background: none;
}

/* ============================================
   LEVEL BADGE & XP BAR
   ============================================ */

.monster-level-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: rgba(30, 80, 160, 0.9);
    color: #fff;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 6px;
    z-index: 3;
    letter-spacing: 0.5px;
}

.xp-bar-container {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}

.condensacao-bar-container {
    margin-top: 2px;
}

.condensacao-bar {
    height: 100%;
    background: linear-gradient(90deg, #cc2222, #ff4444);
    border-radius: 2px;
    transition: width 0.3s;
}

.monster-condensacao-info {
    margin-top: 6px;
}

.monster-condensacao-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.xp-bar-container.xp-bar-lg {
    height: 8px;
    border-radius: 4px;
}

.xp-bar {
    height: 100%;
    background: linear-gradient(90deg, #4a9eff, #7ecaff);
    border-radius: inherit;
    transition: width 0.3s ease;
}

.monster-xp-info {
    margin-bottom: 14px;
    padding: 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    border: 1px solid rgba(201,168,76,0.15);
}

.monster-xp-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 0.95rem;
}

.monster-xp-level {
    color: var(--gold-light);
    font-weight: bold;
    font-family: 'Cinzel', serif;
}

.monster-xp-tier {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.monster-xp-text {
    margin-left: auto;
    color: #7ecaff;
    font-size: 0.85rem;
}

/* Monster detail modal (stats & bonus) */
.monster-detail-modal {
    max-width: 520px;
}

.ma-cost-info {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.ma-cost-info strong {
    color: var(--gold-light);
}

.ma-stats-section {
    margin-top: 12px;
    padding: 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    border: 1px solid rgba(201,168,76,0.15);
}

.ma-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    color: var(--gold);
}

.ma-bonus-avail {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ma-bonus-avail strong {
    color: var(--gold-light);
}

.ma-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ma-stat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.ma-stat-label {
    flex: 1;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ma-attr-info-btn {
    color: var(--gold-dark);
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.ma-attr-info-btn:hover {
    opacity: 1;
    color: var(--gold);
}

/* v0.32.66: badge T+n no inicio de cada linha de atributo (substitui o icone ⓘ). */
.ma-stat-tier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 18px;
    padding: 0 5px;
    border-radius: 3px;
    background: rgba(201, 168, 76, 0.18);
    border: 1px solid rgba(201, 168, 76, 0.45);
    color: var(--gold-light, #f3da9c);
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.attr-info-modal {
    max-width: 320px;
}

.attr-info-text {
    color: var(--parchment-dark);
    font-size: 0.85rem;
    line-height: 1.5;
    padding: 8px 0;
}

.ma-stat-value {
    min-width: 50px;
    text-align: right;
    font-weight: 700;
    color: var(--parchment);
    font-size: 0.85rem;
}

.ma-stat-bonus {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 80px;
    justify-content: flex-end;
}

.ma-bonus-val {
    min-width: 24px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--gold-light);
}

/* v0.44.0: coluna read-only de pontos atribuidos por level-up (substitui o
   antigo controle -/+ que distribuia pontos manualmente). Mantem alinhamento
   da coluna antiga (.ma-stat-bonus min-width 80px) pra grid nao "pular". */
.ma-stat-alocados {
    min-width: 80px;
    text-align: right;
    font-size: 0.78rem;
    color: var(--gold-light);
    padding-right: 6px;
}

/* v0.44.0: cabecalho de colunas das grids de Atributos e Habilidades do
   detalhar do monstro. Visualmente mais discreto que as linhas de dados. */
.ma-stat-row.ma-stat-row-header {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(232,216,184,0.65);
    border-bottom: 1px solid rgba(201,168,76,0.18);
    padding-bottom: 4px;
    margin-bottom: 2px;
    cursor: default;
}
.ma-stat-row.ma-stat-row-header:hover {
    background: transparent;
}

/* v0.44.0: barras de HP/MP no detalhar do monstro (reusa as classes
   .mestrar-bn-bar*). Mostra logo acima da secao de Atributos. */
.ma-hp-mp-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0;
}

.ma-bonus-btn {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.65rem !important;
    padding: 0 !important;
}

/* ============================================
   BATTLE MODAL
   ============================================ */

.battle-modal {
    max-width: 720px;
    max-height: 85vh;
}

/* Battle Arena */
.arena-modal {
    max-width: 600px;
}

.arena-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.arena-combatant {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(201,168,76,0.1);
}

.arena-wild { border-color: rgba(192,57,43,0.3); }
.arena-player { border-color: rgba(41,128,185,0.3); }

.arena-info-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.arena-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: var(--parchment);
    font-size: 0.9rem;
    flex: 1;
}

.arena-level {
    font-size: 0.75rem;
    color: var(--gold);
    font-weight: 700;
}

.arena-img-wrap {
    display: flex;
    justify-content: center;
    padding: 4px 0;
}

.arena-monster-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.arena-hp-bar, .arena-mana-bar {
    height: 8px;
    background: rgba(0,0,0,0.4);
    border-radius: 4px;
    overflow: hidden;
}

.arena-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #c0392b, #27ae60);
    border-radius: 4px;
    transition: width 0.4s ease;
}

.arena-mana-fill {
    height: 100%;
    background: linear-gradient(90deg, #2980b9, #3498db);
    border-radius: 4px;
    transition: width 0.4s ease;
}

.arena-hp-text, .arena-mana-text {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-align: right;
}

.arena-vs {
    text-align: center;
    font-family: 'Cinzel Decorative', serif;
    font-size: 0.8rem;
    color: var(--gold-dark);
    padding: 2px 0;
}

/* Battle Log */
.arena-log {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(201,168,76,0.1);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 10px;
    min-height: 60px;
    max-height: 80px;
    overflow-y: auto;
}

.arena-log-line {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 1px 0;
    animation: logFadeIn 0.3s ease;
}

@keyframes logFadeIn {
    from { opacity: 0; transform: translateX(-5px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Battle Actions */
.arena-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.arena-skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.arena-skill-btn {
    padding: 6px 8px;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 6px;
    background: rgba(0,0,0,0.3);
    color: var(--parchment);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.arena-skill-btn:hover:not(.disabled) {
    border-color: var(--gold);
    background: rgba(201,168,76,0.1);
}

.arena-skill-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* v0.94.x: botao de habilidade EXCLUSIVA na arena selvagem com foil dourado —
   mesmo visual do .hab-card-exclusiva / .md-hab-row-exclusiva. */
.arena-skill-btn.arena-skill-btn-exclusiva {
    background:
        linear-gradient(135deg, transparent 30%, rgba(201,168,76,0.28) 50%, transparent 70%),
        linear-gradient(180deg, rgba(46,34,16,0.96), rgba(22,16,7,0.96));
    border-color: rgba(201,168,76,0.55);
}
.arena-skill-btn.arena-skill-btn-exclusiva:hover:not(.disabled) {
    border-color: var(--gold);
}

.arena-skill-cost {
    font-size: 0.6rem;
    color: #3498db;
}

.arena-skill-hit {
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--gold-light);
    background: rgba(201,168,76,0.15);
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 4px;
    white-space: nowrap;
}

.arena-basic-btn {
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05);
    font-size: 0.7rem;
}

.arena-bottom-actions {
    display: flex;
    gap: 4px;
}

.arena-action-btn {
    flex: 1;
    padding: 6px;
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 6px;
    background: rgba(0,0,0,0.2);
    color: var(--text-muted);
    font-size: 0.7rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.arena-action-btn:hover:not(.disabled) {
    border-color: var(--gold);
    color: var(--gold);
}

.arena-action-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Battle Result */
/* Shop */
.shop-balance {
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: var(--gold-light);
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    margin-bottom: 12px;
}

.shop-section {
    margin-bottom: 12px;
}

.shop-section-title {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(201,168,76,0.15);
    margin-bottom: 6px;
}

/* Skill Shop */
.skill-shop-modal {
    max-width: 550px;
}

.skill-shop-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.skill-shop-tab {
    flex: 1;
    padding: 6px;
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 4px;
    background: rgba(0,0,0,0.2);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-family: 'Cinzel', serif;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.skill-shop-tab:hover {
    border-color: var(--gold-dark);
}

.skill-shop-tab-active {
    background: rgba(201,168,76,0.15);
    border-color: var(--gold);
    color: var(--gold-light);
}

.skill-shop-tipos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
    justify-content: center;
}

.skill-shop-tipo-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(201,168,76,0.15);
    padding: 2px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s;
}

.skill-shop-tipo-icon:hover {
    opacity: 0.8;
    border-color: var(--gold-dark);
}

.skill-shop-tipo-active {
    opacity: 1;
    border-color: var(--gold);
    background: rgba(201,168,76,0.1);
}

.skill-shop-content {
    max-height: 350px;
    overflow-y: auto;
}

.skill-shop-hab-tipo, .skill-card-tipo {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Skill Cards */
.skill-card {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(201,168,76,0.1);
    margin-bottom: 6px;
    transition: border-color 0.2s;
}

.skill-card:hover:not(.shop-item-locked) {
    border-color: rgba(201,168,76,0.3);
}

.skill-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.skill-card-cor {
    width: 6px;
    height: 32px;
    border-radius: 3px;
    flex-shrink: 0;
}

.skill-cor-negra {
    background: linear-gradient(180deg, #333, #111);
    border: 1px solid #555;
}

.skill-cor-branca {
    background: linear-gradient(180deg, #eee, #bbb);
    border: 1px solid #ddd;
}

.skill-card-magia-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.skill-card-tipo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skill-card-main {
    flex: 1;
    min-width: 0;
}

.skill-card-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--parchment);
    display: block;
}

.skill-card-cor-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.skill-card-mid {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
    padding: 6px 0;
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.skill-card-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.skill-stat-label {
    font-size: 0.55rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

.skill-stat-val {
    font-size: 0.8rem;
    font-weight: 700;
}

.skill-stat-dmg {
    color: #e74c3c;
}

.skill-stat-mp {
    color: #3498db;
}

.skill-card-poder {
    display: flex;
    gap: 3px;
}

.skill-poder-bar {
    width: 4px;
    height: 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(201,168,76,0.15);
}

.skill-poder-bar.active {
    background: var(--gold);
    border-color: var(--gold-light);
}

.skill-card-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.skill-card-price {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gold-light);
}

.skill-card-max {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.skill-card-bottom .btn-battle {
    padding: 5px 16px;
    font-size: 0.8rem;
}

.skill-shop-locked {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.shop-item-locked {
    opacity: 0.4;
}

.skill-shop-mon-picker {
    margin-bottom: 8px;
}

.ma-evolve-section {
    margin-top: 8px;
    text-align: center;
}

.ma-evolve-btn {
    width: 100%;
    font-size: 0.85rem;
}

/* Altar de Sacrificio */
.altar-modal {
    max-width: 500px;
}

.altar-target-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.altar-target-picker select {
    flex: 1;
}

.altar-status {
    text-align: center;
    font-size: 0.8rem;
    color: var(--parchment-dark);
    margin-bottom: 6px;
}

.altar-ultimate {
    color: #ff2222;
    font-weight: 700;
}

.altar-progress {
    margin-bottom: 10px;
}

.altar-progress-bar {
    position: relative;
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: visible;
    margin-bottom: 3px;
}

.altar-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dark), #ff4444);
    border-radius: 3px;
    transition: width 0.3s;
}

.altar-sacrifice-title {
    font-size: 0.75rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

.altar-sacrifice-list {
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.altar-sacrifice-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.15);
    cursor: pointer;
    transition: all 0.15s;
}

.altar-sacrifice-row:hover {
    background: rgba(201,168,76,0.1);
}

.altar-selected {
    background: rgba(255,50,50,0.15) !important;
    border-left: 3px solid #ff4444;
}

.altar-pts-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gold-light);
    white-space: nowrap;
}

.altar-preview {
    text-align: center;
    font-size: 0.8rem;
    color: var(--parchment);
    padding: 8px;
    background: rgba(0,0,0,0.2);
    margin: 8px 0;
}

.altar-marker {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 10px;
    background: rgba(255,255,255,0.2);
    transform: translateX(-50%);
}

.altar-marker span {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5rem;
    color: rgba(255,100,100,0.4);
    white-space: nowrap;
}

.altar-marker.reached {
    background: #ff4444;
}

.altar-marker.reached span {
    color: #ff4444;
}

.altar-stars {
    color: #ff2222;
    text-shadow: 0 0 6px rgba(255,34,34,0.6);
    letter-spacing: 2px;
}

.altar-progress-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 14px;
    display: block;
}

.altar-reforcos-section {
    margin-top: 8px;
    padding: 8px;
    border: 1px solid rgba(255,50,50,0.15);
    border-radius: 6px;
    background: rgba(0,0,0,0.15);
}

.altar-reforco-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}

.altar-reforco-label {
    flex: 0 0 60px;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.altar-reforco-val {
    flex: 0 0 24px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ff6666;
}

.altar-confirm-btn {
    width: 100%;
    margin-top: 4px;
}

/* Aposta Roleta */
.aposta-silhouette-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.aposta-silhouette {
    width: 140px;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    border: 2px solid rgba(201,168,76,0.2);
    overflow: visible;
    padding: 8px 4px;
}

.aposta-roll-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    filter: brightness(0);
    animation: apostaFlicker 0.1s ease;
}

@keyframes apostaFlicker {
    0% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

.aposta-reveal {
    border-color: var(--gold);
    background: rgba(201,168,76,0.05);
    animation: apostaRevealPulse 0.5s ease-out;
}

@keyframes apostaRevealPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(201,168,76,0); }
    50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(201,168,76,0.4); }
    100% { transform: scale(1); box-shadow: 0 0 8px rgba(201,168,76,0.2); }
}

.aposta-final-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.aposta-silhouette > .shiny-wrapper {
    width: 100px;
    height: 100px;
}

.aposta-roleta-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    opacity: 0.7;
}

.aposta-tipos {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: 4px;
}

/* Mercador header actions (refresh do narrador) */
.mercador-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mercador-refresh-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--gold-dark);
    background: var(--bg-dark);
    color: var(--gold-light);
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: transform 0.25s ease, background 0.2s ease;
}

.mercador-refresh-btn:hover {
    background: rgba(201, 168, 76, 0.18);
    transform: rotate(90deg);
}

/* Mercador Buy Cards */
.mercador-buy-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(201,168,76,0.1);
    margin-bottom: 6px;
}

.mercador-card-img-wrap {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    flex-shrink: 0;
}

.mercador-card-img {
    width: 55px;
    height: 55px;
    object-fit: contain;
}

.mercador-card-img-wrap > .shiny-wrapper {
    width: 55px;
    height: 55px;
}

.mercador-card-info {
    flex: 1;
    min-width: 0;
}

.mercador-card-name {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--parchment);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mercador-card-tipos {
    display: flex;
    gap: 3px;
    margin-top: 3px;
}

.mercador-card-rar {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

.mercador-card-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

/* Centro de Cura bars */
.cura-healthy {
    opacity: 0.5;
}

.cura-bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 80px;
}

.cura-bar-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cura-bar-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-muted);
    width: 18px;
}

.cura-bar-val {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--parchment-dark);
    width: 28px;
    text-align: right;
}

.aposta-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--parchment);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.shop-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 0;
    background: rgba(0,0,0,0.15);
    margin-bottom: 4px;
}

.shop-item-icon {
    font-size: 1.2rem;
    width: 28px;
    text-align: center;
}

.shop-prisao-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.mochila-prisao-img {
    width: 85%;
    height: 85%;
    object-fit: contain;
}

.shop-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.shop-item-name {
    font-size: 0.8rem;
    color: var(--parchment);
    font-weight: 700;
}

.shop-item-desc {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.shop-item-price {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: var(--gold-light);
    font-size: 0.85rem;
    min-width: 50px;
    text-align: right;
}

.shop-buy-btn, .shop-sell-btn {
    padding: 4px 10px !important;
    font-size: 0.7rem !important;
}

/* Monster Select (pre-battle) */
.monster-select-wild {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(192,57,43,0.1);
    border: 1px solid rgba(192,57,43,0.3);
    border-radius: 10px;
    margin-bottom: 14px;
}

.monster-select-wild-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px;
}

.monster-select-wild-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.monster-select-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 500px;
    overflow-y: auto;
}

.monster-select-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 10px;
    background: rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.2s;
}

.monster-select-card:hover {
    border-color: var(--gold);
    background: rgba(201,168,76,0.05);
}

.msel-col { flex-shrink: 0; }
.msel-col-img { }
.msel-col-info { display: flex; flex-direction: column; gap: 2px; min-width: 80px; }
.msel-col-matchup { display: flex; gap: 10px; flex: 1; }
.msel-col-bars { display: flex; flex-direction: column; gap: 3px; min-width: 100px; }

.matchup-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
}

.matchup-section + .matchup-section {
    border-left: 1px solid rgba(201,168,76,0.15);
    padding-left: 10px;
}

.matchup-section-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1px;
}

.monster-select-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.monster-select-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(0,0,0,0.3);
}

.monster-select-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.monster-select-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: var(--parchment);
    font-size: 1.05rem;
}

.monster-select-level {
    font-size: 0.85rem;
    color: var(--gold);
    font-weight: 700;
}

.msel-tipos {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

.msel-tipo-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--gold-dark);
    padding: 1px;
    object-fit: contain;
    background: rgba(0,0,0,0.3);
}

.msel-tipo-clickable:hover {
    border-color: var(--gold);
    box-shadow: 0 0 8px rgba(201,168,76,0.3);
}

.msel-bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 100px;
}

.msel-bar-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.msel-bar-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 700;
    min-width: 18px;
}

.msel-bar-val {
    font-size: 0.6rem;
    color: var(--text-muted);
    min-width: 30px;
    text-align: right;
}

.msel-bar-row .arena-hp-bar,
.msel-bar-row .arena-mana-bar {
    flex: 1;
    height: 12px;
}

.monster-select-matchup {
    display: none;
}

.matchup-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.matchup-section-block {
    margin-bottom: 10px;
}

.matchup-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.matchup-divider::before,
.matchup-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(201,168,76,0.2);
}

.matchup-divider span {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 1px;
    white-space: nowrap;
}

.matchup-badges-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.matchup-label {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: var(--text-muted);
    min-width: 34px;
    font-weight: 700;
}

/* Matchup line (1 per type comparison) */
.matchup-line {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
}

.matchup-line-tipo {
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.matchup-line-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 1rem;
    line-height: 1;
}

.matchup-line-mult {
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}

.matchup-line-sep {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Legacy badge (type defense modal) */
.matchup-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    border-radius: 6px;
    background: rgba(0,0,0,0.25);
    border: 1px solid transparent;
}

.matchup-badge-tipo {
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

.matchup-badge-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 1.1rem;
    line-height: 1;
}

/* Cores dos indicadores de matchup (vantagem/desvantagem/imune/neutro).
   Aplicadas pelo span emitido por renderMatchupArrow(). */
.matchup-vantagem    { color: #2e7d32; }
.matchup-desvantagem { color: #c62828; }
.matchup-imune       { color: #616161; }
.matchup-neutro      { color: var(--text-muted); opacity: 0.6; }

.matchup-badge-mult {
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 22px;
    color: var(--parchment);
    text-align: center;
}

.matchup-neutral {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.arena-skill-tipo-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 2px;
}

.arena-skill-matchup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 0.9rem;
    line-height: 1;
    vertical-align: middle;
    margin-right: 2px;
}

/* Capture Animation */
.capture-anim-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    z-index: 50;
    border-radius: 12px;
    pointer-events: none;
    overflow: hidden;
}

.capture-anim-ball {
    width: 70px;
    height: 70px;
    object-fit: contain;
    transform: translateY(100px) scale(1.2);
    transition: transform 0.6s ease-in-out, opacity 0.3s;
    filter: drop-shadow(0 0 15px rgba(200,180,255,0.6));
}

.capture-anim-ball.capture-fly {
    transform: translateY(-20px) scale(0.8);
}

.capture-anim-ball.capture-absorb {
    transform: translateY(-20px) scale(0.5);
    filter: drop-shadow(0 0 25px rgba(200,180,255,0.9));
    transition: transform 0.5s ease-in, filter 0.5s;
}

.capture-anim-ball.capture-shake {
    animation: captureShake 0.5s ease;
}

.capture-anim-ball.capture-success {
    filter: drop-shadow(0 0 30px rgba(100,255,100,0.8)) brightness(1.3);
    transform: translateY(-20px) scale(0.6);
    transition: filter 0.4s, transform 0.4s;
}

.capture-anim-ball.capture-fail {
    opacity: 0.3;
    transform: translateY(-20px) scale(0.3);
    transition: opacity 0.4s, transform 0.4s;
}

@keyframes captureShake {
    0%, 100% { transform: translateY(-20px) scale(0.5) rotate(0deg); }
    20% { transform: translateY(-20px) scale(0.5) rotate(12deg); }
    40% { transform: translateY(-20px) scale(0.5) rotate(-12deg); }
    60% { transform: translateY(-20px) scale(0.5) rotate(8deg); }
    80% { transform: translateY(-20px) scale(0.5) rotate(-8deg); }
}

/* Monstro sendo sugado */
.capture-sucked {
    transition: transform 0.5s ease-in, opacity 0.5s;
    transform: scale(0) !important;
    opacity: 0 !important;
}

.capture-escape {
    animation: captureEscape 0.4s ease-out forwards;
}

@keyframes captureEscape {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.capture-anim-text {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: var(--gold-light);
    margin-top: 8px;
    min-height: 1.2em;
}

.capture-success-text {
    color: #66cc88;
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(100,200,130,0.5);
    animation: captureSuccessPulse 0.6s ease-out;
}

.capture-fail-text {
    color: #e74c3c;
    font-size: 1rem;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(231,76,60,0.5);
}

/* Particulas de captura */
.capture-spark {
    position: absolute;
    top: 45%;
    left: 50%;
    color: #66cc88;
    pointer-events: none;
    opacity: 0;
    text-shadow: 0 0 6px rgba(100,200,130,0.8);
    animation: captureSparkFly 0.8s ease-out var(--delay) forwards;
}

@keyframes captureSparkFly {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    30% { opacity: 1; transform: translate(calc(-50% + var(--dx) * 0.3), calc(-50% + var(--dy) * 0.3)) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.5); }
}

@keyframes captureSuccessPulse {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Battle Animations */
.arena-shake {
    animation: arenaShake 0.4s ease;
}

@keyframes arenaShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.arena-hit {
    transition: box-shadow 0.15s ease;
}

.arena-combatant {
    transition: box-shadow 0.3s ease;
}

.battle-result-summary {
    padding: 12px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 8px;
    margin-top: 10px;
}

.battle-result-summary .result-line {
    padding: 3px 0;
    font-size: 0.8rem;
    color: var(--parchment);
}

.battle-result-summary .result-line strong {
    color: var(--gold-light);
}

.result-divider {
    height: 1px;
    background: rgba(201,168,76,0.15);
    margin: 6px 0;
}

.result-victory {
    color: #27ae60 !important;
    font-weight: 700;
    font-size: 1.2rem !important;
    text-align: center;
}

.result-defeat {
    color: #c0392b !important;
    font-weight: 700;
    font-size: 1.2rem !important;
    text-align: center;
}

.result-unlock {
    color: var(--gold) !important;
    font-weight: 700;
    font-size: 0.9rem !important;
    text-align: center;
    text-shadow: 0 0 10px rgba(201,168,76,0.4);
}

/* ============================================
   PLAYER POSITION MARKER
   ============================================ */

.player-marker {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid var(--gold);
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(201,168,76,0.5), 0 2px 8px rgba(0,0,0,0.6);
    animation: player-pulse 2s ease-in-out infinite;
    overflow: hidden;
}

.player-marker-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.player-marker-placeholder {
    font-size: 16px;
}

@keyframes player-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(201,168,76,0.4); }
    50% { box-shadow: 0 0 20px rgba(201,168,76,0.7), 0 0 30px rgba(201,168,76,0.3); }
}

.player-walking {
    animation: player-walk-wobble 0.2s ease-in-out infinite !important;
}

@keyframes player-walk-wobble {
    0%, 100% { transform: rotate(0deg) scaleY(1); }
    25% { transform: rotate(-6deg) scaleY(0.92); }
    75% { transform: rotate(6deg) scaleY(0.92); }
}

/* Region adjacency visual */
.region-current {
    filter: drop-shadow(0 0 12px rgba(201,168,76,0.6)) !important;
}

.region-adjacent {
    filter: drop-shadow(0 0 8px rgba(201,168,76,0.3));
    cursor: pointer;
}

.region-unreachable {
    opacity: 0.5;
    filter: grayscale(30%);
    cursor: not-allowed;
}

.btn-battle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    background: linear-gradient(135deg, rgba(180, 40, 40, 0.3), rgba(200, 60, 20, 0.2));
    border: 1px solid rgba(220, 80, 40, 0.5);
    border-radius: 8px;
    color: #ff9966;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 12px;
}

.btn-battle:hover {
    background: linear-gradient(135deg, rgba(200, 50, 50, 0.4), rgba(220, 70, 30, 0.3));
    border-color: #ff9966;
    box-shadow: 0 0 12px rgba(220, 80, 40, 0.3);
}

.battle-char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.battle-char-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 6px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.battle-char-card:hover {
    border-color: var(--gold);
    background: rgba(201,168,76,0.08);
}

.battle-char-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold-dark);
    margin-bottom: 6px;
}

.battle-char-name {
    color: var(--parchment);
    font-size: 0.9rem;
    font-weight: bold;
}

.battle-char-info {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.battle-section {
    margin-bottom: 14px;
}

.battle-section-title {
    color: var(--gold-light);
    font-size: 0.95rem;
    font-family: 'Cinzel', serif;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(201,168,76,0.15);
    padding-bottom: 4px;
}

.battle-outcome-group {
    display: flex;
    gap: 10px;
    margin: 8px 0;
}

.battle-outcome-btn {
    flex: 1;
    padding: 10px 14px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.95rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.battle-outcome-btn.active {
    border-color: var(--gold);
    color: var(--gold-light);
    background: rgba(201,168,76,0.1);
}

.battle-outcome-btn:hover:not(.active) {
    border-color: rgba(201,168,76,0.4);
}

.battle-capture-section {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.15);
    border-radius: 8px;
    margin: 8px 0;
}

.battle-capture-section label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--parchment);
    font-size: 0.9rem;
    cursor: pointer;
    margin: 0;
}

.battle-capture-section .edit-input {
    flex: 1;
    margin: 0;
}

.battle-team-list {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.battle-monster-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.15);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
}

.battle-monster-row input[type="checkbox"] {
    flex-shrink: 0;
}

.battle-monster-row img.battle-mon-img {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.battle-monster-row .battle-mon-info {
    flex: 1;
    min-width: 0;
}

.battle-monster-row .battle-mon-name {
    color: var(--parchment);
    font-size: 0.9rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.battle-monster-row .battle-mon-level {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.battle-xp-preview {
    color: #66cc88;
    font-size: 0.85rem;
    font-weight: bold;
    flex-shrink: 0;
    min-width: 50px;
    text-align: right;
}

.battle-result-summary {
    padding: 12px;
    background: rgba(40, 120, 60, 0.15);
    border: 1px solid rgba(100, 200, 100, 0.3);
    border-radius: 8px;
    margin: 10px 0;
    font-size: 0.9rem;
    color: #88ddaa;
}

.battle-result-summary .result-line {
    margin: 2px 0;
}

.wild-level-input {
    width: 70px;
    text-align: center;
}

/* ============================================
   GUIDE PANEL
   ============================================ */

#guide-panel {
    position: fixed;
    top: 0; right: 0;
    width: 420px;
    height: 100vh;
    background: linear-gradient(180deg, var(--bg-dark), var(--bg-medium));
    border-left: 2px solid var(--gold-dark);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-strong);
    transition: transform 0.3s ease;
}

#guide-panel.hidden {
    display: none;
}

.guide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gold-dark);
}

.guide-header h2 {
    font-family: 'Cinzel Decorative', serif;
    color: var(--gold-light);
    font-size: 1.1rem;
    margin: 0;
}

.guide-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.guide-section {
    margin-bottom: 12px;
    border: 1px solid rgba(201,168,76,0.15);
    border-radius: 6px;
    background: rgba(0,0,0,0.15);
    overflow: hidden;
}

.guide-section h3 {
    font-family: 'Cinzel', serif;
    color: var(--gold-light);
    font-size: 1.05rem;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(201,168,76,0.15);
    padding-bottom: 4px;
}

.guide-section > summary {
    font-family: 'Cinzel', serif;
    color: var(--gold-light);
    font-size: 1.05rem;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    user-select: none;
    transition: background 0.15s;
}

.guide-section > summary::-webkit-details-marker { display: none; }

.guide-section > summary::after {
    content: '▸';
    color: var(--gold-dark);
    font-size: 0.9rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.guide-section[open] > summary::after {
    transform: rotate(90deg);
}

.guide-section > summary:hover {
    background: rgba(201,168,76,0.08);
}

.guide-section[open] > summary {
    border-bottom: 1px solid rgba(201,168,76,0.15);
}

.guide-section > *:not(summary) {
    padding-left: 14px;
    padding-right: 14px;
}

.guide-section > *:not(summary):first-of-type {
    margin-top: 10px;
}

.guide-section > *:not(summary):last-child {
    margin-bottom: 12px;
}

.guide-section p, .guide-section li {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 4px 0;
}

/* Tipagem guide */
.tipagem-group {
    margin-bottom: 8px;
}

.tipagem-group-label {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 4px;
}

.tipagem-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tipagem-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid;
    background: rgba(0,0,0,0.3);
    font-size: 0.7rem;
    color: var(--parchment);
    text-transform: capitalize;
}

.tipagem-badge strong {
    color: var(--gold-light);
    font-size: 0.65rem;
}

.tipagem-badge-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.guide-section ul {
    padding-left: 16px;
    margin: 6px 0;
}

/* Botao que abre a matriz 30x30 */
.btn-tipagem-matrix {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    background: linear-gradient(180deg, rgba(201,168,76,0.18), rgba(201,168,76,0.08));
    border: 1px solid var(--gold-dark);
    border-radius: 6px;
    color: var(--gold-light);
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.btn-tipagem-matrix:hover {
    background: linear-gradient(180deg, rgba(201,168,76,0.28), rgba(201,168,76,0.14));
    border-color: var(--gold);
}

/* Matriz 30x30 — pagina full-viewport (sem overlay/modal) */
.tipagem-matrix-page {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: linear-gradient(135deg, var(--bg-dark), var(--bg-medium));
    display: flex;
}

.tipagem-matrix-page.hidden {
    display: none;
}

.tipagem-matrix-modal {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.tipagem-matrix-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--gold-dark);
    flex-wrap: wrap;
}

.tipagem-matrix-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(180deg, rgba(201,168,76,0.18), rgba(201,168,76,0.08));
    border: 1px solid var(--gold-dark);
    border-radius: 6px;
    color: var(--gold-light);
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.tipagem-matrix-back:hover {
    background: linear-gradient(180deg, rgba(201,168,76,0.32), rgba(201,168,76,0.16));
    border-color: var(--gold);
}

.tipagem-matrix-back svg {
    flex-shrink: 0;
}

.tipagem-matrix-header-spacer {
    /* mantem o titulo centralizado entre o botao Voltar e a direita */
    flex: 0 0 auto;
    width: 92px;
}

.tipagem-matrix-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 180px;
    text-align: center;
    align-items: center;
}

.tipagem-matrix-title h3 {
    font-family: 'Cinzel Decorative', serif;
    color: var(--gold-light);
    font-size: 1.1rem;
    margin: 0;
}

.tipagem-matrix-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

.tipagem-matrix-fonte {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    border: 1px solid;
    margin-left: 4px;
}

.tipagem-matrix-fonte.ok       { color: #7adf7e; border-color: rgba(122,223,126,0.5); background: rgba(46,125,50,0.18); }
.tipagem-matrix-fonte.fallback { color: #ffb46b; border-color: rgba(255,180,107,0.5); background: rgba(180,90,30,0.18); }

.tipagem-matrix-body {
    flex: 1;
    overflow: auto;
    padding: 6px;
    background: rgba(0,0,0,0.25);
}

.tipagem-matrix-table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-family: 'Cinzel', serif;
}

/* Larguras fixas via colgroup — evita desalinhamento das linhas com sticky. */
.tipagem-matrix-table col.tipagem-matrix-col-rowhead { width: 44px; }
.tipagem-matrix-table col.tipagem-matrix-col-data    { width: 44px; }

.tipagem-matrix-table th,
.tipagem-matrix-table td {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    border: 1px solid rgba(201,168,76,0.08);
    font-size: 0.95rem;
    background: var(--bg-dark);
    box-sizing: border-box;
}

.tipagem-matrix-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, var(--bg-medium), var(--bg-dark));
    border-bottom: 2px solid var(--gold-dark);
}

.tipagem-matrix-table tbody th {
    position: sticky;
    left: 0;
    z-index: 2;
    background: linear-gradient(90deg, var(--bg-medium), var(--bg-dark));
    border-right: 2px solid var(--gold-dark);
}

.tipagem-matrix-table thead th.tipagem-matrix-corner {
    left: 0;
    top: 0;
    z-index: 3;
    background: var(--bg-medium);
    border-right: 2px solid var(--gold-dark);
    border-bottom: 2px solid var(--gold-dark);
}

.tipagem-matrix-head-icon {
    width: 28px;
    height: 28px;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
}

/* Numero indice (1..30) na borda esquerda de cada icone de cabecalho.
   Os <th> ja sao sticky (thead/tbody th), o que tambem estabelece um
   containing block para o .tipagem-matrix-idx absoluto. */
.tipagem-matrix-idx {
    position: absolute;
    left: 2px;
    top: 2px;
    font-family: 'Cinzel', serif;
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1;
    color: var(--gold-light);
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(201,168,76,0.4);
    border-radius: 3px;
    padding: 1px 3px;
    pointer-events: none;
    letter-spacing: 0;
}

.tipagem-matrix-cell {
    transition: background 0.1s;
    cursor: help;
}

.tipagem-matrix-cell.matchup-vantagem    { background: rgba(46,125,50,0.22); }
.tipagem-matrix-cell.matchup-desvantagem { background: rgba(198,40,40,0.22); }
.tipagem-matrix-cell.matchup-imune       { background: rgba(120,120,120,0.30); }
.tipagem-matrix-cell.matchup-neutro      { background: rgba(0,0,0,0.15); }

.tipagem-matrix-cell-num {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.2px;
}

.tipagem-matrix-cell.matchup-vantagem    .tipagem-matrix-cell-num { color: #7adf7e; text-shadow: 0 1px 0 rgba(0,0,0,0.5); }
.tipagem-matrix-cell.matchup-desvantagem .tipagem-matrix-cell-num { color: #ff7878; text-shadow: 0 1px 0 rgba(0,0,0,0.5); }
.tipagem-matrix-cell.matchup-imune       .tipagem-matrix-cell-num { color: #f0f0f0; text-shadow: 0 1px 0 rgba(0,0,0,0.5); }
.tipagem-matrix-cell.matchup-neutro      .tipagem-matrix-cell-num { color: rgba(255,255,255,0.22); }

.tipagem-matrix-table tbody tr:hover .tipagem-matrix-cell {
    filter: brightness(1.15);
}

.tipagem-matrix-table tbody tr:hover > th {
    background: rgba(201,168,76,0.18);
}

.tipagem-matrix-table tbody td.tipagem-matrix-cell:hover {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}

/* Cabecalho clicavel para focar linha+coluna */
.tipagem-matrix-table thead th.tipagem-matrix-col-head,
.tipagem-matrix-table tbody th.tipagem-matrix-row-head {
    cursor: pointer;
}

.tipagem-matrix-table thead th.tipagem-matrix-col-head:hover,
.tipagem-matrix-table tbody th.tipagem-matrix-row-head:hover {
    background: rgba(201,168,76,0.25);
}

/* Destaque ao clicar num icone de tipo */
.tipagem-matrix-table tr.is-tm-row > td.tipagem-matrix-cell,
.tipagem-matrix-table td.tipagem-matrix-cell.is-tm-col {
    box-shadow: inset 0 0 0 1px rgba(201,168,76,0.55);
    filter: brightness(1.55) saturate(1.2);
}

.tipagem-matrix-table tr.is-tm-row > td.tipagem-matrix-cell .tipagem-matrix-cell-num,
.tipagem-matrix-table td.tipagem-matrix-cell.is-tm-col .tipagem-matrix-cell-num {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.7);
}

.tipagem-matrix-table tr.is-tm-row > th,
.tipagem-matrix-table th.is-tm-head {
    background: linear-gradient(180deg, rgba(201,168,76,0.55), rgba(201,168,76,0.30)) !important;
    box-shadow: inset 0 0 0 2px var(--gold);
}

.guide-highlight {
    color: var(--gold-light);
    font-weight: bold;
}

.guide-formula {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(201,168,76,0.15);
    border-radius: 6px;
    padding: 10px 14px;
    font-family: monospace;
    font-size: 0.9rem;
    color: #7ecaff;
    margin: 8px 0;
}

.guide-example {
    background: rgba(0,0,0,0.2);
    border-left: 3px solid var(--gold-dark);
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    border-radius: 0 6px 6px 0;
}

.char-add-monster-card span { font-size: 1.5rem; }

/* Emoji picker grid */
.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    margin-top: 4px;
    margin-bottom: 8px;
}

.emoji-pick {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid rgba(201,168,76,0.15);
    border-radius: 6px;
    background: rgba(0,0,0,0.2);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.emoji-pick:hover { border-color: var(--gold); background: rgba(201,168,76,0.1); }
.emoji-pick.selected { border-color: var(--gold); background: rgba(201,168,76,0.2); }

/* Emoji picker component (reutilizavel) */
.emoji-picker-component {
    max-height: 280px;
    overflow-y: auto;
}

.emoji-picker-cat-header {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 0 2px;
    border-bottom: 1px solid rgba(201,168,76,0.15);
    margin-bottom: 4px;
}

.emoji-picker-popup {
    position: fixed;
    z-index: 10000;
    background: var(--bg-dark);
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 10px;
    padding: 10px;
    width: 300px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
    animation: emojiPopupIn 0.15s ease-out;
}

@keyframes emojiPopupIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Emoji input clickable style */
.emoji-input-btn {
    width: 48px;
    height: 38px;
    font-size: 1.4rem;
    text-align: center;
    cursor: pointer;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 6px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-input-btn:hover {
    border-color: var(--gold);
    background: rgba(201,168,76,0.1);
}

@media (max-width: 768px) {
    .char-grid { grid-template-columns: repeat(2, 1fr); }
    .potencial-grid { grid-template-columns: repeat(3, 1fr); }
    .mochila-grid { grid-template-columns: repeat(5, 1fr); }
    .monstros-ativos-grid, .monstros-armazem-grid { grid-template-columns: repeat(3, 1fr); }
    .monster-picker-grid { grid-template-columns: repeat(3, 1fr); }
    .char-sheet-header { flex-direction: column; text-align: center; }
    .char-sheet-edit-btn { margin-left: 0; }
}

/* ============================================
   REFRESH & TOAST
   ============================================ */

#btn-refresh.spinning svg {
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.toast-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-medium);
    color: var(--gold-light);
    border: 1px solid var(--gold-dark);
    padding: 10px 24px;
    border-radius: 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    box-shadow: var(--shadow-strong);
}

.toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---- Battle Item Modal ---- */
.battle-item-modal {
    max-width: 360px;
}

.battle-item-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
}

.battle-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(201,168,76,0.1);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.battle-item-row:hover {
    border-color: rgba(201,168,76,0.4);
    background: rgba(201,168,76,0.08);
}

.battle-item-color {
    width: 5px;
    height: 28px;
    border-radius: 3px;
    flex-shrink: 0;
}

.battle-item-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.battle-item-info {
    flex: 1;
    min-width: 0;
}

.battle-item-name {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--parchment);
    display: block;
}

.battle-item-qty {
    font-size: 0.7rem;
    color: var(--gold-light);
    font-weight: 400;
}

.battle-item-desc {
    font-size: 0.65rem;
    color: var(--text-muted);
    display: block;
}

/* ---- Arena Buffs ---- */
.arena-buffs {
    display: flex;
    gap: 4px;
    margin-top: 3px;
    justify-content: center;
}

.arena-buff-icon {
    font-size: 0.9rem;
    background: rgba(201,168,76,0.15);
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 4px;
    padding: 1px 4px;
    cursor: help;
}

/* ---- Item Shop ---- */
.item-shop-modal {
    max-width: 420px;
}

.item-shop-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
}

.item-shop-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(201,168,76,0.1);
    transition: border-color 0.2s;
}

.item-shop-card:hover {
    border-color: rgba(201,168,76,0.3);
}

.item-shop-color {
    width: 5px;
    height: 32px;
    border-radius: 3px;
    flex-shrink: 0;
}

.item-shop-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.item-shop-info {
    flex: 1;
    min-width: 0;
}

.item-shop-name {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--parchment);
    display: block;
}

.item-shop-desc {
    font-size: 0.65rem;
    color: var(--text-muted);
    display: block;
}

.item-shop-owned {
    font-size: 0.6rem;
    color: var(--gold);
}

.item-shop-buy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.item-shop-price {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gold-light);
}

.item-shop-buy .btn-battle {
    padding: 3px 12px;
    font-size: 0.7rem;
}

/* Conexoes Editor */
.edit-conexoes-section {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(201,168,76,0.1);
}

.edit-section-label {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 6px;
}

.conexao-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.conexao-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(201,168,76,0.1);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 4px;
    font-size: 0.7rem;
    color: var(--parchment);
}

.conexao-remove {
    background: none;
    border: none;
    color: var(--red-danger, #e74c3c);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 2px;
    line-height: 1;
}

.conexao-remove:hover {
    color: #ff6b6b;
}

.conexao-add-select {
    font-size: 0.75rem;
    max-width: 220px;
}

/* Equipment Slot */
.ma-img-area {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 8px 0;
}

.ma-img-wrap {
    flex-shrink: 0;
}

.ma-equip-slot {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 2px dashed rgba(201,168,76,0.3);
    border-radius: 6px;
    background: rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s;
}

.ma-equip-slot:hover {
    border-color: var(--gold);
    background: rgba(201,168,76,0.08);
}

.ma-equip-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.ma-equip-name {
    font-size: 0.45rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1;
    max-width: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ma-equip-empty {
    font-size: 1.2rem;
    color: rgba(201,168,76,0.2);
}

.ma-equip-gatilho {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 4px auto 8px;
    padding: 5px 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    border: 1px solid rgba(201,168,76,0.1);
    max-width: 280px;
}

.ma-gatilho-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.ma-gatilho-range {
    width: 60px;
    height: 4px;
}

.ma-gatilho-val {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--gold-light);
    white-space: nowrap;
    min-width: 42px;
}

.ma-gatilho-btn {
    padding: 2px 8px !important;
    font-size: 0.6rem !important;
    min-width: 30px;
}

/* Equip Modal */
.equip-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 6px;
}

.equip-current {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(201,168,76,0.15);
}

.equip-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid rgba(201,168,76,0.1);
    border-radius: 5px;
    margin-bottom: 4px;
    transition: border-color 0.2s;
}

.equip-item-row:not(.equip-item-active):hover {
    border-color: rgba(201,168,76,0.4);
    background: rgba(201,168,76,0.05);
}

.equip-item-active {
    border-color: rgba(201,168,76,0.3);
    background: rgba(201,168,76,0.08);
}

.equip-item-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.equip-item-info {
    flex: 1;
    min-width: 0;
}

.equip-item-name {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--parchment);
    display: block;
}

.equip-item-desc {
    font-size: 0.6rem;
    color: var(--text-muted);
    display: block;
}

/* ---- Unlock Animation ---- */
.unlock-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: unlock-bg-in 0.5s ease-out;
}

.unlock-overlay.unlock-fade-out {
    animation: unlock-bg-out 0.5s ease-in forwards;
}

@keyframes unlock-bg-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes unlock-bg-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

.unlock-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.unlock-icon-wrap {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.unlock-mystery-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(0,0,0,0.9));
}

.unlock-progress-text {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold-light);
    text-shadow: 0 0 8px rgba(201,168,76,0.6);
}

.unlock-pulse {
    animation: unlock-pulse-anim 0.6s ease-in-out 3;
}

@keyframes unlock-pulse-anim {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); filter: brightness(1.3); }
}

.unlock-real {
    width: 120px;
    height: 120px;
}

.unlock-real .rpg-icon,
.unlock-real .rpg-icon-emoji {
    width: 100%;
    height: 100%;
    font-size: 80px;
}

.unlock-appear {
    animation: unlock-appear-anim 0.6s ease-out;
}

@keyframes unlock-appear-anim {
    0% { transform: scale(0.3); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}

.unlock-name {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--parchment);
    text-shadow: 0 0 12px rgba(201,168,76,0.4);
    animation: unlock-text-in 0.5s ease-out;
}

.unlock-subtitle {
    font-size: 0.85rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: unlock-text-in 0.5s ease-out 0.2s both;
}

@keyframes unlock-text-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Unlock flash + sparks */
.unlock-flash-layer {
    position: fixed;
    inset: 0;
    z-index: 9001;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
}

.unlock-flash-layer.active {
    opacity: 1;
    animation: unlock-glow 2.5s ease-out forwards;
}

@keyframes unlock-glow {
    0% { background: transparent; }
    8% { background: radial-gradient(circle at 50% 45%, rgba(201,168,76,0.4) 0%, transparent 60%); }
    25% { background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.25) 0%, rgba(201,168,76,0.1) 40%, transparent 70%); }
    50% { background: radial-gradient(circle at 50% 45%, rgba(201,168,76,0.1) 0%, transparent 50%); }
    100% { background: transparent; opacity: 0; }
}

.unlock-spark {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    animation: unlock-spark-fly var(--dur) ease-out var(--delay) forwards;
    filter: drop-shadow(0 0 4px rgba(201,168,76,0.6));
}

@keyframes unlock-spark-fly {
    0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
    20% { opacity: 1; transform: translate(calc(var(--dx) * 0.3), calc(var(--dy) * 0.3)) scale(1.1); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.6); }
}

/* Ready marker (100% - pulsing) */
.region-marker-ready {
    animation: ready-pulse 1.5s ease-in-out infinite;
}

@keyframes ready-pulse {
    0%, 100% { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }
    50% { filter: drop-shadow(0 0 15px rgba(201,168,76,0.6)) brightness(1.2); }
}

.label-ready {
    color: var(--gold) !important;
    font-style: normal !important;
    animation: ready-pulse-text 1.5s ease-in-out infinite;
}

@keyframes ready-pulse-text {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ============================================
   MENU PRINCIPAL
   ============================================ */

#main-menu {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.8s ease;
}

#main-menu.menu-visible {
    opacity: 1;
}

#main-menu.menu-exit {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.menu-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, #2c2418 0%, #1a1410 50%, #0d0a07 100%);
    z-index: 0;
}

.menu-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('img/mapas/ilha_verdejante.png') center/cover no-repeat;
    opacity: 0.06;
    filter: blur(4px);
}

.menu-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, transparent 20%, rgba(0,0,0,0.7) 100%);
}

.menu-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 420px;
    width: 90%;
}

.menu-logo {
    width: 100px;
    height: 100px;
    filter: drop-shadow(0 0 30px rgba(201,168,76,0.5));
    animation: menuLogoGlow 3s ease-in-out infinite, compassSpin 20s linear infinite;
    margin-bottom: 16px;
}

@keyframes menuLogoGlow {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(201,168,76,0.4)); }
    50% { filter: drop-shadow(0 0 40px rgba(201,168,76,0.8)); }
}

.menu-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 2.6rem;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 30px rgba(201,168,76,0.5), 0 2px 8px rgba(0,0,0,0.8);
    letter-spacing: 6px;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.menu-subtitle {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: var(--text-muted);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0 0 40px;
}

.menu-version {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: rgba(160,144,128,0.4);
    letter-spacing: 1px;
}

/* Menu Botoes */
.menu-btn {
    display: block;
    width: 100%;
    padding: 14px 24px;
    margin: 10px 0;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.menu-btn-primary {
    background: linear-gradient(180deg, rgba(201,168,76,0.15) 0%, rgba(201,168,76,0.05) 100%);
    color: var(--gold);
    border-color: var(--gold-dark);
}

.menu-btn-primary:hover {
    background: linear-gradient(180deg, rgba(201,168,76,0.3) 0%, rgba(201,168,76,0.1) 100%);
    border-color: var(--gold);
    box-shadow: 0 0 20px rgba(201,168,76,0.2), inset 0 0 20px rgba(201,168,76,0.05);
}

.menu-btn-secondary {
    background: transparent;
    color: var(--text-muted);
    border-color: rgba(160,144,128,0.2);
}

.menu-btn-secondary:hover {
    color: var(--parchment);
    border-color: rgba(160,144,128,0.4);
}

.menu-btn-google {
    background: rgba(255,255,255,0.05);
    color: var(--parchment);
    border-color: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.menu-btn-google:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.3);
}

/* Auth Form */
.auth-form {
    width: 100%;
}

.auth-input {
    display: block;
    width: 100%;
    padding: 12px 16px;
    margin: 8px 0;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(201,168,76,0.15);
    border-radius: 4px;
    color: var(--parchment);
    font-family: 'Lora', serif;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.auth-input:focus {
    border-color: var(--gold-dark);
}

.auth-input::placeholder {
    color: var(--text-muted);
}

.auth-error {
    color: var(--red-light);
    font-size: 0.8rem;
    margin: 6px 0;
}

.auth-toggle {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: 12px 0;
}

.auth-toggle a {
    color: var(--gold);
    text-decoration: none;
}

.auth-toggle a:hover {
    color: var(--gold-light);
    text-decoration: underline;
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: 16px 0;
    gap: 12px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(201,168,76,0.15);
}

.auth-divider span {
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Save Selection */
.menu-saves-title {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: var(--gold);
    margin: 0 0 20px;
    letter-spacing: 2px;
}

.menu-saves-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.menu-save-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(201,168,76,0.12);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.menu-save-card:hover {
    border-color: var(--gold-dark);
    background: rgba(201,168,76,0.06);
    box-shadow: 0 0 15px rgba(201,168,76,0.1);
}

.menu-save-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(201,168,76,0.2);
    flex-shrink: 0;
}

.menu-save-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201,168,76,0.08);
    color: var(--gold);
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.3rem;
    font-weight: 700;
}

.menu-save-info {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 2px;
}

.menu-save-name {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--parchment);
}

.menu-save-detail {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.menu-save-new {
    border-style: dashed;
    border-color: rgba(201,168,76,0.15);
}

.menu-save-new:hover {
    border-style: solid;
}

.menu-loading-text {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 20px;
}

.menu-error {
    color: var(--red-light);
    font-size: 0.85rem;
    text-align: center;
    padding: 10px;
}

/* ============================================
   CHARACTER CREATOR
   ============================================ */

.char-creator-backdrop {
    overflow-y: auto;
}

.char-creator {
    text-align: center;
    /* v0.88.1: era 600px; sobe pra 700 pra caber 5 opcoes (4 fixas + upload) na mesma linha */
    max-width: 700px;
    width: 92%;
    padding: 30px 20px;
}

.creator-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.6rem;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(201,168,76,0.4);
    letter-spacing: 3px;
    margin: 0 0 24px;
}

.creator-subtitle {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 20px 0 12px;
}

.creator-options {
    display: flex;
    justify-content: center;
    /* v0.88.1: era 14px; reduzido pra caber as 5 opcoes na mesma linha. wrap permanece pro mobile */
    gap: 10px;
    flex-wrap: wrap;
}

.creator-option {
    cursor: pointer;
    transition: all 0.4s ease;
    opacity: 0.7;
    transform: scale(0.9);
    border: 2px solid rgba(201,168,76,0.15);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0,0,0,0.3);
    padding: 4px;
}

.creator-option:hover {
    opacity: 0.9;
    transform: scale(0.95);
    border-color: rgba(201,168,76,0.3);
}

.creator-option-selected {
    opacity: 1 !important;
    transform: scale(1.08) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 25px rgba(201,168,76,0.3), 0 0 50px rgba(201,168,76,0.1);
}

.creator-option-img {
    width: 110px;
    height: 140px;
    object-fit: cover;
    object-position: center 15%;
    display: block;
    border-radius: 8px;
}

/* v0.88.1 — 5a opcao do "Escolha seu Aventureiro": quadrado de upload de foto
   propria. Mesmo tamanho/layout das 4 imagens fixas; o conteudo interno troca
   entre placeholder (icone + "Enviar foto") e a foto enviada (com X). */
.creator-option-upload .creator-option-upload-content {
    position: relative;
    width: 110px;
    height: 140px;
    border-radius: 8px;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(232,216,184,0.65);
    overflow: hidden;
}
.creator-option-upload .creator-option-upload-content > img.creator-option-img {
    width: 110px;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
}
.creator-option-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    color: rgba(232,216,184,0.6);
    text-align: center;
    padding: 8px;
    letter-spacing: 0.03em;
}
.creator-option-upload-icon {
    font-size: 1.9rem;
    opacity: 0.75;
    line-height: 1;
}
.creator-option-upload-clear {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.4);
    background: rgba(0,0,0,0.65);
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.creator-option-upload-clear:hover {
    background: var(--red-danger, #c34a3e);
    border-color: var(--red-danger, #c34a3e);
}

/* v0.88.1 — wrap do retrato no form de criar/editar personagem. Reusa
   .item-img-wrap (mesmo componente do form de Item), so centraliza no campo. */
.char-form-portrait-field { display: flex; flex-direction: column; align-items: flex-start; }
.char-form-portrait-field .char-form-img-wrap { margin: 0 auto; }

.creator-monsters {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 8px 0;
}

.creator-bestiary-card {
    cursor: pointer;
    transition: all 0.3s ease;
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    font-size: 0.75rem;
}

.creator-bestiary-card .bestiary-card-img-wrap {
    height: 100px;
}

.creator-bestiary-card .bestiary-card-img,
.creator-bestiary-card .bestiary-card-img-wrap img {
    max-height: 80px;
}

.creator-bestiary-card .bestiary-card-type-icon {
    width: 22px;
    height: 22px;
}

.creator-bestiary-card:hover {
    border-color: rgba(201,168,76,0.4);
}

.creator-bestiary-card.creator-mon-selected {
    border-color: var(--gold) !important;
    box-shadow: 0 0 15px rgba(201,168,76,0.2);
    transform: translateY(-3px);
}

.creator-mon-detail {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 12px 0;
    padding: 12px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(201,168,76,0.08);
    border-radius: 8px;
}

#creator-radar {
    flex-shrink: 0;
}

.creator-stats-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.creator-stat-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.creator-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: left;
}

.creator-stat-val {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gold-light);
    min-width: 16px;
    text-align: right;
}

.creator-form {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.creator-name-input {
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
}

.creator-start-btn {
    margin-top: 4px;
}

/* v0.88.1 — linha do botao "Voltar" abaixo do form (sempre visivel, mesmo
   antes do jogador escolher uma opcao). */
.creator-back-row {
    margin: 18px auto 0;
    max-width: 300px;
    display: flex;
    justify-content: center;
}
.creator-back-btn {
    width: 100%;
}

/* Menu Options */
.menu-options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
    min-width: 260px;
}

.menu-btn-logout {
    margin-top: 20px;
    font-size: 0.7rem;
}

.menu-btn-danger {
    color: #e74c3c;
    border-color: rgba(231,76,60,0.3);
}

.menu-btn-danger:hover {
    background: rgba(231,76,60,0.15);
    border-color: rgba(231,76,60,0.5);
}

.menu-back-btn {
    background: none;
    border: 1px solid rgba(201,168,76,0.2);
    color: var(--gold);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
    transition: background 0.2s;
}

.menu-back-btn:hover {
    background: rgba(201,168,76,0.1);
}

/* Settings Panel */
.menu-settings {
    min-width: 320px;
    max-width: 420px;
}

.menu-settings-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.menu-settings-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(201,168,76,0.15);
    padding-bottom: 8px;
}

.menu-stab {
    background: none;
    border: 1px solid rgba(201,168,76,0.1);
    color: var(--text-muted);
    padding: 5px 12px;
    font-size: 0.75rem;
    font-family: 'Cinzel', serif;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s;
}

.menu-stab.active {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(201,168,76,0.1);
}

.menu-stab:hover:not(.active) {
    color: var(--parchment);
    background: rgba(255,255,255,0.03);
}

.menu-stab-content {
    display: none;
}

.menu-stab-content.active {
    display: block;
}

.menu-settings-body {
    max-height: 300px;
    overflow-y: auto;
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-wrap: wrap;
}

.setting-row-danger {
    border-color: rgba(231,76,60,0.15);
}

.setting-label {
    font-size: 0.8rem;
    color: var(--parchment);
    flex: 1 1 120px;
    min-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.setting-slider {
    width: 100px;
    accent-color: var(--gold);
}

.setting-val {
    font-size: 0.7rem;
    color: var(--gold);
    min-width: 35px;
    text-align: right;
}

.setting-select {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(201,168,76,0.2);
    color: var(--parchment);
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 3px;
}

.setting-action-btn {
    padding: 4px 12px;
    font-size: 0.7rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.menu-settings-footer {
    margin-top: 12px;
    text-align: center;
}

/* Credits */
.menu-credits-body {
    text-align: center;
    padding: 20px 0;
}

.credits-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.5rem;
    color: var(--gold);
    margin: 0;
}

.credits-subtitle {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 20px;
}

.credits-section {
    margin: 12px 0;
}

.credits-role {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin: 0;
}

.credits-name {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: var(--parchment);
    margin: 2px 0 0;
}

/* Features Editor */
.feat-toggles-list {
    padding: 10px 15px;
    max-height: 400px;
    overflow-y: auto;
}

.feat-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.feat-toggle-info {
    flex: 1;
    min-width: 0;
}

.feat-toggle-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--parchment);
    display: block;
}

.feat-toggle-desc {
    font-size: 0.65rem;
    color: var(--text-muted);
    display: block;
}

.feat-trigger-config {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.feat-trigger-type,
.feat-param-val {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(201,168,76,0.2);
    color: var(--parchment);
    font-size: 0.65rem;
    padding: 2px 4px;
    border-radius: 3px;
}

.feat-trigger-msg {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(201,168,76,0.1);
    color: var(--parchment);
    font-size: 0.6rem;
    padding: 2px 4px;
    border-radius: 3px;
    width: 100%;
    margin-top: 2px;
}

.feat-switch {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    margin-left: 10px;
}

.feat-switch input { opacity: 0; width: 0; height: 0; }

.feat-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(255,255,255,0.1);
    border-radius: 11px;
    transition: background 0.3s;
}

.feat-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: var(--parchment);
    border-radius: 50%;
    transition: transform 0.3s;
}

.feat-switch input:checked + .feat-slider {
    background: var(--gold);
}

.feat-switch input:checked + .feat-slider::before {
    transform: translateX(18px);
}

/* Feature Unlock Notification */
.feature-unlock-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0);
    transition: background 0.5s;
    cursor: pointer;
}

.feature-unlock-overlay.visible {
    background: rgba(0,0,0,0.75);
}

.feature-unlock-overlay.closing {
    background: rgba(0,0,0,0);
}

.feature-unlock-box {
    text-align: center;
    transform: scale(0.3);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s;
}

.feature-unlock-overlay.visible .feature-unlock-box {
    transform: scale(1);
    opacity: 1;
}

.feature-unlock-overlay.closing .feature-unlock-box {
    transform: scale(1.2);
    opacity: 0;
}

.feature-unlock-icon {
    margin-bottom: 12px;
    animation: unlock-bounce 0.8s ease-out 0.3s both;
}

@keyframes unlock-bounce {
    0% { transform: translateY(20px) scale(0.5); opacity: 0; }
    60% { transform: translateY(-8px) scale(1.1); }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.feature-unlock-title {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(201,168,76,0.5);
    margin: 0 0 8px;
    animation: unlock-glow 1.5s ease-in-out infinite alternate;
}

@keyframes unlock-glow {
    from { text-shadow: 0 0 10px rgba(201,168,76,0.3); }
    to { text-shadow: 0 0 30px rgba(201,168,76,0.7), 0 0 60px rgba(201,168,76,0.3); }
}

.feature-unlock-msg {
    font-size: 1rem;
    color: var(--parchment);
    max-width: 350px;
    margin: 0 auto;
}

.feature-unlock-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
    animation: unlock-particle 1.5s ease-out forwards;
    pointer-events: none;
}

@keyframes unlock-particle {
    0% { transform: translate(0,0) scale(1); opacity: 1; }
    100% { transform: translate(calc((var(--x, 50) - 50) * 4px), calc((var(--y, 50) - 50) * 4px - 80px)) scale(0); opacity: 0; }
}

/* ============================================
   SPINNERS REUTILIZAVEIS
   ============================================ */

.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(201, 168, 76, 0.25);
    border-top-color: #c9a84c;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
}

.spinner.spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.spinner.spinner-lg { width: 32px; height: 32px; border-width: 3px; }

/* Estado de loading em botoes (reaproveita .menu-btn) */
.menu-btn.is-loading {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
}
.menu-btn.is-loading > .btn-label { visibility: hidden; }
.menu-btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* Bloco de loading inline (texto + spinner) */
.loading-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    color: #a09080;
    font-style: italic;
}

/* Overlay de loading (cobre tela, semi-transparente) */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 11000;
    background: rgba(13, 10, 7, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #c9a84c;
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    backdrop-filter: blur(4px);
}

/* Cards de monstro: spinner enquanto a imagem nao carregou */
.bestiary-card-img-wrap {
    position: relative;
}
.bestiary-card-img-wrap:has(img:not([data-loaded]):not(.monster-selo)) > *:not([data-loaded]) {
    opacity: 0;
}
.bestiary-card-img-wrap:has(img:not([data-loaded]):not(.monster-selo))::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20, 15, 10, 0.55);
    z-index: 1;
}
.bestiary-card-img-wrap:has(img:not([data-loaded]):not(.monster-selo))::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 22px; height: 22px;
    margin: -11px 0 0 -11px;
    border: 2px solid rgba(201, 168, 76, 0.25);
    border-top-color: #c9a84c;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    z-index: 2;
}
.bestiary-card-img-wrap:has(img[data-loaded="err"])::after {
    content: '?';
    border: none;
    animation: none;
    width: auto; height: auto;
    margin: 0;
    transform: translate(-50%, -50%);
    color: #888;
    font-size: 32px;
    font-weight: bold;
}

/* ============================================
   BORDA DE NARRADOR (Fase 2)
   Aparece quando body.is-narrador. Mais sutil que body.mestrando (Fase 8 futura)
   ============================================ */
body.is-narrador::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    border: 3px solid rgba(155, 89, 182, 0.55);
    box-shadow: inset 0 0 24px rgba(155, 89, 182, 0.25);
    border-radius: 4px;
}

/* Em modo dev (EDITOR_MODE=true), elementos data-editor-only ficam no DOM.
   Quando o usuario esta explicitamente como jogador, escondemos.
   Em Electron (sem role) ou narrador, mantem visivel. */
body.is-jogador [data-editor-only] { display: none !important; }

/* Elementos de edicao restritos a narrador (na ficha de personagem):
   potencial +/-, dinheiro arrows, equipar/desequipar, mochila. */
body.is-jogador [data-narrador-only] { display: none !important; }
body.is-jogador [data-narrador-readonly] { pointer-events: none; opacity: 0.85; }
body.is-jogador [data-narrador-readonly] input { pointer-events: none; background: rgba(0,0,0,0.4) !important; }

/* Equipamentos e Mochila: apenas narrador pode interagir.
   Jogador ve normalmente mas nao clica. */
body.is-jogador #equipamentos-section,
body.is-jogador #mochila-grid {
    pointer-events: none;
    opacity: 0.92;
    position: relative;
}
body.is-jogador #equipamentos-section::after,
body.is-jogador #mochila-grid::after {
    content: '\1F512'; /* cadeado */
    position: absolute;
    top: 6px; right: 8px;
    font-size: 1rem;
    opacity: 0.55;
    pointer-events: none;
}

/* ============================================
   ROLE SELECTOR (modal pos-login)
   ============================================ */
.role-selector {
    background: linear-gradient(135deg, #1a1410 0%, #2c2418 100%);
    border: 1px solid #c9a84c;
    border-radius: 12px;
    padding: 32px 28px;
    max-width: 720px;
    width: 92%;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    text-align: center;
}
.role-title {
    color: #c9a84c;
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.8rem;
    margin: 0 0 6px;
}
.role-subtitle {
    color: #a09080;
    font-size: 0.9rem;
    margin: 0 0 24px;
    font-style: italic;
}
.role-options {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
}
.role-card {
    flex: 1 1 260px;
    max-width: 320px;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid #5a4a3a;
    border-radius: 10px;
    padding: 24px 18px;
    cursor: pointer;
    color: #d8c4a0;
    font-family: inherit;
    transition: border-color 0.2s, transform 0.15s, background 0.2s;
}
.role-card:hover:not(:disabled) {
    border-color: #c9a84c;
    transform: translateY(-2px);
    background: rgba(201, 168, 76, 0.08);
}
.role-card:disabled { opacity: 0.6; cursor: not-allowed; }
.role-card[data-role="narrador"]:hover:not(:disabled) {
    border-color: #b388e0;
    background: rgba(155, 89, 182, 0.10);
}
.role-icon {
    font-size: 2.6rem;
    margin-bottom: 8px;
}
.role-name {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    color: #c9a84c;
    margin-bottom: 6px;
    font-weight: 700;
}
.role-card[data-role="narrador"] .role-name { color: #b388e0; }
.role-desc {
    font-size: 0.88rem;
    color: #a09080;
    line-height: 1.4;
}
.role-card.is-loading { position: relative; pointer-events: none; opacity: 0.7; }
.role-card.is-loading::after {
    content: '';
    position: absolute; top: 12px; right: 12px;
    width: 18px; height: 18px;
    border: 2px solid rgba(201, 168, 76, 0.25);
    border-top-color: #c9a84c;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.role-card.role-card-current {
    opacity: 0.55;
    cursor: default;
    border-style: dashed;
}
.role-card.role-card-current:hover { transform: none; background: rgba(0,0,0,0.35); border-color: #5a4a3a; }
.role-cancel-btn {
    margin-top: 18px;
}

/* ============================================
   POWER MENU (botao ⏻ do top-bar)
   Modal com 3 opcoes: voltar/trocar perfil/sair.
   ============================================ */
.power-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 11200;
    background: rgba(13, 10, 7, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
}
.power-menu {
    background: linear-gradient(135deg, #1a1410 0%, #2c2418 100%);
    border: 1px solid #c9a84c;
    border-radius: 12px;
    padding: 32px 28px;
    max-width: 720px;
    width: 92%;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    text-align: center;
}
.power-menu-title {
    color: #c9a84c;
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.8rem;
    margin: 0 0 6px;
}
.power-menu-subtitle {
    color: #a09080;
    font-size: 0.9rem;
    margin: 0 0 24px;
    font-style: italic;
}
.power-menu-options {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.power-menu-card {
    flex: 1 1 200px;
    max-width: 220px;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid #5a4a3a;
    border-radius: 10px;
    padding: 22px 16px;
    cursor: pointer;
    color: #d8c4a0;
    font-family: inherit;
    transition: border-color 0.2s, transform 0.15s, background 0.2s;
}
.power-menu-card:hover:not(:disabled) {
    border-color: #c9a84c;
    transform: translateY(-2px);
    background: rgba(201, 168, 76, 0.08);
}
.power-menu-card:disabled { opacity: 0.6; cursor: not-allowed; }
.power-menu-card-danger:hover:not(:disabled) {
    border-color: #e07070;
    background: rgba(224, 112, 112, 0.10);
}
.power-menu-icon {
    font-size: 2.2rem;
    margin-bottom: 8px;
    color: #c9a84c;
}
.power-menu-card-danger .power-menu-icon { color: #e07070; }
.power-menu-name {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: #c9a84c;
    margin-bottom: 6px;
    font-weight: 700;
}
.power-menu-card-danger .power-menu-name { color: #e07070; }
.power-menu-desc {
    font-size: 0.82rem;
    color: #a09080;
    line-height: 1.4;
}
.power-menu-card.is-loading { position: relative; pointer-events: none; opacity: 0.7; }
.power-menu-card.is-loading::after {
    content: '';
    position: absolute; top: 12px; right: 12px;
    width: 18px; height: 18px;
    border: 2px solid rgba(201, 168, 76, 0.25);
    border-top-color: #c9a84c;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.power-menu-cancel {
    margin-top: 18px;
}

/* ============================================
   MESTRAR (Fase 6) - request/aprovacao + toast
   ============================================ */
.mestrar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 11500;
    background: rgba(13, 10, 7, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}
.mestrar-modal {
    background: linear-gradient(135deg, #1a1410 0%, #2a1a30 100%);
    border: 1px solid #b388e0;
    border-radius: 12px;
    padding: 22px 26px;
    max-width: 540px;
    width: 92%;
    max-height: 86vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(155, 89, 182, 0.35);
    color: #d8c4a0;
}
.mestrar-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #5a4a3a;
    padding-bottom: 10px;
    margin-bottom: 8px;
}
.mestrar-modal-header h2 {
    color: #b388e0;
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.3rem;
    margin: 0;
}
.mestrar-modal-subtitle {
    color: #a09080;
    font-size: 0.92rem;
    margin: 0 0 16px;
}
.mestrar-empty {
    color: #a09080;
    font-style: italic;
    text-align: center;
    padding: 18px 8px 4px;
}
.mestrar-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.mestrar-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid #5a4a3a;
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    color: #d8c4a0;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.mestrar-card:hover {
    border-color: #b388e0;
    background: rgba(155, 89, 182, 0.12);
}
.mestrar-card:active { transform: scale(0.98); }
.mestrar-card-icon {
    font-size: 2rem;
    width: 48px;
    text-align: center;
    color: #b388e0;
}
.mestrar-card-portrait {
    width: 48px; height: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #5a4a3a;
}
.mestrar-card-portrait-fallback {
    width: 48px; height: 48px;
    border-radius: 8px;
    background: rgba(0,0,0,0.5);
    border: 1px solid #5a4a3a;
    color: #c9a84c;
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
}
.mestrar-card-info { flex: 1; min-width: 0; }
.mestrar-card-name {
    color: #c9a84c;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 2px;
}
.mestrar-card-sub {
    color: #888;
    font-size: 0.78rem;
}

/* Tela de espera (narrador aguardando aprovacao) */
.mestrar-waiting {
    text-align: center;
    padding: 32px 26px;
}
.mestrar-waiting h2 {
    color: #b388e0;
    margin: 14px 0 6px;
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.3rem;
}
.mestrar-countdown {
    font-size: 2.2rem;
    font-family: 'Cinzel', serif;
    font-weight: 800;
    color: #c9a8e8;
    text-shadow: 0 0 12px rgba(179, 136, 224, 0.5);
    margin: 16px 0;
    font-variant-numeric: tabular-nums;
}

/* Toast incoming (jogador) */
.mestrar-incoming {
    position: fixed;
    top: 96px;
    right: 24px;
    z-index: 11400;
    display: flex;
    gap: 12px;
    background: linear-gradient(135deg, #1a1410 0%, #2a1a30 100%);
    border: 2px solid #b388e0;
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 8px 32px rgba(155, 89, 182, 0.55);
    color: #d8c4a0;
    max-width: 420px;
    animation: mestrarIncomingIn 0.4s cubic-bezier(.4,1.5,.55,1);
}
@keyframes mestrarIncomingIn {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
.mestrar-incoming-icon {
    font-size: 2rem;
    color: #b388e0;
    line-height: 1;
    margin-top: 2px;
    text-shadow: 0 0 10px rgba(179, 136, 224, 0.7);
}
.mestrar-incoming-body { flex: 1; min-width: 0; }
.mestrar-incoming-title {
    color: #c9a84c;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    margin-bottom: 4px;
}
.mestrar-incoming-sub {
    color: #a09080;
    font-size: 0.82rem;
    margin-bottom: 10px;
    line-height: 1.3;
}
.mestrar-incoming-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.mestrar-incoming-actions .menu-btn {
    padding: 6px 14px;
    font-size: 0.85rem;
}
.mestrar-incoming-countdown {
    font-size: 0.7rem;
    color: #888;
    text-align: right;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .mestrar-incoming { top: auto; bottom: 16px; right: 16px; left: 16px; max-width: none; }
}

/* ============================================
   FASE 7 - Sessao mestre ativa
   ============================================ */

/* Borda pulsante intensa quando body.mestrando (sobrescreve is-narrador da Fase 2) */
body.mestrando::before {
    border: 4px solid rgba(179, 136, 224, 0.85) !important;
    box-shadow: inset 0 0 36px rgba(179, 136, 224, 0.4) !important;
    animation: mestrandoPulse 2s ease-in-out infinite;
}
@keyframes mestrandoPulse {
    0%, 100% { box-shadow: inset 0 0 28px rgba(179, 136, 224, 0.30); }
    50%      { box-shadow: inset 0 0 48px rgba(179, 136, 224, 0.55); }
}

/* Barra de controle do narrador (canto inferior direito) */
#mestrar-narrador-bar {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 11050;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #2a1a30 0%, #1a1410 100%);
    border: 1px solid #b388e0;
    border-radius: 12px;
    color: #d8c4a0;
    box-shadow: 0 6px 24px rgba(155, 89, 182, 0.55), inset 0 0 12px rgba(179, 136, 224, 0.2);
    font-family: 'Cinzel', serif;
}
#mestrar-narrador-bar .mnb-toggle {
    cursor: pointer;
    user-select: none;
    color: #b388e0;
    font-size: 1.25rem;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 6px;
    transition: background 0.15s, transform 0.2s;
}
#mestrar-narrador-bar .mnb-toggle:hover {
    background: rgba(179, 136, 224, 0.18);
    transform: scale(1.1);
}
#mestrar-narrador-bar .mnb-label {
    color: #b388e0;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.75rem;
}
/* Estado retraido: so o icone ☆ visivel */
#mestrar-narrador-bar.mnb-collapsed {
    padding: 6px 8px;
    gap: 0;
}
#mestrar-narrador-bar.mnb-collapsed .mnb-label,
#mestrar-narrador-bar.mnb-collapsed .mnb-target,
#mestrar-narrador-bar.mnb-collapsed .mnb-btn {
    display: none;
}
#mestrar-narrador-bar .mnb-target {
    font-size: 0.95rem;
    color: #c9a84c;
}
#mestrar-narrador-bar .mnb-target em {
    font-style: normal;
    color: #888;
    font-size: 0.8rem;
}
#mestrar-narrador-bar .mnb-btn {
    padding: 8px 14px;
    background: rgba(155, 89, 182, 0.15);
    border: 1px solid #b388e0;
    color: #d8c4a0;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    transition: all 0.15s;
}
#mestrar-narrador-bar .mnb-btn:hover {
    background: rgba(155, 89, 182, 0.35);
    color: #fff;
}
#mestrar-narrador-bar .mnb-end {
    background: rgba(199, 76, 76, 0.15);
    border-color: #c94c4c;
    color: #f5b8b8;
}
#mestrar-narrador-bar .mnb-end:hover {
    background: rgba(199, 76, 76, 0.4);
    color: #fff;
}

/* Indicador discreto para o jogador (canto superior direito, abaixo da topbar) */
#mestrar-jogador-indicator {
    position: fixed;
    top: 92px;
    right: 18px;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(155, 89, 182, 0.18);
    border: 1px solid rgba(179, 136, 224, 0.55);
    border-radius: 999px;
    color: #d8c4a0;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    box-shadow: 0 0 12px rgba(155, 89, 182, 0.35);
    pointer-events: none;
}
#mestrar-jogador-indicator .mji-icon {
    color: #b388e0;
    font-size: 1rem;
    text-shadow: 0 0 6px rgba(179, 136, 224, 0.7);
}
#mestrar-jogador-indicator strong {
    color: #c9a8e8;
    font-weight: 700;
}

/* Modal de batalha mestrada */
.mestrar-mob-display {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    border: 1px solid #5a4a3a;
    margin-bottom: 14px;
}
.mestrar-mob-imgwrap { width: 90px; height: 90px; }
.mestrar-mob-img { width: 90px; height: 90px; object-fit: contain; }
.mestrar-mob-name {
    color: #c9a84c;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 4px;
}
.mestrar-mob-meta {
    color: #a09080;
    font-size: 0.85rem;
}
.mestrar-step-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    gap: 10px;
}

/* Outcomes (Resultado) */
.mestrar-outcomes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}
.mestrar-outcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1.5px solid #5a4a3a;
    border-radius: 8px;
    color: #d8c4a0;
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.15s;
}
.mestrar-outcome > :first-child { font-size: 1.6rem; line-height: 1; }
.mestrar-outcome:hover {
    border-color: #b388e0;
    transform: translateY(-2px);
    background: rgba(155, 89, 182, 0.12);
}
.mestrar-outcome.out-victory:hover { border-color: #4ea1f2; background: rgba(82, 158, 232, 0.15); }
.mestrar-outcome.out-defeat:hover  { border-color: #c94c4c; background: rgba(199, 76, 76, 0.18); }
.mestrar-outcome.out-death:hover   { border-color: #888;    background: rgba(40, 40, 40, 0.6); }
.mestrar-outcome.out-capture:hover { border-color: #c9a84c; background: rgba(201, 168, 76, 0.15); }

/* ============================================
   BOTAO + CADASTRAR MONSTRO (Armazem) - so narrador em sessao mestre
   ============================================ */
.armazem-add-btn {
    margin-left: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #4eb86b;
    background: linear-gradient(180deg, #6dd589 0%, #2f8a4e 100%);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(70, 200, 100, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.15s, box-shadow 0.15s, background 0.2s, border-color 0.2s, color 0.2s;
    position: relative;
    vertical-align: middle;
    padding: 0;
}
.armazem-add-btn:hover {
    transform: scale(1.15);
    background: linear-gradient(180deg, #2d6e3d 0%, #103821 100%);
    border-color: #103821;
    color: #d8ffd9;
    box-shadow: 0 0 18px rgba(40, 130, 70, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.armazem-add-btn:active { transform: scale(0.95); }
.armazem-add-btn::after {
    content: 'Cadastrar';
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(13, 10, 7, 0.95);
    color: #ecd8a8;
    border: 1px solid #3aa057;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.5px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
}
.armazem-add-btn:hover::after { opacity: 1; }

/* Modal de cadastro de monstro */
.cadastrar-monstro-modal {
    max-width: 760px;
    width: 95%;
}
.cadastrar-search {
    width: 100%;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #5a4a3a;
    border-radius: 4px;
    color: #fff;
    font-family: inherit;
}
.cadastrar-search:focus {
    outline: none;
    border-color: #b388e0;
}
/* v0.32.55/56: quando search esta dentro de .bestiary-actions (modo secreto+monstro),
   compartilha a linha com o botao de filtro avancado. Altura igual ao botao (38px)
   pra evitar desalinhamento vertical. */
.cadastrar-search-row {
    display: flex !important;
    align-items: stretch !important;
    margin-bottom: 12px;
    gap: 10px;
}
.cadastrar-search-row .cadastrar-search {
    flex: 1 1 auto;
    width: auto;
    margin-bottom: 0;
    height: 38px;
    box-sizing: border-box;
    line-height: 1;
}
.cadastrar-search-row .bestiary-filter-wrap {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
}
.cadastrar-search-row .bestiary-filter-btn {
    height: 38px;
    flex: 0 0 38px;
    box-sizing: border-box;
}
.cadastrar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    margin-bottom: 8px;
    /* sem overflow/scroll - paginacao agora controla a quantidade exibida (12) */
}

.cadastrar-pagination {
    margin-bottom: 12px;
    padding: 4px 0;
    justify-content: center;
}
.cadastrar-card {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid #3a2a1a;
    border-radius: 6px;
    padding: 6px 4px 4px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s, background 0.15s;
    text-align: center;
    position: relative;
}
.cadastrar-card:hover {
    border-color: #c9a84c;
    transform: translateY(-2px);
    background: rgba(201, 168, 76, 0.08);
}
.cadastrar-card.selected {
    border-color: #5dd07b;
    background: rgba(60, 180, 95, 0.18);
    box-shadow: 0 0 12px rgba(60, 180, 95, 0.55), inset 0 0 8px rgba(60, 180, 95, 0.25);
}
.cadastrar-card.selected::before {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 6px;
    background: #3aa057;
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.78rem;
    box-shadow: 0 0 6px rgba(60, 180, 95, 0.7);
    z-index: 3;
}
.cadastrar-footer {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 14px;
    padding-top: 12px;
    border-top: 1px solid #5a4a3a;
    align-items: start;
}
.cadastrar-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Linha do Nivel: reusa componente dinheiro mas em escala compacta */
.cadastrar-level-line .dinheiro-display {
    padding: 4px 10px;
    height: 30px;
    box-sizing: border-box;
    gap: 8px;
}
.cadastrar-level-line .dinheiro-icon { font-size: 1rem; }
.cadastrar-level-line .dinheiro-input {
    width: auto;
    min-width: 40px;
    font-size: 0.95rem;
    padding: 2px 4px;
}
.cadastrar-level-line .dinheiro-label {
    font-size: 0.78rem;
    color: #a09080;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.cadastrar-level-line .dinheiro-arrows { gap: 1px; }
.cadastrar-level-line .dinheiro-arrow {
    width: 22px;
    flex: 0 0 13px;
    font-size: 0.55rem;
}
.cadastrar-level-line .dinheiro-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.cadastrar-level-line .dinheiro-input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Acoes na ultima coluna */
.cadastrar-actions {
    align-self: stretch;
    min-width: 110px;
    gap: 6px;
}
.cadastrar-actions .menu-btn {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.85rem;
    white-space: nowrap;
}
.cadastrar-actions .menu-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Pills Shiny / Elite / Ultimate / Unico */
.cadastrar-flag {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    color: #d8c4a0;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    padding: 4px 10px;
    border: 1px solid #5a4a3a;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    transition: border-color 0.15s, background 0.2s, color 0.2s;
    white-space: nowrap;
    height: 30px;
    box-sizing: border-box;
}
.cadastrar-flag:has(input:checked) {
    color: #ffe066;
    border-color: #c9a84c;
    background: rgba(201, 168, 76, 0.18);
    box-shadow: 0 0 8px rgba(201, 168, 76, 0.35);
}
.cadastrar-flag input { cursor: pointer; }
.cadastrar-flag input:disabled { cursor: not-allowed; }
.cadastrar-flag:has(input:disabled) { opacity: 0.4; cursor: not-allowed; }
.cadastrar-flag-ultimate {
    /* Aproveita o espaco apos "Ultimate": label fica esquerda, select preenche o resto */
    justify-content: space-between;
    gap: 8px;
    padding: 4px 8px;
}
.cadastrar-flag-ultimate > span {
    flex-shrink: 0;
}
.cadastrar-flag-ultimate select {
    flex: 1 1 auto;
    min-width: 0;
    height: 22px;
    background: #1a1410;
    color: #e8d8b8;
    border: 1px solid #4a3a25;
    border-radius: 3px;
    padding: 0 4px;
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    box-sizing: border-box;
    /* Centraliza o texto da opcao selecionada em altura e largura */
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
    line-height: 20px;       /* 22px - 2px de border = altura interna */
}
.cadastrar-flag-ultimate select option {
    text-align: center;
    background: #1a1410;
}
.cadastrar-flag-ultimate select:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================
   ICONE DE DADO + MODAL DE SORTEIO
   ============================================ */
.monster-dice-btn {
    position: absolute;
    top: 36px;       /* abaixo do X (4 + 26 + 6 de gap) */
    right: 4px;
    z-index: 4;
    width: 26px;
    height: 26px;
    background: linear-gradient(180deg, #8a4cd0 0%, #5b2a9b 100%);
    color: #fff;
    border: 1.5px solid #d8c4ff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
    box-shadow: 0 0 8px rgba(155, 89, 182, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform 0.15s, box-shadow 0.15s;
    animation: dicePulse 1.6s ease-in-out infinite;
}
.monster-dice-btn:hover {
    transform: scale(1.18) rotate(15deg);
    box-shadow: 0 0 16px rgba(179, 136, 224, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    animation: none;
}
@keyframes dicePulse {
    0%, 100% { box-shadow: 0 0 8px rgba(155, 89, 182, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
    50%      { box-shadow: 0 0 14px rgba(179, 136, 224, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
}

/* Modal de preview do sorteio */
.sorteio-preview-modal { max-width: 540px; }
.sorteio-content {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #5a4a3a;
    border-radius: 6px;
    padding: 12px 16px;
}
.sorteio-attrs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sorteio-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr auto auto auto;
    gap: 10px;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px dotted rgba(201, 168, 76, 0.15);
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
}
.sorteio-row:last-child { border-bottom: none; }
.sorteio-attr-label {
    color: #c9a84c;
    font-weight: 700;
}
.sorteio-base {
    color: #888;
    font-size: 0.78rem;
}
.sorteio-delta {
    font-weight: 800;
    font-size: 0.95rem;
    text-align: center;
    min-width: 36px;
}
.sorteio-delta-pos { color: #5dd07b; text-shadow: 0 0 6px rgba(60, 180, 95, 0.5); }
.sorteio-delta-neg { color: #e57373; text-shadow: 0 0 6px rgba(230, 80, 80, 0.5); }
.sorteio-delta-zero { color: #777; }
.sorteio-total {
    color: #fff;
    font-weight: 700;
    text-align: right;
    min-width: 50px;
}
.sorteio-pecas {
    color: #a09080;
    font-size: 0.7rem;
    grid-column: 1 / -1;
    text-align: right;
}
.sorteio-custos {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #5a4a3a;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sorteio-custo-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr auto auto;
    gap: 10px;
    align-items: center;
    font-family: 'Cinzel', serif;
    font-size: 0.88rem;
    color: #d8c4a0;
}
.sorteio-info {
    color: #888;
    font-size: 0.78rem;
    font-style: italic;
    text-align: center;
    margin-top: 12px;
}

/* Botao lapis no header do detalhe do monstro (mestre) */
.ma-edit-base-btn {
    margin-left: auto;
    margin-right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid #b388e0;
    background: linear-gradient(180deg, #6e4ba8 0%, #3d2766 100%);
    color: #fff;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(155, 89, 182, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.15s, box-shadow 0.15s;
}
.ma-edit-base-btn:hover {
    transform: scale(1.12) rotate(-8deg);
    box-shadow: 0 0 14px rgba(179, 136, 224, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    background: linear-gradient(180deg, #8a64d0 0%, #4d3580 100%);
}
.ma-edit-base-btn:active { transform: scale(0.95); }

/* Modal de edicao de base */
.edit-base-modal { max-width: 580px; }
/* v0.33.21: variante grid usa o mesmo componente bf-attributes-grid */
.edit-base-modal-grid { max-width: 880px; }
.edit-base-modal-grid .bf-attributes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
    margin-top: 6px;
}
.edit-base-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #5a4a3a;
    border-radius: 6px;
    padding: 10px 14px;
}
.edit-base-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px dotted rgba(201, 168, 76, 0.15);
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
}
.edit-base-row:last-child { border-bottom: none; }
.edit-base-row-sub {
    background: rgba(0, 0, 0, 0.18);
    margin: 0 -14px;
    padding-left: 14px;
    padding-right: 14px;
    border-left: 2px solid rgba(201, 168, 76, 0.25);
    margin-left: 0;
    font-size: 0.85rem;
}
.edit-base-label {
    color: #c9a84c;
    font-weight: 700;
}
.edit-base-base {
    color: #888;
    font-size: 0.78rem;
}
.edit-base-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.edit-base-current {
    min-width: 28px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}

/* Bootstrap loading no menu inicial enquanto Firebase verifica sessao */
.auth-bootstrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 28px 16px;
    min-height: 140px;
}
.auth-bootstrap-text {
    font-family: 'Cinzel', serif;
    color: #a09080;
    letter-spacing: 1px;
    font-size: 0.95rem;
    margin: 0;
    font-style: italic;
}

/* Titulo grande do continente (label dentro do mapa via Leaflet divIcon)
   continent-label-large herda de .continent-label e amplia a fonte. */
.continent-label-large {
    font-size: 32px !important;
    letter-spacing: 4px !important;
    text-shadow:
        0 0 12px rgba(0,0,0,0.95),
        0 0 24px rgba(0,0,0,0.85),
        2px 2px 6px rgba(0,0,0,0.95) !important;
}
@media (max-width: 720px) {
    .continent-label-large { font-size: 22px !important; letter-spacing: 2px !important; }
}

/* ============================================
   ENERGY BAR / PIPS - visual de jogo refinado
   ============================================ */
.energy-bar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    font-family: 'Cinzel', serif;
    --bar-color: #c9a84c;
    --bar-glow: rgba(201, 168, 76, 0.35);
    --bar-color-soft: rgba(201, 168, 76, 0.2);
    padding: 6px 12px 6px 6px;
    background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55));
    border: 1px solid rgba(201, 168, 76, 0.18);
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 4px rgba(0,0,0,0.4);
    position: relative;
}

/* Icone circular esquerda */
.energy-bar-icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--bar-color) 32%, #2c2418 0%) 0%, #0d0a07 75%),
        radial-gradient(circle at 70% 70%, var(--bar-color-soft), transparent 50%);
    border: 2px solid var(--bar-color);
    box-shadow:
        0 0 10px var(--bar-glow),
        inset 0 0 8px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.18);
    color: var(--bar-color);
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    text-shadow: 0 0 6px var(--bar-glow);
}

/* Coluna info: label em cima, barra/valor embaixo */
.energy-bar-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.energy-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    line-height: 1;
}
.energy-bar-label {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.65rem;
    color: color-mix(in srgb, var(--bar-color) 80%, white 0%);
    font-weight: 700;
    white-space: nowrap;
    text-shadow: 0 0 6px var(--bar-glow);
}
.energy-bar-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 0 6px var(--bar-glow);
}

/* Track principal */
.energy-bar-track {
    position: relative;
    width: 180px;
    height: 12px;
    background: linear-gradient(180deg, #060503 0%, #1a1410 100%);
    border: 1px solid color-mix(in srgb, var(--bar-color) 30%, #1a1410 0%);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.85), inset 0 -1px 0 rgba(255,255,255,0.05);
}
.energy-bar-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--bar-color) 80%, white 0%) 0%,
            var(--bar-color) 45%,
            color-mix(in srgb, var(--bar-color) 70%, black 0%) 100%);
    box-shadow:
        0 0 10px var(--bar-glow),
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 -1px 0 rgba(0,0,0,0.3);
    transition: width 0.45s cubic-bezier(.4,1.5,.55,1);
}
/* Brilho que percorre a barra preenchida */
.energy-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.32) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: barShine 3.2s ease-in-out infinite;
}
@keyframes barShine {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(180%); }
    100% { transform: translateX(180%); }
}

/* Pips para a barra mestre (3 estrelas) */
.energy-pips {
    display: flex;
    gap: 4px;
    align-items: center;
}
.energy-pip {
    width: 26px; height: 22px;
    background: linear-gradient(180deg, #0a0805, #1a1410);
    border: 1px solid color-mix(in srgb, var(--bar-color) 30%, #1a1410 0%);
    border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    transition: all 0.3s cubic-bezier(.4,1.5,.55,1);
    color: rgba(255,255,255,0.18);
    font-size: 0.85rem;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.7);
}
.energy-pip.filled {
    background:
        radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--bar-color) 50%, white 0%), var(--bar-color) 60%, color-mix(in srgb, var(--bar-color) 60%, black 0%));
    border-color: color-mix(in srgb, var(--bar-color) 90%, white 0%);
    color: #fff;
    box-shadow:
        0 0 12px var(--bar-glow),
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 0 rgba(0,0,0,0.4);
    text-shadow: 0 0 6px rgba(255,255,255,0.6);
    transform: scale(1.05);
}

/* Modos coloridos */
.energy-bar.energy-mode-diaria {
    --bar-color: #4ea1f2;
    --bar-glow: rgba(82, 158, 232, 0.45);
    --bar-color-soft: rgba(82, 158, 232, 0.18);
}
.energy-bar.energy-mode-infinita {
    --bar-color: #b8b8b8;
    --bar-glow: rgba(180, 180, 180, 0.35);
    --bar-color-soft: rgba(180, 180, 180, 0.15);
}
.energy-bar.energy-mode-infinita .energy-bar-fill {
    background: repeating-linear-gradient(45deg, #888 0 8px, #555 8px 16px);
    animation: infiniteShimmer 1.4s linear infinite;
}
.energy-bar.energy-mode-infinita .energy-bar-fill::after { display: none; }
@keyframes infiniteShimmer {
    from { background-position: 0 0; }
    to   { background-position: 32px 0; }
}
.energy-bar.energy-mode-mestre {
    --bar-color: #b388e0;
    --bar-glow: rgba(179, 136, 224, 0.55);
    --bar-color-soft: rgba(179, 136, 224, 0.18);
}

/* Contador de refresh (texto pequeno embaixo da barra/pips) */
.energy-bar-refresh {
    font-size: 0.62rem;
    color: color-mix(in srgb, var(--bar-color) 65%, white 0%);
    text-shadow: 0 0 4px var(--bar-glow);
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
    margin-top: 3px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    opacity: 0.9;
}

/* ============================================
   MARCADORES DE REGIAO BLOQUEADAS POR ENERGIA MESTRE
   ============================================ */
.region-marker-mestre {
    position: relative;
    filter: hue-rotate(260deg) saturate(1.2);
}
.region-marker-mestre.region-marker-mestre-ready {
    animation: mestrePulse 1.6s ease-in-out infinite;
    cursor: pointer;
}
@keyframes mestrePulse {
    0%, 100% { transform: scale(1); filter: hue-rotate(260deg) saturate(1.2) drop-shadow(0 0 8px rgba(179,136,224,0.6)); }
    50%      { transform: scale(1.08); filter: hue-rotate(260deg) saturate(1.5) drop-shadow(0 0 16px rgba(179,136,224,0.95)); }
}
.region-mestre-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: linear-gradient(180deg, #c9a8e8 0%, #9b59b6 60%, #6b3a85 100%);
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 12px;
    border: 1.5px solid #ecd8ff;
    box-shadow: 0 0 10px rgba(179, 136, 224, 0.85), 0 1px 2px rgba(0,0,0,0.6);
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    letter-spacing: 0.5px;
    z-index: 2;
}

/* Label das regioes em estado mestre */
.continent-label.label-mestre {
    color: #b388e0 !important;
    text-shadow:
        0 0 10px rgba(179, 136, 224, 0.8),
        0 0 20px rgba(155, 89, 182, 0.5),
        2px 2px 4px rgba(0,0,0,0.95) !important;
}

/* Compacto em telas estreitas */
@media (max-width: 1100px) {
    .energy-bar { gap: 8px; padding: 5px 10px 5px 5px; }
    .energy-bar-track { width: 130px; height: 10px; }
    .energy-bar-icon { width: 28px; height: 28px; font-size: 0.95rem; }
    .energy-pip { width: 22px; height: 18px; font-size: 0.75rem; }
}
@media (max-width: 720px) {
    .energy-bar-label { display: none; }
    .energy-bar { padding: 4px 8px 4px 4px; }
    .energy-bar-icon { width: 24px; height: 24px; font-size: 0.85rem; }
    .energy-bar-track { width: 90px; height: 9px; }
    .energy-pip { width: 18px; height: 16px; }
}

/* ============================================
   ROLE TOGGLE no menu principal
   ============================================ */
.menu-role-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 14px;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #5a4a3a;
    border-radius: 999px;
    width: fit-content;
    font-size: 0.9rem;
}
.menu-role-label {
    color: #a09080;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75rem;
}
.menu-role-current {
    font-family: 'Cinzel', serif;
    font-weight: 700;
}
.menu-role-current.menu-role-narrador { color: #b388e0; }
.menu-role-current.menu-role-jogador { color: #c9a84c; }
.menu-role-switch {
    background: transparent;
    border: 1px solid #5a4a3a;
    color: #d8c4a0;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.menu-role-switch:hover { border-color: #c9a84c; color: #c9a84c; }

/* ============================================
   ADMIN PANEL (XP config)
   ============================================ */
.admin-panel {
    background: linear-gradient(135deg, #1a1410 0%, #2a1a30 100%);
    border: 1px solid #b388e0;
    border-radius: 12px;
    padding: 22px 24px;
    max-width: 760px;
    width: 94%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(155, 89, 182, 0.3);
    color: #d8c4a0;
}
.admin-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #5a4a3a;
    padding-bottom: 10px;
    margin-bottom: 6px;
}
.admin-panel-header h2 {
    color: #b388e0;
    font-family: 'Cinzel Decorative', serif;
    margin: 0;
    font-size: 1.3rem;
}
.admin-panel-subtitle {
    color: #a09080;
    font-size: 0.85rem;
    font-style: italic;
    margin: 0 0 18px;
}
.admin-fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.admin-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid #3a2a1a;
    padding: 10px 12px;
    border-radius: 6px;
}
.admin-field-label {
    color: #c9a84c;
    font-size: 0.85rem;
    font-weight: 600;
}
.admin-field-input {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #5a4a3a;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95rem;
}
.admin-field-input:focus { outline: none; border-color: #b388e0; }
.admin-field-hint {
    color: #888;
    font-size: 0.74rem;
    line-height: 1.3;
}
.admin-panel-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #5a4a3a;
    padding-top: 14px;
}

/* ============================================
   NARRADOR EDITANDO MUNDO
   ============================================
   Quando body.is-narrador-editing esta ativo, esconde tudo que e relacionado
   a JOGAR/PERSONAGEM. Narrador so pode navegar o mapa e editar regioes/monstros.
   Botoes de edicao (lapis no painel da regiao) continuam visiveis via editor.js. */

/* Top-bar: esconde personagens, energia, char selector, quests, search/encounter */
body.is-narrador-editing #btn-personagens,
body.is-narrador-editing #btn-quests,
body.is-narrador-editing #energy-hud,
body.is-narrador-editing #energy-mestre-hud,
body.is-narrador-editing #nav-char-selector,
body.is-narrador-editing #btn-play-mode {
    display: none !important;
}

/* Quests sao do jogador. Esconde para narrador (mesmo fora do modo editar). */
body.is-narrador #btn-quests {
    display: none !important;
}

/* Painel da regiao: esconde seletor de personagem ativo + botao "Procurar Monstro"
   (acao de jogar). Catalogo (📋) e chances (🎲) continuam visiveis - sao read-only. */
body.is-narrador-editing #region-char-selector,
body.is-narrador-editing .region-search-btn,
body.is-narrador-editing #btn-region-search {
    display: none !important;
}

/* ============================================
   QUESTS DIARIAS v2 (mockup visual - Fase 11)
   Inspiracao: Diablo IV quest log + Genshin Daily Commission +
   Lost Ark daily. Foco: titulo centralizado, ornamentos, icones do
   projeto (img/tipos/X.png), numeros destacados, recompensas em pillas.
   ============================================ */

#btn-quests {
    font-size: 1.05rem;
    line-height: 1;
    position: relative;
    overflow: visible;
}

/* Badge "X/5" no canto inferior-direito do botao Quests */
.nav-btn-badge {
    position: absolute;
    bottom: -4px;
    right: -6px;
    background: linear-gradient(180deg, #2a1810 0%, #1a0e08 100%);
    border: 1px solid #c9a84c;
    color: #ffd97a;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.62rem;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 8px;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(201, 168, 76, 0.55);
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
}
.nav-btn-badge.badge-complete {
    background: linear-gradient(180deg, #c9a84c 0%, #8b6914 100%);
    color: #1a0e08;
    border-color: #ffd97a;
    box-shadow: 0 0 10px rgba(255, 217, 122, 0.85);
    animation: badge-complete-pulse 1.6s ease-in-out infinite;
}
@keyframes badge-complete-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 217, 122, 0.85); }
    50%      { box-shadow: 0 0 18px rgba(255, 217, 122, 1); }
}

/* Contador no header do modal "Quests Diarias 1/5" */
.quests-header-counter {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-muted, #a09080);
    letter-spacing: 1px;
    margin-left: 8px;
    font-variant-numeric: tabular-nums;
}

.quests-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 11500;
    background: rgba(13, 10, 7, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: quests-fade-in 0.2s ease-out;
}
@keyframes quests-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.quests-modal {
    background:
        radial-gradient(ellipse at top, rgba(70, 55, 35, 0.45) 0%, transparent 60%),
        linear-gradient(160deg, #1a1410 0%, #0e0a07 100%);
    border: 1.5px solid var(--gold-dark, #8b6914);
    border-radius: 10px;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.75),
        0 0 32px rgba(201, 168, 76, 0.22),
        inset 0 0 0 1px rgba(255, 217, 122, 0.08);
    width: 96%;
    max-width: 760px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--text-light, #f0e6d2);
    position: relative;
}

/* Cantos ornamentais (apenas decorativo) */
.quests-modal::before,
.quests-modal::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    border: 1.5px solid #c9a84c;
    pointer-events: none;
    opacity: 0.55;
}
.quests-modal::before {
    top: 6px; left: 6px;
    border-right: none; border-bottom: none;
    border-top-left-radius: 6px;
}
.quests-modal::after {
    bottom: 6px; right: 6px;
    border-left: none; border-top: none;
    border-bottom-right-radius: 6px;
}

/* === HEADER === */
.quests-header-v2 {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    padding: 14px 16px 8px;
}
.quests-header-spacer { width: 40px; }
.quests-header-title-block {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.quests-title {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 900;
    font-size: 1.4rem;
    letter-spacing: 3px;
    margin: 0;
    color: var(--gold-light, #e8d38a);
    text-shadow:
        0 0 12px rgba(201, 168, 76, 0.45),
        0 1px 0 rgba(0, 0, 0, 0.6);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
}
.quests-title-orn {
    color: #c9a84c;
    font-size: 0.85rem;
    letter-spacing: 0;
    opacity: 0.85;
    text-shadow: 0 0 8px rgba(201, 168, 76, 0.7);
}
.quests-title-counter {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--parchment, #f4e4c1);
    background: linear-gradient(180deg, rgba(60, 45, 25, 0.85), rgba(30, 22, 12, 0.85));
    border: 1px solid #c9a84c;
    padding: 2px 12px;
    border-radius: 999px;
    letter-spacing: 1px;
    box-shadow: inset 0 1px 0 rgba(255, 217, 122, 0.2), 0 0 8px rgba(201, 168, 76, 0.35);
    font-variant-numeric: tabular-nums;
}

.quests-modal-close {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted, #a09080);
    font-size: 1.7rem;
    cursor: pointer;
    line-height: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    justify-self: end;
}
.quests-modal-close:hover {
    color: var(--gold-light, #e8d38a);
    background: rgba(201, 168, 76, 0.15);
    border-color: rgba(201, 168, 76, 0.4);
}

.quests-reset-timer {
    font-family: 'Lora', 'Cinzel', serif;
    font-style: italic;
    color: var(--text-muted, #a09080);
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* Separador ornamental: linhas + gema */
.quests-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 24px 12px;
    position: relative;
    height: 18px;
}
.quests-divider::before,
.quests-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 22px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.55) 30%, rgba(201, 168, 76, 0.85) 100%);
}
.quests-divider::before { left: 0; }
.quests-divider::after  { right: 0; transform: scaleX(-1); }
.quests-divider-jewel {
    color: #c9a84c;
    font-size: 0.95rem;
    text-shadow: 0 0 10px rgba(255, 217, 122, 0.85);
    background: radial-gradient(circle at center, rgba(201, 168, 76, 0.25) 0%, transparent 70%);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* === LIST === */
.quests-list {
    overflow-y: auto;
    padding: 4px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* === CARD V2 === */
.quest-card {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(50, 38, 24, 0.6) 0%, rgba(20, 14, 9, 0.7) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 217, 122, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        0 4px 14px rgba(0, 0, 0, 0.45);
    position: relative;
    transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}
.quest-card:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 217, 122, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 217, 122, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        0 6px 18px rgba(0, 0, 0, 0.55),
        0 0 14px rgba(201, 168, 76, 0.25);
}

/* Cor de borda esquerda mais grossa por dificuldade */
.quest-card { border-left-width: 4px; }
.quest-card.quest-difi-facil     { border-left-color: #6dba6b; }
.quest-card.quest-difi-media     { border-left-color: #d9a443; }
.quest-card.quest-difi-dificil { border-left-color: #b388e0; }

.quest-card.quest-state-resgatada {
    opacity: 0.55;
    filter: grayscale(0.5);
}

.quest-card.quest-card-claim-anim {
    animation: quest-claim-pulse 0.6s ease-out;
}
@keyframes quest-claim-pulse {
    0%   { transform: scale(1);    box-shadow: inset 0 1px 0 rgba(255,217,122,0.1), 0 0 0 rgba(201,168,76,0); }
    40%  { transform: scale(1.02); box-shadow: inset 0 1px 0 rgba(255,217,122,0.3), 0 0 30px rgba(255,217,122,0.85); }
    100% { transform: scale(1);    box-shadow: inset 0 1px 0 rgba(255,217,122,0.1), 0 0 0 rgba(201,168,76,0); }
}

/* === SIDE: Icone do tipo (img/tipos/X.png) === */
.quest-card-side {
    display: flex;
    align-items: center;
    justify-content: center;
}
.quest-icon-frame {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(80, 65, 45, 0.7), rgba(15, 10, 6, 0.95));
    border: 2px solid #c9a84c;
    box-shadow:
        inset 0 0 12px rgba(0, 0, 0, 0.7),
        0 0 14px rgba(201, 168, 76, 0.45),
        0 0 0 1px rgba(255, 217, 122, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.quest-card.quest-difi-facil     .quest-icon-frame { box-shadow: inset 0 0 12px rgba(0,0,0,0.7), 0 0 14px rgba(109, 186, 107, 0.55), 0 0 0 1px rgba(255, 217, 122, 0.18); }
.quest-card.quest-difi-media     .quest-icon-frame { box-shadow: inset 0 0 12px rgba(0,0,0,0.7), 0 0 14px rgba(217, 164, 67, 0.6),  0 0 0 1px rgba(255, 217, 122, 0.18); }
.quest-card.quest-difi-dificil .quest-icon-frame { box-shadow: inset 0 0 12px rgba(0,0,0,0.7), 0 0 18px rgba(179, 136, 224, 0.65), 0 0 0 1px rgba(255, 217, 122, 0.18); }

.quest-icon-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}

/* === MAIN: dados, progress, footer === */
.quest-card-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Linha de meta (estrelas + label dificuldade) */
.quest-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.quest-stars {
    display: inline-flex;
    gap: 1px;
    line-height: 1;
}
.quest-star {
    font-size: 0.78rem;
    color: #c9a84c;
    text-shadow: 0 0 4px rgba(255, 217, 122, 0.7);
}
.quest-card.quest-difi-facil     .quest-star { color: #6dba6b; text-shadow: 0 0 4px rgba(109, 186, 107, 0.7); }
.quest-card.quest-difi-media     .quest-star { color: #d9a443; text-shadow: 0 0 4px rgba(217, 164, 67, 0.75); }
.quest-card.quest-difi-dificil .quest-star { color: #b388e0; text-shadow: 0 0 4px rgba(179, 136, 224, 0.75); }

.quest-difi-tag {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-muted, #a09080);
}
.quest-card.quest-difi-facil     .quest-difi-tag { color: #6dba6b; }
.quest-card.quest-difi-media     .quest-difi-tag { color: #d9a443; }
.quest-card.quest-difi-dificil .quest-difi-tag { color: #b388e0; }

.quest-descricao {
    font-family: 'Cinzel', 'Lora', serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--parchment, #f4e4c1);
    line-height: 1.25;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

/* Progress row: barra + numero destacado */
.quest-progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 2px;
}
.quest-progress-bar {
    flex: 1 1 auto;
    height: 12px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
    border: 1px solid rgba(201, 168, 76, 0.4);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}
.quest-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b6914 0%, #c9a84c 35%, #ffd97a 50%, #c9a84c 65%, #8b6914 100%);
    background-size: 200% 100%;
    animation: quest-progress-shine 2.4s linear infinite;
    transition: width 0.4s ease-out;
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 10px rgba(255, 217, 122, 0.55);
}
@keyframes quest-progress-shine {
    from { background-position: 0% 0%; }
    to   { background-position: 200% 0%; }
}
.quest-progress-num {
    font-family: 'Cinzel', serif;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--gold-light, #e8d38a);
    flex-shrink: 0;
    min-width: 64px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 6px rgba(201, 168, 76, 0.5), 0 1px 0 rgba(0, 0, 0, 0.6);
    letter-spacing: 1px;
}

/* Footer: rewards + botao */
.quest-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed rgba(201, 168, 76, 0.25);
}

.quest-rewards {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.quest-reward-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(40, 30, 18, 0.85), rgba(15, 10, 6, 0.85));
    border: 1px solid rgba(201, 168, 76, 0.5);
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    color: var(--parchment, #f4e4c1);
    box-shadow: inset 0 1px 0 rgba(255, 217, 122, 0.12);
    line-height: 1;
}
.quest-reward-icon {
    font-size: 1rem;
    line-height: 1;
}
.quest-reward-pritz .quest-reward-icon { color: #ffd97a; text-shadow: 0 0 6px rgba(255, 217, 122, 0.7); }
.quest-reward-xp    .quest-reward-icon { color: #b6dff5; text-shadow: 0 0 6px rgba(182, 223, 245, 0.7); }
.quest-reward-val {
    font-weight: 800;
    color: var(--gold-light, #e8d38a);
    font-variant-numeric: tabular-nums;
}
.quest-reward-unit {
    color: var(--text-muted, #a09080);
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.quest-action {
    flex-shrink: 0;
}
.quest-claim-btn {
    background: linear-gradient(180deg, #ffd97a 0%, #c9a84c 50%, #8b6914 100%);
    border: 1px solid #ffe9a8;
    color: #1a0e08;
    font-family: 'Cinzel', serif;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 8px 22px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    text-transform: uppercase;
    box-shadow:
        0 0 14px rgba(255, 217, 122, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(80, 50, 10, 0.4);
    transition: transform 0.1s, box-shadow 0.2s, filter 0.15s;
    animation: quest-claim-glow 2s ease-in-out infinite;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.quest-claim-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 0 22px rgba(255, 232, 160, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.quest-claim-btn:active:not(:disabled) {
    transform: scale(0.97);
}
.quest-claim-btn:disabled {
    background: linear-gradient(180deg, rgba(60, 50, 35, 0.7), rgba(30, 25, 17, 0.7));
    border-color: rgba(201, 168, 76, 0.25);
    color: var(--text-muted, #a09080);
    cursor: not-allowed;
    box-shadow: none;
    animation: none;
    text-shadow: none;
}
@keyframes quest-claim-glow {
    0%, 100% { box-shadow: 0 0 14px rgba(255, 217, 122, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
    50%      { box-shadow: 0 0 24px rgba(255, 232, 160, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
}

.quest-claimed-badge {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: #6dba6b;
    font-size: 0.8rem;
    letter-spacing: 1.2px;
    padding: 6px 14px;
    border: 1px solid rgba(109, 186, 107, 0.55);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(40, 90, 50, 0.35), rgba(15, 30, 18, 0.55));
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 8px rgba(109, 186, 107, 0.35);
}

/* ============================================
   PASSE DE TEMPORADA (Battle Pass) — mockup Fase 11
   Inspiracao: Fortnite BP, Apex Premium Track, Genshin BP, Lost Ark Pass
   Tema visual muda conforme tipo via CSS vars (--passe-primary etc).
   ============================================ */

#btn-passe {
    font-size: 1.05rem;
    line-height: 1;
    position: relative;
    overflow: visible;
}
.nav-btn-badge-passe {
    /* mesma estetica do badge das quests */
}
body.is-narrador #btn-passe,
body.is-narrador-editing #btn-passe {
    display: none !important;
}

.passe-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 11550;
    background: rgba(13, 10, 7, 0.88);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: passe-fade-in 0.22s ease-out;
}
@keyframes passe-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.passe-modal {
    --passe-primary:   #9bc555;
    --passe-secondary: #2a3318;
    --passe-glow:      rgba(155,197,85,0.7);
    background:
        radial-gradient(ellipse at top, rgba(70, 60, 35, 0.4) 0%, transparent 60%),
        linear-gradient(165deg, #1a1410 0%, #0c0807 100%);
    border: 1.5px solid var(--gold-dark, #8b6914);
    border-radius: 12px;
    box-shadow:
        0 14px 50px rgba(0, 0, 0, 0.85),
        0 0 38px var(--passe-glow),
        inset 0 0 0 1px rgba(255, 217, 122, 0.08);
    width: 95vw;
    max-width: none;
    /* v0.34.25: modal mais alto pra acomodar cards maiores. */
    max-height: 96vh;
    height: 96vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--text-light, #f0e6d2);
    position: relative;
}
.passe-modal::before,
.passe-modal::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--passe-primary);
    pointer-events: none;
    opacity: 0.65;
}
.passe-modal::before {
    top: 6px; left: 6px;
    border-right: none; border-bottom: none;
    border-top-left-radius: 8px;
}
.passe-modal::after {
    bottom: 6px; right: 6px;
    border-left: none; border-top: none;
    border-bottom-right-radius: 8px;
}

/* === HEADER === */
.passe-header {
    display: grid;
    grid-template-columns: 80px 1fr 110px;
    align-items: start;
    padding: 14px 18px 8px;
}
.passe-header-spacer { width: 80px; }
.passe-header-title-block {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.passe-title {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 900;
    font-size: 1.6rem;
    letter-spacing: 3px;
    margin: 0;
    /* v0.34.23: gradiente dourado no texto + glow forte */
    color: transparent;
    background: linear-gradient(180deg, #fff5cc 0%, #f3da9c 35%, #c9a84c 70%, #8b6914 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(201, 168, 76, 0.55)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6));
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
}
.passe-title-text {
    /* texto real (gradiente herdado do .passe-title) */
    line-height: 1;
}
.passe-title-orn {
    color: var(--passe-primary);
    font-size: 1.1rem;
    text-shadow: 0 0 10px var(--passe-glow);
    /* gradiente do parent nao afeta — recolore no proprio span */
    -webkit-text-fill-color: currentColor;
    background: none;
    filter: drop-shadow(0 0 8px var(--passe-glow));
}
.passe-title-counter {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--parchment, #f4e4c1);
    background: linear-gradient(180deg, rgba(60, 45, 25, 0.92), rgba(30, 22, 12, 0.92));
    border: 1px solid var(--passe-primary);
    padding: 3px 12px;
    border-radius: 999px;
    letter-spacing: 1px;
    box-shadow: inset 0 1px 0 rgba(255, 217, 122, 0.25), 0 0 10px var(--passe-glow);
    font-variant-numeric: tabular-nums;
    /* desliga o gradiente do parent neste span */
    -webkit-text-fill-color: var(--parchment, #f4e4c1);
    background-clip: border-box;
    -webkit-background-clip: border-box;
}
/* v0.34.23: icone do tipo no final do titulo (substitui a row "Tipo em foco") */
.passe-title-tipo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 80%);
    border: 2px solid var(--passe-primary);
    box-shadow:
        inset 0 0 6px rgba(0,0,0,0.6),
        0 0 12px var(--passe-glow);
    /* Reseta clipping do parent .passe-title */
    -webkit-text-fill-color: initial;
    background-clip: border-box;
    -webkit-background-clip: border-box;
}
.passe-title-tipo .passe-foco-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 0;
    background: transparent;
    border: none;
    padding: 0;
    filter: drop-shadow(0 0 4px var(--passe-glow));
}
.passe-subtitle {
    font-family: 'Lora', 'Cinzel', serif;
    color: var(--text-muted, #a09080);
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.passe-foco-pill {
    font-family: 'Cinzel', serif;
    font-weight: 800;
    color: #1a0e08;
    background: linear-gradient(180deg, var(--passe-primary), var(--passe-secondary));
    padding: 3px 12px 3px 4px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    letter-spacing: 1.5px;
    font-size: 0.85rem;
    box-shadow: 0 0 10px var(--passe-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.passe-foco-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 1px;
}
.passe-season-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 2px;
    flex-wrap: wrap;
}
.passe-season-name {
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 0.85rem;
    color: var(--gold-light, #e8d38a);
    letter-spacing: 1px;
    opacity: 0.85;
}
.passe-season-progress {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 1px;
    color: var(--passe-primary);
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--passe-primary);
    padding: 2px 10px;
    border-radius: 999px;
    text-shadow: 0 0 6px var(--passe-glow);
    font-variant-numeric: tabular-nums;
}
.passe-season-progress.complete {
    color: #ffd97a;
    border-color: #ffd97a;
    text-shadow: 0 0 8px rgba(255, 217, 122, 0.7);
}

.passe-header-actions {
    display: flex;
    gap: 8px;
    justify-self: end;
    align-items: center;
}
.passe-edit-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(40, 30, 18, 0.9), rgba(15, 10, 6, 0.9));
    border: 1px solid var(--passe-primary);
    color: var(--passe-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, box-shadow 0.2s, color 0.15s;
    box-shadow: 0 0 8px var(--passe-glow);
}
.passe-edit-btn:hover {
    transform: scale(1.08);
    color: var(--gold-light);
    box-shadow: 0 0 14px var(--passe-glow);
}
.passe-modal-close {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted, #a09080);
    font-size: 1.7rem;
    cursor: pointer;
    line-height: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.passe-modal-close:hover {
    color: var(--gold-light);
    background: rgba(201, 168, 76, 0.15);
    border-color: rgba(201, 168, 76, 0.4);
}

/* Separador */
.passe-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 26px 8px;
    position: relative;
    height: 18px;
}
.passe-divider::before,
.passe-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 22px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--passe-primary) 100%);
    opacity: 0.7;
}
.passe-divider::before { left: 0; }
.passe-divider::after  { right: 0; transform: scaleX(-1); }
.passe-divider-jewel {
    color: var(--passe-primary);
    font-size: 0.95rem;
    text-shadow: 0 0 10px var(--passe-glow);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at center, var(--passe-glow) 0%, transparent 70%);
}

/* Painel de selecao de tipo (toggle) */
.passe-edit-panel {
    margin: 0 26px 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 8px;
}
.passe-edit-panel.hidden { display: none; }
.passe-edit-panel-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 10px;
    text-align: center;
}
.passe-edit-panel-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 6px;
}
.passe-tipo-option {
    --opt-color: #c9a84c;
    background: linear-gradient(180deg, rgba(40, 30, 18, 0.7), rgba(15, 10, 6, 0.7));
    border: 1px solid rgba(201, 168, 76, 0.35);
    color: var(--text-light);
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    padding: 6px 3px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: transform 0.1s, box-shadow 0.2s, border-color 0.15s;
    min-width: 0;
}
.passe-tipo-option:hover {
    transform: translateY(-1px);
    border-color: var(--opt-color);
    box-shadow: 0 0 10px var(--opt-color);
}
.passe-tipo-option.selected {
    border-color: var(--opt-color);
    box-shadow: 0 0 12px var(--opt-color), inset 0 0 0 1px var(--opt-color);
    color: var(--opt-color);
}
.passe-tipo-emoji { font-size: 1.4rem; line-height: 1; }
.passe-tipo-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(201, 168, 76, 0.35);
    padding: 2px;
    flex-shrink: 0;
}
.passe-tipo-label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;  /* maxPx - JS shrinks via fitTextToWidth */
    letter-spacing: 0.5px;
    white-space: nowrap;
    line-height: 1.1;
    width: 100%;
    text-align: center;
}

/* === GRID UNIFICADO 3 LINHAS ===
   Todas as rows compartilham o mesmo grid: 110px (label lateral) + 10 cols
   identicas. Garante alinhamento perfeito entre Etapa N, card free, marker
   da barra, e card premium. */
.passe-grid {
    overflow: auto;
    padding: 0 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* v0.34.26: ocupa o espaco restante do modal e centraliza o conteudo
       verticalmente (header continua fixo no topo). Em telas curtas onde
       o conteudo nao cabe, scroll vertical normal. */
    flex: 1 1 auto;
    justify-content: center;
    min-height: 0;
    /* v0.34.30: NAO usar align-items: center aqui — quando o conteudo (1372px)
       e mais largo que o modal, centering cross-axis CORTA o lado esquerdo.
       Centralizacao horizontal vai por margin: 0 auto no .passe-page-content. */
}
/* Page-content ocupa exatamente a largura do conjunto de rows (max-content),
   centralizado quando cabe, scroll quando nao cabe. */
.passe-grid > .passe-page-content {
    flex: 0 0 auto;
    width: max-content;
    margin: 0 auto;
}

/* v0.34.34: scrollbar custom moderna SO no modal do Passe.
   Auto-hide: thumb invisivel por default, aparece em :hover na .passe-grid.
   Thumb usa cor do tipoFoco via --passe-primary/--passe-secondary
   (setadas dinamicamente via applyTheme em passe.js). */

/* Reserva o espaco do scrollbar pra layout nao "pular" quando ele aparece/some */
.passe-grid {
    scrollbar-gutter: stable;
}

/* === Firefox === */
.passe-grid {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.2s ease;
}
.passe-grid:hover {
    scrollbar-color: var(--passe-primary, var(--gold-dark, #8b6914)) transparent;
}

/* === Chrome / Safari / Edge === */
.passe-grid::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.passe-grid::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px;
}
.passe-grid::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
/* Hover na area scrollavel (.passe-grid) -> thumb aparece com gradiente do tipoFoco */
.passe-grid:hover::-webkit-scrollbar-thumb {
    background:
        linear-gradient(180deg,
            var(--passe-primary, #c9a84c) 0%,
            var(--passe-secondary, #8b6914) 100%) padding-box,
        rgba(0, 0, 0, 0.4) border-box;
    border: 2px solid rgba(0, 0, 0, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 217, 122, 0.4),
        0 0 6px var(--passe-glow, rgba(201, 168, 76, 0.4));
}
/* Hover direto no thumb -> mais claro */
.passe-grid:hover::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--passe-primary, #c9a84c) 70%, #fff) 0%,
            var(--passe-primary, #c9a84c) 100%) padding-box,
        rgba(0, 0, 0, 0.55) border-box;
}
/* Drag ativo (segurando o thumb) -> saturacao + glow forte */
.passe-grid::-webkit-scrollbar-thumb:active {
    background:
        linear-gradient(180deg, #fff5cc, var(--passe-primary, #c9a84c)) padding-box,
        rgba(0, 0, 0, 0.6) border-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 0 12px var(--passe-glow, rgba(201, 168, 76, 0.55));
}
.passe-grid::-webkit-scrollbar-corner {
    background: transparent;
}

.passe-row {
    display: grid;
    /* v0.34.27: removida coluna de label (110px).
       v0.34.29: largura limite por card (130px fixo) — cards nao esticam mais
       em telas largas. Em telas pequenas overflow-x: auto na .passe-grid pai
       habilita scroll horizontal. */
    grid-template-columns: repeat(10, 130px);
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.passe-side-spacer {
    /* Ocupa a primeira coluna (110px) para alinhar com label das outras rows */
}

.passe-row-tier-labels {
    padding-bottom: 2px;
}

.passe-tier-label {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-align: center;
    color: var(--gold-light, #e8d38a);
    padding: 4px 0;
    text-transform: uppercase;
    text-shadow: 0 0 6px rgba(201, 168, 76, 0.4);
    border-bottom: 1px dashed rgba(201, 168, 76, 0.3);
}

.passe-row-label {
    font-family: 'Cinzel', serif;
    font-weight: 800;
    font-size: 14px; /* maxPx - JS shrinks via fitTextToWidth */
    letter-spacing: 1px;
    color: var(--gold-light, #e8d38a);
    text-transform: uppercase;
    text-shadow: 0 0 6px rgba(201, 168, 76, 0.4);
    text-align: right;
    padding-right: 8px;
    white-space: nowrap;
    line-height: 1.1;
    overflow: visible;
}
.passe-row-label-bar {
    color: var(--passe-primary);
    text-shadow: 0 0 8px var(--passe-glow);
}

/* Card de tier (free/premium) */
.passe-tier-card {
    background: linear-gradient(180deg, rgba(40, 30, 18, 0.65), rgba(15, 10, 6, 0.85));
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 8px;
    padding: 10px 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
    box-shadow: inset 0 1px 0 rgba(255, 217, 122, 0.06), 0 2px 6px rgba(0, 0, 0, 0.45);
    /* v0.34.11/0.34.25/0.34.29: card mais ALTO + largura limitada (130px da
       grid-template-columns). Mais espaco vertical pra nome em 2 linhas. */
    height: 220px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
}
/* Slot de acao com altura fixa, garante consistencia mesmo quando vazio */
.tier-action,
.tier-action-spacer,
.tier-claim-btn {
    min-height: 26px;
    box-sizing: border-box;
}
.passe-tier-card.tier-available {
    border-color: var(--passe-primary);
    box-shadow:
        inset 0 1px 0 rgba(255, 217, 122, 0.15),
        0 0 14px var(--passe-glow),
        0 2px 6px rgba(0, 0, 0, 0.45);
}
.passe-tier-card.tier-claimed {
    /* Card resgatado: leve dim mas mantem cores e badge bem visivel.
       Override final esta abaixo (.tier-claimed-badge-overlay block). */
    opacity: 0.7;
}
.passe-tier-card.tier-locked {
    opacity: 0.7;
    filter: brightness(0.75);
}
/* v0.34.31: tilt sutil "estilo polaroid" em todos os cards do passe (alterna por
   paridade do tier — tier impar inclina pra esquerda, tier par pra direita).
   Funciona em todos os layouts (Default, Stamp, Polaroid, Chest). */
.passe-tier-card[data-tier="1"],
.passe-tier-card[data-tier="3"],
.passe-tier-card[data-tier="5"],
.passe-tier-card[data-tier="7"],
.passe-tier-card[data-tier="9"] { transform: rotate(-1.5deg); }
.passe-tier-card[data-tier="2"],
.passe-tier-card[data-tier="4"],
.passe-tier-card[data-tier="6"],
.passe-tier-card[data-tier="8"],
.passe-tier-card[data-tier="10"] { transform: rotate(1.5deg); }
/* v0.34.31: hover natural — card desinclina, levanta e cresce ~33%, sobrepondo
   vizinhos (z-index alto) como uma carta sendo levantada do baralho.
   v0.34.32: !important pra garantir que regras de tilt mais especificas (de skins)
   nao bloqueiem a transformacao no hover. */
.passe-tier-card:hover:not(.tier-claimed) {
    transform: rotate(0) translateY(-10px) scale(1.33) !important;
    z-index: 100 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 217, 122, 0.18),
        0 0 28px var(--passe-glow),
        0 14px 32px rgba(0, 0, 0, 0.65);
}
/* v0.34.33: o z-index do card so compete com irmaos na MESMA row. Para o card
   ampliado sobrepor as labels "Etapa N / 100" da row de cima e os bar-markers
   da row de baixo, eleva a ROW INTEIRA quando contem um card em hover. */
.passe-row:has(.passe-tier-card:hover:not(.tier-claimed)) {
    position: relative;
    z-index: 50;
}
.passe-tier-card.tier-premium {
    border-image: linear-gradient(180deg, var(--passe-primary), var(--gold-dark, #8b6914)) 1;
}
.passe-tier-card.tier-claim-anim {
    animation: passe-claim-pulse 0.7s ease-out;
}

/* Estado hover sincronizado: hover em qualquer um dos 3 elementos da etapa
   (marker da barra, card free, card premium) destaca todos os 3.
   Bordas brancas brilhantes + glow intenso, transform leve para cima. */
.passe-tier-card.tier-hover {
    border-color: #ffe9a8 !important;
    border-width: 2px;
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 0 24px var(--passe-glow),
        0 0 0 1px rgba(255, 233, 168, 0.6),
        0 8px 22px rgba(0, 0, 0, 0.6);
    z-index: 3;
}
.passe-bar-marker.tier-hover {
    transform: translate(-50%, -50%) rotate(45deg) scale(1.4);
    border-color: #ffe9a8;
    border-width: 2px;
    color: #1a0e08;
    background: linear-gradient(135deg,
        #ffffff 0%,
        var(--passe-primary) 50%,
        color-mix(in srgb, var(--passe-primary) 60%, #000) 100%);
    box-shadow:
        0 0 22px var(--passe-glow),
        0 0 0 2px rgba(255, 233, 168, 0.7),
        inset 0 0 0 1px rgba(255, 255, 255, 0.55);
    z-index: 5;
}
@keyframes passe-claim-pulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 var(--passe-glow); }
    40%  { transform: scale(1.06); box-shadow: 0 0 30px var(--passe-glow); }
    100% { transform: scale(1);    box-shadow: 0 0 0 var(--passe-glow); }
}

.tier-img-wrap {
    /* v0.34.36: imagem ocupa o espaco do meio do card (entre nome no topo e
       botao acao no rodape). flex: 1 estica verticalmente; width: 100% usa
       toda a largura do card. */
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(201, 168, 76, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tier-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tier-name {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    /* v0.34.28/0.34.36/0.35.1: nome no TOPO do card. Wrappa em ate 2 linhas via
       formatRewardName (<br>). Tamanho compacto pra deixar a imagem livre
       no meio do card (.tier-img-wrap recebe flex: 1).
       max-height limita a 2 linhas pra layout previsivel; texto extra cortado. */
    font-size: 0.85rem;
    color: var(--parchment, #f4e4c1);
    text-align: center;
    line-height: 1.15;
    flex: 0 0 auto;
    display: block;
    white-space: normal;
    overflow: hidden;
    max-width: 100%;
    max-height: 2.4em;
    word-break: break-word;
    padding: 0 4px;
    width: 100%;
}
.tier-action {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.tier-action-claimed {
    color: #6dba6b;
    font-weight: 700;
}

/* Badge sobreposto (canto superior-direito) — substitui texto "Resgatado" */
.tier-claimed-badge-overlay {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(180deg, #6dba6b 0%, #2d6028 100%);
    border: 2px solid #0d0a07;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 12px rgba(109, 186, 107, 0.85),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.6);
    z-index: 6;
    line-height: 1;
}

/* Card claimed: opacity reduzida mas SEM filter:grayscale (badge fica saliente) */
.passe-tier-card.tier-claimed {
    opacity: 0.65;
    filter: none;
}
.tier-action-locked {
    /* v0.35.1: cadeado mais claro/contrastante. Skins overridem abaixo. */
    color: rgba(232, 216, 184, 0.75);
    font-size: 1.15rem;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
/* Skins de fundo claro: cadeado escuro pra contrastar */
.passe-skin.skin-stamp .tier-action-locked,
.passe-skin.skin-polaroid .tier-action-locked {
    color: #1a0e08;
    filter: none;
}
.passe-skin.skin-chest .tier-action-locked {
    color: #ffd97a;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
.tier-claim-btn {
    background: linear-gradient(180deg, var(--passe-primary), var(--passe-secondary));
    color: #1a0e08;
    font-family: 'Cinzel', serif;
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 5px 10px;
    border-radius: 999px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 0 10px var(--passe-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: transform 0.1s, filter 0.15s, box-shadow 0.2s;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: passe-claim-glow 1.8s ease-in-out infinite;
    /* v0.34.20: linha unica + max-width pra fitTextToWidth poder encolher */
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}
.tier-claim-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: 0 0 18px var(--passe-glow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.tier-claim-btn:active { transform: scale(0.95); }
.tier-claim-premium {
    background: linear-gradient(180deg, #ffd97a 0%, #c9a84c 50%, #8b6914 100%);
    border-color: #ffe9a8;
}
@keyframes passe-claim-glow {
    0%, 100% { box-shadow: 0 0 10px var(--passe-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
    50%      { box-shadow: 0 0 22px var(--passe-glow), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
}

/* === BARRA DE KILLS ===
   .passe-bar-cell ocupa as 10 colunas (cols 2-11). Os markers sobrepoem como
   uma camada absolute que tambem tem grid 10col, alinhando 1:1 com os cards
   de cima e de baixo. */
.passe-row-bar {
    margin: 4px 0 0;
    align-items: center;
}
.passe-bar-cell {
    /* v0.34.27: span todas as 10 colunas (label removido) */
    grid-column: 1 / -1;
    position: relative;
}
.passe-bar-info-cell {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    font-family: 'Cinzel', serif;
}
.passe-row-bar-info {
    margin-top: -4px;
}
/* Track: chassis externo + interno escuro com borda dupla (estilo "barra de XP de jogo") */
.passe-bar-track {
    position: relative;
    height: 38px;
    background:
        linear-gradient(180deg, rgba(8, 5, 3, 0.95) 0%, rgba(20, 14, 9, 0.85) 50%, rgba(8, 5, 3, 0.95) 100%);
    border: 2px solid var(--passe-primary);
    border-radius: 6px;
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.8),
        inset 0 3px 8px rgba(0, 0, 0, 0.85),
        0 0 18px var(--passe-glow),
        0 0 0 1px rgba(255, 217, 122, 0.15);
}
/* Stripes diagonais sutis no fundo (vazio) */
.passe-bar-track::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent 0,
        transparent 8px,
        rgba(255, 255, 255, 0.02) 8px,
        rgba(255, 255, 255, 0.02) 16px
    );
    pointer-events: none;
}

.passe-bar-fill {
    position: relative;
    height: 100%;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--passe-primary) 80%, #fff) 0%,
            var(--passe-primary) 30%,
            color-mix(in srgb, var(--passe-primary) 70%, #000) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 0 12px var(--passe-glow);
    transition: width 0.6s cubic-bezier(.4,.8,.4,1);
}
/* Camada de "carregamento" com listras animadas (efeito de carga) */
.passe-bar-fill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.18) 0,
        rgba(255, 255, 255, 0.18) 8px,
        transparent 8px,
        transparent 18px
    );
    animation: passe-bar-stripes 1.6s linear infinite;
}
/* Camada de shine (highlight horizontal que passeia) */
.passe-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 30%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 70%);
    background-size: 200% 100%;
    animation: passe-bar-shine 2.6s linear infinite;
    mix-blend-mode: screen;
}
@keyframes passe-bar-stripes {
    from { background-position: 0 0; }
    to   { background-position: 26px 0; }
}
@keyframes passe-bar-shine {
    from { background-position: -100% 0; }
    to   { background-position: 200% 0; }
}

/* Camada de markers: posicionamento ABSOLUTO baseado em % de kills.
   Independente do grid das outras rows - cada marker N fica exatamente em
   (N/totalEtapas)*100% da largura da barra, refletindo o threshold real. */
.passe-bar-markers-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
.passe-bar-marker {
    position: absolute;
    top: 50%;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    /* losango via rotacao 45deg + translate -50% pra centralizar no left=X% */
    transform: translate(-50%, -50%) rotate(45deg);
    background: linear-gradient(135deg, rgba(40, 30, 18, 0.95), rgba(15, 10, 6, 0.95));
    border: 1.5px solid rgba(201, 168, 76, 0.45);
    color: var(--text-muted, #a09080);
    font-family: 'Cinzel', serif;
    font-weight: 800;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
    transition: all 0.3s;
}
.passe-bar-marker > span {
    transform: rotate(-45deg);
    line-height: 1;
}
.passe-bar-marker.reached {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--passe-primary) 70%, #fff) 0%,
        var(--passe-primary) 50%,
        color-mix(in srgb, var(--passe-primary) 70%, #000) 100%);
    border-color: rgba(255, 255, 255, 0.7);
    color: #1a0e08;
    box-shadow: 0 0 12px var(--passe-glow), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.passe-bar-num {
    font-weight: 800;
    font-size: 1rem;
    color: var(--gold-light);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 6px var(--passe-glow);
}
.passe-bar-label {
    font-size: 0.78rem;
    letter-spacing: 1px;
    color: var(--text-muted, #a09080);
    text-transform: uppercase;
}

/* ============================================================
   PAGINADOR + 10 LAYOUTS DE PASSE
   ============================================================ */

/* Barra de configurações no rodapé do passe (substituiu o paginador) */
.passe-settings-bar {
    margin-top: 18px;
    padding: 14px 4px 4px;
    border-top: 1px dashed rgba(201, 168, 76, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.passe-settings-current {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: var(--text-muted, #a09080);
    letter-spacing: 1px;
}
.passe-settings-current strong {
    color: var(--gold-light, #e8d38a);
    text-shadow: 0 0 6px rgba(201, 168, 76, 0.4);
}

/* v0.34.15: badge PREVIEW no titulo do modal em editMode */
.passe-title-preview {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,224,102,0.85), rgba(201,168,76,0.85));
    color: #1a120a;
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    font-weight: 800;
    border: 1px solid rgba(0,0,0,0.55);
    text-shadow: none;
    vertical-align: middle;
    /* v0.34.23: desliga gradiente herdado do .passe-title */
    -webkit-text-fill-color: #1a120a;
    background-clip: border-box;
    -webkit-background-clip: border-box;
}

/* v0.34.14: campo de papel de parede do passe (na settings bar, em editMode) */
.passe-wallpaper-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 280px;
    min-width: 220px;
    max-width: 480px;
}
.passe-wallpaper-label {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    color: var(--gold-light, #e8d38a);
    letter-spacing: 0.6px;
    flex-shrink: 0;
}
.passe-wallpaper-input {
    flex: 1 1 auto;
    background: rgba(0,0,0,0.45);
    color: var(--parchment, #e8d8b8);
    border: 1px solid rgba(201,168,76,0.35);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: 'Lora', serif;
    font-size: 0.78rem;
    min-width: 0;
}
.passe-wallpaper-input:focus {
    outline: none;
    border-color: rgba(255,224,102,0.85);
    box-shadow: 0 0 0 2px rgba(255,224,102,0.25);
}
.passe-wallpaper-clear {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    color: rgba(232,216,184,0.7);
    border: 1px solid rgba(201,168,76,0.35);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.passe-wallpaper-clear:hover {
    color: #ff9b9b;
    border-color: rgba(255,155,155,0.7);
}

/* v0.34.14/0.34.16: papel de parede como <img> real dentro do modal.
   Usa referrerpolicy=no-referrer (no html) pra contornar bloqueio do Drive.
   object-fit: cover + object-position: center cropa centralizado dentro do
   recorte do modal (ex: 3000x1000 num modal 400x400 mostra so o miolo).
   Dim overlay leve via outro pseudo pra manter legibilidade. */
.passe-wallpaper-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    opacity: 0.55;
    pointer-events: none;
    border-radius: 12px;
}
.passe-modal-backdrop.passe-has-wallpaper .passe-modal {
    overflow: hidden;
}
/* dim overlay sutil para legibilidade — div dedicada (nao ::after pq ja
   usado pelos ornamentos dourados do modal) */
.passe-wallpaper-dim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,10,7,0.35) 0%, rgba(10,7,5,0.55) 100%);
    z-index: 0;
    pointer-events: none;
    border-radius: 12px;
}
/* conteudo do modal (header, divider, grid) acima da imagem e do dim */
.passe-modal-backdrop.passe-has-wallpaper .passe-modal > *:not(.passe-wallpaper-img):not(.passe-wallpaper-dim) {
    position: relative;
    z-index: 1;
}
.passe-settings-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(180deg, rgba(40, 30, 18, 0.85), rgba(15, 10, 6, 0.95));
    border: 1px solid var(--passe-primary, #c9a84c);
    color: var(--passe-primary, #c9a84c);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    font-size: 0.78rem;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.2s, color 0.15s;
}
.passe-settings-btn:hover {
    transform: translateY(-1px);
    color: var(--gold-light);
    box-shadow: 0 0 12px var(--passe-glow, rgba(201, 168, 76, 0.5));
}
.passe-settings-btn svg { transition: transform 0.4s; }
.passe-settings-btn:hover svg { transform: rotate(60deg); }

/* Modal de Configurações (escolha de layout) */
.passe-settings-modal-bd {
    position: fixed;
    inset: 0;
    /* v0.34.24: subiu de 11700 para 12200 pra ficar acima do passe-config-overlay
       (12100) quando aberto via "Alterar layout" do modal de Config. */
    z-index: 12200;
    background: rgba(13, 10, 7, 0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: passe-fade-in 0.2s ease-out;
}
.passe-settings-modal {
    background: linear-gradient(160deg, #1a1410 0%, #0e0a07 100%);
    border: 1.5px solid var(--gold-dark, #8b6914);
    border-radius: 12px;
    padding: 20px 24px;
    width: 92%;
    max-width: 520px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.85), 0 0 28px rgba(201, 168, 76, 0.25);
}
.passe-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(201, 168, 76, 0.25);
    padding-bottom: 12px;
    margin-bottom: 8px;
}
.passe-settings-header h3 {
    margin: 0;
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: 2px;
    color: var(--gold-light, #e8d38a);
    text-shadow: 0 0 10px rgba(201, 168, 76, 0.4);
}
.passe-settings-close {
    background: transparent;
    border: none;
    color: var(--text-muted, #a09080);
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 4px;
}
.passe-settings-close:hover { color: var(--gold-light); background: rgba(201, 168, 76, 0.12); }

.passe-settings-subtitle {
    font-family: 'Lora', 'Cinzel', serif;
    font-style: italic;
    color: var(--text-muted, #a09080);
    font-size: 0.85rem;
    margin: 0 0 14px;
}
.passe-layout-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
    max-height: 60vh;
    overflow-y: auto;
}
.passe-layout-option {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    color: var(--parchment, #f4e4c1);
    font-family: inherit;
    transition: transform 0.1s, border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.passe-layout-option:hover {
    border-color: var(--passe-primary);
    transform: translateY(-2px);
}
.passe-layout-option.selected {
    border-color: var(--passe-primary);
    background: linear-gradient(180deg, rgba(201, 168, 76, 0.18), rgba(201, 168, 76, 0.05));
    box-shadow: 0 0 14px var(--passe-glow), inset 0 1px 0 rgba(255, 217, 122, 0.15);
}
.passe-layout-option-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.passe-layout-option-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--passe-primary), var(--passe-secondary));
    color: #1a0e08;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}
.passe-layout-option-name {
    font-family: 'Cinzel', serif;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 1.2px;
    color: var(--gold-light, #e8d38a);
    flex: 1;
}
.passe-layout-option-check {
    color: #6dba6b;
    font-weight: 800;
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

/* Preview do layout: contém 1 card mini renderizado com o skin correspondente */
.passe-layout-preview {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: 6px;
    padding: 14px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 170px;
    overflow: hidden;
}
.passe-preview-skin-host {
    width: 110px;
    pointer-events: none;
}
.passe-preview-skin-host .passe-tier-card {
    height: 140px;
    width: 100%;
}
.passe-layout-preview .tier-img-wrap { width: 56px; height: 56px; }
.passe-layout-preview .tier-name { font-size: 0.7rem; line-height: 1.1; }
.passe-layout-preview .tier-action,
.passe-layout-preview .tier-action-spacer,
.passe-layout-preview .tier-claimed-badge-overlay { display: none; }

.passe-settings-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(201, 168, 76, 0.25);
}
.passe-settings-cancel,
.passe-settings-save {
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 0.82rem;
    text-transform: uppercase;
    transition: transform 0.1s, box-shadow 0.2s;
}
.passe-settings-cancel {
    background: transparent;
    border: 1px solid rgba(201, 168, 76, 0.4);
    color: var(--text-muted);
}
.passe-settings-cancel:hover { color: var(--gold-light); border-color: var(--gold-light); }
.passe-settings-save {
    background: linear-gradient(180deg, #ffd97a, #c9a84c, #8b6914);
    border: 1px solid #ffe9a8;
    color: #1a0e08;
    box-shadow: 0 0 12px rgba(201, 168, 76, 0.6);
}
.passe-settings-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(255, 217, 122, 0.85);
}

/* Card é clicável: hover indicação sutil (extra sobre o que já existe) */
.passe-tier-card { cursor: pointer; }

/* ============================================================
   MODAL DE DETALHES DO ITEM — base + 4 skins (1 por layout)
   ============================================================ */

.passe-detail-modal-bd {
    position: fixed; inset: 0; z-index: 11680;
    background: rgba(13, 10, 7, 0.88); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    animation: passe-fade-in 0.2s ease-out;
}
.passe-detail-modal {
    position: relative; width: 92%; max-width: 480px; max-height: 92vh;
    overflow: hidden; display: flex; flex-direction: column;
}
.passe-detail-close {
    position: absolute; top: 10px; right: 10px; z-index: 5;
    width: 34px; height: 34px;
    background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff; font-size: 1.5rem; line-height: 1; border-radius: 50%; cursor: pointer;
    transition: transform 0.15s, background 0.15s;
}
.passe-detail-close:hover { transform: scale(1.1); background: rgba(0, 0, 0, 0.85); }

.passe-detail-hero {
    position: relative; height: 220px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.passe-detail-hero-bg {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(70, 55, 35, 0.4), transparent 70%), linear-gradient(180deg, rgba(40, 30, 18, 0.8), rgba(15, 10, 6, 1));
    z-index: 0;
}
.passe-detail-hero-img {
    position: relative; z-index: 1;
    width: 130px; height: 130px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.5);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    border: 3px solid var(--passe-primary, #c9a84c);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 30px var(--passe-glow);
}
.tier-detail-img { width: 100%; height: 100%; object-fit: cover; }
.passe-detail-hero-meta {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    display: flex; gap: 8px; align-items: center;
}
.passe-detail-tier-chip {
    font-family: 'Cinzel Decorative', 'Cinzel', serif; font-weight: 900;
    font-size: 0.78rem; letter-spacing: 2px;
    color: #1a0e08;
    background: linear-gradient(180deg, rgba(160, 144, 128, 0.85), rgba(80, 70, 60, 0.85));
    padding: 4px 12px; border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.passe-detail-tier-chip.reached {
    background: linear-gradient(180deg, var(--passe-primary), var(--passe-secondary));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 12px var(--passe-glow);
}
.passe-detail-lane-chip {
    font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.7rem;
    letter-spacing: 1.5px; text-transform: uppercase;
    padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor;
    background: rgba(0, 0, 0, 0.6);
}
.passe-detail-lane-chip.lane-free { color: var(--passe-primary); }
.passe-detail-lane-chip.lane-premium { color: #ffd97a; }

.passe-detail-body {
    background: linear-gradient(180deg, #1a1410 0%, #0e0a07 100%);
    padding: 20px 22px; overflow-y: auto; flex: 1;
}
.passe-detail-name {
    font-family: 'Cinzel Decorative', 'Cinzel', serif; font-weight: 900;
    font-size: 1.55rem; color: var(--gold-light, #e8d38a);
    margin: 0 0 6px;
    text-shadow: 0 0 12px rgba(201, 168, 76, 0.4), 0 1px 0 rgba(0, 0, 0, 0.6);
    letter-spacing: 1.5px; text-align: center;
}
.passe-detail-desc {
    font-family: 'Lora', serif; font-style: italic;
    color: var(--text-muted, #a09080); font-size: 0.85rem;
    line-height: 1.45; margin: 0 0 14px; text-align: center;
}
.passe-detail-progress-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.passe-detail-mini-bar {
    flex: 1; height: 8px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--passe-primary);
    border-radius: 999px; overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}
.passe-detail-mini-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--passe-primary), color-mix(in srgb, var(--passe-primary) 70%, #fff), var(--passe-primary));
    box-shadow: 0 0 8px var(--passe-glow);
}
.passe-detail-progress-text {
    font-family: 'Cinzel', serif; font-size: 0.75rem;
    color: var(--gold-light); letter-spacing: 1px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.passe-detail-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.passe-detail-stat {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.45);
    border-left: 3px solid var(--passe-primary);
    border-radius: 4px;
}
.passe-detail-stat-status { grid-column: 1 / -1; }
.passe-detail-stat .stat-label {
    font-family: 'Cinzel', serif; font-size: 0.66rem;
    letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted);
}
.passe-detail-stat .stat-value {
    font-family: 'Cinzel', serif; font-weight: 700;
    color: var(--parchment, #f4e4c1); font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}
.passe-detail-stat .stat-value.detail-status-claimed { color: #6dba6b; }
.passe-detail-stat .stat-value.detail-status-available { color: var(--passe-primary); text-shadow: 0 0 6px var(--passe-glow); }
.passe-detail-stat .stat-value.detail-status-locked { color: #c47070; }

.passe-detail-footer {
    padding: 14px 22px 18px;
    background: linear-gradient(180deg, #0e0a07, #1a1410);
    border-top: 1px solid rgba(201, 168, 76, 0.25);
    display: flex; justify-content: center;
}
.passe-detail-claim-btn {
    background: linear-gradient(180deg, var(--passe-primary), var(--passe-secondary));
    color: #1a0e08; border: 1px solid rgba(255, 255, 255, 0.45);
    padding: 12px 32px; border-radius: 999px; cursor: pointer;
    font-family: 'Cinzel', serif; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase; font-size: 0.88rem;
    box-shadow: 0 0 16px var(--passe-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    animation: quest-claim-glow 1.8s ease-in-out infinite;
    width: 100%; max-width: 320px;
}
.passe-detail-claim-btn.premium {
    background: linear-gradient(180deg, #ffd97a, #c9a84c, #8b6914);
    border-color: #ffe9a8;
}
.passe-detail-claim-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.passe-detail-claimed-msg, .passe-detail-locked-msg {
    font-family: 'Cinzel', serif; font-size: 0.88rem; letter-spacing: 1px;
    padding: 12px 22px; border-radius: 999px; text-align: center;
    width: 100%; max-width: 320px;
    /* v0.35.1: deixa quebrar em multiplas linhas se nome do tier longo */
    line-height: 1.3;
    word-break: keep-all;
}
.passe-detail-claimed-msg { color: #6dba6b; background: rgba(60, 90, 50, 0.2); border: 1px solid rgba(109, 186, 107, 0.35); font-weight: 700; }
.passe-detail-locked-msg {
    /* v0.35.1: parchment claro pra alto contraste no fundo escuro do default skin */
    color: var(--parchment, #f4e4c1);
    background: rgba(20, 15, 8, 0.75);
    border: 1px solid rgba(201, 168, 76, 0.45);
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

/* v0.35.1: overrides do locked-msg/claimed-msg para skins de fundo claro
   (Stamp e Polaroid). Texto escuro contra bg claro pra alto contraste. */
.passe-detail-modal-bd.detail-skin-stamp .passe-detail-locked-msg,
.passe-detail-modal-bd.detail-skin-polaroid .passe-detail-locked-msg {
    color: #1a0e08;
    background: rgba(255, 248, 224, 0.95);
    border: 2px solid #1a0e08;
    font-weight: 800;
    text-shadow: none;
    box-shadow: 3px 3px 0 #1a0e08;
}
.passe-detail-modal-bd.detail-skin-stamp .passe-detail-claimed-msg,
.passe-detail-modal-bd.detail-skin-polaroid .passe-detail-claimed-msg {
    color: #1a4a14;
    background: rgba(155, 197, 85, 0.5);
    border: 2px solid #1a0e08;
    font-weight: 800;
    text-shadow: none;
    box-shadow: 3px 3px 0 #1a0e08;
}
/* v0.35.1: Chest skin (fundo madeira) — texto creme com sombra escura */
.passe-detail-modal-bd.detail-skin-chest .passe-detail-locked-msg {
    color: #f5e6c4;
    background: rgba(40, 22, 8, 0.85);
    border: 2px solid #ffd97a;
    font-weight: 700;
}
.passe-detail-modal-bd.detail-skin-chest .passe-detail-claimed-msg {
    color: #b4ec85;
    background: rgba(20, 50, 14, 0.7);
    border: 2px solid #ffd97a;
    font-weight: 700;
}

/* === SKIN DEFAULT (P1) — modal base com borda dourada === */
.passe-detail-modal-bd.detail-skin-default .passe-detail-modal {
    border: 1.5px solid var(--gold-dark, #8b6914);
    border-radius: 12px;
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.85), 0 0 32px var(--passe-glow);
}

/* === SKIN STAMP (P2) — adesivo papel-creme borda chunky preta + sombra hard === */
.passe-detail-modal-bd.detail-skin-stamp .passe-detail-modal {
    border: 5px solid #1a0e08;
    border-radius: 6px;
    background: #fff8e0;
    box-shadow: 8px 8px 0 #1a0e08, 12px 12px 0 var(--passe-primary);
    transform: rotate(-1deg);
}
.passe-detail-modal-bd.detail-skin-stamp .passe-detail-hero {
    background: var(--passe-primary);
    border-bottom: 5px solid #1a0e08; height: 200px;
}
.passe-detail-modal-bd.detail-skin-stamp .passe-detail-hero-bg { display: none; }
.passe-detail-modal-bd.detail-skin-stamp .passe-detail-hero-img {
    border: 4px solid #1a0e08; border-radius: 6px;
    box-shadow: 4px 4px 0 #1a0e08; background: #fff;
}
.passe-detail-modal-bd.detail-skin-stamp .passe-detail-tier-chip {
    background: #1a0e08; color: #fff8e0;
    border: 2px solid #1a0e08; box-shadow: 3px 3px 0 #fff8e0; font-weight: 900;
}
.passe-detail-modal-bd.detail-skin-stamp .passe-detail-lane-chip {
    background: #fff8e0; color: #1a0e08;
    border: 2px solid #1a0e08; box-shadow: 2px 2px 0 #1a0e08;
}
.passe-detail-modal-bd.detail-skin-stamp .passe-detail-body { background: #fff8e0; }
.passe-detail-modal-bd.detail-skin-stamp .passe-detail-name {
    color: #1a0e08;
    text-shadow: 3px 3px 0 var(--passe-primary);
    font-weight: 900; text-transform: uppercase;
}
.passe-detail-modal-bd.detail-skin-stamp .passe-detail-desc { color: #4a2818; font-style: normal; font-weight: 600; }
.passe-detail-modal-bd.detail-skin-stamp .passe-detail-stat {
    background: var(--passe-primary);
    border: 3px solid #1a0e08; border-radius: 0;
    box-shadow: 3px 3px 0 #1a0e08;
}
.passe-detail-modal-bd.detail-skin-stamp .passe-detail-stat .stat-label,
.passe-detail-modal-bd.detail-skin-stamp .passe-detail-stat .stat-value { color: #1a0e08; font-weight: 800; }
.passe-detail-modal-bd.detail-skin-stamp .passe-detail-mini-bar { border: 3px solid #1a0e08; border-radius: 0; height: 14px; }
.passe-detail-modal-bd.detail-skin-stamp .passe-detail-mini-fill { background: var(--passe-primary); }
.passe-detail-modal-bd.detail-skin-stamp .passe-detail-progress-text { color: #1a0e08; font-weight: 800; }
.passe-detail-modal-bd.detail-skin-stamp .passe-detail-footer {
    background: #fff8e0; border-top: 5px solid #1a0e08;
}
.passe-detail-modal-bd.detail-skin-stamp .passe-detail-claim-btn {
    background: #1a0e08; color: var(--passe-primary);
    border: 3px solid #1a0e08; border-radius: 4px;
    box-shadow: 4px 4px 0 var(--passe-primary); animation: none;
}

/* === SKIN POLAROID (P3) — foto polaroid grande, white-bottom, fonte handwritten === */
.passe-detail-modal-bd.detail-skin-polaroid .passe-detail-modal {
    background: #f5f0e0; border: none; border-radius: 4px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
    transform: rotate(-1.5deg);
    max-width: 420px; padding: 16px 16px 0;
}
.passe-detail-modal-bd.detail-skin-polaroid .passe-detail-close {
    background: #2a1810; color: #f5f0e0; border: 1px dashed #f5f0e0;
}
.passe-detail-modal-bd.detail-skin-polaroid .passe-detail-hero {
    background: #1a0e08; height: 280px; border: none;
    margin: 0 -16px; padding: 0 16px;
}
.passe-detail-modal-bd.detail-skin-polaroid .passe-detail-hero-bg { display: none; }
.passe-detail-modal-bd.detail-skin-polaroid .passe-detail-hero-img {
    width: 180px; height: 180px;
    border: 6px solid #fff; border-radius: 0;
    background: linear-gradient(180deg, var(--passe-primary), var(--passe-secondary));
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
}
.passe-detail-modal-bd.detail-skin-polaroid .passe-detail-tier-chip {
    background: #f5f0e0; color: #2a1810;
    font-family: 'Comic Sans MS', 'Marker Felt', cursive;
    transform: rotate(-3deg);
    box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.5);
}
.passe-detail-modal-bd.detail-skin-polaroid .passe-detail-lane-chip {
    background: rgba(255, 255, 255, 0.9); color: #2a1810;
    font-family: 'Comic Sans MS', cursive;
    border: 1px dashed #2a1810; transform: rotate(2deg);
}
.passe-detail-modal-bd.detail-skin-polaroid .passe-detail-body { background: #f5f0e0; color: #2a1810; }
.passe-detail-modal-bd.detail-skin-polaroid .passe-detail-name {
    color: #2a1810;
    font-family: 'Marker Felt', 'Comic Sans MS', cursive;
    font-style: italic; font-weight: 700; font-size: 1.7rem;
    text-shadow: none; transform: rotate(-1deg); letter-spacing: 0;
}
.passe-detail-modal-bd.detail-skin-polaroid .passe-detail-desc {
    color: #5a3818;
    font-family: 'Comic Sans MS', cursive; font-style: normal;
}
.passe-detail-modal-bd.detail-skin-polaroid .passe-detail-stat {
    background: rgba(42, 24, 16, 0.08);
    border-left: 3px dashed #2a1810; border-radius: 0;
}
.passe-detail-modal-bd.detail-skin-polaroid .passe-detail-stat .stat-label,
.passe-detail-modal-bd.detail-skin-polaroid .passe-detail-stat .stat-value { color: #2a1810; font-family: 'Comic Sans MS', cursive; }
.passe-detail-modal-bd.detail-skin-polaroid .passe-detail-mini-bar {
    background: #fff; border-color: #2a1810; border-style: dashed; border-radius: 0;
}
.passe-detail-modal-bd.detail-skin-polaroid .passe-detail-progress-text {
    color: #2a1810; font-family: 'Comic Sans MS', cursive;
}
.passe-detail-modal-bd.detail-skin-polaroid .passe-detail-footer {
    background: #f5f0e0; border-top: 2px dashed #2a1810;
}
.passe-detail-modal-bd.detail-skin-polaroid .passe-detail-claim-btn {
    background: #2a1810; color: #f5f0e0;
    border: 2px dashed #f5f0e0; font-family: 'Comic Sans MS', cursive;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
    animation: none; transform: rotate(-1deg); border-radius: 4px;
}

/* === SKIN CHEST (P4) — baú de tesouro, madeira, fechadura dourada === */
.passe-detail-modal-bd.detail-skin-chest .passe-detail-modal {
    background:
        linear-gradient(180deg, #5a3018 0%, #3a1c0a 50%, #5a3018 100%),
        repeating-linear-gradient(90deg, transparent 0 24px, rgba(0, 0, 0, 0.18) 24px 26px);
    background-blend-mode: multiply;
    border: 5px solid #2a1408;
    border-radius: 8px 8px 14px 14px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.85), inset 0 0 0 2px #1a0e08, 0 0 30px rgba(255, 217, 122, 0.25);
}
.passe-detail-modal-bd.detail-skin-chest .passe-detail-hero {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent), linear-gradient(180deg, #5a3018 0%, #3a1c0a 100%);
    border-bottom: 4px solid #2a1408;
    box-shadow: inset 0 -8px 14px rgba(255, 217, 122, 0.25);
    position: relative;
}
.passe-detail-modal-bd.detail-skin-chest .passe-detail-hero::before {
    content: ''; position: absolute; top: -6px; left: 50%;
    transform: translateX(-50%);
    width: 56px; height: 30px;
    background: radial-gradient(circle at 50% 80%, #ffd97a, #8b6914);
    border: 3px solid #2a1408; border-radius: 8px 8px 0 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); z-index: 3;
}
.passe-detail-modal-bd.detail-skin-chest .passe-detail-hero::after {
    content: '🔒'; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
    z-index: 4; font-size: 1rem;
}
.passe-detail-modal-bd.detail-skin-chest .passe-detail-hero-bg {
    background: radial-gradient(ellipse at center, rgba(255, 217, 122, 0.3), transparent 70%);
}
.passe-detail-modal-bd.detail-skin-chest .passe-detail-hero-img {
    border: 3px solid #ffd97a;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 24px rgba(255, 217, 122, 0.7), inset 0 0 16px rgba(0, 0, 0, 0.7);
}
.passe-detail-modal-bd.detail-skin-chest .passe-detail-tier-chip {
    background: linear-gradient(180deg, #ffd97a, #8b6914);
    color: #1a0e08;
    border: 2px solid #2a1408;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.passe-detail-modal-bd.detail-skin-chest .passe-detail-lane-chip {
    color: #ffd97a; background: rgba(0, 0, 0, 0.7); border-color: #ffd97a;
}
.passe-detail-modal-bd.detail-skin-chest .passe-detail-body {
    background: linear-gradient(180deg, #4a2818 0%, #2a1408 100%), repeating-linear-gradient(90deg, transparent 0 24px, rgba(0, 0, 0, 0.18) 24px 26px);
    background-blend-mode: multiply;
}
.passe-detail-modal-bd.detail-skin-chest .passe-detail-name {
    color: #ffd97a;
    text-shadow: 0 0 12px rgba(255, 217, 122, 0.7), 0 2px 0 rgba(0, 0, 0, 0.8);
}
.passe-detail-modal-bd.detail-skin-chest .passe-detail-desc { color: #d4a843; }
.passe-detail-modal-bd.detail-skin-chest .passe-detail-stat {
    background: rgba(0, 0, 0, 0.6);
    border-left: 3px solid #ffd97a;
}
.passe-detail-modal-bd.detail-skin-chest .passe-detail-stat .stat-label { color: #d4a843; }
.passe-detail-modal-bd.detail-skin-chest .passe-detail-stat .stat-value { color: #ffd97a; }
.passe-detail-modal-bd.detail-skin-chest .passe-detail-mini-bar {
    border-color: #ffd97a; background: rgba(0, 0, 0, 0.8);
}
.passe-detail-modal-bd.detail-skin-chest .passe-detail-mini-fill {
    background: linear-gradient(90deg, #8b6914, #ffd97a, #8b6914);
    box-shadow: 0 0 10px rgba(255, 217, 122, 0.7);
}
.passe-detail-modal-bd.detail-skin-chest .passe-detail-progress-text { color: #ffd97a; }
.passe-detail-modal-bd.detail-skin-chest .passe-detail-footer {
    background: linear-gradient(180deg, #2a1408 0%, #1a0e08 100%);
    border-top: 4px solid #2a1408;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.6);
}
.passe-detail-modal-bd.detail-skin-chest .passe-detail-claim-btn {
    background: linear-gradient(180deg, #ffd97a, #c9a84c, #8b6914);
    color: #1a0e08;
    border: 2px solid #ffd97a;
    box-shadow: 0 0 18px rgba(255, 217, 122, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Container de cada pagina */
.passe-page-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 300px;
}

/* MINI CARDS reusaveis (paginas 2,4,5,6,7,9) */
.passe-mini-card {
    background: linear-gradient(180deg, rgba(40, 30, 18, 0.65), rgba(15, 10, 6, 0.85));
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 6px;
    padding: 6px 4px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    position: relative;
}
.passe-mini-card.mini-available { border-color: var(--passe-primary); box-shadow: 0 0 10px var(--passe-glow); }
.passe-mini-card.mini-claimed { opacity: 0.6; filter: grayscale(0.4); }
.passe-mini-card.mini-locked { opacity: 0.7; filter: brightness(0.75); }
.mini-img-wrap { width: 100%; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(0,0,0,0.3); border: 1px solid rgba(201,168,76,0.25); }
.mini-img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.mini-name { font-family: 'Cinzel', serif; font-size: 0.7rem; color: var(--parchment, #f4e4c1); text-align: center; line-height: 1.1; flex: 0 0 auto; display: block; white-space: normal; overflow: hidden; max-width: 100%; width: 100%; word-break: break-word; padding: 0 3px; }
.mini-action { min-height: 18px; }
.mini-claim-tag {
    color: #6dba6b; font-weight: 800; font-size: 0.85rem;
    background: rgba(0,0,0,0.4); padding: 1px 6px; border-radius: 999px;
    border: 1px solid rgba(109, 186, 107, 0.4);
}
.mini-claim-tag.locked { color: var(--text-muted); border-color: rgba(160, 144, 128, 0.3); }
.mini-claim-btn {
    background: linear-gradient(180deg, var(--passe-primary), var(--passe-secondary));
    color: #1a0e08; font-family: 'Cinzel', serif; font-weight: 800;
    font-size: 0.62rem; letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 3px 8px; border-radius: 999px; cursor: pointer;
    box-shadow: 0 0 8px var(--passe-glow);
    /* v0.34.20: linha unica + overflow hidden pra fitTextToWidth */
    white-space: nowrap; overflow: hidden; max-width: 100%;
}
.mini-claim-btn.premium {
    background: linear-gradient(180deg, #ffd97a, #c9a84c 60%, #8b6914);
    border-color: #ffe9a8;
}
.mini-claim-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ============================================================
   SKINS de paginas 2-10 — APENAS cards mudam, barra de progresso da pagina 1 e mantida
   ============================================================ */

/* === SKIN STAMP (P2) — adesivos com borda chunky e sombra hard === */
.passe-skin.skin-stamp .passe-tier-card {
    background: #fff8e0; border: 4px solid #1a0e08; border-radius: 4px;
    box-shadow: 5px 5px 0 #1a0e08, 8px 8px 0 var(--passe-primary);
    color: #1a0e08; padding: 10px 6px;
}
/* v0.34.32: tilt do skin-stamp removido daqui — agora usa as regras globais
   em .passe-tier-card[data-tier=N], permitindo o hover-zoom global funcionar. */
.passe-skin.skin-stamp .passe-tier-card.tier-available { background: var(--passe-primary); }
.passe-skin.skin-stamp .passe-tier-card.tier-premium { background: #ffe066; }
.passe-skin.skin-stamp .passe-tier-card.tier-premium.tier-available { background: linear-gradient(135deg, #ff7eb0, #ffd97a); }
.passe-skin.skin-stamp .tier-img-wrap { background: #fff; border: 3px solid #1a0e08; border-radius: 0; box-shadow: 2px 2px 0 #1a0e08; }
.passe-skin.skin-stamp .tier-name { color: #1a0e08; font-weight: 800; text-transform: uppercase; }
.passe-skin.skin-stamp .tier-claim-btn { background: #1a0e08; color: var(--passe-primary); border: 2px solid #1a0e08; box-shadow: 3px 3px 0 var(--passe-primary); }
.passe-skin.skin-stamp .passe-row-label { color: var(--passe-primary); font-weight: 900; -webkit-text-stroke: 2px #1a0e08; }
.passe-skin.skin-stamp .passe-tier-label { color: #1a0e08; background: var(--passe-primary); border: 2px solid #1a0e08; padding: 2px; }

/* === SKIN POLAROID (P3) — fotos polaroid com tilt === */
.passe-skin.skin-polaroid .passe-tier-card {
    background: #f5f0e0; border: none; border-radius: 2px;
    padding: 8px 8px 26px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.6), inset 0 -22px 0 #fff;
    color: #2a1810; position: relative;
}
/* v0.34.31: tilt + hover do polaroid migraram para o nivel global (.passe-tier-card),
   aplicados em todos os layouts. Mantemos so o estilo unico do polaroid (bg, fonte). */
.passe-skin.skin-polaroid .tier-img-wrap { width: 100%; height: 70px; background: #1a0e08; border: none; border-radius: 0; }
.passe-skin.skin-polaroid .tier-img { object-fit: contain; padding: 4px; background: linear-gradient(180deg, var(--passe-primary), var(--passe-secondary)); }
.passe-skin.skin-polaroid .tier-name { color: #2a1810; font-family: 'Comic Sans MS', 'Marker Felt', cursive; font-weight: 700; font-style: italic; font-size: 0.78rem; }
.passe-skin.skin-polaroid .tier-claim-btn { background: #2a1810; color: #f5f0e0; border: 1px dashed #f5f0e0; font-family: 'Comic Sans MS', cursive; }
.passe-skin.skin-polaroid .passe-row-label { color: var(--gold-light); font-family: 'Marker Felt', 'Comic Sans MS', cursive; font-style: italic; }

/* === SKIN CHEST (P4) — baús de tesouro de madeira === */
.passe-skin.skin-chest .passe-tier-card {
    background: linear-gradient(180deg, #5a3018 0%, #3a1c0a 50%, #5a3018 100%), repeating-linear-gradient(90deg, transparent 0 20px, rgba(0,0,0,0.15) 20px 22px);
    background-blend-mode: multiply;
    border: 3px solid #2a1408; border-radius: 4px 4px 8px 8px;
    box-shadow: inset 0 8px 0 rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.7);
    position: relative;
}
.passe-skin.skin-chest .passe-tier-card::before {
    content: ''; position: absolute; left: 50%; top: -2px; transform: translateX(-50%);
    width: 28px; height: 14px;
    background: radial-gradient(circle at 50% 80%, #ffd97a, #8b6914);
    border: 2px solid #2a1408; border-radius: 4px 4px 0 0;
}
.passe-skin.skin-chest .passe-tier-card.tier-available {
    box-shadow: inset 0 8px 0 rgba(0,0,0,0.4), 0 0 24px rgba(255, 217, 122, 0.85), 0 4px 10px rgba(0,0,0,0.7);
    animation: chest-shake 1.4s ease-in-out infinite;
}
@keyframes chest-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-1deg); } 75% { transform: rotate(1deg); } }
.passe-skin.skin-chest .passe-tier-card.tier-claimed {
    background: linear-gradient(180deg, #4a2818 0%, #2a1408 50%, #4a2818 100%);
    box-shadow: inset 0 -10px 14px rgba(255, 217, 122, 0.4), 0 4px 10px rgba(0,0,0,0.7);
}
.passe-skin.skin-chest .passe-tier-card.tier-claimed::after {
    content: '⭐'; position: absolute; top: 8px; right: 8px; font-size: 1.2rem;
    filter: drop-shadow(0 0 6px #ffd97a);
}
.passe-skin.skin-chest .tier-img-wrap { border: 2px solid #ffd97a; background: rgba(0,0,0,0.4); }
.passe-skin.skin-chest .tier-name { color: #ffd97a; }

/* === SKIN FOIL (P5) — cards holográficos rainbow === */
.passe-skin.skin-foil .passe-tier-card {
    background: linear-gradient(135deg, #ff00c8 0%, #ffd700 25%, #00ddff 50%, #ff00c8 75%, #ffd700 100%);
    background-size: 400% 400%;
    animation: foil-shimmer-card 6s ease-in-out infinite;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.15);
    position: relative; overflow: hidden;
}
.passe-skin.skin-foil .passe-tier-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
    background-size: 200% 200%;
    animation: foil-sweep 3s linear infinite;
    mix-blend-mode: overlay; pointer-events: none;
}
@keyframes foil-shimmer-card { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes foil-sweep { from { background-position: -100% 0; } to { background-position: 200% 0; } }
.passe-skin.skin-foil .tier-img-wrap { background: rgba(0,0,0,0.6); border: 2px solid rgba(255,255,255,0.7); border-radius: 8px; }
.passe-skin.skin-foil .tier-name { color: #fff; text-shadow: 0 0 4px #000, 0 0 10px rgba(255,255,255,0.5); font-weight: 900; }
.passe-skin.skin-foil .tier-claim-btn { background: rgba(0,0,0,0.7); color: #fff; border: 1px solid rgba(255,255,255,0.6); }

/* === SKIN SLOT (P6) — slots de inventário RPG dark === */
.passe-skin.skin-slot {
    background: #0a0a0e; padding: 10px; border-radius: 6px;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 8px, transparent 8px 16px);
}
.passe-skin.skin-slot .passe-tier-card {
    background: radial-gradient(circle at 30% 30%, #2a2a32 0%, #14141a 100%);
    border: 2px solid #3a3a44; border-radius: 4px;
    box-shadow: inset 0 0 0 1px #0a0a0e, inset 2px 2px 6px rgba(0,0,0,0.85), inset -2px -2px 6px rgba(255,255,255,0.06);
    color: #b8b8c8;
}
.passe-skin.skin-slot .passe-tier-card.tier-free { border-color: #6090c0; box-shadow: inset 0 0 0 1px #0a0a0e, inset 2px 2px 6px rgba(0,0,0,0.85), 0 0 8px rgba(96, 144, 192, 0.4); }
.passe-skin.skin-slot .passe-tier-card.tier-premium { border-color: #d4a043; box-shadow: inset 0 0 0 1px #0a0a0e, inset 2px 2px 6px rgba(0,0,0,0.85), 0 0 10px rgba(212, 160, 67, 0.5); }
.passe-skin.skin-slot .passe-tier-card.tier-available { animation: slot-glow 1.5s ease-in-out infinite; }
@keyframes slot-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.4); } }
.passe-skin.skin-slot .tier-img-wrap { background: #050508; border: 1px solid #1a1a22; border-radius: 0; box-shadow: inset 0 2px 8px rgba(0,0,0,0.95); }
.passe-skin.skin-slot .tier-name { color: #d4d4e0; font-family: 'Cinzel', serif; font-size: 0.7rem; }
.passe-skin.skin-slot .passe-tier-card.tier-premium .tier-name { color: #ffd97a; }
.passe-skin.skin-slot .passe-row-label { color: #d4d4e0; }

/* === SKIN CAPSULE (P7) — pílulas farmacêuticas === */
.passe-skin.skin-capsule .passe-tier-card {
    border-radius: 999px / 50%;
    height: 160px; width: 60px;
    margin: 0 auto; padding: 14px 4px;
    border: 3px solid #fff;
    background: linear-gradient(180deg, #4daff5 0% 50%, #fff 50% 100%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 0 20px rgba(0,0,0,0.2);
    color: #1a0e08;
    display: flex; flex-direction: column; justify-content: space-between; align-items: center;
}
.passe-skin.skin-capsule .passe-tier-card.tier-premium { background: linear-gradient(180deg, #d472d4 0% 50%, #ffe066 50% 100%); }
.passe-skin.skin-capsule .passe-tier-card.tier-available { box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 20px rgba(255,255,255,0.6), inset 0 0 20px rgba(255,255,255,0.4); }
.passe-skin.skin-capsule .tier-img-wrap { width: 36px; height: 36px; border: 2px solid #fff; background: rgba(0,0,0,0.2); }
.passe-skin.skin-capsule .tier-name { color: #1a0e08; font-size: 0.6rem; font-weight: 800; text-shadow: 0 1px 0 rgba(255,255,255,0.5); }
.passe-skin.skin-capsule .tier-claim-btn { padding: 2px 8px; font-size: 0.6rem; }

/* === SKIN WAX (P8) — selos de cera === */
.passe-skin.skin-wax .passe-tier-card {
    background: radial-gradient(circle at 30% 30%, #d62828 0%, #8b1a1a 60%, #4a0a0a 100%);
    border: none; border-radius: 50%;
    width: 110px; height: 110px;
    margin: 20px auto; padding: 10px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.7), inset 0 -4px 8px rgba(0,0,0,0.5), inset 0 4px 8px rgba(255,255,255,0.25);
    color: #ffe9c4; position: relative;
}
.passe-skin.skin-wax .passe-tier-card::before {
    content: ''; position: absolute; inset: 6px;
    border: 2px dashed rgba(255, 233, 196, 0.4); border-radius: 50%; pointer-events: none;
}
.passe-skin.skin-wax .passe-tier-card.tier-premium { background: radial-gradient(circle at 30% 30%, #6a3a90 0%, #3a1a55 60%, #1a0030 100%); color: #f5e6ff; }
.passe-skin.skin-wax .passe-tier-card.tier-available { box-shadow: 0 6px 16px rgba(214, 40, 40, 0.85), inset 0 -4px 8px rgba(0,0,0,0.5), inset 0 4px 8px rgba(255,255,255,0.35); transform: scale(1.05); }
.passe-skin.skin-wax .tier-img-wrap { width: 50px; height: 50px; background: transparent; border: none; }
.passe-skin.skin-wax .tier-img { filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.6)); }
.passe-skin.skin-wax .tier-name { font-family: 'Cinzel Decorative', serif; font-weight: 900; font-size: 0.6rem; letter-spacing: 1px; text-transform: uppercase; }
.passe-skin.skin-wax .tier-action, .passe-skin.skin-wax .tier-action-spacer { display: none; }
.passe-skin.skin-wax .passe-row-label { color: #d62828; font-family: 'Cinzel Decorative', serif; }

/* === SKIN STAINED (P9) — vitrais de catedral === */
.passe-skin.skin-stained {
    background: #0a0a14; padding: 14px;
    border: 4px solid #1a1a2a; border-radius: 8px;
}
.passe-skin.skin-stained .passe-tier-card {
    clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
    background:
        linear-gradient(135deg, rgba(212, 114, 212, 0.6), rgba(94, 192, 216, 0.6), rgba(255, 215, 0, 0.6)),
        repeating-linear-gradient(45deg, rgba(0,0,0,0.4) 0 2px, transparent 2px 30px),
        repeating-linear-gradient(-45deg, rgba(0,0,0,0.4) 0 2px, transparent 2px 30px);
    border: none; border-radius: 0;
    box-shadow: inset 0 0 0 3px #1a0e08, 0 0 12px rgba(255, 255, 255, 0.2);
    height: 180px; padding: 14px 8px 30px;
}
.passe-skin.skin-stained .passe-tier-card.tier-premium {
    background:
        linear-gradient(135deg, rgba(255, 0, 100, 0.7), rgba(255, 215, 0, 0.7), rgba(176, 48, 32, 0.7)),
        repeating-linear-gradient(45deg, rgba(0,0,0,0.4) 0 2px, transparent 2px 30px),
        repeating-linear-gradient(-45deg, rgba(0,0,0,0.4) 0 2px, transparent 2px 30px);
}
.passe-skin.skin-stained .passe-tier-card.tier-available { filter: brightness(1.3) saturate(1.4); box-shadow: inset 0 0 0 3px #ffd97a, 0 0 24px rgba(255, 217, 122, 0.65); }
.passe-skin.skin-stained .tier-img-wrap { background: rgba(0,0,0,0.7); border: 2px solid #1a0e08; }
.passe-skin.skin-stained .tier-name { color: #fff; text-shadow: 1px 1px 0 #1a0e08, -1px -1px 0 #1a0e08, 1px -1px 0 #1a0e08, -1px 1px 0 #1a0e08; font-family: 'Cinzel Decorative', serif; }
.passe-skin.skin-stained .passe-row-label { color: #ffd97a; font-family: 'Cinzel Decorative', serif; }

/* === SKIN TROPHY (P10) — pódios bronze/prata/ouro === */
.passe-skin.skin-trophy .passe-tier-card {
    background: linear-gradient(180deg, #6a6a6a 0%, #2a2a2a 100%);
    border: 2px solid #444; border-radius: 4px 4px 0 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.6);
    color: #fff; position: relative; padding-top: 18px;
}
.passe-skin.skin-trophy .passe-tier-card[data-tier="1"],
.passe-skin.skin-trophy .passe-tier-card[data-tier="2"],
.passe-skin.skin-trophy .passe-tier-card[data-tier="3"] {
    background: linear-gradient(180deg, #cd7f32 0%, #6a3818 100%);
    border-color: #cd7f32;
}
.passe-skin.skin-trophy .passe-tier-card[data-tier="4"],
.passe-skin.skin-trophy .passe-tier-card[data-tier="5"],
.passe-skin.skin-trophy .passe-tier-card[data-tier="6"],
.passe-skin.skin-trophy .passe-tier-card[data-tier="7"] {
    background: linear-gradient(180deg, #c0c0c0 0%, #4a4a4a 100%);
    border-color: #c0c0c0;
}
.passe-skin.skin-trophy .passe-tier-card[data-tier="8"],
.passe-skin.skin-trophy .passe-tier-card[data-tier="9"],
.passe-skin.skin-trophy .passe-tier-card[data-tier="10"] {
    background: linear-gradient(180deg, #ffd700 0%, #8b6914 100%);
    border-color: #ffd97a;
    box-shadow: 0 4px 14px rgba(255, 215, 0, 0.5);
}
.passe-skin.skin-trophy .passe-tier-card::before {
    content: '🏆'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    font-size: 1.4rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}
.passe-skin.skin-trophy .passe-tier-card.tier-available { animation: trophy-bounce 1.5s ease-in-out infinite; }
@keyframes trophy-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.passe-skin.skin-trophy .tier-img-wrap { background: rgba(0,0,0,0.45); border: 2px solid rgba(255,255,255,0.5); border-radius: 4px; }
.passe-skin.skin-trophy .tier-name { color: #fff; font-family: 'Cinzel', serif; font-weight: 800; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); }
.passe-skin.skin-trophy .tier-claim-btn { background: rgba(255,255,255,0.95); color: #1a0e08; border: 1px solid #fff; }
.passe-skin.skin-trophy .passe-row-label { color: #ffd97a; font-family: 'Cinzel Decorative', serif; }

/* =====================================================================
 * FASE 13 PARTE 1 — Painel do Mestre (mockup visual)
 * ===================================================================== */
/* .nav-btn-mestre — herda tamanho do .nav-btn (icone agora e SVG, nao emoji) */
body.is-jogador #btn-mestre-painel { display: none !important; }

.mestre-painel-backdrop {
    z-index: 9500;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
}
.mestre-painel {
    width: 99vw;
    height: 96vh;
    max-width: 2400px;
    background: linear-gradient(180deg, #1d130a 0%, #15100a 100%);
    border: 2px solid #b8862a;
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 0 1px rgba(201,168,76,0.18) inset, 0 24px 80px rgba(0,0,0,0.7);
}

.mestre-painel-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 18px 10px;
    border-bottom: 1px solid rgba(201,168,76,0.25);
    position: relative;
    background: linear-gradient(180deg, rgba(201,168,76,0.10), transparent);
    flex-shrink: 0;
    z-index: 6;
}
.mestre-painel-title {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 700;
    color: var(--gold-light, #f3da9c);
    letter-spacing: 0.18em;
    margin: 0;
    font-size: 1.4rem;
    text-transform: uppercase;
}
.mestre-painel-ornament {
    color: var(--gold, #c9a84c);
    font-size: 1rem;
    opacity: 0.85;
}
.mestre-painel-close {
    position: absolute;
    right: 14px;
    top: 12px;
    width: 32px; height: 32px;
    background: transparent;
    color: var(--gold-light, #f3da9c);
    border: 1px solid rgba(201,168,76,0.35);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.15s;
}
.mestre-painel-close:hover { background: rgba(201,168,76,0.18); }

.mestre-painel-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 14px 0;
    border-bottom: 1px solid rgba(201,168,76,0.18);
    background: rgba(0,0,0,0.25);
    overflow-x: auto;
    overflow-y: visible;
    flex-wrap: nowrap;
    white-space: nowrap;
    /* v0.32.6: garante que tabs nunca encolham e nao sejam cobertas pelo body */
    flex-shrink: 0;
    position: relative;
    z-index: 5;
}
.mestre-painel-tabs::-webkit-scrollbar { height: 6px; }
.mestre-painel-tabs::-webkit-scrollbar-thumb {
    background: rgba(201,168,76,0.35); border-radius: 3px;
}
.mestre-tab {
    background: rgba(40,28,16,0.7);
    color: rgba(243,218,156,0.65);
    border: 1px solid rgba(201,168,76,0.25);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 8px 18px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    letter-spacing: 0.06em;
    font-size: 0.9rem;
    transition: all 0.15s;
}
.mestre-tab:hover { background: rgba(60,40,20,0.85); color: var(--gold-light, #f3da9c); }
.mestre-tab.active {
    background: linear-gradient(180deg, rgba(201,168,76,0.28), rgba(201,168,76,0.10));
    color: var(--gold-light, #f3da9c);
    border-color: rgba(201,168,76,0.55);
    box-shadow: 0 -2px 0 0 var(--gold, #c9a84c) inset;
}
/* v0.41.9: aba desabilitada (Dashboard por enquanto). */
.mestre-tab.is-disabled,
.mestre-tab:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.4);
}
.mestre-tab-icon { margin-right: 6px; }

.mestre-painel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 22px 32px 28px;
    color: #e8d8b8;
    font-family: 'Lora', serif;
    /* v0.32.6: cria stacking context isolado e impede que conteudo
       interno se sobreponha a tabs/header (z-index relative-baixo) */
    position: relative;
    z-index: 1;
    min-height: 0;
}
/* Inputs/selects/textarea dentro do painel — garante tema escuro mesmo
   fora de form modals (ex: aba Passe, tabs com inputs inline) */
.mestre-painel-body input[type="text"],
.mestre-painel-body input[type="number"],
.mestre-painel-body input[type="search"],
.mestre-painel-body select,
.mestre-painel-body textarea {
    background: rgba(0,0,0,0.45);
    color: #f3da9c;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 5px;
    padding: 6px 10px;
    font-family: 'Lora', serif;
    font-size: 0.92rem;
}
.mestre-painel-body input:focus,
.mestre-painel-body select:focus,
.mestre-painel-body textarea:focus {
    outline: none;
    border-color: var(--gold, #c9a84c);
    box-shadow: 0 0 0 2px rgba(201,168,76,0.2);
}
.mestre-painel-body label {
    color: rgba(232,216,184,0.85);
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mestre-tab-content { animation: fadeIn 0.2s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.mestre-section-title {
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    margin: 0 0 6px;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
}
.mestre-section-sub {
    font-size: 0.9rem;
    color: rgba(232,216,184,0.7);
    margin: 0 0 12px;
}
.mestre-section-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.mestre-section-hint {
    font-size: 0.85rem;
    color: rgba(232,216,184,0.55);
    font-style: italic;
}
.mestre-empty {
    text-align: center;
    padding: 40px 20px;
    color: rgba(232,216,184,0.5);
    font-style: italic;
}

.mestre-action-btn {
    background: linear-gradient(180deg, #c9a84c 0%, #8d6f24 100%);
    color: #1a0e08;
    border: 1px solid #d8b766;
    border-radius: 6px;
    padding: 8px 18px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
    font-size: 0.9rem;
}
.mestre-action-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.mestre-action-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }
.mestre-action-btn-secondary {
    background: rgba(40,28,16,0.85);
    color: var(--gold-light, #f3da9c);
    border: 1px solid rgba(201,168,76,0.4);
}
.mestre-action-btn-secondary:hover { background: rgba(60,40,20,0.95); }

/* Aba Batalha */
.mestre-batalha-card {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(201,168,76,0.22);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 14px;
}
.mestre-batalha-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mestre-sessions-list {
    display: flex; flex-direction: column; gap: 6px;
}
.mestre-session-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(60,42,22,0.35);
    border: 1px solid rgba(201,168,76,0.15);
    border-radius: 6px;
    font-size: 0.88rem;
}
.mestre-session-when { color: rgba(232,216,184,0.7); }
.mestre-session-jogador { color: var(--gold-light, #f3da9c); }
.mestre-session-result { color: rgba(232,216,184,0.85); font-style: italic; }

/* Sub-tabs (Especies | Variacoes) */
.mestre-subtabs {
    display: flex; gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(201,168,76,0.2);
}
.mestre-subtab {
    background: rgba(40,28,16,0.6);
    color: rgba(232,216,184,0.7);
    border: 1px solid rgba(201,168,76,0.2);
    padding: 5px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    transition: all 0.15s;
}
.mestre-subtab:hover { background: rgba(60,40,20,0.85); color: var(--gold-light, #f3da9c); }
.mestre-subtab.active {
    background: var(--gold, #c9a84c);
    color: #1a0e08;
    border-color: #d8b766;
    font-weight: 700;
}

/* Grid de cards bestiario / NPCs */
.mestre-bestiario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.mestre-bestiario-card {
    background: linear-gradient(180deg, rgba(40,28,16,0.95), rgba(20,14,8,0.95));
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.mestre-bestiario-card:hover {
    transform: translateY(-2px);
    border-color: rgba(201,168,76,0.55);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.mestre-card-img-wrap {
    position: relative;
    aspect-ratio: 1.3;
    background: linear-gradient(135deg, rgba(0,0,0,0.5), rgba(201,168,76,0.10));
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.mestre-card-img {
    width: 80%; height: 80%;
    object-fit: contain;
}
.mestre-card-img-empty {
    font-size: 2.6rem;
    color: rgba(201,168,76,0.55);
    background: transparent;
}
.mestre-card-badge {
    position: absolute;
    top: 6px; right: 6px;
    padding: 3px 9px;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.mestre-card-badge-pub  { background: #2d6a3a; color: #d8f0d8; border: 1px solid #4a9258; }
.mestre-card-badge-priv { background: #5a3a1a; color: #e8d8b8; border: 1px solid #8d6f24; }
.mestre-card-body {
    padding: 10px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mestre-card-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    font-size: 0.98rem;
}
.mestre-card-types, .mestre-card-base {
    color: rgba(232,216,184,0.6);
    font-style: italic;
    font-size: 0.78rem;
}
.mestre-card-stats {
    margin-top: 6px;
    font-size: 0.82rem;
    color: rgba(232,216,184,0.85);
    font-family: 'Cinzel', serif;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.mestre-stat-pos { color: #7dd87d; }
.mestre-stat-neg { color: #d87d7d; }
.mestre-card-desc {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: rgba(232,216,184,0.7);
    line-height: 1.3;
}
.mestre-card-actions {
    display: flex;
    gap: 4px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.35);
    border-top: 1px solid rgba(201,168,76,0.18);
    flex-wrap: wrap;
}
.mestre-card-act {
    background: rgba(60,42,22,0.85);
    color: var(--gold-light, #f3da9c);
    border: 1px solid rgba(201,168,76,0.3);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    transition: background 0.15s;
}
.mestre-card-act:hover { background: rgba(80,55,28,0.95); }
.mestre-card-act-pub  { background: rgba(45,106,58,0.55); border-color: rgba(74,146,88,0.6); }
.mestre-card-act-pub:hover { background: rgba(45,106,58,0.85); }
.mestre-card-act-danger {
    background: rgba(106,45,45,0.55);
    border-color: rgba(146,74,74,0.6);
}
.mestre-card-act-danger:hover { background: rgba(146,45,45,0.85); }

/* NPC monsters */
.mestre-npc-monsters {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-top: 6px;
}
.mestre-npc-monster {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(201,168,76,0.2);
    color: rgba(232,216,184,0.85);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-family: 'Cinzel', serif;
}
.mestre-npc-monster small { color: rgba(232,216,184,0.55); margin-left: 4px; }

/* v0.32.28 — chip de contagem (substitui listagem inline no card) */
.mestre-npc-monsters-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-family: 'Cinzel', serif;
    color: rgba(232,216,184,0.85);
    letter-spacing: 0.04em;
}

/* Form modal (cadastrar especie/variacao/npc) */
.mestre-form-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9600;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(3px);
}
.mestre-form-modal {
    width: min(720px, 96vw);
    max-height: 90vh;
    background: linear-gradient(180deg, #1d130a, #15100a);
    border: 2px solid #b8862a;
    border-radius: 12px;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,0.8);
}
/* Variante mais larga para forms com lista de cards (NPC, etc) */
.mestre-form-modal.modal-wide {
    width: min(960px, 96vw);
}
/* ============================================
   Form de cadastro de Item (Equipamento)
   ============================================ */
.mestre-form-modal.item-form-modal {
    width: min(960px, 96vw);
}
.mestre-form-modal.hab-form-modal {
    width: min(1240px, 96vw);
}
/* Aplica accent-color no escopo do form pra checks/radios usarem
   o dourado da paleta em vez do azul-padrao do browser. */
.item-form-body input[type="checkbox"],
.item-form-body input[type="radio"] {
    accent-color: var(--gold-light, #f3da9c);
    width: 14px; height: 14px;
    cursor: pointer;
    vertical-align: middle;
}
.item-form-grid {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 22px;
    align-items: stretch;
}
.item-form-left {
    display: flex; flex-direction: column; gap: 12px;
}
/* Coluna da direita: flex column com small no fim (margin-top:auto)
   pra alinhar com o input da Descricao na esquerda. */
.item-form-right {
    display: flex; flex-direction: column;
    gap: 6px;
}
.item-form-right .item-field-label { margin-bottom: 4px; }
.item-form-right > small.mestre-form-note {
    margin-top: auto;
    padding-top: 6px;
}
/* Field padrao: label em cima, input abaixo. Override do display:flex
   herdado de .mestre-form-body label (que colapsa o input). */
.item-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px;
    width: 100%;
}
.item-field-label {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--gold-light, #f3da9c);
}
.item-field-row {
    display: flex;
    gap: 12px;
}
/* Chips de visibilidade reusam .npc-tipo-chip (já no tema do sistema). */
.item-vis-chips {
    display: flex;
    gap: 8px;
}
/* Bloco da imagem.
   v0.83: container-type: inline-size habilita unidades `cqi` nos filhos, que
   escalam com a largura do wrap. O componente fica visualmente proporcional
   em qualquer tamanho (240px padrao do form de Item, 140px do modal de
   recompensa do Passe, etc.) sem precisar de overrides por uso. */
.item-img-wrap {
    position: relative;
    width: 240px; height: 240px;
    border: 2px dashed rgba(201,168,76,0.35);
    border-radius: 8px;
    background: rgba(0,0,0,0.35);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
    container-type: inline-size;
}
.item-img-wrap:hover { border-color: var(--gold, #c9a84c); }
.item-img-wrap.drag-over { border-color: var(--gold, #c9a84c); background: rgba(201,168,76,0.12); }
.item-img-placeholder {
    color: rgba(232,216,184,0.6);
    text-align: center;
    font-family: 'Cinzel', serif;
    /* clamp(min, escalavel, max): em 140px o texto cai pra ~9px; em 240px sobe pro maximo. */
    font-size: clamp(0.62rem, 6.5cqi, 0.95rem);
    letter-spacing: 0.04em;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(2px, 1.5cqi, 4px);
    padding: clamp(4px, 5cqi, 12px);
    box-sizing: border-box;
    width: 100%; height: 100%;
    line-height: 1.15;
}
.item-img-placeholder-icon {
    font-size: clamp(1.4rem, 17cqi, 2.4rem);
    opacity: 0.55;
    line-height: 1;
}
.item-img-placeholder small {
    font-family: 'Lora', serif;
    font-size: clamp(0.55rem, 5cqi, 0.78rem);
    color: rgba(232,216,184,0.5);
    margin-top: 2px;
    line-height: 1.1;
}
.item-img-preview {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
}
/* X de remover imagem reusa .char-monster-remove (X redondo, mesmo padrao
   do card de monstro). Sobrescreve so o accent-color que o escopo do form
   forca em todos os checkboxes/radios — nao se aplica a botoes. */
.item-img-remove {
    top: 6px; right: 6px;
}
/* Bonus como lista dinamica */
.item-bonus-list {
    display: flex; flex-direction: column; gap: 6px;
    margin: 6px 0 10px;
}
.bonus-row {
    display: flex; align-items: center;
    gap: 8px; flex-wrap: wrap;
    padding: 6px 8px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(201,168,76,0.18);
    border-radius: 5px;
}
/* Select de atributo ocupa so o necessario; min/max crescem com o espaco. */
.bonus-row .bonus-attr {
    flex: 0 0 auto;
    width: 230px;       /* cabe "Pe\u{e7}as de Armadura M\u{e1}gica" */
}
.bonus-row .bonus-min,
.bonus-row .bonus-max {
    flex: 1 1 80px;
    min-width: 70px;
}
.bonus-row .edit-input,
.bonus-row .bonus-attr,
.bonus-row .bonus-min,
.bonus-row .bonus-max {
    height: 42px;
    padding: 6px 12px;
    box-sizing: border-box;
}
.item-inline-chk {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: rgba(232,216,184,0.9);
    cursor: pointer;
    margin: 0;
}
/* Requisitos: linha horizontal com todos os controles alinhados ao centro
   vertical (mesma altura). O picker de tipagem cresce conforme o numero
   de tipos selecionados, mas o trigger comeca alinhado com os demais
   inputs (35px de altura — mesmo do .edit-input no escopo do form). */
.req-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(201,168,76,0.18);
    border-radius: 5px;
}
.req-row .req-valores {
    display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap;
}
.req-row .req-especie-label {
    color: var(--gold-light, #f3da9c);
    font-style: italic;
}
/* Inputs do requisito padronizados na mesma altura (42px — texto nao corta). */
.req-row .edit-input,
.req-row .req-tipo,
.req-row .req-vi,
.req-row .req-vt {
    height: 42px;
    padding: 6px 12px;
    box-sizing: border-box;
}
/* Picker de tipagem multi-select dentro do requisito: trigger mostra os
   icones selecionados (vai quebrando linha se necessario). Largura igual
   ao select de atributo (.req-vt 210px) e altura minima igual aos demais. */
.req-tipagem-wrap {
    position: relative;
    display: inline-flex;
    flex: 1; min-width: 240px;
    align-self: stretch;
}
.req-tipagem-trigger {
    width: 100%;
    min-height: 42px;
    padding: 6px 12px;
    align-items: center;
}
.req-tipagem-icons {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    flex: 1; text-align: left;
    min-height: 22px;
}
.req-tipagem-icons .hab-filter-tipo-icon,
.req-tipagem-icons .hab-filter-tipo-icon-fallback {
    width: 22px; height: 22px;
}
/* Popover do picker de tipagem do requisito: mesmo estilo do .hab-filter-tipo-pop,
   mas alargado para caber 41 tipos com quebra de linha confortavel. */
.req-tipagem-pop {
    min-width: 280px;
    max-width: 360px;
}
/* Card do item: badge de visibilidade no canto da imagem. */
.bestiary-card-vis {
    position: absolute;
    top: 4px; right: 4px;
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(201,168,76,0.4);
    border-radius: 50%;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    z-index: 2;
}
/* Card do item precisa de position:relative pro badge se posicionar.
   .bestiary-card-img-wrap ja eh position:relative (verificado no card original)
   mas reforco aqui caso nao seja. */
.bestiary-card .bestiary-card-img-wrap { position: relative; }
.mestre-form-header {
    padding: 12px 18px;
    border-bottom: 1px solid rgba(201,168,76,0.25);
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(201,168,76,0.10);
}
.mestre-form-header h3 {
    margin: 0; color: var(--gold-light, #f3da9c);
    font-family: 'Cinzel', serif; letter-spacing: 0.08em;
}
.mestre-form-close {
    background: transparent;
    color: var(--gold-light, #f3da9c);
    border: 1px solid rgba(201,168,76,0.35);
    border-radius: 4px;
    padding: 4px 12px;
    height: 28px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    transition: background 0.15s;
}
.mestre-form-close:hover { background: rgba(201,168,76,0.18); }
.mestre-form-body {
    padding: 16px 22px;
    overflow-y: auto;
    flex: 1;
    display: flex; flex-direction: column; gap: 10px;
    color: #e8d8b8;
    font-family: 'Lora', serif;
}
.mestre-form-body label {
    display: flex; flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: rgba(232,216,184,0.85);
}
.mestre-form-body input, .mestre-form-body select, .mestre-form-body textarea {
    background: rgba(0,0,0,0.45);
    color: #f3da9c;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 5px;
    padding: 6px 10px;
    font-family: 'Lora', serif;
    font-size: 0.92rem;
}
.mestre-form-body input:focus, .mestre-form-body select:focus, .mestre-form-body textarea:focus {
    outline: none;
    border-color: var(--gold, #c9a84c);
    box-shadow: 0 0 0 2px rgba(201,168,76,0.2);
}
/* v0.44.0: esconde o spinner branco do browser nos input[type=number] do form
   do painel (destoava do tema dourado/escuro). Limitado ao escopo do
   .mestre-form-body pra nao afetar inputs de outras telas. */
.mestre-form-body input[type="number"]::-webkit-inner-spin-button,
.mestre-form-body input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.mestre-form-body input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.mestre-form-body input:disabled, .mestre-form-body select:disabled, .mestre-form-body textarea:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.mestre-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}
.mestre-form-note {
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: rgba(232,216,184,0.65);
    font-style: italic;
    background: rgba(201,168,76,0.06);
    border-left: 3px solid var(--gold, #c9a84c);
    padding: 6px 10px;
    border-radius: 0 4px 4px 0;
}
.mestre-form-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(201,168,76,0.25);
}
.mestre-form-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.mestre-form-actions {
    padding: 12px 18px;
    border-top: 1px solid rgba(201,168,76,0.22);
    display: flex; justify-content: flex-end; gap: 10px;
    background: rgba(0,0,0,0.3);
}
.mestre-npc-monster-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr 60px auto 50px 32px;
    gap: 6px;
    margin-bottom: 6px;
    align-items: center;
}
/* Combobox de selecao de especie (substitui o select) */
.m-ref-combo {
    position: relative;
}
.m-ref-combo .m-ref-search {
    width: 100%;
    background: rgba(0,0,0,0.45);
    color: #f3da9c;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 4px;
    padding: 5px 8px;
    font-family: 'Lora', serif;
    font-size: 0.85rem;
    box-sizing: border-box;
}
.m-ref-combo .m-ref-search:focus {
    outline: none;
    border-color: var(--gold, #c9a84c);
    box-shadow: 0 0 0 2px rgba(201,168,76,0.18);
}
.m-ref-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    margin-top: 2px;
    max-height: 280px;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(40,28,16,0.98), rgba(20,14,8,0.98));
    border: 1px solid var(--gold, #c9a84c);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.7);
    padding: 4px;
}
.m-ref-dropdown.hidden {
    display: none;
}
.m-ref-option {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    align-items: center;
    transition: background 0.1s;
}
.m-ref-option:hover {
    background: rgba(201,168,76,0.18);
}
.m-ref-opt-label {
    color: var(--gold-light, #f3da9c);
    font-family: 'Cinzel', serif;
    font-size: 0.86rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-ref-opt-tipo {
    color: #a8d8e0;
    font-size: 0.72rem;
    font-family: 'Cinzel', serif;
    background: rgba(94,192,216,0.1);
    border: 1px solid rgba(94,192,216,0.3);
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
}
.m-ref-opt-stats {
    color: rgba(232,216,184,0.6);
    font-size: 0.74rem;
    font-style: italic;
    white-space: nowrap;
}
.m-ref-empty {
    padding: 10px 14px;
    color: rgba(232,216,184,0.5);
    font-style: italic;
    text-align: center;
    font-size: 0.85rem;
}
.m-tipo-tag {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    color: #a8d8e0;
    background: rgba(94,192,216,0.1);
    border: 1px solid rgba(94,192,216,0.3);
    padding: 3px 7px;
    border-radius: 4px;
    text-align: center;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.m-tipo-tag.m-tipo-empty {
    color: rgba(232,216,184,0.4);
    background: rgba(0,0,0,0.3);
    border-color: rgba(201,168,76,0.15);
    font-style: italic;
}

/* v0.32.0 — Cards visuais de monstro do NPC + Species Picker estilo armazem */
/* v0.32.6: card de monstro do NPC — responsivo + estetico
   Layout default (desktop wide): 4 cols `img | info | fields | actions`
   Em telas estreitas (<900px) reorganiza para 2 linhas:
     linha 1: img | info | actions
     linha 2: fields (full width)
   Em <600px: tudo empilhado verticalmente.                          */
.m-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, 1.2fr) auto;
    gap: 12px;
    align-items: center;
    background: linear-gradient(180deg, rgba(40,28,16,0.85), rgba(20,14,8,0.85));
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    transition: border-color 0.15s, transform 0.15s;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}
.m-card:hover {
    border-color: rgba(201,168,76,0.55);
    transform: translateY(-1px);
}
.m-card-img {
    width: 56px; height: 56px;
    object-fit: contain;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 6px;
    flex-shrink: 0;
}
.m-card-img-empty {
    display: flex; align-items: center; justify-content: center;
    color: rgba(232,216,184,0.35);
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
}
.m-card-info {
    display: flex; flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.m-card-nome {
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    font-size: 0.95rem;
    line-height: 1.2;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
.m-card-tipo {
    font-family: 'Cinzel', serif;
    color: #a8d8e0;
    background: rgba(94,192,216,0.1);
    border: 1px solid rgba(94,192,216,0.3);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    align-self: flex-start;
    letter-spacing: 0.05em;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-card-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px;
    gap: 8px;
    min-width: 0;
}
.m-card-label {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px;
    font-size: 0.7rem !important;
    color: rgba(232,216,184,0.65) !important;
    min-width: 0;
}
.m-card-label input {
    padding: 4px 8px !important;
    font-size: 0.85rem !important;
    width: 100%;
    box-sizing: border-box;
}
.m-card-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Tablet/laptop estreito: card vira 2 linhas (fields full) */
@media (max-width: 900px) {
    .m-card {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 10px;
    }
    .m-card-img { grid-row: 1 / 3; }
    .m-card-info { grid-column: 2; grid-row: 1; }
    .m-card-actions { grid-column: 3; grid-row: 1; }
    .m-card-fields {
        grid-column: 2 / 4;
        grid-row: 2;
        grid-template-columns: minmax(0, 1fr) 80px;
    }
}

/* v0.32.7 — NPC monstros grid (estilo armazem do personagem) */
.npc-monstros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
/* v0.40.14/14b: layout 5-em-1-linha + pagina\u{e7}\u{e3}o (mesmo padrao do Armazem).
   Usa !important pra vencer regras especificas de char-fullscreen e media
   queries que aplicam outros grid-template-columns em .monstros-armazem-grid. */
.npc-monstros-grid.npc-monstros-paginated,
#f-monsters-list.npc-monstros-paginated {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch;
}
.npc-monstros-grid.npc-monstros-paginated > *,
#f-monsters-list.npc-monstros-paginated > * {
    min-width: 0;
}
.npc-monstros-grid.npc-monstros-paginated > .npc-monstros-pag-wrap,
#f-monsters-list.npc-monstros-paginated > .npc-monstros-pag-wrap {
    grid-column: 1 / -1;
    margin-top: 8px;
}
.npc-monstros-pag-wrap .bestiary-pagination {
    margin-top: 0;
}
/* v0.40.17: card "+" ocupa exatamente 1 c\u{e9}lula (mesmo tamanho dos cards de
   monstro). Reseta o aspect-ratio: 0.85 antigo (que vinha do uso no armaz\u{e9}m
   do jogador) pra que o card respeite a altura do grid (align-items: stretch). */
.npc-monstros-paginated > .npc-add-monster-card {
    grid-column: span 1 !important;
}
.npc-monstros-paginated > .npc-add-monster-card .npc-add-monster-inner {
    aspect-ratio: auto !important;
    height: 100%;
    min-height: 160px;
}
/* Em telas estreitas (mobile), 5 cards ficam apertados \u{2014} cai pra 3 cols */
@media (max-width: 720px) {
    .npc-monstros-grid.npc-monstros-paginated,
    #f-monsters-list.npc-monstros-paginated {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
.npc-monstro-card {
    position: relative;
}
.npc-monstro-card .bestiary-card {
    transition: border-color 0.15s, transform 0.15s;
}
.npc-monstro-card:hover .bestiary-card {
    border-color: var(--gold-light, #f3da9c);
    transform: translateY(-2px);
}
.npc-card-hab-badge {
    position: absolute;
    top: 4px; left: 4px;
    background: rgba(212,114,212,0.85);
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.4);
    z-index: 2;
    pointer-events: none;
}
.npc-add-monster-card {
    cursor: pointer;
}
.npc-add-monster-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    aspect-ratio: 0.85;
    background: rgba(201,168,76,0.06) !important;
    border: 2px dashed rgba(201,168,76,0.5) !important;
    color: var(--gold-light, #f3da9c);
    transition: all 0.15s;
    text-align: center;
    padding: 12px;
}
.npc-add-monster-card:hover .npc-add-monster-inner {
    background: rgba(201,168,76,0.18) !important;
    border-color: var(--gold-light, #f3da9c) !important;
    transform: translateY(-2px);
}
.npc-add-monster-plus {
    font-family: 'Cinzel Decorative', serif;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--gold, #c9a84c);
    margin-bottom: 6px;
}
.npc-add-monster-label {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    color: var(--gold-light, #f3da9c);
    letter-spacing: 0.05em;
}

/* v0.32.8 — Preview de imagem no form de NPC + dica de Drive */
.mestre-form-help {
    color: rgba(232,216,184,0.55);
    font-size: 0.74rem;
    line-height: 1.4;
    font-style: italic;
    display: block;
    margin-top: 4px;
}
.mestre-form-help code {
    background: rgba(0,0,0,0.4);
    color: var(--gold-light, #f3da9c);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    font-style: normal;
}
.mestre-form-img-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    min-height: 0;
}
.mestre-form-img-preview:empty { display: none; }
.mestre-form-img-preview img {
    max-width: 180px;
    max-height: 180px;
    object-fit: contain;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 6px;
    padding: 4px;
}
.mestre-form-img-url {
    color: rgba(232,216,184,0.55);
    font-size: 0.7rem;
    word-break: break-all;
    max-width: 100%;
    text-align: center;
}
.mestre-form-img-error {
    background: rgba(255,107,107,0.1);
    color: #ff8e8e;
    border: 1px solid rgba(255,107,107,0.4);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    text-align: center;
}

/* v0.32.12+0.32.15 — Inputs dentro dos modais do mestre seguem tema escuro/dourado.
   Exclui inputs que ja tem CSS proprio (.dinheiro-input, .cadastrar-search,
   .auth-input) para nao sobrescrever layout customizado (ex: input de nivel
   com setas +/- ao lado). Os sub-modais customizados (paralelo, etc) ainda
   pegam essa regra geral. */
.mestrar-modal input[type="text"]:not(.dinheiro-input):not(.cadastrar-search):not(.auth-input),
.mestrar-modal input[type="number"]:not(.dinheiro-input):not(.cadastrar-search):not(.auth-input),
.mestrar-modal input[type="url"]:not(.dinheiro-input):not(.cadastrar-search):not(.auth-input),
.mestrar-modal input[type="search"]:not(.dinheiro-input):not(.cadastrar-search):not(.auth-input),
.mestrar-modal input[type="email"]:not(.dinheiro-input):not(.cadastrar-search):not(.auth-input),
.mestrar-modal select:not(.dinheiro-input):not(.cadastrar-search):not(.auth-input),
.mestrar-modal textarea:not(.dinheiro-input):not(.cadastrar-search):not(.auth-input) {
    background: rgba(0, 0, 0, 0.45);
    color: #f3da9c;
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 5px;
    padding: 7px 10px;
    font-family: 'Lora', serif;
    font-size: 0.92rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.mestrar-modal input:not(.dinheiro-input):not(.cadastrar-search):not(.auth-input):focus,
.mestrar-modal select:not(.dinheiro-input):not(.cadastrar-search):not(.auth-input):focus,
.mestrar-modal textarea:not(.dinheiro-input):not(.cadastrar-search):not(.auth-input):focus {
    outline: none;
    border-color: var(--gold-light, #f3da9c);
    box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.25);
}
.mestrar-modal textarea:not(.dinheiro-input):not(.cadastrar-search):not(.auth-input) {
    resize: vertical;
    min-height: 60px;
}
.mestrar-modal input::placeholder,
.mestrar-modal textarea::placeholder {
    color: rgba(232, 216, 184, 0.4);
    font-style: italic;
}

/* v0.32.11 — Bestiario Paralelo modal (mesmo visual do "+ Cadastrar" do Armazem) */
.bestiario-paralelo-modal {
    width: min(820px, 96vw) !important;
    max-height: 92vh;
    overflow: hidden auto;
}
.bestiario-paralelo-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 18px;
    padding: 0 18px 12px;
}
.bestiario-paralelo-imgcol {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bestiario-paralelo-fieldscol {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bp-img-preview-large {
    background: rgba(0,0,0,0.35);
    border: 1px dashed rgba(201,168,76,0.3);
    border-radius: 8px;
    padding: 8px;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.bp-img-preview-large img {
    max-width: 100%;
    max-height: 180px;
}
.bp-img-preview-large:empty::before {
    content: 'Cole uma URL acima para ver a previa';
    color: rgba(232,216,184,0.4);
    font-style: italic;
    font-size: 0.82rem;
    text-align: center;
}
.bp-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px;
}
.bp-label {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    color: rgba(232,216,184,0.75);
    letter-spacing: 0.04em;
}
.bp-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.bp-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.bestiario-paralelo-footer {
    border-top: 1px solid rgba(201,168,76,0.25);
    padding-top: 12px;
}
.cadastrar-habs-btn {
    width: 100%;
}

/* Responsivo */
@media (max-width: 768px) {
    .bestiario-paralelo-body {
        grid-template-columns: 1fr;
    }
    .bestiario-paralelo-imgcol {
        align-items: center;
    }
    .bp-img-preview-large {
        max-width: 220px;
    }
    .bp-row-3 {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile portrait: tudo empilhado */
@media (max-width: 600px) {
    .m-card {
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        padding: 8px 10px;
    }
    .m-card-img { grid-row: 1 / 4; width: 48px; height: 48px; }
    .m-card-info { grid-column: 2; grid-row: 1; }
    .m-card-fields {
        grid-column: 2;
        grid-row: 2;
        grid-template-columns: minmax(0, 1fr) 60px;
    }
    .m-card-actions {
        grid-column: 1 / 3;
        grid-row: 3;
        justify-content: flex-end;
        padding-top: 4px;
        border-top: 1px dashed rgba(201,168,76,0.15);
    }
    .m-card-nome { font-size: 0.88rem; }
}

/* Species Picker para NPC (estilo "+ do Armazem") */
.npc-pick-modal {
    width: min(95vw, 1100px) !important;
    max-height: 90vh !important;
}
.npc-pick-body {
    display: grid !important;
    grid-template-columns: 1.3fr 1fr;
    gap: 18px;
    flex-direction: row !important;
}
.npc-pick-left {
    display: flex; flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.npc-pick-right {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 8px;
    padding: 14px;
    display: flex; flex-direction: column;
    gap: 10px;
}
.npc-pick-search {
    width: 100%;
    box-sizing: border-box;
}
.npc-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 4px;
}
.npc-pick-card {
    background: linear-gradient(180deg, rgba(40,28,16,0.95), rgba(20,14,8,0.95));
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 6px;
    padding: 6px 8px;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
}
.npc-pick-card:hover {
    border-color: var(--gold, #c9a84c);
    transform: translateY(-2px);
}
.npc-pick-card.selected {
    border-color: var(--gold-light, #f3da9c);
    box-shadow: 0 0 12px rgba(201,168,76,0.4);
    background: linear-gradient(180deg, rgba(60,42,22,0.95), rgba(30,20,12,0.95));
}
.npc-pick-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
}
.npc-pick-num {
    position: absolute;
    top: 4px; right: 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    color: rgba(232,216,184,0.5);
    background: rgba(0,0,0,0.6);
    padding: 1px 5px;
    border-radius: 3px;
}
.npc-pick-info {
    margin-top: 4px;
}
.npc-pick-nome {
    display: block;
    color: var(--gold-light, #f3da9c);
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.npc-pick-tipos {
    display: flex; gap: 3px; justify-content: center; margin-top: 3px;
}
.npc-pick-pag {
    display: flex; justify-content: space-between; align-items: center;
    color: rgba(232,216,184,0.7);
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
}
.npc-pick-pag button {
    background: rgba(40,28,16,0.85);
    color: var(--gold-light, #f3da9c);
    border: 1px solid rgba(201,168,76,0.35);
    padding: 5px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
}
.npc-pick-pag button:hover:not(:disabled) {
    background: rgba(60,40,20,0.95);
}
.npc-pick-pag button:disabled { opacity: 0.4; cursor: not-allowed; }
.npc-pick-preview {
    text-align: center;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 6px;
    padding: 10px;
}
.npc-pick-preview-img {
    width: 100px; height: 100px;
    object-fit: contain;
    background: rgba(0,0,0,0.4);
    border-radius: 4px;
}
.npc-pick-preview-nome {
    font-family: 'Cinzel Decorative', serif;
    color: var(--gold-light, #f3da9c);
    font-size: 1.1rem;
    margin-top: 6px;
}
.npc-pick-preview-tipo {
    color: #a8d8e0;
    font-size: 0.85rem;
    margin: 4px 0;
}
.npc-pick-preview-stats {
    color: rgba(232,216,184,0.7);
    font-size: 0.85rem;
    font-family: 'Cinzel', serif;
}

/* Quest template cards (aba Quests do Painel do Mestre) */
.mestre-quest-tpl-card { padding: 0; }
.mestre-quest-tpl-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0,0,0,0.45);
    border-bottom: 1px solid rgba(201,168,76,0.18);
}
.mq-dif-tag {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 9px;
    border-radius: 4px;
    text-transform: uppercase;
}
.mq-dif-facil   { background: rgba(77,186,96,0.22);  color: #b5e8c0; border: 1px solid #4dba60; }
.mq-dif-media   { background: rgba(255,191,77,0.22); color: #ffd97a; border: 1px solid #d4a458; }
.mq-dif-dificil { background: rgba(212,114,212,0.22);color: #f0c0f0; border: 1px solid #d472d4; }
.mestre-quest-tpl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.78rem;
    color: rgba(232,216,184,0.85);
}
.mestre-quest-tpl-grid strong {
    color: var(--gold-light, #f3da9c);
    font-family: 'Cinzel', serif;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    text-transform: uppercase;
}
.mestre-quest-active-list {
    display: flex; flex-direction: column; gap: 4px;
}
.mestre-quest-active-row {
    display: grid;
    grid-template-columns: 90px 1fr 70px 90px;
    gap: 10px;
    align-items: center;
    padding: 6px 12px;
    background: rgba(60,42,22,0.35);
    border: 1px solid rgba(201,168,76,0.15);
    border-radius: 6px;
    font-size: 0.85rem;
}
.mestre-quest-active-dif {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
    padding: 2px 6px;
    border-radius: 4px;
}
.mestre-quest-active-prog {
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    text-align: center;
}
.mestre-quest-active-state {
    font-style: italic;
    color: rgba(232,216,184,0.7);
    text-align: right;
    font-size: 0.78rem;
}
.mestre-checkbox-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.mestre-checkbox-label input[type="checkbox"] {
    width: 18px; height: 18px;
    cursor: pointer;
}
.mestre-form-body code {
    background: rgba(0,0,0,0.5);
    color: var(--gold-light, #f3da9c);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.85em;
}
.mestre-quest-counters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 14px;
}
.mestre-quest-count {
    flex: 1 1 auto;
    min-width: 180px;
    padding: 8px 14px;
    border-radius: 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    border-width: 1px;
    border-style: solid;
}
.mestre-quest-count strong {
    font-size: 1.2rem;
    margin: 0 4px;
    font-family: 'Cinzel Decorative', serif;
}
.mestre-quest-count small {
    color: rgba(232,216,184,0.6);
    font-style: italic;
    margin-left: 4px;
}
.mestre-quest-warn {
    background: rgba(255,191,77,0.10);
    border-left: 3px solid #d4a458;
    padding: 8px 14px;
    border-radius: 0 6px 6px 0;
    color: #ffd97a;
    font-size: 0.85rem;
    margin: 8px 0 14px;
}
.mestre-quest-warn strong { color: #ffe1a0; }

.passe-season-overflow {
    color: #b5e8c0;
    font-style: italic;
    font-size: 0.85em;
    margin-left: 4px;
}

/* v0.34.0: Aba Passe — lista multi-passe + lapis editMode + slot vazio */
.mestre-passe-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.mestre-passe-list-actions {
    display: flex;
    gap: 8px;
}
.mestre-passe-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
/* v0.39.7: toolbar com filtro de mes */
.mestre-passe-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(201,168,76,0.18);
    border-radius: 8px;
    font-family: 'Cinzel', serif;
}
.mestre-passe-toolbar-label {
    font-size: 0.82rem;
    color: rgba(232,216,184,0.75);
    letter-spacing: 0.05em;
}
.mestre-passe-filtro-select {
    background: rgba(0,0,0,0.45);
    color: #f3da9c;
    border: 1px solid rgba(201,168,76,0.35);
    border-radius: 5px;
    padding: 5px 10px;
    font-family: 'Lora', serif;
    font-size: 0.88rem;
    cursor: pointer;
    min-width: 200px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.mestre-passe-filtro-select:hover {
    border-color: rgba(201,168,76,0.6);
}
.mestre-passe-filtro-select:focus {
    outline: none;
    border-color: var(--gold, #c9a84c);
    box-shadow: 0 0 0 2px rgba(201,168,76,0.2);
}
.mestre-passe-toolbar-info {
    margin-left: auto;
    font-size: 0.78rem;
    color: rgba(232,216,184,0.55);
    font-style: italic;
}
.mestre-passe-empty {
    padding: 18px;
    text-align: center;
    color: rgba(232,216,184,0.55);
    font-style: italic;
    background: rgba(0,0,0,0.25);
    border: 1px dashed rgba(201,168,76,0.25);
    border-radius: 8px;
}
.mestre-passe-row {
    display: grid;
    grid-template-columns: 1fr auto minmax(180px, auto);
    gap: 14px;
    align-items: center;
    background: rgba(0,0,0,0.32);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, transform 0.15s;
}
.mestre-passe-row:hover {
    border-color: rgba(201,168,76,0.5);
    background: rgba(0,0,0,0.4);
    transform: translateY(-1px);
}
.mestre-passe-row-mes {
    font-family: 'Cinzel Decorative', serif;
    font-size: 0.95rem;
    color: var(--gold-light, #f3da9c);
    margin-bottom: 2px;
}
.mestre-passe-row-nome {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    color: var(--parchment, #e8d8b8);
    margin-bottom: 4px;
}
.mestre-passe-row-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: rgba(232,216,184,0.68);
    font-family: 'Lora', serif;
}
.mestre-passe-row-meta strong {
    color: var(--gold-light, #f3da9c);
}
.mestre-passe-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: help;
}
.mestre-passe-status-pub {
    background: rgba(125, 240, 168, 0.12);
    color: #7df0a8;
    border: 1px solid rgba(125, 240, 168, 0.4);
}
.mestre-passe-status-draft {
    background: rgba(201,168,76,0.1);
    color: rgba(232,216,184,0.7);
    border: 1px solid rgba(201,168,76,0.3);
}
.mestre-passe-status-homol {
    background: rgba(125, 240, 168, 0.08);
    color: rgba(125, 240, 168, 0.9);
    border: 1px solid rgba(125, 240, 168, 0.3);
}
.mestre-passe-status-pending {
    background: rgba(255, 224, 102, 0.1);
    color: #ffe066;
    border: 1px solid rgba(255, 224, 102, 0.35);
}
.mestre-passe-status-rejected {
    background: rgba(200, 50, 60, 0.12);
    color: #ff8a8a;
    border: 1px solid rgba(200, 50, 60, 0.4);
}

/* v0.40.19: Modal generico (substituto de alert/confirm/prompt nativos).
   z-index 99999 garante que SEMPRE fica acima de qualquer outro modal ativo
   (passe-modal 12000, decision 13000, cockpit 13500, submodal 14000, etc).
   Comporta-se como um popup empilhado em cima de tudo. */
.alternart-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: alternart-modal-fade 0.15s ease-out;
}
@keyframes alternart-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.alternart-modal {
    position: relative;
    background: linear-gradient(135deg, var(--bg-dark), var(--bg-medium));
    border: 2px solid var(--gold-dark);
    border-radius: 12px;
    box-shadow: var(--shadow-strong), var(--shadow-glow);
    width: min(440px, 92vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.alternart-modal.is-error  { border-color: rgba(200,50,60,0.6); }
.alternart-modal.is-success { border-color: rgba(125,240,168,0.55); }
.alternart-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--gold-dark);
    background: rgba(20,15,10,0.85);
    color: var(--gold-light);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.alternart-modal-close:hover { color: #fff; border-color: var(--gold); }
.alternart-modal-head {
    padding: 18px 22px 0;
}
.alternart-modal-title {
    margin: 0 0 6px 0;
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    font-size: 1.05rem;
}
.alternart-modal-body {
    padding: 14px 22px 4px;
    flex: 1;
    overflow-y: auto;
}
.alternart-modal-msg {
    color: rgba(232,216,184,0.92);
    font-family: 'Lora', serif;
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: normal;
}
.alternart-modal-input {
    width: 100%;
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(20,15,10,0.6);
    color: var(--parchment, #e8d8b8);
    border: 1.5px solid rgba(201,168,76,0.45);
    border-radius: 6px;
    font-family: 'Lora', serif;
    font-size: 0.95rem;
    box-sizing: border-box;
}
.alternart-modal-input:focus {
    outline: none;
    border-color: var(--gold, #d4a458);
}
.alternart-modal-footer {
    padding: 14px 22px 18px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.alternart-modal-btn {
    padding: 9px 18px;
    border-radius: 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.12s ease;
}
.alternart-modal-btn.primary {
    background: linear-gradient(135deg, var(--gold, #d4a458), var(--gold-dark, #a37e3a));
    color: #1a1208;
    border: 1.5px solid var(--gold-light, #f3da9c);
}
.alternart-modal-btn.primary:hover { transform: translateY(-1px); }
.alternart-modal-btn.secondary {
    background: transparent;
    border: 1.5px solid rgba(201,168,76,0.45);
    color: rgba(232,216,184,0.85);
}
.alternart-modal-btn.secondary:hover { border-color: var(--gold, #d4a458); }

/* v0.39: Homologacao acontece DENTRO do modal do passe (passe.js). O CSS
   antigo do modal dedicado (.mestre-homol-*) foi removido. Os estilos abaixo
   sao do icone de homologar nos cards do passe e dos states de aprovacao. */

/* v0.39.5: Icone de RESULTADO no canto ESQUERDO do card. Mostra ao dono
   (e ao visualizar) o que foi aprovado/reprovado depois da homologacao. */
.passe-homol-result-icon {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 4;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
    transition: transform 0.12s ease;
}
.passe-homol-result-icon:hover { transform: scale(1.12); }
.passe-homol-result-icon.is-aprovado {
    background: rgba(125, 240, 168, 0.92);
    border-color: rgba(125, 240, 168, 1);
    color: #062a17;
}
.passe-homol-result-icon.is-reprovado {
    background: rgba(200, 50, 60, 0.92);
    border-color: rgba(255, 100, 110, 1);
    color: #fff;
    animation: passe-homol-result-pulse 1.6s ease-in-out infinite;
}
@keyframes passe-homol-result-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 100, 110, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 100, 110, 0); }
}

/* Botao de homologar nos cards (substitui o lapis em homologacaoMode) */
.passe-homol-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 4;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgba(201,168,76,0.55);
    background: rgba(20,15,10,0.85);
    color: #f3da9c;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.passe-homol-icon:hover {
    transform: scale(1.12);
    border-color: var(--gold, #d4a458);
}
.passe-homol-icon.is-aprovado {
    background: rgba(125, 240, 168, 0.92);
    border-color: rgba(125, 240, 168, 1);
    color: #062a17;
}
.passe-homol-icon.is-reprovado {
    background: rgba(200, 50, 60, 0.92);
    border-color: rgba(255, 100, 110, 1);
    color: #fff;
}
.passe-homol-icon.is-pendente {
    background: rgba(40, 30, 18, 0.92);
}

/* Estados visuais do card durante homologacao (border + leve tint) */
.passe-tier-card.tier-homol-aprovado,
.passe-mini-card.tier-homol-aprovado {
    box-shadow: inset 0 0 0 2px rgba(125, 240, 168, 0.7), 0 0 12px rgba(125,240,168,0.18);
}
.passe-tier-card.tier-homol-reprovado,
.passe-mini-card.tier-homol-reprovado {
    box-shadow: inset 0 0 0 2px rgba(255, 90, 100, 0.75), 0 0 12px rgba(200,50,60,0.22);
}
.passe-tier-card.tier-homol-pendente,
.passe-mini-card.tier-homol-pendente {
    box-shadow: inset 0 0 0 2px rgba(255, 224, 102, 0.45);
}

/* Botao "Concluir Homologacao" no header do passe */
.passe-homol-finish-btn {
    background: linear-gradient(135deg, var(--gold, #d4a458), var(--gold-dark, #a37e3a));
    color: #1a1208;
    border: 1.5px solid var(--gold-light, #f3da9c);
    border-radius: 999px;
    padding: 6px 14px;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    margin-right: 8px;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.passe-homol-finish-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255, 224, 102, 0.35);
}
.passe-homol-finish-btn:disabled {
    background: linear-gradient(135deg, rgba(120,100,70,0.4), rgba(80,65,40,0.4));
    color: rgba(232,216,184,0.45);
    border-color: rgba(201,168,76,0.3);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Modal de decisao por item (Aprovar / Reprovar com justificativa inline) */
.passe-homol-decision-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 13000; /* acima do passe-modal-bd */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.passe-homol-decision-modal {
    position: relative;
    background: linear-gradient(135deg, var(--bg-dark), var(--bg-medium));
    border: 2px solid var(--gold-dark);
    border-radius: 12px;
    box-shadow: var(--shadow-strong), var(--shadow-glow);
    width: min(480px, 95vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.passe-homol-decision-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--gold-dark);
    background: rgba(20,15,10,0.85);
    color: var(--gold-light);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.passe-homol-decision-close:hover {
    border-color: var(--gold);
    color: #fff;
}
.passe-homol-decision-header {
    padding: 22px 24px 12px;
    border-bottom: 1px solid rgba(201,168,76,0.2);
}
.passe-homol-decision-tier {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    color: rgba(232,216,184,0.65);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.passe-homol-decision-nome {
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    margin: 4px 0 0 0;
    font-size: 1.2rem;
}
.passe-homol-decision-body {
    padding: 16px 24px;
    flex: 1;
    overflow-y: auto;
}
.passe-homol-decision-prompt {
    margin: 0 0 8px 0;
    color: rgba(232,216,184,0.85);
    font-size: 0.9rem;
}
.passe-homol-decision-buttons {
    display: flex;
    gap: 10px;
}
.passe-homol-decision-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    cursor: pointer;
    border: 2px solid;
    background: rgba(40, 30, 20, 0.5);
    transition: transform 0.12s ease, background 0.12s ease;
}
.passe-homol-decision-btn.aprovar {
    border-color: rgba(125, 240, 168, 0.5);
    color: rgba(125, 240, 168, 0.9);
}
.passe-homol-decision-btn.aprovar.is-active {
    background: rgba(125, 240, 168, 0.2);
    border-color: rgba(125, 240, 168, 1);
    color: #c0f5d4;
}
.passe-homol-decision-btn.reprovar {
    border-color: rgba(255, 100, 110, 0.5);
    color: rgba(255, 130, 140, 0.9);
}
.passe-homol-decision-btn.reprovar.is-active {
    background: rgba(200, 50, 60, 0.2);
    border-color: rgba(255, 100, 110, 1);
    color: #ffb0b8;
}
.passe-homol-decision-btn:hover {
    transform: translateY(-1px);
}
.passe-homol-decision-just {
    margin-top: 14px;
}
.passe-homol-decision-just-label {
    display: block;
    color: rgba(232,216,184,0.75);
    font-size: 0.85rem;
    margin-bottom: 6px;
}
.passe-homol-decision-just-input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(20,15,10,0.6);
    color: var(--parchment, #e8d8b8);
    border: 1.5px solid rgba(201,168,76,0.35);
    border-radius: 6px;
    font-family: 'Lora', serif;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 80px;
    box-sizing: border-box;
}
.passe-homol-decision-just-input:focus {
    outline: none;
    border-color: var(--gold, #d4a458);
}
.passe-homol-decision-footer {
    padding: 14px 24px;
    border-top: 1px solid rgba(201,168,76,0.2);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.passe-homol-decision-action {
    padding: 9px 18px;
    border-radius: 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.12s ease;
}
.passe-homol-decision-action.primary {
    background: linear-gradient(135deg, var(--gold, #d4a458), var(--gold-dark, #a37e3a));
    color: #1a1208;
    border: 1.5px solid var(--gold-light, #f3da9c);
}
.passe-homol-decision-action.primary:not(:disabled):hover {
    transform: translateY(-1px);
}
.passe-homol-decision-action.primary:disabled {
    background: rgba(80,65,40,0.4);
    color: rgba(232,216,184,0.4);
    cursor: not-allowed;
    opacity: 0.6;
}
.passe-homol-decision-action.secondary {
    background: transparent;
    border: 1.5px solid rgba(201,168,76,0.45);
    color: rgba(232,216,184,0.8);
}
.passe-homol-decision-action.secondary:hover {
    border-color: var(--gold, #d4a458);
}
.mestre-passe-ativo-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(255,224,102,0.3), rgba(212,164,88,0.3));
    color: #ffe066;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    border: 1px solid rgba(255,224,102,0.55);
    font-family: 'Cinzel', serif;
}
.mestre-passe-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
}
.mestre-passe-row-actions-icons {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.mestre-action-btn--icon {
    position: relative;
    width: 34px !important;
    height: 34px;
    padding: 0 !important;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
    flex-shrink: 0;
    flex-grow: 0;
}
.mestre-action-btn--primary-flow {
    position: relative;
    padding: 8px 14px;
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.mestre-action-btn--success {
    background: linear-gradient(180deg, #4cb86b 0%, #2a7a44 100%);
    border-color: #6fd58c;
    color: #0c1a10;
}
.mestre-action-btn--success:hover:not(:disabled) {
    filter: brightness(1.12);
}

/* Tooltip customizado: ativa em qualquer elemento com .mestre-tooltip e [data-tooltip] */
.mestre-tooltip { position: relative; }
.mestre-tooltip::after,
.mestre-tooltip::before {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease-out, transform 0.12s ease-out;
    z-index: 100;
}
.mestre-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(20, 12, 6, 0.96);
    color: #f3da9c;
    border: 1px solid rgba(201, 168, 76, 0.55);
    padding: 6px 10px;
    border-radius: 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
    text-transform: none;
    font-weight: 500;
}
.mestre-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 6px solid transparent;
    border-top-color: rgba(201, 168, 76, 0.55);
}
.mestre-tooltip:hover::after,
.mestre-tooltip:hover::before,
.mestre-tooltip:focus-visible::after,
.mestre-tooltip:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0.25s;
}
.mestre-action-btn-danger {
    background: linear-gradient(180deg, rgba(200,50,60,0.4), rgba(120,20,30,0.4));
    border-color: rgba(200,50,60,0.6);
    color: #ffd0d4;
}
.mestre-action-btn-danger:hover {
    background: linear-gradient(180deg, rgba(200,50,60,0.55), rgba(120,20,30,0.55));
    border-color: rgba(200,50,60,0.85);
}

/* Linha de passe responsiva: empilha info/status em cima e acoes embaixo */
@media (max-width: 720px) {
    .mestre-passe-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "main status"
            "actions actions";
        row-gap: 10px;
    }
    .mestre-passe-row-main { grid-area: main; }
    .mestre-passe-row-status { grid-area: status; }
    .mestre-passe-row-actions {
        grid-area: actions;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

/* v0.34.0: lapis de edicao em editMode (passe.js) */
.passe-edit-pencil {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,224,102,0.85), rgba(201,168,76,0.85));
    color: #1a120a;
    border: 2px solid rgba(0,0,0,0.55);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45);
    transition: transform 0.15s, box-shadow 0.15s;
}
.passe-edit-pencil:hover {
    transform: scale(1.12);
    box-shadow: 0 3px 10px rgba(255,224,102,0.65);
}
.passe-tier-card { position: relative; }
.passe-mini-card { position: relative; }

.tier-empty,
.mini-empty {
    opacity: 0.55;
    background: rgba(0,0,0,0.45);
    border-style: dashed !important;
    /* v0.34.11/0.34.25/0.34.29: dimensoes do slot vazio batem com filled (220px) */
    height: 220px;
    width: 100%;
    box-sizing: border-box;
}
.tier-editable {
    cursor: pointer;
}
.tier-editable:hover { opacity: 0.85; }

/* v0.34.2: em editMode todos os cards ficam clicaveis (card inteiro) */
.passe-edit-mode .passe-tier-card,
.passe-edit-mode .passe-mini-card {
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.passe-edit-mode .passe-tier-card:hover,
.passe-edit-mode .passe-mini-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255,224,102,0.35);
    border-color: rgba(255,224,102,0.6);
}
.passe-edit-mode .tier-empty .tier-img-fallback,
.passe-edit-mode .mini-empty {
    font-size: 2.2rem;
    color: rgba(255,224,102,0.8);
}

/* v0.34.3: overlays de Config e Recompensa precisam ficar ACIMA do
   passe-modal-backdrop (z-index 11550). O .mestre-form-overlay padrao usa
   9600, o que faz o modal aparecer atras do passe em editMode. */
.passe-config-overlay,
.passe-reward-overlay {
    z-index: 12100 !important;
}

/* v0.34.6: input de kills por etapa (abaixo do "Etapa N"). Largura fixa
   pra nao engordar a coluna do card. Lapis aparece so em editMode+custom. */
.passe-tier-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.passe-tier-label-text {
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1;
}
.passe-tier-kills-row {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    justify-content: center;
}
.passe-tier-kills-input {
    width: 46px;
    text-align: center;
    background: rgba(0,0,0,0.45);
    color: var(--gold-light, #f3da9c);
    border: 1px solid rgba(201,168,76,0.28);
    border-radius: 4px;
    padding: 1px 3px;
    font-family: 'Lora', serif;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: default;
    /* esconde spinners no readonly state */
    -moz-appearance: textfield;
    appearance: textfield;
}
.passe-tier-kills-input::-webkit-inner-spin-button,
.passe-tier-kills-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.passe-tier-kills-input[readonly] {
    background: rgba(0,0,0,0.32);
    color: rgba(232,216,184,0.78);
    cursor: default;
    user-select: none;
}
.passe-tier-kills-input.passe-tier-kills-input-active,
.passe-tier-kills-input:not([readonly]) {
    background: rgba(255,224,102,0.16);
    color: #fffbe0;
    border-color: rgba(255,224,102,0.85);
    box-shadow: 0 0 0 2px rgba(255,224,102,0.25);
    cursor: text;
    user-select: text;
    /* v0.34.13: tira spinners (setinhas) tambem no estado editavel */
    -moz-appearance: textfield;
    appearance: textfield;
}
.passe-tier-kills-input:not([readonly])::-webkit-inner-spin-button,
.passe-tier-kills-input:not([readonly])::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.passe-kills-pencil {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,224,102,0.85), rgba(201,168,76,0.85));
    color: #1a120a;
    border: 1px solid rgba(0,0,0,0.55);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s, box-shadow 0.12s;
    flex-shrink: 0;
}
.passe-kills-pencil:hover {
    transform: scale(1.12);
    box-shadow: 0 2px 6px rgba(255,224,102,0.6);
}

/* v0.34.1: row com 2 selects (mes + ano) para Mes de validade */
.passe-mes-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.passe-mes-month-sel { flex: 2 1 auto; }
.passe-mes-year-sel  { flex: 1 1 auto; min-width: 92px; }

/* v0.34.24: divisor + row de layout dentro do modal de Config do passe */
.passe-config-divider {
    border: none;
    border-top: 1px dashed rgba(201, 168, 76, 0.3);
    margin: 8px 0 4px;
}

/* v0.87.1: modal de Config do passe — layout 2-col (form + imagem do wallpaper).
   Modal mais largo (820px) pra dar respiro; campos empilhados verticalmente
   pra evitar espremimento. */
.passe-config-modal {
    width: min(820px, 96vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.passe-config-grid {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 22px;
    align-items: start;
}
@media (max-width: 680px) {
    .passe-config-grid { grid-template-columns: 1fr; }
}
.passe-config-form-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.passe-config-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    color: var(--gold-light, #f3da9c);
    font-size: 0.88rem;
}
.passe-config-field > input,
.passe-config-field > select,
.passe-config-field > .passe-mes-row {
    width: 100%;
}
.passe-config-img-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.passe-config-img-col .item-field-label {
    align-self: flex-start;
}
/* Wrap do wallpaper usa o componente .item-img-wrap mas formato landscape. */
.passe-config-wp-wrap {
    width: 220px;
    height: 140px;
}
.passe-config-img-col .mestre-form-help {
    text-align: center;
    max-width: 220px;
}
/* Tipo em foco usa .bf-tipo-trigger (mesmo do editor de monstro). Garante
   que cabe na coluna lateral mesmo quando reuso fora do form de bestiario. */
.pc-tipo-label .bf-tipo-trigger {
    width: 100%;
}
/* v0.87.1: popup do picker no contexto do modal de Config (overlay z-index
   12100) precisa ficar acima — manda pro topo abaixo so do game-modal (12200). */
.bf-tipo-popup.bf-tipo-popup--high {
    z-index: 12150;
}

.passe-config-layout-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(201, 168, 76, 0.22);
    border-radius: 6px;
}
.passe-config-layout-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.passe-config-layout-label {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    color: rgba(232, 216, 184, 0.78);
    letter-spacing: 0.08em;
}
.passe-config-layout-current {
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    color: var(--gold-light, #f3da9c);
    font-weight: 700;
}

/* v0.34.17: REDESIGN do modal de Editar Recompensa
   Hero banner + 2-col grid + live mini-card preview.
   Mantem paleta gold/parchment do app. */
.modal-reward-wide { width: min(860px, 96vw); }
.passe-reward-modal {
    /* base herda de .mestre-form-modal */
    overflow: hidden;
}

/* HEADER com ornamentos centralizado */
.passe-reward-header {
    justify-content: center;
    position: relative;
    background: linear-gradient(180deg, rgba(201,168,76,0.18), rgba(201,168,76,0.04));
}
.passe-reward-header .mestre-form-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}
.passe-reward-title {
    margin: 0;
    color: var(--gold-light, #f3da9c);
    font-family: 'Cinzel', serif;
    letter-spacing: 0.12em;
    font-size: 1rem;
    display: inline-flex;
    gap: 8px;
    align-items: center;
}
.passe-reward-title-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-light, #f3da9c), var(--gold-dark, #8b6914));
    color: #1a120a;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}

/* HERO BANNER */
.passe-reward-hero {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(40,30,18,0.85), rgba(15,10,6,0.95));
    border-bottom: 1px solid rgba(201,168,76,0.3);
}
.passe-reward-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.passe-reward-hero-placeholder {
    position: absolute;
    inset: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(232,216,184,0.55);
    border: 2px dashed rgba(201,168,76,0.3);
    border-radius: 8px;
    font-family: 'Lora', serif;
    font-size: 0.85rem;
    font-style: italic;
}
.passe-reward-hero-placeholder-icon {
    font-size: 2.4rem;
    filter: grayscale(0.4);
}
.passe-reward-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.25) 50%, transparent 80%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px 20px;
    gap: 6px;
    pointer-events: none;
}
.passe-reward-hero-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.passe-reward-tier-chip,
.passe-reward-lane-chip {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 700;
    line-height: 1.4;
}
.passe-reward-tier-chip {
    background: rgba(0,0,0,0.55);
    color: var(--gold-light, #f3da9c);
    border: 1px solid var(--gold-dark, #8b6914);
}
.passe-reward-lane-chip.lane-free {
    background: linear-gradient(135deg, rgba(155,197,85,0.9), rgba(77,186,96,0.9));
    color: #0a1a0a;
    border: 1px solid rgba(0,0,0,0.4);
}
.passe-reward-lane-chip.lane-premium {
    background: linear-gradient(135deg, rgba(255,224,102,0.9), rgba(212,164,88,0.9));
    color: #1a120a;
    border: 1px solid rgba(0,0,0,0.4);
}
.passe-reward-hero-name {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,0.85);
    line-height: 1.1;
    word-break: break-word;
}

/* GRID 2-COL no body */
.passe-reward-body {
    padding: 0 !important;
    overflow-x: hidden;
}
.passe-reward-grid {
    display: grid;
    /* v0.34.25: coluna direita maior pra acomodar o mini card 160px */
    grid-template-columns: 1fr 260px;
    gap: 0;
    align-items: stretch;
}
.passe-reward-form-col {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-right: 1px solid rgba(201,168,76,0.2);
    min-width: 0;
}
.passe-reward-preview-col {
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,0.22);
}
.passe-reward-preview-label {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--gold-dark, #8b6914);
    text-transform: uppercase;
    text-align: center;
    width: 100%;
}
.passe-reward-preview-card-wrap {
    width: 130px;
}
.passe-reward-preview-card-wrap .passe-tier-card {
    width: 100%;
    /* v0.34.25/0.34.29: mini card preview espelha card real (220px) */
    height: 220px;
    cursor: default;
}
.passe-reward-preview-card-wrap .tier-claim-btn[disabled] {
    cursor: default;
    opacity: 1;
}
/* v0.34.18: nome no mini card preview centralizado (mesma do card real) */
.passe-reward-preview-card-wrap .tier-name {
    text-align: center;
    width: 100%;
}
.passe-reward-preview-hint {
    font-size: 0.72rem;
    color: rgba(232,216,184,0.6);
    text-align: center;
    font-style: italic;
    line-height: 1.4;
    max-width: 200px;
}

/* v0.34.18: label do campo (texto + asterisco) na mesma linha
   (label e flex-column, entao precisamos agrupar o texto+span num span) */
.passe-reward-field-label {
    display: inline-block;
    font-size: 0.85rem;
    color: rgba(232,216,184,0.85);
    line-height: 1.2;
}

/* ACTIONS reorganizadas (Remover esquerda, Cancelar+Salvar direita) */
.passe-reward-actions {
    justify-content: space-between !important;
}
.passe-reward-actions-left,
.passe-reward-actions-right {
    display: flex;
    gap: 10px;
}
.passe-reward-actions-left:empty {
    /* mantem o space-between mesmo sem botao Remover (criar novo) */
    flex: 0 0 auto;
}

/* Responsividade: em telas estreitas o grid colapsa pra 1 coluna */
@media (max-width: 720px) {
    .passe-reward-grid {
        grid-template-columns: 1fr;
    }
    .passe-reward-form-col {
        border-right: none;
        border-bottom: 1px solid rgba(201,168,76,0.2);
    }
    .passe-reward-hero {
        height: 160px;
    }
    .passe-reward-hero-name {
        font-size: 1.2rem;
    }
}

/* v0.34.0: meta info em modal de recompensa */
.mestre-passe-reward-meta {
    margin-left: 8px;
    font-size: 0.72rem;
    color: rgba(232,216,184,0.6);
    font-family: 'Lora', serif;
    letter-spacing: 0.04em;
}

/* Editor de etapas do passe (aba Passe do Painel do Mestre) */
.mestre-passe-tier-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 480px;
    overflow-y: auto;
    padding-right: 6px;
}
.mestre-passe-tier-row {
    display: grid;
    grid-template-columns: 40px 1fr 1.2fr;
    gap: 10px;
    align-items: center;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 8px;
    padding: 8px 12px;
}
.mestre-passe-tier-num {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.4rem;
    color: var(--gold-light, #f3da9c);
    text-align: center;
    background: rgba(201,168,76,0.15);
    border-radius: 6px;
    padding: 6px 0;
}
.mestre-passe-tier-side {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mestre-passe-tier-side strong {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: rgba(232,216,184,0.7);
    text-transform: uppercase;
}
.mestre-passe-tier-side input {
    background: rgba(0,0,0,0.45);
    color: #f3da9c;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: 'Lora', serif;
    font-size: 0.85rem;
}
.mestre-passe-tier-side input:focus {
    outline: none;
    border-color: var(--gold, #c9a84c);
}
.mestre-passe-tier-side input.t-free-icon,
.mestre-passe-tier-side input.t-prem-icon,
.mestre-passe-tier-side input.t-prem-custo {
    font-family: 'Cinzel', monospace;
    font-size: 0.78rem;
}

/* Settings modal (gear button no header do Painel do Mestre) */
.mestre-painel-settings {
    position: absolute;
    right: 56px;
    top: 12px;
    width: 32px; height: 32px;
    background: transparent;
    color: var(--gold-light, #f3da9c);
    border: 1px solid rgba(201,168,76,0.35);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.05rem;
    transition: background 0.15s, transform 0.3s;
}
.mestre-painel-settings:hover {
    background: rgba(201,168,76,0.18);
    transform: rotate(45deg);
}
.mestre-settings-modal {
    width: min(720px, 92vw);
    max-height: 88vh;
}
.mestre-settings-section-title {
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    letter-spacing: 0.1em;
    margin: 18px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px dashed rgba(201,168,76,0.25);
    font-size: 0.95rem;
}
.mestre-settings-section-title-danger {
    color: #ff8e8e;
    border-bottom-color: rgba(255,142,142,0.25);
}
.mestre-tipos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px;
    margin: 8px 0;
}
.mestre-tipo-chk {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    color: rgba(232,216,184,0.7);
    transition: all 0.15s;
}
.mestre-tipo-chk:hover { background: rgba(60,42,22,0.85); }
.mestre-tipo-chk-on {
    background: rgba(201,168,76,0.18);
    color: var(--gold-light, #f3da9c);
    border-color: var(--gold, #c9a84c);
}
.mestre-tipo-chk input[type="checkbox"] {
    width: 14px; height: 14px; cursor: pointer;
}
.mestre-tipos-actions, .mestre-export-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0;
}
.mestre-export-area {
    width: 100%;
    background: rgba(0,0,0,0.5);
    color: #c5e8a8;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 6px;
    padding: 8px 12px;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    resize: vertical;
    margin: 6px 0;
}
.mestre-export-area.hidden { display: none; }
.mestre-action-btn-danger {
    background: linear-gradient(180deg, #c84c4c 0%, #6e2424 100%);
    color: #fff;
    border: 1px solid #d86666;
}
.mestre-action-btn-danger:hover:not(:disabled) {
    filter: brightness(1.15);
}

/* Dashboard (aba Dashboard do Painel do Mestre) */
.mestre-dashboard h3.mestre-section-title { margin-top: 18px; }
.mestre-dashboard h3.mestre-section-title:first-child { margin-top: 0; }
.dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.dash-kpi {
    background: linear-gradient(180deg, rgba(40,28,16,0.95), rgba(20,14,8,0.95));
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
    transition: border-color 0.15s, transform 0.15s;
}
.dash-kpi:hover {
    border-color: var(--gold, #c9a84c);
    transform: translateY(-2px);
}
.dash-kpi-icon {
    font-size: 1.6rem;
    opacity: 0.85;
    margin-bottom: 4px;
}
.dash-kpi-num {
    font-family: 'Cinzel Decorative', serif;
    font-size: 2.2rem;
    color: var(--gold-light, #f3da9c);
    line-height: 1;
    margin-bottom: 4px;
}
.dash-kpi-num small {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: rgba(232,216,184,0.55);
}
.dash-kpi-label {
    font-family: 'Cinzel', serif;
    color: #e8d8b8;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.dash-kpi-sub {
    color: rgba(232,216,184,0.55);
    font-size: 0.74rem;
    font-style: italic;
    margin-top: 4px;
}

/* Passe card */
.dash-passe-card {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.dash-passe-info { flex: 0 0 auto; min-width: 180px; }
.dash-passe-name {
    font-family: 'Cinzel Decorative', serif;
    color: var(--gold-light, #f3da9c);
    font-size: 1.1rem;
    letter-spacing: 0.08em;
}
.dash-passe-tipo {
    color: rgba(232,216,184,0.7);
    font-size: 0.85rem;
    margin-top: 4px;
}
.dash-passe-tipo strong { color: var(--gold, #c9a84c); text-transform: uppercase; }
.dash-passe-bar-wrap { flex: 1 1 200px; }
.dash-passe-bar {
    position: relative;
    height: 24px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(201,168,76,0.35);
    border-radius: 12px;
    overflow: hidden;
}
.dash-passe-fill {
    height: 100%;
    background: linear-gradient(90deg, #c9a84c, #f3da9c);
    transition: width 0.5s ease;
    box-shadow: 0 0 12px rgba(201,168,76,0.5);
}
.dash-passe-num {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.95);
    letter-spacing: 0.05em;
}
.dash-passe-overflow {
    color: #b5e8c0;
    font-style: italic;
    text-align: right;
    margin-top: 4px;
    font-size: 0.85rem;
}

/* Quest state row */
.dash-quest-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}
.dash-quest-state {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 8px;
    padding: 14px 18px;
    text-align: center;
}
.dash-quest-andamento { border-color: rgba(255,191,77,0.4); }
.dash-quest-completa  { border-color: rgba(94,192,216,0.4); }
.dash-quest-resgatada { border-color: rgba(77,186,96,0.4); }
.dash-quest-num {
    display: block;
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.8rem;
    color: var(--gold-light, #f3da9c);
}
.dash-quest-label {
    color: rgba(232,216,184,0.7);
    font-size: 0.78rem;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dash-quest-difs {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 10px;
}
.dash-dif {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(201,168,76,0.25);
    color: var(--gold-light, #f3da9c);
    padding: 6px 14px;
    border-radius: 999px;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
}

/* Bar list (distribuicao de tipos) */
.dash-bar-list {
    display: flex; flex-direction: column; gap: 6px;
}
.dash-bar-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    align-items: center;
}
.dash-bar-label {
    font-family: 'Cinzel', serif;
    color: rgba(232,216,184,0.85);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.dash-bar-track {
    position: relative;
    height: 18px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 9px;
    overflow: hidden;
}
.dash-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #8d6f24, #c9a84c);
    transition: width 0.4s ease;
}
.dash-bar-num {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; padding: 0 12px;
    font-family: 'Cinzel', serif;
    color: #fff;
    font-size: 0.78rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.85);
}

/* Editor de Habilidades (aba Habilidades do Painel do Mestre) */
.hab-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}
.hab-search-input, .hab-filter-cat, .hab-filter-tipo {
    flex: 1 1 auto;
    min-width: 150px;
    background: rgba(0,0,0,0.45);
    color: #f3da9c;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 5px;
    padding: 6px 10px;
    font-family: 'Lora', serif;
    font-size: 0.88rem;
}
.hab-search-input:focus, .hab-filter-cat:focus, .hab-filter-tipo:focus {
    outline: none;
    border-color: var(--gold, #c9a84c);
}
.hab-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    align-items: stretch;
}
/* v0.41.13: card de habilidade reformulado.
   - Centralizado, com X no canto superior direito e olhinho no canto inferior esquerdo.
   - Nome com fit-text (clamp), categoria+efeito centralizado abaixo, stats em linha.
   - Click no card inteiro abre edição. */
.hab-card {
    background: linear-gradient(180deg, rgba(40,28,16,0.95), rgba(20,14,8,0.95));
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 8px;
    padding: 10px 12px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    min-width: 0;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
}
.hab-card:hover {
    border-color: var(--gold, #c9a84c);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(201,168,76,0.18);
}
@keyframes habHoloShift {
    0%   { background-position: 0% 50%,   0 0; }
    100% { background-position: 200% 50%, 0 0; }
}
/* Habilidade exclusiva: fundo "Foil dourado metálico" (faixa de brilho diagonal). */
.hab-card.hab-card-exclusiva {
    background:
        linear-gradient(135deg, transparent 30%, rgba(201,168,76,0.24) 50%, transparent 70%),
        linear-gradient(180deg, rgba(46,34,16,0.96), rgba(22,16,7,0.96));
}
/* Reservado p/ futuros "cards personalizados / habilidades especiais":
   fundo "Holográfico iridescente". Ainda NAO aplicado — ativar quando a feature
   de cards personalizados / habilidades especiais entrar. */
.hab-card.hab-card-especial {
    background:
        linear-gradient(115deg,
            rgba(255,0,128,0.20), rgba(0,229,255,0.20) 25%,
            rgba(0,255,140,0.20) 50%, rgba(255,214,0,0.20) 75%, rgba(255,0,128,0.20)),
        linear-gradient(180deg, rgba(26,20,28,0.96), rgba(12,10,16,0.97));
    background-size: 300% 300%, 100% 100%;
    animation: habHoloShift 8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .hab-card.hab-card-especial { animation: none; }
}
/* Form de habilidade — bloco de monstros âncora da exclusiva. */
.hab-exclusiva-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.hab-exclusiva-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(201,168,76,0.14);
    border: 1px solid rgba(201,168,76,0.4);
    border-radius: 14px;
    padding: 3px 6px 3px 4px;
    font-size: 0.8rem;
    color: var(--text, #e8d8b8);
}
/* v0.94.x: chip mostra a imagem pequena do monstro ancorado + nome ao lado. */
.hab-exclusiva-chip-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.18);
}
.hab-exclusiva-chip-img-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.hab-exclusiva-chip-nome { white-space: nowrap; }
.hab-exclusiva-chip-x {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
    opacity: 0.7;
}
.hab-exclusiva-chip-x:hover { opacity: 1; color: #e88; }
/* v0.41.14: ícone de tipo agora fica em linha com o nome (à esquerda). */
/* v0.41.16: padding-right reserva ~30px pro ícone de X / detalhar no canto
   sup. direito — evita que nomes longos sobreponham (e bloqueiem) o click
   target do botão absoluto. */
.hab-card-nome-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    padding-right: 30px;
    box-sizing: border-box;
}
.hab-card-tipo-icon {
    width: 22px; height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}
.hab-card-tipo-neutro {
    width: 22px; height: 22px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(232,216,184,0.5);
    font-size: 0.95rem;
    line-height: 1;
    flex-shrink: 0;
}
.hab-card-nome {
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    /* v0.41.14: font-size é ajustado dinamicamente por fitHabNomeAll() — vai
       de 15px até 7px, garantindo que o nome inteiro cabe em 1 linha.
       flex: 1 + min-width: 0 permite o flex container medir e cortar. */
    font-size: 15px;
    line-height: 1.15;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
}
.hab-card-meta {
    color: rgba(232,216,184,0.7);
    font-size: 0.72rem;
    text-align: center;
    width: 100%;
    /* nowrap: forca uma linha so -> o fit-text (JS) encolhe a fonte pra caber,
       em vez de quebrar em 2 linhas (ex.: "Magica · Debuff"). */
    white-space: nowrap;
    overflow: hidden;
}
/* v0.41.14: Poder e Custo cada um ocupa a linha inteira. Label esticada
   à esquerda, valor à direita. */
.hab-card-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    color: rgba(232,216,184,0.85);
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    margin-top: 4px;
}
.hab-card-stat {
    background: rgba(0,0,0,0.3);
    padding: 3px 8px;
    border-radius: 3px;
    border: 1px solid rgba(201,168,76,0.2);
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px;
    width: 100%;
}
.hab-card-stat-label {
    text-align: left;
    white-space: nowrap;
    /* sem flex:1/overflow/ellipsis: o label nao corta mais com "..."; o fit-text
       no .hab-card-stat encolhe label+value juntos pra caber no card. */
}
.hab-card-stat-value {
    color: var(--gold-light, #f3da9c);
    font-weight: 600;
    flex-shrink: 0;
}
/* v0.46.x: linha de efetividade no final do card (após o custo).
   "Super efetivo" / "Pouco efetivo" / "Nada efetivo" — cor vem das classes
   .matchup-vantagem / .matchup-desvantagem / .matchup-imune (já definidas
   no bloco de matchup). Neutro/sem alvo: a linha nem é renderizada.
   Mesmo tamanho de fonte do .hab-card-meta (0.72rem) + nowrap pra não
   quebrar em "Super efetivo". */
.hab-card-efetividade {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    font-weight: 600;
    text-align: center;
    margin-top: 4px;
    padding: 1px 4px;
    /* o .hab-card e' align-items:center -> sem align-self:stretch a efetividade
       fica do tamanho do texto (nowrap) e vaza. width 100% a prende na largura do
       card; o fit-text (JS, classe .fit-text) ENCOLHE a fonte pra caber, em vez de
       cortar com ellipsis. */
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    border-radius: 3px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(201,168,76,0.15);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
}
/* Mesmo texto, mas em botão simples da batalha selvagem (arena-skill-btn).
   Fica em linha própria (botão é column flex). */
.arena-skill-efetividade {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 2px;
}
/* X de deletar — mesmo padrão dos cards de monstro do bestiário secreto */
.hab-card .hab-card-x {
    position: absolute;
    top: 4px; right: 4px;
    width: 22px; height: 22px;
    padding: 0;
    border: 1px solid rgba(232,216,184,0.5);
    background: rgba(40,28,16,0.85);
    color: rgba(232,216,184,0.7);
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
    z-index: 2;
}
.hab-card .hab-card-x svg { width: 12px; height: 12px; }
.hab-card .hab-card-x:hover {
    background: rgba(150,30,30,0.85);
    border-color: #cf4040;
    color: #ffdada;
}
/* Olhinho de "ver quem usa" — canto inferior esquerdo, redondo */
.hab-card .hab-card-eye {
    position: absolute;
    bottom: 4px; left: 4px;
    height: 22px;
    min-width: 22px;
    padding: 0 6px;
    border: 1px solid rgba(232,216,184,0.5);
    background: rgba(40,28,16,0.85);
    color: rgba(232,216,184,0.7);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 4px;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    transition: all 0.15s;
    z-index: 2;
}
.hab-card .hab-card-eye svg { width: 12px; height: 12px; }
.hab-card .hab-card-eye:hover {
    background: rgba(201,168,76,0.35);
    border-color: var(--gold, #c9a84c);
    color: #f3da9c;
}
.hab-card-eye-count { font-weight: 600; }
/* v0.41.13: regras antigas (.hab-card-desc, .hab-card-tags, .hab-tag*,
   .hab-flag*, .hab-card-actions) removidas — novo card é compacto. */

/* v0.41.13: filtro de tipo visual (trigger + popover de imagens) */
.hab-filter-tipo-wrap {
    position: relative;
    display: inline-block;
}
.hab-filter-tipo-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(201,168,76,0.35);
    color: var(--parchment, #e9d9b6);
    padding: 5px 10px;
    border-radius: 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    cursor: pointer;
    min-width: 130px;
    transition: border-color 0.15s, background 0.15s;
}
.hab-filter-tipo-trigger:hover {
    border-color: var(--gold-light, #f3da9c);
    background: rgba(0,0,0,0.6);
}
.hab-filter-tipo-icon {
    width: 22px; height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}
.hab-filter-tipo-icon-fallback {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(232,216,184,0.4);
    font-size: 0.9rem;
}
.hab-filter-tipo-label { flex: 1; text-align: left; }
.hab-filter-tipo-caret { color: var(--gold-dim, #8d775c); font-size: 0.8rem; }
.hab-filter-tipo-pop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(auto-fit, 44px);
    gap: 4px;
    padding: 8px;
    background: rgba(20,14,8,0.98);
    border: 1px solid var(--gold-dim, #5a4225);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    min-width: 260px;
    max-width: 320px;
}
.hab-filter-tipo-pop.hidden { display: none; }
.hab-tipo-pop-btn {
    width: 40px; height: 40px;
    padding: 2px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.hab-tipo-pop-btn img {
    width: 100%; height: 100%;
    object-fit: contain;
}
.hab-tipo-pop-btn:hover {
    border-color: var(--gold-light, #f3da9c);
    background: rgba(201,168,76,0.15);
}
.hab-tipo-pop-btn.selected {
    border-color: var(--gold, #c9a84c);
    background: rgba(201,168,76,0.25);
    box-shadow: 0 0 0 1px var(--gold-light, #f3da9c) inset;
}
.hab-tipo-pop-btn-all {
    grid-column: 1 / -1;
    width: 100%;
    height: 32px;
    font-family: 'Cinzel', serif;
    color: var(--parchment, #e9d9b6);
}
.hab-tipo-pop-all { font-size: 0.82rem; }
.hab-tipo-pop-fallback {
    color: rgba(232,216,184,0.4);
    font-size: 1.1rem;
}

/* Form de habilidade (sub-abas) */
.hab-form-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px dashed rgba(201,168,76,0.25);
    margin-bottom: 12px;
}
.hab-form-tab {
    background: rgba(40,28,16,0.6);
    color: rgba(232,216,184,0.65);
    border: 1px solid rgba(201,168,76,0.25);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 6px 14px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    transition: all 0.15s;
}
.hab-form-tab:hover { background: rgba(60,40,20,0.85); color: var(--gold-light, #f3da9c); }
.hab-form-tab.active {
    background: linear-gradient(180deg, rgba(201,168,76,0.28), rgba(201,168,76,0.10));
    color: var(--gold-light, #f3da9c);
    border-color: rgba(201,168,76,0.55);
    box-shadow: 0 -2px 0 0 var(--gold, #c9a84c) inset;
}
.hab-form-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* v0.41.6: layout 2 colunas — form esquerda + preview direita (card de batalha) */
.hab-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 18px;
    align-items: start;
}
@media (max-width: 900px) {
    .hab-form-layout { grid-template-columns: 1fr; }
}
.hab-form-preview-side {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(201, 168, 76, 0.22);
    border-radius: 8px;
    padding: 10px;
    position: sticky;
    top: 8px;
}
.hab-form-preview-label {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    color: rgba(232, 216, 184, 0.6);
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* Picker visual de tipo elemental — compacto pro form do mestre */
.hab-tipo-picker {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.hab-tipo-picker .cadastrar-url-tipo-icon {
    width: 46px;
    height: 46px;
}
.hab-form-content label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: 'Cinzel', serif;
    color: rgba(232,216,184,0.75);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}
/* Checkboxes/radios do form de habilidade (heranca evolutiva nas Regras,
   narrativa/publica no Extras) usam o dourado da paleta — sem isso o browser
   pinta de branco/azul, destoando do padrao. */
.hab-form-content input[type="checkbox"],
.hab-form-content input[type="radio"] {
    accent-color: var(--gold-light, #f3da9c);
    cursor: pointer;
}
.hab-form-content input[type="text"],
.hab-form-content input[type="number"],
.hab-form-content select,
.hab-form-content textarea {
    background: rgba(0,0,0,0.45);
    color: #f3da9c;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 5px;
    padding: 6px 10px;
    font-family: 'Lora', serif;
    font-size: 0.92rem;
}
.hab-form-content textarea { resize: vertical; min-height: 80px; }
.hab-form-content input:focus, .hab-form-content select:focus, .hab-form-content textarea:focus {
    outline: none;
    border-color: var(--gold, #c9a84c);
}

/* Chips (condicoes) */
.hab-chip-input-row {
    display: flex; gap: 6px;
}
.hab-chip-input-row input { flex: 1; }
.hab-chip-list {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-top: 6px;
    min-height: 24px;
}
.hab-chip {
    background: rgba(94,192,216,0.18);
    border: 1px solid rgba(94,192,216,0.4);
    color: #c5e0ff;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-family: 'Cinzel', serif;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.hab-chip-x {
    background: transparent;
    color: #c5e0ff;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0 2px;
}
.hab-chip-x:hover { color: #ff8e8e; }

/* Efeitos */
.hab-efeitos-list {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 8px;
}
.hab-efeito-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(201,168,76,0.18);
    border-radius: 6px;
    padding: 6px 8px;
}
/* E2.3 (revisado): cada campo = coluna [legenda + input], largura do conteudo;
   so o Poder cresce (pro slider). Resolve inputs gigantes + legendas confusas. */
.hab-efeito-row { gap: 9px; align-items: flex-end; }
.hab-efeito-row .ef-fld { flex: 0 0 auto; gap: 3px; min-width: 0; }
.hab-efeito-row .ef-fld > select,
.hab-efeito-row .ef-fld > input { width: 100%; }
.hab-efeito-row .ef-fld-tipo     { width: 124px; }
.hab-efeito-row .ef-fld-alvo     { width: 165px; }   /* maior: cabe "Inimigo unico" / "Proprio (self)" */
.hab-efeito-row .ef-fld-atributo { width: 142px; }   /* cabe "Defesa Magica" etc. */
.hab-efeito-row .ef-fld-dur      { width: 92px; }
.hab-efeito-row .ef-fld-poder    { flex: 1 1 170px; min-width: 130px; }
.hab-efeito-row .ef-fld-poder > .ef-fixo { width: 80px; }
.hab-efeito-row .ef-pct-box  { display: flex; align-items: center; gap: 8px; width: 100%; }
.hab-efeito-row .ef-pct      { flex: 1 1 auto; width: auto; min-width: 0; height: auto; accent-color: var(--gold, #c9a84c); cursor: pointer; }
.hab-efeito-row .ef-pct-label{ flex: 0 0 auto; min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; color: var(--gold-light, #f3da9c); }
.hab-efeito-row .ef-del      { flex: 0 0 auto; }
.hab-poder-modo-hint { font-size: 11.5px; color: rgba(232,216,184,0.7); font-style: italic; }
.hab-poder-modo-hint strong { color: var(--gold-light, #f3da9c); font-style: normal; }

/* Toggle GLOBAL Fixo/% do poder dos efeitos (no topo da add-list). */
.hab-poder-modo { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; flex-wrap: wrap; }
.hab-poder-modo-switch { display: inline-flex; border: 1px solid var(--gold-dark, #6b5526); border-radius: 7px; overflow: hidden; }
.hab-modo-btn {
    background: rgba(0,0,0,0.4); color: var(--parchment, #e8d8b8);
    border: none; padding: 6px 15px; cursor: pointer;
    font-family: 'Lora', serif; font-size: 0.86rem; transition: background 0.15s, color 0.15s;
}
.hab-modo-btn + .hab-modo-btn { border-left: 1px solid var(--gold-dark, #6b5526); }
.hab-modo-btn.active { background: var(--gold, #c9a84c); color: #1a1208; font-weight: 600; }
.hab-modo-btn:not(.active):hover { background: rgba(201,168,76,0.2); }

/* Preview card */
.hab-preview-card {
    background: linear-gradient(180deg, rgba(40,28,16,0.95), rgba(20,14,8,0.95));
    border: 2px solid var(--gold, #c9a84c);
    border-radius: 10px;
    padding: 14px 18px;
    box-shadow: 0 0 24px rgba(201,168,76,0.15);
}
.hab-preview-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.hab-preview-nome {
    font-family: 'Cinzel Decorative', serif;
    color: var(--gold-light, #f3da9c);
    font-size: 1.2rem;
    letter-spacing: 0.05em;
}
.hab-preview-meta {
    color: rgba(232,216,184,0.7);
    font-size: 0.78rem;
    font-style: italic;
}
.hab-preview-narr {
    background: rgba(0,0,0,0.35);
    border-left: 3px solid var(--gold, #c9a84c);
    padding: 8px 12px;
    color: rgba(232,216,184,0.95);
    font-style: italic;
    line-height: 1.4;
    margin: 8px 0;
    border-radius: 0 4px 4px 0;
}
.hab-preview-mech {
    margin-top: 8px;
    color: rgba(232,216,184,0.85);
    font-size: 0.88rem;
}
.hab-preview-mech > div { margin: 3px 0; }
.hab-preview-efeitos {
    color: var(--gold-light, #f3da9c);
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    margin-top: 6px;
    line-height: 1.6;
}
.hab-preview-cnarr {
    color: rgba(232,216,184,0.7);
    font-size: 0.82rem;
    font-style: italic;
    margin-top: 8px;
    border-top: 1px dashed rgba(201,168,76,0.2);
    padding-top: 6px;
}
.hab-preview-tags {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Habilidades Picker (componente reusavel) */
.hp-container {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(201,168,76,0.22);
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 4px;
}
.hp-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.hp-search {
    flex: 1;
    background: rgba(0,0,0,0.45);
    color: #f3da9c;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 4px;
    padding: 5px 8px;
    font-family: 'Lora', serif;
    font-size: 0.85rem;
}
.hp-counter {
    color: rgba(232,216,184,0.7);
    font-size: 0.78rem;
    font-style: italic;
    white-space: nowrap;
}
.hp-list {
    display: flex; flex-direction: column; gap: 3px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}
.hp-item.hp-item-hidden { display: none !important; }
.hp-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    background: rgba(40,28,16,0.4);
    border: 1px solid transparent;
    transition: all 0.12s;
}
.hp-item:hover {
    background: rgba(60,42,22,0.7);
    border-color: rgba(201,168,76,0.25);
}
.hp-item-on {
    background: rgba(201,168,76,0.15);
    border-color: rgba(201,168,76,0.5);
}
.hp-item input[type="checkbox"] {
    width: 14px; height: 14px;
    cursor: pointer;
    flex-shrink: 0;
}
.hp-tipo-icon {
    width: 22px; height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}
.hp-tipo-neutro {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(201,168,76,0.18);
    border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(232,216,184,0.55);
    font-size: 0.95rem;
    line-height: 1;
}
.hp-item-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.hp-item-nome {
    color: var(--gold-light, #f3da9c);
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hp-item-meta {
    color: rgba(232,216,184,0.55);
    font-size: 0.72rem;
    font-style: italic;
}

/* Habilidades preview icons (cards do bestiario/NPC) */
.mestre-card-habs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(201,168,76,0.2);
    flex-wrap: wrap;
}
.hp-preview-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 3px;
    background: rgba(0,0,0,0.35);
    padding: 1px;
}
.hp-preview-neutro {
    display: flex; align-items: center; justify-content: center;
    color: rgba(232,216,184,0.7);
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    background: rgba(0,0,0,0.4);
}
.hp-preview-rest {
    color: var(--gold, #c9a84c);
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    margin-left: 2px;
}
.hp-preview-empty {
    color: rgba(232,216,184,0.4);
    font-style: italic;
    font-size: 0.75rem;
}
.hab-users-list {
    list-style: none;
    padding: 0;
    margin: 8px 0;
    display: flex; flex-direction: column; gap: 4px;
}
.hab-users-list li {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(201,168,76,0.2);
    color: rgba(232,216,184,0.85);
    padding: 6px 12px;
    border-radius: 6px;
    font-family: 'Lora', serif;
    font-size: 0.9rem;
}
.hab-users-list li strong {
    color: var(--gold-light, #f3da9c);
    font-family: 'Cinzel', serif;
}
.hab-users-list li small {
    color: rgba(232,216,184,0.55);
    font-style: italic;
    margin-left: 6px;
}

/* =====================================================================
 * FASE 13 PARTE 2 — Batalha Mestrada Avancada
 * ===================================================================== */
.mb-step-modal { width: min(720px, 92vw); }
.mb-step-group { margin-bottom: 14px; }
.mb-step-group-title {
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    letter-spacing: 0.1em;
    font-size: 0.92rem;
    margin-bottom: 6px;
    border-bottom: 1px dashed rgba(201,168,76,0.25);
    padding-bottom: 4px;
}
.mb-step-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.mb-step-card {
    background: linear-gradient(180deg, rgba(40,28,16,0.95), rgba(20,14,8,0.95));
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 8px;
    padding: 12px 14px;
    color: #e8d8b8;
    cursor: pointer;
    text-align: left;
    font-family: 'Lora', serif;
    transition: all 0.15s;
}
.mb-step-card:hover {
    border-color: var(--gold, #c9a84c);
    background: linear-gradient(180deg, rgba(60,42,22,0.95), rgba(30,20,12,0.95));
    transform: translateY(-1px);
}
.mb-step-card-large { padding: 18px 20px; min-height: 110px; }
.mb-step-card-name {
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    font-size: 1rem;
    margin-bottom: 4px;
}
.mb-step-card-stats {
    color: rgba(232,216,184,0.7);
    font-size: 0.82rem;
}

/* v0.40.16: Step 1 da Batalha Avancada usa cards do bestiario + pagina\u{e7}\u{e3}o
   (mesmo padrao do Armazem da Campanha) */
.mb-step-modal.mestre-form-modal { width: min(900px, 95vw); }
.mb-step-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.mb-step-cards-grid.mb-step-cards-paginated {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.mb-step-pag-wrap {
    margin-top: 8px;
}
.mb-step-pag-wrap .bestiary-pagination { margin-top: 0; }
@media (max-width: 720px) {
    .mb-step-cards-grid.mb-step-cards-paginated {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Card de monstro do Step 1 (reusa .bestiary-card) */
.mb-monster-card {
    background: rgba(0,0,0,0.32);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.mb-monster-card .bestiary-card-name {
    text-align: center;
    padding: 4px 4px 2px;
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    font-size: 0.82rem;
}
.mb-monster-card-stats {
    font-family: 'Lora', serif;
    font-size: 0.7rem;
    color: rgba(232, 216, 184, 0.6);
    text-align: center;
    padding: 0 4px 6px;
    line-height: 1.25;
}

/* Arena */
.mb-arena-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, rgba(20,12,6,0.92), rgba(0,0,0,0.96));
    z-index: 9700;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.mb-arena-modal {
    width: min(960px, 95vw);
    max-height: 92vh;
    background: linear-gradient(180deg, #1d130a, #0d0805);
    border: 2px solid #b8862a;
    border-radius: 14px;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 0 40px rgba(201,168,76,0.18), 0 24px 80px rgba(0,0,0,0.85);
}
.mb-arena-header {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(201,168,76,0.28);
    background: linear-gradient(180deg, rgba(201,168,76,0.12), transparent);
    display: flex; align-items: center; justify-content: center;
    gap: 12px;
    position: relative;
}
.mb-arena-header h2 {
    margin: 0;
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    letter-spacing: 0.18em;
    font-size: 1.3rem;
}
.mb-arena-close {
    position: absolute;
    right: 12px; top: 10px;
    width: 32px; height: 32px;
    background: transparent;
    color: var(--gold-light, #f3da9c);
    border: 1px solid rgba(201,168,76,0.4);
    border-radius: 6px;
    cursor: pointer;
}
.mb-arena-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    color: #e8d8b8;
    font-family: 'Lora', serif;
    display: flex; flex-direction: column; gap: 14px;
}

.mb-arena-fighters {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: center;
}
.mb-fighter {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 10px;
    padding: 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.mb-fighter-narrador { border-color: rgba(212,114,212,0.4); }
.mb-fighter-jogador  { border-color: rgba(94,192,216,0.4); }
.mb-fighter-name {
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    text-align: center;
    font-size: 0.95rem;
}
.mb-fighter-img {
    width: 100%;
    aspect-ratio: 1.1;
    object-fit: contain;
    background: linear-gradient(135deg, rgba(0,0,0,0.5), rgba(201,168,76,0.08));
    border-radius: 6px;
}
.mb-fighter-img-empty {
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem;
    color: rgba(201,168,76,0.55);
}
.mb-arena-vs {
    font-family: 'Cinzel Decorative', serif;
    font-size: 2rem;
    color: var(--gold, #c9a84c);
    text-shadow: 0 0 12px rgba(201,168,76,0.7);
}
.mb-bar {
    position: relative;
    height: 18px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 9px;
    overflow: hidden;
}
.mb-bar-fill {
    height: 100%;
    transition: width 0.3s ease;
}
.mb-bar-fill-hp { background: linear-gradient(90deg, #c84c4c, #ff6e6e); }
.mb-bar-fill-mp { background: linear-gradient(90deg, #4c8cff, #6eb0ff); }
.mb-bar-text {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem;
    font-family: 'Cinzel', serif;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.95);
    letter-spacing: 0.05em;
}

.mb-arena-log {
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(201,168,76,0.18);
    border-radius: 8px;
    padding: 8px 12px;
    max-height: 130px;
    overflow-y: auto;
    font-family: 'Lora', serif;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Buffs/debuffs/status badges (na barra do combatente) */
.mb-buffs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 6px;
    min-height: 22px;
}
.mb-buff-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 999px;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    border: 1px solid;
}
.mb-buff-badge small {
    font-size: 0.62rem;
    opacity: 0.7;
    margin-left: 2px;
}
.mb-buff-pos {
    background: rgba(77,186,96,0.18);
    border-color: rgba(77,186,96,0.55);
    color: #b5e8c0;
}
.mb-buff-neg {
    background: rgba(212,114,212,0.18);
    border-color: rgba(212,114,212,0.55);
    color: #f0c0f0;
}
.mb-buff-status {
    background: rgba(255,107,60,0.18);
    border-color: rgba(255,107,60,0.55);
    color: #ffc8a8;
}
.mb-log-entry {
    padding: 2px 0;
    color: rgba(232,216,184,0.85);
    border-bottom: 1px dashed rgba(201,168,76,0.08);
}
.mb-log-entry:last-child { border-bottom: none; color: var(--gold-light, #f3da9c); }

.mb-arena-turn {
    text-align: center;
}
.mb-arena-turn-label {
    display: inline-block;
    padding: 4px 18px;
    border-radius: 999px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 0.85rem;
}
.mb-turn-mine {
    background: rgba(201,168,76,0.22);
    color: var(--gold-light, #f3da9c);
    border: 1px solid var(--gold, #c9a84c);
    box-shadow: 0 0 12px rgba(201,168,76,0.35);
}
.mb-turn-theirs {
    background: rgba(94,192,216,0.18);
    color: #a8d8e0;
    border: 1px solid rgba(94,192,216,0.5);
}

.mb-arena-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(201,168,76,0.18);
}
.mb-action-btn {
    background: linear-gradient(180deg, rgba(60,42,22,0.95), rgba(30,20,12,0.95));
    color: var(--gold-light, #f3da9c);
    border: 1px solid rgba(201,168,76,0.4);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}
.mb-action-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(80,55,28,0.95), rgba(40,28,16,0.95));
    border-color: var(--gold, #c9a84c);
}
.mb-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mb-action-attack { border-color: rgba(255,107,60,0.5); }
.mb-action-defend { border-color: rgba(94,192,216,0.5); }
.mb-action-flee   { border-color: rgba(160,160,160,0.5); }
.mb-action-jogador {
    grid-column: 1 / -1;
    background: linear-gradient(180deg, rgba(94,192,216,0.18), rgba(40,60,80,0.95));
    border-color: rgba(94,192,216,0.5);
}
.mb-action-skill-group {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 6px;
}
.mb-action-skill {
    background: linear-gradient(180deg, rgba(212,114,212,0.18), rgba(60,30,60,0.95));
    border-color: rgba(212,114,212,0.5);
}
.mb-action-skill small {
    color: rgba(232,216,184,0.7);
    font-family: 'Lora', serif;
    margin-left: 4px;
}

/* End screen */
.mb-end-screen {
    text-align: center;
    padding: 14px 0;
}
.mb-end-title {
    font-family: 'Cinzel Decorative', serif;
    color: var(--gold-light, #f3da9c);
    letter-spacing: 0.15em;
    margin-bottom: 8px;
}
.mb-end-msg {
    font-size: 1.05rem;
    color: rgba(232,216,184,0.85);
    margin-bottom: 14px;
}
.mb-rewards {
    background: rgba(45,106,58,0.18);
    border: 1px solid rgba(74,146,88,0.4);
    border-radius: 8px;
    padding: 12px 18px;
    text-align: left;
    margin: 14px 0;
}
.mb-rewards h4 {
    margin: 0 0 6px;
    color: #d8f0d8;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.05em;
}
.mb-rewards ul { margin: 0; padding-left: 22px; }
.mb-rewards li { padding: 2px 0; color: rgba(232,216,184,0.9); }
.mb-rewards-empty {
    color: rgba(232,216,184,0.55);
    font-style: italic;
    margin: 14px 0;
}
.mb-end-log {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(201,168,76,0.18);
    border-radius: 6px;
    padding: 8px 12px;
    margin: 14px 0;
    max-height: 160px;
    overflow-y: auto;
    text-align: left;
    font-size: 0.82rem;
}
.mb-end-log h5 {
    margin: 0 0 6px;
    color: var(--gold-light, #f3da9c);
    letter-spacing: 0.1em;
    font-family: 'Cinzel', serif;
}
.mb-end-actions {
    display: flex; justify-content: center; margin-top: 14px;
}

/* v0.32.25 — Linha extras pro modo Secreto (URL da imagem + nome custom) */
/* v0.32.26 — passa a ter toggle radio "URL externa" XOR "Imagem do monstro" */
.cadastrar-secreto-extras {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: rgba(201, 168, 76, 0.06);
    border: 1px dashed rgba(201, 168, 76, 0.35);
    border-radius: 6px;
}
.cadastrar-secreto-toggle {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
/* v0.32.55: chips dividem 50/50 quando cabem na mesma linha; empilham (cada um 100%)
   quando o container fica estreito (min-width: 160px e flex-wrap empurram pra baixo) */
.cadastrar-secreto-chip {
    flex: 1 1 0;
    min-width: 160px;
    text-align: center;
    padding: 7px 12px;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: rgba(232, 216, 184, 0.85);
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.cadastrar-secreto-chip:hover {
    background: rgba(201, 168, 76, 0.12);
    border-color: rgba(201, 168, 76, 0.6);
}
.cadastrar-secreto-chip.selected {
    color: var(--gold, #c9a84c);
    background: rgba(201, 168, 76, 0.18);
    border-color: var(--gold, #c9a84c);
    box-shadow: 0 0 6px rgba(201, 168, 76, 0.45);
}
.cadastrar-secreto-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px;
}
.cadastrar-secreto-field.hidden {
    display: none !important;
}
.cadastrar-secreto-label {
    font-family: 'Cinzel', serif;
    font-size: 0.74rem;
    color: rgba(232, 216, 184, 0.75);
    letter-spacing: 0.04em;
}
@media (max-width: 768px) {
    .cadastrar-secreto-chip { min-width: 0; }
}

/* v0.32.32/33/34 — Bestiario Secreto: usa exatamente o componente .bestiary-card
   (mesmo do bestiario do editor + .bestiary-grid de 5 colunas). Os 3 overlays
   abaixo nao alteram o card em si; sao apenas botoes posicionados absolutos. */
.bestiary-card-secreto { cursor: pointer; }

/* v0.32.36/37 — Bestiario Secreto: centralizar o bloco inteiro no painel do mestre.
   Cap de largura igual ao painel do bestiario do editor (800px) pra cards
   ficarem do mesmo tamanho natural. Layout segue componente do editor. */
.mestre-painel .mestre-batalha-card.mestre-batalha-card-secreto {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}
.mestre-painel .mestre-batalha-card-secreto .bestiary-grid,
.mestre-painel .mestre-batalha-card-secreto .bestiary-pagination,
.mestre-painel .mestre-batalha-card-secreto .bestiary-actions {
    justify-content: center;
}

/* v0.32.57: classes `.cadastrar-url-*` RESTAURADAS — form URL voltou pro modal
   compacto (toggle re-renderiza conteudo dentro do mesmo modal de cadastrar). */
.cadastrar-url-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 6px;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}
.cadastrar-url-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
}
.cadastrar-url-field-full {
    width: 100%;
    flex: 1 1 100%;
}
.cadastrar-url-label {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    color: rgba(232, 216, 184, 0.85);
    letter-spacing: 0.04em;
}
/* Preview row: card 140px (esquerda) + side direita com nome/tipos */
.cadastrar-url-preview-row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}
.cadastrar-url-preview {
    width: 140px;
}
.cadastrar-url-preview .bestiary-card {
    width: 140px;
}
.cadastrar-url-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: rgba(232, 216, 184, 0.4);
    background: rgba(0, 0, 0, 0.2);
}
.cadastrar-url-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
/* Linha HP/ATK/DEF: 3 colunas iguais, sem overflow */
.cadastrar-url-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.cadastrar-url-section textarea.auth-input {
    resize: vertical;
    min-height: 56px;
    font-family: inherit;
}
@media (max-width: 600px) {
    .cadastrar-url-preview-row { grid-template-columns: 1fr; }
    .cadastrar-url-preview, .cadastrar-url-preview .bestiary-card { width: 100%; max-width: 200px; margin: 0 auto; }
    .cadastrar-url-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Picker de tipos por icone (single-select por slot, mutua exclusao) */
.cadastrar-url-tipo-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px 6px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px dashed rgba(201, 168, 76, 0.22);
    border-radius: 4px;
    max-width: 100%;
    box-sizing: border-box;
}
.cadastrar-url-tipo-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid rgba(201, 168, 76, 0.25);
    background: rgba(0, 0, 0, 0.3);
    padding: 1px;
    cursor: pointer;
    opacity: 0.55;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cadastrar-url-tipo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}
.cadastrar-url-tipo-icon:hover:not(.disabled) {
    opacity: 0.85;
    border-color: var(--gold-dark, #c9a84c);
}
.cadastrar-url-tipo-icon.selected {
    opacity: 1;
    border-color: var(--gold, #c9a84c);
    background: rgba(201, 168, 76, 0.18);
    box-shadow: 0 0 4px rgba(201, 168, 76, 0.5);
}
.cadastrar-url-tipo-icon.disabled {
    opacity: 0.18;
    cursor: not-allowed;
    filter: grayscale(0.7);
}

/* Botao publicar (nuvem) — top-right, abaixo do X (.char-monster-remove) */
.bestiary-card-overlay-pub {
    position: absolute;
    top: 36px;
    right: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(120, 130, 150, 0.45);
    background: rgba(20, 25, 35, 0.6);
    color: rgba(200, 215, 230, 0.6);
    cursor: pointer;
    line-height: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all 0.18s;
}
.bestiary-card-overlay-pub svg {
    width: 14px;
    height: 14px;
    display: block;
    flex: 0 0 auto;
}
/* v0.32.55: SVG do X dentro do .char-monster-remove (so no contexto bestiario secreto). */
.bestiary-card-secreto .char-monster-remove {
    line-height: 0;
}
.bestiary-card-secreto .char-monster-remove svg {
    width: 12px;
    height: 12px;
    display: block;
    flex: 0 0 auto;
}
.bestiary-card-overlay-pub:hover {
    transform: scale(1.1);
    background: linear-gradient(180deg, #2a4a6e 0%, #0e1a2a 100%);
    color: #fff;
    border-color: rgba(120, 180, 220, 0.85);
    box-shadow: 0 0 12px rgba(80, 150, 220, 0.7);
}
.bestiary-card-overlay-pub:active { transform: scale(0.95); }
/* v0.40.18: NPC publicado vira VERDE (igual ao padrao "publicado" do passe) */
.bestiary-card-overlay-pub.is-public {
    color: #d4ffd4;
    background: linear-gradient(180deg, #2a8540 0%, #14442a 100%);
    border-color: rgba(125, 240, 168, 0.85);
    box-shadow: 0 0 10px rgba(125, 240, 168, 0.55);
}
.bestiary-card-overlay-pub.is-public:hover {
    transform: scale(1.1);
    background: linear-gradient(180deg, #3aa055 0%, #1d5836 100%);
    border-color: rgba(150, 255, 190, 1);
    box-shadow: 0 0 14px rgba(125, 240, 168, 0.85);
    color: #fff;
}

/* v0.88.0 — botao Transferir (avião) no card: top-right, logo abaixo do X.
   (a nuvem de visibilidade saiu do secreto, entao sobe pra 36px) */
.bestiary-card-overlay-transfer {
    position: absolute;
    top: 36px;
    right: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(120, 130, 150, 0.45);
    background: rgba(20, 25, 35, 0.6);
    color: rgba(200, 215, 230, 0.65);
    cursor: pointer;
    line-height: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all 0.18s;
}
.bestiary-card-overlay-transfer svg {
    width: 14px;
    height: 14px;
    display: block;
    flex: 0 0 auto;
}
.bestiary-card-overlay-transfer:hover {
    transform: scale(1.1);
    background: linear-gradient(180deg, #6e3a8e 0%, #2a103e 100%);
    color: #fff;
    border-color: rgba(200, 150, 240, 0.85);
    box-shadow: 0 0 12px rgba(180, 130, 240, 0.6);
}
.bestiary-card-overlay-transfer:active { transform: scale(0.95); }

/* Publicar no bestiario oficial (nuvem-upload) — so aparece em monstro secreto
   ainda nao-oficial. Abaixo do botao de transferir. Tom dourado. */
.bestiary-card-overlay-publicar-oficial {
    position: absolute;
    top: 68px;
    right: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(201, 168, 76, 0.5);
    background: rgba(35, 28, 12, 0.65);
    color: rgba(232, 216, 184, 0.78);
    cursor: pointer;
    line-height: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all 0.18s;
}
.bestiary-card-overlay-publicar-oficial svg {
    width: 14px;
    height: 14px;
    display: block;
    flex: 0 0 auto;
}
.bestiary-card-overlay-publicar-oficial:hover {
    transform: scale(1.1);
    background: linear-gradient(180deg, #8a6e2a 0%, #3e2e10 100%);
    color: #fff;
    border-color: rgba(240, 210, 130, 0.9);
    box-shadow: 0 0 12px rgba(201, 168, 76, 0.65);
}
.bestiary-card-overlay-publicar-oficial:active { transform: scale(0.95); }

/* v0.88.0 — Modal de transferencia (selecao de destinatario + recebimento) */
.transferencia-modal {
    width: min(520px, 92vw);
    max-height: 88vh;
}
.transferencia-resumo {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(201, 168, 76, 0.18);
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 14px;
    color: var(--gold-light);
    font-size: 0.95rem;
}
.transferencia-picker-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.transferencia-search {
    margin-bottom: 10px;
}
.transferencia-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid rgba(201, 168, 76, 0.12);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.15);
}
.transferencia-loading,
.transferencia-empty {
    padding: 18px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}
.transferencia-jogador {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(201, 168, 76, 0.08);
    color: var(--text-main);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.transferencia-jogador:last-child { border-bottom: none; }
.transferencia-jogador:hover {
    background: rgba(201, 168, 76, 0.08);
}
.transferencia-jogador.is-selected {
    background: rgba(201, 168, 76, 0.18);
    color: var(--gold-light);
}
.transferencia-jogador-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(201, 168, 76, 0.25);
    color: var(--gold-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex: 0 0 28px;
}
.transferencia-jogador-nome {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Recebimento: cards verticais com remetente + resumo + botao aceitar */
.transferencia-recebimento {
    width: min(560px, 94vw);
}
.transferencia-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
}
.transferencia-card {
    border: 1px solid rgba(201, 168, 76, 0.2);
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    align-items: center;
}
.transferencia-card-from {
    grid-column: 1 / -1;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.transferencia-card-resumo {
    color: var(--gold-light);
    font-size: 1rem;
}
.transferencia-card-actions {
    display: flex;
    gap: 8px;
}

/* v0.88.0 — spotlight no card do monstro recebido (overlay escuro 1.7s).
   Clone fica em position:fixed no body, escapando de stacking contexts. */
.transferencia-spotlight-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100000;
    pointer-events: none;
    animation: transferenciaSpotlightFade 2.2s ease-in-out forwards;
}
.transferencia-spotlight-clone {
    z-index: 100001 !important;
    border-radius: 10px !important;
    background: var(--bg-dark, #1a1410);
    box-shadow:
        0 0 0 3px var(--gold-light, #c9a84c),
        0 0 30px 8px rgba(201, 168, 76, 0.65),
        0 0 80px 24px rgba(201, 168, 76, 0.3) !important;
    pointer-events: none;
    transform-origin: center center;
    /* Reveal lento e suave: surge pequeno + fade-in, dá um overshoot e assenta. */
    animation: transferenciaReveal 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.transferencia-spotlight-clone .char-monster-remove,
.transferencia-spotlight-clone .monster-dice-btn,
.transferencia-spotlight-clone .bestiary-card-overlay-pub,
.transferencia-spotlight-clone .bestiary-card-overlay-transfer,
.transferencia-spotlight-clone .bestiary-card-overlay-publicar-oficial,
.transferencia-spotlight-clone .bestiary-card-overlay-dice {
    display: none !important;
}
@keyframes transferenciaSpotlightFade {
    0%   { opacity: 0; }
    12%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { opacity: 0; }
}
/* Reveal do card: nasce pequeno e transparente, cresce com overshoot e assenta. */
@keyframes transferenciaReveal {
    0%   { transform: scale(0.4); opacity: 0; }
    30%  { transform: scale(1.12); opacity: 1; }
    55%  { transform: scale(1.0); }
    85%  { transform: scale(1.04); }
    100% { transform: scale(1.0); }
}

/* V33 — card de equipamento em transferencia pendente: badge + sutil opacidade
   no botao de avi\u{e3}o pra indicar que clicar n\u{e3}o vai mais funcionar. */
.equipamento-card-pending {
    position: relative;
    /* Mant\u{e9}m o card vis\u{ed}vel, mas com aviso. */
}
.equipamento-card-pending .bestiary-card-overlay-transfer {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.6);
}
.equipamento-card-pending .equipamento-card-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(201, 168, 76, 0.92);
    color: #1a1410;
    font-size: 0.95rem;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.5);
    z-index: 5;
    pointer-events: none;
}
/* V33 — item publico-terminal: dica visual sutil (n\u{e3}o desabilita o card,
   o detalhe ainda abre, apenas mostra que edit/delete v\u{e3}o falhar). */
.equipamento-card-publico-terminal {
    /* Mant\u{e9}m visual padr\u{e3}o; backend bloqueia edit/delete e mostra mensagem. */
}
.transferencia-spotlight-clone .equipamento-card-badge {
    display: none !important;
}

/* v0.32.42 — asterisco vermelho de "campo obrigatorio" no #bestiary-form */
.bf-required {
    color: #e85a5a;
    font-weight: 700;
    margin-left: 3px;
    font-size: 0.95em;
}

/* v0.32.53 — preview ao vivo da URL externa (mesmo visual do upload preview) */
.bf-img-url-preview {
    margin-top: 8px;
    border: 2px solid var(--gold-dark, #806838);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.bf-img-url-preview img {
    width: 100%;
    max-height: 200px;
    object-fit: contain;
    display: block;
}
.bf-img-url-preview-error {
    color: #e85a5a;
    font-size: 0.85rem;
    text-align: center;
    padding: 4px 0;
}

/* v0.32.44 — em modo secreto, Espécie ocupa linha cheia (Numero some) e
   Tipo 1 + Tipo 2 dividem a 2a linha. Em modo oficial layout original (Numero+Especie row1). */
.bestiary-form-secreto .bf-nome-label {
    grid-column: 1 / -1;
}
.bf-tipo-label {
    grid-column: span 1;
}

/* v0.32.48 — Tipo picker: trigger estilo dropdown (igual emoji input) que abre
   popup com grade 5 colunas. Selects ficam ocultos como storage de valor. */
.bf-tipo-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--gold-dark, #806838);
    color: var(--parchment, #e8d8b8);
    font-family: 'Lora', serif;
    font-size: 0.95rem;
    border-radius: 6px;
    padding: 7px 10px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    text-align: left;
}
.bf-tipo-trigger:hover {
    border-color: var(--gold, #c9a84c);
}
.bf-tipo-trigger.open {
    border-color: var(--gold, #c9a84c);
    box-shadow: 0 0 8px rgba(201, 168, 76, 0.3);
}
.bf-tipo-trigger-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}
.bf-tipo-trigger-icon[src=""],
.bf-tipo-trigger-icon:not([src]) {
    display: none;
}
.bf-tipo-trigger-label {
    flex: 1 1 auto;
    text-transform: capitalize;
}
.bf-tipo-trigger-caret {
    color: var(--gold, #c9a84c);
    font-size: 0.85rem;
    transition: transform 0.2s;
}
.bf-tipo-trigger.open .bf-tipo-trigger-caret {
    transform: rotate(180deg);
}

/* Popup do dropdown — mesmo padrao visual do emoji-picker-popup */
.bf-tipo-popup {
    position: fixed;
    /* v0.33.1: subido pra ficar acima do mestrar-backdrop (11500) quando o
       #bestiary-form esta embutido no modal de cadastrar monstro secreto.
       Mantem-se abaixo de .game-modal-backdrop (12000) para que alerts continuem por cima. */
    z-index: 11800;
    background: var(--bg-dark, #1a120a);
    border: 1px solid rgba(201, 168, 76, 0.4);
    border-radius: 10px;
    padding: 10px;
    width: 240px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
    animation: bfTipoPopupIn 0.15s ease-out;
}
@keyframes bfTipoPopupIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.bf-tipo-popup-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    max-height: 280px;
    overflow-y: auto;
}
.bf-tipo-pick {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid rgba(201, 168, 76, 0.18);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    transition: all 0.15s;
}
.bf-tipo-pick img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.bf-tipo-pick:hover:not(.disabled) {
    border-color: var(--gold, #c9a84c);
    background: rgba(201, 168, 76, 0.12);
    transform: scale(1.05);
}
.bf-tipo-pick.selected {
    border-color: var(--gold, #c9a84c);
    background: rgba(201, 168, 76, 0.22);
    box-shadow: 0 0 6px rgba(201, 168, 76, 0.5);
}
.bf-tipo-pick.disabled {
    opacity: 0.22;
    cursor: not-allowed;
    filter: grayscale(0.7);
}

/* Responsivo: em telas estreitas a grid de 2 colunas vira 1 coluna */
@media (max-width: 720px) {
    .form-grid {
        grid-template-columns: 1fr !important;
    }
    .bf-tipo-label {
        grid-column: 1 / -1;
    }
}

/* v0.32.38 — toggle URL/Upload + bloco "Defaults da Instancia" no #bestiary-form */
.bf-img-source-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.bf-img-source-toggle.hidden { display: none !important; }
.bf-img-source-chip {
    flex: 1 1 auto;
    padding: 7px 12px;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: rgba(232, 216, 184, 0.85);
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.bf-img-source-chip:hover {
    background: rgba(201, 168, 76, 0.12);
    border-color: rgba(201, 168, 76, 0.6);
}
.bf-img-source-chip.selected {
    color: var(--gold, #c9a84c);
    background: rgba(201, 168, 76, 0.18);
    border-color: var(--gold, #c9a84c);
    box-shadow: 0 0 6px rgba(201, 168, 76, 0.45);
}
/* v0.33.8: chip "static" (sozinho como label — nao clicavel, sem hover/cursor de botao) */
.bf-img-source-chip.bf-img-source-chip-static {
    cursor: default;
    pointer-events: none;
    box-shadow: none;
    /* Visual de label discreta */
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(201, 168, 76, 0.25);
    color: rgba(232, 216, 184, 0.7);
}
.bf-img-source-chip.bf-img-source-chip-static:hover {
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(201, 168, 76, 0.25);
}
.bf-secreto-defaults {
    margin-top: 18px;
    padding: 14px 16px;
    background: rgba(80, 30, 100, 0.08);
    border: 1px dashed rgba(201, 168, 76, 0.4);
    border-radius: 8px;
}
.bf-secreto-defaults.hidden { display: none !important; }
.bf-secreto-defaults-title {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: var(--gold-light, #f3da9c);
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.bf-secreto-defaults-sub {
    font-size: 0.78rem;
    color: rgba(232, 216, 184, 0.6);
    margin: 0 0 12px;
}
.bf-secreto-flags {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.bf-secreto-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: rgba(232, 216, 184, 0.85);
    cursor: pointer;
}
.bf-secreto-flag input[type="checkbox"] {
    cursor: pointer;
}

/* F7.7 — bloco "Disponibilidade" (step 5 Extras): Limitado / Exclusivo.
   IMPORTANTE: as labels ficam dentro de .form-grid, e a regra `.form-grid label`
   forca `flex-direction: column` (padrao "rotulo em cima do campo"). Por isso
   todo seletor aqui e prefixado com `.bf-disp-section` — especificidade (0,2,0)
   supera `.form-grid label` (0,1,1) — e `flex-direction: row` e explicito, pra
   recuperar o layout horizontal (cabecalho e campos na mesma linha). */
.bf-disp-section { margin-top: 14px; }
.bf-disp-section .bf-disp-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: 10px;
    cursor: pointer;
}
.bf-disp-section .bf-disp-head input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--gold, #c9a84c);
    cursor: pointer;
}
.bf-disp-section .bf-disp-name {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: var(--gold-light, #f3da9c);
    letter-spacing: 0.03em;
}
.bf-disp-section .bf-disp-config {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    margin: 6px 0 2px 24px;
}
.bf-disp-section .bf-disp-range-sep {
    display: flex;
    align-items: center;
    height: 36px;
    font-size: 0.8rem;
    color: rgba(232, 216, 184, 0.55);
}
.bf-disp-section .bf-disp-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 0.8rem;
    color: rgba(232, 216, 184, 0.85);
}
.bf-disp-section .bf-disp-field > span,
.bf-disp-section .bf-disp-check > span {
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.bf-disp-section .bf-disp-field input[type="date"] {
    width: 220px;
    height: 36px;
    box-sizing: border-box;
}
.bf-disp-section .bf-disp-field input[type="number"] {
    width: 90px;
    height: 36px;
    box-sizing: border-box;
}
.bf-disp-section .bf-disp-field input[type="text"] {
    width: 200px;
    height: 36px;
    box-sizing: border-box;
}
/* icone do calendario no tom dourado da palavra LIMITADO (= --gold-light) */
.bf-disp-section .bf-disp-field input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(86%) sepia(29%) saturate(460%) hue-rotate(318deg) brightness(98%) contrast(89%);
}
.bf-disp-section .bf-disp-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 36px;
    gap: 6px;
    font-size: 0.8rem;
    color: rgba(232, 216, 184, 0.85);
    cursor: pointer;
}
.bf-disp-section .bf-disp-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--gold, #c9a84c);
    cursor: pointer;
}

.cadastrar-monstro-section.hidden { display: none !important; }

/* v0.32.14 — Linha extra abaixo do footer do "+ Cadastrar Monstro" pra
   conteudo opcional (ex: botao Habilidades em modo NPC) sem espremer
   as 3 colunas principais (Level/Ultimate | Shiny/Elite/Unico | Cancel/Save) */
.cadastrar-extras-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(201, 168, 76, 0.25);
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cadastrar-extras-btn {
    min-width: 220px;
    padding: 8px 14px !important;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.04em;
    transition: background 0.15s, transform 0.15s;
}
.cadastrar-extras-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.cadastrar-extras-btn.expanded {
    background: rgba(201, 168, 76, 0.25);
    border-color: var(--gold-light, #f3da9c);
}
.cadastrar-extras-btn.expanded::after {
    content: ' \25B2'; /* triangulo apontando para cima quando expandido */
    margin-left: 4px;
    font-size: 0.75em;
}

/* v0.32.17 — Section de habilidades inline (expande dentro do modal) */
.cadastrar-habs-inline {
    margin-top: 8px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 8px;
    animation: cadastrar-habs-slide-in 0.2s ease-out;
}
.cadastrar-habs-inline.hidden {
    display: none;
}
@keyframes cadastrar-habs-slide-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cadastrar-habs-inline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(201, 168, 76, 0.2);
}
.cadastrar-habs-inline-header strong {
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    letter-spacing: 0.06em;
    font-size: 0.95rem;
}
.cadastrar-habs-inline-filter {
    color: rgba(232, 216, 184, 0.7);
    font-size: 0.78rem;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cadastrar-habs-tipo-chips {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.cadastrar-habs-tipo-chip {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 3px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.cadastrar-habs-tipo-chip img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    pointer-events: none;
}
.cadastrar-habs-tipo-chip-neutro {
    color: rgba(232, 216, 184, 0.7);
    font-size: 1.05rem;
    line-height: 1;
    pointer-events: none;
}
.cadastrar-habs-tipo-chip:hover {
    background: rgba(201, 168, 76, 0.2);
}
.cadastrar-habs-tipo-chip.selected {
    border-color: var(--gold-light, #f3da9c);
    background: rgba(201, 168, 76, 0.3);
    box-shadow: 0 0 8px rgba(201, 168, 76, 0.4);
}
/* v0.32.62: "Todos" agora e icon-only (🌐), mesmo tamanho dos outros chips */
.cadastrar-habs-tipo-chip-label {
    font-size: 1rem;
    line-height: 1;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* v0.32.62: chip Bypass — cadeado aberto (🔓), mesmo tamanho dos demais.
   Quando selecionado, mostra que filtro de tipo esta desativado. */
.cadastrar-habs-tipo-chip-bypass-icon {
    font-size: 1rem;
    line-height: 1;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cadastrar-habs-tipo-chip-bypass.selected {
    border-color: #ff9966;
    background: rgba(255, 153, 102, 0.18);
    box-shadow: 0 0 8px rgba(255, 153, 102, 0.45);
}
.cadastrar-habs-escopo {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-style: normal;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid;
    letter-spacing: 0.05em;
}
.cadastrar-habs-escopo-publica {
    color: #b5e8c0;
    border-color: rgba(77, 186, 96, 0.5);
    background: rgba(77, 186, 96, 0.12);
}
.cadastrar-habs-escopo-todas {
    color: #ffd97a;
    border-color: rgba(255, 191, 77, 0.5);
    background: rgba(255, 191, 77, 0.12);
}
.cadastrar-habs-inline-actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(201, 168, 76, 0.2);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* v0.32.4 — Toggle "Mostrar todas habilidades" no editor de monstro */
.bf-hab-showall {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    cursor: pointer;
    color: rgba(232,216,184,0.7);
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    user-select: none;
}
.bf-hab-showall input[type="checkbox"] {
    width: 14px; height: 14px;
    cursor: pointer;
    accent-color: var(--gold, #c9a84c);
}
.bf-hab-showall:hover { color: var(--gold-light, #f3da9c); }

/* =====================================================================
 * v0.32.2 — Responsividade do Painel do Mestre
 * Breakpoints: 1280px (notebooks), 1024px (tablets landscape),
 *              768px (tablets portrait), 480px (smartphones)
 * ===================================================================== */

/* === ≤ 1280px — laptops menores ============================ */
@media (max-width: 1280px) {
    .mestre-painel-body {
        padding: 18px 22px 22px;
    }
    .dash-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 10px;
    }
    .dash-kpi-num { font-size: 1.9rem; }
    .mestre-bestiario-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
    /* Hab editor: cards menores */
    .hab-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 10px;
    }
    .hab-card { padding: 8px 10px; }
    .hab-card-nome { font-size: 0.86rem; }
    .hab-card-stats { font-size: 0.72rem; }
    /* NPC species picker: 2 cols ainda */
    .npc-pick-modal {
        width: 95vw !important;
    }
    /* m-card: layout responsivo definido junto com a regra base
       (media query @900px e @600px logo apos a definicao) */
}

/* === ≤ 1024px — tablets landscape =========================== */
@media (max-width: 1024px) {
    .mestre-painel {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border-width: 0 0 2px 0;
    }
    .mestre-painel-header {
        padding: 10px 14px 8px;
    }
    .mestre-painel-title { font-size: 1.15rem; }
    .mestre-painel-body { padding: 14px 18px 18px; }
    .mestre-painel-tabs { padding: 8px 12px 0; }
    .mestre-tab { padding: 7px 14px; font-size: 0.82rem; }

    /* Dashboard: 2 cols KPIs */
    .dash-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dash-quest-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

    /* NPC species picker: stack vertical */
    .npc-pick-body {
        grid-template-columns: 1fr !important;
    }
    .npc-pick-right { order: -1; } /* preview vai pro topo no mobile */
    .npc-pick-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        max-height: 35vh;
    }

    /* Habilidades editor: filtros wrap */
    .hab-toolbar {
        flex-wrap: wrap;
    }
    .hab-search-input,
    .hab-filter-cat,
    .hab-filter-tipo {
        flex: 1 1 140px;
    }

    /* Quest tpl card: stack */
    .mestre-quest-tpl-grid {
        grid-template-columns: 1fr 1fr;
    }
    .mestre-quest-active-row {
        grid-template-columns: 70px 1fr 60px 70px;
        font-size: 0.78rem;
    }

    /* Passe tier row: stack vertical de free/premium */
    .mestre-passe-tier-row {
        grid-template-columns: 36px 1fr;
        grid-template-rows: auto auto;
    }
    .mestre-passe-tier-num {
        grid-row: 1 / 3;
    }

    /* m-card: layout responsivo definido junto com a regra base
       (media query @900px e @600px logo apos a definicao) */

    /* Form rows mais compactas */
    .mestre-form-row {
        grid-template-columns: 1fr 1fr;
    }

    /* Settings modal: tipos em 3 cols */
    .mestre-tipos-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    /* Counters de quest stack */
    .mestre-quest-counters {
        flex-direction: column;
        gap: 6px;
    }
    .mestre-quest-count { min-width: 0; }

    /* Action btns wrap */
    .mestre-section-actions {
        flex-wrap: wrap;
    }
    .mestre-batalha-actions {
        flex-direction: column;
    }
    .mestre-action-btn {
        width: 100%;
    }
    .mestre-section-actions .mestre-action-btn {
        width: auto;
        flex: 1 1 auto;
    }
}

/* === ≤ 768px — tablets portrait ============================= */
@media (max-width: 768px) {
    .mestre-painel-title {
        font-size: 1rem;
        letter-spacing: 0.12em;
    }
    .mestre-painel-ornament { display: none; }
    .mestre-painel-close,
    .mestre-painel-settings {
        right: 8px;
    }
    .mestre-painel-settings { right: 46px; }
    .mestre-painel-body { padding: 10px 12px 14px; }
    .mestre-tab {
        padding: 6px 10px;
        font-size: 0.75rem;
        letter-spacing: 0.04em;
    }
    .mestre-tab-icon { margin-right: 3px; }

    /* Dashboard: 1 col em portrait */
    .dash-kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .dash-kpi { padding: 10px 12px; }
    .dash-kpi-num { font-size: 1.6rem; }
    .dash-kpi-icon { font-size: 1.3rem; }
    .dash-kpi-sub { font-size: 0.68rem; }

    .dash-passe-card {
        flex-direction: column;
        align-items: stretch;
    }
    .dash-passe-info { min-width: 0; }
    .dash-bar-row {
        grid-template-columns: 80px 1fr;
    }

    /* Bestiario / NPCs grid 1 col */
    .mestre-bestiario-grid {
        grid-template-columns: 1fr;
    }

    /* Hab editor 1 col */
    .hab-grid {
        grid-template-columns: 1fr;
    }
    .hab-card-stats { font-size: 0.75rem; }

    /* Quest active row stack */
    .mestre-quest-active-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        font-size: 0.78rem;
    }
    .mestre-quest-active-desc {
        grid-column: 1 / 3;
        font-size: 0.85rem;
    }

    /* Form modal: cobre quase tudo */
    .mestre-form-modal {
        width: 96vw !important;
        max-height: 92vh !important;
    }
    .mestre-form-row {
        grid-template-columns: 1fr;
    }

    /* Form labels e selects ocupam toda largura */
    .mestre-form-body label { font-size: 0.78rem; }

    /* Quest tpl: 1 col */
    .mestre-quest-tpl-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    /* Passe tier inputs: empilha */
    .mestre-passe-tier-side {
        flex-direction: column;
    }

    /* Habilidades preview / tooltip cards mais estreitos */
    .hab-form-tabs {
        gap: 2px;
    }
    .hab-form-tab {
        padding: 5px 10px;
        font-size: 0.78rem;
    }

    /* Settings modal */
    .mestre-settings-modal {
        width: 96vw !important;
    }
    .mestre-tipos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* NPC species picker em portrait: lista vertical maior */
    .npc-pick-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        max-height: 32vh;
    }
    .npc-pick-preview-img {
        width: 70px; height: 70px;
    }

    /* Habilidades efeito row stack */
    .hab-efeito-row {
        flex-direction: column;
        align-items: stretch;
    }
    .hab-efeito-row select,
    .hab-efeito-row input {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* === ≤ 480px — smartphones =================================== */
@media (max-width: 480px) {
    .mestre-painel-title {
        font-size: 0.85rem;
    }
    .mestre-painel-body { padding: 8px 8px 12px; }
    .mestre-painel-tabs { padding: 6px 8px 0; }
    .mestre-tab {
        padding: 5px 8px;
        font-size: 0.7rem;
    }

    .dash-kpi-grid { grid-template-columns: 1fr; }
    .dash-quest-row { grid-template-columns: 1fr; }
    .dash-bar-row {
        grid-template-columns: 60px 1fr;
        gap: 6px;
    }
    .dash-bar-label { font-size: 0.72rem; }

    .mestre-section-title {
        font-size: 0.95rem;
    }
    .mestre-section-sub { font-size: 0.78rem; }

    .mestre-action-btn {
        padding: 7px 12px;
        font-size: 0.82rem;
    }

    /* Form modal full screen */
    .mestre-form-modal {
        width: 100vw !important;
        max-height: 100vh !important;
        height: 100vh;
        border-radius: 0;
    }

    .mestre-form-body {
        padding: 12px 14px;
    }

    /* m-card mostra tudo empilhado */
    .m-card-img { width: 48px; height: 48px; }
    .m-card-nome { font-size: 0.88rem; }

    /* NPC pick cards menores */
    .npc-pick-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 6px;
    }
}

/* ============================================
   v0.38.0 — FICHA DO PERSONAGEM REDESIGN
   Inspirado em "Digital Character Sheet Redesign" (Dribbble) +
   paleta dourada existente do Alternart.
   ============================================ */

/* Container fullscreen */
#personagens-content.char-fullscreen {
    top: 2vh;
    left: 50%;
    transform: translateX(-50%);
    width: 99vw;
    max-width: 2400px;
    height: 96vh;
    max-height: 96vh;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1d130a 0%, #15100a 100%);
}

/* Header padrao do painel (Voltar / Titulo / Fechar) — em modo sheet vira barra ornamental fina */
#personagens-content.char-fullscreen > .bestiary-header {
    padding: 10px 18px 8px;
    border-bottom: 1px solid rgba(201,168,76,0.20);
    background: linear-gradient(180deg, rgba(201,168,76,0.10), transparent);
    flex-shrink: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

#personagens-content.char-fullscreen #personagens-title {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.18em;
    font-size: 0.9rem;
    color: rgba(232,216,184,0.75);
    text-transform: uppercase;
    margin: 0;
    flex: 1;
    text-align: center;
}

#personagens-content.char-fullscreen #char-sheet {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 0;
}

/* ============= IDENTIDADE (header sticky com avatar + stats) ============= */
.char-id-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 28px 16px;
    border-bottom: 1px solid rgba(201,168,76,0.20);
    background:
        radial-gradient(ellipse at top right, rgba(201,168,76,0.08), transparent 60%),
        rgba(0,0,0,0.20);
    flex-shrink: 0;
}

.char-id-row {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.char-id-portrait,
.char-id-portrait-placeholder {
    /* v0.38.3: retrato em 3x4 (proporcao tipo carteira/foto), nao circular */
    width: 96px;
    height: 128px;
    border-radius: 8px;
    flex-shrink: 0;
    object-fit: cover;
    background: linear-gradient(135deg, rgba(0,0,0,0.4), rgba(201,168,76,0.10));
    box-shadow: 0 0 0 2px var(--gold-dark, #8b6914), 0 0 0 5px rgba(0,0,0,0.4), 0 0 24px rgba(201,168,76,0.20);
    border: 2px solid var(--gold, #c9a84c);
}

.char-id-portrait-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--text-muted, #a09080);
}

.char-id-info {
    flex: 1;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.char-id-name {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 700;
    color: var(--gold-light, #e8d38a);
    font-size: 1.7rem;
    margin: 0;
    letter-spacing: 0.10em;
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.char-id-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: rgba(232,216,184,0.85);
    letter-spacing: 0.06em;
}

.char-id-meta .sep {
    color: rgba(201,168,76,0.5);
    font-size: 0.7rem;
}

.char-id-meta strong {
    color: var(--gold, #c9a84c);
    font-weight: 700;
}

.char-id-edit-btn {
    background: transparent;
    border: 1px solid var(--gold-dark, #8b6914);
    color: var(--gold-light, #e8d38a);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    transition: all 0.15s;
    margin-left: auto;
}

.char-id-edit-btn:hover {
    border-color: var(--gold, #c9a84c);
    background: rgba(201,168,76,0.10);
}

.char-id-xp {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.char-id-xp-bar {
    flex: 1;
    height: 8px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.char-id-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dark, #8b6914), var(--gold, #c9a84c), var(--gold-light, #e8d38a));
    box-shadow: 0 0 8px rgba(201,168,76,0.5);
    transition: width 0.4s ease-out;
}

.char-id-xp-text {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    color: rgba(232,216,184,0.65);
    letter-spacing: 0.06em;
    min-width: 110px;
    text-align: right;
}

/* ============= STAT CARDS (4 cards de estatistica abaixo do avatar) ============= */
.char-id-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.char-stat-card {
    background: linear-gradient(180deg, rgba(40,28,16,0.6), rgba(20,14,8,0.6));
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    overflow: hidden;
}

.char-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,0.6), transparent);
}

.char-stat-label {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(232,216,184,0.6);
    display: flex;
    align-items: center;
    gap: 6px;
}

.char-stat-value {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--gold-light, #e8d38a);
    letter-spacing: 0.04em;
    line-height: 1.1;
}

.char-stat-sub {
    font-family: 'Lora', serif;
    font-size: 0.72rem;
    color: var(--text-muted, #a09080);
    font-style: italic;
}

/* ============= TABS (pill buttons, nao abas-de-pasta) ============= */
.char-sheet-tabs {
    display: flex;
    gap: 8px;
    padding: 14px 28px 12px;
    background: rgba(0,0,0,0.30);
    border-bottom: 1px solid rgba(201,168,76,0.18);
    overflow-x: auto;
    overflow-y: visible;
    flex-wrap: nowrap;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
}

.char-sheet-tabs::-webkit-scrollbar { height: 6px; }
.char-sheet-tabs::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.35); border-radius: 3px; }

.char-tab {
    background: rgba(28,20,12,0.6);
    color: rgba(232,216,184,0.65);
    border: 1px solid rgba(201,168,76,0.20);
    border-radius: 999px;
    padding: 8px 18px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    letter-spacing: 0.10em;
    font-size: 0.82rem;
    text-transform: uppercase;
    transition: all 0.18s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.char-tab:hover {
    background: rgba(60,40,20,0.7);
    color: var(--gold-light, #e8d38a);
    border-color: rgba(201,168,76,0.45);
    transform: translateY(-1px);
}

.char-tab.active {
    background: linear-gradient(180deg, var(--gold-dark, #8b6914), rgba(139,105,20,0.5));
    color: #1a1410;
    border-color: var(--gold, #c9a84c);
    box-shadow: 0 4px 12px rgba(201,168,76,0.30), 0 0 0 1px rgba(232,216,184,0.4) inset;
}

.char-tab.active .char-tab-icon { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)); }

.char-tab-icon { font-size: 1.05rem; }

/* ============= AREA DE CONTEUDO ============= */
.char-tab-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 28px 32px;
    animation: charTabFadeIn 0.25s ease-out;
    min-height: 0;
}

@keyframes charTabFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* ============= CARD MODULAR (usado dentro das abas) ============= */
.char-card {
    background: linear-gradient(180deg, rgba(40,28,16,0.55), rgba(20,14,8,0.55));
    border: 1px solid rgba(201,168,76,0.22);
    border-radius: 12px;
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
}

.char-card::before {
    content: '';
    position: absolute;
    top: 0; left: 16px; right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,0.5), transparent);
}

.char-card-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-light, #e8d38a);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.char-card-title .char-card-icon { font-size: 1.15rem; }

.char-card-title .char-card-orn {
    color: rgba(201,168,76,0.5);
    margin-left: auto;
    font-size: 0.85rem;
}

.char-card-subtitle {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.82rem;
    color: var(--text-muted, #a09080);
    margin: 0 0 14px;
}

.char-card-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,0.30), transparent);
    margin: 14px 0;
    position: relative;
}

.char-card-divider::after {
    content: '❖';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, #1d130a, #15100a);
    color: rgba(201,168,76,0.6);
    padding: 0 10px;
    font-size: 0.7rem;
}

/* ============= ABA EQUIPE ============= */
.char-equipe-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.char-equipe-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

@media (max-width: 1024px) {
    .char-equipe-bottom { grid-template-columns: 1fr; }
}

/* Pontos card */
.char-points-grid-v2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 6px;
}

.char-point-cell {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(201,168,76,0.22);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.char-point-cell-label {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted, #a09080);
}

.char-point-cell-value {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--gold-light, #e8d38a);
    line-height: 1;
}

.char-point-cell-controls {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}

.char-point-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(201,168,76,0.35);
    background: rgba(0,0,0,0.4);
    color: var(--gold-light, #e8d38a);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.char-point-btn:hover {
    background: rgba(201,168,76,0.15);
    border-color: var(--gold, #c9a84c);
    transform: scale(1.05);
}

.char-points-available {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: var(--text-muted, #a09080);
    text-align: center;
}

.char-points-available strong {
    color: var(--gold-light, #e8d38a);
    font-weight: 700;
    font-size: 1.05rem;
}

/* Resumo do time */
.char-resumo-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.char-resumo-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: rgba(232,216,184,0.8);
}

.char-resumo-row:last-child { border-bottom: none; }

.char-resumo-row .label { color: var(--text-muted, #a09080); letter-spacing: 0.06em; }
.char-resumo-row .value { color: var(--gold-light, #e8d38a); font-weight: 600; }

.char-resumo-tipos {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.char-resumo-tipos img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(201,168,76,0.4);
    background: rgba(0,0,0,0.3);
    padding: 1px;
}

/* Time grid */
#personagens-content.char-fullscreen .monstros-ativos-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

@media (max-width: 1400px) {
    #personagens-content.char-fullscreen .monstros-ativos-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1100px) {
    #personagens-content.char-fullscreen .monstros-ativos-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============= ABA ARMAZEM ============= */
.char-armazem-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.char-armazem-search {
    flex: 1;
    min-width: 200px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 8px;
    padding: 8px 14px;
    color: var(--gold-light, #e8d38a);
    font-family: 'Lora', serif;
    font-size: 0.9rem;
}

.char-armazem-search::placeholder { color: var(--text-muted, #a09080); font-style: italic; }
.char-armazem-search:focus { outline: none; border-color: var(--gold, #c9a84c); box-shadow: 0 0 0 2px rgba(201,168,76,0.18); }

.char-armazem-sort-select {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--gold-light, #e8d38a);
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    cursor: pointer;
}

.char-armazem-sort-select:focus { outline: none; border-color: var(--gold, #c9a84c); }

.char-armazem-counters {
    display: flex;
    gap: 14px;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    color: var(--text-muted, #a09080);
    letter-spacing: 0.06em;
}

.char-armazem-counters strong { color: var(--gold-light, #e8d38a); font-weight: 700; }

.char-armazem-tipos {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 0;
    border-top: 1px dashed rgba(201,168,76,0.15);
    border-bottom: 1px dashed rgba(201,168,76,0.15);
    margin-bottom: 14px;
}

.char-armazem-tipos-label {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted, #a09080);
    margin-right: 6px;
}

.char-armazem-tipos img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(201,168,76,0.30);
    background: rgba(0,0,0,0.4);
    padding: 2px;
    cursor: pointer;
    transition: all 0.15s;
    opacity: 0.55;
}

.char-armazem-tipos img:hover { opacity: 1; transform: scale(1.08); }
.char-armazem-tipos img.active {
    opacity: 1;
    border-color: var(--gold, #c9a84c);
    box-shadow: 0 0 0 1px var(--gold-light, #e8d38a), 0 0 10px rgba(201,168,76,0.4);
}

.char-armazem-tipos-clear {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(201,168,76,0.25);
    color: var(--text-muted, #a09080);
    border-radius: 6px;
    padding: 4px 10px;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.char-armazem-tipos-clear:hover { color: var(--gold-light, #e8d38a); border-color: var(--gold-dark, #8b6914); }

#personagens-content.char-fullscreen .monstros-armazem-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

@media (max-width: 1400px) {
    #personagens-content.char-fullscreen .monstros-armazem-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 1100px) {
    #personagens-content.char-fullscreen .monstros-armazem-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============= ABA MOCHILA ============= */
.char-mochila-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 18px;
    align-items: start;
}

@media (max-width: 1024px) {
    .char-mochila-layout { grid-template-columns: 1fr; }
}

.char-mochila-left {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Equipamento rich card */
.char-equip-card {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(201,168,76,0.22);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.18s;
}

.char-equip-card:hover {
    border-color: var(--gold, #c9a84c);
    background: rgba(201,168,76,0.06);
    transform: translateY(-1px);
}

.char-equip-card-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(201,168,76,0.10), rgba(0,0,0,0.4));
    border: 1px solid rgba(201,168,76,0.30);
    border-radius: 10px;
    font-size: 1.7rem;
}

.char-equip-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.char-equip-card-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: var(--gold-light, #e8d38a);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

.char-equip-card-desc {
    font-family: 'Lora', serif;
    font-size: 0.78rem;
    color: var(--text-muted, #a09080);
    font-style: italic;
}

.char-equip-card-empty .char-equip-card-icon {
    border-style: dashed;
    color: var(--text-muted, #a09080);
}

/* Carteira (Pritz) */
.char-pritz-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(201,168,76,0.10), rgba(0,0,0,0.3));
    border: 1px solid rgba(201,168,76,0.30);
    border-radius: 12px;
    margin-top: 4px;
}

.char-pritz-icon { font-size: 2rem; line-height: 1; }

.char-pritz-value {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--gold-light, #e8d38a);
    letter-spacing: 0.04em;
    background: transparent;
    border: none;
    text-align: center;
    width: 130px;
    outline: none;
}

.char-pritz-label {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted, #a09080);
}

.char-pritz-arrows {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.char-pritz-arrow {
    width: 28px;
    height: 22px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(201,168,76,0.30);
    color: var(--gold-light, #e8d38a);
    cursor: pointer;
    font-size: 0.7rem;
    border-radius: 5px;
    transition: all 0.15s;
}

.char-pritz-arrow:hover { background: rgba(201,168,76,0.15); border-color: var(--gold, #c9a84c); }

/* Mochila grid */
#personagens-content.char-fullscreen .mochila-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

@media (max-width: 1400px) {
    #personagens-content.char-fullscreen .mochila-grid { grid-template-columns: repeat(5, 1fr); }
}

.char-mochila-counter {
    text-align: right;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    color: var(--text-muted, #a09080);
    letter-spacing: 0.08em;
    margin-top: 12px;
}

.char-mochila-counter strong { color: var(--gold-light, #e8d38a); font-weight: 700; }

/* ============= ABA POTENCIAL ============= */
.char-pot-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 8px;
}

@media (max-width: 1400px) { .char-pot-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1024px) { .char-pot-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .char-pot-grid { grid-template-columns: repeat(2, 1fr); } }

.char-pot-card {
    background: linear-gradient(180deg, rgba(40,28,16,0.55), rgba(20,14,8,0.55));
    border: 1px solid rgba(201,168,76,0.22);
    border-radius: 12px;
    padding: 10px 12px 10px;
    display: grid;
    grid-template-columns: minmax(40px, 38%) 1fr;
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
    cursor: pointer;
    transition: all 0.18s;
    position: relative;
}

.char-pot-card:hover {
    border-color: var(--gold, #c9a84c);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,168,76,0.25);
}

.char-pot-card-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

.char-pot-card-col-right { gap: 2px; }

.char-pot-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--gold-dark, #8b6914);
    padding: 3px;
    background: radial-gradient(circle, rgba(201,168,76,0.15), rgba(0,0,0,0.4));
    object-fit: contain;
}

.char-pot-card-name {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: rgba(232,216,184,0.85);
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    text-align: center;
    line-height: 1.1;
}

.char-pot-card-tier {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 1.55rem;
    color: var(--gold-light, #e8d38a);
    letter-spacing: 0.04em;
    line-height: 1;
}

.char-pot-card-pts {
    font-family: 'Lora', serif;
    font-size: 0.78rem;
    color: var(--text-muted, #a09080);
    font-style: italic;
    line-height: 1.1;
}

.char-pot-card-bar {
    grid-column: 1 / -1;
    width: 100%;
    height: 6px;
    background: rgba(0,0,0,0.5);
    border-radius: 999px;
    overflow: hidden;
    margin: 2px 0 0;
    border: 1px solid rgba(201,168,76,0.20);
}

.char-pot-card-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dark, #8b6914), var(--gold, #c9a84c));
    box-shadow: 0 0 6px rgba(201,168,76,0.4);
    transition: width 0.3s;
}

.char-pot-card-controls {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 2px;
}

.char-pot-card-controls .char-point-btn { width: 26px; height: 26px; font-size: 0.85rem; }

/* Painel "Comando & Elo por Tipo": lapis de fixar fica ANTES do tier e so aparece
   ao passar o cursor por cima da linha. O spacer reserva a coluna p/ alinhar as linhas. */
.treinador-cap-edit,
.treinador-cap-action-spacer { width: 18px; flex: none; text-align: center; }
.treinador-cap-edit {
    opacity: 0;
    background: none;
    border: none;
    color: var(--gold);
    cursor: pointer;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1;
    transition: opacity 0.12s;
}
.treinador-cap-row:hover .treinador-cap-edit { opacity: 1; }
.treinador-cap-row-pin { border-radius: 4px; }
.treinador-cap-row-pin:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }
.treinador-cap-row-pin:focus-visible .treinador-cap-edit { opacity: 1; }

/* Gestao do Narrador — tabela editavel dos tiers de Potencial */
.ng-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.ng-table th, .ng-table td { padding: 4px 6px; border-bottom: 1px solid rgba(255, 217, 122, 0.1); }
.ng-table th { color: var(--text-muted); font-weight: 600; position: sticky; top: 0; background: #1a130c; text-align: center; white-space: nowrap; }
.ng-input { background: rgba(0, 0, 0, 0.25); border: 1px solid #3a2516; color: inherit; border-radius: 4px; padding: 3px 5px; font-size: 0.8rem; }
.ng-input[type="number"] { text-align: right; }

/* ============= RESPONSIVE: TABLET ============= */
@media (max-width: 1024px) {
    .char-id-stats { grid-template-columns: repeat(2, 1fr); }
    .char-id-portrait, .char-id-portrait-placeholder { width: 92px; height: 92px; }
    .char-id-name { font-size: 1.4rem; }
}

/* ============= RESPONSIVE: MOBILE ============= */
@media (max-width: 768px) {
    #personagens-content.char-fullscreen {
        top: 0; left: 0;
        transform: none;
        width: 100vw; height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    .char-id-header { padding: 12px 14px; gap: 10px; }
    .char-id-row { gap: 14px; }
    .char-id-portrait, .char-id-portrait-placeholder { width: 76px; height: 76px; }
    .char-id-name { font-size: 1.15rem; }
    .char-id-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .char-stat-card { padding: 8px 10px; }
    .char-stat-value { font-size: 1.15rem; }
    .char-sheet-tabs { padding: 10px 14px 8px; gap: 6px; }
    .char-tab { padding: 6px 12px; font-size: 0.72rem; letter-spacing: 0.06em; }
    .char-tab-content { padding: 14px 14px 20px; }
    #personagens-content.char-fullscreen .monstros-ativos-grid,
    #personagens-content.char-fullscreen .monstros-armazem-grid { grid-template-columns: repeat(3, 1fr); }
    #personagens-content.char-fullscreen .mochila-grid { grid-template-columns: repeat(5, 1fr); }
    .char-pot-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .char-equipe-bottom { gap: 12px; }
    .char-armazem-toolbar { gap: 8px; }
}

/* ============================================
   v0.38.1 — REORGANIZACAO: ABA TREINADOR + EQUIPE COM ACCORDIONS
   ============================================ */

/* Aba Treinador — layout 2 cols (stat-cards a esquerda, pontos a direita) */
.char-treinador-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}

@media (max-width: 1024px) {
    .char-treinador-layout { grid-template-columns: 1fr; }
}

/* v0.38.3: Atributo card no estilo "ABILITY" do Dribbble Digital Character Sheet:
   label uppercase pequeno NO TOPO + valor GIGANTE centralizado + sub pequeno embaixo.
   Layout vertical, compacto, alta hierarquia visual. */
.char-attr-card {
    background: linear-gradient(180deg, rgba(40,28,16,0.55), rgba(20,14,8,0.55));
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 12px;
    padding: 14px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    overflow: hidden;
}

.char-attr-card::before {
    content: '';
    position: absolute;
    top: 0; left: 16px; right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,0.5), transparent);
}

.char-attr-card-label {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(232,216,184,0.7);
    font-weight: 600;
    text-align: center;
}

.char-attr-card-value {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 700;
    font-size: 2.6rem;
    color: var(--gold-light, #e8d38a);
    letter-spacing: 0.02em;
    line-height: 1;
    margin: 4px 0 2px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.char-attr-card-sub {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.72rem;
    color: var(--text-muted, #a09080);
    text-align: center;
    line-height: 1.3;
}

/* Linha de atributos: 3 cards horizontais (Comando · Elo · Pontos livres) */
.char-attr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 4px;
}

@media (max-width: 640px) {
    .char-attr-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .char-attr-card { padding: 10px 8px 8px; }
    .char-attr-card-value { font-size: 1.8rem; }
    .char-attr-card-label { font-size: 0.62rem; letter-spacing: 0.10em; }
}

/* Carteira (PRITZ) — card SEPARADO dos atributos. Tem icone + valor + label inline */
.char-currency-card {
    background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(40,28,16,0.5));
    border: 1px solid rgba(201,168,76,0.30);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
    margin-top: 10px;
}

.char-currency-card::before {
    content: '';
    position: absolute;
    top: 0; left: 16px; right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,0.6), transparent);
}

.char-currency-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.char-currency-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.char-currency-label {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(232,216,184,0.65);
    font-weight: 600;
}

.char-currency-amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.char-currency-amount-value {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--gold-light, #e8d38a);
    letter-spacing: 0.04em;
    line-height: 1;
}

.char-currency-amount-unit {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: var(--text-muted, #a09080);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

/* Mantem retrocompatibilidade: char-stat-card-big (legacy) com aliases */
.char-stat-card-big { display: none; }
.char-treinador-stats-col { display: contents; }

/* ============= ACCORDION (Equipe Ativa / Armazem) ============= */
.char-accordion {
    background: linear-gradient(180deg, rgba(40,28,16,0.55), rgba(20,14,8,0.55));
    border: 1px solid rgba(201,168,76,0.22);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
    position: relative;
}

.char-accordion::before {
    content: '';
    position: absolute;
    top: 0; left: 16px; right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,0.5), transparent);
    pointer-events: none;
}

.char-accordion[open] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.char-accordion-summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    user-select: none;
    transition: background 0.18s;
}

.char-accordion-summary::-webkit-details-marker { display: none; }
.char-accordion-summary::marker { content: ''; }

.char-accordion-summary:hover {
    background: rgba(201,168,76,0.06);
}

.char-accordion-chevron {
    width: 22px; height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold, #c9a84c);
    font-size: 0.9rem;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.char-accordion[open] .char-accordion-chevron {
    transform: rotate(90deg);
}

.char-accordion-icon {
    font-size: 1.3rem;
    line-height: 1;
}

.char-accordion-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-light, #e8d38a);
    margin: 0;
}

.char-accordion-meta {
    margin-left: auto;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    color: var(--text-muted, #a09080);
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.char-accordion-meta strong { color: var(--gold-light, #e8d38a); font-weight: 700; }

.char-accordion-meta-divider {
    color: rgba(201,168,76,0.4);
    font-size: 0.7rem;
}

.char-accordion-body {
    padding: 0 20px 20px;
    border-top: 1px dashed rgba(201,168,76,0.15);
    margin-top: 0;
    animation: accordionSlide 0.25s ease-out;
}

@keyframes accordionSlide {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.char-accordion-body-inner {
    padding-top: 14px;
}

.char-accordion-subtitle {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.82rem;
    color: var(--text-muted, #a09080);
    margin: 0 0 12px;
}

/* Resumo do time (compacto) — fica no topo do accordion Equipe Ativa */
.char-resumo-compact {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: rgba(0,0,0,0.30);
    border: 1px solid rgba(201,168,76,0.18);
    border-radius: 8px;
    margin-bottom: 14px;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    color: rgba(232,216,184,0.85);
}

.char-resumo-compact .item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.char-resumo-compact .item-label {
    font-size: 0.7rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted, #a09080);
}

.char-resumo-compact .item-value {
    color: var(--gold-light, #e8d38a);
    font-weight: 600;
}

.char-resumo-compact .char-resumo-tipos {
    margin-left: 4px;
}

/* Header da identidade — agora SEM stat-cards, fica mais compacto */
.char-id-header.char-id-header-compact {
    padding-bottom: 16px;
}

.char-id-header.char-id-header-compact .char-id-row {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .char-treinador-layout { gap: 12px; }
    .char-stat-card-big-value { font-size: 1.4rem; }
    .char-accordion-summary { padding: 12px 14px; gap: 8px; }
    .char-accordion-body { padding: 0 14px 14px; }
    .char-accordion-meta { font-size: 0.7rem; gap: 6px; }
    .char-resumo-compact { gap: 10px; padding: 8px 10px; font-size: 0.75rem; }
}

/* ============================================
   v0.38.2 — ARMAZEM USANDO COMPONENTE DO BESTIARIO
   ============================================ */

/* O wrapper .monstro-armazem-card (que carrega o botao X) precisa esticar
   como uma celula completa dentro de .bestiary-grid (grid 5 cols). */
.bestiary-grid > .monstro-armazem-card {
    display: flex;
    flex-direction: column;
}

/* v0.38.4: usar EXATAMENTE o mesmo layout do bestiario do editor:
   5 cols x 2 linhas = 10 cards por pagina. Sem auto-fill — mantem
   o componente identico ao bestiario. */
.char-tab-content .bestiary-grid {
    grid-template-columns: repeat(5, 1fr);
}

/* v0.38.5: o bestiario do editor vive num modal de max-width ~900px,
   entao cada card fica ~180px. Como a ficha eh tela cheia (ate 2400px),
   sem ajuste os cards ficam GIGANTES. Limitar a largura dos elementos
   do armazem para o cards saiam exatamente do tamanho do bestiario.
   Centralizado horizontalmente. */
#acc-armazem .char-sort-bar,
#acc-armazem .bestiary-actions,
#acc-armazem .bestiary-grid,
#acc-armazem .bestiary-pagination {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

/* v0.38.6: mesmo tratamento aplicado ao accordion da Equipe Ativa */
#acc-ativa .bestiary-grid,
#acc-ativa .char-resumo-compact {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

/* O wrapper .monstro-ativo-slot (com botao X de retirar) tambem precisa
   esticar como uma celula do .bestiary-grid (igual .monstro-armazem-card). */
.bestiary-grid > .monstro-ativo-slot {
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
}

/* Responsivo mobile (768px): grid passa para 3 cols (mesmo padrao mobile do bestiario). */
@media (max-width: 768px) {
    .char-tab-content .bestiary-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
}

/* Toolbar do bestiario reaproveitada: dentro do accordion da ficha o
   add-button "+ Novo Monstro" do narrador eh mais compacto. */
.char-accordion-body .bestiary-actions .btn-add-item {
    white-space: nowrap;
}

/* v0.38.4: barra de ordenacao acima do search (botoes em pill) */
.char-sort-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 0;
    margin-bottom: 10px;
    border-bottom: 1px dashed rgba(201,168,76,0.15);
}

.char-sort-bar-label {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted, #a09080);
    margin-right: 4px;
}

.char-sort-btn {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(201,168,76,0.22);
    color: rgba(232,216,184,0.75);
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    transition: all 0.15s;
}

.char-sort-btn:hover {
    border-color: var(--gold-dark, #8b6914);
    background: rgba(201,168,76,0.08);
    color: var(--gold-light, #e8d38a);
}

.char-sort-btn.active {
    background: linear-gradient(180deg, var(--gold-dark, #8b6914), rgba(139,105,20,0.5));
    color: #1a1410;
    border-color: var(--gold, #c9a84c);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(201,168,76,0.25);
}

/* ================================================================== *
 * v0.40.0 — Painel de Mestrar (Fase 7) — cockpit do narrador (MOCK)
 * ================================================================== */
.mestrar-cockpit-bd {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.82);
    z-index: 13500;
    display: flex; align-items: center; justify-content: center;
    animation: mestrar-fade 0.18s ease-out;
}
@keyframes mestrar-fade { from { opacity: 0; } to { opacity: 1; } }

.mestrar-cockpit {
    width: min(1280px, 96vw);
    height: min(900px, 94vh);
    background: linear-gradient(160deg, #1a120a 0%, #0f0805 100%);
    border: 1px solid rgba(201, 168, 76, 0.45);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(201,168,76,0.12) inset;
    color: var(--parchment, #e8d8b8);
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
}

/* Header --------------------------------------------------------- */
.mestrar-cockpit-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px;
    background: linear-gradient(180deg, rgba(201,168,76,0.18), rgba(201,168,76,0.04));
    border-bottom: 1px solid rgba(201, 168, 76, 0.35);
}
.mestrar-cockpit-header-left {
    display: flex; align-items: center; gap: 14px;
}
.mestrar-cockpit-icon { font-size: 1.6rem; }
.mestrar-cockpit-title {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    color: var(--gold-light, #f3da9c);
    letter-spacing: 0.05em;
}
.mestrar-cockpit-subtitle {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Lora', serif;
    font-size: 0.78rem;
    color: rgba(232, 216, 184, 0.65);
    margin-top: 2px;
}
.mestrar-cockpit-mock-tag {
    background: rgba(255, 167, 38, 0.18);
    border: 1px solid rgba(255, 167, 38, 0.55);
    color: #ffb74d;
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    font-family: 'Cinzel', serif;
    font-weight: 700;
}
.mestrar-cockpit-encerrar {
    background: linear-gradient(180deg, rgba(200,50,60,0.45), rgba(120,20,30,0.45));
    border: 1px solid rgba(200,50,60,0.7);
    color: #ffd0d4;
    padding: 7px 14px;
    border-radius: 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: filter 0.12s;
}
.mestrar-cockpit-encerrar:hover { filter: brightness(1.15); }

/* Body (recursos + meio) ----------------------------------------- */
.mestrar-cockpit-body {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 14px;
    padding: 14px;
    min-height: 0;
}

/* RECURSOS (coluna esquerda) ------------------------------------- */
.mestrar-cockpit-recursos {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(201, 168, 76, 0.22);
    border-radius: 10px;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.mestrar-resources { display: flex; flex-direction: column; height: 100%; }
.mestrar-resources-tabs {
    display: flex;
    border-bottom: 1px solid rgba(201, 168, 76, 0.25);
}
.mestrar-rtab {
    flex: 1;
    background: transparent;
    border: none;
    color: rgba(232, 216, 184, 0.7);
    padding: 10px 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.mestrar-rtab:hover { color: var(--gold-light, #f3da9c); background: rgba(201,168,76,0.08); }
.mestrar-rtab.is-active {
    color: var(--gold-light, #f3da9c);
    border-bottom-color: var(--gold, #c9a84c);
    background: rgba(201,168,76,0.12);
}
.mestrar-resources-body {
    flex: 1; overflow: auto;
    padding: 10px;
}
.mestrar-resources-empty {
    text-align: center;
    color: rgba(232, 216, 184, 0.55);
    font-style: italic;
    padding: 20px 10px;
    font-size: 0.85rem;
}
.mestrar-resources-empty small { display: block; margin-top: 6px; font-size: 0.78rem; opacity: 0.85; }

.mestrar-resource-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.mestrar-resource-item {
    display: grid;
    grid-template-columns: 28px 1fr 24px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(201, 168, 76, 0.18);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.1s;
}
.mestrar-resource-item:hover {
    background: rgba(201, 168, 76, 0.12);
    border-color: rgba(201, 168, 76, 0.55);
    transform: translateY(-1px);
}
.mestrar-resource-icon { font-size: 1.05rem; text-align: center; }
.mestrar-resource-info { display: flex; flex-direction: column; min-width: 0; }
.mestrar-resource-name {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: var(--parchment, #e8d8b8);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mestrar-resource-meta {
    font-family: 'Lora', serif;
    font-size: 0.7rem;
    color: rgba(232, 216, 184, 0.55);
}
.mestrar-resource-add {
    text-align: center;
    color: var(--gold-light, #f3da9c);
    font-weight: 700;
    font-size: 1.1rem;
    opacity: 0.6;
}
.mestrar-resource-item:hover .mestrar-resource-add { opacity: 1; }

/* Regiao picker */
.mestrar-regiao-pick { display: flex; flex-direction: column; gap: 6px; }
.mestrar-resource-label {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: rgba(232, 216, 184, 0.7);
    margin-top: 6px;
}
.mestrar-resource-select {
    background: rgba(0, 0, 0, 0.45);
    color: #f3da9c;
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 5px;
    padding: 6px 10px;
    font-family: 'Lora', serif;
    font-size: 0.85rem;
    cursor: pointer;
}
.mestrar-resource-select:disabled { opacity: 0.45; cursor: not-allowed; }
.mestrar-resource-apply {
    margin-top: 8px;
    background: linear-gradient(180deg, #c9a84c 0%, #8d6f24 100%);
    color: #1a0e08;
    border: 1px solid #d8b766;
    border-radius: 6px;
    padding: 8px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.12s;
}
.mestrar-resource-apply:hover:not(:disabled) { filter: brightness(1.1); }
.mestrar-resource-apply:disabled { opacity: 0.4; cursor: not-allowed; }
.mestrar-resource-hint {
    font-size: 0.7rem;
    color: rgba(232, 216, 184, 0.45);
    font-style: italic;
    margin: 8px 0 0;
}

/* v0.41.18 - Detalhamento da regiao inline no Contexto atual */
.mestrar-context-cenario-cont {
    font-style: italic;
    color: rgba(232, 216, 184, 0.55);
    font-weight: 400;
}
.mestrar-regiao-detalhe {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(201, 168, 76, 0.22);
    border-radius: 10px;
    overflow: hidden;
}
.mestrar-regiao-hero {
    position: relative;
    width: 100%;
    height: 140px;
    overflow: hidden;
}
.mestrar-regiao-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7) saturate(1.2);
    display: block;
}
.mestrar-regiao-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(26,20,16,1) 0%, rgba(26,20,16,0.5) 40%, transparent 70%);
    pointer-events: none;
}
.mestrar-regiao-hero-nome {
    position: absolute;
    left: 14px;
    bottom: 10px;
    margin: 0;
    color: var(--gold-light, #f3da9c);
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.mestrar-regiao-info {
    padding: 12px 14px 8px;
}
.mestrar-regiao-desc {
    color: var(--parchment-dark, #d4c4a0);
    font-style: italic;
    font-size: 0.85rem;
    line-height: 1.55;
    margin: 0 0 10px;
}
.mestrar-regiao-difficulty {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mestrar-regiao-difficulty-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mestrar-regiao-difficulty-label {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--gold-dark, #8d6f24);
    text-transform: uppercase;
}
.mestrar-regiao-difficulty-value {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    color: var(--text-light, #e8d8b8);
    letter-spacing: 0.05em;
}
.mestrar-regiao-difficulty-bar-bg {
    width: 100%;
    height: 8px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 4px;
    overflow: hidden;
}
.mestrar-regiao-difficulty-bar-fill {
    height: 100%;
    transition: width 0.4s ease-out;
}
.mestrar-regiao-monstros-wrap {
    padding: 6px 14px 12px;
    border-top: 1px solid rgba(201,168,76,0.12);
    margin-top: 4px;
}
.mestrar-regiao-monstros-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0;
}
.mestrar-regiao-monstros-title {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    color: var(--gold-light, #f3da9c);
    letter-spacing: 0.08em;
}
/* Olhinho — reusa o mesmo padrao visual do .hab-card-eye (mestre_painel),
   mas mais leve. Quando is-closed, vira aviso (vermelho-dourado fraco). */
.mestrar-regiao-monstros-eye {
    background: transparent;
    border: 1px solid rgba(201,168,76,0.35);
    color: var(--gold-light, #f3da9c);
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.12s;
}
.mestrar-regiao-monstros-eye svg {
    width: 14px;
    height: 14px;
}
.mestrar-regiao-monstros-eye:hover {
    background: rgba(201,168,76,0.18);
    transform: scale(1.06);
}
.mestrar-regiao-monstros-eye.is-closed {
    color: rgba(232,216,184,0.5);
    border-color: rgba(201,168,76,0.2);
}

/* Lista: grid responsivo. Cada card ocupa 1 linha com 3 colunas internas
   (imagem | info | tipos empilhados). */
.mestrar-regiao-monstros-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.mestrar-regiao-monstro {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.32);
    border: 1px solid rgba(201,168,76,0.15);
    border-radius: 6px;
}
.mestrar-regiao-monstro-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 4px;
    background: rgba(0,0,0,0.35);
    flex-shrink: 0;
}
.mestrar-regiao-monstro-img-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(232,216,184,0.35);
    font-size: 1.6rem;
}
/* Info: 2 linhas (nome | tipo1) e (raridade | tipo2). Os tipos ficam DENTRO
   das linhas via .mestrar-regiao-monstro-row, separados do info por space-between. */
.mestrar-regiao-monstro-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mestrar-regiao-monstro-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}
.mestrar-regiao-monstro-row > .monster-type-icon-sm {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.mestrar-regiao-monstro-nome {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    color: var(--text-light, #e8d8b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    /* fitCardNames (engine/core/app.js) ajusta o font-size desta classe pra
       caber na largura do parent — observer global pega .bestiary-card-name */
}
.mestrar-regiao-monstro-rar {
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: 'Cinzel', serif;
    flex: 1;
    min-width: 0;
}
.mestrar-regiao-monstro-rar-comum    { color: #999; }
.mestrar-regiao-monstro-rar-raro     { color: #5dade2; }
.mestrar-regiao-monstro-rar-epico    { color: #bb8fce; }
.mestrar-regiao-monstro-rar-lendario { color: var(--gold-light, #f3da9c); }

/* "?" dentro do circulo no lugar do icone do tipo (estado escondido) */
.monster-type-icon-sm.mestrar-regiao-tipo-unknown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(201,168,76,0.35);
    color: rgba(232,216,184,0.6);
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 700;
    border-radius: 50%;
    font-size: 0.85rem;
    line-height: 1;
}

/* Estado escondido do card: nome em cinza-escuro (.monster-undiscovered ja
   pinta a imagem de preto via brightness(0) saturate(0)). */
.mestrar-regiao-monstro.is-hidden .mestrar-regiao-monstro-nome,
.mestrar-regiao-monstro.is-hidden .mestrar-regiao-monstro-rar {
    color: #444;
    letter-spacing: 0.18em;
    font-style: italic;
}

/* v0.47.0: olhinho generalizado (.alt-eye-btn) — reusa o mesmo visual do
   .mestrar-regiao-monstros-eye (acima), com variantes de tamanho. Usado no
   Bestiario Secreto e na aba NPCs do Painel do Mestre. Mantemos o seletor
   antigo como alias pra nao regredir a sessao de mestrar. */
.alt-eye-btn {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(201,168,76,0.55);
    color: var(--gold-light, #f3da9c);
    padding: 0;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.12s;
    flex-shrink: 0;
}
.alt-eye-btn:hover {
    background: rgba(201,168,76,0.28);
    transform: scale(1.06);
}
.alt-eye-btn.is-closed {
    color: rgba(232,216,184,0.7);
    border-color: rgba(201,168,76,0.4);
    background: rgba(0,0,0,0.5);
}
.alt-eye-btn-sm { width: 26px; height: 26px; }
.alt-eye-btn-sm svg { width: 14px; height: 14px; }
.alt-eye-btn-md { width: 36px; height: 36px; }
.alt-eye-btn-md svg { width: 20px; height: 20px; }

/* Olhinho global posicionado no header da aba (ao lado do titulo).
   `.bestiary-header` e flex com `justify-content: space-between`, entao o
   olhinho vai pra direita naturalmente. */
.bestiary-header .alt-eye-btn[data-eye-scope="global"] {
    margin-left: auto;
    flex-shrink: 0;
}

/* Olhinho por card — canto inferior direito, sobre o card.
   Top-right ja e ocupado pelo X de deletar e nuvem de publicar. */
.bestiary-card .alt-eye-btn[data-eye-scope="card"] {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 5;
    background: rgba(0,0,0,0.55);
}
.bestiary-card .alt-eye-btn[data-eye-scope="card"]:hover {
    background: rgba(0,0,0,0.75);
}

/* Estado escondido do card no Bestiario/NPCs:
   - Imagem ja recebe .monster-undiscovered (brightness 0) via renderMonsterImg
     ou inline em img.bestiary-card-img.
   - Nome em itálico/cinza com letter-spacing (mesmo tratamento das Regioes).
   - Badge de level escondido.
   - Tipos sao escondidos via icones .display:none — o "?" e injetado via
     .alt-tipo-unknown (abaixo).
   - Overlays de acao (X, nuvem, dado) permanecem visiveis: usuario aprovou
     "Silhueta + manter X e dado" (preserva controle sem revelar). */
.bestiary-card.is-hidden .bestiary-card-name {
    color: #444;
    letter-spacing: 0.18em;
    font-style: italic;
}
.bestiary-card.is-hidden .monster-level-badge {
    visibility: hidden;
}
.bestiary-card.is-hidden .bestiary-card-types > img.monster-type-icon-sm {
    display: none;
}
/* Silhueta total da imagem do card (vale tanto pra <img> quanto pro <div>
   fallback com emoji \u{1F432}/\u{1F9D9}). Cobre o caso do NPC sem retrato.
   `!important` derrota qualquer regra mais especifica de `.bestiary-card-img`. */
.bestiary-card.is-hidden .bestiary-card-img,
.bestiary-card.is-hidden img.bestiary-card-img,
.bestiary-card.is-hidden div.bestiary-card-img,
.bestiary-card.is-hidden .bestiary-card-img-wrap > * {
    filter: brightness(0) saturate(0) !important;
}
/* Tambem mascara o conteudo textual do fallback (emoji ou ?). */
.bestiary-card.is-hidden .bestiary-card-img-wrap {
    background: #000;
}

/* "?" no lugar do icone do tipo — clone visual de .mestrar-regiao-tipo-unknown */
.monster-type-icon-sm.alt-tipo-unknown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(201,168,76,0.35);
    color: rgba(232,216,184,0.6);
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-weight: 700;
    border-radius: 50%;
    font-size: 0.85rem;
    line-height: 1;
    width: 20px;
    height: 20px;
}

/* MEIO (contexto + acoes) ---------------------------------------- */
.mestrar-cockpit-meio {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 14px;
    min-height: 0;
}

/* Contexto */
.mestrar-context {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(201, 168, 76, 0.22);
    border-radius: 10px;
    padding: 12px 16px;
    overflow: auto;
}
.mestrar-context-title {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    color: var(--gold-light, #f3da9c);
    letter-spacing: 0.05em;
    margin: 0 0 10px;
}
.mestrar-context-cenario {
    font-family: 'Lora', serif;
    font-size: 0.92rem;
    margin-bottom: 12px;
    padding: 8px 10px;
    background: rgba(201, 168, 76, 0.06);
    border-left: 3px solid var(--gold, #c9a84c);
    border-radius: 0 6px 6px 0;
}
.mestrar-context-label {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    color: rgba(232, 216, 184, 0.65);
    letter-spacing: 0.05em;
    margin-right: 6px;
}
.mestrar-context-pessoas { display: flex; flex-direction: column; gap: 6px; }
.mestrar-context-empty {
    color: rgba(232, 216, 184, 0.45);
    font-style: italic;
    font-size: 0.85rem;
    padding: 10px 0;
}
.mestrar-context-line {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(201, 168, 76, 0.15);
    border-radius: 6px;
    font-family: 'Lora', serif;
    font-size: 0.88rem;
}
.mestrar-context-tag {
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid;
    z-index: 2;
}
.mestrar-context-tag.npc {
    color: #9bd3ff; border-color: rgba(155, 211, 255, 0.55); background: rgba(155, 211, 255, 0.1);
}
.mestrar-context-tag.mons,
.mestrar-context-tag.mons-of {
    color: #ffd97a; border-color: rgba(255, 217, 122, 0.55); background: rgba(255, 217, 122, 0.1);
}
.mestrar-context-tag.mons-se {
    color: #ff9b9b; border-color: rgba(255, 155, 155, 0.55); background: rgba(255, 155, 155, 0.1);
}

/* v0.40.7: header "Bestiarios" + grupo de bot\u{f5}es OFICIAL/SECRETO lado a lado */
.mestrar-bestiarios-header {
    font-family: 'Cinzel', serif;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    color: rgba(232, 216, 184, 0.55);
    text-transform: uppercase;
    padding: 4px 4px 6px;
    border-bottom: 1px solid rgba(201, 168, 76, 0.18);
    margin-bottom: 10px;
}
.mestrar-bestiarios-grupo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.mestrar-ob-oficial { border-color: rgba(201, 168, 76, 0.55); }
.mestrar-ob-secreto {
    border-color: rgba(155, 89, 182, 0.5);
    background: linear-gradient(180deg, rgba(155, 89, 182, 0.18), rgba(95, 50, 130, 0.18));
    color: #d8b8f0;
}
.mestrar-ob-secreto:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(155, 89, 182, 0.32), rgba(95, 50, 130, 0.32));
    border-color: rgba(190, 130, 230, 0.85);
}

/* v0.40.8: NPCs reais — grid de cards na aba Recursos */
.mestrar-npc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    padding: 2px;
}
.mestrar-npc-card-pick {
    background: transparent; border: none; padding: 0;
    cursor: pointer; color: inherit;
    transition: transform 0.12s;
}
.mestrar-npc-card-pick:hover { transform: translateY(-2px); }
.mestrar-npc-card-pick:hover .bestiary-card {
    border-color: rgba(155, 211, 255, 0.7);
    box-shadow: 0 4px 12px rgba(155, 211, 255, 0.18);
}
.mestrar-npc-card-count {
    font-family: 'Lora', serif;
    font-size: 0.68rem;
    color: rgba(232, 216, 184, 0.5);
    text-align: center;
    padding: 0 4px 4px;
}
.mestrar-context-tag.npc-pub {
    color: #7df0a8; border-color: rgba(125, 240, 168, 0.55); background: rgba(125, 240, 168, 0.1);
}
.mestrar-context-tag.npc-prv {
    color: rgba(232, 216, 184, 0.6); border-color: rgba(232, 216, 184, 0.35); background: rgba(232, 216, 184, 0.08);
}

/* v0.40.8: bloco do NPC ativo no Contexto (substitui o Armazem quando ha NPC) */
.mestrar-npc-ativo {
    display: flex; flex-direction: column; gap: 10px;
}
.mestrar-npc-ativo-header {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(155, 211, 255, 0.08), rgba(155, 211, 255, 0.02));
    border: 1px solid rgba(155, 211, 255, 0.4);
    border-radius: 8px;
}
.mestrar-npc-ativo-img {
    width: 56px; height: 56px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid rgba(155, 211, 255, 0.5);
    background: rgba(0, 0, 0, 0.4);
}
.mestrar-npc-ativo-img.mestrar-armazem-card-fallback {
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    color: rgba(232, 216, 184, 0.45);
}
.mestrar-npc-ativo-info {
    flex: 1;
    display: flex; flex-direction: column; gap: 4px;
}
.mestrar-npc-ativo-info .mestrar-context-tag { align-self: flex-start; }
.mestrar-npc-ativo-nome {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: var(--gold-light, #f3da9c);
    letter-spacing: 0.04em;
}
.mestrar-npc-ativo-info small {
    font-family: 'Lora', serif;
    font-size: 0.74rem;
    color: rgba(232, 216, 184, 0.55);
}

/* v0.40.13: blocos retr\u{e1}teis do cockpit (Contexto / A\u{e7}\u{e3}o / Chat) */
.mestrar-collapsible-header {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
    padding: 0;
    user-select: none;
    transition: opacity 0.12s;
}
.mestrar-collapsible-header:hover { opacity: 0.85; }
.mestrar-collapsible-header > h3,
.mestrar-collapsible-header > h4 {
    margin: 0;
}
.mestrar-collapse-arrow {
    display: inline-block;
    color: var(--gold-light, #f3da9c);
    font-size: 0.7rem;
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
.is-collapsed > .mestrar-collapsible-header .mestrar-collapse-arrow {
    transform: rotate(-90deg);
}
.is-collapsed > .mestrar-collapsible-body {
    display: none;
}

/* v0.41.3: chat removido — regras antigas .mestrar-cockpit-chat /
   .mestrar-chat-* deletadas (eram só pro modo mock). */

/* Imagem no card do monstro (lista lateral - usado em Secreto) */
.mestrar-resource-img {
    width: 28px; height: 28px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(201, 168, 76, 0.3);
    background: rgba(0, 0, 0, 0.4);
}

/* Botao grande "Abrir Bestiario" (aba Monstros / Oficial) */
.mestrar-open-bestiario {
    width: 100%;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(201, 168, 76, 0.22), rgba(141, 111, 36, 0.22));
    border: 1px solid rgba(201, 168, 76, 0.5);
    border-radius: 8px;
    color: var(--gold-light, #f3da9c);
    cursor: pointer;
    transition: all 0.12s;
    text-align: left;
}
.mestrar-open-bestiario:hover {
    background: linear-gradient(180deg, rgba(201, 168, 76, 0.35), rgba(141, 111, 36, 0.35));
    border-color: rgba(201, 168, 76, 0.85);
    transform: translateY(-1px);
}
.mestrar-ob-icon { font-size: 1.6rem; }
.mestrar-ob-text { display: flex; flex-direction: column; gap: 2px; }
.mestrar-ob-text strong {
    font-family: 'Cinzel', serif; font-size: 0.95rem; letter-spacing: 0.04em;
}
.mestrar-ob-text small {
    font-family: 'Lora', serif; font-size: 0.72rem;
    color: rgba(232, 216, 184, 0.55);
}

/* Picker do bestiario (sub-modal grid de cards) */
.mestrar-submodal-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: #f3da9c;
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 5px;
    padding: 7px 10px;
    font-family: 'Lora', serif;
    font-size: 0.9rem;
    margin-bottom: 12px;
    box-sizing: border-box;
}
.mestrar-submodal-input:focus {
    outline: none;
    border-color: var(--gold, #c9a84c);
    box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.2);
}
.mestrar-bp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px;
}
.mestrar-bp-card {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
    padding: 10px 6px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: 8px;
    color: var(--parchment, #e8d8b8);
    cursor: pointer;
    transition: all 0.12s;
    font-family: inherit;
}
.mestrar-bp-card:hover {
    background: rgba(201, 168, 76, 0.15);
    border-color: rgba(201, 168, 76, 0.7);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 168, 76, 0.25);
}
.mestrar-bp-img {
    width: 80px; height: 80px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(201, 168, 76, 0.2);
}
.mestrar-bp-img-fallback {
    width: 80px; height: 80px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(201, 168, 76, 0.2);
    color: rgba(232, 216, 184, 0.4);
    font-size: 1.5rem;
}
.mestrar-bp-name {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    color: var(--gold-light, #f3da9c);
    text-align: center;
    line-height: 1.1;
}
.mestrar-bp-tipo {
    font-family: 'Lora', serif;
    font-size: 0.68rem;
    color: rgba(232, 216, 184, 0.55);
    text-align: center;
    text-transform: capitalize;
}
.mestrar-context-rm {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(200, 50, 60, 0.4);
    color: #ff8a8a;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.78rem;
    transition: background 0.12s;
}
.mestrar-context-rm:hover { background: rgba(200, 50, 60, 0.18); }
.mestrar-context-empty-inline {
    color: rgba(232, 216, 184, 0.45);
    font-style: italic;
    font-size: 0.82rem;
    padding: 4px 0;
}
.mestrar-context-npc-block { margin-bottom: 14px; }

/* Armazem da Campanha — 1 linha de bestiary-cards reais (igual armazem do
   jogador, porem 1 linha so com scroll horizontal) */
.mestrar-armazem {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(201, 168, 76, 0.18);
    border-radius: 8px;
    padding: 10px 12px;
}
.mestrar-armazem-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.mestrar-armazem-title {
    font-family: 'Cinzel', serif;
    font-size: 0.88rem;
    color: var(--gold-light, #f3da9c);
    letter-spacing: 0.05em;
    margin: 0;
}
.mestrar-armazem-count {
    font-family: 'Lora', serif;
    font-size: 0.75rem;
    color: rgba(232, 216, 184, 0.55);
    font-style: italic;
}
.mestrar-armazem-row {
    display: flex; gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    min-height: 180px;
    align-items: stretch;
}
.mestrar-armazem-empty {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    color: rgba(232, 216, 184, 0.4);
    font-style: italic;
    font-size: 0.85rem;
    border: 1px dashed rgba(201, 168, 76, 0.18);
    border-radius: 8px;
    padding: 20px;
}
.mestrar-armazem-card-wrap {
    position: relative;
    width: 130px;
    flex-shrink: 0;
}
.mestrar-armazem-card {
    /* Reusa .bestiary-card mas garante largura consistente na fila */
    width: 100%;
}
.mestrar-armazem-card-tag {
    position: absolute;
    top: 6px; left: 6px;
    z-index: 2;
    font-size: 0.6rem;
    padding: 2px 5px;
}
.mestrar-armazem-card-fallback {
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: rgba(232, 216, 184, 0.35);
    font-size: 2.4rem;
    font-family: 'Cinzel Decorative', serif;
    width: 80%;
    height: 80%;
}
.mestrar-armazem-card-rm {
    position: absolute;
    top: -8px; right: -8px;
    z-index: 3;
    width: 24px; height: 24px;
    padding: 0;
    background: rgba(120, 20, 30, 0.95);
    border: 1px solid rgba(200, 50, 60, 0.7);
    color: #fff;
    border-radius: 50%;
    font-size: 0.78rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    transition: transform 0.12s, background 0.12s;
}
.mestrar-armazem-card-rm:hover {
    transform: scale(1.12);
    background: rgba(180, 40, 50, 1);
}
/* Cards do Armazem da Campanha reusam .bestiary-card / .bestiary-card-types
   / .monster-type-icon-sm — sem overrides aqui pra manter visual identico
   ao bestiario do jogador. So a tag OFI/SEC eh propria. */

/* v0.41.17: Armazem da Campanha agora usa .bestiary-grid (mesmo layout do
   picker openSelectMonsterFromBestiaryModal). O wrap dos cards (que tinha
   width:130px fixa pra fila horizontal antiga) precisa esticar pra preencher
   a celula do grid e o input/dropdown do filtro ja vem com .bestiary-actions. */
.mestrar-armazem-bestiary .mestrar-armazem-card-wrap {
    width: 100%;
    /* Igual ao armazem do jogador (.monstro-armazem-card — style.css:5965/21105):
       o wrap vira coluna flex e o card interno preenche 100% da celula do grid,
       pra ter SEMPRE o mesmo tamanho dos slots vazios (.bestiary-card-empty),
       sem crescer nem encolher conforme o conteudo. */
    display: flex;
    flex-direction: column;
    /* min-width:0 impede que um nome comprido (white-space:nowrap) "estoure" a
       coluna 1fr e engorde o card; com a coluna travada, o auto-fit do nome
       (fitCardNames em app.js) encolhe a fonte pra caber — igual ao bestiario. */
    min-width: 0;
}
.mestrar-armazem-bestiary .mestrar-armazem-card {
    height: 100%;
}
.mestrar-armazem-bestiary .bestiary-grid {
    min-height: 180px;
}
.mestrar-armazem-bestiary .bestiary-actions {
    margin-bottom: 8px;
}

/* Acoes rapidas */
.mestrar-actions {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(201, 168, 76, 0.22);
    border-radius: 10px;
    padding: 12px 16px;
}
.mestrar-actions-title {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    color: var(--gold-light, #f3da9c);
    letter-spacing: 0.05em;
    margin: 0 0 10px;
}
.mestrar-actions-grid {
    display: grid;
    /* v0.41.3: como só sobrou um botão (batalha narrada), o grid agora é uma
       coluna só pra o texto não precisar quebrar em duas linhas. */
    grid-template-columns: 1fr;
    gap: 10px;
}
.mestrar-action-btn-cockpit {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(201,168,76,0.22), rgba(141,111,36,0.22));
    border: 1px solid rgba(201, 168, 76, 0.5);
    color: var(--gold-light, #f3da9c);
    border-radius: 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.12s;
    text-align: left;
}
.mestrar-action-btn-cockpit:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(201,168,76,0.35), rgba(141,111,36,0.35));
    border-color: rgba(201, 168, 76, 0.85);
    transform: translateY(-1px);
}
.mestrar-action-btn-cockpit:disabled {
    opacity: 0.4; cursor: not-allowed;
    filter: grayscale(0.5);
}
.mestrar-action-icon { font-size: 1.2rem; }
.mestrar-action-label { flex: 1; white-space: nowrap; }
.mestrar-action-btn-cockpit-secondary {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(201, 168, 76, 0.3);
    color: rgba(232, 216, 184, 0.85);
    padding: 8px 14px;
    border-radius: 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.12s;
}
.mestrar-action-btn-cockpit-secondary:hover { background: rgba(201, 168, 76, 0.1); }

/* v0.41.3: chat removido — bloco completo de regras .mestrar-cockpit-chat,
   .mestrar-chat-* e .mestrar-chat-form deletado (eram do modo mock). */

/* SUB-MODAIS ----------------------------------------------------- */
.mestrar-submodal-bd {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 14000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: mestrar-fade 0.15s ease-out;
}
.mestrar-submodal {
    position: relative;
    background: linear-gradient(160deg, #1a120a 0%, #100905 100%);
    border: 1px solid rgba(201, 168, 76, 0.55);
    border-radius: 12px;
    padding: 18px 22px;
    width: min(560px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
    color: var(--parchment, #e8d8b8);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7);
}
.mestrar-submodal-close {
    position: absolute;
    top: 8px; right: 10px;
    width: 30px; height: 30px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(201, 168, 76, 0.35);
    color: var(--gold-light, #f3da9c);
    border-radius: 50%;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
    z-index: 2;
}
.mestrar-submodal-close:hover {
    background: rgba(200, 50, 60, 0.2);
    border-color: rgba(200, 50, 60, 0.7);
    color: #ff8a8a;
    transform: scale(1.08);
}
/* (largura definida abaixo na se\u{e7}\u{e3}o BATALHA NARRADA v0.40.20) */
.mestrar-submodal-title {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: var(--gold-light, #f3da9c);
    margin: 0 0 8px;
    letter-spacing: 0.05em;
}
.mestrar-submodal-text {
    font-family: 'Lora', serif;
    font-size: 0.88rem;
    color: rgba(232, 216, 184, 0.75);
    margin: 0 0 12px;
}
.mestrar-submodal-detail {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 6px;
    padding: 8px 12px;
    margin: 0 0 12px;
    font-family: 'Lora', serif;
    font-size: 0.85rem;
    line-height: 1.6;
}
.mestrar-submodal-label {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    color: rgba(232, 216, 184, 0.7);
    letter-spacing: 0.05em;
    margin: 8px 0 4px;
}
.mestrar-submodal-textarea, .mestrar-submodal-select {
    width: 100%;
    background: rgba(0, 0, 0, 0.45);
    color: #f3da9c;
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 5px;
    padding: 7px 10px;
    font-family: 'Lora', serif;
    font-size: 0.9rem;
    box-sizing: border-box;
}
.mestrar-submodal-textarea { min-height: 80px; resize: vertical; }
.mestrar-submodal-textarea:focus, .mestrar-submodal-select:focus {
    outline: none;
    border-color: var(--gold, #c9a84c);
    box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.2);
}
.mestrar-submodal-actions {
    display: flex; gap: 8px; justify-content: flex-end;
    margin-top: 14px;
}

/* BATALHA NARRADA v0.40.20 / v0.40.31 — layout estilo arena real
   com log lateral direito (grid 2 cols).
   v0.41.3: modal volta ao tamanho natural (max-height: 94vh com scroll
   próprio). O log lateral usa align-items: stretch do grid pra alinhar
   altura com a coluna do "Quem age" — sem max-height fixa que limitava antes. */
.mestrar-submodal.is-batalha {
    width: min(1400px, 97vw) !important;
    max-height: 94vh;
}
.mestrar-bn-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 14px;
    align-items: stretch;
}
.mestrar-bn-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.mestrar-bn-log-side {
    display: flex; flex-direction: column;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(201, 168, 76, 0.22);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 0;
    /* v0.41.3: estica até o final do modal (align-items: stretch no grid).
       O scroll interno do .mestrar-bn-log-list cuida quando o conteúdo
       passa da altura disponível. */
    min-height: 0;
}
.mestrar-bn-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed rgba(201, 168, 76, 0.22);
}
.mestrar-bn-log-header .mestrar-bn-log-title {
    margin: 0;
    padding: 0;
    border: none;
    flex: 1;
}
.mestrar-bn-log-copy {
    background: rgba(201, 168, 76, 0.12);
    border: 1px solid rgba(201, 168, 76, 0.35);
    color: var(--gold-light, #f3da9c);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.mestrar-bn-log-copy:hover {
    background: rgba(201, 168, 76, 0.28);
}
.mestrar-bn-log-copy:active {
    transform: scale(0.94);
}
.mestrar-bn-log-num {
    display: inline-block;
    min-width: 1.8em;
    color: var(--gold, #c9a84c);
    font-weight: 600;
    opacity: 0.7;
    margin-right: 2px;
}
.mestrar-bn-log-title {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: var(--gold-light, #f3da9c);
    letter-spacing: 0.06em;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed rgba(201, 168, 76, 0.22);
    text-align: center;
    flex-shrink: 0;
}
.mestrar-bn-log-list {
    flex: 1 1 auto;
    /* v0.41.3: sem max-height — preenche toda a altura disponível dentro
       de .mestrar-bn-log-side (que estica via grid stretch). O min-height: 0
       no flex container permite que o overflow-y funcione mesmo crescendo. */
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex; flex-direction: column-reverse;
    gap: 2px;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-dark, #8d6f24) rgba(0, 0, 0, 0.3);
}
.mestrar-bn-log-list::-webkit-scrollbar { width: 6px; }
.mestrar-bn-log-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}
.mestrar-bn-log-list::-webkit-scrollbar-thumb {
    background: var(--gold-dark, #8d6f24);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.4);
}
.mestrar-bn-log-list::-webkit-scrollbar-thumb:hover {
    background: var(--gold, #c9a84c);
}
.mestrar-bn-log-list .mestrar-bn-log-line {
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.3);
    border-left: 2px solid rgba(201, 168, 76, 0.35);
    border-radius: 0 4px 4px 0;
    font-family: 'Lora', serif;
    font-size: 0.78rem;
    color: rgba(232, 216, 184, 0.92);
    line-height: 1.4;
    word-break: break-word;
}
@media (max-width: 1000px) {
    .mestrar-bn-layout { grid-template-columns: 1fr; }
    /* Em mobile o log fica abaixo das ações com altura fixa controlada
       (senão empurraria o conteúdo principal pra fora). */
    .mestrar-bn-log-side { max-height: 220px; min-height: 160px; }
}

/* Header da arena (igual mb-arena-header). O X de fechar fica no canto
   sup. direito do .mestrar-submodal (estilo global), nao do header. */
.mestrar-bn-header {
    display: flex; align-items: center; gap: 10px;
    justify-content: center;
    padding: 6px 0 14px;
    border-bottom: 1px solid rgba(201, 168, 76, 0.25);
    margin-bottom: 14px;
}
.mestrar-bn-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.25rem;
    color: var(--gold-light, #f3da9c);
    margin: 0;
    letter-spacing: 0.08em;
    text-shadow: 0 0 12px rgba(201, 168, 76, 0.45);
}
.mestrar-bn-ornament {
    color: rgba(201, 168, 76, 0.6);
    font-size: 0.9rem;
}

/* Arena: mestre | VS | jogador */
.mestrar-bn-arena {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 14px;
}
.mestrar-bn-fighter {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.32));
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 10px;
    padding: 12px;
    display: flex; flex-direction: column; gap: 10px;
}
.mestrar-bn-fighter-mestre { border-color: rgba(201, 168, 76, 0.5); }
.mestrar-bn-fighter-jogador { border-color: rgba(155, 211, 255, 0.5); }
.mestrar-bn-fighter-label {
    font-family: 'Cinzel', serif;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    color: rgba(232, 216, 184, 0.7);
    text-align: center;
    padding-bottom: 6px;
    border-bottom: 1px dashed rgba(201, 168, 76, 0.22);
}
.mestrar-bn-fighter-jogador .mestrar-bn-fighter-label { color: rgba(155, 211, 255, 0.85); }

/* v0.40.23: seletor de personagem do jogador (acima do fighter) */
.mestrar-bn-charsel {
    display: flex; flex-direction: column; gap: 4px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(155, 211, 255, 0.25);
    border-radius: 6px;
    margin-bottom: 6px;
}
.mestrar-bn-charsel-label {
    font-family: 'Lora', serif;
    font-size: 0.7rem;
    color: rgba(155, 211, 255, 0.65);
    font-style: italic;
    word-break: break-all;
}
.mestrar-bn-charsel-empty {
    font-family: 'Lora', serif;
    font-size: 0.75rem;
    color: rgba(232, 216, 184, 0.45);
}
.mestrar-bn-charsel-select { width: 100%; }
.mestrar-bn-fighter-empty {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    color: rgba(232, 216, 184, 0.35);
    font-size: 2.4rem;
}
.mestrar-bn-fighter-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.mestrar-bn-fighter-name {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    color: var(--gold-light, #f3da9c);
    text-align: center;
    display: flex; align-items: center; gap: 8px;
}
.mestrar-bn-fighter-img {
    width: 150px; height: 150px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid rgba(201, 168, 76, 0.3);
    background: radial-gradient(circle at center, rgba(201, 168, 76, 0.12), rgba(0, 0, 0, 0.5));
    padding: 6px;
}
.mestrar-bn-fighter-img-empty {
    display: flex; align-items: center; justify-content: center;
    font-size: 4rem;
}

.mestrar-bn-def-badge {
    font-family: 'Cinzel', serif;
    font-size: 0.66rem;
    color: #9bd3ff;
    background: rgba(155, 211, 255, 0.12);
    border: 1px solid rgba(155, 211, 255, 0.5);
    padding: 1px 6px;
    border-radius: 999px;
}

/* VS central */
.mestrar-bn-vs {
    align-self: center;
    font-family: 'Cinzel Decorative', serif;
    font-size: 2rem;
    color: var(--gold-light, #f3da9c);
    text-shadow: 0 0 14px rgba(201, 168, 76, 0.7);
    letter-spacing: 0.04em;
}

/* Barras HP/MP */
.mestrar-bn-bar {
    position: relative;
    width: 100%;
    height: 18px;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 4px;
    overflow: hidden;
}
.mestrar-bn-bar-fill {
    height: 100%;
    transition: width 0.32s ease;
}
.mestrar-bn-bar-hp .mestrar-bn-bar-fill {
    background: linear-gradient(90deg, #59c674 0%, #7ddc92 100%);
}
.mestrar-bn-bar-hp.mid .mestrar-bn-bar-fill {
    background: linear-gradient(90deg, #e8c150 0%, #ffd97a 100%);
}
.mestrar-bn-bar-hp.low .mestrar-bn-bar-fill {
    background: linear-gradient(90deg, #cf3a3a 0%, #ff5252 100%);
    animation: mestrar-bn-pulse 1.2s ease-in-out infinite;
}
.mestrar-bn-bar-mp .mestrar-bn-bar-fill {
    background: linear-gradient(90deg, #5b8def 0%, #9bd3ff 100%);
}
/* v0.41.2: comparação de velocidade entre fighter e oponente.
   Aparece abaixo do MP e acima do roster (ícone de seleção). */
.mestrar-bn-vel {
    margin-top: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    border: 1px solid var(--gold-dim, #5a4225);
    background: rgba(0, 0, 0, 0.25);
    color: #d6c89b;
}
.mestrar-bn-vel.is-faster {
    color: #6fdd6f;
    border-color: rgba(111, 221, 111, 0.4);
    background: rgba(40, 110, 40, 0.18);
}
.mestrar-bn-vel.is-slower {
    color: #f08484;
    border-color: rgba(240, 132, 132, 0.4);
    background: rgba(120, 40, 40, 0.18);
}
.mestrar-bn-vel.is-equal {
    color: #e0a64a;
    border-color: rgba(224, 166, 74, 0.4);
}
.mestrar-bn-vel.mestrar-bn-vel-na {
    color: #8d775c;
    opacity: 0.7;
}
/* v0.42.1: grid de 4 boxes (ATK Fís/Mág + DEF Fís/Mág) abaixo do MP no fighter card. */
.mestrar-bn-vel-grid {
    margin-top: 6px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.mestrar-bn-vel-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mestrar-bn-vel-col-label {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #d6c89b;
    text-transform: uppercase;
    opacity: 0.85;
}
.mestrar-bn-vel-grid .mestrar-bn-vel {
    margin-top: 0;
    font-size: 0.68rem;
    padding: 2px 5px;
}
.mestrar-bn-bar-txt {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    letter-spacing: 0.04em;
}
@keyframes mestrar-bn-pulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.25); }
}

/* Roster (miniaturas dos monstros do lado) */
.mestrar-bn-roster {
    display: flex; flex-wrap: wrap; gap: 4px;
    justify-content: center;
    padding-top: 4px;
    border-top: 1px dashed rgba(201, 168, 76, 0.15);
}
.mestrar-bn-roster-item {
    width: 36px; height: 36px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid rgba(201, 168, 76, 0.3);
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.mestrar-bn-roster-item img,
.mestrar-bn-roster-img {
    width: 100%; height: 100%;
    object-fit: cover;
}
/* v0.40.25: shiny-wrapper dentro do roster/fighter da batalha narrada */
.mestrar-bn-roster-item .shiny-wrapper {
    width: 100%; height: 100%;
}
.mestrar-bn-fighter-card .shiny-wrapper {
    align-self: center;
}
.mestrar-bn-roster-item:hover {
    border-color: var(--gold-light, #f3da9c);
    transform: translateY(-2px);
}
.mestrar-bn-roster-item.is-active {
    border-color: var(--gold-light, #f3da9c);
    box-shadow: 0 0 10px rgba(201, 168, 76, 0.55);
}
.mestrar-bn-roster-item.is-ko {
    filter: grayscale(1) brightness(0.4);
    cursor: not-allowed;
}
.mestrar-bn-roster-add {
    background: rgba(201, 168, 76, 0.15) !important;
    border-style: dashed !important;
    color: var(--gold-light, #f3da9c);
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
}
.mestrar-bn-roster-add:hover {
    background: rgba(201, 168, 76, 0.32) !important;
    border-color: var(--gold-light, #f3da9c) !important;
    transform: scale(1.08);
}

/* Log no centro */
.mestrar-bn-log-stripe {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(201, 168, 76, 0.18);
    border-radius: 6px;
    padding: 8px 14px;
    margin-bottom: 12px;
    min-height: 70px;
    max-height: 110px;
    overflow-y: auto;
    font-family: 'Lora', serif;
    font-size: 0.86rem;
}
.mestrar-bn-log-empty {
    color: rgba(232, 216, 184, 0.4);
    font-style: italic;
    text-align: center;
}
.mestrar-bn-log-line {
    padding: 2px 0;
    color: rgba(232, 216, 184, 0.92);
    border-bottom: 1px dotted rgba(201, 168, 76, 0.08);
}
.mestrar-bn-log-line:last-child { border-bottom: none; }

/* Painel de acoes do mestre */
.mestrar-bn-action-panel {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 10px;
}
.mestrar-bn-action-row-arena {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
}
.mestrar-bn-aplabel {
    font-family: 'Cinzel', serif;
    font-size: 0.76rem;
    color: rgba(232, 216, 184, 0.7);
    letter-spacing: 0.04em;
}
.mestrar-bn-actor-name {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: var(--gold-light, #f3da9c);
    padding: 4px 10px;
    background: rgba(201, 168, 76, 0.12);
    border-radius: 6px;
}
.mestrar-bn-select, .mestrar-bn-input {
    background: rgba(0, 0, 0, 0.55);
    color: #f3da9c;
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 5px;
    padding: 6px 10px;
    font-family: 'Lora', serif;
    font-size: 0.86rem;
    min-width: 0;
}
.mestrar-bn-select { flex: 1; }
.mestrar-bn-select-narrow {
    flex: 0 0 auto;
    width: auto;
    min-width: 130px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
}
.mestrar-bn-input { width: 160px; }

/* v0.40.30: botao clicavel da imagem do fighter (abre detalhamento) */
.mestrar-bn-fighter-img-btn {
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s;
}
.mestrar-bn-fighter-img-btn:hover {
    transform: scale(1.04);
}
.mestrar-bn-fighter-img-btn:hover .mestrar-bn-fighter-img {
    border-color: var(--gold-light, #f3da9c);
    box-shadow: 0 0 16px rgba(201, 168, 76, 0.55);
}

/* v0.40.30: Modal de detalhamento do monstro */
.mestrar-bn-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
    gap: 16px;
    margin: 12px 0 16px;
    align-items: start;
}
.mestrar-bn-detail-left {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.mestrar-bn-detail-img-wrap {
    width: 160px; height: 160px;
    background: radial-gradient(circle at center, rgba(201, 168, 76, 0.14), rgba(0, 0, 0, 0.55));
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 10px;
    padding: 6px;
    display: flex; align-items: center; justify-content: center;
}
.mestrar-bn-detail-img,
.mestrar-bn-detail-img-empty {
    width: 100%; height: 100%;
    object-fit: contain;
}
.mestrar-bn-detail-img-empty {
    display: flex; align-items: center; justify-content: center;
    font-size: 4.2rem;
    color: rgba(232, 216, 184, 0.3);
}
.mestrar-bn-detail-img-wrap .shiny-wrapper {
    width: 100%; height: 100%;
}
.mestrar-bn-detail-meta {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.mestrar-bn-detail-level {
    font-family: 'Cinzel Decorative', serif;
    color: var(--gold-light, #f3da9c);
    font-size: 1.1rem;
    padding: 2px 12px;
    background: rgba(201, 168, 76, 0.15);
    border: 1px solid rgba(201, 168, 76, 0.45);
    border-radius: 999px;
}
.mestrar-bn-detail-tipos {
    display: flex; gap: 6px;
}
.mestrar-bn-detail-tipo {
    width: 28px; height: 28px; object-fit: contain;
}
.mestrar-bn-detail-efeitos {
    display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
}
.mestrar-bn-detail-eft {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(201, 168, 76, 0.12);
    border: 1px solid rgba(201, 168, 76, 0.4);
    color: var(--gold-light, #f3da9c);
}
.mestrar-bn-detail-right {
    min-width: 0;
}
.mestrar-bn-detail-section {
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    color: var(--gold-light, #f3da9c);
    letter-spacing: 0.06em;
    margin: 0 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(201, 168, 76, 0.22);
}
.mestrar-bn-detail-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}
.mestrar-bn-detail-stat-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(201, 168, 76, 0.15);
    border-radius: 4px;
    font-family: 'Lora', serif;
    font-size: 0.82rem;
    color: rgba(232, 216, 184, 0.8);
}
.mestrar-bn-detail-stat-row strong {
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
}
.mestrar-bn-detail-habs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
}
.mestrar-bn-detail-empty {
    grid-column: 1 / -1;
    color: rgba(232, 216, 184, 0.5);
    font-style: italic;
    padding: 10px;
    border: 1px dashed rgba(201, 168, 76, 0.2);
    border-radius: 6px;
    text-align: center;
}

/* Cards de habilidade (v0.40.28) — prioriza nome / tipagem / dano / custo */
.mestrar-bn-skills {
    display: grid;
    /* v0.41.16: 5 cards por linha ocupando toda a largura do painel.
       Cards de habilidade reusam .hab-card; cresc em conforme o painel. */
    /* minmax(0,1fr): sem o 0, o minimo da coluna e' min-content e o card CRESCE
       pra caber texto nowrap (efetividade/stat) -> estoura o grid e o fit-text
       nao tem largura estavel pra medir. Com minmax(0,1fr) o card fica fixo. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}
/* Card de habilidade na batalha — reusa .hab-card mas com variantes is-disabled */
.hab-card-bn { cursor: pointer; }
.hab-card-bn.is-disabled {
    opacity: 0.42;
    filter: grayscale(0.5);
    cursor: not-allowed;
    pointer-events: auto; /* deixa o botão de detalhar funcionar */
}
.hab-card-bn.is-disabled:hover { transform: none; border-color: rgba(201,168,76,0.25); box-shadow: none; }

/* v0.44.0: cards sinteticos (DEFENDER / ATAQUE COMUM) - visual neutro/
   situacional. Tons cinza-azulados separam visualmente das habilidades
   proprias do monstro (que mantem o dourado/marrom quente). */
.hab-card-bn.hab-card-synth {
    background: linear-gradient(180deg, rgba(48,54,64,0.95), rgba(28,32,40,0.95));
    border-color: rgba(155,180,210,0.32);
}
.hab-card-bn.hab-card-synth:hover {
    border-color: rgba(155,180,210,0.75);
    box-shadow: 0 4px 14px rgba(120,150,190,0.22);
}
.hab-card-bn.hab-card-synth .hab-card-nome,
.hab-card-bn.hab-card-synth .hab-card-meta {
    color: rgba(220,228,238,0.92);
}
.hab-card-bn.hab-card-synth .hab-card-stat-label,
.hab-card-bn.hab-card-synth .hab-card-stat-value {
    color: rgba(200,212,228,0.85);
}
/* v0.41.16: Ícone de "detalhar" (info) — SVG já é circular, então
   removemos o círculo do botão pai e deixamos o SVG ocupar o mesmo
   footprint (22x22). Cores acompanham o padrão dourado (hover em
   gold-light, sem fundo) em vez do vermelho do X. */
.hab-card .hab-card-x.hab-card-detail {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0.7;
    color: rgba(232,216,184,0.85);
}
.hab-card .hab-card-x.hab-card-detail svg { width: 22px; height: 22px; }
.hab-card .hab-card-x.hab-card-detail:hover {
    background: transparent !important;
    border: none !important;
    opacity: 1;
    color: #ffd97a !important;
    transform: scale(1.1);
    filter: drop-shadow(0 0 4px rgba(201,168,76,0.55));
}
.mestrar-bn-skills-empty {
    grid-column: 1 / -1;
    padding: 12px;
    color: rgba(232, 216, 184, 0.55);
    font-style: italic;
    text-align: center;
    border: 1px dashed rgba(201, 168, 76, 0.2);
    border-radius: 6px;
}

/* v0.40.31: quando o lado ativo eh MESTRE, painel + cards de skill ganham
   o tema roxo do narrador (mesmo do body.is-narrador). Lado JOGADOR mantem
   o tema dourado padrao. */
.mestrar-bn-action-panel.is-mestre {
    border-color: rgba(155, 89, 182, 0.55);
    background: linear-gradient(180deg, rgba(60, 20, 80, 0.18), rgba(0, 0, 0, 0.4));
    box-shadow: 0 0 18px rgba(155, 89, 182, 0.15) inset;
}
.mestrar-bn-action-panel.is-jogador {
    border-color: rgba(155, 211, 255, 0.5);
    background: linear-gradient(180deg, rgba(20, 50, 80, 0.18), rgba(0, 0, 0, 0.4));
    box-shadow: 0 0 18px rgba(155, 211, 255, 0.12) inset;
}
/* v0.41.15: cards de habilidade na batalha narrada usam o helper
   compartilhado `renderHabCardCompact` (classe .hab-card / .hab-card-bn).
   Estilos antigos `.mestrar-bn-skill-card` e `.mestrar-bn-sk-*` foram
   removidos pois não há mais referências em JS. */

/* Botoes utilitarios */
.mestrar-bn-btn {
    padding: 7px 14px;
    border-radius: 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.84rem;
    cursor: pointer;
    border: 1px solid rgba(201, 168, 76, 0.4);
    background: rgba(0, 0, 0, 0.5);
    color: var(--gold-light, #f3da9c);
    transition: all 0.12s;
    white-space: nowrap;
}
.mestrar-bn-btn:hover { filter: brightness(1.15); }
.mestrar-bn-btn:disabled,
.mestrar-bn-btn:disabled:hover {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.6);
}
.bn-enc-part-item:hover { background: rgba(201, 168, 76, 0.12) !important; }
.mestrar-bn-btn-force {
    background: linear-gradient(180deg, #c9a84c 0%, #8d6f24 100%);
    color: #1a0e08; font-weight: 700;
}
.mestrar-bn-btn-defend {
    background: linear-gradient(180deg, rgba(155, 211, 255, 0.28), rgba(60, 90, 130, 0.28));
    border-color: rgba(155, 211, 255, 0.55);
    color: #d4ecff;
}
.mestrar-bn-btn-end {
    background: linear-gradient(180deg, rgba(200, 50, 60, 0.32), rgba(120, 20, 30, 0.32));
    border-color: rgba(200, 50, 60, 0.6);
    color: #ffd0d4;
    margin-left: auto;
}
/* v0.42.13: variante "Continuar esta batalha" - verde, substitui o vermelho de Encerrar
   quando a batalha está encerrada e o narrador pode reabrir os controles. */
.mestrar-bn-btn-continuar {
    background: linear-gradient(180deg, rgba(80, 180, 110, 0.32), rgba(40, 110, 60, 0.32));
    border-color: rgba(80, 180, 110, 0.6);
    color: #d4f5dd;
}

/* ===============================================================
   v0.40.33 — ANIMACOES DE BATALHA NARRADA
   ===============================================================
   Sequencia ao usar habilidade ou forcar valor:
     1) lunge do atacante (avanca pro centro)
     2) target reage (hit shake / heal glow) + impact burst + numero flutuante
     3) cleanup e (opcional) ko fade
   Os helpers JS (bnAnimateAction, bnAnimateKO) adicionam/removem as
   classes abaixo no .mestrar-bn-fighter-img-btn ou nos elementos
   filhos do .mestrar-bn-fighter-card.
*/

/* 1. LUNGE — atacante avanca em direcao ao adversario.
      O lado 'aliado'/'mestre' fica a esquerda: avanca pra direita.
      O lado 'inimigo'/'jogador' fica a direita:  avanca pra esquerda. */
.mestrar-bn-fighter-img-btn.bn-anim-lunge-right {
    animation: mestrar-bn-lunge-right 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both;
    z-index: 3;
    will-change: transform;
}
.mestrar-bn-fighter-img-btn.bn-anim-lunge-left {
    animation: mestrar-bn-lunge-left 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both;
    z-index: 3;
    will-change: transform;
}
@keyframes mestrar-bn-lunge-right {
    0%   { transform: translateX(0)    scale(1); }
    40%  { transform: translateX(34px) scale(1.08); }
    70%  { transform: translateX(22px) scale(1.05); }
    100% { transform: translateX(0)    scale(1); }
}
@keyframes mestrar-bn-lunge-left {
    0%   { transform: translateX(0)     scale(1); }
    40%  { transform: translateX(-34px) scale(1.08); }
    70%  { transform: translateX(-22px) scale(1.05); }
    100% { transform: translateX(0)     scale(1); }
}

/* 2a. HIT — target recebe dano: shake horizontal + flash vermelho + tilt sutil. */
.mestrar-bn-fighter-img-btn.bn-anim-hit {
    animation: mestrar-bn-hit-shake 0.5s ease-in-out both;
}
.mestrar-bn-fighter-img-btn.bn-anim-hit .mestrar-bn-fighter-img {
    animation: mestrar-bn-hit-flash 0.5s ease-out both;
}
@keyframes mestrar-bn-hit-shake {
    0%   { transform: translateX(0)    rotate(0); }
    15%  { transform: translateX(-8px) rotate(-2deg); }
    30%  { transform: translateX(7px)  rotate(2deg); }
    45%  { transform: translateX(-5px) rotate(-1.5deg); }
    60%  { transform: translateX(4px)  rotate(1deg); }
    80%  { transform: translateX(-2px) rotate(-0.5deg); }
    100% { transform: translateX(0)    rotate(0); }
}
@keyframes mestrar-bn-hit-flash {
    0%   { filter: brightness(1)   drop-shadow(0 0 0   transparent); }
    20%  { filter: brightness(1.8) drop-shadow(0 0 18px #ff5252); }
    60%  { filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 82, 82, 0.6)); }
    100% { filter: brightness(1)   drop-shadow(0 0 0   transparent); }
}

/* 2b. HEAL — target recebe cura: glow verde + pulse suave. */
.mestrar-bn-fighter-img-btn.bn-anim-heal {
    animation: mestrar-bn-heal-pulse 0.55s ease-out both;
}
.mestrar-bn-fighter-img-btn.bn-anim-heal .mestrar-bn-fighter-img {
    animation: mestrar-bn-heal-glow 0.55s ease-out both;
}
@keyframes mestrar-bn-heal-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.09); }
    100% { transform: scale(1); }
}
@keyframes mestrar-bn-heal-glow {
    0%   { filter: brightness(1)    drop-shadow(0 0 0   transparent); }
    35%  { filter: brightness(1.35) drop-shadow(0 0 22px #7df0a8); }
    70%  { filter: brightness(1.15) drop-shadow(0 0 14px rgba(125, 240, 168, 0.6)); }
    100% { filter: brightness(1)    drop-shadow(0 0 0   transparent); }
}

/* 3. KO — alvo derrotado: fade pra grayscale + tilt. */
.mestrar-bn-fighter-img-btn.bn-anim-ko {
    animation: mestrar-bn-ko 0.55s ease-in both;
}
@keyframes mestrar-bn-ko {
    0%   { transform: rotate(0)     scale(1);    filter: grayscale(0)   brightness(1); opacity: 1; }
    50%  { transform: rotate(-6deg) scale(0.95); filter: grayscale(0.5) brightness(0.7); opacity: 0.85; }
    100% { transform: rotate(-12deg) scale(0.9); filter: grayscale(1)   brightness(0.45); opacity: 0.65; }
}

/* 4. NUMERO FLUTUANTE — sobe a partir do alvo. */
.mestrar-bn-floating-num {
    position: absolute;
    left: 50%;
    top: 38%;
    transform: translate(-50%, 0);
    font-family: 'Cinzel', serif;
    font-weight: 800;
    font-size: 1.85rem;
    pointer-events: none;
    text-shadow:
        0 0 6px rgba(0, 0, 0, 0.95),
        0 2px 8px rgba(0, 0, 0, 0.85),
        0 0 14px currentColor;
    animation: mestrar-bn-float-up 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    z-index: 9;
}
.mestrar-bn-floating-num.is-dano { color: #ff6b6b; }
.mestrar-bn-floating-num.is-heal { color: #7df0a8; }
.mestrar-bn-floating-num.is-miss { color: #cfd8e2; font-size: 1.35rem; }
@keyframes mestrar-bn-float-up {
    0%   { transform: translate(-50%, 10px)  scale(0.6); opacity: 0; }
    18%  { transform: translate(-50%, -8px)  scale(1.25); opacity: 1; }
    35%  { transform: translate(-50%, -22px) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -78px) scale(0.95); opacity: 0; }
}

/* 5. IMPACT BURST — radial flash atras do target no momento do impacto. */
.mestrar-bn-impact-burst {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 130px;
    height: 130px;
    transform: translate(-50%, -50%) scale(0.2);
    border-radius: 50%;
    pointer-events: none;
    animation: mestrar-bn-burst 0.55s ease-out both;
    z-index: 2;
    mix-blend-mode: screen;
}
.mestrar-bn-impact-burst.is-dano {
    background: radial-gradient(circle, rgba(255, 220, 100, 0.85) 0%,
                                          rgba(255, 90, 60, 0.55) 35%,
                                          rgba(255, 50, 50, 0.0) 70%);
}
.mestrar-bn-impact-burst.is-heal {
    background: radial-gradient(circle, rgba(180, 255, 200, 0.85) 0%,
                                          rgba(120, 230, 160, 0.5) 40%,
                                          rgba(60, 200, 120, 0.0) 75%);
}
@keyframes mestrar-bn-burst {
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0.0; }
    30%  { transform: translate(-50%, -50%) scale(1.0); opacity: 1.0; }
    100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0.0; }
}

/* 6. PULSE da barra atualizada — destaca a transicao do HP/MP. */
.mestrar-bn-bar-fill.is-pulse {
    animation: mestrar-bn-bar-pulse 0.45s ease-out;
}
@keyframes mestrar-bn-bar-pulse {
    0%   { filter: brightness(1)   saturate(1); }
    35%  { filter: brightness(1.55) saturate(1.3); }
    100% { filter: brightness(1)   saturate(1); }
}

/* Garante que cards sejam ancoras para num flutuante e impact burst. */
.mestrar-bn-fighter-card { position: relative; }

/* Acessibilidade: respeitar reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .mestrar-bn-fighter-img-btn.bn-anim-lunge-right,
    .mestrar-bn-fighter-img-btn.bn-anim-lunge-left,
    .mestrar-bn-fighter-img-btn.bn-anim-hit,
    .mestrar-bn-fighter-img-btn.bn-anim-heal,
    .mestrar-bn-fighter-img-btn.bn-anim-ko,
    .mestrar-bn-fighter-img-btn.bn-anim-hit .mestrar-bn-fighter-img,
    .mestrar-bn-fighter-img-btn.bn-anim-heal .mestrar-bn-fighter-img,
    .mestrar-bn-impact-burst,
    .mestrar-bn-floating-num,
    .mestrar-bn-bar-fill.is-pulse {
        animation-duration: 0.01s !important;
    }
}

/* ===============================================================
   v0.40.34 — MODAL DE FIM DE BATALHA (vitoria/derrota + XP + potencial)
   =============================================================== */
.mestrar-bn-end-bd {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    /* v0.40.35: precisa ficar ACIMA do sub-modal da batalha (z-index 14000) */
    z-index: 15000;
    animation: mestrar-end-fadein 0.32s ease-out;
}

/* v0.42.0: loading bloqueante entre anima\u{e7}\u{e3}o de evolu\u{e7}\u{e3}o e tela de vit\u{f3}ria */
.mestrar-end-loading-bd {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 14800; /* abaixo do .mestrar-bn-end-bd (15000) */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 18px;
    animation: mestrar-end-fadein 0.25s ease-out;
}
.mestrar-end-loading-bd.is-fade { animation: mestrar-end-fadeout 0.25s ease-in forwards; }
.mestrar-end-loading-spinner {
    width: 56px; height: 56px;
    border: 4px solid rgba(255, 217, 122, 0.22);
    border-top-color: #ffd97a;
    border-radius: 50%;
    animation: mestrar-end-spin 0.9s linear infinite;
    box-shadow: 0 0 22px rgba(255, 217, 122, 0.45);
}
.mestrar-end-loading-txt {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    color: #f3da9c;
    text-shadow: 0 0 12px rgba(255, 217, 122, 0.55);
}
@keyframes mestrar-end-spin { to { transform: rotate(360deg); } }
@keyframes mestrar-end-fadeout { to { opacity: 0; } }
@keyframes mestrar-end-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.mestrar-end-modal {
    position: relative;
    width: min(680px, 94vw);
    max-height: 92vh;
    overflow-y: auto;
    background: radial-gradient(ellipse at top, rgba(48, 36, 18, 0.98) 0%, rgba(20, 12, 6, 0.99) 70%);
    border: 2px solid var(--gold-light, #f3da9c);
    border-radius: 14px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.85), inset 0 0 30px rgba(201, 168, 76, 0.12);
    padding: 22px 26px 20px;
    color: #f5e9c8;
    font-family: 'Lora', serif;
    animation: mestrar-end-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes mestrar-end-pop {
    from { opacity: 0; transform: translateY(20px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.mestrar-end-modal.mestrar-end-victory {
    width: min(880px, 94vw); /* v0.42.0: mais largo pra acomodar 2 colunas */
    border-color: #ffd97a;
    box-shadow: 0 0 50px rgba(255, 217, 122, 0.35), inset 0 0 35px rgba(201, 168, 76, 0.18);
}
.mestrar-end-modal.mestrar-end-defeat {
    border-color: rgba(200, 50, 60, 0.7);
    box-shadow: 0 0 40px rgba(200, 50, 60, 0.25), inset 0 0 30px rgba(80, 8, 12, 0.4);
    background: radial-gradient(ellipse at top, rgba(40, 14, 14, 0.98) 0%, rgba(10, 6, 6, 0.99) 70%);
    color: #f3d2c8;
}
.mestrar-end-close {
    position: absolute;
    top: 10px; right: 12px;
    background: transparent;
    border: 1px solid rgba(201, 168, 76, 0.4);
    color: var(--gold-light, #f3da9c);
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s;
}
.mestrar-end-close:hover {
    background: rgba(201, 168, 76, 0.18);
    transform: rotate(90deg);
}
.mestrar-end-header {
    display: flex; align-items: center; justify-content: center;
    gap: 14px;
    margin-bottom: 10px;
}
.mestrar-end-ornament {
    color: var(--gold-light, #f3da9c);
    font-size: 1.2rem;
    opacity: 0.7;
}
.mestrar-end-title {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: 1.85rem;
    margin: 0;
    text-align: center;
    letter-spacing: 0.18em;
    color: var(--gold-light, #f3da9c);
    text-shadow: 0 0 18px rgba(255, 217, 122, 0.6), 0 2px 4px rgba(0, 0, 0, 0.7);
    /* v0.40.36: nao quebra em duas linhas */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mestrar-end-defeat .mestrar-end-title {
    color: #ff8a8a;
    text-shadow: 0 0 18px rgba(200, 50, 60, 0.55), 0 2px 4px rgba(0, 0, 0, 0.7);
}
.mestrar-end-narrativa {
    font-family: 'Lora', serif;
    font-style: italic;
    text-align: center;
    color: rgba(232, 216, 184, 0.86);
    line-height: 1.55;
    margin: 14px 8px 18px;
    font-size: 0.96rem;
}
.mestrar-end-defeat .mestrar-end-narrativa {
    color: rgba(243, 210, 200, 0.78);
}
.mestrar-end-defeat-tag {
    text-align: center;
    color: rgba(255, 138, 138, 0.7);
    font-family: 'Cinzel', serif;
    letter-spacing: 0.18em;
    font-size: 0.85rem;
    margin: 4px 0 16px;
}

/* v0.42.0: 2 colunas (personagem+potencial | monstros) */
.mestrar-end-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
    margin: 14px 0;
}
.mestrar-end-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0; /* permite o grid encolher os filhos */
}
.mestrar-end-col .mestrar-end-section {
    margin: 0; /* override do margin: 14px 0 padrao — espacamento via gap */
}
@media (max-width: 720px) {
    .mestrar-end-cols { grid-template-columns: 1fr; }
}

/* Secoes (Personagem, Monstros, Potencial) */
.mestrar-end-section {
    margin: 14px 0;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(201, 168, 76, 0.22);
    border-radius: 8px;
}
.mestrar-end-section-title {
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    letter-spacing: 0.12em;
    color: var(--gold-light, #f3da9c);
    margin-bottom: 10px;
    border-bottom: 1px dashed rgba(201, 168, 76, 0.18);
    padding-bottom: 6px;
}
.mestrar-end-char-section { border-color: rgba(201, 168, 76, 0.4); }

/* v0.42.0: card do personagem agora segue o layout do card do monstro
   (imagem 56px na esquerda + bloco info empilhado na direita). */
.mestrar-end-char-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.mestrar-end-char-imgwrap {
    position: relative;
    width: 56px; height: 56px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(201, 168, 76, 0.4);
    border-radius: 6px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.mestrar-end-char-img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.mestrar-end-char-img-empty {
    font-size: 1.6rem;
    color: rgba(232, 216, 184, 0.55);
}
.mestrar-end-char-info {
    display: flex; flex-direction: column; gap: 6px;
    min-width: 0;
    flex: 1;
}
.mestrar-end-char-head {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.86rem;
    min-width: 0;
}
.mestrar-end-char-nome {
    font-weight: 700;
    color: #f5e9c8;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}
.mestrar-end-char-level {
    color: rgba(232, 216, 184, 0.8);
    flex-shrink: 0;
}
.mestrar-end-char-gain {
    gap: 8px;
    margin-bottom: 0;
}

/* v0.42.0: variante bot\u{e3}o (char evoluiu) — espelho do mon-imgwrap-btn */
.mestrar-end-char-imgwrap-btn {
    padding: 0;
    cursor: pointer;
    overflow: visible;
    border: 1px solid rgba(255, 217, 122, 0.8);
    box-shadow: 0 0 12px rgba(255, 217, 122, 0.55);
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease;
}
.mestrar-end-char-imgwrap-btn:hover {
    transform: scale(1.07);
    border-color: #ffd97a;
    box-shadow: 0 0 18px rgba(255, 217, 122, 0.85);
}
.mestrar-end-char-imgwrap-btn:active { transform: scale(1.02); }
.mestrar-end-char-evol-badge {
    position: absolute;
    top: -8px; right: -10px;
    min-width: 28px;
    height: 22px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ffd97a, #f5b830);
    color: #2a1a04;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    border: 1.5px solid #fff4c8;
    border-radius: 11px;
    box-shadow: 0 0 12px rgba(255, 217, 122, 0.9),
                0 2px 4px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    animation: mestrar-end-mon-evol-pulse 1.8s ease-in-out infinite;
}

/* Brilho dourado na section quando char evoluiu (substitui o bloco MESTRE EVOLUIU). */
.mestrar-end-section.mestrar-end-char-section.is-leveled {
    position: relative;
    overflow: hidden;
    border-color: rgba(255, 217, 122, 0.85);
    background:
        linear-gradient(180deg, rgba(48, 38, 18, 0.55), rgba(30, 24, 12, 0.55)),
        rgba(0, 0, 0, 0.45);
    box-shadow: inset 0 0 22px rgba(255, 217, 122, 0.18),
                0 0 24px rgba(255, 217, 122, 0.25);
    animation: mestrar-end-char-leveled-pulse 2.1s ease-in-out infinite;
}
.mestrar-end-section.mestrar-end-char-section.is-leveled::before {
    /* faixa de shine deslizando horizontalmente — igual ao .evol-mestre-info::before */
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -50%;
    width: 50%;
    background: linear-gradient(90deg,
        rgba(255, 217, 122, 0) 0%,
        rgba(255, 217, 122, 0.18) 50%,
        rgba(255, 217, 122, 0) 100%);
    animation: evol-mestre-shine 3.2s ease-in-out 0.8s infinite;
    pointer-events: none;
}
@keyframes mestrar-end-char-leveled-pulse {
    0%, 100% { box-shadow: inset 0 0 22px rgba(255, 217, 122, 0.18), 0 0 22px rgba(255, 217, 122, 0.22); }
    50%      { box-shadow: inset 0 0 28px rgba(255, 217, 122, 0.28), 0 0 32px rgba(255, 217, 122, 0.45); }
}

.mestrar-end-xp-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.mestrar-end-xp-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: #f5e9c8;
}
.mestrar-end-xp-gain {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: #7df0a8;
    text-shadow: 0 0 8px rgba(125, 240, 168, 0.4);
    white-space: nowrap;
}
.mestrar-end-xp-gain.is-zero {
    color: rgba(232, 216, 184, 0.5);
    text-shadow: none;
    font-weight: 400;
}

/* Barra de XP */
.mestrar-end-xpbar {
    position: relative;
    width: 100%;
    height: 20px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 4px;
    overflow: hidden;
}
.mestrar-end-xpbar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #c9a84c 0%, #ffd97a 60%, #fff4c8 100%);
    transition: width 0.18s ease-out;
    box-shadow: inset 0 0 8px rgba(255, 217, 122, 0.5);
}
.mestrar-end-xpbar-txt {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: 0.76rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.04em;
}
.mestrar-end-xpbar.is-levelup {
    animation: mestrar-end-levelup 0.6s ease-out;
}
@keyframes mestrar-end-levelup {
    0%   { box-shadow: 0 0 0 0 rgba(255, 217, 122, 0); }
    30%  { box-shadow: 0 0 18px 4px rgba(255, 217, 122, 0.85); transform: scale(1.025); }
    100% { box-shadow: 0 0 0 0 rgba(255, 217, 122, 0); transform: scale(1); }
}

/* Lista de monstros */
.mestrar-end-monsters {
    display: flex; flex-direction: column; gap: 10px;
}
.mestrar-end-mon-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    align-items: center;
    padding: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(201, 168, 76, 0.15);
    border-radius: 6px;
}
.mestrar-end-mon-row.is-ko {
    opacity: 0.7;
    filter: grayscale(0.4);
}
.mestrar-end-mon-imgwrap {
    position: relative;
    width: 56px; height: 56px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 6px;
    overflow: visible; /* permite badge sair do quadrado */
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.mestrar-end-mon-imgwrap > .mestrar-end-mon-img,
.mestrar-end-mon-imgwrap > .mestrar-end-mon-img-empty {
    border-radius: 6px;
    overflow: hidden;
}
/* Quando o monstro tem variante (shiny/elite/ultimate/unique), renderMonsterImg
   envolve a <img> em .shiny-wrapper. Sem tamanho fixo aqui o wrapper toma o
   tamanho natural da imagem e estoura o quadradinho de 56x56 (bug visto na tela
   de derrota da batalha selvagem, onde o monstro do jogador renderizava em
   tamanho real). Mesma fix das outras telas — ver .arena-img-wrap. */
.mestrar-end-mon-imgwrap > .shiny-wrapper {
    width: 100%; height: 100%;
    border-radius: 6px;
    overflow: hidden;
}
/* v0.42.0: variante bot\u{e3}o (monstro evoluiu) */
.mestrar-end-mon-imgwrap-btn {
    padding: 0;
    cursor: pointer;
    border: 1px solid rgba(255, 217, 122, 0.8);
    box-shadow: 0 0 12px rgba(255, 217, 122, 0.55);
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease;
}
.mestrar-end-mon-imgwrap-btn:hover {
    transform: scale(1.07);
    border-color: #ffd97a;
    box-shadow: 0 0 18px rgba(255, 217, 122, 0.85);
}
.mestrar-end-mon-imgwrap-btn:active { transform: scale(1.02); }
.mestrar-end-mon-evol-badge {
    position: absolute;
    top: -8px; right: -10px;
    min-width: 28px;
    height: 22px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ffd97a, #f5b830);
    color: #2a1a04;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    border: 1.5px solid #fff4c8;
    border-radius: 11px;
    box-shadow: 0 0 12px rgba(255, 217, 122, 0.9),
                0 2px 4px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    animation: mestrar-end-mon-evol-pulse 1.8s ease-in-out infinite;
}
@keyframes mestrar-end-mon-evol-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 12px rgba(255, 217, 122, 0.9), 0 2px 4px rgba(0, 0, 0, 0.6); }
    50%      { transform: scale(1.12); box-shadow: 0 0 20px rgba(255, 217, 122, 1),   0 2px 4px rgba(0, 0, 0, 0.6); }
}
.mestrar-end-mon-img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.mestrar-end-mon-img-empty {
    font-size: 1.6rem;
    color: rgba(232, 216, 184, 0.4);
}
.mestrar-end-mon-info {
    display: flex; flex-direction: column; gap: 6px;
    min-width: 0;
}
.mestrar-end-mon-head {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.86rem;
}
.mestrar-end-mon-nome {
    font-weight: 700;
    color: #f5e9c8;
}
.mestrar-end-mon-tipo {
    width: 18px; height: 18px;
    object-fit: contain;
}
.mestrar-end-mon-level {
    color: rgba(232, 216, 184, 0.75);
    font-size: 0.78rem;
    padding: 1px 8px;
    background: rgba(201, 168, 76, 0.12);
    border-radius: 10px;
}
.mestrar-end-mon-ko-tag {
    color: #ff8a8a;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    padding: 1px 6px;
    border: 1px solid rgba(200, 50, 60, 0.4);
    border-radius: 10px;
}
.mestrar-end-mon-gain {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-bottom: 0;
    align-items: center;
}

/* Cards de Potencial */
.mestrar-end-pot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}
.mestrar-end-pot-card {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px;
    padding: 10px 8px;
    background: linear-gradient(180deg, rgba(201, 168, 76, 0.15), rgba(0, 0, 0, 0.4));
    border: 1px solid rgba(201, 168, 76, 0.4);
    border-radius: 8px;
    animation: mestrar-end-pot-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.mestrar-end-pot-card:nth-child(1) { animation-delay: 0.4s; }
.mestrar-end-pot-card:nth-child(2) { animation-delay: 0.55s; }
.mestrar-end-pot-card:nth-child(3) { animation-delay: 0.7s; }
.mestrar-end-pot-card:nth-child(4) { animation-delay: 0.85s; }
.mestrar-end-pot-card:nth-child(5) { animation-delay: 1.0s; }
.mestrar-end-pot-card:nth-child(6) { animation-delay: 1.15s; }
.mestrar-end-pot-card:nth-child(n+7) { animation-delay: 1.3s; }
@keyframes mestrar-end-pot-pop {
    from { opacity: 0; transform: translateY(12px) scale(0.85); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.mestrar-end-pot-icon {
    width: 42px; height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(255, 217, 122, 0.45));
}
.mestrar-end-pot-tipo {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    text-transform: capitalize;
    color: rgba(232, 216, 184, 0.85);
    letter-spacing: 0.04em;
}
.mestrar-end-pot-pts {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.92rem;
    color: #ffd97a;
    text-shadow: 0 0 8px rgba(255, 217, 122, 0.55);
}

/* v0.40.39: badge de level up + status de persistencia */
.mestrar-end-levelup-badge {
    display: inline-flex; align-items: center;
    margin-left: 6px;
    padding: 2px 8px;
    background: linear-gradient(180deg, #ffd97a, #c9a84c);
    color: #2a1a08;
    border-radius: 10px;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-shadow: none;
    box-shadow: 0 0 10px rgba(255, 217, 122, 0.6);
    animation: mestrar-end-lvup-pulse 1.4s ease-in-out infinite;
}
@keyframes mestrar-end-lvup-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 10px rgba(255, 217, 122, 0.5); }
    50%      { transform: scale(1.08); box-shadow: 0 0 16px rgba(255, 217, 122, 0.85); }
}
.mestrar-end-persist {
    margin-top: 16px;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: 'Lora', serif;
    font-size: 0.84rem;
    text-align: center;
    letter-spacing: 0.04em;
}
.mestrar-end-persist-ok {
    background: rgba(89, 198, 116, 0.15);
    border: 1px solid rgba(89, 198, 116, 0.45);
    color: #c2f0d2;
}
.mestrar-end-persist-warn {
    background: rgba(232, 193, 80, 0.15);
    border: 1px solid rgba(232, 193, 80, 0.45);
    color: #ffe9a8;
}

/* Acoes */
.mestrar-end-actions {
    display: flex; justify-content: center;
    margin-top: 16px;
}
.mestrar-end-actions .mestrar-bn-btn {
    min-width: 200px;
    padding: 10px 22px;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.08em;
}

@media (max-width: 600px) {
    .mestrar-end-title { font-size: 1.5rem; letter-spacing: 0.18em; }
    .mestrar-end-modal { padding: 16px 14px; }
    .mestrar-end-mon-row { grid-template-columns: 44px 1fr; }
    .mestrar-end-mon-imgwrap { width: 44px; height: 44px; }
}

/* RESPONSIVO basico --------------------------------------------- */
@media (max-width: 900px) {
    .mestrar-cockpit { height: 100vh; width: 100vw; border-radius: 0; }
    .mestrar-cockpit-body { grid-template-columns: 1fr; }
    .mestrar-cockpit-recursos { max-height: 240px; }
    .mestrar-actions-grid { grid-template-columns: 1fr; }
    .mestrar-bn-stage { grid-template-columns: 1fr; }
    .mestrar-bn-vs { padding: 6px 0; }
}

/* v0.42.4: Modal unificado de sorteio (sorteio_modal.js) ----------- */
.sorteio-menu-modal {
    max-width: 720px;
}
.sorteio-menu-modal h2 .sm-header-level {
    color: var(--gold);
    font-size: 0.85em;
    font-weight: 600;
    margin-left: 4px;
}
.sorteio-menu-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sorteio-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 1px solid #5a4a3a;
    padding-bottom: 8px;
}
.sorteio-tab {
    background: rgba(0,0,0,0.25);
    color: var(--text-muted);
    border: 1px solid #5a4a3a;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
    flex: 1;
    min-width: 140px;
}
.sorteio-tab:hover {
    background: rgba(0,0,0,0.4);
    color: var(--gold-light);
    border-color: var(--gold-dark);
}
.sorteio-tab.active {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    color: #1a1410;
    border-color: var(--gold);
    font-weight: 700;
}
.sorteio-config {
    background: rgba(0,0,0,0.25);
    border: 1px solid #5a4a3a;
    border-radius: 6px;
    padding: 10px 12px;
}
.sorteio-caps,
.sorteio-evolve-config {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.sorteio-cap-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--gold-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.sorteio-cap-label select,
.sorteio-cap-label input[type="number"] {
    background: #1a1410;
    color: #f0e6d2;
    border: 1px solid #5a4a3a;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 0.92rem;
    min-width: 80px;
}
.sorteio-cap-label select:disabled,
.sorteio-cap-label input[type="number"]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.sorteio-cap-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
    flex-basis: 100%;
}
.sorteio-cap-note.sorteio-warning {
    color: #ffb84d;
    font-style: normal;
    background: rgba(255, 184, 77, 0.08);
    border: 1px solid rgba(255, 184, 77, 0.35);
    border-radius: 4px;
    padding: 5px 8px;
    margin-top: 4px;
}
.sorteio-preview {
    background: rgba(0,0,0,0.25);
    border: 1px solid #5a4a3a;
    border-radius: 6px;
    padding: 10px 12px;
}
.sorteio-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 10px;
    flex-wrap: wrap;
}
.sorteio-preview-header > span {
    color: var(--gold-light);
    font-weight: 600;
    font-size: 0.88rem;
}
.sorteio-preview-table {
    overflow-x: auto;
}
/* .attr-table — portado de docs/sorteador-monstro.html (linhas 60-71) */
.sorteio-preview-table .attr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.sorteio-preview-table .attr-table th,
.sorteio-preview-table .attr-table td {
    padding: 5px 8px;
    border-bottom: 1px solid #5a4a3a;
}
.sorteio-preview-table .attr-table th {
    color: var(--gold-dark);
    font-weight: 600;
    background: rgba(0,0,0,0.3);
    text-align: center;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sorteio-preview-table .attr-table td {
    text-align: center;
}
.sorteio-preview-table .attr-table td:first-child {
    text-align: left;
    color: var(--gold-dark);
}
.sorteio-preview-table .attr-table tr.has-aloc td {
    background: rgba(255, 217, 122, 0.06);
}
.sorteio-preview-table .attr-table .a-base { color: var(--text-light); }
.sorteio-preview-table .attr-table .a-tier { font-weight: 600; color: var(--gold); }
.sorteio-preview-table .attr-table .a-bonus { color: var(--gold); font-weight: 600; }
.sorteio-preview-table .attr-table .a-bonus.zero { color: var(--text-muted); font-weight: normal; }
.sorteio-preview-table .attr-table .a-bonus-neg { color: #e57373; font-weight: 600; }
.sorteio-preview-table .attr-table .a-total { color: #5dd07b; font-weight: 600; }
.sorteio-preview-table .attr-table tr.has-rare td:first-child {
    background: linear-gradient(90deg, rgba(255, 217, 0, 0.12) 0%, transparent 60%);
}
.sorteio-rare {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffd97a, #c9a84c);
    color: #2a1a30;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    animation: rarePulse 1.6s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(255, 217, 122, 0.5);
}
@keyframes rarePulse {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 217, 122, 0.5); }
    50%      { box-shadow: 0 0 12px rgba(255, 217, 122, 0.9); }
}
.sorteio-preview-table .attr-table .tier-pill {
    display: inline-block;
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(0,0,0,0.3);
    border: 1px solid #5a4a3a;
    font-size: 0.75rem;
}
.sorteio-gain {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(93, 208, 123, 0.15);
    border: 1px solid rgba(93, 208, 123, 0.4);
    color: #5dd07b;
    font-size: 0.7rem;
    font-weight: 700;
}
.sorteio-gain-log {
    background: rgba(93, 208, 123, 0.08);
    border: 1px solid rgba(93, 208, 123, 0.35);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 8px 0 4px;
}
.sorteio-gain-log-title {
    display: block;
    color: #5dd07b;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 6px;
}
.sorteio-gain-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sorteio-gain-chip {
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--gold-dark);
    color: var(--gold-light);
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
}
.sorteio-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid #5a4a3a;
}

/* Botão 🎲 nos cards do Bestiário Secreto + armazem do jogador (narrador).
   Alinhado na linha do "Nv.X" — bottom-right do img-wrap, espelhando o X de top-right.
   Sobrepõe o `.monster-dice-btn` antigo (top: 36px) com bottom: 4px + top: auto. */
.bestiary-card .bestiary-card-overlay-dice,
.bestiary-card-img-wrap .monster-dice-btn {
    position: absolute;
    top: auto;
    bottom: 4px;
    right: 4px;
    left: auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0,0,0,0.65);
    border: 1px solid var(--gold-dark);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    z-index: 4;
    transition: all 0.15s;
    padding: 0;
    line-height: 1;
    animation: none;
}
.bestiary-card .bestiary-card-overlay-dice:hover,
.bestiary-card-img-wrap .monster-dice-btn:hover {
    background: var(--gold-dark);
    color: #1a1410;
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(201, 168, 76, 0.5);
    animation: none;
}

/* ============================================================
   Monster Detail — modal unificado (v1: Equipe Ativa)
   Layout landscape: card do bestiario fixo a esquerda + tabs a direita.
   Herda .mestrar-submodal-bd / .mestrar-submodal (base visual).
   ============================================================ */
.monster-detail {
    width: min(960px, 96vw);
    max-height: 90vh;
    overflow: hidden;
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
}

/* Header compacto */
.md-header,
.md-header-compact {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border-bottom: 1px dashed rgba(201, 168, 76, 0.25);
    padding-bottom: 8px;
    margin-bottom: 14px;
    flex-shrink: 0;
}
.md-title {
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    font-size: 1.2rem;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.02em;
}
.md-meta {
    font-family: 'Cinzel', serif;
    color: var(--gold, #c9a84c);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Layout landscape: coluna lateral + coluna principal */
.md-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 18px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
@media (max-width: 720px) {
    .md-layout { grid-template-columns: 1fr; }
}

/* --- Coluna lateral (card + vitals fixos) --- */
.md-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: start;
    position: sticky;
    top: 0;
}
.md-card-wrap {
    width: 100%;
}
/* Card do bestiario embutido — sem cursor pointer, sem dice */
.md-card-wrap .bestiary-card {
    cursor: default !important;
    width: 100%;
    margin: 0 auto;
}
.md-card-wrap .bestiary-card:hover {
    transform: none;
}
.md-card-wrap .monster-dice-btn {
    display: none !important;
}

/* Linha do apelido sob o card */
.md-apelido-line {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(201, 168, 76, 0.18);
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 0.8rem;
    min-height: 30px;
}
.md-apelido-label {
    color: var(--text-muted, #a09080);
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.md-apelido-slot {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.md-apelido-view {
    color: var(--parchment, #f0e6d2);
    font-style: italic;
    font-size: 0.85rem;
}
.md-apelido-empty {
    color: var(--text-muted, #a09080);
    font-style: italic;
    font-size: 0.8rem;
    opacity: 0.6;
}
.md-apelido-input {
    flex: 1 1 auto;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(201, 168, 76, 0.45);
    border-radius: 3px;
    color: var(--parchment, #f0e6d2);
    font-family: 'Lora', serif;
    font-size: 0.85rem;
    padding: 2px 6px;
    min-width: 0;
}
.md-apelido-input:focus {
    outline: none;
    border-color: var(--gold, #c9a84c);
    box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.2);
}
/* Botao lapis/check ao lado do apelido — icones monocromaticos
   (caracteres unicode U+270E e U+2714 — sem emoji presentation). */
.md-apelido-btn {
    background: transparent;
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 4px;
    color: var(--gold-light, #f3da9c);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 3px 8px;
    flex-shrink: 0;
    /* Forca renderizacao monocromatica (impede o navegador de promover
       o caractere unicode pra emoji colorido em alguns sistemas). */
    font-variant-emoji: text;
    font-family: 'Segoe UI Symbol', 'DejaVu Sans', 'Lucida Sans Unicode', sans-serif;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.md-apelido-btn:hover {
    background: rgba(201, 168, 76, 0.15);
    border-color: var(--gold, #c9a84c);
    transform: scale(1.05);
}
.md-apelido-btn.is-editing {
    color: var(--gold-light, #f3da9c);
    border-color: var(--gold, #c9a84c);
    background: rgba(201, 168, 76, 0.18);
}
.md-apelido-btn.is-editing:hover {
    background: rgba(201, 168, 76, 0.28);
    border-color: var(--gold-light, #e8d38a);
}

/* V38: lapis flutuante sobre o card do monstro — narrador clica pra abrir
   o editor de atributos base por cima do modal de detalhe. */
.md-card-host {
    position: relative;
    display: block;
}
.md-card-edit-pencil {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 5;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(40, 28, 16, 0.85);
    border: 1px solid var(--gold, #c9a84c);
    border-radius: 50%;
    color: var(--gold-light, #f3da9c);
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    transition: background 0.15s, transform 0.1s, border-color 0.15s;
    font-variant-emoji: text;
    font-family: 'Segoe UI Symbol', 'DejaVu Sans', 'Lucida Sans Unicode', sans-serif;
}
.md-card-edit-pencil:hover {
    background: rgba(201, 168, 76, 0.35);
    border-color: var(--gold-light, #e8d38a);
    transform: scale(1.08);
}

/* Editor de atributos base aberto por cima do modal de detalhe.
   .mestrar-submodal-bd = 14000 (modal de detalhe);
   .mestrar-backdrop    = 11500 (default — fica embaixo).
   Bumpamos o editor pra 14500 — sempre acima do detalhe. */
.mestrar-backdrop#mestre-edit-base-bd {
    z-index: 14500 !important;
}

.md-efeitos { display: flex; flex-wrap: wrap; gap: 4px; }

/* Barras vitais (HP/MP reusam .mestrar-bn-bar) */
.md-vitals { display: flex; flex-direction: column; gap: 5px; }
.md-bar {
    position: relative;
    height: 18px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    border: 1px solid rgba(201, 168, 76, 0.2);
}
.md-bar-fill { height: 100%; transition: width 0.25s ease; }
.md-bar-cond .md-bar-fill {
    background: linear-gradient(90deg, #c0392b, #ff6b4a);
}
.md-bar-txt {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: var(--parchment, #f0e6d2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    font-family: 'Cinzel', serif;
    letter-spacing: 0.03em;
}

.md-custos {
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    font-size: 0.82rem;
    padding: 5px 8px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    border-left: 2px solid var(--gold, #c9a84c);
}

/* Custos em 2 colunas centralizadas */
.md-custos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.md-custo-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(201, 168, 76, 0.18);
    border-radius: 4px;
    text-align: center;
}
.md-custo-label {
    font-family: 'Cinzel', serif;
    color: var(--text-muted, #a09080);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.md-custo-value {
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
}
.md-custo-var {
    font-size: 0.65em;
    margin-left: 2px;
}

/* XP do monstro dentro do modal: usa o dourado do treinador
   (override apenas no contexto do modal, sem afetar bestiario/equipe). */
.monster-detail .xp-bar {
    background: linear-gradient(90deg, var(--gold-dark, #8b6914), var(--gold, #c9a84c), var(--gold-light, #e8d38a));
    box-shadow: 0 0 6px rgba(201, 168, 76, 0.45);
}

.md-condensacao { display: flex; flex-direction: column; gap: 3px; }
.md-cond-head {
    display: flex;
    justify-content: space-between;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
}
.md-cond-stage { color: #ff6b4a; }
.md-cond-progress { color: var(--text-muted); }

/* --- Coluna principal (tabs) --- */
.md-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.md-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    border-bottom: 1px dashed rgba(201, 168, 76, 0.35);
    margin-bottom: 12px;
    flex-shrink: 0;
}
.md-tab {
    background: rgba(40, 28, 16, 0.6);
    color: rgba(232, 216, 184, 0.65);
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 7px 16px;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.md-tab:hover {
    background: rgba(60, 42, 22, 0.7);
    color: var(--parchment, #f0e6d2);
}
.md-tab.active {
    background: linear-gradient(180deg, rgba(201, 168, 76, 0.28), rgba(201, 168, 76, 0.10));
    color: var(--gold-light, #f3da9c);
    border-color: rgba(201, 168, 76, 0.55);
    box-shadow: 0 -2px 0 0 var(--gold, #c9a84c) inset;
}

/* Panels rolaveis */
.md-panel {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 6px;
}
.md-panel.hidden { display: none; }
.md-section-title {
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    font-size: 0.95rem;
    margin: 0 0 8px;
    letter-spacing: 0.04em;
}

/* Stats (tabela de atributos read-only) — V38: 6 colunas com header */
.md-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    align-content: start;
}
.md-stats-header,
.md-stat-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1.4fr) 56px 56px minmax(110px, 1.2fr) 72px;
    gap: 8px;
    align-items: center;
    padding: 4px 8px;
    font-size: 0.85rem;
}
.md-stats-header {
    font-family: 'Cinzel', serif;
    color: var(--text-muted, #a09080);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(201, 168, 76, 0.25);
    margin-bottom: 4px;
    padding-bottom: 6px;
}
.md-stats-header .md-stat-col-var,
.md-stats-header .md-stat-col-lvl,
.md-stats-header .md-stat-col-equip,
.md-stats-header .md-stat-col-total {
    text-align: center;
}
.md-stat-row {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(201, 168, 76, 0.12);
    border-radius: 4px;
}
.md-stat-col-tier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.md-stat-tier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 20px;
    background: rgba(201, 168, 76, 0.15);
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 3px;
    color: var(--gold, #c9a84c);
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 700;
}
.md-stat-col-nome {
    color: var(--parchment, #f0e6d2);
    font-family: 'Lora', serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.md-stat-pecas {
    color: var(--text-muted);
    font-size: 0.7rem;
}
.md-stat-col-var,
.md-stat-col-lvl {
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 700;
}
.md-stat-col-var.pos { color: #66cc88; }
.md-stat-col-var.neg { color: #e74c3c; }
.md-stat-col-var.zero { color: var(--text-muted); font-weight: 400; }
.md-stat-col-lvl.pos { color: #66cc88; }
.md-stat-col-lvl.zero { color: var(--text-muted); font-weight: 400; }
.md-stat-col-equip {
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}
.md-equip-pts.pos,
.md-equip-pct.pos { color: #3498db; font-weight: 700; }
.md-equip-pts.neg,
.md-equip-pct.neg { color: #e74c3c; font-weight: 700; }
.md-equip-sep { color: rgba(201, 168, 76, 0.4); font-weight: 400; }
/* A4 (Fase B): buff de passiva ativa na coluna Bonus — cor da cobrinha (ciano). */
.md-equip-passiva.pos { color: #7ce1ff; font-weight: 700; }
.md-equip-passiva.neg { color: #e36f6f; font-weight: 700; }
.md-stat-zero { color: rgba(201, 168, 76, 0.3); }
.md-stat-col-total {
    color: var(--gold-light, #f3da9c);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.95rem;
    text-align: right;
}
/* A4 (Fase B): realce do bonus de passiva ativa no Total. */
.md-stat-buff { font-family: inherit; font-size: 0.78rem; font-weight: 600; }
.md-stat-buff.pos { color: #6fe39a; }
.md-stat-buff.neg { color: #e36f6f; }
.md-stat-row.md-stat-row-buffada .md-stat-col-total { color: #aef0c6; }

/* Habilidades — lista paginada com cabecalho */
.md-habs-header,
.md-hab-row {
    display: grid;
    grid-template-columns: 40px 1fr 80px 80px 64px;
    gap: 10px;
    align-items: center;
    padding: 6px 10px;
}
.md-hab-col-acoes { text-align: center; }
/* Etapa 8 (Fase B): switch liga/desliga da passiva DE ATIVACAO na aba Habilidades. */
.md-hab-switch {
    display: inline-flex; width: 42px; height: 20px; border-radius: 11px; cursor: pointer;
    background: rgba(120, 110, 90, 0.35); border: 1px solid rgba(201, 168, 76, 0.35);
    position: relative; transition: background 0.15s;
}
.md-hab-switch::after {
    content: ''; position: absolute; left: 2px; top: 1px;
    width: 16px; height: 16px; border-radius: 50%; background: #c9a84c; transition: left 0.15s;
}
.md-hab-switch.is-on { background: rgba(60, 160, 90, 0.55); }
.md-hab-switch.is-on::after { left: 22px; background: #6fe39a; }
.md-hab-switch.is-busy { opacity: 0.5; pointer-events: none; }
.md-hab-eterna-tag { font-size: 0.6rem; color: var(--text-muted, #a09080); text-transform: uppercase; }
/* Fase C: duracao/cw restante de uma passiva de ativacao ligada (na coluna Acoes da ficha). */
.md-hab-cw-tag {
    display: inline-block;
    margin-right: 6px;
    padding: 0 5px;
    border-radius: 8px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #f0e6c8;
    background: rgba(15, 18, 26, 0.85);
    border: 1px solid rgba(120, 225, 255, 0.45);
    vertical-align: middle;
}
/* A borda de "ativa" reusa a cobrinha ciana de .hab-card-efeito-ativo (selector estendido p/ .md-hab-row-passiva-ativa). */
.md-habs-header {
    font-family: 'Cinzel', serif;
    color: var(--text-muted, #a09080);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(201, 168, 76, 0.25);
    margin-bottom: 4px;
}
.md-habs-header .md-hab-col-poder,
.md-habs-header .md-hab-col-custo {
    text-align: center;
}
.md-habs-rows {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.md-hab-row {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(201, 168, 76, 0.15);
    border-radius: 4px;
    transition: background 0.12s, border-color 0.12s;
    font-size: 0.85rem;
}
.md-hab-row:hover {
    background: rgba(60, 42, 22, 0.4);
    border-color: rgba(201, 168, 76, 0.35);
}
/* v0.94.x: linha de habilidade EXCLUSIVA com foil dourado — mesmo visual do
   .hab-card-exclusiva (sheen diagonal dourado sobre fundo marrom quente). */
.md-hab-row.md-hab-row-exclusiva {
    background:
        linear-gradient(135deg, transparent 30%, rgba(201,168,76,0.28) 50%, transparent 70%),
        linear-gradient(180deg, rgba(46,34,16,0.96), rgba(22,16,7,0.96));
    border-color: rgba(201, 168, 76, 0.55);
}
.md-hab-row.md-hab-row-exclusiva:hover {
    border-color: rgba(201, 168, 76, 0.85);
}
.md-hab-row.md-hab-row-exclusiva .md-hab-col-nome {
    color: #f3e0a8;
    font-weight: 600;
}

/* ============================================================
   v0.95.0 — Camadas visuais compostas das habilidades.
   Compoem com a EXCLUSIVA (fundo dourado), sem conflito:
   - NARRATIVA -> anel/borda violeta (foco na Descricao/Informacoes)
   - PASSIVA   -> ranhuras // diagonais (overlay ::after)
   Aplicado nos 3 renderizadores: card (.hab-card), linha de detalhe
   (.md-hab-row) e botao da arena selvagem (.arena-skill-btn).
   ============================================================ */

/* Narrativa: anel violeta. O box-shadow nao briga com o background dourado
   da exclusiva nem com o border-color do hover — sempre compoe. */
.hab-card.hab-card-narrativa,
.md-hab-row.md-hab-row-narrativa,
.arena-skill-btn.arena-skill-btn-narrativa {
    border-color: rgba(167, 110, 232, 0.85);
    box-shadow: 0 0 0 1px rgba(167, 110, 232, 0.6), 0 0 10px rgba(138, 79, 201, 0.30);
}

/* Multi-efeito: card com >1 efeito ganha borda VERDE (compoe com a violeta da
   narrativa, mesmo padrao de border-color + glow). */
.hab-card.hab-card-multiefeito,
.md-hab-row.md-hab-row-multiefeito,
.arena-skill-btn.arena-skill-btn-multiefeito {
    border-color: rgba(76, 201, 122, 0.85);
    box-shadow: 0 0 0 1px rgba(76, 201, 122, 0.6), 0 0 10px rgba(60, 170, 100, 0.30);
}
/* Narrativa (violeta) E multi-efeito (verde) juntas: anima intercalando as duas
   cores devagar (gira/mistura). */
.hab-card.hab-card-narrativa.hab-card-multiefeito,
.md-hab-row.md-hab-row-narrativa.md-hab-row-multiefeito,
.arena-skill-btn.arena-skill-btn-narrativa.arena-skill-btn-multiefeito {
    animation: habCardNarrMulti 3.5s ease-in-out infinite;
}
@keyframes habCardNarrMulti {
    0%   { border-color: rgba(167,110,232,0.85); box-shadow: 0 0 0 1px rgba(167,110,232,0.6), 0 0 12px rgba(138,79,201,0.38); }
    50%  { border-color: rgba(76,201,122,0.85);  box-shadow: 0 0 0 1px rgba(76,201,122,0.6),  0 0 12px rgba(60,170,100,0.38); }
    100% { border-color: rgba(167,110,232,0.85); box-shadow: 0 0 0 1px rgba(167,110,232,0.6), 0 0 12px rgba(138,79,201,0.38); }
}

/* Passiva: ranhuras // diagonais sobre o fundo (qualquer que seja), via overlay
   que nao captura clique (pointer-events:none) e respeita o border-radius. */
.hab-card.hab-card-passiva,
.md-hab-row.md-hab-row-passiva,
.arena-skill-btn.arena-skill-btn-passiva {
    position: relative;
}
.hab-card.hab-card-passiva::after,
.md-hab-row.md-hab-row-passiva::after,
.arena-skill-btn.arena-skill-btn-passiva::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: repeating-linear-gradient(45deg,
        rgba(255, 255, 255, 0.08) 0 5px, transparent 5px 11px);
}
/* As ranhuras nao passam por cima do icone de tipo nem dos stats (Poder/Custo):
   esses elementos sobem acima do overlay (z-index) e ganham um fundo opaco que
   mascara a ranhura, deixando esses campos limpos. */
.hab-card.hab-card-passiva .hab-card-tipo-icon,
.hab-card.hab-card-passiva .hab-card-stat {
    position: relative;
    z-index: 1;
}
.hab-card.hab-card-passiva .hab-card-stat {
    background: rgba(22, 16, 7, 0.96);
}
.hab-card.hab-card-passiva .hab-card-tipo-icon {
    background: rgba(22, 16, 7, 0.96);
    border-radius: 4px;
}

/* F3d: "efeito ativo" — uma luz/cobrinha ciano correndo na borda do card (passiva/buff
   ativados no combatente). Vive num ::before com mascara de ANEL, entao compoe por cima
   das outras bordas (narrativa/multiefeito = border+glow; passiva = ::after). */
@property --hab-ativo-ang {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.hab-card.hab-card-efeito-ativo,
.md-hab-row.md-hab-row-passiva-ativa,
.mestrar-bn-fighter-card.mestrar-bn-fighter-ativo { position: relative; }
.hab-card.hab-card-efeito-ativo::before,
.md-hab-row.md-hab-row-passiva-ativa::before,
.mestrar-bn-fighter-card.mestrar-bn-fighter-ativo::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from var(--hab-ativo-ang),
        transparent 0deg 270deg,
        rgba(120, 225, 255, 0.55) 312deg,
        rgba(225, 250, 255, 1) 342deg,
        rgba(120, 225, 255, 0.55) 350deg,
        transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 3;
    animation: habEfeitoAtivoCorre 2.4s linear infinite;
}
@keyframes habEfeitoAtivoCorre {
    to { --hab-ativo-ang: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
    .hab-card.hab-card-efeito-ativo::before,
    .md-hab-row.md-hab-row-passiva-ativa::before,
    .mestrar-bn-fighter-card.mestrar-bn-fighter-ativo::before { animation: none; }
}

/* Fase C: skill EM RECARGA (cw rolando na batalha). Acinzenta "um pouco" (dessatura +
   esmaece) e bloqueia o clique; o contador de quanto falta fica num badge no canto. */
.hab-card.hab-card-em-cw {
    position: relative;
    filter: grayscale(0.7) brightness(0.78);
    opacity: 0.72;
    cursor: not-allowed;
    pointer-events: none; /* nao clicavel enquanto recarrega */
}
.hab-card-cw-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(15, 18, 26, 0.92);
    border: 1px solid rgba(201, 168, 76, 0.55);
    color: #f0e6c8;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}
/* Fase C: contador da DURACAO do buff ativo — canto sup. esquerdo (nao acinzenta o card; a
   borda ciano combina com a cobrinha de "efeito ativo"). */
.hab-card-dur-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(15, 18, 26, 0.92);
    border: 1px solid rgba(120, 225, 255, 0.6);
    color: #d8f6ff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* Campos do form de habilidade reservados p/ "Recurso futuro" (Precisao, Cooldown,
   Level minimo): visivelmente desabilitados — apagados + cursor bloqueado. O input
   ja tem o atributo `disabled`; isto so deixa o estado claro na UI. */
.hab-field-futuro {
    opacity: 0.4;
    cursor: not-allowed;
}
.hab-field-futuro input {
    cursor: not-allowed;
}

.md-hab-col-tipo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.md-hab-tipo-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}
.md-hab-tipo-neutro {
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(232, 216, 184, 0.6);
    font-size: 0.95rem;
    line-height: 1;
}
.md-hab-col-nome {
    color: var(--parchment, #f0e6d2);
    font-family: 'Lora', serif;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.md-hab-col-poder,
.md-hab-col-custo {
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    font-weight: 700;
    text-align: center;
    font-size: 0.9rem;
}
.md-hab-col-custo {
    color: #7ecaff;
}
/* Paginacao da lista de habilidades — herda .bestiary-pagination do projeto */
.md-panel[data-panel="habilidades"] .bestiary-pagination {
    margin-top: 10px;
}

/* Aba "Informacoes": Descricao + Info do narrador + Anotacoes do jogador */
.md-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.md-info-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.md-info-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    font-size: 0.9rem;
    margin: 0;
    letter-spacing: 0.04em;
    padding-bottom: 4px;
    border-bottom: 1px dashed rgba(201, 168, 76, 0.2);
}
.md-info-content {
    width: 100%;
}
.md-info-text {
    font-family: 'Lora', serif;
    color: var(--parchment, #f0e6d2);
    font-size: 0.88rem;
    line-height: 1.5;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(201, 168, 76, 0.12);
    border-radius: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 38px;
}
.md-info-readonly {
    background: rgba(0, 0, 0, 0.15);
    border-style: dashed;
    border-color: rgba(201, 168, 76, 0.18);
}
.md-info-empty-wrap { padding: 6px 10px; }
.md-info-empty {
    color: var(--text-muted, #a09080);
    font-style: italic;
    font-size: 0.82rem;
    opacity: 0.7;
}
.md-info-textarea {
    width: 100%;
    min-height: 90px;
    font-family: 'Lora', serif;
    font-size: 0.88rem;
    line-height: 1.5;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(201, 168, 76, 0.45);
    border-radius: 4px;
    color: var(--parchment, #f0e6d2);
    resize: vertical;
    box-sizing: border-box;
}
.md-info-textarea:focus {
    outline: none;
    border-color: var(--gold, #c9a84c);
    box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.2);
}
/* Botao de editar reusa o estilo do .md-apelido-btn */
.md-info-edit-btn {
    background: transparent;
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 4px;
    color: var(--gold-light, #f3da9c);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 2px 7px;
    flex-shrink: 0;
    font-variant-emoji: text;
    font-family: 'Segoe UI Symbol', 'DejaVu Sans', 'Lucida Sans Unicode', sans-serif;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.md-info-edit-btn:hover {
    background: rgba(201, 168, 76, 0.15);
    border-color: var(--gold, #c9a84c);
    transform: scale(1.05);
}
.md-info-edit-btn.is-editing {
    background: rgba(201, 168, 76, 0.18);
    border-color: var(--gold, #c9a84c);
}
.md-info-edit-btn.is-editing:hover {
    background: rgba(201, 168, 76, 0.28);
    border-color: var(--gold-light, #e8d38a);
}

/* Equipamento — V38: 4 slots tipados em grid 2x2 (arma | armadura / orb | consumivel) */
/* Painel da aba ocupa todo o espaco vertical do modal pra slots respirarem. */
.md-panel[data-panel="equipamento"] {
    display: flex;
    flex-direction: column;
}
.md-equip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
}
.md-equip-slot {
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
    cursor: pointer;
    outline: none;
}
.md-equip-slot:hover,
.md-equip-slot:focus-visible {
    background: rgba(60, 42, 22, 0.4);
    border-color: rgba(201, 168, 76, 0.5);
}
.md-equip-slot-head {
    display: flex;
    align-items: center;
    gap: 6px;
}
.md-equip-slot-icon {
    font-size: 1.0rem;
    line-height: 1;
}
.md-equip-slot-titulo {
    flex: 1;
    font-family: 'Cinzel', serif;
    color: var(--gold, #c9a84c);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.md-equip-slot-unequip {
    background: rgba(231, 76, 60, 0.12);
    border: 1px solid rgba(231, 76, 60, 0.35);
    border-radius: 50%;
    color: #e74c3c;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0;
    transition: background 0.12s, transform 0.12s;
}
.md-equip-slot-unequip:hover {
    background: rgba(231, 76, 60, 0.25);
    transform: scale(1.08);
}
.md-equip-slot-empty {
    border-style: dashed;
    align-items: center;
    justify-content: center;
}
.md-equip-slot-empty-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.md-equip-slot-plus {
    color: rgba(201, 168, 76, 0.45);
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    line-height: 1;
}
.md-equip-slot-empty:hover .md-equip-slot-plus {
    color: var(--gold, #c9a84c);
}
/* V38.3 — card do slot equipado: imagem+requisitos a esquerda,
   nome+lista de status (com scroll) a direita. Topos alinhados. */
.md-equip-slot-filled .md-equip-slot-body {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
}
.md-equip-slot-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
}
.md-equip-slot-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    min-height: 0;
}
.md-equip-slot-img-wrap {
    width: 76px;
    height: 76px;
    position: relative;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: 4px;
    padding: 4px;
    flex-shrink: 0;
}
.md-equip-slot-img {
    position: absolute;
    top: 4px; left: 4px; right: 4px; bottom: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    max-width: calc(100% - 8px);
    max-height: calc(100% - 8px);
    object-fit: contain;
}
.md-equip-slot-img-fb {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    opacity: 0.55;
}
.md-equip-slot-nome {
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    font-size: 0.92rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}
.md-equip-slot-status-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}
.md-equip-slot-status-list {
    /* Herda .idtl-list. Override margins/padding pra ficar mais compacto. */
    margin: 0;
    padding: 6px 8px;
    gap: 1px;
}
.md-equip-slot-status-list .idtl-row {
    font-size: 0.78rem;
    line-height: 1.25;
}
.md-equip-slot-status-list .idtl-sign {
    font-size: 0.72rem;
    width: 12px;
}
.md-equip-slot-status-empty {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-style: italic;
    padding: 8px 6px;
}

/* Bloco de Requisitos do slot equipado (coluna esquerda, abaixo da imagem) */
.md-equip-slot-reqs {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.md-equip-slot-reqs-title {
    font-family: 'Cinzel', serif;
    color: var(--gold, #c9a84c);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    border-top: 1px dashed rgba(201, 168, 76, 0.25);
    padding-top: 4px;
}
.md-equip-slot-reqs-list {
    margin: 0;
    padding: 5px 6px;
    gap: 1px;
}
.md-equip-slot-reqs-list .idtl-row {
    font-size: 0.7rem;
    line-height: 1.25;
}
.md-equip-slot-reqs-list .idtl-sign {
    font-size: 0.65rem;
    width: 10px;
}

/* Picker da mochila — V38 layout landscape (lista + preview) */
.monster-detail-bd .mestrar-submodal:has(.md-picker-layout) {
    width: min(820px, 96vw);
    max-height: 86vh;
    height: 86vh;
    display: flex;
    flex-direction: column;
    padding: 14px 18px;
}
.md-picker-layout {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 14px;
    height: 100%;
    min-height: 0;
}
.md-picker-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(201, 168, 76, 0.18);
    border-radius: 6px;
    overflow: hidden;
}
.md-picker-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(201, 168, 76, 0.06);
    border-bottom: 1px solid rgba(201, 168, 76, 0.2);
    font-family: 'Cinzel', serif;
    color: var(--gold, #c9a84c);
}
.md-picker-header-icon { font-size: 1rem; line-height: 1; }
.md-picker-header-title {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.md-picker-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px;
    overflow-y: auto;
    min-height: 0;
}
.md-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(201, 168, 76, 0.15);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
    outline: none;
}
.md-picker-row:hover,
.md-picker-row:focus-visible {
    background: rgba(60, 42, 22, 0.4);
    border-color: rgba(201, 168, 76, 0.4);
}
.md-picker-row.selected {
    background: rgba(201, 168, 76, 0.15);
    border-color: var(--gold, #c9a84c);
    box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.25) inset;
}
.md-picker-row-locked {
    opacity: 0.6;
}
.md-picker-row-incompat {
    opacity: 0.5;
    border-style: dashed;
}
.md-picker-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: 4px;
    padding: 2px;
    flex-shrink: 0;
}
.md-picker-img-fb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.md-picker-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.md-picker-nome {
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.md-picker-qty {
    color: var(--gold, #c9a84c);
    font-size: 0.7rem;
    margin-left: 4px;
}
.md-picker-row-subtipo {
    color: var(--text-muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.md-picker-row-badge {
    font-size: 1rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}
.md-picker-row-badge.locked { background: rgba(231, 76, 60, 0.12); }
.md-picker-row-badge.incompat { background: rgba(201, 168, 76, 0.1); }
.md-picker-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
}
.md-picker-empty small { color: var(--text-muted); opacity: 0.75; }

.md-picker-legend {
    display: flex;
    justify-content: space-around;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid rgba(201, 168, 76, 0.15);
    background: rgba(0, 0, 0, 0.2);
    font-size: 0.66rem;
    color: var(--text-muted);
}
.md-picker-legend .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.md-picker-legend .dot.avail    { background: #66cc88; }
.md-picker-legend .dot.lock     { background: #e74c3c; }
.md-picker-legend .dot.incompat { background: rgba(201, 168, 76, 0.5); }

/* Preview do item selecionado (lado direito) */
.md-picker-preview {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(201, 168, 76, 0.18);
    border-radius: 6px;
    padding: 16px;
    overflow-y: auto;
    min-height: 0;
}
.md-picker-preview-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
}
.md-picker-preview-empty-icon { font-size: 3rem; opacity: 0.35; }
.md-picker-preview-empty-text { font-size: 0.9rem; }
.md-picker-preview-empty-sub { font-size: 0.75rem; opacity: 0.7; }

/* V38.2 — preview landscape: imagem+subtipo+REQUISITOS a ESQUERDA,
   nome+lista de status (com scroll) a DIREITA */
.md-picker-preview-card {
    display: grid;
    grid-template-columns: minmax(160px, 200px) 1fr;
    gap: 16px;
    height: 100%;
    min-height: 0;
    align-items: stretch;
}
.md-picker-preview-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    min-height: 0;
    overflow-y: auto;
}
.md-picker-preview-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 0;
}
.md-picker-preview-img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 180px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 6px;
    padding: 6px;
    position: relative;
    flex-shrink: 0;
}
.md-picker-preview-img {
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    max-width: calc(100% - 12px);
    max-height: calc(100% - 12px);
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.md-picker-preview-img-fb {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    font-size: 4rem;
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.md-picker-preview-nome {
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.2;
}
.md-picker-preview-tipo {
    font-size: 0.7rem;
    color: var(--text-muted);
    padding: 3px 10px;
    background: rgba(201, 168, 76, 0.1);
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    align-self: center;
}
/* V38.2 — lista de status reusa .idtl-list/.idtl-row do ItemDetail.
   Wrapper aplica scroll vertical com altura flexivel ate sobrar espaco. */
.md-picker-status-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Margem interna pequena pra scrollbar nao colar no card .idtl-list */
    padding-right: 4px;
}
.md-picker-status-list {
    /* Herda visual de .idtl-list (background, padding, border) */
    margin: 0;
}
.md-picker-status-empty {
    padding: 14px 12px;
    text-align: center;
    color: rgba(232, 216, 184, 0.55);
    font-style: italic;
    font-size: 0.88rem;
}

/* Bloco de Requisitos abaixo da imagem (coluna 1) */
.md-picker-reqs-block {
    width: 100%;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.md-picker-reqs-title {
    font-family: 'Cinzel', serif;
    color: var(--gold, #c9a84c);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    border-top: 1px dashed rgba(201, 168, 76, 0.25);
    padding-top: 6px;
}
.md-picker-reqs-list {
    /* Herda visual de .idtl-list */
    margin: 0;
    font-size: 0.82rem;
}
.md-picker-reqs-list .idtl-row {
    font-size: 0.82rem;
}
.md-picker-preview-no-bonus {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.78rem;
    margin: 4px 0;
}
.md-picker-preview-reqs {
    width: 100%;
    margin-top: 4px;
    font-size: 0.78rem;
}
.md-picker-preview-reqs strong {
    color: var(--gold, #c9a84c);
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: 4px;
}
.md-picker-preview-reqs ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.md-picker-preview-req {
    padding: 2px 8px;
    border-radius: 3px;
    font-family: 'Lora', serif;
}
.md-picker-preview-req.req-ok   { color: #66cc88; }
.md-picker-preview-req.req-fail { color: #e74c3c; }
.md-picker-preview-desc {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.78rem;
    line-height: 1.4;
    margin: 0;
    text-align: center;
}
.md-picker-preview-status {
    width: 100%;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    text-align: center;
}
.md-picker-preview-status.locked {
    background: rgba(231, 76, 60, 0.12);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}
.md-picker-preview-status.incompat {
    background: rgba(201, 168, 76, 0.08);
    border: 1px solid rgba(201, 168, 76, 0.25);
    color: var(--text-muted);
}
.md-picker-preview-btn {
    margin-top: 4px;
    width: 100%;
    padding: 10px 14px;
    background: linear-gradient(180deg, #c9a84c 0%, #a08838 100%);
    border: 1px solid #8a7530;
    border-radius: 5px;
    color: #1f1810;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: filter 0.12s, transform 0.12s;
}
.md-picker-preview-btn:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.md-picker-preview-btn.disabled,
.md-picker-preview-btn:disabled {
    background: rgba(201, 168, 76, 0.1);
    border-color: rgba(201, 168, 76, 0.2);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
    filter: none;
}

/* Responsivo: em telas estreitas (< 700px) o picker empilha lista em cima
   e preview embaixo. */
@media (max-width: 700px) {
    .md-picker-layout {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(180px, 40%) 1fr;
    }
}
.md-empty {
    padding: 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
    text-align: center;
}

/* ============================================
   v0.85 — ItemDetail (card padrao de item RPG)
   Aberto via AlternartItemDetail.open. Reusa .mestrar-submodal*, .md-tab,
   .md-panel e .passe-detail-* dentro da aba Recompensa.
   ============================================ */
.item-detail-modal {
    width: min(720px, 96vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.idtl-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px 8px;
    border-bottom: 1px solid rgba(201,168,76,0.18);
}
.idtl-title {
    flex: 1;
    margin: 0;
    font-family: 'Cinzel Decorative', serif;
    color: var(--gold-light, #f3da9c);
    font-size: 1.2rem;
    line-height: 1.2;
}
.idtl-sub-chip {
    padding: 3px 10px;
    border: 1px solid rgba(201,168,76,0.4);
    border-radius: 12px;
    background: rgba(201,168,76,0.12);
    color: var(--gold-light, #f3da9c);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.idtl-tabs {
    padding: 8px 20px 0;
    flex-shrink: 0;
}

.idtl-body {
    flex: 0 0 auto;
    overflow: hidden;
    padding: 14px 20px 18px;
    display: flex;
}

.idtl-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 18px;
    width: 100%;
    min-width: 0;
    align-items: stretch;
}
@media (max-width: 560px) {
    .idtl-grid { grid-template-columns: 1fr; }
}

.idtl-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.idtl-img-wrap {
    position: relative;
    width: 200px;
    height: 200px;
    border: 2px solid var(--gold-dark, #8b6914);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(201,168,76,0.08));
    box-shadow: 0 0 14px rgba(0,0,0,0.5), inset 0 0 18px rgba(201,168,76,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    container-type: inline-size;
}
/* Reusa .passe-edit-pencil (canto sup. dir., redondo dourado).
   .idtl-edit-pencil ajusta posicao para ficar visivelmente dentro da moldura. */
.idtl-edit-pencil {
    top: 8px;
    right: 8px;
}
.idtl-img {
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
}
.idtl-img-fallback {
    font-size: clamp(2rem, 32cqi, 3.6rem);
    opacity: 0.5;
}
.idtl-name {
    font-family: 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    font-size: 0.95rem;
    text-align: center;
    word-break: break-word;
    max-width: 200px;
}

.idtl-right {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.idtl-panel {
    flex: 1 1 0;
    overflow-y: auto;
    padding-right: 4px;
    min-height: 0;
}
.idtl-panel.hidden { display: none; }

/* Lista de stats — bonus / penalidade / requisito.
   v0.87.1: caixa unica no MESMO estilo .idtl-meta (uniformidade entre as 3 abas).
   v0.85.2: altura batendo com o bloco da imagem+nome (~234px). */
.idtl-list {
    list-style: none;
    margin: 0;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(201,168,76,0.1);
    border-radius: 4px;
}
.idtl-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    background: transparent;
    border: 0;
    font-family: 'Lora', serif;
    font-size: 0.92rem;
    line-height: 1.3;
}
.idtl-sign {
    flex-shrink: 0;
    font-size: 0.85rem;
    width: 14px;
    text-align: center;
    opacity: 0.85;
}
.idtl-text {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.idtl-row.idtl-bonus      { color: #6cb8ff; }
.idtl-row.idtl-bonus .idtl-sign { color: #6cb8ff; }

.idtl-row.idtl-penalidade { color: #ff6b6b; }
.idtl-row.idtl-penalidade .idtl-sign { color: #ff6b6b; }

.idtl-row.idtl-req        { color: var(--gold-light, #f3da9c); }
.idtl-row.idtl-req .idtl-sign { color: var(--gold, #c9a84c); }

.idtl-list-empty {
    padding: 14px 12px;
    text-align: center;
    color: rgba(232,216,184,0.55);
    font-style: italic;
    font-size: 0.88rem;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(201,168,76,0.1);
    border-radius: 4px;
}

/* Imagens de tipo dentro das linhas de requisito (Tipagem). */
.idtl-tipos {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    vertical-align: middle;
}
.idtl-tipo-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 50%;
    cursor: help;
    background: rgba(0,0,0,0.25);
}
.idtl-tipo-fallback {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.35);
    border-radius: 50%;
    font-size: 0.7rem;
    color: rgba(232,216,184,0.7);
    cursor: help;
}
.idtl-empty-inline {
    color: rgba(232,216,184,0.5);
    font-style: italic;
}

/* Aba Informacoes */
.idtl-desc {
    margin: 0 0 10px;
    color: var(--parchment, #e8d8b8);
    font-family: 'Lora', serif;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
}
.idtl-desc-empty { color: rgba(232,216,184,0.55); }
.idtl-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(201,168,76,0.1);
    border-radius: 4px;
    color: var(--text-muted, rgba(232,216,184,0.7));
    font-size: 0.82rem;
}
.idtl-meta strong { color: var(--gold-light, #f3da9c); font-weight: 600; margin-right: 4px; }

/* Aba Recompensa — layout compacto pra caber em ~234px de altura. */
.idtl-rec {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.idtl-rec-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Barra de progresso compacta (~10px de altura). Reusa cores do tema. */
.idtl-rec-progress {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.idtl-rec-bar {
    position: relative;
    height: 10px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(201,168,76,0.32);
    border-radius: 5px;
    overflow: hidden;
}
.idtl-rec-bar-fill {
    height: 100%;
    background: linear-gradient(90deg,
        var(--passe-primary, #c9a84c),
        var(--passe-glow, rgba(255,224,102,0.85)));
    box-shadow: 0 0 6px var(--passe-glow, rgba(255,224,102,0.55));
    transition: width 0.2s ease;
}
.idtl-rec-progress-text {
    text-align: right;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    color: var(--gold-light, #f3da9c);
    letter-spacing: 0.04em;
}

/* Caixa de stats (reusa .idtl-list pra demarcar). Linhas usam grid 2-col:
   label esq, valor dir. */
.idtl-rec-list {
    /* herda padding/border/background de .idtl-list */
    padding: 6px 12px;
}
.idtl-rec-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 10px;
    padding: 2px 0;
    color: var(--parchment, #e8d8b8);
    font-size: 0.9rem;
}
.idtl-rec-label {
    color: var(--text-muted, rgba(232,216,184,0.65));
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.idtl-rec-value {
    color: var(--gold-light, #f3da9c);
    font-weight: 700;
    font-size: 0.92rem;
    text-align: right;
}
.idtl-rec-value.detail-status-claimed   { color: #6dba6b; }
.idtl-rec-value.detail-status-available { color: var(--passe-primary, #ffe066); text-shadow: 0 0 6px var(--passe-glow, rgba(255,224,102,0.55)); }
.idtl-rec-value.detail-status-locked    { color: #c47070; }

/* Mensagem final (locked / claimed). v0.87.1: mesma borda da .idtl-meta. */
.idtl-rec-msg {
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.82rem;
    text-align: center;
    line-height: 1.3;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(201,168,76,0.1);
}
.idtl-rec-msg-locked  { color: #c47070; }
.idtl-rec-msg-claimed { color: #6dba6b; }

.idtl-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid rgba(201,168,76,0.18);
    flex-shrink: 0;
}