/* Next goal bar (client/nextgoal.js): one line above the Heroes / World buttons, under the side rails. */
#ngoal { position: absolute; left: 8px; right: 8px; bottom: 94px; z-index: 6; max-width: 420px; margin: 0 auto; height: 40px; padding: 0 6px 0 4px;
  display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 6px; border: 0; border-radius: 10px; text-align: left; color: #fff;
  background: linear-gradient(rgba(42, 30, 16, .94), rgba(24, 17, 9, .94)); box-shadow: 0 0 0 2px #8a6a3a, 0 4px 10px rgba(0, 0, 0, .5); font-family: system-ui; }
#ngoal.hidden { display: none; }
#ngoal.hot { box-shadow: 0 0 0 2px var(--c-amber), 0 0 12px rgba(255, 200, 80, .45), 0 4px 10px rgba(0, 0, 0, .5); }
#ngoal.pop { animation: ngPop .35s ease-out; }
@keyframes ngPop { 0% { transform: scale(.92); opacity: .4; } 100% { transform: none; opacity: 1; } }
#ngoal:active { transform: scale(.98); }
.ng-ic { width: 32px; height: 32px; display: grid; place-items: center; font-size: 20px; border-radius: 8px; background: radial-gradient(circle at 50% 35%, #6b5130, #33240f); }
.ng-tx { display: grid; min-width: 0; gap: 1px; }
.ng-tx small { font: 700 10px/1 system-ui; color: var(--c-amber-hi); text-transform: uppercase; letter-spacing: .04em; }
.ng-tx b { font: 800 13px/1.15 system-ui; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 #000; }
.ng-bar { display: block; height: 4px; border-radius: 2px; background: #1a1206; overflow: hidden; }
.ng-bar i { display: block; height: 100%; background: linear-gradient(90deg, #e0a52a, #ffd76a); }
.ng-n { font: 800 11px/1 system-ui; font-style: normal; color: #f3e6cf; white-space: nowrap; }
.ng-tag { padding: 6px 9px; border-radius: 8px; font: 900 12px/1 system-ui; white-space: nowrap; color: var(--c-amber-ink); background: linear-gradient(var(--c-amber-pale), var(--c-amber)); box-shadow: 0 2px 0 var(--c-amber-deep); }
#ngoal.hot .ng-tag { animation: ngTag 1.3s ease-in-out infinite; }
@keyframes ngTag { 50% { filter: brightness(1.15) drop-shadow(0 0 5px rgba(255, 215, 106, .8)); } }
html.land #ngoal { bottom: 78px; height: 36px; }

/* a HUD icon that just unlocked (client/app.js HUD_GATE) glows until it is tapped */
.hud-ic.hud-new .emo { animation: hudNew 1.4s ease-in-out infinite; }
@keyframes hudNew { 0%, 100% { box-shadow: 0 0 0 2px #fff1c4, 0 0 6px 2px rgba(255, 215, 106, .5); } 50% { box-shadow: 0 0 0 3px #fff1c4, 0 0 16px 6px rgba(255, 215, 106, .9); } }
.hud-ic.hud-new::after { content: "NEW"; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); padding: 1px 4px; border-radius: 4px; background: #e33; color: #fff; font: 900 9px/1.2 system-ui; }