/* Misc                                                                */
/* ------------------------------------------------------------------ */

.health {
  font: 600 10px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

#toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 2px;
  padding: 12px 18px;
  font: 600 11px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  z-index: 80;
}

#toast.show { opacity: 1; transform: none; }
#toast.error { background: var(--crit); }

#memory-answer { margin-top: 16px; }
#memory-answer h2 { font: 500 19px var(--serif); margin: 0 0 8px; }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .mobile-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 10px 16px;
  }

  .mobile-brand { font: 600 11px var(--mono); letter-spacing: .12em; }

  .hamburger {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    color: var(--ink);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
  }

  .hamburger:hover { background: var(--panel-hi); }

  .sidebar {
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .2s ease, visibility .2s;
  }

  body.drawer-open .sidebar { transform: none; visibility: visible; }

  .drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(26, 23, 18, .4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    z-index: 40;
  }

  body.drawer-open .drawer-overlay { opacity: 1; pointer-events: auto; }

  .content-wrap { margin-left: 0; }
  .main { padding: 24px 20px 56px; }

  .page-head { flex-direction: column; align-items: start; }
  .two-col,
  .profile-layout { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); }
}