/* Tela do jogo */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #47aba9; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; color: #f3ead6; font-size: 14px; }
img { image-rendering: pixelated; -webkit-user-drag: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; touch-action: none; cursor: url('../assets/ui/cursor.png') 6 5, default; }
/* ponteiro de mira sobre inimigos, monstros e recursos (ui.js hoverCursor) */
#game.alvo { cursor: url('../assets/ui/cursor_alvo.png') 16 16, crosshair; }
#minimap, #panel, #topbar, #touchbar { touch-action: none; }
button, .btn { touch-action: manipulation; }

button, .btn {
    font: inherit; font-weight: 600; color: #f3ead6; background: #3b4259; border: 2px solid #1a1c27; border-radius: 6px;
    padding: 4px 10px; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.3;
}
button:hover, .btn:hover { background: #4b5472; }

/* barra superior */
#topbar {
    position: fixed; top: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 10px;
    background: rgba(33, 36, 50, .92); border-bottom: 3px solid #1a1c27;
}
#topbar .res { display: flex; align-items: center; gap: 4px; min-width: 78px; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
#topbar .res img { width: 30px; height: 30px; }
#topbar .spacer { flex: 1; }
#topbar .tag { padding: 3px 9px; border-radius: 6px; background: #1f2230; font-variant-numeric: tabular-nums; white-space: nowrap; }
#topbar .tag.warn { color: #ffb4a8; }

/* mensagens */
#msgs { position: fixed; top: 54px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.msg { padding: 5px 14px; border-radius: 6px; background: rgba(26, 28, 39, .88); font-weight: 600; text-shadow: 0 1px 0 #000; }
.msg.warn { color: #ffb4a8; }
.msg.good { color: #a6f0a6; }

/* parte de baixo: minimapa + painel */
#bottom { position: fixed; left: 10px; bottom: 10px; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
#bottom > * { pointer-events: auto; }
#minimap { width: 224px; height: 168px; border: 3px solid #1a1c27; border-radius: 6px; background: #3f9c9a; image-rendering: pixelated; cursor: pointer; }
#panel {
    display: flex; gap: 14px; align-items: stretch; min-height: 104px; padding: 10px 12px;
    background: rgba(33, 36, 50, .92); border: 3px solid #1a1c27; border-radius: 8px;
}
#panel .info { min-width: 190px; max-width: 260px; }
#panel .title { font-size: 17px; font-weight: 700; color: #ffd86b; margin-bottom: 2px; }
#panel .enemy { font-size: 11px; font-weight: 700; color: #1a1c27; background: #ff6b5e; border-radius: 4px; padding: 1px 5px; vertical-align: middle; }
#panel .sub { color: #d9d2c0; line-height: 1.45; }
#panel .hint { color: #b8b2a3; line-height: 1.5; padding-top: 4px; }
#panel .acts { display: flex; gap: 6px; }
#panel .acts:empty { display: none; }
.act {
    position: relative; width: 92px; padding: 4px 4px 5px; display: flex; flex-direction: column; align-items: center; gap: 1px;
    background: #2a2e40; border: 2px solid #1a1c27; border-radius: 8px;
}
.act img { width: 46px; height: 46px; }
.act .name { font-size: 12px; }
.act .key { position: absolute; top: 2px; left: 5px; font-size: 11px; color: #9aa0b8; }
.act .costs { display: flex; gap: 5px; font-size: 12px; font-weight: 700; min-height: 16px; }
.act.on { border-color: #ffd86b; background: #454a66; }
.act.poor img { filter: grayscale(.9) brightness(.7); }
.cost { display: inline-flex; align-items: center; gap: 1px; }
.cost img { width: 16px; height: 16px; }
.cost.lack { color: #ff8b7e; }
.queue { display: flex; gap: 4px; margin-top: 5px; }
.q { padding: 1px; background: #2a2e40; }
.q img { width: 28px; height: 28px; display: block; }

/* avisos e janelas */
.center-note {
    position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); display: none; padding: 12px 22px;
    background: rgba(26, 28, 39, .9); border: 3px solid #1a1c27; border-radius: 8px; font-size: 18px; font-weight: 700;
}
.center-note.show { display: block; }
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(10, 12, 20, .55); }
.modal.show { display: flex; }
.modal-box {
    width: min(600px, calc(100% - 32px)); padding: 22px 26px; background: #2b2f3f; border: 4px solid #1a1c27; border-radius: 12px;
    box-shadow: 0 8px 0 #1a1c27; text-align: center;
}
.modal-box h2 { margin: 0 0 12px; font-size: 26px; color: #ffd86b; }
.modal-box ul { text-align: left; margin: 0 0 16px; padding-left: 20px; line-height: 1.65; color: #d9d2c0; }
.modal-box p { line-height: 1.6; color: #d9d2c0; margin: 0 0 16px; }
.modal-box button, .modal-box .btn { padding: 8px 18px; font-size: 15px; margin: 0 4px; }

#loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #2b2f3f; font-size: 18px; font-weight: 600; text-align: center; }
#loading.hide { display: none; }
.load-track { width: 260px; height: 12px; margin-top: 12px; background: #1a1c27; border-radius: 6px; overflow: hidden; }
#load-bar { width: 0; height: 100%; background: #ffd86b; }

/* medidor de desempenho (F3) */
#perf { position: fixed; top: 50px; right: 10px; display: none; padding: 3px 9px; border-radius: 6px; background: rgba(26, 28, 39, .88); font-size: 12px; font-variant-numeric: tabular-nums; pointer-events: none; }
#perf.show { display: block; }

/* relatório de diagnóstico (F4) */
.diag-box { width: min(1000px, calc(100% - 32px)); }
.diag-box textarea {
    width: 100%; height: min(60vh, 520px); margin-bottom: 14px; padding: 10px; resize: vertical;
    font: 12px/1.4 Consolas, "Courier New", monospace; color: #e8e2d2; background: #1a1c27; border: 2px solid #1a1c27; border-radius: 6px; white-space: pre; overflow: auto;
}

/* ---------- PC x toque ---------- */
#menu { display: contents; }            /* no PC os botões do menu ficam direto na barra */
#btn-menu, #touchbar, .only-touch, #rotate, #place-hint { display: none; }
.touch .only-touch { display: revert; }
.touch li.only-touch { display: list-item; }
.touch .only-mouse { display: none; }
.center-note.small { font-size: 14px; top: auto; bottom: 120px; transform: translateX(-50%); pointer-events: none; }
#place-hint.show { display: block; }

/* botões de toque à direita */
.touch #touchbar {
    position: fixed; right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 6px;
}
#touchbar button { min-width: 84px; min-height: 40px; font-size: 14px; background: rgba(59, 66, 89, .95); }
#touchbar button.on { background: #b8473c; border-color: #1a1c27; }
#touchbar button:disabled { opacity: .45; }

/* aviso para girar o celular (só em tela em pé de aparelho de toque) */
#rotate { position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center; text-align: center; background: #2b2f3f; padding: 24px; }
#rotate p { font-size: 18px; font-weight: 600; margin: 8px 0 18px; }
#rotate .rotate-icon { font-size: 64px; color: #ffd86b; line-height: 1; }
#rotate button { padding: 10px 18px; font-size: 15px; }
@media (orientation: portrait) and (pointer: coarse) {
    #rotate:not(.dismissed) { display: flex; }
}

/* ---------- celular / tela baixa ---------- */
@media (max-height: 560px), (max-width: 760px) {
    body { font-size: 13px; }
    #topbar { height: 38px; gap: 6px; padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)); }
    #topbar .res { min-width: 0; gap: 3px; font-size: 14px; }
    #topbar .res img { width: 24px; height: 24px; }
    #huts, #clock, #dif { display: none; }
    #topbar .tag { padding: 2px 7px; font-size: 12px; }
    #btn-menu { display: inline-block; font-size: 18px; padding: 2px 12px; }
    #menu { display: none; }
    #menu.open {
        display: flex; flex-direction: column; gap: 6px; position: fixed; top: 44px; right: max(8px, env(safe-area-inset-right));
        padding: 8px; background: rgba(33, 36, 50, .97); border: 3px solid #1a1c27; border-radius: 8px; z-index: 30;
    }
    #menu.open button, #menu.open .btn { min-height: 40px; text-align: left; padding: 6px 14px; }
    #msgs { top: 44px; }
    .msg { padding: 3px 10px; font-size: 12px; }

    #bottom { left: max(6px, env(safe-area-inset-left)); bottom: max(6px, env(safe-area-inset-bottom)); gap: 6px; }
    #minimap { width: 128px; height: 96px; border-width: 2px; }
    #panel { min-height: 72px; padding: 6px 8px; gap: 8px; border-width: 2px; }
    #panel .info { min-width: 104px; max-width: 160px; }
    #panel .title { font-size: 14px; }
    #panel .sub, #panel .hint { font-size: 11.5px; line-height: 1.35; }
    #panel .acts { gap: 4px; }
    .act { width: 64px; padding: 3px 2px 4px; }
    .act img { width: 34px; height: 34px; }
    .act .name { font-size: 10.5px; }
    .act .key { display: none; }
    .act .costs { font-size: 10.5px; gap: 3px; flex-wrap: wrap; justify-content: center; }
    .cost img { width: 12px; height: 12px; }
    .q img { width: 24px; height: 24px; }

    .modal-box { max-height: 90vh; overflow: auto; padding: 14px 16px; }
    .modal-box h2 { font-size: 20px; margin-bottom: 8px; }
    .modal-box ul { line-height: 1.45; font-size: 13px; }
    #perf { top: 44px; font-size: 10.5px; }
    .center-note.small { bottom: 110px; font-size: 12px; }
}

/* ordem das camadas: barra (e o menu ☰) acima dos botões de toque; janelas acima de tudo */
#topbar { z-index: 20; }
#touchbar { z-index: 10; }
.modal { z-index: 40; }
#loading { z-index: 60; }

/* fim de partida: pontos e posição no ranking (ver conta.js) */
#over-rank { margin: -4px 0 16px; color: #ffd86b; }
#over-rank:empty { display: none; }
#over-rank a { color: #8fd0ff; font-weight: 700; }
#over-rank .novo-recorde { color: #7fe07f; }

/* monstro neutro no painel */
#panel .enemy.neutro { background: #f0a030; }

/* partida de torneio */
.tag.torneio { background: #6b4f12; color: #ffe08a; }
@media (max-width: 900px) { .tag.torneio { display: none; } }