/* ========== ROOM OVERLAY SPOTS ==========
   Invisible at rest so the Bitmoji artwork is never covered. They light up only
   when Alli actually taps one, tracing that object's outline, then fade. */

.room-spot {
  position: absolute;
  z-index: 10;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 12px;
  font-family: inherit;
  outline: none;
  /* main.css gives every <button> a drop shadow, which showed these as faint
     grey rectangles over the artwork. They must be completely invisible at rest. */
  box-shadow: none;
  transform: none;
}

/* Only the little name label appears on hover — no ring, no box, nothing drawn
   around the object itself. The tap flash is the only visible outline. */
.room-spot:hover .spot-tip,
.room-spot:focus-visible .spot-tip { opacity: 1; }
.room-spot:focus { outline: none; box-shadow: none; }

.room-spot:active {
  background: rgba(255, 215, 0, .45);
  box-shadow: 0 0 0 4px rgba(255, 215, 0, .95), 0 0 26px 8px rgba(255, 215, 0, .7);
}

.room-spot.tapped { animation: spotTap .75s ease-out; }
@keyframes spotTap {
  0%   { background: rgba(255,215,0,.55); box-shadow: 0 0 0 4px rgba(255,215,0,1), 0 0 30px 10px rgba(255,215,0,.85); }
  60%  { background: rgba(255,215,0,.30); box-shadow: 0 0 0 3px rgba(255,215,0,.75), 0 0 22px 7px rgba(255,215,0,.5); }
  100% { background: transparent; box-shadow: none; }
}

.spot-tip {
  position: absolute;
  left: 50%; bottom: 100%;
  transform: translateX(-50%);
  background: #2b2b45; color: #fff;
  font-size: .75rem; font-weight: bold;
  padding: 5px 10px; border-radius: 8px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .15s;
  margin-bottom: 6px; z-index: 20;
}

/* "Show me what's clickable" — a help button, not a permanent glow. */
.room-spot.peek { animation: spotPeek 1.6s ease-in-out 2; }
@keyframes spotPeek {
  0%, 100% { background: transparent; box-shadow: none; }
  50% { background: rgba(255,215,0,.35); box-shadow: 0 0 0 3px rgba(255,215,0,.9); }
}

.spot-help {
  position: fixed; right: 16px; bottom: 16px; z-index: 300;
  background: #7b6cf6; color: #fff; border: none;
  border-radius: 40px; padding: 12px 20px;
  font-weight: bold; font-family: inherit; font-size: .95rem;
  cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.spot-help:hover { transform: scale(1.05); }

/* ---------- Activities inside the modal ---------- */
.rq-bar { height: 12px; background: #eee; border-radius: 999px; overflow: hidden; margin: 10px 0 14px; }
.rq-bar > div { height: 100%; background: linear-gradient(90deg, #43c463, #4facfe); transition: width .3s; }
.rq-q { font-size: 1.25rem; font-weight: bold; margin: 8px 0 16px; line-height: 1.4; }
.rq-choices { display: grid; gap: 10px; }
/* main.css styles every <button> with a gradient background and white text, which
   made these choices white-on-white and unreadable. Everything below is set
   explicitly so the answers are always legible, including once disabled. */
.rq-choice {
  background: #fff !important;
  color: #2b2b45 !important;
  border: 3px solid #e7e2ff;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 1.05rem;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  margin: 0;
  box-shadow: none;
  opacity: 1 !important;
  transition: transform .08s;
  width: 100%;
}
.rq-choice:hover:not(:disabled) { transform: translateY(-2px); border-color: #7b6cf6; }
.rq-choice:disabled { cursor: default; transform: none; }
.rq-choice.correct { background: #e6ffed !important; border-color: #43c463; color: #0a7a34 !important; }
.rq-choice.wrong   { background: #ffe6e6 !important; border-color: #ff6b6b; color: #a12020 !important; }
.rq-fb { margin-top: 14px; padding: 12px; border-radius: 12px; font-weight: bold; }
.rq-fb.good { background: #e6ffed; color: #0a7a34; }
.rq-fb.bad { background: #fff3e6; color: #a35b00; }
.rq-next {
  background: #7b6cf6 !important; color: #fff !important; border: none; border-radius: 14px;
  padding: 12px 22px; font-size: 1rem; font-weight: bold; cursor: pointer;
  font-family: inherit; margin: 10px 6px 0 0;
}
.rq-next:active { transform: translateY(2px); }

/* Modal body text must stay dark — the page background is a dark gradient. */
#modalBody, #modalBody p, #modalBody li, #modalBody td, #modalBody th,
#modalBody h2, #modalBody h3, #modalBody h4 { color: #2b2b45; }
.rq-q { color: #2b2b45; }

.cl-swatch {
  width: 64px; height: 64px; border-radius: 50%;
  border: 4px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.2); cursor: pointer;
}
.cl-swatch:hover { transform: scale(1.08); }



/* ---------- Reading log: writing section ---------- */
.rl-write { background: #f6f4ff; border-radius: 12px; padding: 12px 14px; margin-top: 4px; }
.rl-prompt { font-size: .9rem; color: #444; line-height: 1.5; margin: 6px 0 8px; }
.rl-count { font-size: .82rem; color: #888; text-align: right; margin-top: 4px; }
.rl-count.good { color: #0a7a34; font-weight: bold; }
.rl-badge { font-size: .7rem; background: #e7e2ff; color: #4a3f9e; padding: 2px 8px; border-radius: 999px; }
.rl-sum { margin-top: 6px; }
.rl-sum summary { cursor: pointer; font-size: .85rem; color: #7b6cf6; font-weight: bold; }
.rl-sum p { background: #fafafa; border-left: 4px solid #e7e2ff; border-radius: 8px;
            padding: 10px 12px; margin: 6px 0 0; line-height: 1.55; white-space: pre-wrap; }

/* The writing type is assigned by the lesson plan, not chosen by the student. */
.rl-assigned { background: #fff; border: 2px solid #e7e2ff; border-radius: 10px;
               padding: 10px 12px; margin: 6px 0 8px; font-size: 1rem; }
.rl-assigned-label { color: #666; font-size: .88rem; }
.rl-std { font-size: .72rem; background: #e7e2ff; color: #4a3f9e;
          padding: 2px 8px; border-radius: 999px; margin-left: 6px; }