/* =============================================================================
   USMLE PULSE — evil-dog.css
   The Evil Dog popup (student-facing) + the moderator debug dock. Theme-aware,
   responsive, and NON-BLOCKING: the backdrop never intercepts clicks, so the
   student can always keep using the app. Position / size / animation / opacity
   are all driven by the admin panel's config via the classes + CSS vars set in
   evil-dog.js — so preview, test and production render identically.
   ========================================================================== */

/* ---- Backdrop = a full-viewport, click-through positioning layer ---- */
.edog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  padding: var(--edog-offset, 24px);
  pointer-events: none;              /* never block the app */
}
.edog-backdrop.edog-mounted { position: absolute; z-index: 5; }  /* inside the panel's mock screen */
.edog-backdrop.edog-dim { background: rgba(12, 20, 28, 0.42); opacity: 0; transition: opacity 0.25s ease; }
.edog-backdrop.edog-dim.edog-in { opacity: 1; }
:root[data-theme="dark"] .edog-backdrop.edog-dim { background: rgba(0, 0, 0, 0.55); }

/* ---- Position (3×3 grid + custom) ---- */
.edog-pos-top-left     { align-items: flex-start; justify-content: flex-start; }
.edog-pos-top-center   { align-items: flex-start; justify-content: center; }
.edog-pos-top-right    { align-items: flex-start; justify-content: flex-end; }
.edog-pos-center-left  { align-items: center;     justify-content: flex-start; }
.edog-pos-center       { align-items: center;     justify-content: center; }
.edog-pos-center-right { align-items: center;     justify-content: flex-end; }
.edog-pos-bottom-left  { align-items: flex-end;   justify-content: flex-start; }
.edog-pos-bottom-center{ align-items: flex-end;   justify-content: center; }
.edog-pos-bottom-right { align-items: flex-end;   justify-content: flex-end; }
.edog-pos-custom       { position: relative; }
.edog-pos-custom .edog-card { position: absolute; left: var(--edog-x, 50%); top: var(--edog-y, 50%); }

/* ---- Card ---- */
.edog-card {
  pointer-events: auto;
  position: relative;
  width: min(var(--edog-w, 260px), calc(100vw - 2 * var(--edog-offset, 24px)));
  background: var(--paper, #ffffff);
  border: 1px solid var(--line, #e6e3dd);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(12, 20, 28, 0.34), 0 4px 14px rgba(12, 20, 28, 0.16);
  padding: 12px;
  opacity: 0;
}
.edog-size-small  { --edog-w: 170px; }
.edog-size-medium { --edog-w: 260px; }
.edog-size-large  { --edog-w: 360px; }
.edog-size-xlarge { --edog-w: 460px; }
.edog-size-custom { --edog-w: var(--edog-size, 320px); }

/* Rarity accent ribbon */
.edog-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; border-radius: 22px 22px 0 0; background: var(--edog-accent, var(--brand, #0f766e)); }
.edog-r-common { --edog-accent: var(--brand, #0f766e); }
.edog-r-rare   { --edog-accent: #3b82f6; }
.edog-r-epic   { --edog-accent: #a855f7; }

/* ---- Image (never distorted) ---- */
.edog-imgwrap { margin-top: 4px; border-radius: 16px; overflow: hidden; background: var(--paper-2, #f5f3ee); display: flex; align-items: center; justify-content: center; }
.edog-img { display: block; max-width: 100%; max-height: min(64vh, 560px); width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; }

/* ---- Message / caption ---- */
.edog-caption { margin: 11px 6px 4px; font-family: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif); font-weight: 700; font-size: 1.02rem; line-height: 1.25; color: var(--ink, #1a2b33); }
.edog-msg-left { text-align: left; } .edog-msg-center { text-align: center; } .edog-msg-right { text-align: right; }
.edog-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Close ---- */
.edog-close { position: absolute; top: -12px; right: -12px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line, #e6e3dd); background: var(--paper, #fff); color: var(--ink, #1a2b33); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(12, 20, 28, 0.22); display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease, background 0.15s ease; z-index: 2; }
.edog-close:hover { transform: scale(1.08); background: var(--paper-2, #f5f3ee); }
.edog-close:focus-visible { outline: 3px solid var(--edog-accent, #0f766e); outline-offset: 2px; }
@media (max-width: 480px) { .edog-card { border-radius: 18px; } .edog-close { top: 6px; right: 6px; background: rgba(255, 255, 255, 0.92); } }

/* ---- Dark theme ---- */
:root[data-theme="dark"] .edog-card,
:root[data-theme="dark"] .edog-close { background: var(--paper, #12232c); color: var(--ink, #e8eef0); border-color: var(--line, #24404b); }
:root[data-theme="dark"] .edog-imgwrap { background: var(--paper-2, #0c1a24); }
:root[data-theme="dark"] .edog-caption { color: var(--ink, #e8eef0); }

/* =============================================================================
   ENTRANCE ANIMATIONS — driven only by the `.edog-in` state + the anim class,
   so a config change is a class swap, nothing more. Each ends at the configured
   opacity (--edog-op) and fills forwards so the card holds its final state.
   ========================================================================== */
@keyframes edog-pop    { from { opacity: 0; transform: scale(0.82); } to { opacity: var(--edog-op, 1); transform: scale(1); } }
@keyframes edog-fade   { from { opacity: 0; } to { opacity: var(--edog-op, 1); } }
@keyframes edog-bounce { 0% { opacity: 0; transform: translateY(26px) scale(0.9); } 60% { opacity: var(--edog-op, 1); transform: translateY(-9px) scale(1.02); } 100% { opacity: var(--edog-op, 1); transform: translateY(0) scale(1); } }
@keyframes edog-jump   { 0% { opacity: 0; transform: scale(1.5); } 70% { opacity: var(--edog-op, 1); transform: scale(0.94); } 100% { opacity: var(--edog-op, 1); transform: scale(1); } }
@keyframes edog-shake  { 0% { opacity: 0; } 18% { opacity: var(--edog-op, 1); transform: translateX(0); } 32% { transform: translateX(-7px); } 46% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 74% { transform: translateX(5px); } 100% { opacity: var(--edog-op, 1); transform: translateX(0); } }
@keyframes edog-slide  { from { opacity: 0; transform: translate(var(--edog-sx, 0), var(--edog-sy, 40px)); } to { opacity: var(--edog-op, 1); transform: translate(0, 0); } }
@keyframes edog-exit   { to { opacity: 0; transform: scale(0.96); } }

.edog-anim-pop.edog-in       .edog-card { animation: edog-pop 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.4) forwards; }
.edog-anim-fade.edog-in      .edog-card { animation: edog-fade 0.3s ease forwards; }
.edog-anim-bounce.edog-in    .edog-card { animation: edog-bounce 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.2) forwards; }
.edog-anim-jumpscare.edog-in .edog-card { animation: edog-jump 0.3s ease-out forwards; }
.edog-anim-shake.edog-in     .edog-card { animation: edog-shake 0.5s ease forwards; }
.edog-anim-slide.edog-in     .edog-card { animation: edog-slide 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.1) forwards; }
.edog-slide-bottom { --edog-sx: 0; --edog-sy: 40px; }
.edog-slide-top    { --edog-sx: 0; --edog-sy: -40px; }
.edog-slide-left   { --edog-sx: -44px; --edog-sy: 0; }
.edog-slide-right  { --edog-sx: 44px; --edog-sy: 0; }
.edog-backdrop.edog-out .edog-card { animation: edog-exit 0.22s ease forwards; }

@media (prefers-reduced-motion: reduce) {
  .edog-backdrop, .edog-card { transition: none; }
  .edog-in .edog-card { animation: none !important; opacity: var(--edog-op, 1) !important; transform: none !important; }
}

/* =============================================================================
   Moderator debug dock — bottom-right, mods only (injected by evil-dog.js).
   ========================================================================== */
.edog-debug { position: fixed; right: 14px; bottom: 14px; z-index: 3500; font-family: var(--font-sans, "Hanken Grotesk", system-ui, sans-serif); }
.edog-debug-toggle { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line, #e6e3dd); background: var(--paper, #fff); box-shadow: 0 6px 18px rgba(12, 20, 28, 0.22); font-size: 22px; cursor: pointer; line-height: 1; }
.edog-debug-toggle:hover { transform: translateY(-1px); }
.edog-debug-panel { position: absolute; right: 0; bottom: 56px; width: 230px; padding: 12px; background: var(--paper, #fff); border: 1px solid var(--line, #e6e3dd); border-radius: 14px; box-shadow: 0 16px 40px rgba(12, 20, 28, 0.26); display: flex; flex-direction: column; gap: 6px; }
.edog-debug-title { font-weight: 800; font-size: 0.8rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted, #64748b); margin-bottom: 2px; }
.edog-debug-btn { text-align: left; padding: 0.5rem 0.7rem; border-radius: 9px; border: 1px solid var(--line, #e6e3dd); background: var(--paper-2, #f5f3ee); color: var(--ink, #1a2b33); font-size: 0.86rem; cursor: pointer; }
.edog-debug-btn:hover { border-color: var(--brand, #0f766e); }
.edog-debug-reset { margin-top: 4px; background: transparent; color: var(--text-muted, #64748b); }
.edog-debug-note { font-size: 0.74rem; color: var(--text-muted, #64748b); margin-top: 4px; }
.edog-debug-link { display: block; text-align: center; margin-top: 2px; font-size: 0.78rem; color: var(--brand, #0f766e); text-decoration: none; font-weight: 700; }
:root[data-theme="dark"] .edog-debug-toggle,
:root[data-theme="dark"] .edog-debug-panel { background: var(--paper, #12232c); border-color: var(--line, #24404b); }
:root[data-theme="dark"] .edog-debug-btn { background: var(--paper-2, #0c1a24); color: var(--ink, #e8eef0); border-color: var(--line, #24404b); }