/* --- A QUEBRA: FOLHA DE ESTILO PRINCIPAL --- */
/* Versão: 9.0 (Novas Imagens de Fundo Final)  */
/* Este arquivo contém todos os estilos do   */
/* jogo, organizados por seção.              */
/* ----------------------------------------- */


/* --- 1. CONFIGURAÇÕES GLOBAIS E VARIÁVEIS --- */
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');

:root {
    --terminal-green: #33FF33;
    --terminal-dark-green: #1A991A;
    --terminal-dark-bg: #000000;
}

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden; /* Previne scroll na página inteira */
}

body {
    font-family: 'Inconsolata', monospace;
    background-color: var(--terminal-dark-bg);
    color: var(--terminal-green);
    text-shadow: 0 0 3px var(--terminal-dark-green);
    position: relative;
}

/* Efeito de Scanlines sobreposto em tudo */
body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px;
    z-index: 100;
    pointer-events: none;
}


/* --- 2. ANIMAÇÕES GLOBAIS --- */

@keyframes piscar-texto { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes piscar-cursor { 50% { opacity: 0; } }
@keyframes status-blink {
    0% { background-color: var(--terminal-green); box-shadow: 0 0 5px var(--terminal-green); }
    50% { background-color: var(--terminal-dark-green); box-shadow: none; }
    100% { background-color: var(--terminal-green); box-shadow: 0 0 5px var(--terminal-green); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes expandir-linha { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rolar-dado {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(15deg) scale(1.1); }
    50% { transform: rotate(-15deg) scale(1.1); }
    75% { transform: rotate(15deg) scale(1.1); }
    100% { transform: rotate(0deg) scale(1); }
}
@keyframes fadeInOut {
  0% { opacity: 0; transform: translate(-50%, -60%); }
  15% { opacity: 1; transform: translate(-50%, -50%); }
  85% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, -40%); }
}
@keyframes blink-load {
  0%, 100% { background-color: var(--terminal-green); color: var(--terminal-dark-bg); }
  50% { background-color: transparent; color: var(--terminal-green); }
}
@keyframes progress-blink {
    50% { 
        background-color: #99FF99; 
        box-shadow: 0 0 15px #99FF99; 
    }
}


/* --- 3. CLASSES DE LAYOUT E UTILITÁRIAS --- */

#game-container {
    height: 100%;
}

.screen {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.hidden {
    display: none !important;
}

.typing-cursor::after {
    content: '_';
    animation: piscar-cursor 1s infinite step-end;
}


/* --- 4. ESTILOS DA TELA DE INTRODUÇÃO (intro-screen) --- */

.initial-power-on {
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background-image: url('../assets/images/v2/fundo.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative; 
    box-sizing: border-box;
    padding: 1rem;
}

.power-on-logo {
    width: 60%;
    max-width: 450px;
    margin-bottom: 2.5rem;
}
.power-on-logo img {
    width: 100%;
    height: auto;
}

.power-button {
    background-color: var(--terminal-green);
    color: var(--terminal-dark-bg);
    border: 2px solid var(--terminal-green);
    padding: 1rem 2rem;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    text-shadow: none;
    animation: piscar-texto 1.5s infinite step-end;
    z-index: 2;
    width: 100%;
    max-width: 450px;
    text-align: center;
}
.power-button:hover {
    background-color: transparent;
    color: var(--terminal-green);
    animation: none;
}
.power-button:disabled {
    background-color: var(--terminal-dark-green);
    color: rgba(0,0,0,0.5);
    border-color: var(--terminal-dark-green);
    cursor: not-allowed;
    animation: none;
}

.main-menu-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.boot-screen { padding: 1.5rem; font-size: 0.9rem; line-height: 1.6; height: 100vh; box-sizing: border-box; overflow: hidden; background-color: var(--terminal-dark-bg); }
.boot-screen p { margin: 0; }
.error-box { border: 2px solid var(--terminal-green); padding: 0.5rem 1rem; margin-top: 0.5rem; display: inline-block; font-weight: 700; text-transform: uppercase; }
.continue-prompt { text-align: center; margin-top: 2rem; }
.continue-button {
    background-color: var(--terminal-green); color: var(--terminal-dark-bg);
    border: 2px solid var(--terminal-green); padding: 0.8rem 1.5rem;
    font-family: inherit; font-size: 1.2rem; font-weight: 700;
    cursor: pointer; text-transform: uppercase; text-shadow: none;
    animation: piscar-texto 1.5s infinite step-end;
}
.continue-button:hover { background-color: transparent; color: var(--terminal-green); animation: none; }

.prologue-screen { display: flex; flex-direction: column; height: 100vh; box-sizing: border-box; background-color: var(--terminal-dark-bg); }
.prologue-content { padding: 1.5rem; overflow-y: auto; flex-grow: 1; min-height: 0; }
.prologue-content h1 { font-size: 1.5rem; text-transform: uppercase; }
.prologue-content p { font-size: 0.9rem; line-height: 1.7; margin: 1rem 0; }
.typing-continue-container { padding: 2rem; text-align: center; flex-shrink: 0; padding-bottom: 10vh; }
.continue-typing-button {
    background-color: var(--terminal-green); color: var(--terminal-dark-bg);
    border: 2px solid var(--terminal-green); padding: 0.8rem 1.5rem;
    font-family: inherit; font-size: 1.2rem; font-weight: 700;
    cursor: pointer; text-transform: uppercase; text-shadow: none;
    animation: piscar-texto 1.5s infinite step-end;
}
.continue-typing-button:hover { background-color: transparent; color: var(--terminal-green); animation: none; }

/* --- Estilos para o contêiner de créditos --- */
.credits-container {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 90%;
    max-width: 450px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    padding: 1rem;
    box-sizing: border-box;
}

.credits-text {
    font-size: 0.9rem;
    margin: 0;
    animation: piscar-texto 2s infinite step-end;
}

.credits-icons {
    margin-top: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.credit-button {
    background-color: transparent;
    border: 1px solid var(--terminal-green);
    color: var(--terminal-green);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
    cursor: pointer;
    text-shadow: inherit;
    transition: background-color 0.2s, color 0.2s;
}

.credit-button:hover {
    background-color: var(--terminal-green);
    color: var(--terminal-dark-bg);
    text-shadow: none;
}


/* --- 5. ESTILOS DA TELA DE SELEÇÃO DE PERSONAGEM (character-selection-screen) --- */
#character-selection-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.selection-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 2rem; 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 2rem; 
    align-content: center;
    flex-grow: 1;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}
.header-container { grid-column: 1 / -1; text-align: center; margin-bottom: 1rem; }
.main-title { font-size: 2rem; text-transform: uppercase; margin: 0; word-break: break-all; }
.subtitle { font-size: 1rem; margin-top: 0.5rem; }
.character-card { border: 2px solid var(--terminal-green); padding: 1.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; background-color: rgba(10, 10, 10, 0.5); transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease; }
.character-card:not(.unselected):hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0, 255, 0, 0.1); }
.character-card.selected { box-shadow: 0 0 25px var(--terminal-green); transform: scale(1.05); }
.character-card.unselected { opacity: 0.3; pointer-events: none; }
.character-image { width: 200px; height: 200px; border: 2px solid var(--terminal-dark-green); margin-bottom: 1.5rem; background-color: var(--terminal-dark-bg); display: flex; align-items: center; justify-content: center; }
.character-image img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.character-name { font-size: 1.8rem; font-weight: 700; margin: 0 0 1rem 0; }
.attributes-list { list-style: none; padding: 0; margin: 0 0 1.5rem 0; font-size: 0.9rem; line-height: 1.6; text-align: left; }
.catchphrase { font-style: italic; margin: 0 0 2rem 0; min-height: 60px; display: flex; align-items: center; justify-content: center; }
.select-button {
    background-color: var(--terminal-green); color: var(--terminal-dark-bg);
    border: 2px solid var(--terminal-green); padding: 0.8rem 1.5rem;
    font-family: inherit; font-size: 1.1rem; font-weight: 700;
    cursor: pointer; text-transform: uppercase; text-shadow: none;
    animation: piscar-texto 1s infinite step-end;
    width: 100%; margin-top: auto;
}
.select-button:hover { background-color: transparent; color: var(--terminal-green); animation: none; }


/* --- 6. ESTILOS DA TELA PRINCIPAL DO JOGO (main-game-screen) --- */

#main-game-screen { display: flex; flex-direction: column; height: 100%; }
.main-content { padding: 1.5rem; flex-grow: 1; overflow-y: auto; min-height: 0; }

.game-header {
    background-color: var(--terminal-dark-bg);
    border-bottom: 4px double var(--terminal-green);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    flex-shrink: 0;
    flex-wrap: nowrap; 
    min-height: 60px;
}
.header-col {
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.header-col.left {
    justify-content: flex-start;
    flex: 1; 
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-col.center {
    justify-content: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.header-col.right {
    justify-content: flex-end;
    flex: 1; 
    text-align: right; 
}
.status-light { width: 10px; height: 10px; border-radius: 50%; animation: status-blink 2s infinite; flex-shrink: 0; }

.help-button {
    background-color: transparent;
    border: 1px solid var(--terminal-green); 
    color: var(--terminal-green);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    text-shadow: inherit;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
}
.help-button:hover {
    background-color: var(--terminal-green);
    color: var(--terminal-dark-bg);
    text-shadow: none;
}

.main-content h1 { color: var(--terminal-green); font-weight: 700; text-transform: uppercase; font-size: 1.5rem; }
.main-content p { font-size: 0.9rem; line-height: 1.6; margin: 1rem 0; }
.choice-buttons { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.choice-button { background-color: var(--terminal-green); color: var(--terminal-dark-bg); border: 2px solid var(--terminal-green); padding: 0.6rem 1.2rem; font-family: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: background-color 0.2s, color 0.2s; text-shadow: none; text-transform: uppercase; animation: piscar-texto 1s infinite step-end; }
.choice-button:hover { background-color: transparent; color: var(--terminal-green); animation: none; }
.choice-button:disabled { background-color: var(--terminal-dark-green); color: rgba(0,0,0,0.5); border-color: var(--terminal-dark-green); cursor: not-allowed; animation: none; }
.choice-button.loading {
    animation: blink-load 0.8s step-end 2; 
}

.dice-challenge-container { border: 2px solid var(--terminal-green); padding: 2rem; text-align: center; margin-top: 2rem; }
.dice-container { display: flex; gap: 2rem; justify-content: center; margin: 2rem 0; }
.die { width: 80px; height: 80px; background-color: var(--terminal-dark-bg); border: 2px solid var(--terminal-green); padding: 10px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 5px; border-radius: 10px; place-items: center; }
.rolling { animation: rolar-dado 0.5s ease-in-out; }
.pip { width: 15px; height: 15px; background-color: var(--terminal-green); border-radius: 50%; box-shadow: 0 0 5px var(--terminal-green); visibility: hidden; }
.pip:nth-child(1) { grid-area: 1 / 1; } .pip:nth-child(2) { grid-area: 1 / 3; } .pip:nth-child(3) { grid-area: 2 / 2; } .pip:nth-child(4) { grid-area: 3 / 1; } .pip:nth-child(5) { grid-area: 3 / 3; } .pip:nth-child(6) { grid-area: 2 / 1; } .pip:nth-child(7) { grid-area: 2 / 3; }
[data-face="1"] .pip:nth-child(3) { visibility: visible; } [data-face="2"] .pip:nth-child(1), [data-face="2"] .pip:nth-child(5) { visibility: visible; } [data-face="3"] .pip:nth-child(1), [data-face="3"] .pip:nth-child(3), [data-face="3"] .pip:nth-child(5) { visibility: visible; } [data-face="4"] .pip:nth-child(1), [data-face="4"] .pip:nth-child(2), [data-face="4"] .pip:nth-child(4), [data-face="4"] .pip:nth-child(5) { visibility: visible; } [data-face="5"] .pip:nth-child(1), [data-face="5"] .pip:nth-child(2), [data-face="5"] .pip:nth-child(3), [data-face="5"] .pip:nth-child(4), [data-face="5"] .pip:nth-child(5) { visibility: visible; } [data-face="6"] .pip:nth-child(1), [data-face="6"] .pip:nth-child(2), [data-face="6"] .pip:nth-child(4), [data-face="6"] .pip:nth-child(5), [data-face="6"] .pip:nth-child(6), [data-face="6"] .pip:nth-child(7) { visibility: visible; }
#dice-result-text { margin-top: 2rem; font-size: 1.1rem; min-height: 6em; white-space: pre-wrap; }

.status-bar { background-color: var(--terminal-dark-bg); min-height: 120px; box-sizing: border-box; display: flex; align-items: stretch; justify-content: space-between; border-top: 4px double var(--terminal-green); flex-shrink: 0; }
.status-block { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.5rem 1rem; text-align: center; flex: 1; }
.face-block { border-left: 3px double var(--terminal-green); border-right: 3px double var(--terminal-green); }
.status-label { font-size: 0.9rem; text-transform: uppercase; font-weight: 700; }
.status-value { font-size: 2.5rem; font-weight: 700; }
.player-face { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.player-face img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; font-size: 0.9rem; font-weight: 700; text-align: left; }


/* --- 7. ESTILOS DA TELA DE MORTE (death-screen) --- */
#death-screen {
    background: url('../assets/images/v2/fundomobile.jpg') no-repeat center center fixed;
    background-size: cover;
}

.standby-container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    height: 100%; 
    width: 100%; 
    position: relative; 
    background-color: rgba(0, 0, 0, 0.5); 
}
.logo-container { 
    position: absolute; 
    top: 30%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}
.logo-container img { 
    width: 100%; 
    height: auto; 
}
.countdown-container { 
    text-align: center; 
    margin-top: 20vh; 
}
.countdown-label { 
    font-size: 1.5rem; 
    text-transform: uppercase; 
    animation: piscar-texto 2s infinite step-end; 
}
.countdown-timer { 
    font-size: 5rem; 
    font-weight: 700; 
    margin: 1rem 0; 
}
.play-button {
    background-color: var(--terminal-green); 
    color: var(--terminal-dark-bg);
    border: 2px solid var(--terminal-green); 
    padding: 1rem 2rem;
    font-family: inherit; 
    font-size: 1.5rem; 
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    text-shadow: none;
    animation: piscar-texto 1.5s infinite step-end;
}
.play-button:disabled { 
    background-color: var(--terminal-dark-green); 
    color: rgba(0,0,0,0.5); 
    border-color: var(--terminal-dark-green); 
    cursor: not-allowed; 
    animation: none; 
}

/* --- 8. ESTILOS DA TELA DE SUCESSO (success-screen) --- */
/* ALTERADO: Imagem de fundo para mobile atualizada */
#success-screen {
    background: url('../assets/images/v2/finalmobile.gif') no-repeat center center fixed;
    background-size: cover;
}

.success-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: relative;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    padding: 1rem;
    box-sizing: border-box;
}

.success-container .logo-container {
    width: 80%;
    max-width: 400px;
    margin-bottom: 3rem;
}

.success-container .logo-container img {
    width: 100%;
    height: auto;
}

.success-message-container {
    margin-top: 2vh;
}

.success-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 1.5rem 0;
}

.success-text {
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto 2.5rem auto;
}

.success-container .continue-button {
    background-color: var(--terminal-green);
    color: var(--terminal-dark-bg);
    border: 2px solid var(--terminal-green);
    padding: 1rem 2rem;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    text-shadow: none;
    animation: piscar-texto 1.5s infinite step-end;
}

.success-container .continue-button:hover {
    background-color: transparent;
    color: var(--terminal-green);
    animation: none;
}


/* --- 9. ESTILO PARA A NOTIFICAÇÃO DE CÓPIA --- */
.copy-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--terminal-dark-bg);
    color: var(--terminal-green);
    border: 2px solid var(--terminal-green);
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    animation: fadeInOut 3s ease-in-out forwards;
}

/* --- 10. ESTILOS DA TELA INTERSTICIAL DE IMAGEM --- */
#image-interstitial-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.interstitial-content {
    padding: 1.5rem;
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.interstitial-title {
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-bottom: 2rem;
    animation: piscar-texto 2s infinite step-end;
}

.image-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin-bottom: 2rem;
    aspect-ratio: 4 / 3; 
    overflow: hidden;
}

.loading-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.9) contrast(1.1);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.1s linear;
}

.scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--terminal-green);
    box-shadow: 0 0 8px var(--terminal-green), 0 0 12px var(--terminal-green);
    opacity: 0;
}

/* --- 11. ESTILOS DA BARRA DE PROGRESSO DA NARRATIVA --- */
.narrative-progress-container {
    width: 100%;
    padding: 1rem;
    border-top: 2px solid var(--terminal-dark-green);
    border-bottom: 2px solid var(--terminal-dark-green);
    background-color: rgba(0, 20, 0, 0.3);
    margin-bottom: 1.5rem;
    box-sizing: border-box;
    flex-shrink: 0;
}

.progress-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.progress-bar-label {
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.progress-bar {
    width: 100%;
    height: 20px;
    background-color: var(--terminal-dark-bg);
    border: 2px solid var(--terminal-green);
    padding: 2px;
}

.progress-bar-fill {
    width: 0%;
    height: 100%;
    background-color: var(--terminal-green);
    box-shadow: 0 0 5px var(--terminal-green);
    transition: width 0.5s ease-in-out;
}

.progress-bar-fill.final-chapter {
    animation: progress-blink 1s infinite;
}

.milestone-container {
    display: flex;
    justify-content: space-between;
    border-top: 2px dotted var(--terminal-dark-green);
    padding-top: 0.75rem;
}

.milestone {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.3;
    transition: opacity 0.5s ease-in-out;
}

.milestone.active {
    opacity: 1.0;
    text-shadow: 0 0 5px var(--terminal-green);
}


/* --- 12. MEDIA QUERIES PARA RESPONSIVIDADE --- */

/* ALTERADO: Regras para #death-screen e #success-screen separadas */
@media (min-width: 768px) {
    #death-screen {
        background-image: url('../assets/images/v2/fundo.jpg');
    }
    #success-screen {
        background-image: url('../assets/images/v2/finaldesktop.gif');
    }
}

@media (max-width: 900px) {
    #character-selection-screen {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .selection-container {
        grid-template-columns: 1fr;
        height: auto;
        align-content: flex-start;
        padding: 2rem 1rem;
    }

    .main-title { font-size: 1.5rem; }
    .subtitle { font-size: 0.9rem; }
    .character-image { width: 150px; height: 150px; }
    .character-name { font-size: 1.5rem; }
    .attributes-list { text-align: center; }
}

@media (max-width: 768px) {
    .game-header {
        flex-direction: column;
        align-items: center;
        padding: 0.75rem;
        gap: 0.5rem;
        min-height: auto;
    }

    .header-col, .header-col.left, .header-col.center, .header-col.right {
        justify-content: center;
        text-align: center;
        width: 100%;
        white-space: normal;
    }
    
    .initial-power-on {
        background-image: url('../assets/images/v2/fundomobile.jpg');
    }

    .credits-container {
        bottom: 50px;
    }
}

@media (max-width: 600px) {
    .status-bar { min-height: 100px; }
    .player-face { width: 80px; height: 80px; }
    .status-block { padding: 0.5rem; }
    .status-label { font-size: 0.7rem; }
    .status-value { font-size: 2rem; }
    .stats-grid { display: grid; grid-template-columns: 1fr; font-size: 0.7rem; gap: 0.1rem; text-align: center; }
}