/* 
 * ARQUIVO: assets/css/style.css
 * PROJETO: Playlist Master
 * DESCRIÇÃO: Design System UI Kit : Paleta Coral (rgb(var(--coral))), Dark Charcoal (#262629) e Tipografia Plus Jakarta Sans
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

/* ==========================================================================
   DESIGN TOKENS (sistema de temas)
   Brilho: data-bright="dark" (padrao) | "light"
   Cor:    data-accent="coral" (padrao) | oceano | esmeralda | ametista | ambar
   Cada cor guarda trios RGB; utilitarios Tailwind consomem via
   rgb(var(--x) / <alpha-value>) para manter opacidades (bg-coral/20 etc).
   Palcos escuros por design (.pm-game-arena e .custom-player-ui) forcam o
   set dark dentro do subtree, independentemente do brilho global.
   ========================================================================== */

/* Trios de cada cor de marca.
   Regra de contraste (08/09/2026): o tom BASE de cada modo e o HOVER foram
   calibrados para texto BRANCO sobre solido >= ~3:1 no base e >= ~4:1 no hover.
   HOVER SEMPRE ESCURECE (nunca clareia): clarear apagava o texto branco no
   hover dos btn-coral. Os bases tambem servem como texto sobre as superficies
   do proprio modo (>= 3:1 em fundos escuros puros). */
:root, [data-accent="coral"]     { --accent-d: 255 85 68;   --accent-d-h: 224 68 51;   --accent-l: 214 48 32;   --accent-l-h: 166 32 22; }
[data-accent="oceano"]    { --accent-d: 2 132 199;   --accent-d-h: 12 74 110;    --accent-l: 3 105 161;   --accent-l-h: 12 74 110; }
[data-accent="esmeralda"] { --accent-d: 5 150 105;   --accent-d-h: 4 120 87;     --accent-l: 4 120 87;    --accent-l-h: 6 78 59; }
[data-accent="ametista"]  { --accent-d: 124 58 237;  --accent-d-h: 109 40 217;   --accent-l: 109 40 217;  --accent-l-h: 76 29 149; }
[data-accent="ambar"]     { --accent-d: 217 119 6;   --accent-d-h: 180 83 9;     --accent-l: 180 83 9;    --accent-l-h: 124 45 18; }

/* Escala charcoal (modo escuro = padrao). Trios identicos aos hex do layout
   atual (200:#C8C8D0 300:#9E9EA7 400:#6E6E77 500:#4E4E57 600:#3D3D45
   700:#2F2F36 800:#25252B 850:#1F1F24 900:#1A1A1E 950:#141417) para que o
   modo escuro fique pixel a pixel como sempre foi. */
:root {
    --c50: 245 245 247;  --c100: 228 228 232; --c200: 200 200 208;
    --c300: 158 158 167; --c400: 110 110 119; --c500: 78 78 87;
    --c600: 61 61 69;    --c700: 47 47 54;    --c800: 37 37 43;
    --c850: 31 31 36;    --c900: 26 26 30;    --c950: 20 20 23;
    --ink: 255 255 255;  --veil: 255 255 255; --field: 18 18 21;
    --canvas: 38 38 41;
    --coral: var(--accent-d); --coral-hover: var(--accent-d-h);
}

/* Modo claro: escala inverte (50-600 viram tinta escura, 700-950 viram
   superficies claras). Contraste minimo AA nos pares texto/fundo. */
[data-bright="light"] {
    --c50: 26 26 30;    --c100: 38 38 44;    --c200: 26 26 30;
    --c300: 43 43 49;   --c400: 80 80 90;    --c500: 100 100 110;
    --c600: 125 125 135; --c700: 212 212 220; --c800: 235 235 240;
    --c850: 248 248 251; --c900: 255 255 255; --c950: 245 245 247;
    --ink: 26 26 30;    --veil: 0 0 0;       --field: 255 255 255;
    --canvas: 244 244 247;
    --coral: var(--accent-l); --coral-hover: var(--accent-l-h);
}

/* Palcos sempre-escuros (arena game, player e barra lateral): devolvem o set
   escuro no subtree. A sidebar tambem forca o accent em versao escura para que
   "text-coral" continue legivel sobre o trilho #1E1E22 no modo claro. */
.pm-game-arena, .custom-player-ui {
    --c50: 245 245 247;  --c100: 228 228 232; --c200: 200 200 208;
    --c300: 158 158 167; --c400: 110 110 119; --c500: 78 78 87;
    --c600: 61 61 69;    --c700: 47 47 54;    --c800: 37 37 43;
    --c850: 31 31 36;    --c900: 26 26 30;    --c950: 20 20 23;
    --ink: 255 255 255;  --veil: 255 255 255; --field: 18 18 21;
}
.sidebar {
    --c50: 245 245 247;  --c100: 228 228 232; --c200: 200 200 208;
    --c300: 158 158 167; --c400: 110 110 119; --c500: 78 78 87;
    --c600: 61 61 69;    --c700: 47 47 54;    --c800: 37 37 43;
    --c850: 31 31 36;    --c900: 26 26 30;    --c950: 20 20 23;
    --ink: 255 255 255;  --veil: 255 255 255; --field: 18 18 21;
    --coral: var(--accent-d); --coral-hover: var(--accent-d-h);
}

/* Utilitarios usados pelo JSX */
.bg-field { background-color: rgb(var(--field)); }

/* Acessibilidade: foco de teclado sempre visivel na cor do tema */
:focus-visible {
    outline: 2px solid rgb(var(--coral));
    outline-offset: 2px;
}

/* No modo claro o botao branco precisa de contorno para nao virar
   "fantasma" sobre os cards brancos, e o hover escurece mais */
[data-bright="light"] .btn-white-contrast {
    border: 1px solid rgb(var(--c600));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}
[data-bright="light"] .btn-white-contrast:hover:not(:disabled) {
    background-color: #E7E7EE;
}

/* ========================================================================== */

:root {
    --bg-canvas: rgb(var(--canvas));
    --bg-card: rgb(var(--c850));
    --bg-surface: rgb(var(--c900));
    --bg-input: rgb(var(--field));
    --coral-primary: rgb(var(--coral));
    --coral-hover: rgb(var(--coral-hover));
    --coral-muted: color-mix(in srgb, rgb(var(--coral)) 15%, transparent);
    --coral-glow: color-mix(in srgb, rgb(var(--coral)) 35%, transparent);
    --border-card: rgb(var(--c700));
    --border-subtle: rgb(var(--c600));
    --border-white-div: #E8E8EE;
    --text-white: rgb(var(--ink));
    --text-dark: #1E1E22;
    --text-muted: rgb(var(--c400));
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-canvas);
    color: var(--text-white);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- LOGO ESTILO UI 01 KIT --- */
.ui-kit-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -0.04em;
}

/* Wordmark "Playlist Master" (substitui o antigo PM 01 STUDIO) */
.ui-kit-logo .logo-word {
    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #FFFFFF;
}

/* Logo fora do trilho escuro (paginas de auth/planos): texto segue o brilho do tema */
.ui-kit-logo.logo-on-canvas .logo-word {
    color: rgb(var(--ink));
}

.ui-kit-logo .logo-badge {
    background: var(--coral-primary);
    color: #FFFFFF;
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 6px;
    letter-spacing: 0.08em;
    box-shadow: 0 4px 10px color-mix(in srgb, rgb(var(--coral)) 35%, transparent);
}

/* --- BARRA SEGMENTADA SUPERIOR (ESTILO UI 01 KIT) --- */
.ui-segmented-nav {
    background: #FFFFFF;
    border-radius: 18px;
    padding: 4px;
    display: flex;
    align-items: stretch;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    width: 100%;
    overflow-x: auto;
}

.ui-segmented-item {
    flex: 1;
    min-width: 110px;
    padding: 10px 14px;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #2D2D32;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    border-right: 1px solid var(--border-white-div);
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    text-decoration: none;
    cursor: default;
}

.ui-segmented-item:last-child {
    border-right: none;
}

.ui-segmented-item.active {
    background: var(--coral-primary);
    color: #FFFFFF;
    border-radius: 12px;
    border-right: none;
    box-shadow: 0 4px 14px color-mix(in srgb, rgb(var(--coral)) 40%, transparent);
    transform: scale(1.02);
}

.ui-segmented-item.done {
    background: #F3F3F7;
    color: var(--coral-primary);
    font-weight: 900;
}

/* Hover de feedback nos itens inativos da barra segmentada (a barra e branca
   nos dois temas, entao usa literais escuros proprios) */
.ui-segmented-item:not(.active):hover {
    background: #EDEDF2;
    color: #1A1A1E;
}

/* --- CARD MENU LATERAL COM TOPO CORAL (ESTILO UI KIT) --- */
.ui-menu-card {
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.ui-menu-header {
    background: var(--coral-primary);
    color: #FFFFFF;
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
    padding: 14px 16px;
}

.ui-menu-item {
    background: #FFFFFF;
    color: #2D2D32;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 13px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-bottom: 1px solid var(--border-white-div);
    transition: all 0.15s ease;
    text-decoration: none;
}

.ui-menu-item:hover,
.ui-menu-item.active {
    background: #E8E8EE;
    color: #1A1A1E;
}

.ui-menu-item:last-child {
    border-bottom: none;
}

/* --- CARDS ATTENTION (BRANCO E DARK) DO UI KIT --- */
.ui-card-attention-white {
    background: #FFFFFF;
    color: #1F1F24;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
}

.ui-card-attention-white .attention-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--coral-primary);
    margin-bottom: 12px;
}

.ui-card-attention-dark {
    background: rgb(var(--c800));
    color: rgb(var(--c300));
    border-radius: 20px;
    padding: 24px;
    border: 1px solid rgb(var(--c700));
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.ui-card-attention-dark .attention-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(var(--ink));
    margin-bottom: 12px;
}

/* --- BOTÕES DO UI KIT --- */
.btn-coral {
    background-color: var(--coral-primary);
    color: #FFFFFF;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 14px;
    padding: 12px 24px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 6px 18px color-mix(in srgb, rgb(var(--coral)) 35%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    cursor: pointer;
}

.btn-coral:hover:not(:disabled) {
    background-color: var(--coral-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px color-mix(in srgb, rgb(var(--coral)) 48%, transparent);
}

.btn-coral:active:not(:disabled) {
    transform: translateY(0);
}

.btn-white-contrast {
    background-color: #FFFFFF;
    color: #18181B !important;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 14px;
    padding: 12px 24px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    cursor: pointer;
}

.btn-white-contrast:hover:not(:disabled) {
    background-color: #F3F3F6;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.btn-white-contrast:active:not(:disabled) {
    transform: translateY(0);
}

.btn-dark-charcoal {
    background-color: #1C1C20;
    color: #FFFFFF;
    border: 1px solid #36363E;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 14px;
    padding: 12px 24px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-dark-charcoal:hover:not(:disabled) {
    background-color: #27272E;
    border-color: #4D4D58;
}

/* --- SLIDERS INTERATIVOS (ESTILO UI 01 KIT) --- */
.ui-slider-box {
    background: rgb(var(--c900));
    border: 1px solid rgb(var(--c700));
    border-radius: 18px;
    padding: 18px;
}

.ui-slider-track-wrap {
    position: relative;
    width: 100%;
    height: 10px;
    background: rgb(var(--c700));
    border-radius: 9999px;
    display: flex;
    align-items: center;
    margin: 12px 0;
}

.ui-slider-fill {
    position: absolute;
    left: 0;
    height: 100%;
    background: var(--coral-primary);
    border-radius: 9999px;
}

.ui-slider-thumb {
    position: absolute;
    width: 22px;
    height: 22px;
    background: rgb(var(--ink));
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    transform: translateX(-50%);
    cursor: pointer;
    transition: transform 0.1s ease;
}

.ui-slider-thumb:hover {
    transform: translateX(-50%) scale(1.15);
}

/* --- BARRAS DE NÍVEL / EQUALIZADOR DO UI KIT --- */
.ui-level-bar {
    height: 8px;
    background: var(--coral-primary);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* --- SCROLLBAR --- */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgb(var(--c800));
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--coral-primary);
    border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--coral-hover);
}
/* ==========================================================================
   PLAYLIST MASTER: CARROSSEL DE LOCUTORES ESTILO GAME (COMPACTO)
   ========================================================================== */

.pm-game-arena {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    background: linear-gradient(180deg, #181920 0%, #111216 100%);
    border: 1px solid color-mix(in srgb, rgb(var(--coral)) 25%, transparent);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.pm-game-top-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
    gap: 6px;
}

.pm-game-badge-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgb(var(--coral));
}

/* --- Hero Spotlight --- */
.pm-game-spotlight {
    position: relative;
    background: linear-gradient(135deg, rgba(30, 31, 38, 0.95) 0%, rgba(18, 19, 24, 0.98) 100%);
    border: 1px solid color-mix(in srgb, rgb(var(--coral)) 30%, transparent);
    border-radius: 12px;
    padding: 12px 16px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.pm-game-spotlight-glow {
    position: absolute;
    top: -40px;
    left: -30px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, color-mix(in srgb, rgb(var(--coral)) 22%, transparent) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(35px);
}

.pm-game-spotlight-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 18px;
}

.pm-game-avatar-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.pm-game-avatar-frame {
    width: 78px;
    height: 78px;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(135deg, rgb(var(--coral)) 0%, rgba(255,255,255,0.1) 100%);
    box-shadow: 0 0 18px color-mix(in srgb, rgb(var(--coral)) 40%, transparent);
    transform: perspective(400px) rotateY(-3deg);
}

.pm-game-avatar-frame img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
    display: block;
    background: #121215;
}

.pm-game-status-beacon {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 4px;
    background: color-mix(in srgb, rgb(var(--coral)) 15%, transparent);
    border: 1px solid color-mix(in srgb, rgb(var(--coral)) 50%, transparent);
    color: rgb(var(--coral));
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.pm-game-status-beacon .beacon-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgb(var(--coral));
    box-shadow: 0 0 5px rgb(var(--coral));
    animation: beaconPulse 1.2s infinite alternate;
}

@keyframes beaconPulse {
    0% { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(1.3); opacity: 1; }
}

.pm-game-dossier {
    flex: 1;
    min-width: 0;
}

.pm-game-topline {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.pm-game-category-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: color-mix(in srgb, rgb(var(--coral)) 10%, transparent);
    border-left: 2px solid rgb(var(--coral));
    color: rgb(var(--coral));
    font-size: 0.62rem;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.pm-game-badge-suggested {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #f59e0b;
    font-size: 0.58rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}

.pm-game-badge-new {
    background: #D1FF00;
    color: #000;
    font-size: 0.5rem;
    font-weight: 900;
    padding: 1px 5px;
    border-radius: 2px;
}

.pm-game-name {
    font-size: 1.35rem;
    font-weight: 900;
    color: #FFFFFF;
    margin: 1px 0 3px 0;
    text-transform: uppercase;
    font-style: italic;
    letter-spacing: 0.4px;
    text-shadow: 0 0 14px color-mix(in srgb, rgb(var(--coral)) 40%, transparent);
}

.pm-game-bio {
    font-size: 0.72rem;
    color: #9E9EA7;
    margin: 0 0 8px 0;
    line-height: 1.3;
    max-width: 550px;
}

/* Stat Bars */
.pm-game-stat-bars {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.pm-game-stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 90px;
}

.pm-game-stat-item .stat-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.54rem;
    font-weight: 800;
    color: #9E9EA7;
    text-transform: uppercase;
}

.pm-game-stat-item .stat-header span:last-child {
    color: rgb(var(--coral));
}

.pm-game-stat-item .stat-track {
    display: flex;
    gap: 2px;
    height: 4px;
}

.pm-game-stat-item .stat-seg {
    flex: 1;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.pm-game-stat-item .stat-seg.fill {
    background: linear-gradient(90deg, rgb(var(--coral)), #F59E0B);
    box-shadow: 0 0 5px color-mix(in srgb, rgb(var(--coral)) 60%, transparent);
}

/* Controls */
.pm-game-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pm-btn-audition {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 6px;
    background: color-mix(in srgb, rgb(var(--coral)) 15%, transparent);
    border: 1px solid color-mix(in srgb, rgb(var(--coral)) 50%, transparent);
    color: rgb(var(--coral));
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pm-btn-audition:hover {
    background: color-mix(in srgb, rgb(var(--coral)) 28%, transparent);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 0 14px color-mix(in srgb, rgb(var(--coral)) 40%, transparent);
}

.pm-btn-audition.playing {
    background: rgba(0, 230, 118, 0.15);
    border-color: #00E676;
    color: #00E676;
    box-shadow: 0 0 14px rgba(0, 230, 118, 0.35);
}

.pm-wave-bars {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 10px;
}

.pm-wave-bars span {
    width: 2px;
    border-radius: 1px;
    background: #00E676;
    animation: pmWaveBounce 0.8s ease-in-out infinite;
}

.pm-wave-bars span:nth-child(1) { height: 4px; animation-delay: 0s; }
.pm-wave-bars span:nth-child(2) { height: 9px; animation-delay: 0.15s; }
.pm-wave-bars span:nth-child(3) { height: 6px; animation-delay: 0.3s; }
.pm-wave-bars span:nth-child(4) { height: 10px; animation-delay: 0.45s; }

.pm-btn-locked-in {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgb(var(--coral)) 0%, color-mix(in srgb, rgb(var(--coral)) 82%, black) 100%);
    color: #FFFFFF;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    box-shadow: 0 0 14px color-mix(in srgb, rgb(var(--coral)) 40%, transparent);
}

/* --- Roster Carousel --- */
.pm-roster-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.pm-roster-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px;
}

.pm-roster-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 900;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-style: italic;
}

.pm-roster-counter {
    font-size: 0.62rem;
    font-weight: 900;
    color: #9E9EA7;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pm-roster-counter strong {
    color: rgb(var(--coral));
}

.pm-roster-carousel-body {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.pm-roster-arrow {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #17181D;
    border: 1px solid color-mix(in srgb, rgb(var(--coral)) 30%, transparent);
    color: rgb(var(--coral));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 5;
}

.pm-roster-arrow:hover {
    background: #23252E;
    border-color: rgb(var(--coral));
    color: #FFFFFF;
    transform: scale(1.06);
    box-shadow: 0 0 12px color-mix(in srgb, rgb(var(--coral)) 45%, transparent);
}

.pm-roster-track {
    flex: 1;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 8px 4px 12px 4px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, rgb(var(--coral)) 40%, transparent) rgba(15, 16, 20, 0.6);
}

.pm-roster-track::-webkit-scrollbar {
    height: 4px;
}

.pm-roster-track::-webkit-scrollbar-track {
    background: rgba(15, 16, 20, 0.6);
    border-radius: 3px;
}

.pm-roster-track::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, rgb(var(--coral)) 40%, transparent);
    border-radius: 3px;
}

.pm-fighter-card {
    position: relative;
    flex-shrink: 0;
    width: 110px;
    height: 146px;
    background: linear-gradient(175deg, #1C1D24 0%, #111216 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 6px 6px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    scroll-snap-align: center;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.pm-fighter-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, rgb(var(--coral)) 45%, transparent);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 10px color-mix(in srgb, rgb(var(--coral)) 20%, transparent);
    background: linear-gradient(175deg, #252630 0%, #15161C 100%);
}

.pm-fighter-card.active {
    transform: translateY(-5px) scale(1.05);
    border: 2px solid rgb(var(--coral));
    box-shadow: 0 0 18px color-mix(in srgb, rgb(var(--coral)) 50%, transparent), inset 0 0 8px color-mix(in srgb, rgb(var(--coral)) 20%, transparent);
    background: linear-gradient(175deg, #2A2427 0%, #171418 100%);
}

.pm-card-slot {
    position: absolute;
    top: -6px;
    left: 5px;
    background: #2C2C33;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #9E9EA7;
    font-size: 0.44rem;
    font-weight: 900;
    padding: 1px 4px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    z-index: 4;
}

.pm-fighter-card.active .pm-card-slot {
    background: rgb(var(--coral));
    border-color: rgb(var(--coral));
    color: #FFFFFF;
    box-shadow: 0 0 6px color-mix(in srgb, rgb(var(--coral)) 60%, transparent);
}

.pm-card-star {
    position: absolute;
    top: -6px;
    right: 5px;
    background: #f59e0b;
    color: #000;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    box-shadow: 0 0 5px rgba(245, 158, 11, 0.6);
}

.pm-card-avatar-wrap {
    position: relative;
    width: 48px;
    height: 48px;
    margin: 4px 0 4px 0;
    border-radius: 8px;
    padding: 2px;
    background: rgba(255, 255, 255, 0.08);
}

.pm-fighter-card.active .pm-card-avatar-wrap {
    background: rgb(var(--coral));
    box-shadow: 0 0 10px color-mix(in srgb, rgb(var(--coral)) 50%, transparent);
}

.pm-card-avatar-wrap img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
    display: block;
    background: #121215;
}

.pm-card-name {
    font-size: 0.68rem;
    font-weight: 900;
    color: #FFFFFF;
    text-transform: uppercase;
    text-align: center;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1px;
}

.pm-card-role {
    font-size: 0.52rem;
    color: #9E9EA7;
    text-align: center;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.pm-card-preview-btn {
    margin-top: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, rgb(var(--coral)) 12%, transparent);
    border: 1px solid color-mix(in srgb, rgb(var(--coral)) 35%, transparent);
    color: rgb(var(--coral));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pm-card-preview-btn:hover {
    background: rgb(var(--coral));
    color: #FFFFFF;
    transform: scale(1.1);
    box-shadow: 0 0 8px color-mix(in srgb, rgb(var(--coral)) 50%, transparent);
}

.pm-card-preview-btn.playing {
    background: #00E676;
    border-color: #00E676;
    color: #041a0b;
    box-shadow: 0 0 8px rgba(0, 230, 118, 0.6);
}