/* ============================================================
   MiniScape 2D — visual medieval/fantasia
   Madeira escura + pergaminho + ouro. Sem emojis nos botões (ícones SVG do sprite em index.html).
   ============================================================ */
:root {
    --wood-0: #120c07; --wood-1: #1c130c; --wood-2: #2a1c11; --wood-3: #3a2818; --wood-4: #54391f;
    --gold-0: #8a6420; --gold-1: #c79a3a; --gold-2: #e8c469; --gold-3: #fbe6a6;
    --parch-0: #cdb88a; --parch-1: #e6d6a8; --parch-2: #f4e9c6;
    --ink: #24170c; --text: #eadfc4; --muted: #a89a7c;
    --red: #b3382c; --red-2: #e0584a; --green: #3f8a4a; --green-2: #78d08a; --blue: #3a76b8; --blue-2: #79b4ee;
    --serif: 'Palatino Linotype', Palatino, 'Book Antiqua', 'URW Palladio L', Georgia, serif;
    --sans: 'Trebuchet MS', 'Segoe UI', Tahoma, Verdana, sans-serif;
    --r: 12px; --r-sm: 8px;
    --bevel: inset 0 1px 0 rgba(255, 235, 170, .28), inset 0 -2px 0 rgba(0, 0, 0, .45);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0; padding: 12px; color: var(--text); font-family: var(--sans); display: flex; gap: 14px; justify-content: center; height: 100vh; overflow: hidden; align-items: stretch; user-select: none; -webkit-user-select: none;
    background: radial-gradient(ellipse at 50% 0%, #2b1d11 0%, #150e08 55%, #0c0704 100%);
}
input, textarea { user-select: auto; -webkit-user-select: auto; }
svg.ic { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.28em; flex: none; }
svg.ic.fill { fill: currentColor; stroke: none; }

@media (max-width: 850px) {
    body { flex-direction: column; align-items: center; padding: 6px; overflow-y: auto; height: auto; }
    #ui-panel { width: 100% !important; max-width: 100%; min-height: 500px; }
    .mobile-btn { display: flex !important; }
    #game-container { height: 52vh; min-height: 380px; }
    #quest-tracker { max-width: 60%; }
    #key-hints { display: none; }
}

/* ---------- moldura do jogo ---------- */
#game-container {
    position: relative; flex: 1; background: #000; overflow: hidden; border-radius: var(--r);
    border: 3px solid var(--gold-0);
    box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--wood-4), 0 10px 40px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 224, 140, .25);
}
#gameCanvas { display: block; width: 100%; height: 100%; touch-action: none; border: none; padding: 0; margin: 0; cursor: default; }

/* ---------- chat estilo jogo: fechado = pequeno e translúcido, aberto = painel ---------- */
#chat-container {
    position: absolute; left: 12px; bottom: 12px; width: min(430px, calc(100% - 24px)); z-index: 100; display: flex; flex-direction: column; border-radius: var(--r-sm); overflow: hidden;
    background: linear-gradient(to top, rgba(10, 6, 3, .55), rgba(10, 6, 3, 0)); border: 1px solid transparent; transition: background .18s, border-color .18s;
}
#chat-box { padding: 6px 10px 4px; font-size: .82rem; line-height: 1.32; display: flex; flex-direction: column; gap: 2px; overflow: hidden; max-height: 7.2em; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45%); mask-image: linear-gradient(to bottom, transparent 0, #000 45%); justify-content: flex-end; }
.chat-msg { color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; word-wrap: break-word; opacity: .82; }
.chat-msg.fresh { animation: chatIn .35s ease-out; }
.chat-who { font-weight: 700; margin-right: 2px; }
.chat-who::after { content: ':'; }
@keyframes chatIn { from { opacity: 0; transform: translateY(6px); } to { opacity: .82; transform: none; } }
#chat-input-area { display: none; border-top: 1px solid rgba(232, 196, 105, .35); background: rgba(12, 8, 4, .92); }
#chat-input { flex: 1; min-width: 0; background: transparent; border: none; color: #fff; padding: 9px 12px; font-size: .86rem; outline: none; font-family: var(--sans); }
#chat-input::placeholder { color: #8f8062; }
#chat-send { border: none; padding: 0 16px; cursor: pointer; font-weight: 700; color: var(--ink); background: linear-gradient(#f0cf7c, #c99a3c); font-family: var(--serif); letter-spacing: .3px; }
#chat-send:hover { filter: brightness(1.1); }
#chat-container.open { background: rgba(14, 9, 5, .86); border-color: rgba(232, 196, 105, .5); backdrop-filter: blur(3px); }
#chat-container.open #chat-input-area { display: flex; }
#chat-container.open #chat-box { max-height: 210px; overflow-y: auto; -webkit-mask-image: none; mask-image: none; justify-content: flex-start; }
#chat-container.open .chat-msg { opacity: 1; }
#chat-hint { position: absolute; right: 8px; top: -18px; font-size: .68rem; color: #d9c58f; text-shadow: 0 1px 2px #000; pointer-events: none; opacity: 0; transition: opacity .2s; }
#chat-container:not(.open):hover #chat-hint { opacity: .9; }

/* ---------- dica de ação sob o cursor e diário de aventura ---------- */
#hover-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 90; pointer-events: none; padding: 5px 14px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: #fff; background: rgba(14, 9, 5, .82); border: 1px solid rgba(232, 196, 105, .55); text-shadow: 0 1px 2px #000; opacity: 0; transition: opacity .12s; white-space: nowrap; }
#hover-hint.show { opacity: 1; }
#hover-hint small { font-weight: 400; color: #cdbf9b; margin-left: 6px; }
#quest-tracker { position: absolute; left: 12px; top: 12px; z-index: 95; width: 270px; padding: 10px 12px 10px; border-radius: var(--r); color: var(--ink); font-family: var(--serif); background: linear-gradient(160deg, #f2e6c2, #d8c391); border: 2px solid var(--gold-0); box-shadow: 0 6px 18px rgba(0, 0, 0, .55), inset 0 0 18px rgba(120, 80, 20, .25); cursor: pointer; transition: transform .15s; }
#quest-tracker:hover { transform: translateY(-1px); }
#quest-tracker h4 { margin: 0 0 3px; font-size: .74rem; letter-spacing: 1px; text-transform: uppercase; color: #7a5518; display: flex; align-items: center; gap: 6px; }
#quest-tracker .q-title { font-weight: 700; font-size: .95rem; line-height: 1.2; }
#quest-tracker .q-hint { font-size: .78rem; margin-top: 3px; color: #4a3520; line-height: 1.3; font-family: var(--sans); }
#quest-tracker .q-bar { height: 5px; border-radius: 3px; background: rgba(60, 40, 15, .3); margin-top: 7px; overflow: hidden; }
#quest-tracker .q-bar i { display: block; height: 100%; background: linear-gradient(#e0a93a, #b07a1a); }
#quest-tracker.done .q-title { color: #3f6b2a; }
#quest-tracker .q-x { margin-left: auto; opacity: .6; font-size: .66rem; text-transform: none; letter-spacing: 0; font-family: var(--sans); }
#quest-tracker.min { width: auto; padding: 6px 12px; }
#quest-tracker.min .q-hint, #quest-tracker.min .q-bar, #quest-tracker.min .q-title { display: none; }
#env-badge { position: absolute; right: 12px; top: 12px; z-index: 85; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: .78rem; color: var(--gold-3); text-shadow: 0 1px 2px #000; pointer-events: none; }
#env-badge .eb-main { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 4px 12px 4px 8px; border-radius: 999px; background: rgba(12, 8, 4, .72); border: 1px solid rgba(232, 196, 105, .45); }
#env-badge .eb-main:hover { border-color: rgba(232, 196, 105, .8); }
#env-badge b { font-family: var(--serif); letter-spacing: .5px; } #env-badge span { color: #cfc39f; } #env-badge .eb-car { font-style: normal; font-size: .65rem; opacity: .7; }
#env-badge .wic { flex: none; filter: drop-shadow(0 1px 1px #000); }
#env-badge .eb-fc { pointer-events: auto; padding: 8px 10px; border-radius: 10px; background: rgba(12, 8, 4, .88); border: 1px solid rgba(232, 196, 105, .45); max-width: min(92vw, 470px); }
#env-badge .fc-t { font-family: var(--serif); font-size: .74rem; margin-bottom: 6px; color: var(--gold-3); } .fc-none { color: #cfc39f; font-size: .72rem; }
#env-badge .fc-row { display: flex; gap: 6px; } #env-badge .fc-c { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 62px; padding: 5px 4px; border-radius: 8px; background: rgba(255, 255, 255, .04); }
#env-badge .fc-c.now { background: rgba(232, 196, 105, .16); border: 1px solid rgba(232, 196, 105, .4); } #env-badge .fc-c b { font-size: .68rem; font-weight: 600; color: #f0e6c4; } #env-badge .fc-c small { font-size: .62rem; color: #a99f80; }
#key-hints { position: absolute; left: 50%; transform: translateX(-50%); top: 12px; max-width: calc(100% - 560px); z-index: 80; font-size: .72rem; color: #eadfc4; text-shadow: 0 1px 2px #000; background: rgba(12, 8, 4, .6); border: 1px solid rgba(232, 196, 105, .3); border-radius: 10px; padding: 6px 10px; line-height: 1.55; transition: opacity 1s; pointer-events: none; }
#key-hints b { color: var(--gold-2); font-family: var(--serif); }
#key-hints.hide { opacity: 0; }

.mobile-btn { display: none; width: 100%; padding: 14px; margin-bottom: 4px; align-items: center; justify-content: center; gap: 8px; color: #fff; border: 2px solid rgba(0, 0, 0, .55); border-radius: var(--r); font-size: 1.05rem; font-weight: 700; cursor: pointer; text-shadow: 0 1px 2px #000; font-family: var(--serif); letter-spacing: .5px; box-shadow: var(--bevel); }
#mobile-action-btn { background: linear-gradient(#5aa05a, #2d6a35); }
#mobile-atk-btn { background: linear-gradient(#c8493c, #7f1f18); }

/* ---------- tooltip / menu / modal ---------- */
#tooltip { display: none; position: absolute; background: linear-gradient(#f4e9c6, #dcc89a); color: var(--ink); border: 2px solid var(--gold-0); border-radius: 10px; padding: 9px 12px; pointer-events: none; z-index: 3000; min-width: 140px; max-width: 260px; font-size: .8rem; box-shadow: 0 8px 22px rgba(0, 0, 0, .65); }
.tt-title { color: #6b4210; font-weight: 700; font-size: .95rem; font-family: var(--serif); border-bottom: 1px solid rgba(90, 60, 20, .4); margin-bottom: 4px; padding-bottom: 3px; }
.tt-desc { color: #4a3a22; margin-bottom: 4px; font-style: italic; font-size: .76rem; }
.tt-stat { color: #2f6b34; font-weight: 700; } .tt-weight { color: #7a6a4c; font-size: .7rem; margin-top: 4px; text-align: right; }

#osrs-menu { display: none; position: absolute; background: linear-gradient(#2c1e12, #1a110a); border: 2px solid var(--gold-0); box-shadow: 0 8px 24px rgba(0, 0, 0, .75); z-index: 9999; min-width: 170px; font-family: var(--serif); font-weight: 700; color: var(--gold-2); border-radius: 10px; overflow: hidden; }
.osrs-menu-item { padding: 9px 14px; cursor: pointer; font-size: .9rem; text-shadow: 0 1px 1px #000; border-bottom: 1px solid rgba(232, 196, 105, .12); }
.osrs-menu-item:last-child { border-bottom: none; }
.osrs-menu-item:hover { background: linear-gradient(#6a4a26, #4a3018); color: #fff; }

#custom-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(6, 3, 1, .78); backdrop-filter: blur(2px); z-index: 10000; align-items: center; justify-content: center; }
#custom-modal-box { background: linear-gradient(#2c1e12, #1a110a); border: 3px solid var(--gold-0); border-radius: 14px; padding: 20px; width: 340px; max-width: 92vw; box-shadow: 0 0 0 2px #000, 0 20px 60px rgba(0, 0, 0, .8); color: var(--text); display: flex; flex-direction: column; gap: 10px; }

/* ---------- painel do herói ---------- */
#ui-panel {
    width: 372px; min-width: 372px; display: flex; flex-direction: column; gap: 10px; overflow-y: hidden; height: 100%; padding: 12px; border-radius: var(--r);
    background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, .25)), repeating-linear-gradient(90deg, #2a1c11 0 3px, #2f2014 3px 7px, #271a0f 7px 11px);
    border: 3px solid var(--gold-0); box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--wood-4), 0 10px 40px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 224, 140, .2), inset 0 0 30px rgba(0, 0, 0, .6);
}
.hud-header { display: flex; gap: 10px; align-items: stretch; background: rgba(8, 5, 2, .55); padding: 8px; border: 1px solid rgba(232, 196, 105, .28); border-radius: 12px; }
#minimapCanvas { border: 2px solid var(--gold-0); background: #000; border-radius: 10px; width: 112px; height: 82px; flex-shrink: 0; box-shadow: inset 0 0 8px #000, 0 0 0 1px #000; }
.hud-bars-wrapper { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 5px; }
.hud-bar-container { width: 100%; height: 20px; background: #0b0704; border: 1px solid #000; position: relative; border-radius: 999px; overflow: hidden; box-shadow: inset 0 2px 5px #000, 0 0 0 1px rgba(232, 196, 105, .35); }
.hud-bar-fill { height: 100%; transition: width .25s; border-radius: 999px; position: relative; }
.hud-bar-fill::after { content: ''; position: absolute; left: 4px; right: 4px; top: 2px; height: 5px; border-radius: 4px; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); }
#bar-hp { background: linear-gradient(#e0584a, #8f2118); } #bar-mp { background: linear-gradient(#5aa4f0, #1f4f94); } #bar-xp { background: linear-gradient(#f0c14a, #a8741a); }
.hud-text { position: absolute; width: 100%; text-align: center; top: 0; left: 0; font-size: .72rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; line-height: 19px; letter-spacing: .3px; }
#action-text { color: var(--gold-2); text-align: center; font-weight: 700; min-height: 18px; font-size: .84rem; text-shadow: 0 1px 2px #000; font-family: var(--serif); }

/* ---------- abas ---------- */
.tab-buttons { display: flex; gap: 3px; flex-wrap: nowrap; }
.tab-btn {
    flex: 1 1 0; min-width: 0; padding: 7px 0 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; font-family: var(--serif); font-weight: 700; font-size: .56rem; letter-spacing: 0; text-transform: uppercase; white-space: nowrap;
    color: var(--muted); border-radius: 10px 10px 4px 4px; border: 1px solid #000; background: linear-gradient(#3b2a19, #21160c); box-shadow: var(--bevel); transition: transform .08s, filter .12s;
}
.tab-btn svg.ic { width: 20px; height: 20px; }
.tab-btn:hover { color: var(--gold-3); filter: brightness(1.2); }
.tab-btn:active { transform: translateY(1px); }
.active-btn { background: linear-gradient(#7a5426, #4a3018) !important; color: var(--gold-3) !important; box-shadow: var(--bevel), 0 0 0 1px var(--gold-1); }
#btn-dev { display: none !important; color: #ffb4a8; }
#btn-dev.is-admin { display: flex !important; }
.tab-content { display: none; background: rgba(10, 6, 3, .55); padding: 11px; border: 1px solid rgba(232, 196, 105, .28); flex: 1; overflow-y: auto; border-radius: 6px 6px 12px 12px; scrollbar-width: thin; scrollbar-color: var(--gold-0) transparent; }
.active-tab { display: block; }
.tab-content h3 { font-family: var(--serif); color: var(--gold-2); letter-spacing: .5px; }
.tab-note { font-size: .74rem; color: var(--muted); margin-bottom: 9px; line-height: 1.4; }

/* ---------- inventário ---------- */
.grid-container { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.item-slot { aspect-ratio: 1; background: radial-gradient(circle at 50% 30%, #3a291a, #1b120b); border: 1px solid #000; position: relative; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(232, 196, 105, .12), inset 0 3px 8px rgba(0, 0, 0, .7); border-radius: 9px; transition: transform .08s; }
.item-slot:hover { box-shadow: inset 0 0 0 1px var(--gold-2), 0 0 10px rgba(232, 196, 105, .35); transform: translateY(-1px); }
.item-qty { position: absolute; top: 2px; left: 4px; color: var(--gold-2); font-weight: 700; font-size: .66rem; text-shadow: 0 1px 1px #000, 0 0 2px #000; font-family: var(--sans); }
#equip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; text-align: center; font-size: .8rem; }
.equip-slot-box { position: relative; background: radial-gradient(circle at 50% 30%, #3a291a, #1b120b); border: 1px solid #000; padding: 12px 5px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; min-height: 74px; box-shadow: inset 0 0 0 1px rgba(232, 196, 105, .14), inset 0 3px 8px rgba(0, 0, 0, .7); }
.equip-slot-box:hover { box-shadow: inset 0 0 0 1px var(--gold-2); }
.slot-name { color: var(--muted); font-size: .62rem; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 1px; font-family: var(--serif); }
.equip-icon { font-size: 1.6rem; }
.skill-line { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(232, 196, 105, .12); padding: 7px 4px; font-size: .78rem; color: var(--text); }
.skill-line .sk-bar { flex: 1; height: 5px; margin: 0 10px; border-radius: 3px; background: rgba(0, 0, 0, .5); overflow: hidden; } .skill-line .sk-bar i { display: block; height: 100%; background: linear-gradient(#f0c14a, #a8741a); }

.spell-card { background: linear-gradient(#2c1e12, #1c130b); border: 1px solid #000; padding: 9px 10px; margin-bottom: 6px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: filter .15s; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(232, 196, 105, .14); }
.spell-card:hover { filter: brightness(1.25); } .spell-active { box-shadow: inset 0 0 0 1px var(--blue-2), 0 0 12px rgba(90, 160, 240, .25); } .spell-runes { font-size: .68rem; color: var(--muted); }
.npc-dialog { background: linear-gradient(#f2e6c2, #d8c391); color: var(--ink); border: 2px solid var(--gold-0); border-radius: 12px; padding: 11px 13px; font-style: italic; margin-bottom: 10px; font-size: .88rem; font-family: var(--serif); line-height: 1.4; box-shadow: inset 0 0 16px rgba(120, 80, 20, .3); }
.shop-item { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(#2c1e12, #1c130b); padding: 7px 9px; border: 1px solid #000; margin-bottom: 5px; border-radius: 10px; font-size: .82rem; box-shadow: inset 0 0 0 1px rgba(232, 196, 105, .12); }
.shop-btn, .btn-gold { background: linear-gradient(#f0cf7c, #b98a2e); color: var(--ink); border: 1px solid #000; padding: 5px 11px; font-weight: 700; cursor: pointer; font-size: .74rem; border-radius: 999px; font-family: var(--serif); box-shadow: var(--bevel); }
.shop-btn:hover, .btn-gold:hover { filter: brightness(1.12); } .shop-btn:disabled, .btn-gold:disabled { background: #3a352c; color: #7a7466; cursor: not-allowed; filter: none; }

/* ---------- editor (DEV) ---------- */
.dev-sub-tabs { display: flex; margin-bottom: 10px; gap: 3px; flex-wrap: wrap; }
.dev-sub-btn { background: linear-gradient(#3b2a19, #21160c); color: var(--muted); border: 1px solid #000; padding: 6px 9px; cursor: pointer; font-size: .7rem; flex: 1; border-radius: 8px; font-family: var(--serif); font-weight: 700; box-shadow: var(--bevel); }
.dev-sub-btn.active { background: linear-gradient(#7a5426, #4a3018); color: var(--gold-3); }
.dev-sub-content { display: none; } .dev-sub-content.active { display: block; }
.dev-form-group { margin-bottom: 8px; }
.dev-form-group label { display: block; font-size: .64rem; color: var(--muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .6px; font-family: var(--serif); }
.dev-input, .dev-select { width: 100%; padding: 7px 9px; background: #0d0805; color: #fff; border: 1px solid rgba(232, 196, 105, .3); font-size: .8rem; border-radius: 8px; font-family: var(--sans); outline: none; }
.dev-input:focus, .dev-select:focus { border-color: var(--gold-2); box-shadow: 0 0 0 2px rgba(232, 196, 105, .2); }
.dev-row { display: flex; gap: 6px; }
.dev-save-btn { width: 100%; padding: 9px; background: linear-gradient(#5aa05a, #2d6a35); color: #fff; border: 1px solid #000; font-weight: 700; cursor: pointer; margin-top: 6px; border-radius: 999px; font-family: var(--serif); letter-spacing: .4px; text-shadow: 0 1px 1px #000; box-shadow: var(--bevel); }
.dev-save-btn:hover { filter: brightness(1.12); }
#dev-entity-list { max-height: 190px; overflow-y: auto; background: #0d0805; border: 1px solid rgba(232, 196, 105, .3); padding: 6px; border-radius: 10px; scrollbar-width: thin; }
.dev-ent-cat { color: var(--gold-1); font-size: .7rem; border-bottom: 1px solid rgba(232, 196, 105, .2); margin-top: 6px; padding-bottom: 2px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-family: var(--serif); }
.dev-ent-item { padding: 6px 8px; font-size: .8rem; cursor: pointer; color: var(--text); border-radius: 7px; display: flex; align-items: center; gap: 8px; }
.dev-ent-item:hover { background: #2c1e12; color: var(--gold-2); } .dev-ent-item.selected { background: linear-gradient(#7a5426, #4a3018); font-weight: 700; color: #fff; }
.map-tile-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; background: #0d0805; padding: 3px; border: 1px solid rgba(232, 196, 105, .3); border-radius: 10px; }
.map-tile { aspect-ratio: 1; background: #1c130b; color: var(--muted); font-size: .6rem; display: flex; align-items: center; justify-content: center; cursor: pointer; text-align: center; word-break: break-all; border-radius: 6px; }
.map-tile:hover { background: #3a2818; color: #fff; } .map-tile.active-tile { box-shadow: inset 0 0 0 2px var(--gold-2); background: #54391f; color: #fff; }

/* ---------- livro (craft / guia) ---------- */
.book { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.book-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.book-tab { flex: 1; padding: 6px 4px; border-radius: 8px 8px 0 0; border: 1px solid #000; cursor: pointer; font-family: var(--serif); font-size: .72rem; font-weight: 700; color: var(--muted); background: linear-gradient(#3b2a19, #21160c); text-align: center; }
.book-tab.on { color: var(--ink); background: linear-gradient(#f4e9c6, #d8c391); }
.book-page { background: linear-gradient(100deg, #e8dcb4 0%, #f4e9c6 45%, #e2d3a2 100%); color: var(--ink); border: 2px solid var(--gold-0); border-radius: 6px 12px 12px 6px; padding: 12px 14px; font-family: var(--serif); box-shadow: inset 0 0 26px rgba(120, 80, 20, .35), 0 6px 16px rgba(0, 0, 0, .5); position: relative; }
.book-page::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: linear-gradient(90deg, rgba(60, 35, 10, .45), rgba(60, 35, 10, 0)); border-radius: 6px 0 0 6px; pointer-events: none; }
.book-page h3 { margin: 0 0 4px; color: #5a3a10; font-size: 1.05rem; } .book-page h4 { margin: 10px 0 3px; color: #7a5518; font-size: .82rem; text-transform: uppercase; letter-spacing: 1px; }
.book-page p, .book-page li { font-family: var(--sans); font-size: .8rem; line-height: 1.45; color: #33251a; } .book-page ul { margin: 4px 0; padding-left: 18px; }
.book-page .ic { color: #7a5518; }
.rc-list { display: flex; flex-direction: column; gap: 5px; }
.rc-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 10px; cursor: pointer; background: linear-gradient(#2c1e12, #1c130b); border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(232, 196, 105, .12); }
.rc-item:hover { filter: brightness(1.2); } .rc-item.sel { box-shadow: inset 0 0 0 1px var(--gold-2); } .rc-item.lack { opacity: .62; }
.rc-item .em { font-size: 1.4rem; width: 30px; text-align: center; } .rc-item .nm { font-weight: 700; font-size: .84rem; color: var(--text); } .rc-item .sub { font-size: .68rem; color: var(--muted); }
.rc-ok { color: var(--green-2); } .rc-no { color: var(--red-2); }
.ing { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border-radius: 8px; background: rgba(90, 60, 20, .1); border: 1px solid rgba(90, 60, 20, .25); margin-bottom: 5px; }
.ing .em { font-size: 1.25rem; } .ing .nm { font-weight: 700; color: #3a2510; font-size: .84rem; } .ing .have { margin-left: auto; font-weight: 700; font-size: .78rem; white-space: nowrap; }
.ing .have.ok { color: #2f6b34; } .ing .have.no { color: #a83a2c; }
.src { font-size: .74rem; color: #4a3a22; margin-top: 2px; line-height: 1.4; } .src b { color: #6b4210; }
.src .chip { display: inline-block; padding: 0 7px; margin: 1px 3px 1px 0; border-radius: 999px; background: rgba(90, 60, 20, .16); border: 1px solid rgba(90, 60, 20, .3); font-size: .68rem; }
.src .chip.red { background: rgba(179, 56, 44, .14); border-color: rgba(179, 56, 44, .5); color: #7a2118; } .src .chip.grn { background: rgba(63, 138, 74, .16); border-color: rgba(63, 138, 74, .5); color: #245a2c; } .src .chip.yel { background: rgba(200, 160, 40, .2); border-color: rgba(160, 120, 20, .5); color: #6b4a08; }
.tree-indent { margin-left: 14px; border-left: 2px dashed rgba(90, 60, 20, .35); padding-left: 8px; }
.btn-craft { width: 100%; margin-top: 8px; padding: 10px; border-radius: 999px; border: 1px solid #000; font-family: var(--serif); font-weight: 700; font-size: .92rem; letter-spacing: .5px; color: var(--ink); background: linear-gradient(#f0cf7c, #b98a2e); cursor: pointer; box-shadow: var(--bevel); }
.btn-craft:disabled { background: #6f6650; color: #a89a7c; cursor: not-allowed; } .btn-craft:not(:disabled):hover { filter: brightness(1.1); }

/* ============================================================
   TELA DE LOGIN
   ============================================================ */
#login-overlay { display: flex; position: fixed; inset: 0; z-index: 20000; align-items: center; justify-content: center; flex-direction: column; background: #070a14; overflow: hidden; }
#login-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#login-overlay::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(5, 8, 20, .0) 0%, rgba(3, 5, 14, .55) 70%, rgba(2, 3, 10, .85) 100%); pointer-events: none; }
.login-wrap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px; width: 100%; }
.login-logo { text-align: center; }
.login-logo h1 { margin: 0; font-family: var(--serif); font-size: clamp(2.6rem, 8vw, 4.4rem); letter-spacing: 3px; line-height: 1; text-transform: none; font-weight: 700;
    background: linear-gradient(#fff3c4 0%, #f0c14a 45%, #a8741a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #3a2208) drop-shadow(0 0 22px rgba(240, 190, 80, .45)); }
.login-logo h1 span { font-size: .5em; letter-spacing: 6px; display: block; margin-top: 4px; color: #e7d29a; -webkit-text-fill-color: #e7d29a; filter: none; text-shadow: 0 2px 4px #000; }
.login-logo .orn { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; color: var(--gold-1); }
.login-logo .orn i { display: block; height: 2px; width: 90px; background: linear-gradient(90deg, transparent, var(--gold-1), transparent); } .login-logo .orn svg { width: 18px; height: 18px; }
.login-box { position: relative; width: 340px; max-width: 92vw; padding: 24px 24px 20px; border-radius: 16px; text-align: left;
    background: linear-gradient(rgba(46, 31, 18, .93), rgba(24, 15, 8, .95)); border: 3px solid var(--gold-0); box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--wood-4), 0 20px 60px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 224, 140, .25); backdrop-filter: blur(4px); }
.login-box::before, .login-box::after { content: ''; position: absolute; width: 22px; height: 22px; border: 3px solid var(--gold-2); pointer-events: none; }
.login-box::before { left: -6px; top: -6px; border-right: none; border-bottom: none; border-radius: 10px 0 0 0; } .login-box::after { right: -6px; bottom: -6px; border-left: none; border-top: none; border-radius: 0 0 10px 0; }
.login-field { position: relative; margin-bottom: 12px; }
.login-field label { display: block; font-size: .66rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-1); margin-bottom: 4px; font-family: var(--serif); }
.login-input { width: 100%; padding: 11px 12px 11px 38px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(232, 196, 105, .35); color: #fff; border-radius: 10px; font-size: .95rem; font-family: var(--sans); outline: none; }
.login-input:focus { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(232, 196, 105, .2); }
.login-field svg { position: absolute; left: 11px; bottom: 11px; width: 18px; height: 18px; color: var(--gold-1); pointer-events: none; }
.login-btn { width: 100%; padding: 12px; border: 1px solid #000; cursor: pointer; border-radius: 999px; font-weight: 700; font-size: 1rem; font-family: var(--serif); letter-spacing: .8px; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--bevel), 0 3px 0 rgba(0, 0, 0, .5); transition: transform .08s, filter .12s; color: var(--ink); background: linear-gradient(#f5d987, #c08f30); text-shadow: 0 1px 0 rgba(255, 240, 190, .6); }
.login-btn:hover { filter: brightness(1.1); } .login-btn:active { transform: translateY(2px); box-shadow: var(--bevel); }
.login-btn.reg { color: var(--gold-3); background: linear-gradient(#5a3f22, #33220f); text-shadow: 0 1px 1px #000; margin-top: 10px; }
#login-msg { color: #ff9a8c; font-size: .82rem; font-weight: 700; min-height: 18px; margin: 2px 0 6px; text-align: center; }
.login-foot { position: relative; z-index: 2; font-size: .72rem; color: #a99d80; text-shadow: 0 1px 2px #000; text-align: center; max-width: 420px; line-height: 1.5; }
.login-foot a { color: var(--gold-2); text-decoration: none; }

/* ---------- painel de som ---------- */
.aud-row { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: .82rem; margin: 6px 0; color: #33251a; }
.aud-row span { width: 60px; } .aud-row input[type=range] { flex: 1; accent-color: #b07a1a; } .aud-row input[type=checkbox] { accent-color: #b07a1a; width: 16px; height: 16px; }

/* ---------- missões de NPC ---------- */
#npc-quests { margin: 4px 0 10px; }
.qh { margin: 4px 0 6px; font-family: var(--serif); color: var(--gold-2); letter-spacing: 1px; text-transform: uppercase; font-size: .78rem; }
.qcard { background: linear-gradient(160deg, #f2e6c2, #d8c391); color: var(--ink); border: 2px solid var(--gold-0); border-radius: 12px; padding: 9px 11px; margin-bottom: 7px; font-family: var(--sans); box-shadow: inset 0 0 14px rgba(120, 80, 20, .3); }
.qcard .qt { font-family: var(--serif); font-weight: 700; font-size: .92rem; color: #5a3a10; } .qcard .qt small { font-family: var(--sans); font-weight: 400; color: #2f6b34; margin-left: 6px; }
.qcard .qi { font-size: .78rem; line-height: 1.4; margin: 3px 0; font-style: italic; } .qcard .qo { font-size: .8rem; font-weight: 700; margin: 3px 0; } .qcard .qr { font-size: .74rem; color: #4a3520; margin-bottom: 6px; } .qcard .qs { font-size: .72rem; color: #7a5518; }
.qcard.ready { border-color: #3f8a4a; } .qcard.done { opacity: .6; padding: 5px 11px; }

/* ícones de item desenhados em código */
.ic-item { width: 1.2em; height: 1.2em; vertical-align: -0.3em; image-rendering: auto; pointer-events: none; user-select: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.item-slot .ic-item { width: 82%; height: 82%; vertical-align: middle; }
.equip-icon .ic-item { width: 40px; height: 40px; }
.rc-item .em .ic-item { width: 30px; height: 30px; }