/* gloop.live extras (bob2): minimap (js/minimap.js) + achievements (js/achievements.js).
   Two small round buttons sit left of the keyboard "?" button (top-right of
   .field): [map] [trophy] [?]. The minimap hangs under them; the trophy panel
   drops down over it. Sizes follow gloop.css .gk-hint (1.7rem) and
   mobile.css touch targets (44px). */
.field .xb-btn {
  position: absolute;
  top: 0.7rem;
  z-index: 3;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--mute, #8f97a3);
  background: var(--glass, rgba(12, 16, 22, 0.62));
  border: 1px solid var(--line, rgba(236, 230, 218, 0.1));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.field .xb-btn svg { width: 0.95rem; height: 0.95rem; display: block; }
.field .xb-btn:hover, .field .xb-btn:focus-visible, .field .xb-btn.is-on { opacity: 1; color: var(--glow, #b9f5b4); border-color: rgba(185, 245, 180, 0.5); }
.field .xb-btn:focus-visible { outline: 2px solid var(--glow, #b9f5b4); outline-offset: 2px; }
.field .ach-toggle { right: calc(0.8rem + 1.7rem + 0.45rem); }
.field .mm-toggle { right: calc(0.8rem + 2 * (1.7rem + 0.45rem)); }
.ach-badge:empty { display: none; }
.ach-badge {
  position: absolute; top: -0.3rem; right: -0.35rem;
  min-width: 0.95rem; height: 0.95rem; padding: 0 0.2rem; border-radius: 999px;
  font: 600 0.55rem/0.95rem var(--mono, monospace); text-align: center;
  color: #10160f; background: #e8c65a;
}

/* ---- minimap ---- */
.mm-wrap {
  position: absolute;
  top: calc(0.7rem + 1.7rem + 0.5rem);
  right: 0.8rem;
  z-index: 2;
  width: 10.5rem;
  height: 10.5rem;
  border-radius: 50%;
  background: rgba(12, 16, 22, 0.5);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.mm-wrap[hidden] { display: none; }
.mm-canvas { display: block; width: 100%; height: 100%; border-radius: 50%; cursor: zoom-in; touch-action: manipulation; }
.mm-zoom {
  position: absolute; left: 50%; bottom: 0.3rem; transform: translateX(-50%);
  padding: 0 0.35rem; border-radius: 999px;
  font: 0.55rem/1.3 var(--mono, monospace); letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(236, 230, 218, 0.8); background: rgba(8, 10, 14, 0.55);
  pointer-events: none;
}
/* 701-1180px desktop: the keyboard hotbar becomes a column on the right (gloop.css); sit left of it */
@media (min-width: 701px) and (max-width: 1180px) and (hover: hover), (min-width: 701px) and (max-width: 1180px) and (pointer: fine) {
  .mm-wrap { right: calc(0.8rem + 3.6rem); }
}
/* touch / narrow: 44px buttons like mobile.css, smaller map */
@media (max-width: 900px) and (pointer: coarse), (max-width: 560px) {
  .field .xb-btn { width: 44px; height: 44px; }
  .field .xb-btn svg { width: 1.25rem; height: 1.25rem; }
  .field .ach-toggle { right: calc(0.8rem + 44px + 8px); }
  .field .mm-toggle { right: calc(0.8rem + 2 * (44px + 8px)); }
  .mm-wrap { top: calc(0.7rem + 44px + 8px); right: 0.8rem; width: 6.5rem; height: 6.5rem; }
  .mm-zoom { font-size: 0.5rem; bottom: 0.15rem; }
}
html.no-webgl .xb-btn.mm-toggle, html.no-webgl .mm-wrap { display: none; }

/* ---- achievement toast ---- */
.ach-toast {
  position: absolute;
  top: 3rem;
  left: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: min(22rem, calc(100% - 1.6rem));
  padding: 0.5rem 0.9rem 0.5rem 0.6rem;
  border-radius: 12px;
  font-family: var(--mono, monospace);
  color: var(--ink, #ece6da);
  background: rgba(14, 18, 12, 0.88);
  border: 1px solid rgba(232, 198, 90, 0.55);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(232, 198, 90, 0.12);
  opacity: 0;
  transform: translate(-50%, -0.6rem) scale(0.96);
  transition: opacity 0.3s, transform 0.35s cubic-bezier(.2, 1.4, .4, 1);
  pointer-events: none;
}
.ach-toast:empty { display: none; }
.ach-toast.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ach-t-icon { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; color: #10160f; background: #e8c65a; }
.ach-t-icon svg { width: 1.15rem; height: 1.15rem; }
.ach-t-body { display: flex; flex-direction: column; min-width: 0; }
.ach-t-kicker { font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: #e8c65a; }
.ach-t-body b { font-size: 0.82rem; }
.ach-t-desc { font-size: 0.64rem; color: var(--mute, #8f97a3); }
@media (prefers-reduced-motion: reduce) { .ach-toast, .ach-toast.is-on { transition: opacity 0.2s; transform: translate(-50%, 0); } }
html.a11y-rm-on .ach-toast, html.a11y-rm-on .ach-toast.is-on { transition: opacity 0.2s; transform: translate(-50%, 0); }

/* ---- achievements panel ---- */
.ach-panel {
  position: absolute;
  top: calc(0.7rem + 1.7rem + 0.5rem);
  right: 0.8rem;
  z-index: 6;
  width: min(19rem, calc(100% - 1.6rem));
  max-height: min(27rem, calc(100% - 3.6rem));
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  font-family: var(--mono, monospace);
  color: var(--ink, #ece6da);
  background: rgba(10, 13, 18, 0.9);
  border: 1px solid var(--line, rgba(236, 230, 218, 0.14));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.ach-panel[hidden] { display: none; }
.ach-panel header, .ach-panel footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.7rem; }
.ach-panel header { border-bottom: 1px solid var(--line, rgba(236, 230, 218, 0.1)); }
.ach-panel footer { border-top: 1px solid var(--line, rgba(236, 230, 218, 0.1)); }
.ach-panel h2 { margin: 0; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.ach-count { color: #e8c65a; margin-left: 0.3rem; }
.ach-close, .ach-reset {
  font: inherit; font-size: 0.68rem; color: var(--mute, #8f97a3); background: transparent;
  border: 1px solid var(--line, rgba(236, 230, 218, 0.14)); border-radius: 999px; padding: 0.15rem 0.55rem; cursor: pointer;
  min-height: 1.6rem;
}
.ach-close { font-size: 0.9rem; line-height: 1; width: 1.6rem; padding: 0; }
.ach-close:hover, .ach-reset:hover, .ach-close:focus-visible, .ach-reset:focus-visible { color: var(--ink, #ece6da); border-color: rgba(236, 230, 218, 0.5); }
.ach-foot { font-size: 0.58rem; color: var(--mute, #8f97a3); }
.ach-list { list-style: none; margin: 0; padding: 0.3rem 0.4rem; overflow-y: auto; overscroll-behavior: contain; }
.ach-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.35rem; border-radius: 8px; }
.ach-list li + li { margin-top: 0.1rem; }
.ach-i { flex: none; width: 1.4rem; text-align: center; font-size: 0.9rem; }
.ach-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ach-txt b { font-size: 0.72rem; font-weight: 600; }
.ach-txt span { font-size: 0.6rem; color: var(--mute, #8f97a3); }
.ach-pr { flex: none; font-size: 0.6rem; color: var(--mute, #8f97a3); }
.ach-list li.is-got { background: rgba(232, 198, 90, 0.08); }
.ach-list li.is-got .ach-i { color: #e8c65a; }
.ach-list li.is-locked { opacity: 0.62; }
.ach-list li.is-secret .ach-txt b { letter-spacing: 0.2em; }
.ach-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) and (pointer: coarse), (max-width: 560px) {
  .ach-panel { top: calc(0.7rem + 44px + 8px); max-height: calc(100% - 44px - 1.6rem); }
  .ach-close { width: 44px; height: 44px; font-size: 1.1rem; }
  .ach-reset { min-height: 44px; padding: 0 0.8rem; }
  .ach-toast { top: calc(0.7rem + 44px + 8px); }
}