/* dojo.css, the full-screen training-dojo modal (CoachDojo.js).
 *
 * When the dojo is open it takes over the WHOLE screen (covering the scoreboard and the
 * in-game finger-keyboard, so there is only ever one keyboard in view), and grows on with a
 * slow animation that hides the coach model's latency. It plays in two acts, driven by classes
 * on the card: act 1 "talk" (wizard scene beside a speech bubble that has its own column, so a
 * long note never overlaps anything) and act 2 ".act-drill" (the wizard steps aside and the
 * potions + keyboard fill the screen). brawl.css owns the plain (non-dojo) game-over card;
 * everything here is scoped to #game-over.dojo-open so it never touches that card.
 */

/* ---- the full-screen takeover ---- */
#game-over.dojo-open {
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: flex-start;
  justify-content: center;
  /* Fully opaque, so the arena, scoreboard, and the in-game keyboard are completely covered:
   * the dojo IS the screen, and there is only ever one keyboard in view. */
  background: radial-gradient(ellipse at 50% 28%, #2a2247, #14122a 78%);
  overflow-y: auto;
  animation: dojo-veil 0.5s ease both;
}
@keyframes dojo-veil { from { opacity: 0; } to { opacity: 1; } }

#game-over.dojo-open .go-card.dojo {
  width: min(100%, 62rem);
  max-width: 62rem;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: clamp(0.7rem, 2.4vh, 1.6rem) clamp(1rem, 4vw, 2.6rem) clamp(1rem, 3vh, 2rem);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  position: relative;
  animation: dojo-enter 0.7s cubic-bezier(0.2, 0.8, 0.25, 1) both;
}
@keyframes dojo-enter { from { transform: scale(0.92) translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }

.dojo-home { position: absolute; top: 0.5rem; left: 0.7rem; color: var(--gold, #e9c46a); text-decoration: none; font-size: 0.95rem; }
.dojo-home:hover { text-decoration: underline; }

.dojo-head { flex: 0 0 auto; color: var(--pending, #9aa); font-size: 1rem; margin-bottom: 0.3rem; }
.dojo-score { color: var(--gold, #e9c46a); font-weight: 700; font-size: 1.7rem; }
.dojo-ribbon {
  display: inline-block; margin-left: 0.6rem; padding: 0.12rem 0.6rem; border-radius: 999px;
  background: rgba(233, 196, 106, 0.16); color: var(--gold, #e9c46a); font-size: 0.85rem;
}

/* ---- ACT 1: the wizard talks ---- */
.dojo-talk {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 0.8rem 0;
  transition: flex-basis 0.5s ease, padding 0.5s ease;
}
.dojo-scene { position: relative; flex: 0 1 46%; max-width: 34rem; transition: max-width 0.5s ease, flex 0.5s ease; }
/* The room's rectangular edges are masked to fade into the chamber, so the wizard reads as
 * standing IN the room, not on a card floating in space. */
.dojo-room {
  width: 100%;
  height: auto;
  display: block;
  -webkit-mask-image: radial-gradient(ellipse 70% 78% at 50% 46%, #000 42%, transparent 96%);
  mask-image: radial-gradient(ellipse 70% 78% at 50% 46%, #000 42%, transparent 96%);
}

.dojo-say { flex: 0 1 48%; max-width: 34rem; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; transition: max-width 0.5s ease; }
.dojo-bubble {
  position: relative;
  width: 100%;
  max-height: 60vh;
  overflow-y: auto;
  padding: 1rem 1.2rem;
  background: #fbf7ec;
  color: #2a2340;
  border-radius: 16px;
  text-align: left;
  line-height: 1.5;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}
.dojo-bubble::after { content: ""; position: absolute; left: -13px; top: 30px; border: 9px solid transparent; border-right-color: #fbf7ec; }
.dojo-bubble-text { white-space: pre-wrap; }

/* the "still thinking" dots, shown until the note starts typing */
.dojo-dots { display: none; gap: 5px; }
.dojo-bubble.thinking .dojo-dots { display: inline-flex; }
.dojo-bubble.thinking .dojo-bubble-text { display: none; }
.dojo-dots i { width: 8px; height: 8px; border-radius: 50%; background: #b3a6d6; animation: dojo-dot 1.1s ease-in-out infinite; }
.dojo-dots i:nth-child(2) { animation-delay: 0.2s; }
.dojo-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes dojo-dot { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* the deliberate pause: a pulsing "keep going" prompt, shown only while awaiting the reader */
.dojo-continue { color: var(--gold, #e9c46a); font-size: 0.95rem; opacity: 0; pointer-events: none; animation: dojo-pulse 1.4s ease-in-out infinite; }
.go-card.dojo.awaiting .dojo-continue { opacity: 1; }
@keyframes dojo-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* the wizard's idle life */
.dojo-wizard { transform-box: fill-box; transform-origin: bottom center; animation: dojo-bob 3.4s ease-in-out infinite; }
.dojo-orb { transform-box: fill-box; transform-origin: center; animation: dojo-orb 2.2s ease-in-out infinite; }
.dojo-star { animation: dojo-twinkle 2.6s ease-in-out infinite; }
.dojo-star:nth-of-type(even) { animation-delay: 1.1s; }
@keyframes dojo-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(-1deg); } }
@keyframes dojo-orb { 0%, 100% { opacity: 0.7; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes dojo-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* ---- ACT 2: the wizard steps aside, the drill fills the screen ---- */
.dojo-practice { display: none; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding-bottom: 0.5rem; }
.go-card.dojo.act-drill .dojo-practice { display: flex; }

.go-card.dojo.act-drill .dojo-talk { flex: 0 0 auto; gap: 1rem; padding: 0.2rem 0; }
.go-card.dojo.act-drill .dojo-scene { flex: 0 0 auto; max-width: 8rem; }
.go-card.dojo.act-drill .dojo-say { flex: 0 1 auto; max-width: 24rem; }
.go-card.dojo.act-drill .dojo-bubble { max-height: none; overflow: visible; font-size: 0.95rem; padding: 0.55rem 0.8rem; }
.go-card.dojo.act-drill .dojo-bubble::after { top: 18px; }
.go-card.dojo.act-drill .dojo-continue { display: none; }

.dojo-drill-title { color: var(--gold, #e9c46a); font-weight: 700; font-size: 1.2rem; }
.dojo-potions { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 0.5rem; min-height: 4rem; }
.dojo-gap { width: 1.1rem; }
.dojo-potion { display: inline-flex; flex-direction: column; align-items: center; transition: transform 0.2s ease, opacity 0.3s ease; }
.dojo-potion-svg { width: 2.2rem; height: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); }
.dojo-potion-label { font-family: "Courier New", monospace; font-weight: 700; font-size: 1.2rem; color: var(--text, #e8e6f0); margin-top: 0.15rem; }
.dojo-potion.grabbed { animation: dojo-grab 0.4s ease both; }
.dojo-potion.grabbed .dojo-potion-svg { opacity: 0.25; }
.dojo-potion.grabbed .dojo-potion-label { color: var(--pending, #9aa); }
@keyframes dojo-grab { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-12px) scale(1.3); } 100% { transform: translateY(0) scale(1); } }

.dojo-caption { color: var(--pending, #9aa); font-size: 1rem; min-height: 1.3rem; }
.dojo-caption a { color: var(--gold, #e9c46a); }

.dojo-stage { display: none; width: 100%; max-width: 34rem; margin: 0.3rem auto 0; }
.dojo-stage.shown { display: block; }
.dojo-stage.zoomed .dojo-kb { animation: dojo-zoom 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.dojo-kb { width: 100%; }
.dojo-kb svg { width: 100%; height: auto; max-height: clamp(150px, 26vh, 240px); }
@keyframes dojo-zoom { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* stack the columns on a narrow screen so nothing is squeezed */
@media (max-width: 640px) {
  .dojo-talk { flex-direction: column; }
  .dojo-scene, .dojo-say { flex: 0 0 auto; max-width: 22rem; width: 100%; }
  .go-card.dojo.act-drill .dojo-talk { flex-direction: row; }
}

/* Respect a player who asked the OS for less motion: keep the layout, drop the looping/zoom. */
@media (prefers-reduced-motion: reduce) {
  #game-over.dojo-open, #game-over.dojo-open .go-card.dojo,
  .dojo-wizard, .dojo-orb, .dojo-star, .dojo-dots i, .dojo-continue,
  .dojo-stage.zoomed .dojo-kb, .dojo-potion.grabbed { animation: none; }
  .go-card.dojo.awaiting .dojo-continue { opacity: 1; }
}