/* css/core-base.css — variáveis (:root), reset, HUD principal (barras HP/XP/ouro, boss, alvo), banco, overlay e restart.
 * v0.74: dividido de core.css SEM mudar a ordem das regras (a cascata depende dela). Ordem de carga: ver index.html. */
:root {
    /* Paleta estilo Eidolon: noite fria + ouro antigo */
    --hp-color: #c45a4a;
    --accent: #c6a15b;
    --accent-soft: #e8d5a8;
    --panel: rgba(12, 14, 20, 0.90);
    --panel-border: rgba(185, 155, 98, 0.42);
    --ink: #d4deea;
    --muted: #8a96a8;
    --safe: #6ee7c8;
    --danger: #e0523f;
    --bg-deep: #07090e;
    --bg-mid: #12151f;
    --font-ui: "Source Sans 3", system-ui, sans-serif;
    --font-display: "Cinzel", Georgia, serif;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body {
    margin: 0; padding: 0; overflow: hidden; height: 100%;
    background-color: var(--bg-deep);
    background-image:
      radial-gradient(circle at 50% 34%, rgba(80, 64, 103, 0.28) 0, rgba(25, 29, 43, 0.14) 28%, transparent 58%),
      radial-gradient(circle at 18% 78%, rgba(35, 80, 73, 0.16) 0, transparent 38%),
      linear-gradient(154deg, #15131f 0%, #090d15 46%, #05070b 100%);
    background-attachment: fixed;
    font-family: var(--font-ui);
    color: var(--ink);
    touch-action: none;
  }
  #canvas-wrap { position: fixed; inset: 0; }
  canvas { display: block; width: 100%; height: 100%; }

  /* ---- Painéis unificados (look Eidolon) ---- */
  .eid-panel, #adventure-card, #minimap-panel .minimap-card, #mp-chat, #daily-hud, #dungeon-hud {
    background: linear-gradient(165deg, rgba(18,20,28,0.94), rgba(10,12,16,0.96)) !important;
    border: 1px solid rgba(185,155,98,0.38) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.45) !important;
    color: var(--ink) !important;
  }
  #start-btn, .primary-cta {
    font-family: var(--font-display) !important;
    letter-spacing: 0.06em;
    background: linear-gradient(160deg, #e3c17e, #c6a15b) !important;
    color: #1a1208 !important;
    border: 1px solid #c6a15b !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(198,161,91,0.25);
  }
  #enemy-banner, .banner-toast {
    font-family: var(--font-display);
    letter-spacing: 0.04em;
  }
  #target-plate {
    background: linear-gradient(165deg, rgba(16,14,20,0.92), rgba(10,10,14,0.95)) !important;
    border-color: rgba(185,155,98,0.4) !important;
  }
  #target-name { color: var(--accent-soft) !important; font-family: var(--font-display); }


  /* HUD */
  #hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
  #hp-bar-wrap {
    position: absolute; top: 14px; left: 14px; width: 220px; height: 14px;
    background: rgba(7,9,14,0.82); border: 1px solid rgba(185,155,98,0.5); border-radius: 4px; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.55), 0 4px 14px rgba(0,0,0,0.35);
  }
  #hp-bar {
    height: 100%; width: 100%;
    background: linear-gradient(90deg, #6a1818, #d44a3a, #ff7a60);
    transition: width 0.15s ease;
  }
  #hp-label {
    position: absolute; top: 32px; left: 14px; color: var(--ink); font-size: 12px;
    letter-spacing: 0.03em; text-shadow: 0 1px 3px #000;
    font-family: var(--font-ui);
  }

  #status {
    position: absolute; top: 14px; right: 14px; color: var(--muted); font-size: 12px;
    text-align: right; line-height: 1.5; text-shadow: 0 1px 4px #000;
  }

  #score-wrap {
    position: absolute; top: 52px; right: 14px; color: #fff; font-size: 15px;
    text-align: right; font-weight: 700; letter-spacing: 0.03em;
  }
  #score-wrap .wave { color: #9aa4af; font-size: 11px; font-weight: 400; }
  #best-wrap {
        position: absolute; top: 92px; right: 14px; color: #e5b95c; font-size: 12px;
        text-align: right; font-weight: 600; letter-spacing: 0.02em; font-family: 'Courier New', monospace;
      }

      /* Barra de HP do BOSS (topo central) — visível só quando tem boss vivo */
      #boss-hp-wrap {
        position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
        width: 320px; max-width: 62vw; height: 15px;
        background: rgba(0,0,0,0.55); border: 1px solid rgba(255,90,60,0.6);
        border-radius: 6px; overflow: hidden; display: none;
        box-shadow: 0 0 14px rgba(255,60,50,0.35);
      }
      #boss-hp-wrap.show { display: block; }
      #boss-hp-label {
        position: absolute; top: 16px; left: 0; right: 0;
        color: #ff8a7a; font-size: 10px; font-weight: 700;
        letter-spacing: 0.1em; text-align: center; text-shadow: 0 1px 3px #000;
      }
      #boss-hp-bar {
        height: 100%; width: 100%;
        background: linear-gradient(90deg, #7a1a1a, #e0523f, #ff6f55);
        transition: width 0.15s ease;
      }

    /* Target do inimigo selecionado */
    #target-plate {
      position: absolute; top: max(40px, calc(env(safe-area-inset-top) + 36px)); left: 50%; transform: translateX(-50%);
      width: 260px; max-width: 72vw; display: none;
      background: rgba(8,10,14,0.82); border: 1px solid rgba(224,82,63,0.55);
      border-radius: 10px; padding: 8px 28px 9px 12px;
      pointer-events: auto; user-select: none; z-index: 28;
      box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    }
    #target-plate.show { display: block; }
    #target-clear {
      position: absolute; top: 2px; right: 2px; width: 40px; height: 40px;
      border: 1px solid rgba(255,255,255,0.15); border-radius: 10px;
      background: rgba(0,0,0,0.35);
      color: #ffd9c9; font-size: 22px; line-height: 1; cursor: pointer;
      pointer-events: auto; z-index: 29;
      display: flex; align-items: center; justify-content: center;
    }
    #target-name {
      color: #ffd9c9; font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
      margin-bottom: 5px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    #target-hp-wrap {
      height: 11px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.18);
      border-radius: 5px; overflow: hidden;
    }
    #target-hp-bar {
      height: 100%; width: 100%;
      background: linear-gradient(90deg, #7a1a1a, #e0523f, #ff6f55);
      transition: width 0.12s ease;
    }
    #target-plate .tgt-tag {
      position: absolute; top: -7px; left: 8px; font-size: 9px; font-weight: 800;
      color: #ffb347; background: rgba(8,10,14,0.9); border: 1px solid rgba(255,179,71,0.5);
      border-radius: 4px; padding: 1px 5px; letter-spacing: 0.06em;
    }
    #target-intent {
      text-align: center; font-size: 10px; font-weight: 700; margin-top: 4px;
      color: #9aa4af; letter-spacing: 0.03em;
    }
    #target-intent.in-range { color: #6ee7c8; }
    #target-intent.out-range { color: #ffb347; }
    /* Eidolon-style: Attack grande + feedback de alcance */
    #btn-mobile-attack.has-target {
      box-shadow: 0 0 0 3px rgba(255,120,80,0.55), 0 6px 18px rgba(200,40,20,0.45);
      transform: scale(1.05);
    }
    #btn-mobile-attack.in-range {
      box-shadow: 0 0 0 3px rgba(110,231,200,0.7), 0 8px 22px rgba(40,180,120,0.4) !important;
      border-color: #6ee7c8 !important;
      filter: brightness(1.12);
    }
    #btn-mobile-attack:active {
      transform: scale(0.94);
      filter: brightness(1.25);
    }
    #btn-mobile-attack {
      width: 88px !important; height: 88px !important;
      font-size: 15px !important;
      border-width: 2.5px !important;
    }

    /* Killstreak flair */
    #killstreak {
      position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%);
      color: #fff; font-size: 26px; font-weight: 800; letter-spacing: 0.06em;
      text-shadow: 0 2px 10px rgba(0,0,0,0.6); opacity: 0;
      transition: transform 0.09s ease, opacity 0.25s ease;
      pointer-events: none; user-select: none; white-space: nowrap;
    }

  /* Barra de XP + nível */
  #xp-wrap {
    position: absolute; top: 54px; left: 14px; width: 200px; height: 10px;
    background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; overflow: hidden;
  }
  #xp-bar { height: 100%; width: 0%; background: #7ec8e3; transition: width 0.2s ease; }
  #xp-label { position: absolute; top: 66px; left: 14px; color: #9aa4af; font-size: 10px; }

  /* Ouro */
  #gold-wrap {
    position: absolute; top: 14px; left: 14px; margin-left: 210px; color: #ffd166;
    font-size: 14px; font-weight: 700;
  }

  /* Coordenadas — perto do minimapa */
  /* Info compacta: hora + coords numa linha, canto superior direito ABAIXO dos botões */
  #map-coords, #time-of-day {
    position: absolute; z-index: 22; pointer-events: none;
    background: rgba(0,0,0,0.5); padding: 3px 7px; border-radius: 5px;
    font: 10px/1.2 system-ui, sans-serif; border: 1px solid rgba(255,255,255,0.1);
  }
  #time-of-day {
    top: max(50px, calc(env(safe-area-inset-top) + 44px));
    right: max(8px, env(safe-area-inset-right));
    color: #f0e6d0; font-weight: 600;
  }
  #map-coords {
    top: max(72px, calc(env(safe-area-inset-top) + 66px));
    right: max(8px, env(safe-area-inset-right));
    color: #9ee6c8; font-family: ui-monospace, monospace;
  }
  #mp-badge {
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    left: 50% !important; right: auto !important; bottom: auto !important;
    transform: translateX(-50%) !important;
    z-index: 23 !important;
    font-size: 9px !important; padding: 3px 8px !important;
    max-width: 36vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0.85;
  }

  /* Chat: só a barra fina embaixo — z alto e pointer-events para não ficar bloqueado pelo HUD/joystick */
  #mp-chat {
    position: fixed; left: 8px; right: 8px; bottom: max(4px, env(safe-area-inset-bottom));
    z-index: 45; pointer-events: auto !important;
  }
  #mp-chat-toggle {
    width: 100%; text-align: left; padding: 10px 14px;
    background: rgba(12,16,22,0.92); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px; color: #c8d0da; font-size: 13px; font-weight: 600;
    cursor: pointer; pointer-events: auto !important;
    touch-action: manipulation;
  }
  #mp-chat-panel, #mp-chat-form, #mp-chat-input, #mp-chat-send {
    pointer-events: auto !important;
    touch-action: manipulation;
  }
  #mp-chat-panel {
    display: none; flex-direction: column; gap: 6px;
    margin-bottom: 6px; max-height: 180px;
    background: rgba(10,14,20,0.94); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px; padding: 8px;
  }
  #mp-chat.open #mp-chat-panel { display: flex; }
  #mp-chat-log {
    overflow-y: auto; max-height: 120px; padding: 4px;
    font: 12px/1.35 system-ui, sans-serif; color: #e8eef5;
  }
  #mp-chat-log div { margin-bottom: 4px; word-break: break-word; }
  #mp-chat-log .n { color: #c6a15b; font-weight: 700; }
  #mp-chat-form { display: flex; gap: 6px; }
  #mp-chat-input {
    flex: 1; min-width: 0; padding: 10px 12px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.55);
    color: #fff; font-size: 15px;
  }
  #mp-chat-send {
    padding: 10px 14px; border: none; border-radius: 8px;
    background: #c6a15b; color: #1a1208; font-weight: 700;
  }
  #mp-chat-toggle.has-unread { border-color: #6ee7c8; color: #6ee7c8; }

  /* Banco da vila — precisa pointer-events:auto porque fica dentro de #hud (pointer-events:none) */
  #bank-panel {
    display: none; position: fixed; left: 50%; top: 50%;
    transform: translate(-50%, -50%); z-index: 55;
    width: min(340px, 94vw); max-height: 70vh; overflow-y: auto;
    background: rgba(12,14,18,0.96); border: 1px solid rgba(198,161,91,0.5);
    border-radius: 12px; padding: 12px; color: #ddd;
    font: 12px/1.35 system-ui, sans-serif;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55);
    pointer-events: auto;
  }
  #bank-panel.open { display: block; }
  #bank-panel button, #bank-panel .bank-item, #bank-panel .bank-btn {
    pointer-events: auto;
    touch-action: manipulation;
    cursor: pointer;
  }
  .bank-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  .bank-head h3 { margin: 0; font-size: 14px; color: #e8d5a8; }
  #bank-close {
    width: 28px; height: 28px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2); background: transparent; color: #ccc; cursor: pointer;
  }
  .bank-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .bank-col {
    background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 8px;
  }
  .bank-label { font-size: 11px; color: #c6a15b; font-weight: 700; margin-bottom: 6px; }
  .bank-items { min-height: 80px; max-height: 160px; overflow-y: auto; margin-bottom: 6px; }
  .bank-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 2px; border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 11px; cursor: pointer;
  }
  .bank-item:active { background: rgba(198,161,91,0.15); }
  .bank-btn {
    width: 100%; padding: 8px; border-radius: 8px; border: 1px solid rgba(198,161,91,0.4);
    background: rgba(198,161,91,0.15); color: #e8d5a8; font-weight: 700; font-size: 11px; cursor: pointer;
  }
  .bank-hint { margin-top: 8px; font-size: 10px; color: #6a7380; }

  /* Overlay fim de jogo */
  #overlay {
    position: fixed; inset: 0; z-index: 20; display: none;
    align-items: center; justify-content: center; flex-direction: column;
    background: rgba(8, 10, 14, 0.78); backdrop-filter: blur(4px);
    color: #fff; text-align: center; gap: 10px; padding: 24px;
  }
  #overlay.show { display: flex; }
  #overlay h1 { font-size: 42px; margin: 0; letter-spacing: 0.05em; }
  #overlay h1.win { color: #6ee7c8; }
  #overlay h1.lose { color: #e0523f; }
  #overlay .sub { color: #9aa4af; font-size: 14px; }
  #restart-btn {
    margin-top: 14px; padding: 14px 32px; font-size: 16px; font-weight: 700;
    color: #0d1117; background: #6ee7c8; border: none; border-radius: 8px;
    cursor: pointer; letter-spacing: 0.03em; pointer-events: auto;
  }
  #restart-btn:active { transform: scale(0.96); }