/* The hunt's view modes (huntmodes.js): the HUD buttons, Imersivo, Economia and the Pocket window. */

.hm-buttons { display: flex; gap: 4px; }
.hm-btn { min-width: 34px; padding-inline: 8px; font-size: 0.95rem; line-height: 1; }
.hm-btn.on { background: var(--accent); color: #1a1205; border-color: var(--accent); }

/* Imersivo: the scene alone on the screen */
body.hunt-immersive { grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "content"; }
body.hunt-immersive #topbar,
body.hunt-immersive #sidebar,
body.hunt-immersive .hunt-side,
body.hunt-immersive .win-layer { display: none !important; }
body.hunt-immersive #panel-battle { padding: 0; }
body.hunt-immersive .hunt { grid-template-columns: 1fr; gap: 0; height: calc(100vh / var(--ui-zoom, 1)); }
body.hunt-immersive .hunt-stage { border: 0; border-radius: 0; }

/* Economia: the numbers instead of the scene */
.hm-eco {
  position: absolute; inset: 0; z-index: 5; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px; padding: 64px 20px 20px;
  background: radial-gradient(ellipse at top, #16243f, #070c16);
}
.hm-eco[hidden] { display: none; }
.hm-eco-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hm-eco-head > b { font-family: var(--pixel); font-size: 1.1rem; color: var(--accent); letter-spacing: 1px; }
.hm-eco-zone { flex: 1; color: var(--muted); }

/* the counters (Economia and Pocket) */
.hm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.hm-tile { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: #0b1424; border: 1px solid #ffffff12; }
.hm-tile span { font-size: 0.72rem; color: var(--muted); }
.hm-tile b { font-family: var(--pixel); font-size: 1.05rem; color: #ff9ad5; }
.hm-bars { display: grid; gap: 8px; }
.hm-bar { display: grid; gap: 3px; }
.hm-bar-head { display: flex; justify-content: space-between; font-size: 0.8rem; }
.hm-bar-text { font-family: var(--pixel); color: #ff9ad5; }
.hm-bar-track { height: 8px; border-radius: 4px; background: #0b1424; overflow: hidden; }
.hm-bar-track i { display: block; height: 100%; background: linear-gradient(90deg, #3a8cff, #7fd8ff); }

/* Pocket */
.hm-pocket-body { margin: 0; background: var(--bg); overflow-y: auto; }
.hm-pocket { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--bg-2); color: var(--text); font-family: Inter, system-ui, sans-serif; }
.hm-pocket-head { display: flex; align-items: center; justify-content: space-between; }
.hm-pocket-head b { font-family: var(--pixel); color: var(--accent); letter-spacing: 1px; }
.hm-pocket-close { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; }
.hm-pocket-close:hover { color: #fff; }
.hm-pocket-canvas { width: 100%; height: auto; aspect-ratio: 360 / 220; border-radius: 8px; background: #000; image-rendering: pixelated; }
.hm-pocket .hm-tiles { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hm-pocket .hm-tile { padding: 6px 8px; }
.hm-pocket .hm-tile b { font-size: 0.9rem; }
/* without Picture-in-Picture: a floating window in the page */
.hm-pocket-float {
  position: fixed; z-index: 65; right: 16px; bottom: 16px; width: 360px; max-height: calc(calc(100vh / var(--ui-zoom, 1)) - 32px); overflow-y: auto;
  border: 2px solid #2b3f66; border-radius: 14px; box-shadow: 0 20px 50px #000d;
}
@media (max-width: 720px) {
  .hm-btn { min-width: 30px; padding-inline: 6px; }
  .hm-pocket-float { left: 8px; right: 8px; width: auto; bottom: 72px; }
}