/* ==========================================================================
   Travel Brains — tablet-first kids' game shell
   ========================================================================== */

:root {
  --ink: #17233c;
  --ink-soft: #4a5b7a;
  --paper: #f2f6fb;
  --card: #ffffff;
  --line: #e0e7f1;

  --sky-1: #3a7bf0;
  --sky-2: #7a5cf0;
  --sun: #ffb020;
  --mint: #18bda9;
  --coral: #ef3b52;
  --grass: #3fbf6a;

  --shadow-s: 0 2px 6px rgba(23, 35, 60, .1);
  --shadow-m: 0 10px 24px rgba(23, 35, 60, .16);
  --shadow-l: 0 20px 48px rgba(23, 35, 60, .26);

  --r-s: 12px;
  --r-m: 20px;
  --r-l: 30px;

  --font: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI",
          system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

/* a sunny sky rather than a dark shell — the app is for children, after all */
body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(62vw 46vh at 10% -8%, rgba(255, 231, 150, .9), rgba(255, 231, 150, 0) 68%),
    radial-gradient(52vw 40vh at 96% 8%, rgba(180, 245, 214, .55), rgba(180, 245, 214, 0) 70%),
    linear-gradient(180deg, #74c6f2 0%, #a5dcf7 34%, #d8f0ff 64%, #fdf3dc 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

button { font-family: inherit; cursor: pointer; }

/* inline artwork ---------------------------------------------------------- */

svg.art { display: block; width: 100%; height: 100%; }

.fig {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  flex: 0 0 auto;
}

/* ---------- app shell ---------------------------------------------------- */

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
           max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

#topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border-radius: var(--r-l);
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 6px 20px rgba(20, 60, 96, .12);
  backdrop-filter: blur(10px);
}

#topbar-title { flex: 1 1 auto; min-width: 0; }

#screen-title {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#screen-subtitle {
  margin: 2px 0 0;
  font-size: clamp(12px, 1.5vw, 16px);
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#topbar-tools { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  padding: 13px;
  color: var(--ink);
  border: 2px solid #dfe8f3;
  border-radius: 50%;
  background: #f1f6fc;
  transition: transform .12s ease, background .12s ease;
}

.icon-btn:active { transform: scale(.92); background: #e2ecf8; }
.icon-btn[hidden] { display: none; }
.icon-btn.is-off { opacity: .45; }

.player-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 18px 4px 4px;
  border: 2px solid #dfe8f3;
  border-radius: 999px;
  background: #f1f6fc;
  color: var(--ink);
  transition: transform .12s ease;
}

.player-chip:active { transform: scale(.95); }

.player-chip__face {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 2px #e3ecf7;
}

.player-chip__name {
  font-size: 16px;
  font-weight: 700;
  max-width: 9ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  border-radius: var(--r-l);
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 18px 42px rgba(20, 60, 96, .18);
  overflow: hidden;
  outline: none;
}

#stage.stage--open-air {
  background: none;
  border-color: transparent;
  box-shadow: none;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vw, 16px);
  padding: clamp(14px, 2.2vw, 26px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  animation: screen-in .28s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(14px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

/* ---------- shared bits -------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 26px;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sky-1), #2358cc);
  box-shadow: var(--shadow-m);
  transition: transform .12s ease, filter .12s ease;
}

.btn:active { transform: translateY(2px) scale(.98); filter: brightness(.95); }
.btn--ghost { background: #fff; color: var(--ink); box-shadow: var(--shadow-s); border: 2px solid var(--line); }
.btn--warm  { background: linear-gradient(180deg, #ffb84d, #f08c00); }
.btn--mint  { background: linear-gradient(180deg, #25cfb9, #0c9c8c); }
.btn--sm    { min-height: 46px; padding: 0 18px; font-size: 15px; }
.btn--big   { min-height: 68px; padding: 0 40px; font-size: 22px; }
.fig--btn   { width: 1.15em; height: 1.15em; }

.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row--center { justify-content: center; }
.spacer { flex: 1 1 auto; }

.section-title {
  margin: 0;
  font-size: clamp(16px, 1.9vw, 21px);
  font-weight: 800;
  color: var(--ink);
}

.hint {
  margin: 0;
  max-width: 68ch;
  font-size: clamp(13px, 1.5vw, 16px);
  font-weight: 600;
  color: var(--ink-soft);
}

.hud { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--shadow-s);
}

.pill b { font-variant-numeric: tabular-nums; }
.pill--quiet { font-weight: 700; color: var(--ink-soft); background: #e8eef7; box-shadow: none; }

/* picture choices (memory setup) ------------------------------------------ */

.choice-row { display: flex; flex-wrap: wrap; gap: clamp(8px, 1.4vw, 14px); }

.choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 18px 10px;
  font-weight: 800;
  color: var(--ink-soft);
  background: #fff;
  border: 3px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
  transition: transform .12s ease, border-color .12s ease, color .12s ease;
}

.choice[aria-pressed="true"] { border-color: var(--sky-1); color: var(--ink); transform: translateY(-2px); }
.choice:active { transform: scale(.96); }
.choice__art { width: clamp(48px, 6vw, 68px); height: clamp(48px, 6vw, 68px); }
.choice__grid { width: clamp(52px, 6.6vw, 74px); height: clamp(34px, 4.2vw, 48px); color: #c6d2e2; }
.choice[aria-pressed="true"] .choice__grid { color: var(--sky-1); }
.choice__label { font-size: clamp(13px, 1.5vw, 16px); }

/* ---------- home --------------------------------------------------------- */

.home-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.home-backdrop svg { display: block; width: 100%; height: 100%; }

.home-grid {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
  align-content: center;
}

/* a tall screen gets two columns instead of four */
@media (orientation: portrait) {
  .home-grid { grid-template-columns: repeat(2, 1fr); }
}

.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  min-height: clamp(128px, 20vh, 200px);
  padding: 14px 16px;
  text-align: left;
  color: #fff;
  border: 3px solid rgba(255, 255, 255, .5);
  border-radius: var(--r-l);
  box-shadow: 0 16px 30px rgba(20, 60, 96, .28);
  overflow: hidden;
  transition: transform .16s cubic-bezier(.2, .8, .3, 1), box-shadow .16s ease;
}

.game-card:active { transform: translateY(3px) scale(.985); box-shadow: 0 6px 14px rgba(20, 60, 96, .26); }
.game-card--memory    { background: linear-gradient(150deg, #7a63f5, #3d2ac0); }
.game-card--traffic   { background: linear-gradient(150deg, #ff8158, #d92a4c); }
.game-card--recycling { background: linear-gradient(150deg, #3fcb78, #0d8f66); }
.game-card--coloring  { background: linear-gradient(150deg, #ffb03a, #ef5d92); }
.game-card--shadows   { background: linear-gradient(150deg, #6f8fd8, #2f3f78); }
.game-card--patterns  { background: linear-gradient(150deg, #2fc4d6, #1071a8); }
.game-card--maze      { background: linear-gradient(150deg, #b487f0, #6534b8); }
.game-card--jigsaw    { background: linear-gradient(150deg, #ff9a5a, #d1552a); }

.game-card__art {
  width: clamp(52px, 6vw, 78px);
  height: clamp(52px, 6vw, 78px);
  margin-bottom: 4px;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .22));
}

.game-card__title { font-size: clamp(16px, 1.6vw, 20px); font-weight: 800; }
.game-card__text { font-size: clamp(11px, 1.05vw, 13px); font-weight: 600; opacity: .86; line-height: 1.32; }

/* ---------- memory ------------------------------------------------------- */

.board-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}

.memory-board { display: grid; }

.mem-card {
  position: relative;
  padding: 0;
  border: none;
  background: none;
  perspective: 900px;
  min-width: 0;
  min-height: 0;
}

.mem-card__inner {
  position: absolute;
  inset: 0;
  border-radius: var(--r-m);
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.2, .8, .3, 1);
  box-shadow: var(--shadow-s);
}

.mem-card.is-open .mem-card__inner,
.mem-card.is-done .mem-card__inner { transform: rotateY(180deg); }

.mem-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8%;
  border-radius: var(--r-m);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.mem-face--back { background: linear-gradient(150deg, #7a63f5, #3d2ac0); }

.mem-face__pattern {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 3px solid rgba(255, 255, 255, .3);
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .3) 3px, transparent 3.5px),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .3) 3px, transparent 3.5px);
  background-size: 26px 26px;
}

.mem-face--front {
  background: #fff;
  border: 3px solid var(--line);
  transform: rotateY(180deg);
}

.mem-card.is-done .mem-face--front {
  border-color: var(--grass);
  background: #eefaf2;
  animation: pop .4s ease;
}

@keyframes pop {
  0%   { transform: rotateY(180deg) scale(1); }
  45%  { transform: rotateY(180deg) scale(1.08); }
  100% { transform: rotateY(180deg) scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-7px); }
  75%      { transform: translateX(7px); }
}

/* ---------- traffic jam -------------------------------------------------- */

.puzzle-row { display: flex; flex-wrap: wrap; gap: clamp(8px, 1.4vw, 16px); }

.puzzle-btn {
  width: clamp(88px, 11vw, 128px);
  padding: 8px;
  border: 3px solid var(--line);
  border-radius: var(--r-m);
  background: #fff;
  box-shadow: var(--shadow-s);
  transition: transform .12s ease, border-color .12s ease;
}

.puzzle-btn:active { transform: scale(.95); }
.puzzle-btn:hover { border-color: var(--sky-1); }

.traffic-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden; /* lets the winning car drive off the edge without scrolling */
}

.traffic-frame { position: relative; }

.traffic-board {
  position: absolute;
  left: 0;
  top: 0;
  background: #4b5568;
  border-radius: var(--r-m);
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .12), var(--shadow-m);
  touch-action: none;
}

.traffic-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(6, 1fr);
  padding: var(--pad);
  pointer-events: none;
}

.traffic-cell { border: 1px dashed rgba(255, 255, 255, .12); border-radius: 6px; }

.traffic-exit {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 4px 0;
  background: repeating-linear-gradient(45deg, #ffd45e 0 10px, #f5b800 10px 20px);
  border-radius: 0 12px 12px 0;
}

.traffic-exit__arrow { display: block; width: 60%; height: 70%; }

.car {
  position: absolute;
  touch-action: none;
  transition: left .16s ease, top .16s ease;
  will-change: left, top;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35));
}

.car.is-dragging { transition: none; z-index: 5; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .4)); }
.car--hero {
  z-index: 3;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .95)) drop-shadow(0 3px 3px rgba(0, 0, 0, .35));
}
.car.is-blocked { animation: shake .3s ease; }

/* ---------- recycling ---------------------------------------------------- */

.bin-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: clamp(8px, 1.6vw, 18px);
}

.bin-legend__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: #fff;
  border: 3px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
}

.bin-legend__art { width: clamp(52px, 7vw, 82px); height: clamp(64px, 9vw, 104px); }
.bin-legend__label { font-size: clamp(12px, 1.5vw, 16px); font-weight: 800; color: var(--ink-soft); text-align: center; }

.yard {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: inset 0 0 0 3px rgba(23, 35, 60, .06);
  touch-action: none;
}

.yard__scene { position: absolute; inset: 0; pointer-events: none; }
.yard__scene svg { display: block; width: 100%; height: 100%; }

/* the strip of grass in front of the fence, where the rubbish lies */
.yard__litter { position: absolute; left: 6%; right: 6%; top: 44%; height: 18%; }

/* a tall screen leaves far more lawn, so spread the rubbish out over it */
@media (orientation: portrait) {
  .yard__litter { top: 46%; height: 28%; }
}

.litter-item {
  position: absolute;
  width: clamp(52px, 7.4vw, 90px);
  height: clamp(52px, 7.4vw, 90px);
  touch-action: none;
  cursor: grab;
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
  filter: drop-shadow(0 5px 5px rgba(30, 60, 30, .35));
  transition: transform .16s ease;
}

.litter-item:active { transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)) scale(1.08); }
.litter-item.is-returning { transition: left .22s ease, top .22s ease; }

.litter-item.is-dragging {
  position: fixed;
  z-index: 40;
  cursor: grabbing;
  transform: scale(1.18) rotate(-4deg);
  filter: drop-shadow(0 14px 14px rgba(20, 40, 20, .4));
  pointer-events: none;
}

.bins {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(4px, 1vw, 14px);
  padding: 0 clamp(6px, 1.4vw, 18px) clamp(6px, 1.2vw, 14px);
  align-items: end;
}

.bin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: transform .16s cubic-bezier(.2, .8, .3, 1), filter .16s ease;
}

.bin__art {
  width: 100%;
  max-width: clamp(70px, 12vw, 130px);
  height: clamp(68px, 13vh, 148px);
  filter: drop-shadow(0 6px 6px rgba(20, 40, 20, .3));
}

.bin__label {
  padding: 3px 12px;
  font-size: clamp(11px, 1.4vw, 15px);
  font-weight: 800;
  color: #17233c;
  text-align: center;
  background: rgba(255, 255, 255, .88);
  border-radius: 999px;
  white-space: nowrap;
}

.bin.is-target { transform: translateY(-12px) scale(1.05); }
.bin.is-happy  { animation: bin-pop .4s ease; }
.bin.is-wrong  { animation: shake .34s ease; }
.bin.is-hint   { animation: bin-hint 1.4s ease; }

@keyframes bin-pop {
  0%, 100% { transform: translateY(0) scale(1); }
  40%      { transform: translateY(-10px) scale(1.08); }
}

@keyframes bin-hint {
  0%, 100% { transform: translateY(0); filter: none; }
  20%, 60% { transform: translateY(-14px); filter: brightness(1.2) drop-shadow(0 0 14px rgba(255, 255, 255, .9)); }
}

/* ---------- colouring ---------------------------------------------------- */

.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(10px, 1.6vw, 18px);
}

.page-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 10px 8px;
  background: #fff;
  border: 3px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
  transition: transform .12s ease, border-color .12s ease;
}

.page-btn:active { transform: scale(.96); }
.page-btn:hover { border-color: var(--sky-1); }
.page-btn__art { width: 100%; aspect-ratio: 4 / 3; }
.page-btn__label { font-size: clamp(12px, 1.5vw, 16px); font-weight: 800; color: var(--ink-soft); }

.hud--tools { gap: 8px 14px; }
.tool-actions { display: flex; gap: 8px; }

.crayons { display: flex; flex-wrap: wrap; gap: 6px; }

.crayon {
  width: clamp(30px, 3.1vw, 42px);
  height: clamp(30px, 3.1vw, 42px);
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--crayon);
  box-shadow: 0 2px 5px rgba(23, 35, 60, .22);
  transition: transform .12s ease, box-shadow .12s ease;
}

.crayon[aria-pressed="true"] {
  transform: translateY(-4px) scale(1.14);
  box-shadow: 0 0 0 3px var(--ink), 0 6px 12px rgba(23, 35, 60, .28);
}

.sizes { display: flex; gap: 6px; }

.size {
  width: clamp(34px, 3.5vw, 46px);
  height: clamp(34px, 3.5vw, 46px);
  display: grid;
  place-items: center;
  padding: 0;
  background: #fff;
  border: 3px solid var(--line);
  border-radius: 14px;
  transition: transform .12s ease, border-color .12s ease;
}

.size__dot { border-radius: 50%; background: var(--ink-soft); }
.size[aria-pressed="true"] { border-color: var(--sky-1); }
.size[aria-pressed="true"] .size__dot { background: var(--sky-1); }
.size:active { transform: scale(.94); }

.btn.is-on { background: linear-gradient(180deg, var(--sky-1), #2358cc); color: #fff; border-color: transparent; }

.paper-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}

.paper {
  position: relative;
  background: #fffdf7;
  border-radius: var(--r-m);
  box-shadow: 0 10px 26px rgba(23, 35, 60, .18);
  overflow: hidden;
  touch-action: none;
}

.paper__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

.paper__lines { position: absolute; inset: 0; pointer-events: none; }
.paper__lines svg { width: 100%; height: 100%; }

/* ---------- shadow match ------------------------------------------------- */

.choice__scene {
  width: clamp(72px, 9vw, 110px);
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
}

.choice__scene svg { display: block; width: 100%; height: 100%; }

.shadow-board {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vw, 20px);
  touch-action: none;
}

.shadow-perch {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}

.shadow-subject {
  width: clamp(90px, 15vh, 190px);
  height: clamp(90px, 15vh, 190px);
  padding: 8px;
  background: #fff;
  border: 3px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-m);
  cursor: grab;
  touch-action: none;
  animation: pop-in .3s ease both;
}

.shadow-subject.is-dragging {
  position: fixed;
  z-index: 40;
  cursor: grabbing;
  animation: none;
  transform: scale(1.08) rotate(-3deg);
  box-shadow: var(--shadow-l);
  pointer-events: none;
}

.shadow-row {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: clamp(8px, 2vw, 26px);
}

.shadow-slot {
  position: relative;
  width: clamp(80px, 14vh, 176px);
  height: clamp(80px, 14vh, 176px);
  padding: 8px;
  background: #e6ecf5;
  border: 3px solid transparent;
  border-radius: var(--r-m);
  box-shadow: inset 0 2px 6px rgba(23, 35, 60, .12);
  transition: transform .14s ease, border-color .14s ease;
}

.shadow-slot__dark,
.shadow-slot__real { position: absolute; inset: 8px; }
.shadow-slot__dark { filter: brightness(0); opacity: .78; }
.shadow-slot__real { opacity: 0; transition: opacity .35s ease; }
.shadow-slot.is-target { transform: translateY(-8px) scale(1.05); border-color: var(--sky-1); }
.shadow-slot.is-wrong { animation: shake .34s ease; }
.shadow-slot.is-solved { background: #eafaf0; border-color: var(--grass); }
.shadow-slot.is-solved .shadow-slot__dark { opacity: 0; }
.shadow-slot.is-solved .shadow-slot__real { opacity: 1; }

/* ---------- what comes next ---------------------------------------------- */

.pattern-board {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 2vw, 24px);
}

.hint--center { text-align: center; }

.pattern-strip {
  display: flex;
  justify-content: center;
  gap: clamp(5px, 1vw, 12px);
}

.pattern-cell {
  flex: 1 1 0;
  min-width: 0;
  max-width: clamp(64px, 11vh, 128px);
  aspect-ratio: 1;
  padding: 6px;
  background: #fff;
  border: 3px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
}

.pattern-cell--slot {
  display: grid;
  place-items: center;
  background: #e8eef7;
  border-style: dashed;
  border-color: #a9bad2;
  box-shadow: none;
}

.pattern-slot__mark { font-size: clamp(22px, 4vw, 40px); font-weight: 800; color: #90a4c0; }
.pattern-cell.is-filled { background: #eafaf0; border-style: solid; border-color: var(--grass); animation: pop .4s ease; }

.pattern-options {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 2vw, 22px);
}

.pattern-option {
  width: clamp(74px, 13vh, 150px);
  height: clamp(74px, 13vh, 150px);
  padding: 8px;
  background: #fff;
  border: 3px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-m);
  transition: transform .12s ease, border-color .12s ease;
}

.pattern-option:hover { border-color: var(--sky-1); }
.pattern-option:active { transform: scale(.94); }
.pattern-option.is-wrong { animation: shake .34s ease; border-color: var(--coral); }

/* ---------- maze --------------------------------------------------------- */

.maze-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}

.maze-frame {
  position: relative;
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--shadow-m);
  touch-action: none;
}

.maze-svg { display: block; width: 100%; height: 100%; touch-action: none; }

/* ---------- jigsaw ------------------------------------------------------- */

.jig-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}

.jig-board {
  position: relative;
  background: #e6ecf5;
  border-radius: var(--r-m);
  box-shadow: inset 0 2px 8px rgba(23, 35, 60, .16);
  overflow: hidden;
  touch-action: none;
}

.jig-board.is-complete { box-shadow: 0 0 0 4px var(--grass), var(--shadow-m); }

.jig-ghost {
  position: absolute;
  inset: 0;
  opacity: .16;
  pointer-events: none;
}

.jig-ghost svg { display: block; width: 100%; height: 100%; }

.jig-tray {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: clamp(84px, 17vh, 150px);
  padding: 8px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #e3eaf4;
  border-radius: var(--r-m);
  touch-action: pan-x;
}

.jig-piece {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(23, 35, 60, .3);
  cursor: grab;
  touch-action: none;
}

.jig-piece__inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.jig-piece__art { position: absolute; }
.jig-piece__art svg { display: block; width: 100%; height: 100%; }

.jig-piece.is-dragging {
  position: fixed;
  z-index: 40;
  cursor: grabbing;
  box-shadow: var(--shadow-l);
  pointer-events: none;
}

.jig-piece.is-placed {
  position: absolute;
  border-radius: 0;
  box-shadow: none;
  cursor: default;
  animation: pop .3s ease;
}

/* ---------- modal -------------------------------------------------------- */

#modal-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(9, 18, 32, .62);
  backdrop-filter: blur(4px);
  animation: fade-in .2s ease both;
}

#modal-root[hidden] { display: none; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: clamp(20px, 3vw, 32px);
  text-align: center;
  background: var(--card);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-l);
  animation: pop-in .34s cubic-bezier(.22, 1, .3, 1) both;
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: scale(1); }
}

.modal h2 { margin: 0 0 6px; font-size: clamp(23px, 3.2vw, 32px); font-weight: 800; }
.modal p  { margin: 0 0 18px; font-size: 17px; font-weight: 600; color: var(--ink-soft); }
.modal .row { justify-content: center; }
.modal__medal { width: clamp(72px, 11vw, 104px); height: clamp(72px, 11vw, 104px); margin: 0 auto 8px; }

.name-input {
  width: 100%;
  min-height: 58px;
  margin-bottom: 14px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--r-m);
  -webkit-user-select: text;
  user-select: text;
}

.avatar-pick {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}

.avatar-pick button {
  aspect-ratio: 1;
  padding: 4px;
  border: 3px solid transparent;
  border-radius: 50%;
  background: var(--paper);
  transition: transform .12s ease;
}

.avatar-pick button[aria-pressed="true"] { border-color: var(--sky-1); background: #fff; transform: scale(1.08); }

.player-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }

.player-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  background: var(--paper);
  border: 3px solid transparent;
  border-radius: var(--r-m);
}

.player-row[aria-pressed="true"] { border-color: var(--sky-1); background: #fff; }
.player-row__face { width: 46px; height: 46px; flex: 0 0 auto; }

/* ---------- misc --------------------------------------------------------- */

.confetti {
  position: fixed;
  top: -20px;
  width: 12px;
  height: 16px;
  z-index: 90;
  pointer-events: none;
  border-radius: 3px;
  animation: fall linear forwards;
}

@keyframes fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* short landscape tablets: tighten the chrome */
@media (max-height: 560px) {
  .icon-btn { width: 46px; height: 46px; padding: 11px; }
  .player-chip__face { width: 36px; height: 36px; }
  .game-card { min-height: 160px; }
  .game-card__art { width: 70px; height: 70px; }
}