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

/* ==========================================
   RESET + BASE
   ========================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    background-color: #0b0f19;
    background-image: radial-gradient(circle at 50% 50%, #151d30 0%, #0b0f19 100%);
    color: #f3f4f6;
    min-height: 100dvh;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.fantasy-title { font-family: 'Cinzel', serif; }

/* --- Cartas --- */
.card-perspective { perspective: 800px; }

.mtg-card {
    transition: all 0.2s ease;
    transform-style: preserve-3d;
    aspect-ratio: 2.5 / 3.5;
    flex-shrink: 0;
    margin: 1px 2px;
}
.mtg-card:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 16px rgba(0,0,0,0.5);
    z-index: 30;
}

.playable-glow {
    box-shadow: 0 0 8px #10b981, inset 0 0 4px #10b981;
    border-color: #10b981 !important;
    animation: pulse-glow 2s infinite;
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 6px #10b981; }
    50% { box-shadow: 0 0 12px #34d399; }
}

.card-tapped {
    transform: rotate(90deg) scale(0.72) !important;
    filter: brightness(0.55);
    z-index: 10;
    margin: 4px 8px !important;
}
.card-tapped:hover { transform: rotate(90deg) scale(0.75) translateY(-2px) !important; }

/* --- Deck pile --- */
.deck-pile-container { position: relative; width: 40px; height: 56px; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.pile-card {
    position: absolute; width: 40px; height: 56px; border-radius: 3px;
    border: 1px solid #1c1917; box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    background-image: url('cardback.jpg') !important; background-size: cover; background-position: center;
}
.pile-card:nth-child(1) { transform: translate(0,0) rotate(0deg); }
.pile-card:nth-child(2) { transform: translate(1px,-1px) rotate(0.5deg); }
.pile-card:nth-child(3) { transform: translate(2px,-2px) rotate(-1deg); }
.pile-card:nth-child(4) { transform: translate(3px,-3px) rotate(1deg); }

/* --- Verso carta IA --- */
.ai-card-back {
    border-radius: 0.3rem; border: 1px solid #3b2314;
    background-color: #331a06 !important; background-image: url('cardback.jpg') !important;
    background-size: cover; background-position: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.ai-card-reveal-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.12rem 0.15rem;
    background: rgba(0,0,0,.78);
    color: #f3f4f6;
    font-size: 0.42rem;
    line-height: 1.05;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.ai-card-reveal-fallback {
    background-image: none !important;
    background: linear-gradient(135deg, #1e3a8a, #111827) !important;
}

/* --- Reserva visual de mana --- */
#player-mana, #ai-mana {
    font-size: 0.65rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Feedback combate --- */
.damage-hit { position: relative; isolation: isolate; animation: combat-avatar-shake 0.5s ease both; }
.damage-hit::after {
    content: ''; position: absolute; inset: -3px; border: 2px solid rgba(248,113,113,0.9);
    border-radius: 0.8rem; box-shadow: 0 0 10px rgba(239,68,68,0.8);
    pointer-events: none; animation: combat-hit-flash 0.5s ease-out both; z-index: 20;
}
.combat-damage-float {
    position: absolute; z-index: 30; left: 50%; top: 50%; display: flex; align-items: center; gap: 0.15rem;
    color: #fecaca; font-family: 'Cinzel', serif; font-size: clamp(1rem, 4vw, 1.8rem);
    font-weight: 900; line-height: 1; white-space: nowrap; pointer-events: none;
    text-shadow: 0 2px 0 #7f1d1d, 0 0 10px rgba(239,68,68,1);
    animation: combat-damage-float 0.8s ease-out forwards;
}
@keyframes combat-avatar-shake {
    0%,100%{transform:translateX(0)} 15%{transform:translateX(-5px)rotate(-1deg)}
    30%{transform:translateX(5px)rotate(1deg)} 45%{transform:translateX(-3px)}
    60%{transform:translateX(3px)} 75%{transform:translateX(-1px)}
}
@keyframes combat-hit-flash { 0%{opacity:0;transform:scale(.9)} 20%{opacity:1;transform:scale(1.01)} 100%{opacity:0;transform:scale(1.1)} }
@keyframes combat-damage-float {
    0%{opacity:0;transform:translate(-50%,-10%)scale(.4)}
    18%{opacity:1;transform:translate(-50%,-50%)scale(1.1)}
    45%{opacity:1;transform:translate(-50%,-85%)scale(1)}
    100%{opacity:0;transform:translate(-50%,-150%)scale(.7)}
}

/* --- Selo buff --- */
.creature-buff-badge {
    /* O selo fica logo acima dos números de poder/resistência na carta. */
    position: relative; z-index: 20;
    display: inline-flex; align-items: center; justify-content: center;
    width: fit-content;
    padding: 0.04rem 0.22rem; border: 1px solid #a7f3d0; border-radius: 0.2rem;
    background: linear-gradient(135deg,#065f46,#10b981); color: #ecfdf5;
    font-size: 0.5rem; font-weight: 900; line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0,0,0,.75); box-shadow: 0 0 5px rgba(52,211,153,.6);
    pointer-events: none; animation: creature-buff-hop 1.15s ease-in-out infinite;
}
@keyframes creature-buff-hop {
    0%,100%{transform:translateY(0)scale(1)} 45%{transform:translateY(-3px)scale(1.05)} 65%{transform:translateY(-1px)scale(1.01)}
}

/* --- Performance --- */
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
    .mtg-card:hover{transform:none!important}
}
body.low-performance *,
body.low-performance *::before,
body.low-performance *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
body.low-performance .playable-glow,
body.low-performance .creature-buff-badge,
body.low-performance .animate-bounce,
body.low-performance .animate-pulse{animation:none!important}
body.low-performance .damage-hit::after{animation:none!important}

img{content-visibility:auto}
.mtg-card img,.ai-card-back{content-visibility:auto;contain:paint}

/* --- Sidebar + Overlay --- */
#sidebar-panel{transition:transform .3s ease,opacity .3s ease}
#sidebar-toggle-btn{display:none}
#sidebar-overlay{display:none!important;pointer-events:none!important;}

/* Botão flutuante de Log: ESCONDIDO por padrão (PC). */
#log-toggle-btn{display:none!important;}

/* --- Scrollbar --- */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:#111827}
::-webkit-scrollbar-thumb{background:#4b5563;border-radius:2px}

/* ==========================================
   MOBILE BATTLE (max-width: 1023px)
   ========================================== */
@media (max-width: 1023px) {

/* --- Header: legível mas compacto --- */
header { padding: 0.25rem 0.5rem !important; }
header h1 { font-size: 0.7rem !important; }
header .w-8.h-8 { width: 1.5rem !important; height: 1.5rem !important; font-size: 0.6rem !important; }
#phase-main1,#phase-combat,#phase-main2{ padding: 0.15rem 0.35rem !important; font-size: 0.5rem !important; }
#ai-zone-label,#player-zone-label{ font-size: 0.55rem !important; }

/* --- Main: empilhado vertical --- */
main {
    flex-direction: column !important;
    padding: 0.2rem !important;
    gap: 0.2rem !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
main > .flex-1 { width: 100% !important; min-width: 0 !important; }

/* --- Sidebar: lateral esquerda com LOG apenas (mobile) --- */
#sidebar-panel {
    position: fixed !important; left: 0.5rem !important; top: 4rem !important; bottom: auto !important;
    height: 35vh !important; max-height: 35vh !important; min-height: 35vh !important;
    width: 320px !important; max-width: 88vw !important; z-index: 50 !important;
    background: transparent !important; border: none !important;
    box-shadow: none !important; border-radius: 0 !important;
    overflow-y: visible !important;
    padding: 0 !important;
    display: flex !important; flex-direction: column !important; gap: 0.3rem !important;
    transform: translateX(0) !important; opacity: 1 !important; pointer-events: auto !important;
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), opacity .3s ease !important;
}
#sidebar-panel.sidebar-hidden {
    transform: translateX(-115%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#content-log {
    display: flex !important; flex: 1 !important;
    height: 35vh !important; max-height: 35vh !important; min-height: 35vh !important;
}

.log-panel-container {
    flex: 1 !important; height: 35vh !important; max-height: 35vh !important; min-height: 35vh !important;
    display: flex !important; flex-direction: column !important;
    background: #0f172a !important;
    border: 2px solid #334155 !important;
    border-radius: 1rem !important;
    padding: 0.75rem !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 8px 10px -6px rgba(0, 0, 0, 0.7) !important;
    opacity: 1 !important;
    overflow: hidden !important;
}

.log-panel-container > div:last-child,
#game-logs-scroll-container {
    flex: 1 !important; min-height: 0 !important; max-height: none !important;
    height: 100% !important;
    overflow-y: auto !important;
    background: #020617 !important;
    border: 1px solid #1e293b !important;
    border-radius: 0.5rem !important;
}

/* Esconder avatares no mobile (já estão nos botões) */
#ai-avatar, #player-avatar { display: none !important; }

/* Mobile: esconder abas, mostrar só log */
.sidebar-tabs { display: none !important; }
#content-stats { display: none !important; }
#content-log { display: flex !important; }

/* Botão flutuante de log: visível só no mobile */
#log-toggle-btn { display: flex !important; }

/* Mostrar botão de fechar no mobile */
.sidebar-close-btn { display: flex !important; }

/* Log panel ocupa todo o espaço na sidebar lateral */
.log-panel-container {
    flex: 1 !important;
    overflow: hidden !important;
    min-height: 0 !important;
}
.log-panel-container > div:last-child {
    flex: 1 !important;
    overflow-y: auto !important;
}

/* --- Cartas: 4rem na mão e campo --- */
.game-player-hand .mtg-card    { width: 3.6rem !important; min-width: 3.6rem !important; margin: 1px !important; }
.game-battlefield .mtg-card    { width: 3.0rem !important; min-width: 3.0rem !important; }
#player-lands .mtg-card,
#ai-lands .mtg-card            { width: 3.8rem !important; min-width: 3.8rem !important; height: 5.0rem !important; margin: 0.5px 1px !important; }
#ai-hand .ai-card-back         { width: 2.2rem !important; aspect-ratio: 2.5/3.5; }

/* --- Containers: altura do conteúdo --- */
.game-ai-hand           { height: auto !important; }
.game-ai-lands          { height: auto !important; }
.game-player-lands-box  { height: auto !important; }
.game-phase-btn         { height: auto !important; flex-direction: row !important; gap: 0.5rem !important; }
.game-battlefield       { min-height: 150px !important; max-height: none !important; height: auto !important; flex: 1 1 auto !important; overflow: visible !important; min-width: 0 !important; }

    /* O campo mantém o painel visível e cada zona rola horizontalmente. */
    #ai-creatures,
    #combat-player-creatures {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    #ai-creatures .mtg-card,
    #combat-player-creatures .mtg-card {
        flex: 0 0 auto !important;
    }
.game-player-hand       { display: flex !important; flex-wrap: wrap !important; gap: 1px !important; max-height: 5.8rem !important; overflow-y: auto !important; justify-content: center !important; align-items: flex-start !important; align-content: flex-start !important; }

    #combat-player-creatures,
    #ai-creatures           { min-height: 84px !important; gap: 0.3rem !important; padding: 0.6rem 0.3rem !important; align-items: center !important; }

/* --- Botão Avançar Fase --- */
.game-phase-btn { gap: 0.5rem !important; }
#next-phase-btn {
    font-size: 0.65rem !important;
    padding: 0.35rem 0.6rem !important;
    min-height: 38px !important;
    flex: 1 !important;
}
.game-phase-btn > div:last-child { white-space: nowrap; font-size: 0.55rem !important; }

/* --- Deck pile --- */
.deck-pile-container { width: 28px !important; height: 39px !important; }
.pile-card { width: 28px !important; height: 39px !important; }

/* --- Avatares compactos na sidebar --- */
#ai-avatar, #player-avatar { padding: 0.4rem !important; gap: 0.25rem !important; }
#ai-avatar .grid, #player-avatar .grid { gap: 0.2rem !important; }
#ai-avatar .py-1, #player-avatar .py-1 { padding-top: 0.15rem !important; padding-bottom: 0.15rem !important; }
#ai-avatar .h-7, #player-avatar .h-7 { height: 1.5rem !important; }
#ai-avatar .text-base, #player-avatar .text-base { font-size: 0.7rem !important; }

/* --- Logs: flexível com auto-scroll --- */
.log-panel-container {
    max-height: none !important;
    overflow: hidden !important;
}
.log-panel-container > div:last-child,
#game-logs-scroll-container {
    max-height: none !important;
    overflow-y: auto !important;
}
#game-logs { font-size: 0.5rem !important; }

/* --- Card zoom: compacto --- */
#card-zoom-modal img { width: 5rem !important; }
#card-zoom-modal h3 { font-size: 0.8rem !important; }

/* --- Barra rápida mobile --- */
#mobile-quick-bar { display: none; }
#player-lands-hint { display: none !important; }

} /* end mobile portrait (max-width: 1023px) */

/* ==========================================
   TABLET/MOBILE LANDSCAPE (501px - 1023px)
   ========================================== */
@media (min-width: 501px) and (max-width: 1023px) {
    .game-player-hand .mtg-card   { width: 4.2rem !important; min-width: 4.2rem !important; }
    .game-battlefield .mtg-card   { width: 3.7rem !important; min-width: 3.7rem !important; }
    #player-lands .mtg-card,
    #ai-lands .mtg-card           { width: 4.0rem !important; min-width: 4.0rem !important; height: 5.3rem !important; margin: 0.5px !important; }
    #ai-hand .ai-card-back        { width: 2.6rem !important; }
    .game-battlefield             { min-height: 160px !important; }
    #combat-player-creatures,
    #ai-creatures                 { min-height: 100px !important; gap: 0.4rem !important; padding: 0.6rem 0.3rem !important; align-items: center !important; }
    header h1                     { font-size: 0.75rem !important; }
    #phase-main1,#phase-combat,#phase-main2{ font-size: 0.55rem !important; }
    #ai-zone-label,#player-zone-label{ font-size: 0.6rem !important; }
    #next-phase-btn               { font-size: 0.7rem !important; }
    #player-lands-hint            { display: block !important; font-size: 0.5rem !important; opacity: 0.7; }
    .game-player-hand             { max-height: 6.6rem !important; }
    #card-zoom-modal img          { width: 6rem !important; }
    #card-zoom-modal h3           { font-size: 0.9rem !important; }
}


/* --- Campo de batalha: scroll horizontal no mobile --- */
.battlefield-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.battlefield-scroll::-webkit-scrollbar {
    height: 4px;
}
.battlefield-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}
.battlefield-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}
.battlefield-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* --- Barra rápida mobile: horizontal abaixo do combate --- */
@media (max-width: 1023px) {
#mobile-quick-bar {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    gap: 0.3rem !important;
    padding: 0.25rem 0.4rem !important;
}
#mobile-quick-bar .draw-glow-mobile { 
    box-shadow: 0 0 10px #eab308, 0 0 16px #facc15 !important;
    border-color: #fbbf24 !important;
}
} /* end mobile (max-width: 1023px) */

/* =========================================
   MOBILE LANDSCAPE: separar stats do botão
   ========================================= */
@media (max-width: 1023px) and (orientation: landscape) {
    .player-stats-inline {
        background: rgba(0, 0, 0, 0.6) !important;
        border: 1px solid #374151 !important;
        border-radius: 0.5rem !important;
        padding: 0.25rem 0.5rem !important;
        margin-top: 0.15rem !important;
    }
}

/* ==========================================
   DESKTOP (>= 1024px) - layout lateral
   ========================================== */
@media (min-width:1024px) {
    main {
        flex-direction:row!important;
        padding:0.75rem!important;
        gap:0.75rem!important;
        overflow-y:hidden!important;
    }
    main > .flex-1 {
        width:auto!important;
        min-width:0!important;
    }

    #sidebar-panel, #sidebar-panel.sidebar-hidden {
        position:sticky!important;
        top:0.5rem!important;
        transform:none!important;
        opacity:1!important;
        pointer-events:auto!important;
        width:20rem!important;
        max-width:none!important;
        background:transparent!important;
        border-right:none!important;
        box-shadow:none!important;
        z-index:auto!important;
        padding:0!important;
        overflow-y:visible!important;
        height:calc(100vh - 5.5rem)!important;
        display:flex!important;
        flex-direction:column!important;
        gap:0.5rem!important;
    }
    #content-log {
        display:flex!important;
        flex:1!important;
        height:220px!important;
        min-height:220px!important;
        max-height:220px!important;
    }
    #content-stats {
        display:flex!important;
        flex-shrink:0!important;
    }
    .sidebar-tabs { display:none!important; }
    #mobile-quick-bar { display: none !important; }
    #sidebar-toggle-btn { display:none!important; }
    #log-toggle-btn { display: none !important; }
    .sidebar-close-btn { display: none !important; }
    #ai-avatar, #player-avatar { display: flex !important; }
    /* Desktop: abas visíveis, conteúdo controlado por JS */
    .sidebar-tabs { display: flex !important; }
    #content-stats { display: flex !important; }
    #player-lands, #ai-lands { gap: 0.3rem !important; }
    .game-player-hand { max-height: none !important; overflow-y: visible !important; justify-content: center !important; }
    #sidebar-overlay { display:none!important; }

    .game-player-hand .mtg-card   { width:5.5rem!important; min-width:5.5rem!important; }
    .game-battlefield .mtg-card   { width:5.5rem!important; min-width:5.5rem!important; }
    #player-lands .mtg-card,
    #ai-lands .mtg-card           { width:4.2rem!important; min-width:4.2rem!important; margin:1px!important; }
    #ai-hand .ai-card-back        { width:2.5rem!important; }

    .game-battlefield {
        min-height:260px!important;
        max-height:440px!important;
        overflow-y:hidden!important;
    }
    #combat-player-creatures,
    #ai-creatures                 { min-height:100px!important; gap:1rem!important; padding:0.25rem!important; }

    header { padding:0.5rem 1.5rem!important; }
    header h1 { font-size:0.875rem!important; }
    header .w-8.h-8 { width:2rem!important; height:2rem!important; font-size:0.75rem!important; }
    #phase-main1,#phase-combat,#phase-main2{ padding:0.35rem 0.75rem!important;font-size:0.75rem!important; }
    #next-phase-btn { font-size:0.75rem!important; padding:0.5rem 0.75rem!important; }
    #ai-zone-label,#player-zone-label{ font-size:0.65rem!important; }
    #player-lands-hint { display:block!important; font-size:0.65rem!important; }

    #ai-avatar, #player-avatar { padding:0.75rem!important; }
    #ai-avatar .h-7, #player-avatar .h-7 { height:1.75rem!important; }

    /* Painel de logs: scroll vertical no desktop */
    .log-panel-container { min-height: 0 !important; overflow: hidden !important; }
    .log-panel-container > div:last-child { overflow-y: auto !important; }
    #game-logs { max-height: none !important; }

    #card-zoom-modal img { width:8rem!important; }
    #card-zoom-modal h3 { font-size:1.1rem!important; }
}

/* ==========================================
   MODAIS NO MOBILE: compactos para caber na tela SEM scroll
   ========================================== */
@media (max-width: 1023px) {
    /* Reduz padding gigante */
    .mob-modal { padding: 0.6rem !important; }
    .mob-modal .p-8 { padding: 0.8rem !important; }
    .mob-modal .p-6 { padding: 0.6rem !important; }
    .mob-modal .p-5 { padding: 0.5rem !important; }
    .mob-modal .p-4 { padding: 0.5rem !important; }
    .mob-modal .p-3 { padding: 0.4rem !important; }

    /* Margin/padding vertical reduzido */
    .mob-modal .mb-8, .mob-modal .my-8 { margin-bottom: 0.5rem !important; margin-top: 0.5rem !important; }
    .mob-modal .mb-6, .mob-modal .my-6 { margin-bottom: 0.4rem !important; margin-top: 0.4rem !important; }
    .mob-modal .mb-5, .mob-modal .my-5 { margin-bottom: 0.35rem !important; margin-top: 0.35rem !important; }
    .mob-modal .mb-4, .mob-modal .my-4 { margin-bottom: 0.3rem !important; margin-top: 0.3rem !important; }
    .mob-modal .mb-3, .mob-modal .my-3 { margin-bottom: 0.25rem !important; margin-top: 0.25rem !important; }
    .mob-modal .mb-2, .mob-modal .my-2 { margin-bottom: 0.15rem !important; margin-top: 0.15rem !important; }

    /* Texto menor nos modais */
    .mob-modal .text-3xl { font-size: 1.25rem !important; }
    .mob-modal .text-2xl { font-size: 1.1rem !important; }
    .mob-modal .text-xl { font-size: 1rem !important; }
    .mob-modal .text-lg { font-size: 0.85rem !important; }
    .mob-modal .text-base { font-size: 0.75rem !important; }
    .mob-modal .text-sm { font-size: 0.7rem !important; }
    .mob-modal .text-xs { font-size: 0.6rem !important; }

    /* Botões mais compactos */
    .mob-modal button { padding: 0.25rem 0.5rem !important; font-size: 0.65rem !important; }
    .mob-modal .px-4 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .mob-modal .px-5 { padding-left: 0.6rem !important; padding-right: 0.6rem !important; }
    .mob-modal .px-6 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
    .mob-modal .py-2 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
    .mob-modal .py-3 { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; }
    .mob-modal .py-4 { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }

    /* Gap reduzido */
    .mob-modal .gap-5 { gap: 0.4rem !important; }
    .mob-modal .gap-4 { gap: 0.3rem !important; }
    .mob-modal .gap-3 { gap: 0.2rem !important; }
    .mob-modal .gap-2 { gap: 0.15rem !important; }
    .mob-modal .gap-1 { gap: 0.1rem !important; }
    /* Cartas no mulligan e deckbuilder: menores mas proporcionais */
    .mob-modal .mtg-card { width: 3.5rem !important; height: auto !important; }
    .mob-modal .team-card { width: 3.5rem !important; height: auto !important; }
    

    /* Emojis e ícones menores */
    .mob-modal .text-7xl { font-size: 2.5rem !important; }
    .mob-modal .text-6xl { font-size: 2rem !important; }
    .mob-modal .text-5xl { font-size: 1.8rem !important; }
    .mob-modal .text-4xl { font-size: 1.5rem !important; }

    /* Imagens menores */

    /* Só ativa scroll se REALMENTE não couber (fallback) */
    .mob-modal {
        max-height: 95dvh !important;
    }
}
@media (max-width: 500px) {
    .mob-modal .sm\:grid-cols-2,
    .mob-modal .md\:grid-cols-2,
    .mob-modal .md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    .mob-modal .max-w-2xl,
    .mob-modal .max-w-3xl,
    .mob-modal .max-w-5xl {
        max-width: 98vw !important;
    }
}

/* --- Dica contextual de fase --- */
.contextual-hint {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 1.35rem;
    padding: 0.2rem 0.45rem;
    border: 1px solid rgba(59, 130, 246, 0.28);
    border-radius: 0.5rem;
    background: rgba(15, 23, 42, 0.72);
    color: #93c5fd;
    font-size: 0.62rem;
    line-height: 1.1;
    text-align: center;
}
.contextual-hint i { color: #60a5fa; font-size: 0.65rem; }
.contextual-hint.hint-required { color: #fde68a; border-color: rgba(234,179,8,.38); background: rgba(113,63,18,.24); }
.contextual-hint.hint-required i { color: #facc15; }
.contextual-hint.hint-combat { color: #fca5a5; border-color: rgba(239,68,68,.38); background: rgba(127,29,29,.24); }
.contextual-hint.hint-combat i { color: #f87171; }
.contextual-hint.hint-ready { color: #a7f3d0; border-color: rgba(16,185,129,.32); background: rgba(6,78,59,.22); }
.contextual-hint.hint-ready i { color: #34d399; }

@media (max-width: 1023px) {
    .contextual-hint { font-size: 0.55rem; min-height: 1.15rem; padding: 0.15rem 0.3rem; }
    .game-phase-btn {
        flex-wrap: wrap !important;
        align-items: stretch !important;
        padding: 0.35rem !important;
        gap: 0.35rem !important;
    }
    .game-phase-btn #next-phase-btn {
        order: 1;
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    .game-phase-btn .player-stats-inline {
        order: 2;
        flex: 0 0 auto !important;
        min-height: 38px;
        padding: 0.25rem 0.45rem !important;
        gap: 0.3rem !important;
        border: 1px solid rgba(75,85,99,.8);
        border-radius: 0.6rem;
        background: linear-gradient(135deg, rgba(17,24,39,.95), rgba(3,7,18,.95)) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 5px rgba(0,0,0,.25);
        font-size: 0.55rem !important;
    }
    .game-phase-btn .player-stats-inline > span:not(#mobile-player-life):not(#player-mana-ready-count) {
        opacity: .55;
    }
    .game-phase-btn #mobile-player-life,
    .game-phase-btn #player-mana-ready-count {
        display: inline-flex;
        align-items: center;
        min-height: 26px;
        padding: 0.2rem 0.35rem;
        border-radius: 0.4rem;
        font-weight: 900;
        background: rgba(0,0,0,.45);
    }
    .game-phase-btn #mobile-player-life {
        color: #fca5a5;
        border: 1px solid rgba(239,68,68,.3);
    }
    .game-phase-btn #player-mana-ready-count::-webkit-scrollbar { display: none; }
    .game-phase-btn #player-mana-ready-count {
        min-width: 3.5rem;
        max-width: 7.2rem;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scrollbar-width: none;
        color: #6ee7b7;
        border: 1px solid rgba(16,185,129,.3);
    }
    .game-phase-btn .contextual-hint {
        flex: 0 0 100% !important;
        flex-basis: 100%;
        order: 3;
        min-height: 30px;
        border-radius: 0.55rem;
    }
}

/* --- Touch targets --- */
@media (pointer:coarse) {
    #next-phase-btn,
    #sidebar-toggle-btn { min-height:40px; min-width:40px; }
    .game-player-hand .mtg-card,
    .game-battlefield .mtg-card { min-width:40px!important; min-height:50px!important; }
}

/* --- iPhone safe-area (mobile only) --- */
@media (max-width: 1023px) {
    @supports (padding-top: env(safe-area-inset-top)) {
        header { padding-top:calc(0.15rem + env(safe-area-inset-top,0px))!important; }
        #sidebar-panel {
            padding-top:calc(0.4rem + env(safe-area-inset-top,0px))!important;
            padding-bottom:calc(0.4rem + env(safe-area-inset-bottom,0px))!important;
        }
    }
}


/* --- FORÇADO MODO VERTICAL / RETRATO NO MOBILE --- */
@media (max-width: 1023px) {
    main {
        flex-direction: column !important;
        overflow-y: auto !important;
    }
    main > .flex-1 {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ==========================================
   TRAVA DE ORIENTAÇÃO
   O travamento em retrato é feito pelo manifest.json ("orientation":
   "portrait") e pelo screen.orientation.lock() no JS (funciona em PWA
   standalone no Android). Removemos o antigo hack CSS que girava o <html>
   inteiro com transform: rotate(-90deg) - ele quebrava scroll, touch em
   coordenadas e modais. Em iOS Safari o usuario simplesmente vira o
   aparelho de volta para retrato, o que e aceitavel e nao quebra nada.
   ========================================== */

/* ==========================================
   SPELL ANIMATIONS & VISUAL EFFECTS
   ========================================== */
@keyframes flash-red {
    0% { border-color: currentColor; filter: brightness(1) drop-shadow(0 0 0 red); }
    30% { border-color: #ef4444; filter: brightness(2) drop-shadow(0 0 25px red); }
    100% { border-color: currentColor; filter: brightness(1) drop-shadow(0 0 0 red); }
}
@keyframes flash-dark {
    0% { border-color: currentColor; filter: brightness(1) drop-shadow(0 0 0 purple); }
    30% { border-color: #a855f7; filter: brightness(0.2) drop-shadow(0 0 25px purple); }
    100% { border-color: currentColor; filter: brightness(1) drop-shadow(0 0 0 purple); }
}
@keyframes flash-white {
    0% { border-color: currentColor; filter: brightness(1) drop-shadow(0 0 0 white); }
    30% { border-color: #facc15; filter: brightness(2.5) drop-shadow(0 0 25px gold); }
    100% { border-color: currentColor; filter: brightness(1) drop-shadow(0 0 0 white); }
}
@keyframes pulse-green-glow {
    0% { border-color: currentColor; box-shadow: 0 0 5px #10b981; }
    50% { border-color: #10b981; box-shadow: 0 0 35px #10b981, inset 0 0 15px #10b981; }
    100% { border-color: currentColor; box-shadow: 0 0 5px #10b981; }
}
@keyframes float-up-fade {
    0% { transform: translate(-50%, 0) scale(0.8); opacity: 0; }
    30% { transform: translate(-50%, -20px) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -60px) scale(0.9); opacity: 0; }
}
@keyframes shake-card {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px) rotate(-2deg); }
    40%, 80% { transform: translateX(6px) rotate(2deg); }
}

.spell-flash-red { animation: flash-red 0.6s ease-out, shake-card 0.5s ease-in-out; }
.spell-flash-dark { animation: flash-dark 0.8s ease-out, shake-card 0.5s ease-in-out; }
.spell-flash-white { animation: flash-white 0.7s ease-out, shake-card 0.5s ease-in-out; }
.spell-buff-green { animation: pulse-green-glow 1.2s ease-in-out; }

.floating-text-badge {
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translateX(-50%);
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: 1.1rem;
    color: #ffffff;
    text-shadow: 0 0 6px rgba(0,0,0,0.9), 1px 1px 3px rgba(0,0,0,0.9);
    pointer-events: none;
    z-index: 100;
    animation: float-up-fade 1.5s forwards ease-out;
}

/* --- Cinematic Card Casting Animations --- */
@keyframes spell-cast-entrance {
    0% { transform: scale(0.4) rotate(-8deg); filter: blur(8px); opacity: 0; }
    70% { transform: scale(1.04) rotate(1deg); filter: blur(0); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
.animate-spell-cast {
    animation: spell-cast-entrance 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ==========================================
   AJUSTE MOBILE — criaturas do campo maiores
   Mantém a mão e os terrenos no tamanho original.
   ========================================== */
@media (max-width: 500px) {
    .game-battlefield .mtg-card,
    #ai-creatures .mtg-card,
    #combat-player-creatures .mtg-card {
        width: 5rem !important;
        min-width: 5rem !important;
    }

    #ai-creatures,
    #combat-player-creatures {
        min-height: 140px !important;
        gap: 0.55rem !important;
        padding: 0.65rem 0.6rem !important;
    }

    .game-battlefield {
        min-height: 310px !important;
    }
}

@media (min-width: 501px) and (max-width: 1023px) {
    .game-battlefield .mtg-card,
    #ai-creatures .mtg-card,
    #combat-player-creatures .mtg-card {
        width: 5.5rem !important;
        min-width: 5.5rem !important;
    }

    #ai-creatures,
    #combat-player-creatures {
        min-height: 154px !important;
        gap: 0.65rem !important;
    }

    .game-battlefield {
        min-height: 340px !important;
    }
}

/* ==========================================
   MOBILE — ETAPA 1: mão horizontal e terrenos compactos
   Mantém a mesa como prioridade visual, sem reduzir as criaturas.
   ========================================== */
@media (max-width: 1023px) {
    /* A mão não quebra mais em duas ou mais linhas: deslize lateralmente. */
    .game-player-hand {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        align-content: center !important;
        gap: 0.3rem !important;
        height: 5.65rem !important;
        min-height: 5.65rem !important;
        max-height: 5.65rem !important;
        padding: 0.15rem 0.35rem 0.3rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .game-player-hand .mtg-card {
        flex: 0 0 auto !important;
        width: 3.75rem !important;
        min-width: 3.75rem !important;
        margin: 0 !important;
    }

    /* Terrenos menores no mobile: continuam clicáveis e rolam lateralmente. */
    #player-lands .mtg-card,
    #ai-lands .mtg-card {
        width: 3.25rem !important;
        min-width: 3.25rem !important;
        height: 4.35rem !important;
        margin: 0.25rem !important;
    }

    #player-lands,
    #ai-lands {
        min-height: 4.7rem !important;
        padding-top: 0.15rem !important;
        padding-bottom: 0.15rem !important;
        gap: 0.2rem !important;
    }

    .game-ai-lands,
    .game-player-lands-box {
        padding-top: 0.15rem !important;
        padding-bottom: 0.15rem !important;
    }
}

/* --- Aviso discreto: Estudo Cuidado --- */
.rhystic-study-notice {
    position: fixed;
    top: 4.6rem;
    left: 50%;
    z-index: 120;
    max-width: min(92vw, 31rem);
    padding: 0.7rem 1rem;
    border: 1px solid #3b82f6;
    border-radius: 0.7rem;
    background: rgba(15, 23, 42, 0.97);
    color: #dbeafe;
    font-size: 0.76rem;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translate(-50%, -12px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
.rhystic-study-notice.rhystic-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.rhystic-study-notice.rhystic-paid {
    border-color: #34d399;
    color: #d1fae5;
}
.rhystic-study-notice.rhystic-draw {
    border-color: #60a5fa;
    color: #dbeafe;
}
@media (max-width: 1023px) {
    .rhystic-study-notice {
        top: 3.5rem;
        font-size: 0.68rem;
    }
}

/* --- Cinemática: Explosão de Seda --- */
.silklash-explosion-overlay {
    position: fixed;
    inset: 0;
    z-index: 115;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(2, 12, 8, 0.78);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.26s ease;
    pointer-events: none;
}
.silklash-explosion-overlay.silklash-visible { opacity: 1; }
.silklash-scene { position: relative; width: min(86vw, 23rem); height: min(86vw, 23rem); display: flex; align-items: center; justify-content: center; }
.silklash-card-wrap { position: relative; z-index: 3; width: 12rem; height: 16.8rem; overflow: hidden; border: 3px solid #6ee7b7; border-radius: 1rem; box-shadow: 0 0 18px #10b981, 0 0 58px rgba(16,185,129,.85); animation: silklash-card-pop .48s cubic-bezier(.17,.89,.32,1.35) both; }
.silklash-card-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.silklash-fallback { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; background: #064e3b; font-size: 5rem; }
.silklash-label { position: absolute; z-index: 4; top: .55rem; left: 50%; transform: translateX(-50%); width: max-content; max-width: 94%; padding: .35rem .7rem; border: 1px solid #a7f3d0; border-radius: 999px; background: rgba(2,44,34,.92); color: #d1fae5; font-family: 'Cinzel',serif; font-size: .68rem; font-weight: 900; letter-spacing: .06em; }
.silklash-damage-text { position: absolute; z-index: 4; right: .45rem; bottom: .45rem; left: .45rem; padding: .42rem; border: 1px solid rgba(167,243,208,.55); border-radius: .45rem; background: rgba(2,20,13,.88); color: #ecfdf5; font-size: .67rem; font-weight: 800; text-align: center; }
.silklash-web { position: absolute; z-index: 2; top: 50%; left: 50%; width: 8px; height: 8px; border: 2px solid rgba(167,243,208,.9); border-radius: 50%; box-shadow: 0 0 12px #34d399; transform-origin: center; animation: silklash-web-burst 1.9s ease-out both; }
.silklash-web::before,.silklash-web::after { content: ''; position: absolute; top: 50%; left: 50%; width: 2px; height: 15rem; background: linear-gradient(to bottom,rgba(167,243,208,.9),transparent); transform-origin: top center; }
.silklash-web::after { transform: rotate(90deg); }
.silklash-web-a { transform: translate(-50%,-50%) rotate(0deg); }.silklash-web-b { transform: translate(-50%,-50%) rotate(45deg); }.silklash-web-c { transform: translate(-50%,-50%) rotate(90deg); }.silklash-web-d { transform: translate(-50%,-50%) rotate(135deg); }
@keyframes silklash-card-pop { from { transform: scale(.35) rotate(-10deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes silklash-web-burst { 0% { opacity: 0; scale: .2; } 24% { opacity: 1; } 100% { opacity: 0; scale: 1.45; } }
@media (max-width: 500px) { .silklash-card-wrap { width: 10rem; height: 14rem; }.silklash-label { font-size: .59rem; }.silklash-damage-text { font-size: .59rem; } }

/* Indicador visual de Travessia de Pântano */
.swampwalk-badge {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border: 1px solid rgba(196,181,253,.8);
    border-radius: 999px;
    background: rgba(46,16,101,.9);
    font-size: 0.72rem;
    box-shadow: 0 1px 5px rgba(0,0,0,.7);
}
.swampwalk-badge.swampwalk-active {
    border-color: #f5d0fe;
    background: rgba(126,34,206,.95);
    box-shadow: 0 0 9px rgba(216,180,254,.9);
    animation: swampwalk-pulse 1.1s ease-in-out infinite;
}
@keyframes swampwalk-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.16); } }

/* Indicador de escudo de Regeneração */
.regeneration-badge {
    position: absolute;
    right: 0.22rem;
    bottom: 0.22rem;
    z-index: 16;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.05rem;
    height: 1.15rem;
    padding: 0 0.12rem;
    border: 1px solid #d8b4fe;
    border-radius: 0.32rem;
    background: rgba(88,28,135,.94);
    font-size: 0.56rem;
    box-shadow: 0 0 8px rgba(192,132,252,.75);
    animation: regeneration-pulse 1.25s ease-in-out infinite;
}
@keyframes regeneration-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.1); } }

/* --- GRIMÓRIO (MANUAL) --- */
.grimoire-container {
    perspective: 2000px;
    width: 98vw;
    max-width: 1000px;
    height: min(650px, 90vh);
    position: relative;
}

.grimoire-book {
    width: 100%;
    height: 100%;
    background: #3d2b1f; 
    border-radius: 12px;
    box-shadow: 0 35px 70px rgba(0,0,0,0.9);
    padding: 6px; 
    display: flex;
    position: relative;
    gap: 2px;
}

.grimoire-book::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 6px;
    bottom: 6px;
    width: 30px;
    transform: translateX(-50%);
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.25) 55%, transparent);
    z-index: 10;
    pointer-events: none;
}

.grimoire-spread {
    display: none;
    width: 100%;
    height: 100%;
    gap: 15px;
}

.grimoire-spread.active {
    display: flex;
}

.grimoire-page {
    flex: 1;
    height: 100%;
    background: #f4e4bc; 
    background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png');
    padding: 30px 40px; 
    color: #2d1e12;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 0 40px rgba(139, 69, 19, 0.08);
}

.grimoire-page-left { border-radius: 5px 0 0 5px; }
.grimoire-page-right { border-radius: 0 5px 5px 0; }

.grimoire-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    background: #5d3a1a;
    border: 1px solid #d4b483;
    border-radius: 5px;
    color: #f4e4bc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.2s;
}
.grimoire-close-btn:hover { background: #8b4513; color: white; transform: scale(1.1); }

/* Posicionamento das setas nos cantos */
.page-nav {
    position: absolute;
    inset: 0;
    pointer-events: none; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    z-index: 50;
}

.page-nav button {
    pointer-events: auto; 
    background: rgba(93, 58, 26, 0.15);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5d3a1a;
    transition: all 0.3s;
}
.page-nav button:hover:not(:disabled) { background: #5d3a1a; color: #f4e4bc; transform: scale(1.1); }

#current-spread-num {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    color: #5d3a1a;
}

@media (max-width: 768px) {
    .grimoire-container { height: 95vh; width: 100vw; padding: 5px; }
    .grimoire-book { 
        display: flex; 
        flex-direction: column; 
        padding: 5px; 
        background: #2d1e12; 
        overflow: hidden;
    }
    .grimoire-book::before { display: none; }
    
    .grimoire-spread.active { 
        flex-direction: column; 
        overflow-y: auto; 
        height: calc(100% - 60px); 
    }
    
    .grimoire-page { 
        flex: none; 
        min-height: 100%; 
        padding: 20px; 
        border-radius: 8px;
        box-shadow: none;
        background-image: none; /* Mais limpo no mobile */
    }

    /* Setas na base no mobile para melhor ergonomia */
    .page-nav { 
        position: relative; 
        inset: auto; 
        height: 60px; 
        display: flex !important; 
        background: #3d2b1f;
        padding: 0 20px;
        pointer-events: auto;
        border-top: 1px solid rgba(212, 180, 131, 0.2);
    }
    .page-nav button { width: 40px; height: 40px; }
    #current-spread-num { bottom: 20px; }
}

/* ==========================================
   MODO DE ALVO — foco no campo de batalha
   ========================================== */
.battlefield-target-shade {
    position: fixed;
    inset: 0;
    z-index: 75;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(3px);
    pointer-events: none;
}
#main-battlefield-panel.battlefield-target-focus {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 76 !important;
    width: min(94vw, 1050px) !important;
    min-height: min(65vh, 520px) !important;
    max-height: 72vh !important;
    transform: translate(-50%, -50%) !important;
    overflow: auto !important;
    box-shadow: 0 0 0 2px rgba(96,165,250,.75), 0 0 38px rgba(59,130,246,.48) !important;
}
#main-battlefield-panel.battlefield-target-no-transition,
#main-battlefield-panel.battlefield-target-no-transition * {
    transition: none !important;
}
.battlefield-target-prompt {
    position: fixed;
    z-index: 77;
    left: 50%;
    bottom: 1.25rem;
    width: min(92vw, 42rem);
    transform: translateX(-50%);
    padding: .75rem 1rem;
    border: 1px solid #60a5fa;
    border-radius: .8rem;
    background: rgba(15,23,42,.98);
    color: #e0f2fe;
    box-shadow: 0 12px 30px rgba(0,0,0,.6);
    text-align: center;
}
.battlefield-target-title { font-family: 'Cinzel',serif; font-size: .82rem; font-weight: 900; }
.battlefield-target-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem; margin-top:.55rem; }
.battlefield-target-action,.battlefield-target-cancel { padding:.38rem .65rem; border-radius:.45rem; font-size:.7rem; font-weight:800; }
.battlefield-target-action { border:1px solid #60a5fa; background:#1d4ed8; color:#fff; }
.battlefield-target-cancel { border:1px solid #475569; background:#1f2937; color:#cbd5e1; }
.battlefield-targetable {
    cursor: pointer !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 1px rgba(96,165,250,.7), 0 0 10px rgba(59,130,246,.42) !important;
    animation: none !important;
}
.battlefield-targetable:hover {
    border-color: #facc15 !important;
    box-shadow: 0 0 0 2px rgba(250,204,21,.9), 0 0 20px rgba(250,204,21,.85) !important;
    animation: battlefield-target-hover .85s ease-in-out infinite !important;
}
@keyframes battlefield-target-hover { 0%,100%{transform:translateY(-3px) scale(1.02)}50%{transform:translateY(-6px) scale(1.055)} }
@media(max-width:1023px) {
    #main-battlefield-panel.battlefield-target-focus { width:96vw !important; min-height:55vh !important; max-height:67vh !important; }
    .battlefield-target-prompt { bottom:max(.8rem,env(safe-area-inset-bottom,0px)); }
    .battlefield-target-title { font-size:.7rem; }
}

/* Dano no mobile: efeito fixo e visível independentemente do scroll. */
.mobile-screen-damage-float {
    position: fixed;
    left: 50%;
    z-index: 130;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.28rem 0.75rem;
    border: 1px solid rgba(254,202,202,.85);
    border-radius: 0.6rem;
    background: rgba(69,10,10,.92);
    color: #fecaca;
    font-family: 'Cinzel',serif;
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 2px 1px #7f1d1d, 0 0 10px #ef4444;
    box-shadow: 0 0 20px rgba(239,68,68,.72);
    pointer-events: none;
    animation: mobile-screen-damage 1.35s ease-out forwards;
}
.mobile-screen-damage-float.damage-to-ai { top: 31%; }
.mobile-screen-damage-float.damage-to-player { top: 65%; }
@keyframes mobile-screen-damage {
    0% { opacity:0; transform:translate(-50%,12px) scale(.55); }
    18% { opacity:1; transform:translate(-50%,0) scale(1.12); }
    62% { opacity:1; transform:translate(-50%,-8px) scale(1); }
    100% { opacity:0; transform:translate(-50%,-35px) scale(.78); }
}

/* Contramágica: a mágica alvo é desfeita em uma ruptura azul. */
#floating-cast-overlay.counterspell-impact::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(147,197,253,.95);
    border-radius: 50%;
    box-shadow: 0 0 22px #3b82f6, inset 0 0 16px #dbeafe;
    transform: translate(-50%,-50%);
    pointer-events: none;
    animation: counterspell-ripple .72s ease-out forwards;
}
#floating-cast-overlay.counterspell-impact .cast-card-visual {
    animation: counterspell-dissolve .72s cubic-bezier(.2,.75,.25,1) forwards !important;
}
#floating-cast-overlay.counterspell-impact .animate-spell-cast > div:first-child {
    color: #bfdbfe;
    border-color: #60a5fa;
}
@keyframes counterspell-ripple {
    0% { opacity:0; transform:translate(-50%,-50%) scale(.2); }
    30% { opacity:1; }
    100% { opacity:0; transform:translate(-50%,-50%) scale(13); }
}
@keyframes counterspell-dissolve {
    0% { opacity:1; filter:brightness(1) saturate(1); transform:scale(1) rotate(0); }
    35% { opacity:1; filter:brightness(2.4) saturate(.3) hue-rotate(150deg); transform:scale(1.05) rotate(-2deg); }
    100% { opacity:0; filter:brightness(3) blur(9px) hue-rotate(190deg); transform:scale(.2) rotate(8deg); }
}

/* Menu inicial compacto no celular: as duas escolhas cabem sem corte vertical. */
@media (max-width: 600px) {
    #initial-mode-modal {
        padding: 0.45rem !important;
        overflow-y: auto;
    }
    #initial-mode-modal .initial-mode-content {
        padding: 0.8rem !important;
        max-height: 96dvh;
        overflow-y: auto;
    }
    #initial-mode-modal .initial-mode-content > .text-6xl {
        font-size: 2.1rem !important;
        margin-bottom: 0.25rem !important;
    }
    #initial-mode-modal .initial-mode-content > h3 {
        font-size: 1.25rem !important;
        margin-bottom: 0.15rem !important;
    }
    #initial-mode-modal .initial-mode-content > p {
        margin-bottom: 0.6rem !important;
        font-size: 0.72rem !important;
    }
    #initial-mode-modal .initial-mode-options {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.45rem !important;
        margin-bottom: 0.55rem !important;
    }
    #initial-mode-modal .initial-mode-options > button {
        padding: 0.6rem 0.35rem !important;
        border-radius: 0.7rem !important;
    }
    #initial-mode-modal .initial-mode-options .text-5xl { font-size: 1.7rem !important; margin-bottom: 0.3rem !important; }
    #initial-mode-modal .initial-mode-options h4 { font-size: 0.72rem !important; margin-bottom: 0.2rem !important; }
    #initial-mode-modal .initial-mode-options p { font-size: 0.55rem !important; }
    #initial-mode-modal .initial-mode-options .text-2xl { font-size: 1rem !important; margin-top: 0.35rem !important; }
    #initial-mode-modal .initial-mode-footer { padding-top: 0.55rem !important; gap: 0.45rem !important; }
    #initial-mode-modal .initial-mode-footer .flex { gap: 0.25rem !important; flex-wrap: wrap; }
    #initial-mode-modal .initial-mode-footer button { padding: 0.35rem 0.45rem !important; font-size: 0.55rem !important; }
    #initial-mode-modal .initial-mode-footer p { margin: 0 !important; padding: 0 0.2rem !important; font-size: 0.48rem !important; line-height: 1.25; }
}

/* Zonas rápidas da IA no mobile. */
#mobile-ai-quick-bar { display: none; }
@media (max-width: 1023px) {
    #mobile-ai-quick-bar { display: flex !important; }
}

/* ==========================================
   COCKPIT DE BATALHA — MOBILE APENAS
   Mão e terrenos abrem como painéis sobrepostos.
   ========================================== */
.mobile-fab, .mobile-panel-toggle { display:none; }
@media (max-width:1023px) {
    .mobile-panel-toggle {
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:1.35rem;
        height:1.35rem;
        border:1px solid rgba(110,231,183,.45);
        border-radius:.35rem;
        background:rgba(6,78,59,.55);
        color:#a7f3d0;
        font-size:.7rem;
    }
    .mobile-fab {
        position:fixed;
        right:.7rem;
        bottom:1rem;
        z-index:65;
        display:flex;
        align-items:center;
        justify-content:center;
        width:2.65rem;
        height:2.65rem;
        border:1px solid rgba(16,185,129,.7);
        border-radius:999px;
        background:rgba(6,78,59,.96);
        color:#d1fae5;
        font-size:1.15rem;
        box-shadow:0 5px 18px rgba(0,0,0,.55);
    }
    .mobile-fab-secondary { bottom:4.05rem; border-color:rgba(74,222,128,.55); background:rgba(20,83,45,.96); }

    /* Oculta os conteúdos longos até que o jogador os abra. */
    #player-hand-section #player-hand { display:none !important; }
    #player-lands-box #player-lands { display:none !important; }
    #player-hand-section { min-height:1.8rem; }
    #player-lands-box { min-height:1.8rem; }

    body.mobile-hand-expanded #player-hand-section,
    body.mobile-lands-expanded #player-lands-box {
        position:fixed !important;
        left:.45rem !important;
        right:.45rem !important;
        bottom:max(.45rem, env(safe-area-inset-bottom, 0px)) !important;
        z-index:70 !important;
        width:auto !important;
        max-height:48dvh !important;
        padding:.55rem !important;
        overflow:hidden !important;
        background:rgba(2,16,12,.98) !important;
        border:1px solid rgba(16,185,129,.75) !important;
        box-shadow:0 -10px 34px rgba(0,0,0,.72) !important;
    }
    body.mobile-hand-expanded #player-hand-section #player-hand {
        display:flex !important;
        height:auto !important;
        max-height:39dvh !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        padding:.35rem !important;
    }
    body.mobile-lands-expanded #player-lands-box #player-lands {
        display:flex !important;
        min-height:5rem !important;
        max-height:38dvh !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        padding:.35rem !important;
    }
    body.mobile-hand-expanded .mobile-fab,
    body.mobile-lands-expanded .mobile-fab { display:none; }

    /* Mantém o botão de fase acessível enquanto a página rola. */
    .game-phase-btn {
        position:sticky;
        bottom:.2rem;
        z-index:28;
        box-shadow:0 -3px 12px rgba(0,0,0,.28);
    }
}

/* Ajuste cockpit: terrenos sempre visíveis; somente a mão é recolhível. */
@media (max-width:1023px) {
    .mobile-fab { display:none !important; }
    #mobile-lands-toggle { display:none !important; }
    #player-lands-box #player-lands {
        display:flex !important;
        min-height:4.7rem !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
    }
    body.mobile-lands-expanded #player-lands-box {
        position:static !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        z-index:auto !important;
        width:auto !important;
        max-height:none !important;
        padding:0.15rem !important;
        overflow:visible !important;
        background:transparent !important;
        border-color:rgba(31,41,55,.5) !important;
        box-shadow:none !important;
    }
}

/* Terrenos do jogador: comportamento original no mobile, igual à faixa da IA. */
@media (max-width:1023px) {
    #player-lands-box {
        display:flex !important;
        position:relative !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        z-index:auto !important;
        width:100% !important;
        max-height:none !important;
        overflow:visible !important;
    }
    #player-lands {
        display:flex !important;
        flex-wrap:nowrap !important;
        visibility:visible !important;
        opacity:1 !important;
        height:auto !important;
        min-height:4.7rem !important;
        max-height:none !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
    }
}

/* Mão expandida: cartas maiores e renderização nítida para leitura no celular. */
@media (max-width:1023px) {
    body.mobile-hand-expanded #player-hand-section #player-hand .mtg-card {
        width:5.15rem !important;
        min-width:5.15rem !important;
        margin:0 .12rem !important;
    }
    body.mobile-hand-expanded #player-hand-section #player-hand img {
        content-visibility:visible !important;
        image-rendering:auto;
    }
}

/* Barra de zonas do jogador: quatro atalhos em uma única linha no mobile. */
@media (max-width:1023px) {
    #mobile-quick-bar { gap:.22rem !important; padding:.25rem !important; }
    #mobile-quick-bar > button { min-width:0; padding:.28rem .38rem !important; }
    #mobile-quick-bar > button .text-sm { font-size:.88rem !important; }
}

/* Barra inferior limpa: a mão só existe quando aberta pelo atalho. */
@media (max-width:1023px) {
    #player-hand-section { display:none !important; }
    body.mobile-hand-expanded #player-hand-section { display:flex !important; }
    #mobile-ai-quick-bar { gap:.18rem !important; padding:.22rem !important; }
    #mobile-ai-quick-bar > button { min-width:0; padding:.25rem .32rem !important; }
    .mobile-ai-status { min-width:3.75rem; }
    .mobile-ai-status #mobile-ai-mana-quick { max-width:4.7rem; overflow-x:auto; scrollbar-width:none; }
}

/* Fechar mão expandida. */
#mobile-hand-close { display:none; }
@media (max-width:1023px) {
    body.mobile-hand-expanded #mobile-hand-close {
        position:absolute;
        top:.45rem;
        right:.5rem;
        z-index:72;
        display:flex;
        align-items:center;
        justify-content:center;
        width:1.65rem;
        height:1.65rem;
        border:1px solid rgba(110,231,183,.65);
        border-radius:999px;
        background:rgba(6,78,59,.96);
        color:#d1fae5;
        font-size:.78rem;
        font-weight:900;
    }
    body.mobile-hand-expanded #player-hand-section #player-hand { padding-right:2.1rem !important; }
}

/* Terrenos acessíveis dentro do painel de mão expandida. */
#mobile-hand-lands-toggle { display:none; }
#mobile-hand-lands-slot { display:none; }
@media (max-width:1023px) {
    body.mobile-hand-expanded #mobile-hand-lands-toggle {
        position:absolute;
        top:.45rem;
        left:.5rem;
        z-index:72;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        height:1.65rem;
        padding:0 .45rem;
        border:1px solid rgba(74,222,128,.65);
        border-radius:.5rem;
        background:rgba(20,83,45,.96);
        color:#dcfce7;
        font-size:.58rem;
        font-weight:900;
    }
    body.mobile-hand-expanded #player-hand-section #player-hand { padding-top:1.85rem !important; }
    body.mobile-hand-expanded.mobile-hand-lands-open #mobile-hand-lands-slot {
        display:block;
        width:100%;
        min-height:4.85rem;
        margin-top:1.85rem;
        overflow-x:auto;
        overflow-y:hidden;
        border:1px solid rgba(74,222,128,.35);
        border-radius:.5rem;
        background:rgba(0,0,0,.28);
    }
    body.mobile-hand-expanded.mobile-hand-lands-open #mobile-hand-lands-slot #player-lands {
        display:flex !important;
        min-height:4.6rem !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        padding:.22rem !important;
    }
    body.mobile-hand-expanded.mobile-hand-lands-open #player-hand-section #player-hand { padding-top:.25rem !important; }
}

/* Mão persistente no mobile: recursos e cartas sem barra externa duplicada. */
@media (max-width:1023px) {
    #mobile-quick-bar { display:none !important; }
    #player-hand-section {
        position:fixed !important;
        left:.35rem !important;
        right:.35rem !important;
        bottom:max(.3rem, env(safe-area-inset-bottom, 0px)) !important;
        z-index:60 !important;
        display:flex !important;
        width:auto !important;
        min-height:7.7rem !important;
        max-height:10.2rem !important;
        padding:.35rem !important;
        overflow:hidden !important;
        background:rgba(2,16,12,.98) !important;
        border:1px solid rgba(16,185,129,.72) !important;
        box-shadow:0 -8px 26px rgba(0,0,0,.62) !important;
    }
    #player-hand-section #player-hand {
        display:flex !important;
        height:6.35rem !important;
        min-height:6.35rem !important;
        max-height:6.35rem !important;
        padding:.15rem .25rem !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
    }
    #player-hand-section #player-hand .mtg-card {
        width:4.2rem !important;
        min-width:4.2rem !important;
        margin:0 .1rem !important;
    }
    #mobile-hand-resource-bar { display:flex !important; min-height:1.55rem; }
    #mobile-hand-resource-bar button,
    #mobile-hand-lands-toggle {
        display:inline-flex !important;
        align-items:center;
        justify-content:center;
        gap:.15rem;
        padding:.23rem .38rem !important;
        border:1px solid rgba(16,185,129,.48);
        border-radius:.4rem;
        background:rgba(6,78,59,.6);
        color:#d1fae5;
        font-size:.58rem;
        font-weight:800;
        white-space:nowrap;
    }
    #mobile-hand-close { display:none !important; }
    #mobile-hand-lands-slot { display:none; }
    body.mobile-hand-lands-open #player-hand-section {
        min-height:13rem !important;
        max-height:48dvh !important;
    }
    body.mobile-hand-lands-open #mobile-hand-lands-slot {
        display:block !important;
        width:100%;
        min-height:4.65rem;
        overflow-x:auto;
        overflow-y:hidden;
        border:1px solid rgba(74,222,128,.32);
        border-radius:.45rem;
        background:rgba(0,0,0,.25);
    }
    body.mobile-hand-lands-open #mobile-hand-lands-slot #player-lands {
        display:flex !important;
        min-height:4.45rem !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        padding:.15rem !important;
    }
    body.mobile-hand-lands-open #player-hand-section #player-hand { height:6rem !important; min-height:6rem !important; max-height:6rem !important; }
}

/* Cockpit apenas durante a partida e integrado ao fluxo da página. */
@media (max-width:1023px) {
    #player-hand-section { display:none !important; }
    body.match-active #player-hand-section {
        position:relative !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        z-index:auto !important;
        display:flex !important;
        width:100% !important;
        min-height:7.7rem !important;
        max-height:10.2rem !important;
        margin-top:.15rem;
        box-shadow:0 -3px 12px rgba(0,0,0,.28) !important;
    }
    body.match-active.mobile-hand-lands-open #player-hand-section {
        min-height:13rem !important;
        max-height:48dvh !important;
    }
}

/* Recursos da mão do jogador: mesma linguagem visual da barra da IA. */
@media (max-width:1023px) {
    #mobile-hand-resource-bar { gap:.18rem !important; }
    #mobile-hand-resource-bar button {
        padding:.25rem .32rem !important;
        font-size:inherit;
        font-weight:inherit;
    }
    #mobile-hand-resource-bar button:nth-child(1) { background:rgba(127,29,29,.2) !important; border-color:rgba(185,28,28,.3) !important; color:inherit !important; }
    #mobile-hand-resource-bar button:nth-child(2) { background:rgba(31,41,55,.5) !important; border-color:rgba(55,65,81,.5) !important; color:inherit !important; }
    #mobile-hand-resource-bar button:nth-child(3) { background:rgba(59,7,100,.3) !important; border-color:rgba(126,34,206,.3) !important; color:inherit !important; }
}

/* Grimório do jogador: aviso amarelo quando a compra do turno está pendente. */
@media (max-width:1023px) {
    #mobile-hand-resource-bar .draw-glow-mobile {
        border-color:#fbbf24 !important;
        box-shadow:0 0 10px #eab308, 0 0 18px #facc15 !important;
        animation: mobile-deck-draw-pulse 1.1s ease-in-out infinite;
    }
}
@keyframes mobile-deck-draw-pulse {
    0%,100% { transform:scale(1); filter:brightness(1); }
    50% { transform:scale(1.06); filter:brightness(1.3); }
}

/* Recursos rápidos da mão existem somente no celular; no PC vale a sidebar. */
#mobile-hand-resource-bar { display:none; }
@media (max-width:1023px) {
    #mobile-hand-resource-bar { display:flex !important; }
}

/* Mulligan: cartas maiores e consistentes tanto na mão inicial quanto após refazer. */
@media (max-width:1023px) {
    #mulligan-modal .mtg-card {
        width:4.5rem !important;
        min-width:4.5rem !important;
        height:auto !important;
    }
}

/* Feedback de mágicas em criaturas: mantém efeitos e texto visíveis no mobile. */
@media (max-width:1023px) {
    #combat-player-creatures .mtg-card.overflow-visible,
    #ai-creatures .mtg-card.overflow-visible {
        overflow:visible !important;
        z-index:55 !important;
    }
    .floating-text-badge {
        font-size:1rem;
        z-index:110;
        white-space:nowrap;
    }
    .spell-buff-green { box-shadow:0 0 18px #34d399, inset 0 0 10px #10b981 !important; }
    .spell-flash-dark { box-shadow:0 0 18px #c084fc !important; }
}

/* Visualizador de arte da carta em tela cheia. */
.card-art-viewer {
    position:fixed;
    inset:0;
    z-index:160;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:3.5rem 1rem 1rem;
    background:rgba(0,0,0,.94);
    backdrop-filter:blur(6px);
    opacity:0;
    transition:opacity .18s ease;
}
.card-art-viewer-visible { opacity:1; }
.card-art-full-image {
    max-width:min(92vw,760px);
    max-height:82dvh;
    width:auto;
    height:auto;
    border:1px solid rgba(255,255,255,.2);
    border-radius:.75rem;
    object-fit:contain;
    box-shadow:0 0 35px rgba(0,0,0,.9);
}
.card-art-back {
    position:absolute;
    top:max(1rem,env(safe-area-inset-top,0px));
    left:1rem;
    padding:.5rem .8rem;
    border:1px solid rgba(255,255,255,.24);
    border-radius:.55rem;
    background:rgba(15,23,42,.9);
    color:#e5e7eb;
    font-size:.75rem;
    font-weight:800;
}
.card-art-title {
    position:absolute;
    top:max(1.1rem,env(safe-area-inset-top,0px));
    max-width:55vw;
    overflow:hidden;
    color:#d1d5db;
    font-family:'Cinzel',serif;
    font-size:.75rem;
    font-weight:800;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Indicação visual de que a arte pode ser ampliada. */
#zoom-modal-img {
    transition:transform .2s ease, filter .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#zoom-modal-img:hover {
    transform:scale(1.045);
    filter:brightness(1.12);
    border-color:#60a5fa !important;
    box-shadow:0 0 0 2px rgba(96,165,250,.55),0 0 18px rgba(59,130,246,.65) !important;
}
@media (hover:none) {
    #zoom-modal-img { border-color:rgba(96,165,250,.7) !important; }
}

/* Destaque para Carniçal do Cemitério disponível no cemitério. */
.graveyard-cast-ready {
    border-color:#c084fc !important;
    box-shadow:0 0 0 1px rgba(192,132,252,.7),0 0 15px rgba(168,85,247,.65);
    animation: graveyard-cast-pulse 1.15s ease-in-out infinite;
}
.graveyard-cast-status {
    display:block;
    min-height:.85rem;
    margin-top:.15rem;
    color:#6b7280;
    font-size:.52rem;
    font-weight:700;
    line-height:1.05;
}
.graveyard-cast-status.ready { color:#d8b4fe; }
@keyframes graveyard-cast-pulse { 0%,100%{transform:scale(1)}50%{transform:scale(1.035)} }
@media (max-width:1023px) {
    #mobile-graveyard-btn.graveyard-ready-button {
        border-color:#c084fc !important;
        box-shadow:0 0 10px rgba(192,132,252,.8),0 0 18px rgba(168,85,247,.55) !important;
        animation: graveyard-ready-pulse 1.15s ease-in-out infinite;
    }
}
@keyframes graveyard-ready-pulse { 0%,100%{transform:scale(1)}50%{transform:scale(1.055)} }

/* Impede arrasto horizontal da página no mobile; só zonas de cartas rolam lateralmente. */
@media (max-width:1023px) {
    html, body {
        width:100%;
        max-width:100%;
        overflow-x:hidden !important;
        overscroll-behavior-x:none;
    }
    main, .game-main, #main-battlefield-panel {
        max-width:100vw;
        overflow-x:hidden;
        overscroll-behavior-x:contain;
    }
    #player-hand, #player-lands, #ai-lands, #ai-hand,
    #ai-creatures, #combat-player-creatures, .battlefield-scroll {
        overscroll-behavior-x:contain;
    }
}

/* Manual no mobile: navegação como rodapé de página, sem faixa de capa vazia. */
@media (max-width:768px) {
    .grimoire-book { position:relative; }
    .grimoire-spread.active {
        height:calc(100% - 54px) !important;
        padding-bottom:0;
    }
    .grimoire-book .page-nav {
        position:absolute !important;
        left:8px !important;
        right:8px !important;
        bottom:7px !important;
        height:42px !important;
        z-index:60 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        padding:0 12px !important;
        background:#f4e4bc !important;
        background-image:url('https://www.transparenttextures.com/patterns/paper-fibers.png') !important;
        border:1px solid rgba(93,58,26,.35) !important;
        border-radius:0 0 7px 7px !important;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 -2px 6px rgba(0,0,0,.18) !important;
    }
    .grimoire-book .page-nav button {
        width:34px !important;
        height:34px !important;
        background:rgba(93,58,26,.1) !important;
    }
    .grimoire-book #current-spread-num {
        position:static !important;
        transform:none !important;
        color:#5d3a1a !important;
        font-size:.75rem;
    }
}

/* Cabeçalho de batalha mais legível no mobile. */
@media (max-width:1023px) {
    #game-header {
        flex-wrap:wrap !important;
        align-items:center !important;
        gap:.35rem !important;
        padding:.42rem .55rem !important;
    }
    #game-header .header-brand {
        flex:1 1 auto;
        min-width:0;
        gap:.45rem !important;
    }
    #game-header .header-brand > div:first-child {
        width:1.65rem !important;
        height:1.65rem !important;
        flex-shrink:0;
    }
    #game-header .header-brand h1 {
        font-size:.68rem !important;
        line-height:1 !important;
        white-space:nowrap;
    }
    #tournament-indicator { display:none !important; }
    #game-header .header-actions {
        flex:0 0 auto;
        gap:.22rem !important;
    }
    #game-header .header-actions button {
        width:1.65rem !important;
        height:1.65rem !important;
        font-size:.62rem !important;
    }
    #game-header .header-phase-tracker {
        order:3;
        flex:0 0 100%;
        width:100%;
        justify-content:stretch;
        gap:.18rem !important;
        padding:.22rem !important;
    }
    #game-header .header-phase-tracker span {
        flex:1 1 0;
        min-width:0;
        padding:.28rem .18rem !important;
        font-size:.52rem !important;
        line-height:1.15;
        text-align:center;
        white-space:normal;
    }
}

/* Tela inicial principal. */
.home-screen-panel { box-shadow:0 25px 65px rgba(0,0,0,.75),0 0 35px rgba(16,185,129,.13); }
.home-screen-button {
    padding:.7rem .4rem;
    border:1px solid rgba(75,85,99,.8);
    border-radius:.65rem;
    background:rgba(31,41,55,.78);
    color:#d1d5db;
    font-size:.72rem;
    font-weight:800;
    transition:all .18s ease;
}
.home-screen-button:hover { border-color:rgba(52,211,153,.7); background:rgba(6,78,59,.45); color:#ecfdf5; transform:translateY(-1px); }
@media(max-width:600px) {
    .home-screen-panel { padding:1.15rem !important; max-height:95dvh; overflow-y:auto; }
    .home-screen-panel .text-6xl { font-size:3rem !important; margin-bottom:.55rem !important; }
    .home-screen-panel h1 { font-size:1.65rem !important; }
}

/* Voltar da seleção de modo para a tela principal. */
.initial-mode-back {
    position:absolute;
    top:1rem;
    left:1rem;
    padding:.35rem .55rem;
    border:1px solid rgba(75,85,99,.8);
    border-radius:.45rem;
    background:rgba(31,41,55,.8);
    color:#cbd5e1;
    font-size:.65rem;
    font-weight:800;
}
.initial-mode-back:hover { background:#374151; color:#fff; }
@media(max-width:600px) {
    .initial-mode-back { top:.55rem; left:.55rem; padding:.25rem .4rem; font-size:.55rem; }
}

/* Selo após uma Regeneração consumida: permanece até o fim do turno. */
.regeneration-badge.regeneration-saved {
    border-color:#f5d0fe;
    background:rgba(107,33,168,.98);
    box-shadow:0 0 13px rgba(216,180,254,.95);
    animation: regeneration-saved-pulse .8s ease-in-out 2;
}
@keyframes regeneration-saved-pulse { 0%,100%{transform:scale(1)}50%{transform:scale(1.18)} }