/* هلا كيدز · طين. Load after tokens.css and style.css. */

.live-site {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  overflow-wrap: break-word;
}

.live-site main {
  max-width: 1280px;
  padding-block-start: var(--space-6);
}

.live-site :is(h1, h2, h3) {
  font-family: var(--font-display);
  font-weight: 600;
}

.live-site :is(button, a.button, input, select, summary) {
  min-block-size: var(--touch-kid);
}

.live-site :is(button, a.button) {
  min-inline-size: var(--touch-kid);
  white-space: normal;
  overflow-wrap: anywhere;
  touch-action: manipulation;
}

.live-site :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: var(--space-1);
}

.live-site .site-head {
  max-width: 1344px;
}

.live-site .site-head nav a {
  min-block-size: var(--touch-kid);
}

.live-site .live-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: var(--space-7);
  margin-block: var(--space-3) var(--space-7);
}

.live-site .live-hero > *,
.live-site .live-layout > *,
.live-site .stage-body > *,
.live-site .world-grid > * {
  min-inline-size: 0;
}

.live-site .hero-copy h1 {
  font-size: clamp(2rem, 4.3vw, 3.5rem);
  line-height: 1.55;
  margin-block-end: var(--space-4);
  text-wrap: balance;
}

.live-site .hero-copy h1 em {
  color: var(--terracotta-deep);
  font-style: normal;
}

.live-site .hero-copy > p {
  max-inline-size: 34rem;
  font-size: 1.125rem;
  line-height: 1.9;
}

.live-site .hero-copy .eyebrow {
  color: var(--ink-muted);
  font-size: .9375rem;
}

.live-site .hero-scene {
  display: grid;
  place-items: center;
  min-inline-size: 0;
  padding: var(--space-2);
}

.live-site :is(.hero-scene, .world-scene, .stage-scenery, .celebration-scene) svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-inline-size: 100%;
}

.live-site .hero-scene svg {
  max-block-size: 28rem;
}

.live-site .facts {
  gap: var(--space-4) var(--space-6);
  margin-block: var(--space-5) 0;
}

.live-site .world-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-5) var(--space-7);
}

.live-site .world-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 2px solid var(--ink-muted);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--ink);
  text-align: start;
  box-shadow: var(--shadow-edge);
  transition: transform 140ms ease-out, border-color 140ms ease-out;
}

.live-site .world-tile > .world-scene {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 11rem;
  padding: var(--space-3) var(--space-2) 0;
  background: var(--surface);
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
}

.live-site .world-label {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-block-start: 1px solid var(--line);
}

.live-site .world-label strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.8;
}

.live-site .world-label span {
  font-family: var(--font-text);
  font-size: .875rem;
  line-height: 1.8;
  color: var(--ink-muted);
}

.live-site .world-tile[aria-pressed="true"],
.live-site .world-tile.is-active {
  border-color: var(--olive-deep);
  background: var(--olive-soft);
  color: var(--ink);
  outline: 1px solid var(--olive-deep);
  outline-offset: 0;
}

.live-site .world-tile[aria-pressed="true"] .world-label,
.live-site .world-tile.is-active .world-label {
  border-block-start-color: var(--olive-deep);
}

.live-site .world-tile:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: var(--space-1);
}

.live-site .filters {
  gap: var(--space-4);
}

.live-site .filters :is(input, select) {
  min-inline-size: 0;
  font-size: 1rem;
}

.live-site .card {
  box-shadow: none;
  border-block-start: 3px solid var(--line);
}

.live-site .card :is(p, .card-meta) {
  line-height: 1.9;
}

.live-site .game-card-art {
  margin: calc(-1 * var(--space-5));
  margin-block-end: var(--space-4);
  padding: var(--space-3);
  background: var(--surface);
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
  border-block-end: 1px solid var(--line);
}

.live-site .game-card-art svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 10rem;
}

.live-site .game-heading {
  margin-block-end: var(--space-5);
  max-inline-size: 62rem;
}

.live-site .game-heading h1 {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  margin-block-end: var(--space-3);
}

.live-site .game-heading p {
  font-size: 1.0625rem;
  line-height: 1.9;
}

.live-site .live-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.live-site #game.play-stage {
  position: relative;
  min-inline-size: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-edge);
}

.live-site .stage-scenery {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
  padding: var(--space-2) var(--space-5);
  background: var(--surface);
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
  border-block-end: 1px solid var(--line);
}

.live-site .stage-scenery svg {
  min-inline-size: 0;
  max-block-size: 8rem;
}

.live-site .stage-label {
  position: relative;
  display: inline-block;
  max-inline-size: 100%;
  padding: var(--space-2) var(--space-4);
  background: var(--olive-soft);
  color: var(--olive-deep);
  border-radius: var(--radius-md);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: .875rem;
  line-height: 1.8;
  text-align: center;
}

.live-site .stage-body {
  min-inline-size: 0;
  padding: var(--space-6);
}

.live-site .game-top {
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
}

.live-site .game-top > * {
  min-inline-size: 0;
}

.live-site .steps {
  flex-wrap: wrap;
  gap: var(--space-2);
}

.live-site .step {
  inline-size: 1.25rem;
  block-size: .5rem;
}

.live-site .prompt {
  max-inline-size: 58rem;
  margin-block-end: var(--space-4);
  font-family: var(--font-text);
  font-size: clamp(1.1875rem, 2.25vw, 1.5rem);
  font-weight: 700;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.live-site .passage {
  font-family: var(--font-lesson);
  font-size: 1.375rem;
  line-height: 2;
  padding: var(--space-5);
  border-inline-start-color: var(--straw-ink);
  overflow-wrap: anywhere;
}

.live-site .live-board {
  position: relative;
  min-inline-size: 0;
  margin-block: var(--space-5);
}

.live-site .play-help {
  margin-block: 0 var(--space-4);
  color: var(--ink-muted);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.9;
}

.live-site .play-piece {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-inline-size: var(--touch-kid);
  min-block-size: var(--touch-kid);
  max-inline-size: 100%;
  padding: var(--space-4);
  border: 2px solid var(--ink-muted);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-edge);
  text-align: center;
  font-family: var(--font-lesson);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.8;
  overflow-wrap: anywhere;
  transition: background-color 140ms ease-out, border-color 140ms ease-out;
}

.live-site .play-piece > span {
  display: block;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.live-site .play-piece[data-token] {
  touch-action: none;
  user-select: none;
}

.live-site .live-board .object-art,
.live-site .drag-ghost .object-art {
  display: block;
  flex: 0 0 auto;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  max-inline-size: 100%;
  margin-inline: auto;
}

.live-site .live-board :is(.is-active, [aria-pressed="true"]),
.live-site .play-piece.is-active {
  background: var(--olive-soft);
  border-color: var(--olive-deep);
  color: var(--olive-deep);
  box-shadow: var(--shadow-edge);
}

.live-site .live-board .is-active {
  outline: 1px solid var(--olive-deep);
  outline-offset: 0;
}

.live-site .live-board .is-linked {
  background: var(--olive-soft);
  border-color: var(--olive-deep);
  border-style: double;
  color: var(--olive-deep);
  opacity: 1;
}

.live-site .live-board :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: var(--space-1);
}

.live-site .pick-garden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-4);
  padding-block: var(--space-2);
}

.live-site .pick-garden .play-piece {
  min-block-size: 10rem;
}

.live-site .count-workshop {
  display: grid;
  gap: var(--space-4);
}

.live-site .counter-tray {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-block-size: 11rem;
  padding: var(--space-5);
  border: 2px dashed var(--ink-muted);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.live-site .counter-object {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--touch-kid);
  min-block-size: var(--touch-kid);
  padding: var(--space-1);
  border: 1.5px solid var(--ink-muted);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-edge);
}

.live-site .counter-object :is(svg, .object-art) {
  inline-size: 3rem;
  block-size: 3rem;
}

.live-site .build-readout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  inline-size: fit-content;
  max-inline-size: 100%;
  min-inline-size: var(--touch-kid);
  min-block-size: var(--touch-kid);
  margin-inline: auto;
  padding: var(--space-2) var(--space-5);
  background: var(--straw-soft);
  color: var(--ink);
  border-radius: var(--radius-md);
  font-family: var(--font-lesson);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.live-site .build-readout > span:not([data-quantity]) {
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 700;
}

.live-site .counter-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.live-site .supply-button {
  min-inline-size: min(100%, 11rem);
  max-inline-size: 100%;
  min-block-size: var(--touch-kid);
  padding: var(--space-3) var(--space-5);
  background: var(--surface-sunken);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  font-weight: 700;
}

.live-site .path-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--space-4);
  margin-block: var(--space-4) var(--space-5);
}

.live-site .path-slot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-3);
  min-inline-size: 0;
  min-block-size: 9rem;
  padding: var(--space-4);
  border: 2px dashed var(--ink-muted);
  border-radius: var(--radius-lg);
  background: var(--straw-soft);
  color: var(--ink);
  text-align: center;
  overflow-wrap: anywhere;
}

.live-site .path-slot > :is(span, small, strong) {
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8;
}

.live-site .path-track.word-path {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.live-site .word-path .path-slot {
  flex: 1 1 var(--touch-kid);
  min-inline-size: var(--touch-kid);
  min-block-size: 7rem;
  padding: var(--space-1);
}

.live-site .path-eject {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
  min-block-size: var(--touch-kid);
  inline-size: 100%;
  max-inline-size: 100%;
  padding: var(--space-3);
  background: var(--surface-raised);
  color: var(--ink);
  font-family: var(--font-lesson);
  font-size: 1.25rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.live-site .piece-bank {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-3);
  min-inline-size: 0;
  margin-block: var(--space-4);
}

.live-site .piece-bank > .play-piece {
  flex: 1 1 9rem;
  min-inline-size: 0;
}

.live-site .sort-workshop {
  display: grid;
  gap: var(--space-3);
}

.live-site .sort-bins {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  align-items: stretch;
  gap: var(--space-4);
}

.live-site .sort-bin {
  min-inline-size: 0;
  border: 2px dashed var(--ink-muted);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.live-site .sort-bin > h3 {
  margin: 0;
  font-family: var(--font-text);
  font-size: inherit;
}

.live-site .bin-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--touch-kid);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-block-end: 1px solid var(--ink-muted);
  border-radius: 0;
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
  background: var(--surface-sunken);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
  overflow-wrap: anywhere;
}

.live-site .bin-header button {
  inline-size: 100%;
  min-inline-size: 0;
  background: var(--surface-sunken);
  color: var(--ink);
}

.live-site .bin-contents {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  min-block-size: 8rem;
  padding: var(--space-3);
}

.live-site .play-piece.mini {
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  font-size: 1.125rem;
  text-align: start;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.live-site .play-piece.mini .object-art {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  margin-inline: 0;
}

.live-site .live-board .is-over {
  border-color: var(--olive-deep);
  border-style: solid;
  background: var(--olive-soft);
  color: var(--olive-deep);
  outline: 2px solid var(--olive-deep);
  outline-offset: var(--space-1);
}

.live-site .connect-workshop {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(2rem, 8vw, 6rem);
  padding-block: var(--space-2);
}

.live-site .connect-column {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: stretch;
  grid-auto-rows: minmax(var(--touch-kid), auto);
  gap: var(--space-4);
  min-inline-size: 0;
}

.live-site .connect-column button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 7.5rem;
  padding: var(--space-3);
  background: var(--surface);
  font-family: var(--font-lesson);
  font-size: 1.25rem;
  line-height: 1.8;
  text-align: center;
  overflow-wrap: anywhere;
}

.live-site .connection-layer {
  position: absolute;
  z-index: 0;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  pointer-events: none;
}

.live-site .connection-layer :is(path, line, polyline) {
  fill: none;
  stroke: var(--olive-deep);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.live-site .connection-layer circle {
  fill: var(--olive-deep);
  stroke: var(--surface-raised);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.live-site .drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  z-index: 100;
  pointer-events: none;
  inline-size: 12rem;
  max-inline-size: min(20rem, calc(100vw - var(--space-6)));
  border: 2px solid var(--olive-deep);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-edge);
  transition: none;
}

.live-site .drag-source {
  opacity: .65;
}

.live-site :is(.play-feedback, .feedback.good) {
  overflow-wrap: anywhere;
  font-size: 1.0625rem;
  line-height: 1.9;
}

.live-site .feedback.good,
.live-site .play-feedback.good {
  padding: var(--space-4) var(--space-5);
  background: var(--olive-soft);
  color: var(--olive-deep);
  border-inline-start: 4px solid var(--olive-deep);
  border-radius: var(--radius-md);
}

.live-site .hint {
  padding: var(--space-4) var(--space-5);
  font-size: 1rem;
  line-height: 1.9;
}

.live-site .game-actions {
  align-items: stretch;
  gap: var(--space-3);
  padding-block-start: var(--space-4);
  margin-block-start: var(--space-5);
  border-block-start: 1px solid var(--line);
}

.live-site .game-actions button {
  min-block-size: var(--touch-kid);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.8;
}

.live-site .paper-drawer {
  min-inline-size: 0;
  border: 1.5px solid var(--ink-muted);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
}

.live-site .paper-drawer > summary {
  display: list-item;
  list-style-position: inside;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.live-site .paper-drawer > summary::marker {
  color: var(--ink-muted);
}

.live-site .paper-drawer > :not(summary) {
  margin: 0;
  padding: var(--space-5);
  border-block-start: 1px solid var(--line);
}

.live-site .paper-drawer :is(.button, button) {
  margin-block: var(--space-2);
  max-inline-size: 100%;
}

.live-site .celebration-scene {
  inline-size: min(100%, 26rem);
  margin: 0 auto var(--space-5);
}

.live-site :is(.completion, .pause) {
  padding: var(--space-6);
}

.live-site .completion .home-idea {
  text-align: start;
  line-height: 1.9;
}

@media (hover: hover) and (pointer: fine) {
  .live-site .world-tile:hover {
    transform: translateY(-2px);
    border-color: var(--olive-deep);
  }

  .live-site .play-piece:not(:disabled):hover {
    border-color: var(--olive-deep);
  }

  .live-site .world-tile:hover {
    background: var(--surface-raised);
  }

  .live-site .world-tile[aria-pressed="true"]:hover {
    background: var(--olive-soft);
  }
}

@media (max-width: 1000px) {
  .live-site .live-hero {
    gap: var(--space-5);
  }

  .live-site .world-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .live-site .stage-body {
    padding: var(--space-5);
  }
}

@media (max-width: 680px) {
  .live-site main {
    padding: var(--space-5) var(--space-4) var(--space-7);
  }

  .live-site .live-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    margin-block-end: var(--space-6);
  }

  .live-site .hero-copy h1 {
    font-size: 2rem;
  }

  .live-site .hero-copy > p {
    font-size: 1.0625rem;
  }

  .live-site .hero-scene {
    padding: 0;
  }

  .live-site .hero-scene svg {
    max-block-size: 18rem;
  }

  .live-site .world-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-block-end: var(--space-6);
  }

  .live-site .world-label {
    padding: var(--space-3);
  }

  .live-site .world-label strong {
    font-size: 1rem;
  }

  .live-site .world-tile > .world-scene {
    padding: var(--space-2) var(--space-1) 0;
  }

  .live-site .stage-scenery {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: var(--space-2) var(--space-3);
  }

  .live-site .stage-scenery svg {
    max-block-size: 6rem;
  }

  .live-site .stage-body {
    padding: var(--space-4);
  }

  .live-site .stage-label {
    font-size: .875rem;
    padding: var(--space-2) var(--space-3);
  }

  .live-site .game-heading h1 {
    font-size: 1.875rem;
  }

  .live-site .passage {
    padding: var(--space-4);
    font-size: 1.25rem;
  }

  .live-site .play-piece {
    padding: var(--space-3);
    font-size: 1.25rem;
  }

  .live-site .live-board .object-art {
    inline-size: 3.5rem;
    block-size: 3.5rem;
  }

  .live-site .counter-object :is(svg, .object-art) {
    inline-size: 3rem;
    block-size: 3rem;
  }

  .live-site .counter-tray {
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .live-site .path-track {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
    gap: var(--space-3);
  }

  .live-site .path-slot {
    padding: var(--space-3);
  }

  .live-site .path-eject {
    padding: var(--space-2);
    font-size: 1.125rem;
  }

  .live-site .connect-workshop {
    gap: 2rem;
  }

  .live-site .connect-column {
    gap: var(--space-3);
  }

  .live-site .connect-column button {
    padding: var(--space-2);
    font-size: 1.0625rem;
  }

  .live-site .game-actions button {
    flex: 1 1 8rem;
  }

  .live-site .paper-drawer > summary,
  .live-site .paper-drawer > :not(summary) {
    padding: var(--space-4);
  }

  .live-site :is(.completion, .pause) {
    padding: var(--space-5) var(--space-4);
  }
}

@media (max-width: 380px) {
  .live-site .filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .live-site .pick-garden {
    grid-template-columns: minmax(0, 1fr);
  }

  .live-site .pick-garden .play-piece {
    min-block-size: 8rem;
  }

  .live-site .sort-bins {
    grid-template-columns: minmax(0, 1fr);
  }

  .live-site .connect-workshop {
    gap: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-site *,
  .live-site *::before,
  .live-site *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }

  .live-site .world-tile:hover,
  .live-site .play-piece:not(:disabled):hover {
    transform: none;
  }
}

@media (forced-colors: active) {
  .live-site .live-board .is-active,
  .live-site .world-tile[aria-pressed="true"] {
    outline-width: 3px;
    outline-style: double;
  }

  .live-site .connection-layer :is(path, line, polyline) {
    stroke-width: 4;
  }
}
.live-site .object-art,.live-site .object-art *{pointer-events:none}

/* رحلة البداية والرجعة: خلي الفعل واضح بدون أدوات تغطي اللعب. */
.live-site .resume-card { margin-block:var(--space-3); padding:var(--space-4); background:var(--olive-soft); color:var(--ink); border-radius:var(--radius-lg); }
.live-site .resume-card p { margin:0 0 var(--space-2); font-size:.875rem; }
.live-site .resume-card h2 { font-size:1.375rem; margin:0 0 var(--space-3); }
.live-site .resume-card .browse-other { display:flex; align-items:center; min-block-size:var(--touch-kid); color:var(--olive-deep); margin-block-start:var(--space-2); }
.live-site .card-age { color:var(--olive-deep); margin-block:var(--space-2); font-weight:700; }
.live-site.in-game .live-layout { max-inline-size:960px; margin-inline:auto; }
.live-site .game-actions { display:block; }
.live-site .answer-actions,.live-site .edit-actions { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.live-site .answer-actions > button { flex:1 1 8rem; }
.live-site .edit-actions { margin-block-start:var(--space-3); }
.live-site .edit-actions > button { flex:1 1 8rem; background:var(--surface); }
.live-site .stage-body > .feedback:empty { display:none; }
.live-site .count-workshop { gap:var(--space-2); }
.live-site .count-workshop .play-help { margin:0; }
.live-site .count-workshop .build-readout { min-block-size:var(--touch-kid); padding:var(--space-1) var(--space-4); font-size:2rem; }
.live-site .count-workshop .counter-tray { min-block-size:6rem; padding:var(--space-2); }
.live-site .count-workshop .counter-tray p { margin:0; }
.live-site .count-workshop .supply-button { min-inline-size:var(--touch-kid); padding:var(--space-2) var(--space-4); }
.live-site .count-workshop .supply-button svg { inline-size:2rem; block-size:2rem; }
.live-site .game-top,.live-site .prompt { scroll-margin-block-start:var(--space-4); }
@media (max-width:680px) {
 .live-site .site-head nav a { min-inline-size:var(--touch-kid); }
 .live-site .resume-card { padding:var(--space-3); }
 .live-site.in-game .stage-scenery { display:none; }
 .live-site .game-top { gap:var(--space-2); margin-block-end:var(--space-3); }
 .live-site .stage-body { padding:var(--space-3); }
 .live-site .stage-body .prompt { font-size:1.125rem; margin-block-end:var(--space-3); }
 .live-site .stage-body > .dot-groups { margin-block:var(--space-2); }
 .live-site .game-actions { margin-block-start:var(--space-3); padding-block-start:var(--space-3); }
 .live-site .counter-controls { gap:var(--space-2); }
 .live-site .counter-controls > button { flex:1 1 6rem; }
 .live-site .count-workshop .play-help { font-size:.9375rem; }
}

.starter-picker{display:grid;gap:var(--space-2);padding:var(--space-4);margin-block:var(--space-4);background:var(--surface-raised);border:1px solid var(--ink-muted);border-radius:var(--radius-md)}
.starter-picker label{font-weight:700}.starter-picker select{min-height:var(--touch-kid);width:100%;max-width:28rem}.starter-picker p{margin:0}

.play-help-demo{margin-block:var(--space-3);border:1px solid var(--ink-muted);border-radius:var(--radius-md);background:var(--surface-raised)}.play-help-demo summary{padding:var(--space-3);min-height:var(--touch-kid);cursor:pointer;font-weight:700}.demo-body{padding:0 var(--space-3) var(--space-3)}.demo-body svg{display:block;width:100%;height:80px}.demo-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}.demo-actions button{flex:1;min-height:var(--touch-kid)}

.save-banner{font-size:.875rem;line-height:1.7;margin-block:var(--space-2);padding:var(--space-2) var(--space-3);border-inline-start:3px solid var(--ink-muted);color:var(--ink);background:var(--surface-raised)}.save-banner[data-saved="true"]{border-color:var(--olive-deep)}

.home-activity{margin-block:var(--space-4);border:1px solid var(--olive-deep);border-radius:var(--radius-md);background:var(--olive-soft);color:var(--ink)}.home-activity summary{min-height:var(--touch-kid);padding:var(--space-4);font-weight:700;cursor:pointer}.home-activity>div{padding:0 var(--space-4) var(--space-4)}.home-activity button{min-height:var(--touch-kid)}

.prep-materials{padding-inline-start:var(--space-5);margin-block:var(--space-3)}.prep-materials li{padding-block:var(--space-1);overflow-wrap:anywhere}.paper-drawer section+section{margin-block-start:var(--space-5);padding-block-start:var(--space-3);border-block-start:1px solid var(--line)}.paper-drawer p{overflow-wrap:anywhere}

.question-audio{margin-block:var(--space-3)}.question-audio button{min-height:var(--touch-kid)}.question-audio p:empty{display:none}.question-audio p{font-size:.875rem;line-height:1.7}