/* hud.css — v7.4 (passo 8): botão de interação contextual + HUD mobile enxuta. Carrega depois do windows.css. */

/* ---------- botão contextual (celular) ---------- */
#mobile-actions #btn-mobile-interact {
  flex-direction: column; gap: 2px; width: 72px; height: 72px; right: 8px; bottom: 100px;
  padding: 0; line-height: 1; border: 2px solid rgba(232, 255, 232, 0.55);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
#btn-mobile-interact .ctx-icon { font-size: 26px; line-height: 1; }
#btn-mobile-interact .ctx-label { font-size: 10px; font-weight: 800; letter-spacing: 0.05em; }
#btn-mobile-interact.ctx-active { animation: ctx-pulse 1.4s ease-in-out infinite; }
#btn-mobile-interact.ctx-idle { opacity: 0; transform: scale(0.7); pointer-events: none !important; }
@keyframes ctx-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(40, 160, 80, 0.35); }
  50%      { box-shadow: 0 4px 22px rgba(90, 240, 140, 0.85); }
}
@media (prefers-reduced-motion: reduce) { #btn-mobile-interact.ctx-active { animation: none; } }

/* ---------- desktop: dica flutuante "[E] AÇÃO" ---------- */
#ctx-hint {
  position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 29;
  display: none; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  background: rgba(14, 17, 24, 0.92); border: 1px solid rgba(198, 161, 91, 0.55);
  color: #f2e6c4; font: 700 14px/1 var(--font-ui, system-ui, sans-serif); pointer-events: none;
}
#ctx-hint.show { display: flex; }
#ctx-hint kbd {
  padding: 2px 7px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08); font: 700 12px/1.2 system-ui, sans-serif;
}
@media (pointer: coarse), (max-width: 720px) { #ctx-hint { display: none !important; } }

/* ---------- HUD mobile enxuta (guia V6 §9) ----------
 * Sempre visível: HP, mana, XP, joystick, ataque, skill (hotbar), ação contextual, Inventário/Menu/Chat.
 * Cartões passivos saem da tela; o conteúdo continua acessível pelo Menu (Missões, Mapa) e por avisos temporários. */
@media (pointer: coarse), (max-width: 720px) {
  #adventure-hud, #adventure-loop-hud, #daily-hud, #world-event-hud, #hunt-objective,
  #safezone-label, #killstreak, #time-of-day, #mp-badge, #mp-quest-hud {
    display: none !important;
  }
}

/* ---------- v7.5 (passo 9): notificações unificadas ---------- */
#notify-stack {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 90;
  top: max(96px, calc(env(safe-area-inset-top) + 96px));
  width: min(340px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}
.notify {
  --nc: 198, 161, 91;
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px;
  background: rgba(12, 15, 20, 0.95); border: 1px solid rgba(var(--nc), 0.65);
  border-left-width: 4px; color: #f6e7c1; font: 700 13px/1.3 var(--font-ui, system-ui, sans-serif);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4); pointer-events: auto; cursor: pointer;
  opacity: 0; transform: translateY(-8px); transition: opacity 0.18s ease, transform 0.18s ease;
}
.notify.in { opacity: 1; transform: none; }
.notify.out { opacity: 0; transform: translateY(-6px); }
.notify.bump { animation: notify-bump 0.22s ease; }
.notify-icon { font-size: 16px; flex: none; }
.notify-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.notify-count { flex: none; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: rgba(var(--nc), 0.3); }
.notify-success { --nc: 90, 200, 120; }
.notify-warning { --nc: 235, 180, 60; }
.notify-error   { --nc: 235, 80, 80; }
.notify-info    { --nc: 120, 170, 235; }
.notify-loot    { --nc: 198, 161, 91; }
.notify-combat  { --nc: 235, 110, 90; }
.notify-quest   { --nc: 170, 130, 235; }
@keyframes notify-bump { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .notify, .notify.bump { transition: none; animation: none; } }

/* ---------- v7.5: menu central em grade ---------- */
#game-menu-panel { width: min(360px, 92vw); }
#game-menu-panel .gm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
#game-menu-panel .gm-grid .gm-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  margin: 0; padding: 10px 4px; min-height: 76px; text-align: center;
}
#game-menu-panel .gm-ico { font-size: 26px; line-height: 1; }
#game-menu-panel .gm-lbl { font-size: 12px; font-weight: 700; line-height: 1.15; }
#game-menu-panel .gm-grid .gm-wide { grid-column: 1 / -1; flex-direction: row; min-height: 52px; }
#game-menu-panel .gm-foot { display: flex; flex-direction: column; gap: 6px; }
#game-menu-panel .gm-foot .gm-btn { display: flex; align-items: center; gap: 10px; margin: 0; min-height: 46px; padding: 8px 14px; }
#game-menu-panel .gm-foot .gm-ico { font-size: 18px; }
#game-menu-panel .gm-foot .gm-lbl { font-size: 14px; }
#game-menu-panel .gm-toggle[aria-pressed="true"] { border-color: rgba(90, 200, 120, 0.7); }
#game-menu-panel .gm-foot .gm-close { justify-content: center; }
@media (max-width: 720px), (pointer: coarse) {
  #game-menu-panel { width: 100%; max-width: none; max-height: 82vh; overflow-y: auto; }
}

/* V9: botão dourado antigo de interação (Banco/Loja/Domar) — substituído pelo botão contextual novo (#btn-mobile-interact / [E]) */
#interact-btn { display: none !important; }

#graphics-panel{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.58);padding:18px;}
#graphics-panel.open{display:flex;}
.graphics-card{width:min(430px,94vw);max-height:90vh;overflow:auto;background:linear-gradient(180deg,rgba(35,31,27,.98),rgba(18,17,16,.98));border:1px solid rgba(210,174,105,.55);border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.5);padding:16px;color:#eee;}
.graphics-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.graphics-head h2{margin:0;font-size:20px;font-family:Cinzel,serif;}
.graphics-head button{border:0;background:transparent;color:#ddd;font-size:20px;padding:6px 9px;}
.graphics-desc{font-size:13px;line-height:1.4;color:#b9b1a5;margin-bottom:12px;}
.graphics-options{display:grid;gap:8px;}
.graphics-options button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055);color:#fff;border-radius:10px;padding:12px 13px;min-height:58px;}
.graphics-options button.active{border-color:rgba(235,193,100,.9);background:rgba(145,105,42,.25);box-shadow:0 0 0 1px rgba(235,193,100,.2) inset;}
.graphics-options small{color:#aaa;font-size:11px;}
.graphics-status{margin-top:12px;font-size:11px;color:#9fc7a2;line-height:1.35;min-height:16px;}

/* v0.22 — Configurações + Devlog */
.settings-sec{margin:14px 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#d2ae69;}
.settings-sec:first-of-type{margin-top:4px;}
.settings-about{font-size:13px;color:#b9b1a5;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.settings-about b{color:#f1d9a0;}
.settings-about button{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;border-radius:8px;padding:8px 12px;font-size:12px;}
.graphics-options #set-vibrate.active{border-color:rgba(90,200,120,.7);background:rgba(60,140,80,.2);}
#devlog-panel{position:fixed;inset:0;z-index:121;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.58);padding:18px;}
#devlog-panel.open{display:flex;}
.devlog-card{display:flex;flex-direction:column;width:min(480px,94vw);max-height:86vh;}
#devlog-list{overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:10px;padding-right:2px;}
.dl-entry{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);border-radius:10px;padding:10px 12px;}
.dl-entry.dl-latest{border-color:rgba(235,193,100,.7);background:rgba(145,105,42,.16);}
.dl-entry header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.dl-ver{font-family:Cinzel,serif;font-weight:700;font-size:16px;color:#f1d9a0;}
.dl-pill{font-size:10px;font-weight:700;text-transform:uppercase;background:rgba(90,200,120,.25);color:#9fe0b0;border-radius:99px;padding:2px 7px;}
.dl-entry time{margin-left:auto;font-size:11px;color:#9a9285;}
.dl-entry h3{margin:6px 0 4px;font-size:14px;color:#eee;}
.dl-entry ul{margin:0;padding-left:18px;font-size:12.5px;line-height:1.45;color:#c9c1b4;}
.dl-entry li{margin:2px 0;}
.dl-entry li.dl-novo::marker{color:#7fd69a;} .dl-entry li.dl-correcao::marker{color:#e6a35a;}
.dl-entry li.dl-ajuste::marker{color:#7fb2e6;} .dl-entry li.dl-remocao::marker{color:#e67a7a;}