/* Hand-picked pixel sprites for the bottom navigation; 32px cells, eight columns. */
.hud-status { --hud-x: 0px; --hud-y: 0px; }
.hud-bag { --hud-x: -32px; --hud-y: 0px; }
.hud-skills { --hud-x: -64px; --hud-y: 0px; }
.hud-map { --hud-x: -96px; --hud-y: 0px; }
.hud-town { --hud-x: -128px; --hud-y: 0px; }
.hud-diamond { --hud-x: -160px; --hud-y: 0px; }
.hud-invite { --hud-x: -192px; --hud-y: 0px; }
.hud-shop { --hud-x: -224px; --hud-y: 0px; }
.hud-refine { --hud-x: 0px; --hud-y: -32px; }
.hud-fuse { --hud-x: -32px; --hud-y: -32px; }
.hud-market { --hud-x: -64px; --hud-y: -32px; }
.hud-hunt { --hud-x: -96px; --hud-y: -32px; }
.hud-rank { --hud-x: -128px; --hud-y: -32px; }
.hud-codex { --hud-x: -160px; --hud-y: -32px; }
.hud-clan { --hud-x: -192px; --hud-y: -32px; }
.hud-relic { --hud-x: -224px; --hud-y: -32px; }
.hud-arena { --hud-x: 0px; --hud-y: -64px; }
.hud-trade { --hud-x: -32px; --hud-y: -64px; }
.hud-friends { --hud-x: -64px; --hud-y: -64px; }
.hud-dungeon { --hud-x: -96px; --hud-y: -64px; }
.hud-daily { --hud-x: -128px; --hud-y: -64px; }
.hud-storage { --hud-x: -160px; --hud-y: -64px; }
.hud-news { --hud-x: -192px; --hud-y: -64px; }
.hud-potions { --hud-x: -224px; --hud-y: -64px; }
.hud-settings { --hud-x: 0px; --hud-y: -96px; }
.hud-admin { --hud-x: -32px; --hud-y: -96px; }
.hud-sit { --hud-x: -64px; --hud-y: -96px; }
.hud-pip { --hud-x: -96px; --hud-y: -96px; }
.hud-wiki { --hud-x: -128px; --hud-y: -96px; }
.hud-fullscreen { --hud-x: -160px; --hud-y: -96px; }
.hud-discord { --hud-x: -192px; --hud-y: -96px; }
.hud-more { --hud-x: -224px; --hud-y: -96px; }
#bottombar { gap: 4px; padding: 5px; border-radius: 6px; max-width: calc((100vw - 16px) / var(--ui-zoom, 1)); }
#bottombar button, #bottombar button#btn-town {
  min-height: 54px; padding: 3px 7px 4px; gap: 2px; border-radius: 5px;
  border: 1px solid #504153; background: linear-gradient(#29303e, #1b202d);
  box-shadow: inset 0 1px #ffffff10, inset 0 -2px #111522;
  color: #eadfcf; filter: none;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
#bottombar .hud-icon {
  display: block; flex: none; width: 32px; height: 32px; pointer-events: none;
  background: var(--sheet-hud, url('/sprites/hud/icons-v1.png')) var(--hud-x) var(--hud-y) / 256px 128px no-repeat;   /* 30/10: url com ?v= do manifesto, definida em assets.ts (loadManifest); a sem versão é só a reserva (nota da Agulha) */
  image-rendering: pixelated;
}
#bottombar .hud-label { display: block; max-width: 100%; font-size: inherit; line-height: 12px; white-space: nowrap; }
#bottombar button:hover, #bottombar button.on, #bottombar button.sit-on,
#bottombar button#btn-town:hover, #bottombar button#btn-town.on {
  filter: none; background: linear-gradient(#424351, #2a2c3b); border-color: #dcb978;
  color: #fff0d1; box-shadow: inset 0 1px #ffe7a72b, inset 0 -2px #151825;
}
#bottombar button:active { box-shadow: inset 0 2px 0 #10131f; }
#bottombar button:focus-visible { outline: 2px solid #fff0be; outline-offset: 2px; z-index: 1; }
#bottombar button[hidden], #bottombar.more button[hidden] { display: none; }

/* The gem shop keeps the strongest contrast, including while VIP is active. */
#bottombar button#btn-diamond, #bottombar button#btn-diamond.vip-on {
  isolation: isolate; overflow: hidden; border-color: #f9d584;
  background: linear-gradient(150deg, #167785, #274365 55%, #57385e);
  color: #fff2c7; box-shadow: inset 0 1px #fff2be99, inset 0 -2px #16243f, 0 0 9px #66e7e74a;
}
#bottombar button#btn-diamond:hover, #bottombar button#btn-diamond.on {
  filter: none; border-color: #fff4bf; background: linear-gradient(150deg, #258c93, #36567c 55%, #71486f);
  color: #fffbe9; box-shadow: inset 0 1px #fff2be, inset 0 -2px #16243f, 0 0 12px #8df9ed77;
}
#btn-diamond .hud-icon { animation: hud-gem-float 4s steps(4, end) infinite; }
#btn-diamond::before {
  content: ''; position: absolute; pointer-events: none; z-index: -1; inset: 0;
  background: linear-gradient(115deg, transparent 35%, #cefffc42 49%, transparent 63%);
  background-size: 300% 100%; animation: hud-gem-shine 6s ease-in-out infinite;
}
@keyframes hud-gem-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes hud-gem-shine { 0%, 65% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) {
  /* Phone navigation keeps its touch sizes while the window/text zoom grows. */
  #bottombar { zoom: 1; width: 100vw; max-width: none; gap: 3px; padding: 4px 4px calc(4px + var(--sab, 0px)); border-radius: 6px 6px 0 0; }
  #bottombar button, #bottombar button#btn-town { min-height: 50px; padding: 2px 1px; gap: 1px; }
  #bottombar .hud-label { font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
  #bottombar #btn-diamond .hud-label { font-size: 9px; letter-spacing: -.25px; }
  #bottombar.more { max-height: calc(100vh - 16px - var(--sat, 0px)); max-height: calc(100dvh - 16px - var(--sat, 0px)); overflow-y: auto; overscroll-behavior: contain; }
  #bottombar.more button, #bottombar.more button#btn-town { min-height: 54px; }
  #bottombar.more #btn-more { position: sticky; bottom: 0; min-height: 44px; background: #292c3d; border-color: #dcb978; }
  #bottombar.more #btn-more .hud-label { font-size: 11px; }
}
@media (max-width: 360px) {
  /* Keep a full-size touch target on small phones; Vila remains in Mais. */
  #bottombar:not(.more) #btn-town { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #btn-diamond .hud-icon, #btn-diamond::before { animation: none; }
  #bottombar button { transition: none; }
}

/* VIP ativo: o botão da loja fica dourado (o jogador vê que o VIP está valendo). Depois da regra geral acima para vencer. */
#bottombar button#btn-diamond.vip-on {
  border-color: #ffd86a; color: #fff6d2;
  box-shadow: inset 0 1px #fff2be99, inset 0 -2px #16243f, 0 0 12px #ffd86a99, 0 0 0 1px #c8a24e;
}

/* HUD resource meters: layered pixel shimmer and event-driven value feedback. */
#basic-info .hud-meter {
  isolation: isolate;
  --meter-glint: #eaffcb;
  --meter-trail: #f2c47a;
  --meter-flash: #dcffc4;
  --meter-cycle: 4.6s;
  --meter-delay: -.9s;
}
#basic-info .hud-meter.sp { --meter-glint: #d8f7ff; --meter-trail: #b1cfff; --meter-flash: #bef3ff; --meter-cycle: 5.2s; --meter-delay: -2.8s; }
#basic-info .hud-meter.exp { --meter-glint: #fff5c2; --meter-flash: #ffe69b; --meter-cycle: 5.8s; --meter-delay: -1.8s; }
#basic-info .hud-meter.jexp { --meter-glint: #d2fff2; --meter-flash: #a9ffe8; --meter-cycle: 6.4s; --meter-delay: -4.1s; }
#basic-info .hud-meter > .fill { z-index: 1; overflow: hidden; transition: none; }
#basic-info .hud-meter > .fill::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 34%, var(--meter-glint) 34% 37%, transparent 37% 41%, var(--meter-glint) 41% 48%, transparent 48%);
  opacity: .28;
  animation: hud-meter-shine var(--meter-cycle) steps(40, end) var(--meter-delay) infinite;
}
#basic-info .hud-meter > .meter-trail { position: absolute; top: 0; left: 0; height: 100%; width: 0; opacity: 0; background: var(--meter-trail); pointer-events: none; }
#basic-info .hud-meter > .meter-feedback { position: absolute; inset: 0; z-index: 2; opacity: 0; background: var(--meter-flash); pointer-events: none; }
#basic-info .hud-meter[data-meter-event="loss"] > .meter-feedback { background: #ffc9b7; }
#basic-info .hud-meter.sp[data-meter-event="loss"] > .meter-feedback { background: #dae2ff; }
#basic-info .hud-meter > span { z-index: 4; }
#basic-info .hud-meter.meter-danger::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 1px #ffe0aa, inset 0 0 5px #f56a37;
  animation: hud-meter-danger 1.8s ease-in-out infinite;
}
#basic-info .hud-meter.meter-empty > .fill::after { display: none; }
@keyframes hud-meter-shine { 0% { transform: translateX(-105%); } 60%, 100% { transform: translateX(110%); } }
@keyframes hud-meter-danger { 0%, 100% { opacity: .12; } 50% { opacity: .8; } }
#basic-info .hud-meter.meter-motion-off::after,
#basic-info .hud-meter.meter-motion-off > .fill::after { animation: none; opacity: 0; }
#basic-info .hud-meter.meter-motion-off > .meter-feedback { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  #basic-info .hud-meter::after, #basic-info .hud-meter > .fill::after { animation: none; opacity: 0; }
  #basic-info .hud-meter > .meter-feedback { opacity: 0 !important; }
}

/* Keep the resource panel on-screen when a phone uses large UI text. */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) {
  #basic-info { max-width: calc(100vw / var(--ui-zoom, 1) - 12px); }
}