/* Shared layout for the color_by_speech family (CS01).
 * Themes supply only their own palette via a per-game stylesheet. */
.easel { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  padding:14px; padding-top:54px; padding-bottom:14px; }
.art-frame { position:relative; width:min(96vw, 620px); aspect-ratio:400/260; max-height:100%;
  background:var(--cream); border:6px solid #fff; border-radius:18px; box-shadow:0 10px 26px rgba(30,42,74,.24); }
@media (min-aspect-ratio:5/4) { .art-frame { width:min(80vw, 720px); } }
.line-art { position:absolute; inset:0; width:100%; height:100%; }
.line-art .region { fill:#FFFDF8; stroke:#1E2A4A; stroke-width:3; stroke-linejoin:round;
  transition:fill .55s cubic-bezier(.4,.1,.3,1); }
.line-art .region.splashing { animation:splash-in .6s cubic-bezier(.34,1.56,.64,1);
  transform-box:fill-box; transform-origin:center; }
@keyframes splash-in { 0%{transform:scale(.9)} 55%{transform:scale(1.03)} 100%{transform:scale(1)} }
.line-art .ink { fill:none; stroke:#1E2A4A; stroke-width:3; stroke-linecap:round; }
.markers { position:absolute; inset:0; }
.art-frame.finished { animation:frame-glow 1.2s ease-in-out 2; }
@keyframes frame-glow {
  0%,100%{ box-shadow:0 10px 26px rgba(30,42,74,.24) }
  50%{ box-shadow:0 0 0 8px rgba(232,195,106,.75), 0 10px 30px rgba(30,42,74,.3) }
}
@media (prefers-reduced-motion:reduce) {
  .line-art .region.splashing, .art-frame.finished { animation:none; }
}
@media (max-height:600px) { .easel { padding-top:48px; } }

/* --- intro panel box (base-branch gap) -------------------------------------
 * engine2.css ships only the <=620px override for .intro-panel and never gives
 * the panel a box, so on a phone  is applied to a
 * STATIC block and drags the whole panel — Play button included — off the left
 * edge of the screen. Restoring the intended absolutely-positioned card here
 * keeps the fix inside this family instead of editing shared engine2.css.
 * Upstream engine2.css should carry this; flagged for the base branch. */
.intro-panel { position:absolute; z-index:5; right:4%; bottom:6%;
  width:min(420px, calc(100vw - 24px));
  background:rgba(255,251,245,.92); border-radius:22px; padding:18px 20px 16px;
  text-align:center; box-shadow:0 10px 30px rgba(30,42,74,.18); }
.intro-panel h1 { font-size:clamp(1.7rem,5.6vw,2.5rem); color:var(--navy); margin:0; }