/* ===== css/style.css ===== */
:root {
    --bg-color: #0b0e14;
    --panel-bg: #161b22;
    --border-color: #30363d;
    --text-main: #c9d1d9;
    --hp-color: #da3633;
    --mp-color: #2f81f7;
    --xp-color: #238636;
    --accent: #58a6ff;
    --gold: #e3b341;
}

* { box-sizing: border-box; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    padding: 20px;
    padding-bottom: 90px;
    display: flex;
    justify-content: center;
    cursor: url('../assets/img/ui/mu-hand-cursor.png') 4 3, auto;
}
/* A interface inteira funciona como um cliente de jogo: rótulos, botões e
   painéis não podem receber a seleção azul do navegador. Campos de digitação
   continuam selecionáveis para login, chat e formulários. */
body, body * { -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select:text; user-select:text; }
body ::selection { background:transparent; color:inherit; }
/* Cidade e caçada preenchem o viewport; a HUD é apenas uma sobreposição. */
body:has(#view-city[style*="block"]) { padding: 0; }
html:has(#screen-char-select[style*="block"]), body:has(#screen-char-select[style*="block"]) { height:100%; overflow:hidden; }
body:has(#screen-char-select[style*="block"]) { height:100vh; padding:0; overflow:hidden; }
body.game-ui-active { height:100vh; padding:0; overflow:hidden; }
body.game-ui-active #screen-game { height:100vh; overflow:hidden; }
/* O HUD é uma superfície de jogo, não uma página de texto selecionável. */
body.game-ui-active, body.game-ui-active * { -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
body.game-ui-active ::selection { background:transparent; color:inherit; }
body.game-ui-active button:focus, body.game-ui-active button:focus-visible, body.game-ui-active a:focus, body.game-ui-active a:focus-visible { outline:none!important; }
button, a, .char-create-pips i, .city-npc, #city-canvas,
.eq-slot, .inv-slot, .inv-slot-box, .mu-slot, .mu-active-skill-slot,
.interactive-slot, .map-card, .set-card, .character-stage-card {
    cursor: url('../assets/img/ui/mu-hand-cursor.png') 4 3, pointer !important;
}
button:active, a:active, .char-create-pips i:active, .city-npc:active, #city-canvas:active,
.eq-slot.filled:active, .inv-slot:active, .inv-slot-box:active, .mu-slot:active,
.mu-active-skill-slot:active, .interactive-slot:active, .map-card:active, .set-card:active,
.character-stage-card:active {
    cursor: url('../assets/img/ui/mu-hand-cursor.png') 4 3, pointer !important;
}
input, textarea, select, [contenteditable="true"] { cursor: url('../assets/img/ui/mu-text-cursor.png') 11 16, text !important; }

#screen-auth, #screen-char-select { min-height: calc(100vh - 110px); display: flex; align-items: center; justify-content: center; }
#screen-auth::before { content: ''; position: fixed; z-index: -1; inset: 0; background: linear-gradient(rgba(3,7,13,.35), rgba(3,7,13,.72)), url('../assets/img/ui/character-select-harbor.png') center / cover no-repeat; }
#screen-char-select { max-width:none; height:100vh; min-height:0; align-items:stretch; padding:0; overflow:hidden; }
#screen-char-select::before { content:''; position:fixed; z-index:-1; inset:0; background:linear-gradient(rgba(3,6,10,.22),rgba(3,6,10,.72)),url('../assets/img/ui/character-select-stage.png') center/cover no-repeat; }
.character-select-panel { position:relative; width:100%; height:100vh; min-height:0; padding:28px 34px; margin:0; background:linear-gradient(90deg,rgba(3,6,9,.54),rgba(3,6,9,0) 43%,rgba(3,6,9,.34)); box-shadow:inset 0 0 120px #000; overflow:hidden; }
.character-select-brand { width:340px; color: #ebcd76; text-align: center; font: 800 27px Georgia, serif; text-shadow: 0 2px #000, 0 0 14px #d89234; letter-spacing: 2px; }
.character-select-brand span { display: block; margin-top: 4px; color: #b9d2de; font: 10px Segoe UI, sans-serif; letter-spacing: 3px; text-transform: uppercase; }
.character-select-panel h2,.character-select-panel>p{width:340px}.character-select-stage{position:absolute;inset:270px 34px 18px 34px;margin:0;padding:0;background:none;border:0;box-shadow:none;pointer-events:none}.character-select-stage #character-list{width:100%;height:100%;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:1fr;align-items:end;justify-items:center;gap:0;pointer-events:auto}.character-stage-card{width:100%;max-width:210px;min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;padding:0 5px 4px;border:0;background:transparent;box-shadow:none;text-align:center}.character-stage-card:hover{border-color:transparent;background:transparent;transform:translateY(-5px)}.character-stage-avatar{width:260px;height:310px;display:flex;align-items:end;justify-content:center;overflow:visible;border:0;background:transparent}.character-stage-sprite{width:260px;height:310px;display:block;image-rendering:auto}.character-stage-info{display:flex;flex-direction:column;gap:1px;padding:1px 9px;background:transparent;border:0;min-width:150px;text-shadow:0 2px 3px #000}
/* Centralizacao por flex, e nao por text-align: o simbolo vira um item proprio
   e o espaco entre ele e o texto passa a ser o gap. Com "✦ TEXTO" numa
   string so, o letter-spacing depois da ultima letra e o espaco em branco
   deixavam o conjunto sempre um pouco a esquerda do nick. */
/* Na SELECAO de personagem o titulo fica ao lado do nick, na mesma linha. No
   HUD ele continua em linha propria: la a placa e estreita e nao cabe. */
.character-stage-name-row { display:flex; align-items:baseline; justify-content:center; gap:7px; min-width:0; }
.character-stage-name-row .character-stage-title { width:auto; }
.character-stage-title { display:flex; align-items:center; justify-content:center; gap:4px; width:100%; color:#f0d78d; font:800 10px "Segoe UI",sans-serif; font-style:normal; text-transform:uppercase; }
.character-stage-title i { font-style:normal; color:#d9ac47; }
.character-stage-title b { letter-spacing:1px; text-indent:1px; font-weight:800; }
.character-stage-info strong { color: #f7dc8a; font: 700 18px Georgia, serif; }.character-stage-info span { color: #77b8ef; font-size: 12px; }.character-stage-info small { color: #d0d4ca; } .character-stage-info small b { color: #f2c75c; font-weight: 700; }
.character-stage-card button{margin-top:2px;padding:4px 14px;background:#1d7339;color:#ecffef;font-size:11px}.character-stage-card .character-stage-delete{margin-top:0;background:rgba(104,28,31,.8);color:#ffd9d9;font-size:10px}.character-stage-card .character-stage-delete:hover{background:#a33137}
.character-delete-modal{position:fixed;inset:0;z-index:10080;display:grid;place-items:center;padding:24px;background:rgba(3,6,8,.16)}.character-delete-box{position:relative;width:min(430px,calc(100vw - 44px));padding:24px 26px;border:1px solid #697982;background:linear-gradient(145deg,rgba(20,28,32,.98),rgba(7,11,13,.98));box-shadow:0 18px 50px rgba(0,0,0,.72),inset 0 0 0 2px #10181b;color:#d7e0e1}.character-delete-kicker{color:#9fb1b4;font:700 10px Georgia,serif;letter-spacing:1.5px;text-transform:uppercase}.character-delete-box h3{margin:5px 0 7px;color:#edd17c;font:700 22px Georgia,serif;text-shadow:0 2px 2px #000}.character-delete-rule{height:1px;margin:0 0 18px;background:linear-gradient(90deg,#71848a,transparent)}.character-delete-box p{margin:9px 0;color:#d6dddc;line-height:1.45;font-size:14px}.character-delete-box strong{color:#f0d780;font-family:Georgia,serif}.character-delete-warning{padding:10px 12px;border-left:3px solid #9e3439;background:rgba(94,23,27,.25);color:#f0b7b7!important;font-size:12px!important}.character-delete-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.character-delete-actions button{padding:8px 13px;border:1px solid #53626a;border-radius:2px;font-weight:700;cursor:pointer}.character-delete-cancel{background:#263239;color:#e3eceb}.character-delete-confirm{background:linear-gradient(#9e393e,#631e23);border-color:#c15b5e!important;color:#fff0f0}.character-delete-close{position:absolute;top:9px;right:10px;border:0;background:none;color:#d8e0df;font-size:22px;line-height:1;cursor:pointer}.character-delete-close:hover{color:#ff6b70}

.screen { width: 100%; max-width: 1000px; }
.screen:has(#view-city) { max-width: none; }

h2, h3 {
    margin-top: 0;
    color: var(--accent);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.panel {
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    margin-bottom: 20px;
}

button {
    background-color: #238636;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}
button:hover { background-color: #2ea043; }
button:focus-visible { outline: 2px solid #f0ca69; outline-offset: 2px; }
/* Pressionar escurece o botão em vez de repintá-lo. O verde fixo que estava
   aqui vinha com !important e vazava por cima de todo componente com skin
   própria — a placa de "Criar Novo Personagem", os cartões de monstro e os pins
   do mapa ficavam verdes ao clique. A sombra interna cobre qualquer fundo, não
   disputa cor com ninguém e mantém a especificidade original desta regra, que é
   o que deixa cada componente continuar mandando no próprio :active. */
button:active { transform: translateY(1px); box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .20), inset 0 2px 6px #0008; }
button:disabled { background-color: #30363d; cursor: not-allowed; color: #8b949e; }