/* ═══════════════════════════════════════════
   MODALS — Overlays · Puzzle modal · Result panel · Menu drawer
   ═══════════════════════════════════════════ */

/* ── Shared overlay base ──
   All three overlay types (.modal-overlay, .panel-overlay, #menuOverlay)
   share position:fixed + inset:0 + the same semi-transparent background.
   Only z-index and flex-direction differ, so those are set per-element.   */
.modal-overlay,
.panel-overlay,
#menuOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
}
.modal-overlay       { z-index: 100; align-items: flex-end; justify-content: center; }
.panel-overlay       { z-index: 300; align-items: flex-end; justify-content: center; }
#menuOverlay         { z-index: 200; justify-content: flex-end; }

.modal-overlay.open,
.panel-overlay.open,
#menuOverlay.open    { display: flex; }

/* ── Shared bottom-sheet surface ──
   .modal and .panel-sheet are visually identical — same background, radius,
   width cap, max-height and animation. Only bottom padding differs slightly. */
.modal,
.panel-sheet {
  background: var(--paper);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 680px;
  max-height: 92vh;
  min-height: 80vh;
  overflow-y: auto;
  animation: slideUp 0.28s cubic-bezier(0.34,1.2,0.64,1);
}
.modal       { padding: 0 0 40px; }
.panel-sheet { padding: 0 0 48px; }

/* ── Drag handle (appears at top of sheets) ── */
.modal-handle,
.panel-handle {
  width: 36px; height: 4px;
  background: var(--paper3);
  border-radius: 2px;
  margin: 12px auto 0;
}

/* ── Sheet header (shared pattern) ── */
.modal-header,
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--paper3);
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 2;
}

/* Sheet title typography */
.modal-title,
.panel-title {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 700;
}
.modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-body { padding: 20px 24px; }

/* ── Close button (shared across modal and panels) ── */
.close-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--paper2);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--ink2);
  transition: background var(--t-std);
}
.close-btn:hover { background: var(--paper3); }

/* ── Timer row ── */
.timer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background: var(--paper2);
  font-size: 13px;
  color: var(--ink2);
}
.timer-val {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  min-width: 64px;
  text-align: right;
}
.timer-val.urgent    { color: var(--accent); }
.wrong-indicators    { display: flex; gap: 5px; }
.wi-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--paper3);
  transition: background 0.2s;
}
.wi-dot.used         { background: var(--accent); }

/* ── Result panel ── */
.result-panel       { display: none; padding: 28px 24px; text-align: center; }
.result-panel.show  { display: block; }
.result-emoji       { font-size: 48px; margin-bottom: 12px; }
.result-heading     { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 700; margin-bottom: 6px; }
.result-score       { font-family: 'Fraunces', serif; font-size: 48px; font-weight: 700; color: var(--accent); margin: 12px 0; }
.result-sub         { font-size: 14px; color: var(--ink3); margin-bottom: 24px; }

.result-share {
  background: var(--paper2);
  border-radius: 10px;
  padding: 14px;
  font-size: 13px;
  color: var(--ink2);
  margin-bottom: 20px;
  font-family: monospace;
  white-space: pre;
  text-align: left;
}
.share-copy-btn {
  width: 100%;
  padding: 12px;
  background: var(--ink);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background var(--t-std);
}
.share-copy-btn:hover { background: var(--accent); }

.leaderboard-teaser {
  display: flex;
  gap: 10px;
  background: var(--paper2);
  border: 1px solid var(--paper3);
  border-radius: 10px;
  padding: 14px;
  text-align: left;
  margin-top: 12px;
}
.lb-rank          { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; color: var(--gold); flex-shrink: 0; }
.lb-text          { font-size: 13px; color: var(--ink2); line-height: 1.5; }
.lb-text strong   { color: var(--ink); }

/* ── Already-completed dialog ── */
.already-done-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 24px 20px;
}
.already-done-icon  { font-size: 60px; margin-bottom: 18px; animation: popIn 0.3s cubic-bezier(0.34,1.6,0.64,1); }
.already-done-title { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.already-done-sub   { font-size: 14px; color: var(--ink3); line-height: 1.65; max-width: 300px; margin-bottom: 28px; }

.already-done-btn {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  border: 1.5px solid var(--paper3);
  background: var(--paper2);
  color: var(--ink);
  margin-bottom: 10px;
  transition: background var(--t-std), border-color var(--t-std);
}
.already-done-btn:hover         { background: var(--paper3); }
.already-done-btn.primary       { background: var(--accent); color: white; border-color: var(--accent); }
.already-done-btn.primary:hover { background: var(--accent2); border-color: var(--accent2); }

/* ── Menu drawer ── */
#menuDrawer {
  width: min(320px, 85vw);
  height: 100%;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  animation: slideInRight 0.25s cubic-bezier(0.34,1.1,0.64,1);
}

#menuHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 20px 20px;
  border-bottom: 1.5px solid var(--paper3);
}
#menuLogo          { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 700; color: var(--ink); }
#menuLogo span     { color: var(--accent); }
#menuHeader .logo-svg { height: 40px; width: auto; }

/* Menu close button */
#menuClose {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--paper2);
  border: 1.5px solid var(--paper3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-family: 'DM Sans', sans-serif;
  color: var(--ink2);
  flex-shrink: 0;
  transition: background var(--t-std), border-color var(--t-std), color var(--t-std);
}
#menuClose:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

#menuBody { padding: 16px 12px; display: flex; flex-direction: column; gap: 6px; }

.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--paper2);
  border: 1px solid var(--paper3);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background var(--t-std), border-color var(--t-std);
}
.menu-item:hover       { background: var(--paper3); border-color: var(--ink3); }
.menu-item-icon        { font-size: 22px; flex-shrink: 0; }
.menu-item-text        { flex: 1; min-width: 0; }
.menu-item-title       { font-weight: 600; font-size: 15px; color: var(--ink); }
.menu-item-sub         { font-size: 12px; color: var(--ink3); margin-top: 1px; }
.menu-item-arrow       { font-size: 20px; color: var(--ink3); flex-shrink: 0; }