/* ==========================================================================
   eduTechnoz Kids - Auto Remediation Player
   Goal: Donia introduces the next game; the GAME owns the screen.

   SOURCE OF TRUTH for the layout. Tune this file directly - the page adds
   only what is not covered here (celebration veil, certificate, journey map,
   gate, non-game renderers), and that block reads the tokens below.

   Colours are the REAL Kids Portal / eduTechnoz brand values, taken from
   Kids/style.css and Kids/content/style.css - nothing invented:
     turquoise #2eb0d4 / #58C0DD    yellow #EBC71B / #F1C536
     purple    #5a52d9 / #413B97    orange #F57244
   ========================================================================== */

:root {
  --kids-surface: #ffffff;
  --kids-surface-soft: #eafafd;

  --kids-teal: #2eb0d4;        /* Kids/style.css */
  --kids-teal-light: #58C0DD;  /* Kids/style.css */
  --kids-teal-deep: #1789a8;
  --kids-yellow: #EBC71B;      /* .btn-yellow */
  --kids-yellow-soft: #fff6d6;
  --kids-yellow-ink: #6b4e00;
  --kids-purple: #5a52d9;      /* Kids/content/style.css */
  --kids-orange: #F57244;      /* Kids/style.css */

  /* the Kids world, sampled from the portal reference */
  --kids-world-bg: #333333;
  --kids-world-purple: #3F3F94;

  /* the Kids palette, used by the journey tracker */
  --kids-cyan: #23C3DF;
  --kids-yellow: #F0C535;
  --kids-orange: #FF7244;
  --kids-lime: #C0E04A;
  --kids-green: #96EE47;
  --kids-red: #FF0000;
  --kids-purple-flat: #3F3F94;

  --kids-ink: #24374a;
  --kids-muted: #6d7d8b;
  --kids-border: rgba(46, 176, 212, 0.30);

  --kids-radius-lg: 26px;
  --kids-radius-md: 18px;

  /* one width for the header, the game and the action strip - they must
     line up exactly, that is what makes the page feel connected */
  --kids-w: min(95vw, 1560px);

  /* vertical rhythm - deliberately tight, no dead space */
  --kids-gap: 10px;
  --kids-top: 12px;
  --kids-header-h: 150px;
  --kids-footer-h: 76px;
}

/* ---------- reset / page ---------- */

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

/* The Kids world. No gradients, no glow - flat charcoal, same as more.php. */
body.kids-remediation-page {
  margin: 0;
  min-height: 100vh;
  background: var(--kids-world-bg);
  color: #fff;
  overflow-x: hidden;
  position: relative;
}

.kids-remediation-page,
.kids-remediation-page button {
  font-family: Tahoma, Arial, sans-serif;
}

/* ---------- full page player ---------- */

.remediation-player {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 10;          /* the whole player sits above the decorative world */
}
/* ==========================================================================
   THE KIDS WORLD BACKGROUND
   Reused from the portal, not reinvented: Kids/more.php paints
   body{background:#333333} plus a fixed full-viewport layer holding
   <span class="circleN"> decorations. The .circleN rules below are copied
   VERBATIM out of Kids/content/style.css (which header.php inlines on the
   live page) so this page renders identically online and in the offline
   preview. If those rules change in the portal, re-copy them.

   The purple curved ground is the one part that does NOT exist in the
   portal CSS, so it is authored here to Diana's spec.
   ========================================================================== */

.kids-world-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: var(--kids-world-bg);
}

/* A very large, very flat ellipse, mostly below the viewport - a horizon,
   not a hill and not a footer bar. */
.kids-purple-ground {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 200px;
  bottom: -110px;
  background: var(--kids-world-purple);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 1;
}

/* ---- the portal's own circles, verbatim from Kids/content/style.css ---- */
/* (.circle13 has a span in more.php but no rule there either - kept as-is) */
.circle1 { height: 3vmin; width: 3vmin; background-color: rgb(164, 240, 42); border-radius: 50%; display: inline-block; position: absolute; top: 13%; left: 3%; }
.circle2 { height: 6vmin; width: 6vmin; background-color: rgb(195, 226, 53); border-radius: 50%; display: inline-block; position: absolute; top: 12%; left: 20%; }
.circle3 { height: 10vmin; width: 10vmin; background-color: rgb(86, 194, 224); border-radius: 50%; display: inline-block; position: absolute; top: 12%; left: 43%; }
.circle4 { height: 4vmin; width: 4vmin; background-color: rgb(234, 199, 24); border-radius: 50%; display: inline-block; position: absolute; top: 8%; left: 70%; }
.circle5 { height: 4vmin; width: 4vmin; background-color: rgb(255, 0, 0); border-radius: 50%; display: inline-block; position: absolute; top: 19%; left: 74%; }
.circle6 { height: 10vmin; width: 10vmin; background-color: rgb(234, 199, 24); ; border-radius: 50%; display: inline-block; position: absolute; top: 25%; left: 4%; }
.circle7 { height: 4vmin; width: 4vmin; background-color: rgb(86, 194, 224); border-radius: 50%; display: inline-block; position: absolute; top: 19%; left: 12%; }
.circle8 { height: 9vmin; width: 9vmin; background-color: rgb(255, 0, 0); border-radius: 50%; display: inline-block; position: absolute; top: 44%; left: 4%; }
.circle9 { height: 3vmin; width: 3vmin; background-color: rgb(255, 0, 0); border-radius: 50%; display: inline-block; position: absolute; top: 37%; left: 33%; }
.circle10 { height: 9vmin; width: 9vmin; background-color: rgb(243, 115, 65); ; border-radius: 50%; display: inline-block; position: absolute; top: 36%; left: 56%; }
.circle11 { height: 6vmin; width: 6vmin; background-color: rgb(255, 238, 0); border-radius: 50%; display: inline-block; position: absolute; top: 30%; left: 86%; }
.circle12 { height: 6vmin; width: 6vmin; background-color: rgb(234, 199, 24); ; border-radius: 50%; display: inline-block; position: absolute; top: 30%; left: 86%; }
.circle14 { height: 4vmin; width: 4vmin; background-color: rgb(86, 194, 224); border-radius: 50%; display: inline-block; position: absolute; top: 57%; left: 2%; }
.circle15 { height: 6vmin; width: 6vmin; background-color: rgb(243, 115, 65); ; border-radius: 50%; display: inline-block; position: absolute; top: 52%; left: 12%; }
.circle16 { height: 3vmin; width: 3vmin; background-color: rgb(243, 115, 65); ; border-radius: 50%; display: inline-block; position: absolute; top: 48%; left: 30%; }
.circle17 { height: 6vmin; width: 6vmin; background-color: rgb(255, 0, 0); border-radius: 50%; display: inline-block; position: absolute; top: 50%; left: 76%; }
.circle18 { height: 4vmin; width: 4vmin; background-color: rgb(86, 194, 224); border-radius: 50%; display: inline-block; position: absolute; top: 45%; left: 83%; }
.circle19 { height: 5vmin; width: 5vmin; background-color: rgb(195, 226, 53); border-radius: 50%; display: inline-block; position: absolute; top: 57%; left: 87%; }


/* Every circle sits in the decorative layer, never above the content. */
.kids-world-bg [class^="circle"] { z-index: 2; }


/* ==========================================================================
   TOP STRIP - three visual elements, no container, no text
     LEFT   me          (the portal's own avatar treatment)
     MIDDLE my journey  (one circle per queued activity)
     RIGHT  Donia       (watching me travel it)
   The dark Kids world is the backdrop; this strip adds no surface of its own.
   ========================================================================== */

.remediation-topbar {
  width: min(94vw, 1500px);
  min-height: 176px;
  margin: 8px auto 0;
  padding: 0 8px;
  box-sizing: border-box;

  /* LTR so the DOM order reads me -> journey + guide across the screen,
     which is the composition regardless of the page being an RTL document.
     The centre stays open: that space belongs to the activity. */
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  background: transparent;
  border: 0;
  box-shadow: none;
}

/* ---------- LEFT: this is me ----------
   Reused verbatim from Kids/content/sidebar.php: a plain avatar image and a
   14px white name under it. No ring, no card, no label. */
.player-avatar {
  direction: rtl;
  text-align: center;
  line-height: 1;
}

.player-avatar img {
  width: 68px;
  height: 68px;
  display: block;
  margin: 0 auto;
}

.player-avatar h4 {
  margin: -2px 0 0;
  font-size: 14px;
  color: #fff;
  font-weight: 700;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- RIGHT: my journey and my guide, one grouped component ---------- */

.guide-progress-group {
  display: flex;
  flex-direction: row;   /* DOM order is tracker, then Donia -> she is rightmost */
  align-items: center;
  justify-content: flex-end;
  /* the tracker carries wide padding of its own now, so this stays small
     or the guide drifts away from the journey */
  gap: 0;
  min-width: 0;
}

.activity-tracker {
  /* RTL inside: the journey starts on Donia's side and travels toward me */
  direction: rtl;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  /* Room for TWO things that live outside a card: the disc that overhangs
     its top edge, and the current card's halo, which reaches about 56px
     past it (44px blur + 12px spread).

     This padding is not decoration. overflow-x:auto forces overflow-y to
     hidden, so anything the padding does not cover gets sheared off in a
     hard straight line - which is exactly what made the glow look cheap. */
  padding: 62px 48px 54px;
  gap: 8px;
  scrollbar-width: none;
}
.activity-tracker::-webkit-scrollbar { display: none; }

/* ==========================================================================
   THE JOURNEY TILES

   Each step is a PICTURE OF THE ACTIVITY - the game's own artwork, the
   worksheet, the book cover, the craft - not an abstract dot. The type
   icon rides the corner so the modality still reads instantly.

   SIZE is the primary state signal, because it is what a young child
   reads before colour:  done (small, dimmed, ticked)  <  pending  <
   current (largest, glowing). The size change is animated, so finishing
   an activity visibly shrinks it and hands the spotlight to the next.
   ========================================================================== */

.activity-step {
  position: relative;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width .24s ease, height .24s ease;
}

/* Kids/assets/preload.css carries a global
       button:focus, button:hover { background-color:#c36 }
   and every step here is a <button>. That is what painted a magenta SQUARE
   behind the rounded card on hover - the portal's own reset bundle, not
   anything on this page. Neutralised on every state; the hover emphasis is
   defined further down and follows the card's shape. */
.activity-step,
.activity-step:hover,
.activity-step:focus,
.activity-step:active{
  background: transparent;
  outline: none;
}

.activity-step.is-pending { width: 96px;  height: 96px; }
.activity-step.is-current { width: 126px; height: 126px; }
.activity-step.is-done    { width: 74px;  height: 74px; cursor: pointer; }

/* The card. Its colour comes from --tile, set per position by drawStrip so
   the row cycles through the Kids palette. The colour is NOT a status -
   status is size, glow and the check mark - it is there so the next thing
   looks worth opening. */
.step-frame {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 22px;
  background: var(--tile, #23C3DF);
  /* top room for the disc that straddles the edge */
  padding: 24% 9% 9%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 5px 0 rgba(0, 0, 0, .22),
    0 9px 18px rgba(0, 0, 0, .28);
}

/* the picture sits in a white well, so the card colour frames it */
.step-media {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 13px;
  /* the artwork covers this; it shows only as a hairline, so it must not
     be white either */
  background: #2b2b2b;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- the type icon, centred ON the top edge ---------- */

.step-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44%;
  height: 44%;
  border-radius: 50%;
  /* One colour per resource type, ringed in the portal's navy - the exact
     treatment the Kids home page gives these same icons, so a child reads
     "that is the game one" here without being taught anything new.
     --badge is set per tile by buildTile(). */
  background: var(--badge, #2BC1DC);
  border: 4px solid var(--kids-world-purple);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  /* above the done-veil, so a finished tile shows a whole disc rather than
     one that is half dimmed along the card's top edge */
  z-index: 5;
}

.step-badge img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;
}

.step-badge i {
  color: var(--kids-world-purple);
  font-size: 15px;
}

/* No artwork resolved, or the picture 404'd: the well becomes a tint of
   the card and the disc carries the meaning on its own. */
.step-frame.no-thumb .step-media { background: rgba(0, 0, 0, .28); }

/* ---------- arriving: big, in on a curve, then it lands ----------
   Each card starts oversized and off to the side, swings down along a
   short arc, overshoots slightly and settles. They come in one after the
   other so the journey draws itself rather than appearing all at once.

   fill-mode is BACKWARDS, not both: backwards holds the first frame during
   the stagger delay (so nothing flashes before its turn), while leaving no
   transform behind afterwards - "both" would keep the final keyframe and
   quietly kill the hover lift for the rest of the session. */
@keyframes arTileLand {
  0%   { opacity: 0; transform: translate(-46px, -78px) scale(2.15) rotate(-14deg); }
  45%  { opacity: 1; }
  62%  { transform: translate(9px, 12px)   scale(1.07) rotate(5deg); }
  80%  { transform: translate(-4px, -6px)  scale(.96)  rotate(-2deg); }
  100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
}

.step-frame {
  animation: arTileLand .82s cubic-bezier(.24, .9, .32, 1.02) backwards;
  animation-delay: calc(var(--i, 0) * 120ms);
}

/* the little burst of stars as a card touches down */
.step-sparks {
  position: absolute;
  inset: -12%;
  pointer-events: none;
  z-index: 6;
}

.spark {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  opacity: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 L14 10 L24 12 L14 14 L12 24 L10 14 L0 12 L10 10 Z' fill='%23F0C535'/%3E%3C/svg%3E")
    center / contain no-repeat;
  animation: arSpark 800ms ease-out forwards;
}

@keyframes arSpark {
  0%   { opacity: 0; transform: scale(0)              rotate(0deg); }
  35%  { opacity: 1; transform: scale(var(--s, 1))    rotate(50deg); }
  100% { opacity: 0; transform: scale(.18)            rotate(130deg); }
}

/* Motion is decoration here, never information - the journey reads the
   same standing still. */
@media (prefers-reduced-motion: reduce) {
  .step-frame { animation: none; }
  .step-sparks { display: none; }
}

/* ---------- current: the only thing that should pull the eye ---------- */

/* Lands first, then starts breathing - two animations, two delays. */
.activity-step.is-current .step-frame {
  animation:
    arTileLand .82s cubic-bezier(.24, .9, .32, 1.02) backwards,
    arStepGlow 1.9s ease-in-out infinite;
  animation-delay:
    calc(var(--i, 0) * 120ms),
    calc(var(--i, 0) * 120ms + .82s);
}

@media (prefers-reduced-motion: reduce) {
  .activity-step.is-current .step-frame {
    animation: arStepGlow 1.9s ease-in-out infinite;
    animation-delay: 0s;
  }
}

/* The halo is ALWAYS the brand cyan, never the card's own colour. It is a
   spotlight saying "you are here", so it has to mean the same thing on
   every card - a lime card with a lime halo just reads as a brighter lime
   card. White ring first, cyan bloom behind it. */
@keyframes arStepGlow {
  0%, 100% {
    box-shadow:
      0 5px 0 rgba(0, 0, 0, .22),
      0 0 0 5px rgba(255, 255, 255, .55),
      0 0 24px 4px rgba(35, 195, 223, .75);
  }
  50% {
    box-shadow:
      0 5px 0 rgba(0, 0, 0, .22),
      0 0 0 8px rgba(255, 255, 255, .75),
      0 0 44px 12px rgba(35, 195, 223, .95);
  }
}

/* ---------- pending: full colour, deliberately NOT dimmed ----------
   A queue of grey boxes reads as homework. These are the things the child
   has not opened yet, so they should look like the best part of the row. */

/* ---------- done: small, drained, ticked ---------- */

.activity-step.is-done .step-frame {
  filter: saturate(.30) brightness(.62);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .20);
}
.activity-step.is-done .step-check { display: flex; }

.step-check {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: 22px;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .32);
  color: #ffffff;
  z-index: 4;
}

.step-check svg {
  width: 52%;
  height: 52%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}

/* ---------- "this one opens in a new window" ----------
   Set by drawStrip from arResourceMedia()'s embeddable verdict: HTML5
   games, worksheets, crafts and eBooks all live behind X-Frame-Options,
   so they cannot be framed. Marking them means the new tab is expected
   rather than a surprise. */

.activity-step.opens-away .step-media::after {
  content: "";
  position: absolute;
  bottom: 7%;
  left: 7%;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .48)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 4h6v6' stroke='white' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 4 11 13' stroke='white' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5' stroke='white' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 10px 10px no-repeat;
  z-index: 2;
}

/* ---------- the thread between tiles ---------- */

.activity-connector {
  flex: 0 0 auto;
  width: 34px;
  height: 5px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .22);
}
.activity-connector.is-complete { background: var(--kids-cyan); }

/* ---------- RIGHT: Donia, a character, never boxed ---------- */

.remediation-donia {
  height: 125px;
  width: auto;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
  cursor: pointer;
  transform-origin: bottom center;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
  transition: transform 180ms ease, filter 180ms ease;
}

/* she notices you - a one-shot hello, never a loop */
.remediation-donia:hover {
  animation: doniaHello 650ms ease;
  filter:
    drop-shadow(0 6px 10px rgba(0, 0, 0, .20))
    brightness(1.06);
}

@keyframes doniaHello {
  0%   { transform: translateY(0)    rotate(0deg)  scale(1); }
  25%  { transform: translateY(-8px) rotate(-4deg) scale(1.06); }
  50%  { transform: translateY(-3px) rotate(4deg)  scale(1.08); }
  75%  { transform: translateY(-6px) rotate(-2deg) scale(1.05); }
  100% { transform: translateY(0)    rotate(0deg)  scale(1); }
}

/* the JS still marks her while she is narrating */
.remediation-donia.talk { transform: scale(1.06) rotate(-3deg); }

/* ==========================================================================
   CONTENT STAGE - the activity renders straight into the Kids world.
   No card, no border, no shadow, no fill. Deliberately activity-agnostic:
   a game today, a worksheet or a microphone activity later.
   ========================================================================== */

.remediation-content-stage {
  position: relative;
  width: min(96vw, 1600px);
  margin: 0 auto;
  z-index: 10;
}

.remediation-content-stage iframe {
  display: block;
  width: 100%;
  height: calc(100vh - 140px);
  border: 0;
  background: transparent;
}

/* The stage holds its height whether the activity is an iframe or inline
   markup, so a worksheet or a craft fills the same space a game does. */
.remediation-content-stage {
  min-height: calc(100vh - 140px);
}

.remediation-content-stage > * {
  width: 100%;
  max-width: 100%;
}

/* inline (non-iframe) activity renderers fill the stage too */
.remediation-content-stage .ar-sheet,
.remediation-content-stage .ar-pdf {
  min-height: calc(100vh - 140px);
  overflow: auto;
  text-align: center;
}

/* Static preview placeholder only - never shipped to a child. */
.remediation-preview-placeholder {
  width: 100%;
  min-height: calc(100vh - 140px);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .55);
  font-weight: 700;
  text-align: center;
}

/* ---------- completion control ----------
   Games report completion themselves (the shell watches the frame navigate to
   ReportFinishedGame.php, and polls ChildrenProgress as a backstop), so for
   them there is no button at all - that is the normal production behaviour.

   Crafts, worksheets, eBooks, PDFs and EXTERNAL games have no programmatic
   completion event anywhere in the platform. ar_render.php marks those
   'detect: manual'. For exactly those, a compact chip appears inside the
   stage. It is not the old full-width banner button and it never shows on a
   self-reporting activity. */
.remediation-actions {
  display: none;
}

body.ar-needs-manual .remediation-actions {
  display: flex;
  width: min(94vw, 1500px);
  margin: 0 auto;
  padding: 6px 0 10px;
  justify-content: center;
}

body.ar-needs-manual .remediation-finish-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  height: 46px;
  padding: 0 26px;
  border: 2px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: var(--kids-cyan);
  color: #fff;
  font: 700 17px/1 Tahoma, Arial, sans-serif;
  direction: rtl;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
  transition: transform 150ms ease, filter 150ms ease;
}
body.ar-needs-manual .remediation-finish-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
}
body.ar-needs-manual .remediation-finish-btn[disabled] {
  opacity: .45;
  cursor: default;
  transform: none;
}

.remediation-finish-btn {
  display: none;
}

/* elements the JS still writes to, kept out of sight */
.ar-offscreen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- remove legacy/decorative treatment ---------- */

.remediation-arcade-frame,
.remediation-bulbs,
.remediation-side-donia,
.remediation-dark-stage,
.remediation-large-decoration {
  display: none !important;
}

/* ---------- responsive: the journey shrinks, the people stay ---------- */

@media (max-width: 1200px) {
  .remediation-topbar { width: 96vw; gap: 12px; }
  .activity-step.is-pending { width: 80px;  height: 80px; }
  .activity-step.is-current { width: 104px; height: 104px; }
  .activity-step.is-done    { width: 62px;  height: 62px; }
  .activity-connector { width: 24px; }
  .remediation-donia { height: 110px; }
}

@media (max-width: 720px) {
  .remediation-topbar { min-height: 88px; gap: 8px; }
  .activity-step.is-pending { width: 64px; height: 64px; }
  .activity-step.is-current { width: 84px; height: 84px; }
  .activity-step.is-done    { width: 50px; height: 50px; }
  .step-frame { border-radius: 16px; }
  .step-check { border-radius: 16px; }
  .activity-tracker { padding: 40px 30px 34px; gap: 4px; }
  .activity-connector { width: 16px; }
  .activity-tracker { justify-content: flex-start; }
  .remediation-donia { height: 88px; }
  .player-avatar img { width: 54px; height: 54px; }
  .player-avatar h4 { font-size: 12px; max-width: 72px; }
  .remediation-content-stage iframe { height: calc(100vh - 120px); }
}

/* ---------- the world stays decoration, never a defect ----------
   The side dots need a real margin to live in. That margin only exists once
   --kids-w hits its 1560px cap, i.e. above ~1642px of viewport. Below that
   the content is 96vw and any dot at the edge gets sliced in half by the
   game card, which reads as a bug rather than decoration - so they go away
   and the charcoal + purple horizon carries the world on its own. */

@media (max-width: 768px) {
  .kids-purple-ground { height: 190px; bottom: -100px; }
}

@media (max-width: 560px) {
  .kids-purple-ground { height: 150px; bottom: -80px; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .remediation-finish-btn { transition: none; }
}