/* Jang v16 — HQ experience layer (presentation only: no game logic, no API). */
:root { --hq-gold: #e8c98a; --hq-amber: #ff9d3c; }

/* ---------- ambient depth over the base map ---------- */
#hq-ambient {
  position: absolute; inset: 0 0 auto; width: 100%;
  height: var(--jw-map-height, 420px);
  pointer-events: none; z-index: 1; opacity: .95; mix-blend-mode: screen;
}
.hq-frame {
  position: absolute; inset: 0 0 auto; height: var(--jw-map-height, 420px);
  pointer-events: none; z-index: 3; overflow: hidden; border-radius: 10px;
}
.hq-frame::before, .hq-frame::after {
  content: ''; position: absolute; width: 26px; height: 26px;
  border: 2px solid #e2c68c59; pointer-events: none;
}
.hq-frame::before { top: 8px; right: 8px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.hq-frame::after { bottom: 8px; left: 8px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.hq-scan {
  position: absolute; left: 0; right: 0; top: -140px; height: 120px;
  background: linear-gradient(180deg, transparent, #bfe6ff0a 42%, #d9f2ff17 62%, transparent);
  animation: hq-scan 9.5s linear infinite;
}
@keyframes hq-scan {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: .85; }
  90% { opacity: .85; }
  100% { transform: translateY(calc(var(--jw-map-height, 420px) + 170px)); opacity: 0; }
}

/* ---------- icon medallions on the entry points ---------- */
.action-grid .action-card .hq-hot {
  position: relative; display: inline-grid; place-items: center;
  width: 36px; height: 36px; flex: 0 0 auto; order: -1; margin-inline-end: 10px;
  border-radius: 50%; color: var(--hq-gold);
  background: radial-gradient(circle at 34% 26%, #3d3524, #101c22 72%);
  border: 1px solid #d9bd8055;
  box-shadow: inset 0 0 10px #0009, 0 2px 8px #0007;
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.action-grid .action-card .hq-hot svg { position: relative; z-index: 1; display: block; }
.action-grid .action-card .hq-hot-ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid #e6cf9a4d; opacity: 0;
  animation: hq-sonar 3.4s ease-out infinite;
}
@keyframes hq-sonar {
  0% { transform: scale(.7); opacity: .85; }
  70% { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* map mode: the medallion becomes the base marker */
.app-shell .action-grid.jw-map .action-card:not([data-world-slot=extra]) .hq-hot {
  position: absolute !important; order: 0; margin: 0;
  left: 50%; bottom: calc(100% + 13px); transform: translateX(-50%);
  width: 46px; height: 46px; color: #f7e3b4; border-color: #e2c68c99;
  background: radial-gradient(circle at 34% 26%, #4a4028, #0e1a20 74%);
  box-shadow: 0 0 0 4px #d6b57b1f, 0 0 20px #e0bd7959, inset 0 0 12px #000a;
  z-index: 4;
}
.app-shell .action-grid.jw-map .action-card:not([data-world-slot=extra]) .hq-hot::before {
  content: ''; position: absolute; top: 100%; left: 50%; width: 1px; height: 13px;
  background: linear-gradient(#e6d69a99, transparent);
}
/* the v12 pin retires — the medallion carries the marker now */
.app-shell .action-grid.jw-map .action-card:not([data-world-slot=extra])::before,
.app-shell .action-grid.jw-map .action-card:not([data-world-slot=extra])::after { content: none !important; }
.app-shell .action-grid.jw-map .action-card:not([data-world-slot=extra]):hover .hq-hot,
.app-shell .action-grid.jw-map .action-card:not([data-world-slot=extra]):focus-visible .hq-hot {
  color: #fff3d2;
  box-shadow: 0 0 0 6px #d6b57b2e, 0 0 26px #ffb85e8c, inset 0 0 12px #000a;
  transform: translateX(-50%) scale(1.09);
}

/* ---------- tactile press feedback ---------- */
.action-grid .action-card.hq-press { filter: brightness(1.16); }
.app-shell .action-grid.jw-map .action-card:not([data-world-slot=extra]).hq-press {
  transform: translate(-50%, -50%) scale(.93) !important;
}
.hq-tap {
  position: fixed; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; pointer-events: none; z-index: 2147482000;
  border: 2px solid #ffd79a; box-shadow: 0 0 14px #ffb85e88;
  animation: hq-tap .55s ease-out forwards;
}
@keyframes hq-tap {
  0% { transform: scale(.4); opacity: .95; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ---------- cinematic deploy transition ---------- */
#hq-deploy { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
#hq-deploy .hq-deploy-scrim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, #0d1f29e6, #03070af2); }
#hq-deploy .hq-deploy-ring {
  position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  border: 2px solid #ffd79a; box-shadow: 0 0 40px #ffb85e77, inset 0 0 30px #ffb85e33;
}
#hq-deploy .hq-deploy-core {
  position: fixed; left: 50%; top: 50%; display: flex; flex-direction: column;
  align-items: center; gap: 9px; width: min(320px, 78vw); text-align: center; color: #f6e8c9;
}
#hq-deploy .hq-deploy-badge {
  display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%;
  color: #fff1cf; border: 1px solid #e8c98a;
  background: radial-gradient(circle at 34% 26%, #4d4229, #0c161c 74%);
  box-shadow: 0 0 0 6px #d6b57b22, 0 0 34px #ffb85e88, inset 0 0 18px #000a;
}
#hq-deploy b { font-size: 19px; letter-spacing: .2px; color: #fbeed0; }
#hq-deploy small { font-size: 11px; line-height: 1.8; color: #a9bcc4; }
#hq-deploy .hq-deploy-bar {
  position: relative; display: block; width: 170px; height: 3px; border-radius: 2px;
  background: #ffffff1a; overflow: hidden;
}
#hq-deploy .hq-deploy-bar i {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, #ffd79a, #ff9d3c, transparent);
  animation: hq-bar .8s ease-out forwards;
}
@keyframes hq-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ---------- bottom navigation + view switch ---------- */
.app-shell .bottom-nav button { position: relative; transition: transform .16s ease, color .16s ease; }
.app-shell .bottom-nav button.hq-press { transform: translateY(-3px) scale(.95); }
.app-shell .bottom-nav button.active::after {
  content: ''; position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #ffd79a, transparent);
  box-shadow: 0 0 10px #ffb85e99;
}
.app-shell .bottom-nav button.active svg { animation: hq-nav-bounce .5s ease; }
@keyframes hq-nav-bounce {
  0% { transform: translateY(0); }
  35% { transform: translateY(-4px) scale(1.08); }
  70% { transform: translateY(1px); }
  100% { transform: translateY(0); }
}
.app-shell .jw-toolbar.hq-hud { position: relative; padding: 12px 0 14px; }
.app-shell .jw-toolbar.hq-hud .jw-toolbar-title b { letter-spacing: .2px; text-shadow: 0 0 14px #ffb85e33; }
.app-shell .jw-toolbar.hq-hud .jw-view-switch {
  border-color: #c9ab7140;
  box-shadow: 0 0 0 1px #00000059, inset 0 0 18px #000000a6;
}
.app-shell .jw-toolbar.hq-hud .jw-view-switch button { transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.app-shell .jw-toolbar.hq-hud .jw-view-switch button[aria-pressed=true] {
  background: linear-gradient(180deg, #f0d69a, #c8a35f); color: #1a1509;
  box-shadow: 0 0 14px #ffb85e66;
}

@media (prefers-reduced-motion: reduce) {
  .hq-frame, .hq-scan { display: none; }
  .action-grid .action-card .hq-hot-ring { animation: none; opacity: 0; }
  #hq-deploy, .hq-tap { display: none; }
  .app-shell .bottom-nav button.active svg { animation: none; }
}