:root {
  color-scheme: light;
  --turquoise: #11aeb7;
  --turquoise-deep: #087a88;
  --lapis: #07569a;
  --ink: #173a42;
  --ink-soft: #436168;
  --cream: #fff8df;
  --parchment: #f8e6b3;
  --gold: #e7ad43;
  --gold-bright: #ffd977;
  --gold-deep: #97621d;
  --sage: #5c8f62;
  --coral: #cf694e;
  --stone: #f2d79d;
  --shadow: 0 22px 60px rgba(60, 41, 11, .26);
  --font: "Tajawal", "Avenir Next Arabic", "DIN Next Arabic", "SF Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  font-family: var(--font);
}

/* v27 — real drag-and-place ceramic puzzle */
.ceramic-puzzle-board,
.ceramic-tray {
  width: min(560px, 100%);
  display: grid;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  gap: clamp(9px, 1.8vw, 15px);
  padding: clamp(11px, 2vw, 17px);
  border-radius: 25px;
}

.ceramic-puzzle-board {
  border: 4px solid #d39a35;
  background:
    radial-gradient(circle at 50% 110%, rgba(43,205,196,.42), transparent 52%),
    repeating-linear-gradient(45deg, rgba(255,231,137,.08) 0 2px, transparent 2px 18px),
    linear-gradient(145deg, #07586e, #073d61);
  box-shadow: inset 0 0 0 3px rgba(255,229,139,.55), inset 0 0 28px rgba(0,25,53,.45);
}

.ceramic-tray {
  min-height: 104px;
  border: 3px solid #b77b29;
  background: linear-gradient(145deg, rgba(255,248,206,.96), rgba(222,177,83,.96));
  box-shadow: inset 0 0 0 3px rgba(255,255,230,.55), 0 8px 17px rgba(56,35,8,.2);
}

.ceramic-target,
.ceramic-piece {
  position: relative;
  width: 100%;
  max-width: 105px;
  aspect-ratio: 1;
  justify-self: center;
  border: 0;
}

.ceramic-target {
  display: grid;
  place-items: center;
  padding: 7px;
  border: 2px dashed rgba(255,226,125,.78);
  border-radius: 20px;
  background: rgba(0,27,55,.34);
  cursor: pointer;
}

.ceramic-target::before {
  content: "";
  width: 78%;
  aspect-ratio: 1;
  background: rgba(250,219,114,.13);
  filter: drop-shadow(0 0 5px rgba(255,225,119,.25));
}

.ceramic-target.shape-0::before,
.ceramic-piece.shape-0 { clip-path: polygon(50% 3%, 97% 92%, 3% 92%); }
.ceramic-target.shape-1::before,
.ceramic-piece.shape-1 { clip-path: polygon(50% 1%, 99% 50%, 50% 99%, 1% 50%); }
.ceramic-target.shape-2::before,
.ceramic-piece.shape-2 { clip-path: polygon(25% 5%, 75% 5%, 99% 50%, 75% 95%, 25% 95%, 1% 50%); }
.ceramic-target.shape-3::before,
.ceramic-piece.shape-3 { clip-path: polygon(18% 8%, 82% 8%, 98% 92%, 2% 92%); }

.ceramic-piece {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 4px solid #f6d56a;
  background:
    radial-gradient(circle at 38% 28%, rgba(255,255,255,.48), transparent 20%),
    conic-gradient(from 15deg, #073f83, #19b8bd, #07699c, #37c9be, #073f83);
  color: #fff0a2;
  box-shadow: inset 8px 5px 9px rgba(255,255,255,.27), inset -8px -7px 12px rgba(0,30,78,.3), 0 6px 10px rgba(31,34,16,.3);
}

button.ceramic-piece {
  cursor: grab;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

button.ceramic-piece:active { cursor: grabbing; }
button.ceramic-piece:hover,
.ceramic-piece.is-selected {
  z-index: 3;
  transform: translateY(-7px) scale(1.06);
  filter: brightness(1.12) saturate(1.08);
  box-shadow: inset 8px 5px 9px rgba(255,255,255,.3), 0 0 0 5px rgba(255,232,135,.36), 0 12px 18px rgba(22,35,28,.38);
}

.ceramic-target.is-filled {
  border-style: solid;
  border-color: #71dec0;
  background: rgba(11,105,115,.55);
  box-shadow: 0 0 18px rgba(70,224,188,.45);
}

.ceramic-target.is-filled::before { display: none; }
.ceramic-piece.is-placed { width: 92%; }

.ceramic-line {
  position: absolute;
  z-index: 2;
  width: 7%;
  height: 82%;
  border-radius: 999px;
  background: #f8d46b;
  box-shadow: 0 0 7px rgba(255,224,105,.85);
}
.ceramic-line.line-1 { transform: rotate(45deg); }
.ceramic-line.line-2 { transform: rotate(-45deg); }

.ceramic-rosette {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34%;
  aspect-ratio: 1;
  border: 2px solid #fff0a2;
  border-radius: 50%;
  background: #08788d;
  font-size: clamp(.62rem, 2vw, .95rem);
}

.ceramic-rosette::before {
  content: "";
  width: 19%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff0a2;
  box-shadow:
    0 -.48em 0 #fff0a2,
    0 .48em 0 #fff0a2,
    -.48em 0 0 #fff0a2,
    .48em 0 0 #fff0a2;
}

.target-etching { position: absolute; inset: 12%; }

@media (max-width: 520px) and (orientation: portrait) {
  .ceramic-puzzle-board,
  .ceramic-tray {
    gap: 7px;
    padding: 9px;
    border-radius: 19px;
  }
  .ceramic-tray { min-height: 86px; }
  .ceramic-target { padding: 5px; border-radius: 14px; }
  .ceramic-piece { border-width: 3px; }
}

@media (orientation: landscape) and (max-height: 650px) {
  .ceramic-workbench { grid-template-columns: 1fr 1fr; }
  .ceramic-puzzle-board,
  .ceramic-tray { padding: 8px; gap: 7px; }
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background: #16aab5;
}

body {
  min-height: 100svh;
  color: var(--ink);
  overflow: hidden;
}

button,
input,
a { font: inherit; }

button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:focus-visible,
input:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--lapis);
}

.is-hidden { visibility: hidden; pointer-events: none; }

.app {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.34), transparent 34%),
    linear-gradient(180deg, #3dc9d0 0%, #07939f 100%);
}

.topbar {
  position: fixed;
  z-index: 60;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: max(14px, env(safe-area-inset-top)) clamp(14px, 3vw, 42px) 10px;
  pointer-events: none;
}

.topbar > * { pointer-events: auto; }

.round-button,
.language-button {
  min-height: 48px;
  border: 2px solid rgba(255,255,255,.88);
  color: #123e47;
  background: linear-gradient(155deg, rgba(255,251,229,.97), rgba(241,214,151,.94));
  box-shadow: 0 7px 22px rgba(58, 37, 6, .22), inset 0 1px 0 #fff;
  cursor: pointer;
  text-decoration: none;
}

.round-button {
  grid-column: 1;
  justify-self: start;
  width: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.round-button svg {
  width: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.language-button {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 92px;
  padding: 0 14px;
  border-radius: 999px;
  direction: ltr;
  font-weight: 850;
}

.language-button i {
  width: 1px;
  height: 19px;
  background: rgba(23,58,66,.3);
}

.language-button span:first-child { color: var(--lapis); }

.round-button:hover,
.language-button:hover { transform: translateY(-2px); filter: brightness(1.04); }

.mini-brand {
  grid-column: 2;
  position: relative;
  width: 68px;
  height: 42px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 3px 7px rgba(45,27,5,.22));
}

.mini-brand__star {
  z-index: 1;
  color: var(--gold-bright);
  font-size: 1.45rem;
  text-shadow: 0 1px 0 var(--gold-deep), 0 0 12px rgba(255,226,126,.8);
}

.mini-brand__river {
  position: absolute;
  bottom: 2px;
  width: 65px;
  height: 14px;
  border-bottom: 4px solid rgba(255,255,255,.9);
  border-radius: 50%;
  transform: rotate(-5deg);
}

.main-stage,
.screen {
  width: 100%;
  min-height: 100svh;
}

.screen {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.screen[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.screen:not([hidden]) { animation: screenIn .7s cubic-bezier(.2,.78,.2,1); }

@keyframes screenIn {
  from { opacity: 0; transform: scale(1.018); }
  to { opacity: 1; transform: none; }
}

/* Gate */

.gate-screen {
  background:
    linear-gradient(180deg, rgba(3,61,91,.02), rgba(8,96,107,.07)),
    url("./assets/city-gate-v10.webp") center / cover no-repeat;
}

.gate-screen::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 24%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0,74,89,.16));
}

.gate-plaque {
  position: absolute;
  z-index: 2;
  top: clamp(50px, 6.4vh, 78px);
  left: 50%;
  width: min(34vw, 560px);
  min-width: 360px;
  transform: translateX(-50%);
  text-align: center;
  color: #fff8df;
  text-shadow: 0 2px 2px rgba(4,48,72,.72), 0 5px 18px rgba(4,48,72,.46);
}

.gate-plaque p { margin: 0; }

.gate-plaque #gateEyebrow {
  margin-bottom: 1px;
  color: #fff6cf;
  font-size: clamp(.78rem, 1.05vw, 1rem);
  font-weight: 850;
}

.gate-plaque h1 {
  margin: 0;
  font-size: clamp(2.45rem, 4.7vw, 4.8rem);
  line-height: .98;
  letter-spacing: -.04em;
  font-weight: 900;
}

.gate-plaque #siteSubtitle {
  margin-top: 3px;
  color: #fff;
  font-size: clamp(1rem, 1.55vw, 1.5rem);
  font-weight: 850;
}

.gate-enter {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(54px, 8.2vh, 86px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  width: clamp(200px, 19vw, 292px);
  min-height: clamp(58px, 6.5vw, 76px);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fffdf2;
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
  text-shadow: 0 2px 3px rgba(3,66,83,.9), 0 0 18px rgba(3,66,83,.55);
}

.gate-enter::before {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid transparent;
  border-radius: 50%;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.gate-enter:hover::before {
  border-color: rgba(255,255,255,.75);
  box-shadow: 0 0 24px rgba(255,219,111,.9);
  transform: scale(1.04);
}

.gate-enter svg {
  width: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

[dir="rtl"] .gate-enter svg { transform: rotate(180deg); }

.gate-hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255,249,222,.88);
  box-shadow: 0 5px 18px rgba(36,72,58,.18);
  color: #31585b;
  font-size: clamp(.76rem, 1vw, .92rem);
  font-weight: 750;
  white-space: nowrap;
}

/* City map */

.city-screen {
  background: #bfdbbd;
}

.city-map {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: url("./assets/city-map.webp") center / cover no-repeat;
}

.city-map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,245,198,.2) 0%, transparent 19%, transparent 76%, rgba(46,86,49,.14) 100%),
    radial-gradient(circle at 50% 50%, transparent 53%, rgba(55,74,24,.1));
}

.city-heading {
  position: absolute;
  z-index: 3;
  top: max(67px, calc(env(safe-area-inset-top) + 57px));
  left: 50%;
  transform: translateX(-50%);
  min-width: min(400px, 78vw);
  padding: 9px 26px 11px;
  border: 3px solid #9d671e;
  border-radius: 16px 16px 28px 28px;
  background: linear-gradient(155deg, rgba(255,250,222,.97), rgba(237,203,126,.97));
  box-shadow: 0 10px 28px rgba(42, 29, 8, .38), inset 0 0 0 2px rgba(255,255,255,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
}

.city-heading p,
.city-heading h2 { margin: 0; }

.city-heading p {
  color: #315b5b;
  font-size: clamp(.78rem, 1vw, .96rem);
  font-weight: 800;
}

.city-mode {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  margin-bottom: 3px;
  padding: 2px 13px;
  border-radius: 999px;
  background: #0d5c57;
  color: #fff8d6;
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: none;
}

.city-heading h2 {
  color: #74470f;
  font-size: clamp(1.7rem, 2.8vw, 2.55rem);
  line-height: 1.1;
  text-shadow: 0 1px #fff4c7;
}

.district {
  --district-x: 50%;
  --district-y: 50%;
  position: absolute;
  z-index: 20;
  left: var(--district-x);
  top: var(--district-y);
  width: clamp(190px, 18vw, 270px);
  min-height: 68px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}

.district > * { pointer-events: none; }

.district-earth { --district-x: 14%; --district-y: 19%; }
.district-dome { --district-x: 86%; --district-y: 19%; }
.district-canals { --district-x: 15%; --district-y: 83%; }
.district-healing { --district-x: 85%; --district-y: 83%; }

.district-pulse {
  position: absolute;
  left: 50%;
  top: -10px;
  width: 24px;
  height: 24px;
  border: 3px solid #fff7d4;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7a8 0 22%, var(--gold) 24% 53%, #a66a1c 56% 100%);
  box-shadow: 0 5px 18px rgba(55,33,4,.34), 0 0 0 8px rgba(255,214,92,.18);
  transform: translateX(-50%);
  transition: transform .22s, box-shadow .22s;
}

.district-earth .district-label { --game-card: url("./assets/game-earth-v33.webp"); }
.district-dome .district-label { --game-card: url("./assets/game-dome-v33.webp"); }
.district-canals .district-label { --game-card: url("./assets/game-canals-v33.webp"); }
.district-healing .district-label { --game-card: url("./assets/game-healing-v33.webp"); }

.district-pulse::after {
  content: "";
  position: absolute;
  inset: -12px;
  border: 2px solid rgba(255,255,255,.74);
  border-radius: 50%;
  animation: mapPulse 2.2s infinite;
}

@keyframes mapPulse {
  0% { transform: scale(.65); opacity: 0; }
  35% { opacity: .9; }
  100% { transform: scale(1.32); opacity: 0; }
}

.district-label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 130px;
  padding: 42px 10px 9px;
  border: 3px solid rgba(255, 232, 151, .98);
  border-radius: 24px;
  background-image: linear-gradient(180deg, rgba(5,42,43,.08) 0 23%, rgba(5,42,43,.8) 53%, rgba(4,34,36,.97) 100%), var(--game-card);
  background-position: center;
  background-size: cover;
  color: #fffdf0;
  text-align: center;
  text-shadow: 0 2px 2px rgba(8, 30, 31, .82);
  box-shadow: 0 8px 20px rgba(24, 38, 22, .34), inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: transform .2s, filter .2s, box-shadow .2s;
}

.district-label b { font-size: clamp(1.12rem, 1.7vw, 1.6rem); line-height: 1.12; font-weight: 900; }
.district-label small { color: #ffe59b; font-size: clamp(.83rem, 1.05vw, 1rem); line-height: 1.2; font-weight: 800; }
.district-label em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  padding: 3px 12px 4px;
  border-radius: 999px;
  background: linear-gradient(145deg, #ffdd76, #e6ad3e);
  color: #153f3e;
  font-family: var(--font);
  font-size: clamp(.7rem, .95vw, .86rem);
  font-style: normal;
  font-weight: 900;
  line-height: 1.15;
  text-shadow: none;
  box-shadow: 0 3px 9px rgba(5, 33, 33, .35);
}
.district-label em::before { content: "▶"; font-size: .62em; }

.district-symbol {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 9px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 2px solid rgba(255,247,205,.95);
  border-radius: 50%;
  background: rgba(8,73,71,.9);
  color: #ffdb72;
  font-family: var(--font);
  font-size: 1.15rem;
  font-weight: 900;
  text-shadow: none;
  transform: translateX(-50%);
  box-shadow: 0 4px 12px rgba(4,28,29,.4);
}

.district-level {
  position: absolute;
  z-index: 3;
  inset-inline-start: -8px;
  top: -11px;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 2px solid #fff4c4;
  border-radius: 50%;
  background: linear-gradient(145deg, #f9d574, #c98727);
  color: #153f3e;
  font-family: var(--font);
  font-size: .8rem;
  font-weight: 950;
  text-shadow: none;
  box-shadow: 0 4px 10px rgba(32, 25, 7, .35);
}
.district:hover .district-label,
.district:focus-visible .district-label { transform: translateY(-4px); filter: brightness(1.08); box-shadow: 0 11px 25px rgba(24, 38, 22, .42), inset 0 1px 0 rgba(255,255,255,.25); }
.district:active .district-label { transform: translateY(1px) scale(.98); }
.district:focus-visible { outline: 3px solid #fff6ca; outline-offset: 5px; border-radius: 20px; }
.district:hover .district-pulse { transform: translateX(-50%) scale(1.13); box-shadow: 0 7px 24px rgba(55,33,4,.42), 0 0 0 11px rgba(255,222,93,.25); }

.district-check {
  position: absolute;
  inset-inline-end: -3px;
  top: -12px;
  display: none;
  width: 27px;
  height: 27px;
  border: 2px solid #fff;
  border-radius: 50%;
  place-items: center;
  background: #1a9b74;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(22,91,68,.34);
}

.district.is-complete .district-check { display: grid; }
.district.is-complete .district-pulse { background: radial-gradient(circle, #fff 0 20%, #3bd0a0 22% 55%, #13785e 58%); }
.district.is-complete .district-label em { background: linear-gradient(145deg, #69e0b7, #2aaf83); }

.map-progress {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 64px;
  padding: 7px 16px;
  border: 3px solid rgba(141,89,20,.72);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(255,250,227,.98), rgba(242,207,127,.97));
  box-shadow: 0 9px 26px rgba(55,35,8,.24), inset 0 1px #fff;
}

.map-progress p {
  margin: 0;
  color: #6e4617;
  font-size: .86rem;
  font-weight: 850;
  white-space: nowrap;
}

.progress-copy { min-width: 112px; }
.progress-copy strong {
  display: block;
  color: #0d655e;
  font-size: .82rem;
  font-weight: 900;
  line-height: 1.1;
}
.quest-meter {
  width: clamp(68px, 9vw, 120px);
  height: 12px;
  overflow: hidden;
  border: 2px solid #a36c24;
  border-radius: 999px;
  background: rgba(120,78,24,.18);
  box-shadow: inset 0 1px 3px rgba(68,39,5,.25);
}
.quest-meter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #20a890, #55d9ae);
  transition: width .45s ease;
}

.map-finale-button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid #fff3b7;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffd86f, #cb892c);
  color: #68400e;
  box-shadow: 0 0 0 4px rgba(255,215,105,.2), 0 5px 13px rgba(75,45,7,.22);
  cursor: pointer;
  display: grid;
  place-items: center;
  text-decoration: none;
  animation: sealFloat 2.2s ease-in-out infinite;
}

.map-finale-button[hidden] { display: none; }

.map-seals,
.final-seals {
  display: flex;
  gap: 6px;
  direction: ltr;
}

.map-seal {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid #a67731;
  border-radius: 50%;
  background: rgba(170,117,39,.14);
  color: rgba(111,72,18,.45);
  font-size: .8rem;
  font-weight: 900;
}

.map-seal.done {
  border-color: #fff3b7;
  color: #fff;
  background: linear-gradient(145deg, #30caa4, #087f79);
  box-shadow: 0 0 0 3px rgba(30,172,144,.16);
}

/* Game shell */

.game-screen { background: #25acb6; overflow-y: auto; }

.game-world {
  --scene-url: url("./assets/game-canals-v33.webp");
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background-image: var(--scene-url);
  background-position: center;
  background-size: cover;
}

.game-world[data-game="canals"] { --scene-url: url("./assets/game-canals-v33.webp"); }
.game-world[data-game="earth"] { --scene-url: url("./assets/game-earth-v33.webp"); }
.game-world[data-game="dome"] { --scene-url: url("./assets/game-dome-v33.webp"); }
.game-world[data-game="healing"] { --scene-url: url("./assets/game-healing-v33.webp"); }

.game-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 45%, rgba(9,89,93,.16)),
    radial-gradient(circle at 50% 52%, transparent 35%, rgba(40,47,12,.06));
}

.game-heading {
  position: absolute;
  z-index: 4;
  top: max(62px, calc(env(safe-area-inset-top) + 55px));
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 150px));
  padding: 10px 28px 12px;
  border: 2px solid rgba(169,108,28,.65);
  border-radius: 25px;
  background: linear-gradient(155deg, rgba(255,251,229,.97), rgba(244,217,155,.95));
  box-shadow: 0 10px 26px rgba(68,42,7,.22), inset 0 1px #fff;
  text-align: center;
}

.game-heading p,
.game-heading h2 { margin: 0; }

.game-scholar {
  color: var(--turquoise-deep);
  font-size: .78rem;
  font-weight: 850;
}

.game-heading h2 {
  margin-top: 1px;
  color: #744611;
  font-size: clamp(1.45rem, 2.6vw, 2.35rem);
  line-height: 1.12;
}

.game-instruction {
  margin-top: 4px !important;
  color: #3e5a5d;
  font-size: clamp(.8rem, 1.25vw, 1rem);
  font-weight: 700;
  line-height: 1.45;
}

.game-mechanic {
  position: absolute;
  z-index: 3;
  inset: 24% 0 10%;
  display: grid;
  place-items: center;
  padding: 12px clamp(14px, 3vw, 36px);
}

.game-footer {
  position: absolute;
  z-index: 5;
  inset-inline: clamp(15px, 3vw, 38px);
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: ltr;
}

.round-dots {
  display: flex;
  gap: 7px;
  padding: 8px 11px;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: rgba(35,102,95,.44);
  box-shadow: 0 6px 18px rgba(28,50,33,.16);
  backdrop-filter: blur(5px);
}

.round-dot {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 50%;
  background: rgba(26,80,70,.46);
}

.round-dot.done { background: #fff1a4; box-shadow: 0 0 9px rgba(255,239,135,.9); }
.round-dot.current { background: var(--gold-bright); transform: scale(1.23); }

.wood-button,
.primary-button,
.secondary-button,
.action-button {
  min-height: 48px;
  border-radius: 999px;
  padding: 0 21px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .2s, filter .2s, box-shadow .2s;
}

.wood-button {
  border: 2px solid #fff2b0;
  background: linear-gradient(155deg, #d7973b, #8d541c);
  color: #fff8dc;
  box-shadow: 0 6px 18px rgba(69,39,7,.28), inset 0 1px rgba(255,255,255,.35);
}

.wood-button:hover,
.primary-button:hover,
.secondary-button:hover,
.action-button:hover { transform: translateY(-2px); filter: brightness(1.04); }

.wood-button:disabled {
  opacity: .55;
  cursor: default;
  transform: none;
  filter: grayscale(.25);
}

.primary-button {
  border: 2px solid #fff0a8;
  background: linear-gradient(155deg, #ffd86d, #d99731);
  color: #5a360d;
  box-shadow: 0 9px 22px rgba(99,60,10,.26), inset 0 1px #fff5ba;
}

.secondary-button {
  border: 2px solid rgba(77,91,61,.28);
  background: rgba(255,252,232,.64);
  color: #456064;
}

.action-button {
  border: 2px solid #fdf1b7;
  background: linear-gradient(155deg, #1fc3bd, #087e89);
  color: #fff;
  box-shadow: 0 8px 23px rgba(5,96,103,.28), inset 0 1px rgba(255,255,255,.45);
}

.action-button:disabled { opacity: .52; cursor: default; transform: none; filter: grayscale(.3); }

/* Canal puzzle */

.canal-mechanic {
  display: grid;
  grid-template-columns: auto minmax(255px, 430px) auto;
  align-items: center;
  gap: clamp(9px, 2vw, 20px);
  width: min(720px, 96vw);
  direction: ltr;
}

.canal-port {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #fff9d8;
  font-size: .76rem;
  font-weight: 900;
  text-shadow: 0 2px 5px rgba(26,66,58,.65);
}

.canal-port i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 3px solid #fff7c2;
  border-radius: 50%;
  background: linear-gradient(145deg, #33d6da, #078599);
  box-shadow: 0 7px 17px rgba(9,76,82,.3);
}

.canal-port.target i { background: linear-gradient(145deg, #67bc59, #247543); }

.canal-frame {
  padding: clamp(9px, 1.5vw, 15px);
  border: clamp(5px, .7vw, 9px) solid #e2b85f;
  border-radius: 24px;
  background:
    linear-gradient(45deg, rgba(14,129,143,.18) 25%, transparent 25% 75%, rgba(14,129,143,.18) 75%) 0 0 / 18px 18px,
    linear-gradient(135deg, #f7e4b4, #d7aa56);
  box-shadow: var(--shadow), inset 0 0 0 3px #fff1bd;
}

.canal-grid {
  --grid-size: 3;
  display: grid;
  grid-template-columns: repeat(var(--grid-size), 1fr);
  gap: clamp(4px, .55vw, 7px);
  width: 100%;
  aspect-ratio: 1;
  direction: ltr;
}

.canal-tile {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid #be8d3e;
  border-radius: 13px;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.78), transparent 23%),
    linear-gradient(145deg, #f8e8bf, #d6ab62);
  box-shadow: inset 0 0 0 2px rgba(255,247,205,.7), 0 3px 7px rgba(72,45,7,.22);
  cursor: pointer;
}

.canal-tile::after {
  content: "";
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(8,113,129,.24);
  border-radius: 9px;
  pointer-events: none;
}

.canal-lines {
  position: absolute;
  inset: 0;
  transform: rotate(calc(var(--rotation) * 90deg));
  transition: transform .28s cubic-bezier(.25,.85,.25,1);
}

.channel-arm {
  position: absolute;
  left: 42%;
  top: 0;
  width: 16%;
  height: 53%;
  border-inline: 2px solid #08788b;
  background: linear-gradient(90deg, #0697a8, #5be9e2 50%, #078da1);
  box-shadow: inset 0 0 5px rgba(255,255,255,.65);
  transform-origin: 50% 100%;
}

.arm-e { transform: rotate(90deg); }
.arm-s { transform: rotate(180deg); }
.arm-w { transform: rotate(270deg); }

.canal-hub {
  position: absolute;
  left: 37%;
  top: 37%;
  width: 26%;
  height: 26%;
  border: 2px solid #08788b;
  border-radius: 50%;
  background: radial-gradient(circle, #65f2e7, #0792a4 72%);
}

.canal-tile.is-wet .channel-arm,
.canal-tile.is-wet .canal-hub {
  filter: brightness(1.2) saturate(1.2);
  box-shadow: 0 0 11px rgba(91,247,235,.86), inset 0 0 6px rgba(255,255,255,.86);
  animation: waterShimmer 1.1s infinite alternate;
}

@keyframes waterShimmer { to { filter: brightness(1.35) saturate(1.26); } }

.canal-tile.is-goal { box-shadow: inset 0 0 0 3px #86ce68, 0 0 14px rgba(87,191,93,.5); }

.goal-bloom {
  position: absolute;
  z-index: 3;
  inset-inline-end: 5px;
  top: 4px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f8e47d;
  color: #2f8a51;
  box-shadow: 0 0 10px rgba(255,237,115,.85);
  font-size: .72rem;
}

.mechanic-status {
  position: absolute;
  bottom: 1%;
  left: 50%;
  transform: translateX(-50%);
  width: min(580px, 88vw);
  margin: 0;
  padding: 8px 16px;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 999px;
  background: rgba(6,105,111,.78);
  color: #fff;
  text-align: center;
  font-size: .86rem;
  font-weight: 850;
  box-shadow: 0 6px 18px rgba(8,64,59,.2);
}

.mechanic-status.success {
  background: rgba(31,132,76,.9);
  animation: successPop .48s ease;
}

@keyframes successPop {
  50% { transform: translateX(-50%) scale(1.05); }
}

/* Earth alignment */

.earth-mechanic {
  position: relative;
  width: min(650px, 94vw);
  padding: clamp(20px, 3vw, 34px);
  border: 5px solid #d2a348;
  border-radius: 32px;
  background: linear-gradient(155deg, rgba(255,249,219,.95), rgba(235,205,137,.94));
  box-shadow: var(--shadow), inset 0 0 0 3px #fff0b0;
}

.sight-stage {
  position: relative;
  height: clamp(170px, 25vw, 255px);
  overflow: hidden;
  border: 3px solid #ad7b2f;
  border-radius: 22px 22px 100px 100px;
  background:
    linear-gradient(180deg, rgba(69,196,211,.8) 0 56%, rgba(240,204,124,.78) 57% 100%),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(155,107,35,.15) 29px 30px);
  box-shadow: inset 0 8px 26px rgba(6,86,102,.18);
}

.sight-stage::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 57%;
  border-top: 2px dashed rgba(255,255,255,.88);
}

.instrument-pivot {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 12%;
  width: 28px;
  height: 28px;
  border: 5px solid #fff0a5;
  border-radius: 50%;
  background: #9a641f;
  box-shadow: 0 5px 10px rgba(62,35,3,.25);
  transform: translate(-50%, 50%);
}

.sight-line,
.target-sight {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 12%;
  width: 44%;
  height: 5px;
  transform-origin: left center;
  border-radius: 999px;
}

.sight-line {
  background: #fff1a0;
  box-shadow: 0 0 12px #fff5a8, 0 0 24px rgba(255,202,63,.85);
  transform: rotate(calc(var(--player-angle) * -1deg));
}

.target-sight {
  height: 0;
  border-top: 4px dashed rgba(4,93,113,.7);
  transform: rotate(calc(var(--target-angle) * -1deg));
}

.target-sight::after {
  content: "◎";
  position: absolute;
  right: -8px;
  top: -14px;
  color: #fff7c7;
  font-size: 1.2rem;
  text-shadow: 0 0 8px var(--gold);
}

.earth-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 18px;
  direction: ltr;
}

.angle-range {
  flex: 1;
  height: 13px;
  appearance: none;
  border: 2px solid #a7752c;
  border-radius: 999px;
  background: linear-gradient(90deg, #0d8b99, #60d8d5);
  box-shadow: inset 0 2px 4px rgba(0,65,75,.25);
}

.angle-range::-webkit-slider-thumb {
  width: 34px;
  height: 34px;
  appearance: none;
  border: 4px solid #fff2a8;
  border-radius: 50%;
  background: linear-gradient(145deg, #f6c65c, #9b641e);
  box-shadow: 0 4px 10px rgba(70,39,3,.32);
}

.angle-range::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border: 4px solid #fff2a8;
  border-radius: 50%;
  background: linear-gradient(145deg, #f6c65c, #9b641e);
  box-shadow: 0 4px 10px rgba(70,39,3,.32);
}

.earth-round-label {
  position: absolute;
  top: 12px;
  inset-inline-start: 15px;
  z-index: 5;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,249,220,.86);
  color: #76501e;
  font-size: .74rem;
  font-weight: 900;
}

.earth-mechanic.is-aligned .sight-stage {
  box-shadow: inset 0 8px 26px rgba(6,86,102,.18), 0 0 28px rgba(255,228,99,.85);
}

/* Dome puzzle */

.dome-mechanic {
  position: relative;
  width: min(780px, 95vw);
  min-height: 330px;
  padding: 22px clamp(18px, 3vw, 34px) 28px;
  border: 5px solid #d2a348;
  border-radius: 38px 38px 140px 140px;
  background: linear-gradient(155deg, rgba(255,250,225,.96), rgba(232,200,129,.95));
  box-shadow: var(--shadow), inset 0 0 0 3px #fff0b0;
}

.dome-preview {
  position: relative;
  width: min(330px, 58vw);
  height: min(155px, 26vw);
  margin: 0 auto 18px;
  overflow: hidden;
  border: 7px solid #b37c28;
  border-bottom-width: 12px;
  border-radius: 180px 180px 18px 18px;
  background:
    radial-gradient(circle at 50% 100%, transparent 0 14%, rgba(255,226,107,.9) 15% 16%, transparent 17% 30%, rgba(255,226,107,.9) 31% 32%, transparent 33%),
    conic-gradient(from 270deg at 50% 100%, #075596, #18a5b4, #0b4d91, #17abb3, #075596);
  box-shadow: inset 0 0 26px rgba(0,39,101,.38), 0 7px 18px rgba(79,47,5,.2);
}

.dome-preview::before,
.dome-preview::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 4px;
  height: 120%;
  background: rgba(255,224,105,.72);
  transform-origin: bottom;
}

.dome-preview::before { transform: rotate(-40deg); }
.dome-preview::after { transform: rotate(40deg); }

.dome-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 50% 70%, rgba(255,251,185,.95), rgba(255,201,50,.25) 42%, transparent 72%);
  transition: opacity .45s;
}

.dome-mechanic.is-complete .dome-glow { opacity: 1; animation: domeGlow 1s infinite alternate; }
@keyframes domeGlow { to { filter: brightness(1.2); } }

.piece-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, 2vw, 20px);
  direction: ltr;
}

.piece-slot {
  --target-rotation: 0deg;
  position: relative;
  width: clamp(76px, 10vw, 112px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 4px solid #ae7728;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(164,112,35,.13) 0 4deg, transparent 4deg 120deg),
    linear-gradient(145deg, #f2d894, #c6913d);
  box-shadow: inset 0 0 0 3px #ffeeb0, 0 6px 15px rgba(70,40,5,.24);
}

.target-groove {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 4px;
  height: 35%;
  border-radius: 4px;
  background: rgba(96,56,12,.35);
  transform-origin: 50% 108%;
  transform: translateX(-50%) rotate(var(--target-rotation));
}

.dome-piece {
  position: relative;
  width: 68%;
  height: 68%;
  padding: 0;
  border: 3px solid #f9d872;
  clip-path: polygon(50% 3%, 96% 91%, 4% 91%);
  background: linear-gradient(145deg, #24bac0, #075792);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.18);
  cursor: pointer;
  transform: rotate(var(--piece-rotation));
  transition: transform .32s cubic-bezier(.25,.85,.25,1), filter .25s;
}

.dome-piece::before {
  content: "";
  position: absolute;
  left: 48%;
  top: 8%;
  width: 5%;
  height: 78%;
  background: #f8d46b;
  box-shadow: 0 0 6px rgba(255,224,105,.72);
}

.dome-piece::after {
  content: "•";
  position: absolute;
  left: 41%;
  top: 0;
  color: #fff2a0;
  font-size: 1.1rem;
}

.piece-slot.is-correct {
  box-shadow: inset 0 0 0 3px #fff4af, 0 0 22px rgba(60,207,169,.9);
}

.piece-slot.is-correct .dome-piece { filter: brightness(1.18); }

.dome-counter {
  margin: 13px 0 0;
  color: #694319;
  text-align: center;
  font-size: .84rem;
  font-weight: 850;
}

/* Pulse game */

.pulse-mechanic {
  position: relative;
  width: min(630px, 93vw);
  min-height: 345px;
  display: grid;
  place-items: center;
}

.pulse-board {
  position: relative;
  width: clamp(285px, 35vw, 440px);
  aspect-ratio: 1.55;
  border: clamp(8px, 1vw, 13px) solid #b47b2b;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,238,158,.75) 0 6%, transparent 7%),
    repeating-radial-gradient(circle, transparent 0 17%, rgba(120,79,22,.28) 18% 19%),
    linear-gradient(145deg, rgba(243,202,103,.96), rgba(143,88,25,.96));
  box-shadow: 0 18px 38px rgba(62,35,5,.33), inset 0 0 0 4px #ffeaa1, inset 0 0 36px rgba(79,45,5,.3);
}

.pulse-pad {
  --x: 50%;
  --y: 50%;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(58px, 7.2vw, 88px);
  aspect-ratio: 1;
  padding: 0;
  border: 5px solid #ffe58b;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #7ff7ec, #12a8b3 55%, #07677a);
  box-shadow: 0 7px 14px rgba(61,37,7,.31), inset 0 3px 7px rgba(255,255,255,.52);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: filter .12s, box-shadow .12s, transform .12s;
}

.pulse-pad:nth-child(1) { --x: 29%; --y: 32%; }
.pulse-pad:nth-child(2) { --x: 71%; --y: 32%; }
.pulse-pad:nth-child(3) { --x: 29%; --y: 72%; }
.pulse-pad:nth-child(4) { --x: 71%; --y: 72%; }

.pulse-pad:hover { transform: translate(-50%, -50%) scale(1.06); }
.pulse-pad.is-lit,
.pulse-pad:active {
  filter: brightness(1.35);
  box-shadow: 0 0 0 8px rgba(255,238,120,.35), 0 0 30px #fff1a0, inset 0 3px 8px #fff;
  transform: translate(-50%, -50%) scale(1.08);
}

.pulse-pad:disabled { cursor: default; }

.pulse-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 3px solid #f9db79;
  border-radius: 50%;
  background: rgba(101,59,15,.76);
  color: #fff4ba;
  transform: translate(-50%, -50%);
  font-size: 1.7rem;
  text-shadow: 0 0 9px #ffe990;
}

.pulse-actions {
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}

.pulse-memory {
  min-width: 80px;
  padding: 8px 13px;
  border: 2px solid rgba(255,255,255,.74);
  border-radius: 999px;
  background: rgba(9,104,109,.76);
  color: #fff;
  text-align: center;
  font-size: .82rem;
  font-weight: 850;
}

.pulse-mechanic.is-success .pulse-board { animation: heartbeat .68s ease 2; }

@keyframes heartbeat {
  30% { transform: scale(1.035); }
  55% { transform: scale(1); }
  72% { transform: scale(1.02); }
}

/* Dialogs */

dialog {
  width: min(520px, calc(100% - 30px));
  max-height: calc(100svh - 30px);
  padding: clamp(24px, 4vw, 40px);
  overflow: auto;
  border: 4px solid #d09a3e;
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.95), transparent 45%),
    linear-gradient(145deg, #fff9e3, #efd293);
  box-shadow: 0 28px 85px rgba(44,31,5,.39), inset 0 0 0 3px #fff0b7;
  color: var(--ink);
  text-align: center;
}

dialog::backdrop {
  background: rgba(6,69,74,.44);
  backdrop-filter: blur(5px);
}

dialog[open] { animation: dialogIn .45s cubic-bezier(.2,.86,.2,1); }

@keyframes dialogIn {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  to { opacity: 1; transform: none; }
}

.dialog-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(116,78,24,.12);
  color: #6d4617;
  cursor: pointer;
  font-size: 1.5rem;
}

.story-seal,
.reward-seal {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border: 5px solid #fff0a7;
  border-radius: 50%;
  background: linear-gradient(145deg, #26beba, #08768b);
  box-shadow: 0 8px 22px rgba(10,97,98,.27), inset 0 0 0 3px rgba(255,255,255,.28);
  color: #fff1a5;
  font-size: 2rem;
}

.story-dialog p,
.story-dialog h2,
.reward-dialog p,
.reward-dialog h2 { margin: 0; }

.story-dialog > p:first-of-type,
.reward-dialog > p:first-of-type {
  color: var(--turquoise-deep);
  font-size: .82rem;
  font-weight: 900;
}

.story-dialog h2,
.reward-dialog h2 {
  margin-top: 4px;
  color: #734813;
  font-size: clamp(1.8rem, 5vw, 2.7rem);
  line-height: 1.15;
}

.story-dialog #welcomeCopy,
.reward-dialog #rewardFact {
  margin: 13px auto 22px;
  color: #425d60;
  font-size: 1rem;
  line-height: 1.8;
}

.reward-seal { animation: sealFloat 2.2s ease-in-out infinite; }
@keyframes sealFloat { 50% { transform: translateY(-6px) rotate(4deg); } }

/* Finale */

.finale-screen {
  display: grid;
  place-items: center;
  padding: 80px 18px 30px;
  background:
    linear-gradient(180deg, rgba(255,248,201,.13), rgba(2,111,119,.2)),
    url("./assets/city-map.webp") center / cover no-repeat;
}

.finale-card {
  position: relative;
  z-index: 3;
  width: min(610px, 94vw);
  padding: clamp(28px, 5vw, 52px);
  border: 5px solid #d29c3f;
  border-radius: 42px;
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.96), transparent 45%),
    linear-gradient(145deg, rgba(255,249,225,.97), rgba(239,208,139,.96));
  box-shadow: 0 28px 75px rgba(44,31,5,.34), inset 0 0 0 3px #fff0b4;
  text-align: center;
}

.final-seals {
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}

.final-seals .map-seal {
  width: 48px;
  height: 48px;
  font-size: 1.1rem;
  animation: sealFloat 2.2s ease-in-out infinite;
}

.final-seals .map-seal:nth-child(2) { animation-delay: -.4s; }
.final-seals .map-seal:nth-child(3) { animation-delay: -.8s; }
.final-seals .map-seal:nth-child(4) { animation-delay: -1.2s; }

.finale-card p,
.finale-card h2 { margin: 0; }

.finale-card #finaleEyebrow {
  color: var(--turquoise-deep);
  font-size: .88rem;
  font-weight: 900;
}

.finale-card h2 {
  margin-top: 4px;
  color: #724713;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.15;
}

.finale-card #finaleCopy {
  max-width: 480px;
  margin: 14px auto 24px;
  color: #405c60;
  font-size: 1.04rem;
  line-height: 1.85;
}

.final-actions {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  pointer-events: auto;
}

.final-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Toast */

.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: max(78px, calc(env(safe-area-inset-bottom) + 66px));
  width: max-content;
  max-width: min(560px, calc(100% - 28px));
  padding: 11px 18px;
  border: 2px solid rgba(255,255,255,.78);
  border-radius: 999px;
  background: rgba(7,105,111,.94);
  box-shadow: 0 9px 28px rgba(10,60,55,.25);
  color: #fff;
  text-align: center;
  font-size: .9rem;
  font-weight: 850;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .22s, transform .22s;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Responsive */

@media (max-width: 760px) {
  body { overflow: auto; }
  .app { overflow-y: auto; }
  .mini-brand { display: none; }
  .topbar { grid-template-columns: 1fr 1fr; }
  .language-button { grid-column: 2; }

  .gate-screen { background-position: center; }
  .gate-plaque {
    top: max(78px, calc(env(safe-area-inset-top) + 64px));
    min-width: 0;
    width: 84vw;
    padding: 8px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .gate-plaque #gateEyebrow { font-size: .73rem; }
  .gate-plaque h1 { font-size: clamp(2.35rem, 13vw, 4rem); }
  .gate-plaque #siteSubtitle { font-size: 1rem; }

  .gate-enter {
    bottom: 88px;
    min-height: 58px;
    background: transparent;
    box-shadow: none;
  }

  .gate-hint { bottom: 28px; }

  .city-screen { overflow-y: auto; }
  .city-map {
    min-height: 100svh;
    padding: 0;
    display: block;
    background-position: center;
  }

  .city-map::before {
    display: none;
  }

  .city-heading {
    top: max(69px, calc(env(safe-area-inset-top) + 58px));
    padding: 8px 22px 9px;
  }

  .district {
    position: absolute;
    z-index: 20;
    left: var(--district-x);
    top: var(--district-y);
    width: 42vw;
    max-width: 220px;
    min-height: 60px;
    transform: translate(-50%, -50%);
  }

  .district-earth { --district-x: 15%; --district-y: 19%; }
  .district-dome { --district-x: 85%; --district-y: 19%; }
  .district-canals { --district-x: 16%; --district-y: 83%; }
  .district-healing { --district-x: 84%; --district-y: 83%; }

  .district-pulse { top: -6px; width: 22px; height: 22px; }
  .district-label { min-height: 60px; justify-content: center; padding-top: 12px; }
  .district-label b { font-size: clamp(1.05rem, 4.2vw, 1.35rem); }
  .district-label small { font-size: clamp(.8rem, 3.2vw, 1rem); }

  .map-progress {
    position: fixed;
    z-index: 8;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: min(356px, calc(100% - 24px));
    justify-content: center;
    padding-inline: 10px;
  }

  .game-screen { position: fixed; }
  .game-world {
    min-height: 100svh;
    overflow-y: auto;
    padding: 202px 12px 94px;
    background-position: center top;
  }

  .game-world::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 44% 0 0;
    background: linear-gradient(180deg, transparent, rgba(8,109,113,.26));
    pointer-events: none;
  }

  .game-heading {
    position: absolute;
    top: max(70px, calc(env(safe-area-inset-top) + 60px));
    width: calc(100% - 28px);
    padding: 9px 16px 11px;
  }

  .game-heading h2 { font-size: 1.55rem; }
  .game-instruction { font-size: .82rem; }

  .game-mechanic {
    position: relative;
    z-index: 3;
    inset: auto;
    min-height: calc(100svh - 296px);
    padding: 12px 2px 44px;
  }

  .game-footer {
    position: fixed;
    z-index: 8;
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .canal-mechanic {
    grid-template-columns: 32px minmax(240px, 1fr) 32px;
    gap: 5px;
    width: 100%;
  }

  .canal-port span { display: none; }
  .canal-port i { width: 30px; height: 30px; }
  .canal-frame { padding: 7px; border-width: 5px; }
  .canal-grid { gap: 4px; }
  .canal-tile { border-radius: 9px; }
  .channel-arm { border-inline-width: 1px; }

  .earth-mechanic { padding: 16px; border-width: 4px; border-radius: 25px; }
  .earth-controls { flex-direction: column; }
  .angle-range { width: 100%; flex: auto; }
  .action-button { width: 100%; }

  .dome-mechanic { min-height: 300px; padding: 18px 10px 23px; border-width: 4px; }
  .piece-row { gap: 7px; }
  .piece-slot { width: clamp(62px, 20vw, 88px); border-width: 3px; }

  .pulse-mechanic { min-height: 330px; }
  .pulse-board { width: min(330px, 90vw); }
  .pulse-pad { width: 62px; }

  dialog { border-width: 3px; border-radius: 28px; }
}

@media (orientation: portrait) and (max-width: 760px) {
  .city-screen { background: #9a793d; }

  .city-map {
    background-color: #9a793d;
    background-image: url("./assets/city-map-portrait-v12.webp");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }

  .city-heading {
    top: max(58px, calc(env(safe-area-inset-top) + 48px));
    width: calc(100% - 118px);
    min-width: 0;
    padding: 8px 12px 10px;
    border-radius: 14px 14px 22px 22px;
  }

  .city-heading p { display: block; font-size: clamp(.64rem, 2.7vw, .78rem); line-height: 1.25; }
  .city-heading h2 { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }
  .city-mode { min-height: 20px; margin-bottom: 1px; padding: 2px 10px; font-size: .62rem; }

  .district {
    width: 44vw;
    max-width: 220px;
  }

  .district-earth,
  .district-dome { top: 36%; }
  .district-canals,
  .district-healing { top: 74%; }

  .district-earth,
  .district-canals { left: 23%; }
  .district-dome,
  .district-healing { left: 77%; }

  .district-label {
    min-height: 126px;
    padding: 41px 6px 8px;
    border-radius: 20px;
  }
  .district-label b { font-size: clamp(1rem, 4.2vw, 1.22rem); }
  .district-label small { font-size: clamp(.74rem, 3.05vw, .9rem); }
  .district-label em { margin-top: 5px; padding: 4px 12px 5px; font-size: clamp(.7rem, 3vw, .84rem); }
  .district-symbol { top: 8px; width: 35px; height: 35px; font-size: 1rem; }
  .district-level { inset-inline-start: -5px; top: -8px; width: 27px; height: 27px; font-size: .72rem; }
  html[lang="en"] .district-label b { font-size: clamp(.98rem, 3.9vw, 1.18rem); }
}

@media (max-width: 420px) {
  .language-button { min-width: 82px; padding: 0 11px; }
  .round-button,
  .language-button { min-height: 44px; }
  .round-button { width: 44px; }
  .city-heading { min-width: calc(100% - 120px); }
  .city-heading p { display: block; }
  .map-progress { gap: 7px; }
  .map-progress p { font-size: .7rem; }
  .progress-copy { min-width: 96px; }
  .progress-copy strong { font-size: .73rem; }
  .quest-meter { width: 58px; }
  .map-seal { width: 25px; height: 25px; }
  .canal-mechanic { grid-template-columns: 25px minmax(220px, 1fr) 25px; }
  .canal-port i { width: 25px; height: 25px; border-width: 2px; }
  .game-footer { inset-inline: 10px; }
  .wood-button { padding-inline: 16px; min-height: 44px; }
  .mechanic-status { font-size: .76rem; bottom: 0; }
}

@media (max-height: 720px) and (min-width: 761px) {
  .game-heading { top: 56px; padding-block: 7px 9px; }
  .game-heading h2 { font-size: 1.6rem; }
  .game-mechanic { inset: 22% 0 10%; transform: scale(.9); }
  .city-heading { top: 58px; }
  .district-label { padding-block: 8px 7px; }
}

@media (orientation: landscape) and (max-height: 650px) {
  .city-map,
  .game-world { min-height: 720px; }

  .city-screen,
  .game-screen,
  .finale-screen { overflow-y: auto; }

  .finale-screen { place-items: start center; }
  .game-footer,
  .map-progress { position: fixed; }
}

@media (orientation: landscape) and (max-height: 650px) and (min-width: 761px) {
  .game-heading { top: 54px; }
  .game-mechanic { inset: 155px 0 74px; transform: scale(.84); transform-origin: center; }
}

@media (orientation: landscape) and (max-height: 650px) and (max-width: 760px) {
  .city-map { min-height: 100svh; }
  .district-earth,
  .district-dome { --district-y: 20%; }
  .district-canals,
  .district-healing { --district-y: 82%; }
}

/* Games library — replaces the former city-map selector */

.city-screen {
  overflow-y: auto;
  background: #17adbd;
}

.games-hub {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,239,178,.36) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 72%, rgba(255,239,178,.28) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.42), transparent 28%),
    linear-gradient(180deg, #39bdf0 0%, #22b8cc 45%, #0794a3 100%);
  background-size: 52px 52px, 67px 67px, auto, auto;
}

.games-hub::before,
.games-hub::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: 310px;
  height: 310px;
  border: 1px solid rgba(255,247,202,.24);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 34px rgba(255,247,202,.07), 0 0 0 68px rgba(255,247,202,.045);
}

.games-hub::before { inset: -145px auto auto -115px; }
.games-hub::after { inset: auto -125px -150px auto; }

.games-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(15px, 2.2vh, 24px);
  width: min(1180px, 100%);
  min-height: 100svh;
  margin: 0 auto;
  padding: max(76px, calc(env(safe-area-inset-top) + 68px)) clamp(18px, 4vw, 48px) max(20px, env(safe-area-inset-bottom));
}

.games-header {
  position: relative;
  width: min(560px, calc(100% - 120px));
  padding: 10px 22px 13px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  text-align: center;
  text-shadow: 0 3px 12px rgba(1,67,85,.42);
}

.games-header h2,
.games-header p { margin: 0; }

.games-header h2 {
  margin-top: 2px;
  color: #fffdf0;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.05;
}

.games-header p {
  margin-top: 3px;
  color: #fff8d7;
  font-size: clamp(.88rem, 1.35vw, 1.05rem);
  font-weight: 700;
}

.games-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 14px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255,253,235,.98), rgba(244,218,158,.96));
  color: #164a49;
  font-size: .78rem;
  font-weight: 900;
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(13px, 1.6vw, 22px);
  width: 100%;
}

.games-hub .district {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: none;
  min-height: 0;
  aspect-ratio: .83;
  overflow: hidden;
  border: 3px solid #f5cc68;
  border-radius: 28px;
  background-position: center;
  background-size: cover;
  box-shadow: 0 16px 34px rgba(1,75,88,.34), inset 0 0 0 2px rgba(255,249,214,.55);
  transform: none;
  isolation: isolate;
}

.games-hub .district::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,63,70,.02) 0 34%, rgba(5,76,78,.38) 55%, rgba(4,55,59,.95) 100%);
}

.game-card-earth { background-image: url("./assets/game-earth-v33.webp"); }
.game-card-dome { background-image: url("./assets/game-dome-v33.webp"); }
.game-card-canals { background-image: url("./assets/game-canals-v33.webp"); }
.game-card-healing { background-image: url("./assets/game-healing-v33.webp"); }

.game-card-number {
  position: absolute;
  z-index: 3;
  inset: 13px 13px auto auto;
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 2px solid #fff2bd;
  border-radius: 50%;
  background: #d99b34;
  color: #123f42;
  font-size: .9rem;
  font-weight: 900;
  box-shadow: 0 5px 12px rgba(8,31,31,.35);
}

[dir="ltr"] .game-card-number { inset: 13px auto auto 13px; }

.game-card-symbol {
  position: absolute;
  z-index: 3;
  top: 13px;
  left: 50%;
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 2px solid rgba(255,246,204,.92);
  border-radius: 50%;
  background: rgba(5,75,74,.9);
  color: #ffdd74;
  font-size: 1.25rem;
  font-weight: 900;
  transform: translateX(-50%);
  box-shadow: 0 5px 14px rgba(2,30,32,.35);
}

.game-card-copy {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 10px 14px;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 3px rgba(0,20,24,.8);
}

.game-card-copy small {
  color: #c9eee8;
  font-size: clamp(.78rem, 1.1vw, .95rem);
  font-weight: 700;
  line-height: 1.2;
}

.game-card-copy b {
  margin-top: 2px;
  color: #fff8d9;
  font-size: clamp(1.2rem, 1.8vw, 1.65rem);
  font-weight: 900;
  line-height: 1.1;
}

.game-card-copy .game-card-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 126px;
  min-height: 38px;
  margin-top: 11px;
  padding: 7px 15px;
  border: 2px solid #fff0af;
  border-radius: 999px;
  background: linear-gradient(145deg, #ffdc73, #e8aa3d);
  color: #153f3e;
  font-size: .9rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  text-shadow: none;
  box-shadow: 0 6px 14px rgba(1,24,27,.38);
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
}

.game-card-copy .game-card-start::after { content: "▶"; font-size: .68em; }
[dir="rtl"] .game-card-copy .game-card-start::after { transform: rotate(180deg); }

.games-hub .district { cursor: default; }
.games-hub .district:hover,
.games-hub .district:focus-visible,
.games-hub .district:active {
  transform: none;
  filter: none;
}
.game-card-copy .game-card-start:hover,
.game-card-copy .game-card-start:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-2px);
}
.game-card-copy .game-card-start:active { transform: translateY(0) scale(.97); }
.games-hub .district.is-complete { border-color: #58dfb4; }
.games-hub .district.is-complete .game-card-copy .game-card-start { background: linear-gradient(145deg, #66e3b8, #27aa80); }
.games-hub .district-check { z-index: 5; inset: 12px auto auto 12px; }
[dir="ltr"] .games-hub .district-check { inset: 12px 12px auto auto; }

.games-hub .games-progress {
  position: relative;
  left: auto;
  bottom: auto;
  width: min(680px, 100%);
  min-height: 70px;
  margin-top: auto;
  padding: 9px 18px;
  border-color: rgba(161,104,25,.62);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(255,252,232,.97), rgba(242,211,144,.96));
  box-shadow: 0 12px 28px rgba(2,78,87,.28), inset 0 1px #fff;
  transform: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.games-hub .progress-copy strong { color: #08767c; }
.games-hub .map-progress p { color: #684419; }
.games-hub .quest-meter { border-color: #c48b32; background: rgba(163,105,31,.16); }
.games-hub .map-seal { border-color: #bd8531; color: rgba(112,73,20,.5); background: rgba(185,128,43,.1); }

@media (max-width: 900px) {
  .games-shell { max-width: 720px; }
  .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .games-hub .district { aspect-ratio: 1.05; }
}

@media (max-width: 520px) {
  .games-shell {
    gap: 13px;
    padding: max(74px, calc(env(safe-area-inset-top) + 66px)) 11px max(13px, env(safe-area-inset-bottom));
  }
  .games-header { width: calc(100% - 104px); padding: 8px 10px 9px; border-radius: 18px; }
  .games-header h2 { font-size: clamp(1.55rem, 8vw, 2rem); }
  .games-header p { font-size: .8rem; }
  .games-kicker { min-height: 21px; padding: 2px 10px; font-size: .68rem; }
  .games-grid { gap: 10px; }
  .games-hub .district { aspect-ratio: .86; border-width: 2px; border-radius: 20px; }
  .game-card-number { inset: 8px 8px auto auto; width: 29px; height: 29px; font-size: .74rem; }
  [dir="ltr"] .game-card-number { inset: 8px auto auto 8px; }
  .game-card-symbol { top: 8px; width: 35px; height: 35px; font-size: 1rem; }
  .game-card-copy { padding: 11px 6px 10px; }
  .game-card-copy small { font-size: clamp(.72rem, 3.4vw, .86rem); }
  .game-card-copy b { font-size: clamp(1.02rem, 5vw, 1.28rem); }
  .game-card-copy .game-card-start { min-width: 112px; min-height: 34px; margin-top: 8px; padding: 6px 10px; font-size: .82rem; }
  .games-hub .games-progress { gap: 7px; min-height: 64px; padding: 7px 9px; border-width: 2px; }
  .games-hub .progress-copy { min-width: 88px; }
  .games-hub .progress-copy strong { font-size: .72rem; }
  .games-hub .map-progress p { font-size: .66rem; }
  .games-hub .quest-meter { width: 48px; }
  .games-hub .map-seal { width: 24px; height: 24px; }
}

@media (max-height: 720px) and (orientation: landscape) {
  .games-shell { padding-top: 68px; }
  .games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .games-hub .district { aspect-ratio: 1.12; }
  .games-header { padding-block: 7px 8px; }
  .games-header p { display: none; }
  .games-hub .games-progress { min-height: 58px; }
}

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

/* v39 — unified cinematic treatment for all interfaces and games */
.cinematic-world {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #073f48;
  pointer-events: none;
}

.cinematic-background {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.02) contrast(1.02) brightness(.98);
  animation: cinematicBreathe 13s ease-in-out infinite alternate;
}

.cinematic-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,25,31,.05), transparent 40%, rgba(0,25,31,.18)),
    radial-gradient(circle at 50% 45%, transparent 56%, rgba(0,28,35,.2));
}

@keyframes cinematicBreathe {
  from { transform: scale(1.01); }
  to { transform: scale(1.055); }
}

html,
body { background: #073f48; }

.app {
  z-index: 1;
  background: transparent;
}

.gate-screen,
.city-screen,
.games-hub,
.game-screen,
.game-world,
.finale-screen { background: transparent !important; }

.gate-screen::after,
.games-hub::before,
.games-hub::after,
.game-shade { display: none; }

.round-button,
.language-button {
  border-color: rgba(255,239,177,.82);
  background: rgba(2,43,48,.48);
  color: #fff4c7;
  box-shadow: 0 10px 28px rgba(0,20,26,.34), inset 0 1px rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.language-button span:first-child { color: #78ead5; }
.language-button i { background: rgba(255,244,199,.36); }

.gate-plaque {
  top: max(74px, calc(env(safe-area-inset-top) + 66px));
  width: min(560px, calc(100% - 120px));
  min-width: 0;
  padding: 13px 22px 15px;
  border: 1px solid rgba(255,228,139,.6);
  border-radius: 26px;
  background: rgba(2,40,46,.32);
  box-shadow: 0 18px 48px rgba(0,20,25,.28), inset 0 1px rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.gate-enter {
  bottom: clamp(70px, 10vh, 112px);
  min-height: 66px;
  border: 2px solid #fff0a8;
  border-radius: 999px;
  background: linear-gradient(145deg, #ffe47d, #e4a837);
  color: #143f42;
  text-shadow: none;
  box-shadow: 0 16px 38px rgba(0,26,31,.4), inset 0 1px rgba(255,255,255,.6);
}

.gate-enter::before { display: none; }
.gate-hint { background: rgba(2,43,48,.54); color: #fff4cf; border: 1px solid rgba(255,237,171,.62); }

.games-shell { max-width: 1180px; }
.games-header {
  width: min(600px, calc(100% - 120px));
  padding: 11px 22px 13px;
  border: 1px solid rgba(255,229,143,.58);
  border-radius: 24px;
  background: rgba(2,40,46,.34);
  box-shadow: 0 16px 40px rgba(0,24,30,.28), inset 0 1px rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.games-kicker { background: rgba(255,242,191,.92); }

.games-hub .district {
  border-color: rgba(255,227,132,.78);
  box-shadow: 0 18px 42px rgba(0,22,28,.42), inset 0 0 0 2px rgba(255,249,214,.34);
}

.games-hub .district::before {
  background: linear-gradient(180deg, transparent 0 48%, rgba(1,34,39,.26) 60%, rgba(1,27,32,.88) 100%);
}

.game-card-copy { padding-bottom: 16px; }
.game-card-copy .game-card-start {
  min-height: 42px;
  background: linear-gradient(145deg, #ffe47d, #e7ab3a);
  box-shadow: 0 8px 20px rgba(0,20,25,.42);
}

.games-hub .games-progress {
  border-color: rgba(255,228,135,.58);
  background: rgba(2,42,48,.5);
  box-shadow: 0 14px 34px rgba(0,23,29,.38), inset 0 1px rgba(255,255,255,.15);
}

.games-hub .progress-copy strong,
.games-hub .map-progress p { color: #fff2c3; }
.games-hub .quest-meter { border-color: #e9bf5c; background: rgba(255,255,255,.12); }
.games-hub .map-seal { border-color: #e9bf5c; color: rgba(255,244,196,.65); background: rgba(3,73,78,.42); }

.game-world { background-image: none !important; }
.game-mechanic {
  inset: 23% 0 9%;
  align-items: end;
  padding-inline: clamp(8px, 2vw, 28px);
}

.game-footer { bottom: max(12px, env(safe-area-inset-bottom)); }
.round-dots { background: rgba(2,43,48,.5); }

.canal-frame,
.earth-mechanic.gear-machine,
.dome-mechanic,
.medicine-mechanic {
  border-color: rgba(255,225,128,.62);
  background: rgba(2,42,48,.28);
  box-shadow: 0 22px 52px rgba(0,20,26,.4), inset 0 1px rgba(255,255,255,.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.canal-port small,
.medicine-statusbar,
.dome-counter,
.gear-status,
.astrolabe-status strong {
  border: 1px solid rgba(255,229,145,.52);
  background: rgba(2,49,55,.65);
  color: #fff3c5;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.earth-mechanic.gear-machine,
.dome-mechanic,
.medicine-mechanic { padding: clamp(10px, 2vw, 18px); }

.gear-status { padding: 6px 12px; border-radius: 999px; }
.gear-tray-button { background: rgba(255,244,199,.88); }

.medicine-mechanic {
  width: min(780px, 98vw);
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}

.medicine-board {
  min-height: clamp(250px, 42vh, 390px);
  gap: clamp(6px, 1.2vw, 13px);
  padding-bottom: 6px;
}

.medicine-vial {
  width: clamp(72px, 11vw, 110px) !important;
  height: clamp(170px, 27vw, 270px);
  filter: drop-shadow(0 18px 13px rgba(0,18,22,.48));
}

.vial-render {
  position: absolute;
  inset: 0;
  display: block;
}

.vial-render img {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.medicine-flask .vial-neck { display: none; }
.medicine-flask .vial-glass,
.medicine-flask.flask-conical .vial-glass {
  z-index: 3;
  left: 20%;
  right: 20%;
  bottom: 10%;
  height: 43%;
  overflow: hidden;
  border: 0;
  border-radius: 48% 48% 42% 42%;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  mix-blend-mode: color;
  opacity: .9;
}

.medicine-vial.is-selected .vial-glass,
.medicine-vial.is-complete .vial-glass,
.medicine-vial.is-receiving .vial-glass { border: 0; box-shadow: 0 0 22px rgba(85,231,211,.9); }

.medicine-statusbar {
  width: min(580px, 92%);
  margin-inline: auto;
  box-shadow: 0 10px 28px rgba(0,22,27,.32);
}

.finale-card,
.story-dialog,
.reward-dialog {
  border-color: rgba(255,226,130,.72);
  background: rgba(2,42,48,.78);
  color: #fff2c5;
  box-shadow: 0 24px 64px rgba(0,18,23,.5), inset 0 1px rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.finale-card h2,
.story-dialog h2,
.reward-dialog h2 { color: #fff3c5; }

@media (max-width: 620px) and (orientation: portrait) {
  .games-shell { padding-inline: 12px; }
  .games-header { width: calc(100% - 104px); }
  .games-grid { grid-template-columns: 1fr; gap: 14px; }
  .games-hub .district { aspect-ratio: 1.5; min-height: 220px; }
  .game-card-copy { align-items: flex-start; padding: 14px 18px 15px; text-align: start; }
  .game-card-copy .game-card-start { align-self: flex-start; }
  .games-hub .games-progress { margin-top: 2px; }

  .game-mechanic { inset: 20% 0 9%; padding-inline: 4px; }
  .medicine-board { min-height: min(56svh, 460px); gap: 5px; }
  .medicine-vial { width: clamp(58px, 17vw, 76px) !important; height: clamp(145px, 36vw, 190px); }
  .medicine-statusbar { width: 96%; }
}

@media (min-width: 621px) and (max-width: 1366px) {
  .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .games-hub .district { aspect-ratio: 1.65; }
}

@media (orientation: landscape) and (max-height: 650px) {
  .game-mechanic { inset: 18% 0 10%; }
  .games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .games-hub .district { aspect-ratio: 1.18; }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-background { animation: none; }
}

/* v19 — bright, full-width portrait game cards */
.gate-plaque #gateEyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 16px;
  border: 1px solid rgba(255, 244, 196, .9);
  border-radius: 999px;
  background: rgba(4, 99, 108, .84);
  box-shadow: 0 7px 20px rgba(2, 67, 82, .25);
}

.gate-screen .gate-enter {
  width: clamp(218px, 22vw, 304px);
  min-height: clamp(58px, 6vw, 70px);
  border: 3px solid #fff4c4;
  border-radius: 999px;
  background: linear-gradient(145deg, #ffe58a 0%, #f3bd50 58%, #df9630 100%);
  color: #124e52;
  text-shadow: none;
  box-shadow: 0 14px 30px rgba(2, 74, 87, .34), inset 0 2px rgba(255, 255, 255, .72);
}

.gate-screen .gate-enter::before {
  inset: -7px;
  border: 2px solid rgba(255, 247, 208, .52);
  border-radius: 999px;
}

.gate-screen .gate-enter:hover::before {
  border-color: #fff6ce;
  box-shadow: 0 0 24px rgba(255, 220, 111, .75);
}

.games-hub .district::before {
  background: linear-gradient(180deg, rgba(255,255,255,.02) 0 54%, rgba(255,248,218,.1) 100%);
}

.games-hub .district {
  box-shadow: 0 14px 30px rgba(1,75,88,.24), inset 0 0 0 2px rgba(255,249,214,.68);
}

.game-card-copy {
  inset: auto 10px 10px;
  padding: 11px 14px 12px;
  border: 2px solid rgba(255, 239, 177, .95);
  border-radius: 19px;
  background: linear-gradient(155deg, rgba(255,253,235,.97), rgba(246,220,158,.95));
  color: #174f53;
  text-shadow: none;
  box-shadow: 0 8px 20px rgba(3, 71, 76, .22);
}

.game-card-copy small { color: #0b777d; }
.game-card-copy b { color: #684319; }
.game-card-copy .game-card-start {
  border-color: #bfeee6;
  background: linear-gradient(145deg, #45d4c1, #18aeb6);
  color: #073f44;
  box-shadow: 0 6px 13px rgba(4, 103, 111, .25);
}

@media (max-width: 900px) and (orientation: portrait) {
  .games-shell {
    max-width: 620px;
    gap: 16px;
    padding-inline: 14px;
  }

  .games-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .games-hub .district {
    aspect-ratio: 1.5;
    min-height: 220px;
    border-width: 3px;
    border-radius: 24px;
  }

  .game-card-copy {
    inset: auto 12px 12px;
    padding: 12px 15px 13px;
  }

  .game-card-copy small { font-size: clamp(.86rem, 3.7vw, 1rem); }
  .game-card-copy b { font-size: clamp(1.3rem, 6vw, 1.65rem); }
  .game-card-copy .game-card-start {
    min-width: 140px;
    min-height: 40px;
    margin-top: 9px;
    font-size: .95rem;
  }
}

@media (max-width: 520px) and (orientation: portrait) {
  .games-shell {
    gap: 15px;
    padding: max(74px, calc(env(safe-area-inset-top) + 66px)) 13px max(16px, env(safe-area-inset-bottom));
  }

  .games-header {
    width: calc(100% - 64px);
    padding: 10px 12px 11px;
  }

  .games-header p { font-size: .86rem; }
  .games-grid { gap: 15px; }
  .games-hub .district {
    aspect-ratio: 1.42;
    min-height: 228px;
    border-radius: 22px;
  }

  .game-card-number { inset: 10px 10px auto auto; width: 34px; height: 34px; font-size: .82rem; }
  [dir="ltr"] .game-card-number { inset: 10px auto auto 10px; }
  .game-card-symbol { top: 10px; width: 40px; height: 40px; font-size: 1.12rem; }
  .game-card-copy { inset: auto 10px 10px; padding: 10px 12px 11px; }
  .game-card-copy small { font-size: .88rem; }
  .game-card-copy b { font-size: clamp(1.28rem, 6.5vw, 1.55rem); }
  .game-card-copy .game-card-start { min-width: 136px; min-height: 39px; padding: 7px 14px; font-size: .92rem; }

  .gate-screen .gate-enter {
    bottom: 88px;
    min-height: 60px;
    background: linear-gradient(145deg, #ffe58a 0%, #f3bd50 58%, #df9630 100%);
    box-shadow: 0 14px 30px rgba(2, 74, 87, .34), inset 0 2px rgba(255, 255, 255, .72);
  }

  .gate-plaque #gateEyebrow { font-size: .8rem; }
}

@media (hover: none), (pointer: coarse) {
  .round-button:hover,
  .language-button:hover,
  .wood-button:hover,
  .primary-button:hover,
  .secondary-button:hover,
  .action-button:hover {
    transform: none;
    filter: none;
  }

  .gate-enter:hover::before {
    border-color: transparent;
    box-shadow: none;
    transform: none;
  }

  .district:hover .district-label {
    transform: none;
    filter: none;
  }

  .district:hover .district-pulse {
    transform: translateX(-50%);
    box-shadow: 0 5px 18px rgba(55,33,4,.34), 0 0 0 8px rgba(255,214,92,.18);
  }

  .pulse-pad:hover { transform: translate(-50%, -50%); }
}

/* v20 — preserve the architecture and give the games more room */
.game-heading {
  display: none;
}

.game-mechanic {
  inset: 10% 0 8%;
  padding-inline: clamp(8px, 2vw, 22px);
}

@media (max-width: 900px) and (orientation: portrait) {
  .gate-plaque {
    top: max(54px, calc(env(safe-area-inset-top) + 40px));
  }

  .games-shell {
    padding-top: max(58px, calc(env(safe-area-inset-top) + 52px));
  }

  .games-header {
    margin-top: -8px;
  }

  .games-hub .district {
    aspect-ratio: 1.52;
  }

  .game-card-copy {
    inset: auto 12px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "place action"
      "title action";
    column-gap: 12px;
    row-gap: 0;
    align-items: center;
    padding: 8px 13px 9px;
    border-radius: 16px;
    text-align: start;
  }

  .game-card-copy small {
    grid-area: place;
    font-size: clamp(.8rem, 3.2vw, .94rem);
  }

  .game-card-copy b {
    grid-area: title;
    margin-top: 0;
    font-size: clamp(1.12rem, 5.1vw, 1.45rem);
  }

  .game-card-copy .game-card-start {
    grid-area: action;
    min-width: 116px;
    min-height: 38px;
    margin-top: 0;
    padding: 7px 12px;
    font-size: .88rem;
  }

  .game-world {
    padding: max(70px, calc(env(safe-area-inset-top) + 62px)) 8px 78px;
  }

  .game-mechanic {
    position: relative;
    inset: auto;
    min-height: calc(100svh - 148px);
    padding: 0 0 30px;
  }

  .canal-mechanic,
  .earth-mechanic,
  .dome-mechanic,
  .pulse-mechanic {
    width: min(820px, calc(100vw - 16px));
  }
}

@media (max-width: 520px) and (orientation: portrait) {
  .gate-plaque {
    top: max(46px, calc(env(safe-area-inset-top) + 34px));
  }

  .games-shell {
    padding-top: max(54px, calc(env(safe-area-inset-top) + 48px));
  }

  .games-header {
    width: calc(100% - 52px);
    margin-top: -6px;
    padding-block: 7px 8px;
  }

  .games-hub .district {
    aspect-ratio: 1.5;
    min-height: 220px;
  }

  .game-card-copy {
    inset: auto 9px 9px;
    column-gap: 8px;
    padding: 7px 10px 8px;
    border-radius: 15px;
  }

  .game-card-copy small { font-size: .76rem; }
  .game-card-copy b { font-size: clamp(1.05rem, 5.4vw, 1.3rem); }
  .game-card-copy .game-card-start {
    min-width: 104px;
    min-height: 36px;
    padding: 6px 10px;
    font-size: .82rem;
  }

  .game-world {
    padding: max(66px, calc(env(safe-area-inset-top) + 58px)) 6px 74px;
  }

  .game-mechanic {
    min-height: calc(100svh - 138px);
    padding-bottom: 24px;
  }

  .earth-mechanic { padding: 18px; }
  .dome-mechanic { min-height: 330px; padding: 20px 12px 26px; }
  .pulse-mechanic { min-height: 370px; }
  .pulse-board { width: min(350px, 94vw); }
}

/* v21 — clear landmarks above, controls anchored below */
.gate-plaque {
  top: max(22px, calc(env(safe-area-inset-top) + 12px));
}

.gate-plaque #gateEyebrow {
  display: none !important;
}

.gate-plaque #siteSubtitle {
  margin-top: 5px;
}

.game-heading {
  display: none !important;
}

.game-mechanic {
  position: absolute;
  inset: auto 0 clamp(82px, 8vh, 112px);
  min-height: 0;
  padding: 0 clamp(8px, 2vw, 22px);
  place-items: end center;
  transform: none;
  transform-origin: center bottom;
}

.game-world[data-game="dome"] {
  background-position: center center;
}

.game-world[data-game="earth"] {
  background-position: center top;
}

@media (max-width: 900px) and (orientation: portrait) {
  .gate-plaque {
    top: max(20px, calc(env(safe-area-inset-top) + 10px));
  }

  .game-world {
    min-height: 100svh;
    padding: 0;
    overflow: hidden;
  }

  .game-mechanic {
    position: absolute;
    inset: auto 0 max(82px, calc(env(safe-area-inset-bottom) + 72px));
    min-height: 0;
    padding: 0 6px;
    align-items: end;
  }

  .game-world[data-game="dome"] {
    background-position: center top;
  }
}

@media (max-width: 520px) and (orientation: portrait) {
  .gate-plaque {
    top: max(16px, calc(env(safe-area-inset-top) + 8px));
  }

  .gate-plaque h1 {
    font-size: clamp(2.25rem, 12vw, 3.35rem);
  }

  .gate-plaque #siteSubtitle {
    font-size: 1rem;
  }

  .game-mechanic {
    inset: auto 0 max(80px, calc(env(safe-area-inset-bottom) + 70px));
    padding-inline: 5px;
  }

  .earth-mechanic,
  .dome-mechanic {
    max-height: 58svh;
  }

  .dome-preview {
    margin-bottom: 12px;
  }
}

@media (orientation: landscape) and (max-height: 650px) {
  .game-mechanic {
    inset: auto 0 66px;
    transform: scale(.82);
    transform-origin: center bottom;
  }
}

/* v23 — lift the landing title clear of the tiled arch */
.gate-plaque {
  top: clamp(4px, 1.2vh, 14px) !important;
}

@media (max-width: 900px) and (orientation: portrait) {
  .gate-plaque {
    top: 8px !important;
  }
}

@media (max-width: 520px) and (orientation: portrait) {
  .gate-plaque {
    top: 4px !important;
  }
}

@media (orientation: landscape) and (max-height: 650px) {
  .gate-plaque {
    top: 2px !important;
  }
}

/* v24 — Ibn Sina: medicine solutions */
.medicine-mechanic {
  width: min(720px, 96vw);
  padding: clamp(18px, 3vw, 30px);
  border: 4px solid #e8bd55;
  border-radius: 34px;
  background: linear-gradient(155deg, rgba(255,251,218,.96), rgba(235,206,128,.94));
  box-shadow: 0 22px 48px rgba(39,24,8,.38), inset 0 0 0 3px rgba(255,255,255,.65);
}

.medicine-board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: end;
  gap: clamp(10px, 2vw, 20px);
  min-height: 255px;
  padding: 8px 4px 16px;
}

.medicine-vial {
  position: relative;
  width: clamp(56px, 8vw, 78px);
  height: clamp(174px, 24vw, 228px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 10px 8px rgba(67,41,8,.24));
  transition: transform .2s ease, filter .2s ease;
}

.medicine-vial:hover,
.medicine-vial:focus-visible,
.medicine-vial.is-selected {
  transform: translateY(-12px);
  filter: drop-shadow(0 14px 10px rgba(18,130,139,.34));
}

.vial-neck {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 20%;
  width: 60%;
  height: 21%;
  border: 5px solid rgba(47,112,137,.82);
  border-bottom: 0;
  border-radius: 13px 13px 3px 3px;
  background: linear-gradient(90deg, rgba(255,255,255,.62), rgba(135,223,235,.2));
  box-shadow: inset 4px 0 rgba(255,255,255,.48);
}

.vial-neck::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: -5px;
  height: 10px;
  border: 4px solid #d8b35e;
  border-radius: 999px;
  background: #fff2b6;
}

.vial-glass {
  position: absolute;
  z-index: 2;
  left: 5%;
  right: 5%;
  bottom: 0;
  height: 82%;
  overflow: hidden;
  border: 5px solid rgba(47,112,137,.86);
  border-radius: 13px 13px 25px 25px;
  background: linear-gradient(90deg, rgba(255,255,255,.72), rgba(164,229,235,.22) 38%, rgba(255,255,255,.38));
  box-shadow: inset 7px 0 rgba(255,255,255,.42), inset -5px 0 rgba(27,99,123,.1);
}

.solution-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--layer) * (100% / var(--capacity)));
  height: calc((100% / var(--capacity)) + 1px);
  border-top: 2px solid rgba(255,255,255,.42);
  transition: bottom .28s ease;
}

.solution-0 { background: linear-gradient(#ff9b4d, #e85b45); }
.solution-1 { background: linear-gradient(#39d9d0, #079db9); }
.solution-2 { background: linear-gradient(#9b70ef, #6440ca); }
.solution-3 { background: linear-gradient(#f2d84e, #e49b27); }
.solution-4 { background: linear-gradient(#83d64a, #31a65e); }

.medicine-vial.is-selected .vial-glass {
  border-color: #e8a827;
  box-shadow: 0 0 0 5px rgba(255,221,91,.4), inset 7px 0 rgba(255,255,255,.42);
}

.medicine-vial.is-complete .vial-glass {
  border-color: #1f9f83;
  box-shadow: 0 0 18px rgba(47,201,163,.65), inset 7px 0 rgba(255,255,255,.42);
}

.medicine-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 10px 17px;
  border-radius: 18px;
  background: #086c75;
  color: #fff8d8;
  font-size: clamp(.86rem, 2vw, 1rem);
  font-weight: 800;
}

.medicine-statusbar b {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f3c652;
  color: #184c50;
}

@media (max-width: 520px) and (orientation: portrait) {
  .medicine-mechanic {
    width: calc(100vw - 12px);
    padding: 14px 10px 12px;
    border-radius: 26px;
  }

  .medicine-board {
    min-height: 296px;
    gap: 9px 12px;
    padding-bottom: 10px;
  }

  .medicine-vial {
    width: clamp(44px, 13vw, 57px);
    height: clamp(132px, 37vw, 166px);
  }

  .vial-neck,
  .vial-glass { border-width: 4px; }

  .medicine-statusbar {
    min-height: 46px;
    padding: 8px 12px;
    font-size: .83rem;
  }
}

@media (orientation: landscape) and (max-height: 650px) {
  .medicine-mechanic {
    width: min(670px, 88vw);
    padding: 12px 18px;
  }

  .medicine-board {
    min-height: 175px;
    padding-block: 4px 8px;
  }

  .medicine-vial {
    width: 52px;
    height: 150px;
  }
}

/* v26 — glazed ceramic mosaic and visible pouring motion */
.ceramic-workbench {
  display: grid;
  gap: 14px;
  place-items: center;
}

.dome-mechanic {
  width: min(720px, 96vw);
  min-height: 0;
  padding: clamp(15px, 2.6vw, 25px);
  border: 4px solid #e8bd55;
  border-radius: 34px;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.75), transparent 23%),
    linear-gradient(155deg, rgba(255,251,218,.97), rgba(235,206,128,.95));
  box-shadow: 0 22px 48px rgba(39,24,8,.38), inset 0 0 0 3px rgba(255,255,255,.65);
}

.dome-preview {
  width: min(350px, 68vw);
  height: clamp(105px, 20vw, 145px);
  margin: 0;
  border: 7px solid #b97924;
  border-bottom-width: 10px;
  border-radius: 190px 190px 20px 20px;
  background:
    radial-gradient(circle at 50% 100%, transparent 0 17%, #f4ce62 18% 20%, transparent 21% 37%, #f4ce62 38% 40%, transparent 41%),
    repeating-conic-gradient(from 270deg at 50% 100%, #075b94 0 10deg, #18aeb4 10deg 20deg, #0a4381 20deg 30deg);
  box-shadow: inset 0 0 28px rgba(0,31,90,.45), 0 8px 17px rgba(79,47,5,.25);
}

.ceramic-star {
  position: absolute;
  left: 50%;
  bottom: 22%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  aspect-ratio: 1;
  border: 3px solid #ffe58b;
  border-radius: 50%;
  background: #087c96;
  color: #ffe58b;
  transform: translateX(-50%);
  box-shadow: 0 0 18px rgba(255,224,105,.6);
}

.dome-mechanic .piece-row {
  width: min(540px, 100%);
  display: grid;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  gap: clamp(8px, 1.6vw, 13px);
  padding: 13px;
  border: 3px solid #b77b29;
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(145deg, #0c788d, #07546f);
  background-size: 22px 22px, 22px 22px, auto;
  box-shadow: inset 0 0 0 3px rgba(255,229,139,.55), inset 0 0 24px rgba(0,33,61,.25);
}

.dome-mechanic .piece-slot {
  width: 100%;
  max-width: 104px;
  justify-self: center;
  border: 3px solid #e6ba56;
  border-radius: 19px;
  background:
    repeating-conic-gradient(from 15deg, rgba(127,79,18,.12) 0 4deg, transparent 4deg 60deg),
    linear-gradient(145deg, #f8e8ad, #d2a24b);
  box-shadow: inset 0 0 0 3px rgba(255,251,210,.7), 0 7px 12px rgba(16,40,39,.25);
}

.dome-mechanic .target-groove {
  top: 10%;
  width: 5px;
  height: 38%;
  background: rgba(95,55,10,.38);
  box-shadow: 0 0 0 1px rgba(255,255,255,.25);
}

.dome-mechanic .dome-piece {
  width: 78%;
  height: 78%;
  overflow: hidden;
  border: 4px solid #f6d56a;
  clip-path: polygon(50% 2%, 98% 92%, 2% 92%);
  background:
    radial-gradient(circle at 50% 60%, #38d0c5 0 10%, transparent 11%),
    conic-gradient(from 15deg, #073f83, #18b7bc, #07699c, #37c9be, #073f83);
  box-shadow: inset 8px 5px 9px rgba(255,255,255,.27), inset -8px -7px 12px rgba(0,30,78,.3), 0 4px 8px rgba(31,34,16,.25);
}

.dome-mechanic .dome-piece::before {
  left: 47%;
  top: 5%;
  width: 7%;
  height: 85%;
  background: #f8d46b;
  box-shadow: 0 0 7px rgba(255,224,105,.85);
}

.dome-mechanic .dome-piece::after {
  content: "";
  inset: 9% 16% 20%;
  border: 2px solid rgba(255,238,148,.72);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.32), transparent 56%);
}

.ceramic-motif {
  position: absolute;
  left: 50%;
  top: 57%;
  z-index: 3;
  width: 25%;
  aspect-ratio: 1;
  border: 2px solid #fff0a2;
  border-radius: 50%;
  background: #08788d;
  transform: translate(-50%, -50%);
}

.dome-mechanic .piece-slot.is-correct {
  background: linear-gradient(145deg, #fff0b0, #dbad4f);
  box-shadow: inset 0 0 0 3px #fff4af, 0 0 22px rgba(60,207,169,.9);
}

.dome-mechanic .piece-slot.is-correct .dome-piece {
  filter: brightness(1.16) saturate(1.08);
}

.dome-counter {
  display: table;
  min-width: 160px;
  margin: 12px auto 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: #086c75;
  color: #fff8d8;
  font-size: .88rem;
}

.medicine-vial.is-pouring {
  z-index: 8;
  transform: translateY(-26px) rotate(calc(var(--pour-direction) * 42deg));
  transform-origin: 50% 12%;
  transition: transform .42s cubic-bezier(.2,.8,.25,1);
}

.medicine-vial.is-receiving .vial-glass {
  box-shadow: 0 0 0 5px rgba(61,215,210,.25), 0 0 24px rgba(35,185,190,.55), inset 7px 0 rgba(255,255,255,.42);
}

@media (max-width: 520px) and (orientation: portrait) {
  .dome-mechanic {
    width: calc(100vw - 12px);
    padding: 12px 10px;
    border-radius: 26px;
  }

  .ceramic-workbench { gap: 10px; }

  .dome-preview {
    width: min(300px, 72vw);
    height: 105px;
  }

  .dome-mechanic .piece-row {
    gap: 7px;
    padding: 9px;
    border-radius: 19px;
  }

  .dome-mechanic .piece-slot {
    max-width: 78px;
    border-radius: 14px;
  }

  .dome-counter { margin-top: 9px; }

  .medicine-vial.is-pouring {
    transform: translateY(-18px) rotate(calc(var(--pour-direction) * 36deg));
  }
}

@media (orientation: landscape) and (max-height: 650px) {
  .dome-mechanic {
    width: min(680px, 90vw);
    padding: 10px 14px;
  }

  .ceramic-workbench {
    grid-template-columns: 210px 1fr;
    gap: 12px;
  }

  .dome-preview {
    width: 210px;
    height: 105px;
  }

  .dome-mechanic .piece-row {
    padding: 8px;
  }

  .dome-counter { margin-top: 7px; }
}

/* v31 — iPad game library: large two-by-two cards */
@media (min-width: 700px) and (max-width: 1366px) {
  .games-shell {
    width: 100%;
    max-width: 1020px;
    gap: clamp(14px, 1.8vh, 20px);
    padding: max(68px, calc(env(safe-area-inset-top) + 58px)) clamp(24px, 4vw, 52px) max(18px, env(safe-area-inset-bottom));
  }

  .games-header {
    width: min(600px, calc(100% - 120px));
    padding-block: 7px 9px;
  }

  .games-grid {
    width: min(940px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2.2vw, 24px);
  }

  .games-hub .district {
    min-height: 0;
    aspect-ratio: 1.7;
    border-radius: 26px;
  }

  .game-card-copy {
    inset: auto 14px 14px;
    padding: 10px 16px 11px;
    border-radius: 18px;
  }

  .game-card-copy small { font-size: clamp(.9rem, 1.8vw, 1.05rem); }
  .game-card-copy b { font-size: clamp(1.35rem, 2.8vw, 1.8rem); }
  .game-card-copy .game-card-start {
    min-width: 142px;
    min-height: 40px;
    margin-top: 7px;
    font-size: .96rem;
  }

  .games-hub .games-progress { width: min(940px, 100%); }
}

/* v32 — four distinct scientific instruments */

/* Al-Khwarizmi: an unmistakable start-to-finish algorithmic canal */
.canal-port {
  position: relative;
  min-width: 82px;
}

.canal-port small {
  display: block;
  min-width: 70px;
  padding: 5px 9px;
  border: 2px solid #fff2a9;
  border-radius: 999px;
  background: #0a6873;
  color: #fff7d6;
  font-size: .76rem;
  font-style: normal;
  line-height: 1;
  text-align: center;
  box-shadow: 0 5px 12px rgba(6,61,66,.28);
}

.canal-port.source::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -18px;
  color: #fff2a9;
  font-size: 1.5rem;
  font-weight: 900;
  text-shadow: 0 2px 5px rgba(0,64,70,.55);
}

.canal-port.target small { background: #247543; }

/* Al-Biruni: mural quadrant inside an observatory */
.earth-instrument-name {
  position: absolute;
  z-index: 6;
  top: 12px;
  left: 50%;
  padding: 5px 14px;
  border: 2px solid #ffe89b;
  border-radius: 999px;
  background: #075f6e;
  color: #fff5c9;
  font-size: .82rem;
  font-weight: 900;
  transform: translateX(-50%);
  box-shadow: 0 5px 13px rgba(5,55,61,.28);
}

.observatory-stage {
  background: linear-gradient(180deg, #57c8dc 0 50%, #e6bd72 51% 100%);
}

.mountain-silhouette {
  position: absolute;
  inset: 28% 0 0;
  z-index: 1;
  background: linear-gradient(155deg, #98652f, #5f4429);
  clip-path: polygon(0 72%, 18% 43%, 33% 64%, 53% 18%, 70% 59%, 84% 38%, 100% 68%, 100% 100%, 0 100%);
  opacity: .9;
}

.quadrant-arc {
  position: absolute;
  left: 50%;
  bottom: 12%;
  z-index: 2;
  width: 74%;
  aspect-ratio: 2 / 1;
  border: 9px solid #c58c2c;
  border-bottom: 0;
  border-radius: 360px 360px 0 0;
  background: repeating-conic-gradient(from 270deg at 50% 100%, rgba(255,238,159,.62) 0 1deg, transparent 1deg 10deg);
  transform: translateX(-50%);
  box-shadow: inset 0 0 0 3px rgba(255,244,189,.5), 0 5px 14px rgba(69,39,8,.2);
}

/* Abu Nasr Mansur: interactive star-finding astrolabe */
.dome-mechanic {
  width: min(720px, 96vw);
  padding: clamp(12px, 2vw, 20px);
  border-color: #d9ad4b;
  background: linear-gradient(155deg, rgba(255,249,214,.97), rgba(226,192,109,.96));
}

.astrolabe-mechanic { display: grid; gap: 12px; }

.astrolabe-sky {
  position: relative;
  height: clamp(260px, 38vw, 390px);
  overflow: hidden;
  border: 5px solid #c99431;
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 26%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 22%, rgba(255,255,255,.7) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 38% 48%, rgba(255,255,255,.65) 0 1px, transparent 2px),
    linear-gradient(180deg, #071c4f, #074e70 72%, #096f78);
  box-shadow: inset 0 0 45px rgba(0,7,35,.55), 0 8px 17px rgba(65,37,5,.25);
}

.sky-star,
.astrolabe-target-star {
  position: absolute;
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff3a8;
  box-shadow: 0 0 9px #fff4a4;
}

.star-one { left: 18%; top: 23%; }
.star-two { left: 78%; top: 18%; }
.star-three { left: 66%; top: 42%; }

.astrolabe-target-star {
  z-index: 5;
  left: var(--star-x);
  top: var(--star-top);
  width: 19px;
  border: 4px solid #fff6bd;
  background: #f2bd3e;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px #fff7b8, 0 0 28px #e9b323;
  animation: starPulse 1.3s ease-in-out infinite;
}

@keyframes starPulse {
  50% { box-shadow: 0 0 17px #fff7b8, 0 0 42px #e9b323; }
}

.astrolabe-dial {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 88%;
  width: min(84%, 460px);
  aspect-ratio: 1;
  border: 10px solid #d8a33d;
  border-radius: 50%;
  background: repeating-conic-gradient(from -50deg, rgba(255,226,126,.62) 0 1deg, transparent 1deg 10deg);
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 0 4px #ffdfa0, inset 0 0 28px rgba(236,189,77,.4);
}

.astrolabe-rings {
  position: absolute;
  inset: 14%;
  border: 4px solid rgba(255,222,125,.85);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(255,219,112,.14), inset 0 0 0 22px rgba(255,219,112,.12);
}

.astrolabe-rule {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48%;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff0a2, #d99c2f);
  box-shadow: 0 0 12px rgba(255,231,139,.8);
  transform: rotate(calc(var(--pointer-angle) - 90deg));
  transform-origin: left center;
  transition: transform .1s linear;
}

.astrolabe-pivot {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 34px;
  aspect-ratio: 1;
  border: 5px solid #ffefae;
  border-radius: 50%;
  background: #0a7583;
  transform: translate(-50%, -50%);
}

.astrolabe-status {
  display: flex;
  justify-content: center;
  color: #694316;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
}

.astrolabe-status strong {
  padding: 6px 17px;
  border-radius: 999px;
  background: rgba(255,247,202,.76);
}

.astrolabe-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  direction: ltr;
}

.dome-mechanic.is-complete .astrolabe-target-star {
  background: #48d5a2;
  box-shadow: 0 0 18px #92ffd4, 0 0 45px #28bd8a;
}

/* Ibn Sina: round-bottom and conical laboratory flasks */
.medicine-flask.flask-round { width: clamp(72px, 10vw, 96px); }
.medicine-flask.flask-conical { width: clamp(76px, 11vw, 104px); }

.medicine-flask .vial-neck {
  left: 35%;
  width: 30%;
  height: 29%;
  border-radius: 10px 10px 2px 2px;
}

.medicine-flask .vial-glass {
  left: 5%;
  right: 5%;
  height: 72%;
  border-radius: 46% 46% 29% 29% / 34% 34% 25% 25%;
}

.medicine-flask.flask-conical .vial-glass {
  left: 0;
  right: 0;
  height: 70%;
  border-radius: 45% 45% 17% 17% / 18% 18% 10% 10%;
  clip-path: polygon(34% 0, 66% 0, 96% 88%, 92% 100%, 8% 100%, 4% 88%);
}

@media (max-width: 520px) and (orientation: portrait) {
  .canal-mechanic { grid-template-columns: 58px minmax(210px, 1fr) 58px; gap: 5px; }
  .canal-port { min-width: 0; }
  .canal-port small { min-width: 54px; padding: 4px 5px; font-size: .67rem; }
  .canal-port span { display: block; font-size: .65rem; line-height: 1.15; }
  .canal-port.source::after { right: -9px; font-size: 1.05rem; }
  .earth-instrument-name { top: 9px; font-size: .72rem; }
  .astrolabe-sky { height: min(42svh, 340px); }
  .astrolabe-controls { gap: 9px; }
  .astrolabe-controls .action-button { min-width: 120px; padding-inline: 12px; }
  .medicine-flask.flask-round { width: clamp(53px, 15vw, 66px); }
  .medicine-flask.flask-conical { width: clamp(57px, 16vw, 70px); }
}

@media (orientation: landscape) and (max-height: 650px) {
  .astrolabe-sky { height: 225px; }
  .astrolabe-mechanic { grid-template-columns: minmax(360px, 1fr) 210px; align-items: center; }
  .astrolabe-status,
  .astrolabe-controls { grid-column: 2; }
  .astrolabe-sky { grid-row: 1 / span 2; }
}

/* v35 — Al-Biruni's three-stage gear machine */

.earth-mechanic.gear-machine {
  display: grid;
  width: min(790px, 96vw);
  max-height: none;
  gap: 9px;
  padding: clamp(11px, 2vw, 18px);
  overflow: visible;
  border: 5px solid #d2a348;
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.52), transparent 42%),
    linear-gradient(155deg, rgba(255,249,219,.97), rgba(231,198,123,.96));
  box-shadow: var(--shadow), inset 0 0 0 3px #fff0b0;
}

.gear-machine-board {
  position: relative;
  width: 100%;
  height: clamp(185px, 29vw, 260px);
  overflow: hidden;
  border: 4px solid #a86f27;
  border-radius: 24px;
  direction: ltr;
  background:
    radial-gradient(circle at 21% 25%, rgba(255,247,188,.3) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 70%, rgba(255,247,188,.25) 0 2px, transparent 3px),
    linear-gradient(150deg, #0b7c87, #07505f 72%, #063e4d);
  box-shadow: inset 0 0 0 3px rgba(255,231,141,.45), inset 0 18px 38px rgba(4,41,54,.34);
}

.gear-machine-board::before,
.gear-machine-board::after {
  content: "";
  position: absolute;
  z-index: 0;
  border: 2px solid rgba(255,224,125,.2);
  border-radius: 50%;
}

.gear-machine-board::before {
  width: 170px;
  height: 170px;
  left: -72px;
  top: -88px;
}

.gear-machine-board::after {
  width: 230px;
  height: 230px;
  right: -130px;
  bottom: -150px;
}

.gear-network {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.gear-network polyline {
  fill: none;
  stroke: rgba(255,225,126,.68);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2.5 2;
  vector-effect: non-scaling-stroke;
}

.gear-slot {
  --gear-color: #e8b83f;
  --gear-dark: #98601f;
  position: absolute;
  z-index: 3;
  left: var(--slot-x);
  top: var(--slot-y);
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: 3px dashed color-mix(in srgb, var(--gear-color), #fff 28%);
  border-radius: 50%;
  background: rgba(3,51,61,.65);
  color: var(--gear-color);
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.07), 0 4px 12px rgba(0,28,35,.25);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.gear-slot.gear-size-s { width: clamp(44px, 10vw, 66px); font-size: clamp(2.65rem, 9vw, 4rem); }
.gear-slot.gear-size-m { width: clamp(51px, 12.5vw, 82px); font-size: clamp(3.1rem, 11vw, 5rem); }
.gear-slot.gear-size-l { width: clamp(59px, 15vw, 98px); font-size: clamp(3.65rem, 13.5vw, 6rem); }

.gear-slot:not(.is-filled)::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 19%;
  aspect-ratio: 1;
  border: 3px solid #fff0ac;
  border-radius: 50%;
  background: #a46b26;
  box-shadow: 0 0 0 5px rgba(255,228,134,.12);
  transform: translate(-50%, -50%);
}

.gear-slot:not(.is-filled):focus-visible,
.gear-slot:not(.is-filled):hover {
  border-style: solid;
  background: rgba(8,94,103,.9);
  outline: 3px solid #fff4bb;
  outline-offset: 3px;
}

.gear-slot.is-filled {
  border-style: solid;
  border-color: rgba(255,241,174,.78);
  background: rgba(8,76,83,.56);
}

.gear-ghost {
  opacity: .32;
  filter: grayscale(.12) drop-shadow(0 0 5px rgba(255,238,159,.26));
}

.gear-slot.is-match-target {
  border-style: solid;
  border-color: #fff5b9;
  background: rgba(16,123,126,.92);
  animation: gearTargetPulse .86s ease-in-out infinite;
}

.gear-slot.is-match-target .gear-ghost {
  opacity: .78;
  filter: drop-shadow(0 0 10px #fff0a0);
}

@keyframes gearTargetPulse {
  50% {
    box-shadow: inset 0 0 0 4px rgba(255,255,255,.15), 0 0 0 8px rgba(255,225,111,.42), 0 0 24px rgba(91,225,211,.75);
  }
}

.gear-token {
  --gear-color: #e8b83f;
  --gear-dark: #98601f;
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--gear-color);
  filter: drop-shadow(0 5px 4px rgba(0,33,42,.34));
}

.gear-glyph {
  display: block;
  font-family: Arial, sans-serif;
  font-size: 1em;
  line-height: 1;
  text-shadow: 0 2px 0 var(--gear-dark), 0 0 8px rgba(255,236,154,.3);
}

.gear-token i {
  position: absolute;
  width: 20%;
  aspect-ratio: 1;
  border: 3px solid #fff2ad;
  border-radius: 50%;
  background: var(--gear-dark);
  box-shadow: 0 0 0 2px rgba(72,41,5,.2);
}

.gear-form-ring i {
  width: 30%;
  border-width: 4px;
  background: #0a6670;
}

.gear-form-bold .gear-glyph {
  filter: saturate(1.15) brightness(1.08);
  transform: scale(1.06);
}

.gear-tone-0 { --gear-color: #f2c34f; --gear-dark: #97611e; }
.gear-tone-1 { --gear-color: #62ddd2; --gear-dark: #08717a; }
.gear-tone-2 { --gear-color: #79bde9; --gear-dark: #176a9b; }
.gear-tone-3 { --gear-color: #f09a75; --gear-dark: #9a4d35; }

.gear-input,
.earth-output {
  position: absolute;
  z-index: 4;
  top: 52%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
}

.gear-input {
  left: 7%;
  width: clamp(40px, 8vw, 63px);
  aspect-ratio: 1;
  color: #f3c654;
}

.gear-input span {
  font-family: Arial, sans-serif;
  font-size: clamp(2.5rem, 8vw, 4rem);
  line-height: 1;
  filter: drop-shadow(0 4px 5px rgba(0,28,35,.35));
}

.gear-input i {
  position: absolute;
  left: -22%;
  width: 35%;
  height: 78%;
  border: 5px solid #f6dc87;
  border-right: 0;
  border-radius: 16px 0 0 16px;
  transform: rotate(-12deg);
}

.earth-output {
  left: 92%;
  width: clamp(58px, 11vw, 90px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.earth-drive-gear {
  position: absolute;
  z-index: 1;
  display: block;
  color: #f0c24d;
  font-family: Arial, sans-serif;
  font-size: clamp(3.7rem, 10.5vw, 5.8rem);
  line-height: 1;
  text-shadow: 0 3px 0 #93601e, 0 0 9px rgba(255,234,142,.48);
  filter: drop-shadow(0 5px 5px rgba(0,31,39,.35));
}

.earth-output .earth-globe {
  position: relative;
  z-index: 2;
  display: grid;
  width: 55%;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #fff0a2;
  border-radius: 50%;
  background: #063f55;
  font-size: clamp(1.45rem, 4.5vw, 2.5rem);
  line-height: 1;
  box-shadow: 0 0 0 3px rgba(255,224,111,.16);
}

.earth-output i {
  position: absolute;
  inset: -11px;
  border: 2px solid rgba(255,230,134,.48);
  border-radius: 50%;
  opacity: 0;
}

.gear-status {
  min-height: 24px;
  margin: 0;
  color: #684416;
  text-align: center;
  font-size: clamp(.82rem, 1.8vw, 1rem);
  font-weight: 900;
}

.gear-tray {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  direction: ltr;
}

.gear-tray-button {
  display: grid;
  width: clamp(47px, 9vw, 66px);
  aspect-ratio: 1;
  place-items: center;
  padding: 5px;
  border: 3px solid #b17829;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff4c7, #e8be68);
  box-shadow: 0 5px 10px rgba(75,44,8,.22), inset 0 1px #fff9de;
  cursor: grab;
  font-size: clamp(2.6rem, 7vw, 4rem);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  touch-action: manipulation;
}

.gear-tray-button.gear-size-s .gear-token { transform: scale(.74); }
.gear-tray-button.gear-size-m .gear-token { transform: scale(.88); }
.gear-tray-button.gear-size-l .gear-token { transform: scale(1); }

.gear-tray-button:hover,
.gear-tray-button:focus-visible,
.gear-tray-button.is-selected {
  z-index: 2;
  border-color: #fff1a6;
  outline: 3px solid #0b8b91;
  outline-offset: 2px;
  transform: translateY(-5px);
  box-shadow: 0 9px 16px rgba(48,35,9,.28), 0 0 0 4px rgba(255,226,103,.35);
}

.gear-tray-button:active { cursor: grabbing; }

.gear-machine-controls {
  display: flex;
  justify-content: center;
}

.gear-crank {
  width: min(265px, 84%);
  min-height: 48px;
  font-family: var(--font);
  font-size: clamp(.94rem, 2.2vw, 1.12rem);
}

.gear-crank::before {
  content: "↻";
  display: inline-block;
  margin-inline-end: 8px;
  font-size: 1.2em;
}

.gear-crank.is-ready {
  animation: crankReady 1.15s ease-in-out infinite;
}

@keyframes crankReady {
  50% { box-shadow: 0 0 0 7px rgba(255,222,96,.3), 0 10px 20px rgba(57,36,6,.2); }
}

.gear-machine.is-running .gear-glyph,
.gear-machine.is-running .gear-input span,
.gear-machine.is-running .earth-drive-gear {
  animation: gearSpin .75s linear infinite;
}

.gear-machine.is-running .spin-reverse .gear-glyph {
  animation-direction: reverse;
}

.gear-machine.is-running .earth-globe {
  animation: earthGlow .72s ease-in-out infinite alternate;
}

.gear-machine.is-running .earth-output i {
  animation: earthOrbit 1s linear infinite;
  opacity: 1;
}

@keyframes gearSpin {
  to { transform: rotate(360deg); }
}

@keyframes earthGlow {
  to { box-shadow: 0 0 15px #ffe47e, 0 0 34px rgba(82,224,208,.9); }
}

@keyframes earthOrbit {
  to { transform: rotate(360deg) scale(1.08); }
}

@media (max-width: 520px) and (orientation: portrait) {
  .earth-mechanic.gear-machine {
    width: calc(100vw - 12px);
    max-height: calc(100svh - 152px);
    gap: 6px;
    padding: 8px;
    border-width: 4px;
    border-radius: 24px;
  }

  .gear-machine-board {
    height: clamp(160px, 23svh, 190px);
    border-width: 3px;
    border-radius: 19px;
  }

  .gear-slot.gear-size-s { width: clamp(40px, 11vw, 50px); }
  .gear-slot.gear-size-m { width: clamp(47px, 13vw, 58px); }
  .gear-slot.gear-size-l { width: clamp(53px, 15vw, 66px); }

  .gear-tray {
    min-height: 50px;
    gap: 5px;
  }

  .gear-tray-button {
    width: clamp(43px, 12vw, 52px);
    padding: 4px;
    border-width: 2px;
    border-radius: 14px;
  }

  .gear-status {
    min-height: 20px;
    font-size: .84rem;
    line-height: 1.35;
  }

  .gear-crank {
    min-height: 43px;
    font-size: .9rem;
  }
}

@media (orientation: landscape) and (max-height: 650px) {
  .earth-mechanic.gear-machine {
    grid-template-columns: minmax(410px, 1fr) minmax(180px, 230px);
    grid-template-rows: auto auto 1fr;
    width: min(920px, 96vw);
    gap: 6px 14px;
  }

  .gear-machine-board {
    grid-row: 1 / span 3;
    height: min(55vh, 300px);
  }

  .gear-status,
  .gear-tray,
  .gear-machine-controls {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gear-crank.is-ready,
  .gear-machine.is-running .gear-glyph,
  .gear-machine.is-running .gear-input span,
  .gear-machine.is-running .earth-drive-gear,
  .gear-machine.is-running .earth-globe,
  .gear-machine.is-running .earth-output i {
    animation: none;
  }
}

/* v39 final cascade — keep the cinematic layer visible above all legacy themes */
.gate-screen,
.city-screen,
.games-hub,
.game-screen,
.game-world,
.finale-screen { background: transparent !important; }

.game-world { background-image: none !important; }
.game-shade,
.games-hub::before,
.games-hub::after,
.gate-screen::after { display: none !important; }

.gate-plaque {
  top: max(74px, calc(env(safe-area-inset-top) + 64px)) !important;
  width: min(560px, calc(100% - 118px));
  min-width: 0;
  padding: 12px 22px 15px;
  border: 1px solid rgba(255,228,139,.58);
  border-radius: 25px;
  background: rgba(2,40,46,.32);
  box-shadow: 0 18px 48px rgba(0,20,25,.28), inset 0 1px rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.gate-screen .gate-enter {
  bottom: clamp(70px, 10vh, 112px);
  border: 2px solid #fff0a8;
  background: linear-gradient(145deg, #ffe47d, #e4a837);
  color: #143f42;
  box-shadow: 0 16px 38px rgba(0,26,31,.4), inset 0 1px rgba(255,255,255,.6);
}
.gate-screen .gate-enter::before { display: none; }

.games-header {
  border: 1px solid rgba(255,229,143,.58);
  border-radius: 24px;
  background: rgba(2,40,46,.34);
  box-shadow: 0 16px 40px rgba(0,24,30,.28), inset 0 1px rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.games-hub .district::before {
  display: block !important;
  background: linear-gradient(180deg, transparent 0 48%, rgba(1,34,39,.24) 60%, rgba(1,27,32,.86) 100%);
}

.games-hub .district {
  border-color: rgba(255,227,132,.78);
  box-shadow: 0 18px 42px rgba(0,22,28,.42), inset 0 0 0 2px rgba(255,249,214,.34);
}

.game-card-copy {
  border: 0;
  background: transparent;
  color: #fff;
  text-shadow: 0 2px 5px rgba(0,20,24,.88);
  box-shadow: none;
}
.game-card-copy small { color: #c9eee8; }
.game-card-copy b { color: #fff8d9; }
.game-card-copy .game-card-start {
  border-color: #fff0af;
  background: linear-gradient(145deg, #ffe47d, #e7ab3a);
  color: #153f3e;
  box-shadow: 0 8px 20px rgba(0,20,25,.42);
}

.games-hub .games-progress {
  border-color: rgba(255,228,135,.58);
  background: rgba(2,42,48,.5);
  box-shadow: 0 14px 34px rgba(0,23,29,.38), inset 0 1px rgba(255,255,255,.15);
}
.games-hub .progress-copy strong,
.games-hub .map-progress p { color: #fff2c3; }

.game-mechanic {
  position: absolute;
  inset: auto 0 max(80px, calc(env(safe-area-inset-bottom) + 70px));
  min-height: 0;
  padding: 0 clamp(5px, 2vw, 22px);
  place-items: end center;
  transform: none;
}

.canal-frame,
.earth-mechanic.gear-machine,
.dome-mechanic,
.medicine-mechanic {
  border-color: rgba(255,225,128,.62);
  background: rgba(2,42,48,.28);
  box-shadow: 0 22px 52px rgba(0,20,26,.4), inset 0 1px rgba(255,255,255,.12);
}

.medicine-mechanic {
  width: min(780px, 98vw);
  padding: clamp(10px, 2vw, 18px);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.medicine-board {
  min-height: clamp(250px, 42vh, 390px);
  gap: clamp(6px, 1.2vw, 13px);
  padding-bottom: 6px;
}

.medicine-vial,
.medicine-flask.flask-round,
.medicine-flask.flask-conical {
  width: clamp(72px, 11vw, 110px);
  height: clamp(170px, 27vw, 270px);
}

.medicine-flask .vial-neck { display: none; }
.medicine-flask .vial-glass,
.medicine-flask.flask-conical .vial-glass {
  z-index: 3;
  left: 20%;
  right: 20%;
  bottom: 10%;
  height: 43%;
  border: 0;
  border-radius: 48% 48% 42% 42%;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  mix-blend-mode: color;
  opacity: .9;
}

.medicine-statusbar {
  width: min(580px, 92%);
  margin-inline: auto;
  border: 1px solid rgba(255,229,145,.52);
  background: rgba(2,49,55,.65);
  color: #fff3c5;
  box-shadow: 0 10px 28px rgba(0,22,27,.32);
}

@media (max-width: 620px) and (orientation: portrait) {
  .gate-plaque { top: max(70px, calc(env(safe-area-inset-top) + 62px)) !important; }
  .games-grid { grid-template-columns: 1fr; gap: 14px; }
  .games-hub .district { aspect-ratio: 1.5; min-height: 220px; }
  .game-card-copy { inset: auto 9px 9px; }
  .medicine-board { min-height: min(56svh, 460px); gap: 5px; }
  .medicine-vial,
  .medicine-flask.flask-round,
  .medicine-flask.flask-conical { width: clamp(58px, 17vw, 76px); height: clamp(145px, 36vw, 190px); }
}

@media (orientation: landscape) and (max-height: 650px) {
  .gate-plaque { top: max(54px, calc(env(safe-area-inset-top) + 46px)) !important; }
  .game-mechanic { inset: auto 0 66px; transform: scale(.86); transform-origin: center bottom; }
}

/* v40 — unique interface scenes and fully open play spaces */
html[data-scene="gate"] .cinematic-background,
html[data-scene="city"] .cinematic-background { opacity: 0; }

html[data-scene="gate"] .gate-screen {
  background: url("./assets/city-gate-v10.webp") center / cover no-repeat !important;
}

html[data-scene="city"] .city-screen {
  background: url("./assets/khwarazm-dawn.webp") center / cover fixed no-repeat !important;
}

html[data-scene="gate"] .cinematic-vignette,
html[data-scene="city"] .cinematic-vignette { display: none; }

html[data-scene="canals"] .cinematic-background,
html[data-scene="earth"] .cinematic-background,
html[data-scene="dome"] .cinematic-background,
html[data-scene="healing"] .cinematic-background { opacity: 1; }

.canal-frame,
.earth-mechanic.gear-machine,
.dome-mechanic,
.medicine-mechanic {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.canal-frame { padding: 0; }
.canal-grid {
  padding: 8px;
  border: 1px solid rgba(255,231,151,.42);
  border-radius: 23px;
  background: rgba(2,44,50,.16);
  box-shadow: 0 14px 36px rgba(0,22,28,.2);
}

.gear-machine-board {
  border-color: rgba(255,226,135,.55);
  background: rgba(2,45,53,.2);
  box-shadow: inset 0 0 0 2px rgba(255,231,141,.16), 0 14px 36px rgba(0,24,30,.2);
}

.gear-machine-board::before,
.gear-machine-board::after { opacity: .35; }

.gear-tray {
  padding: 5px 8px;
  border-radius: 18px;
  background: rgba(2,43,49,.15);
}

.astrolabe-sky {
  border-color: rgba(255,224,129,.62);
  background: rgba(2,28,45,.14);
  box-shadow: inset 0 0 30px rgba(0,7,35,.18), 0 14px 36px rgba(0,20,28,.18);
}

.astrolabe-status strong,
.astrolabe-controls {
  background: rgba(2,43,49,.38);
  color: #fff4ca;
}

.astrolabe-controls {
  padding: 8px 10px;
  border: 1px solid rgba(255,228,139,.4);
  border-radius: 18px;
}

.medicine-board { background: transparent; }

@media (max-width: 620px) and (orientation: portrait) {
  .canal-grid { padding: 5px; border-radius: 18px; }
  .gear-machine-board { background: rgba(2,45,53,.14); }
  .astrolabe-sky { background: rgba(2,28,45,.1); }
}

/* v41 — a genuinely new cinematic opening, clear of the city's landmarks */
html[data-scene="gate"] .gate-screen {
  background-image:
    linear-gradient(180deg, rgba(5, 39, 54, .38) 0%, rgba(5, 39, 54, .04) 32%, transparent 58%, rgba(28, 32, 23, .35) 100%),
    url("./assets/khwarazm-golden.webp") !important;
  background-position: 56% center, 56% center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

html[data-scene="gate"] .gate-screen::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 229, 150, .19), transparent 34%),
    linear-gradient(90deg, rgba(2, 29, 38, .12), transparent 24% 76%, rgba(2, 29, 38, .12));
}

html[data-scene="gate"] .gate-plaque {
  top: max(42px, calc(env(safe-area-inset-top) + 34px)) !important;
  width: min(720px, calc(100% - 150px));
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: 0 3px 14px rgba(3, 29, 38, .64);
}

html[data-scene="gate"] .gate-plaque h1::before,
html[data-scene="gate"] .gate-plaque h1::after {
  content: "";
  display: inline-block;
  width: clamp(34px, 5vw, 76px);
  height: 1px;
  margin: 0 14px .48em;
  background: linear-gradient(90deg, transparent, rgba(255, 226, 135, .88), transparent);
}

html[data-scene="gate"] .gate-plaque h1 {
  display: inline-block;
  color: #fff7d7;
  font-size: clamp(3rem, 6vw, 6.2rem);
  line-height: .92;
  letter-spacing: -.045em;
  filter: drop-shadow(0 5px 9px rgba(1, 27, 34, .36));
}

html[data-scene="gate"] .gate-plaque #siteSubtitle {
  margin-top: 8px;
  color: #fff9e6;
  font-size: clamp(1.05rem, 1.75vw, 1.65rem);
  letter-spacing: .08em;
}

html[data-scene="gate"] .gate-screen .gate-enter {
  bottom: clamp(54px, 8vh, 88px);
  width: min(380px, calc(100% - 48px));
  min-height: 68px;
  gap: 16px;
  border: 1px solid rgba(255, 244, 197, .9);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 230, 137, .96), rgba(224, 160, 47, .96));
  color: #143d3e;
  box-shadow: 0 18px 40px rgba(32, 24, 9, .36), inset 0 1px rgba(255, 255, 255, .72);
  font-size: clamp(1.02rem, 1.5vw, 1.32rem);
  text-shadow: none;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

html[data-scene="gate"] .gate-screen .gate-enter:hover,
html[data-scene="gate"] .gate-screen .gate-enter:focus-visible {
  transform: translateX(-50%) translateY(-3px);
  filter: brightness(1.06);
  box-shadow: 0 22px 48px rgba(32, 24, 9, .42), inset 0 1px rgba(255, 255, 255, .8);
}

html[data-scene="gate"] .gate-hint {
  bottom: max(13px, env(safe-area-inset-bottom));
  padding: 5px 15px;
  border: 0;
  background: rgba(8, 46, 48, .56);
  box-shadow: none;
  color: #fff6d0;
  font-size: clamp(.75rem, 1vw, .9rem);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

@media (max-width: 620px) and (orientation: portrait) {
  html[data-scene="gate"] .gate-screen {
    background-position: 59% center, 59% center !important;
  }

  html[data-scene="gate"] .gate-plaque {
    top: max(54px, calc(env(safe-area-inset-top) + 48px)) !important;
    width: calc(100% - 46px);
  }

  html[data-scene="gate"] .gate-plaque h1::before,
  html[data-scene="gate"] .gate-plaque h1::after {
    width: 24px;
    margin-inline: 8px;
  }

  html[data-scene="gate"] .gate-plaque h1 {
    font-size: clamp(3.4rem, 17vw, 5rem);
  }

  html[data-scene="gate"] .gate-plaque #siteSubtitle {
    margin-top: 7px;
    font-size: 1.08rem;
  }

  html[data-scene="gate"] .gate-screen .gate-enter {
    bottom: max(62px, calc(env(safe-area-inset-bottom) + 58px));
    min-height: 64px;
  }
}

@media (orientation: landscape) and (max-height: 650px) {
  html[data-scene="gate"] .gate-screen {
    background-position: 50% 54%, 50% 54% !important;
  }

  html[data-scene="gate"] .gate-plaque {
    top: max(20px, calc(env(safe-area-inset-top) + 16px)) !important;
  }

  html[data-scene="gate"] .gate-plaque h1 { font-size: clamp(2.5rem, 7vw, 4.6rem); }
  html[data-scene="gate"] .gate-screen .gate-enter { bottom: 28px; min-height: 54px; }
  html[data-scene="gate"] .gate-hint { display: none; }
}

/* v42 — original artwork only; no third-party video footage */
.cinematic-world {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: background-image .35s ease;
}

html[data-scene="earth"] .cinematic-world {
  background-image: url("./assets/original-earth-v42.webp");
}

html[data-scene="dome"] .cinematic-world,
html[data-scene="finale"] .cinematic-world {
  background-image: url("./assets/original-dome-v42.webp");
}

html[data-scene="canals"] .cinematic-world {
  background-image: url("./assets/original-canals-v42.webp");
}

html[data-scene="healing"] .cinematic-world {
  background-image: url("./assets/original-healing-v42.webp");
}

html[data-scene="earth"] .cinematic-vignette,
html[data-scene="dome"] .cinematic-vignette,
html[data-scene="canals"] .cinematic-vignette,
html[data-scene="healing"] .cinematic-vignette,
html[data-scene="finale"] .cinematic-vignette {
  display: block;
  background:
    linear-gradient(180deg, rgba(0, 24, 31, .03), transparent 46%, rgba(0, 24, 31, .14)),
    radial-gradient(circle at 50% 42%, transparent 58%, rgba(0, 24, 31, .15));
}

@media (orientation: landscape) {
  html[data-scene="earth"] .cinematic-world { background-position: center 43%; }
  html[data-scene="dome"] .cinematic-world,
  html[data-scene="finale"] .cinematic-world { background-position: center 38%; }
  html[data-scene="canals"] .cinematic-world { background-position: center 45%; }
  html[data-scene="healing"] .cinematic-world { background-position: center 42%; }
}

/* v43 — Ibn Sina's formula game, transferred from the approved prototype */
html[data-scene="healing"] .game-mechanic {
  inset: max(74px, calc(env(safe-area-inset-top) + 66px)) 0 max(68px, calc(env(safe-area-inset-bottom) + 60px));
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(12px, 3vh, 34px) 12px 10px;
  scrollbar-width: none;
}

html[data-scene="healing"] .game-mechanic::-webkit-scrollbar { display: none; }

.recipe-mechanic {
  width: min(720px, 100%);
  min-height: 100%;
  margin-inline: auto;
  display: grid;
  align-content: end;
  gap: 8px;
  color: #fff7d8;
}

.recipe-formula-card {
  padding: 11px 13px 10px;
  border: 1px solid rgba(255, 226, 131, .62);
  border-radius: 23px;
  background: linear-gradient(145deg, rgba(4, 67, 73, .72), rgba(2, 38, 43, .64));
  box-shadow: 0 16px 38px rgba(0, 18, 22, .38), inset 0 1px rgba(255, 255, 255, .2);
  backdrop-filter: blur(12px) saturate(1.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
}

.recipe-formula-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.recipe-formula-heading p,
.recipe-formula-heading h3 { margin: 0; }
.recipe-formula-heading p { color: #78ead5; font-size: .72rem; font-weight: 900; }
.recipe-formula-heading h3 {
  margin-top: 1px;
  color: #fff3c4;
  font-size: clamp(1.06rem, 4.7vw, 1.36rem);
  line-height: 1.22;
  text-shadow: 0 2px 9px rgba(0, 0, 0, .4);
}

.recipe-timer {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 3px solid rgba(120, 234, 213, .25);
  border-top-color: #ffe177;
  border-radius: 50%;
  color: #fff0a8;
  font-weight: 900;
  animation: recipeTimerSpin 1s linear infinite;
}

.recipe-timer b { animation: recipeCounterSpin 1s linear infinite; }
.recipe-timer[hidden] { display: none; }

.recipe-formula-strip {
  position: relative;
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 6px;
  direction: ltr;
}

.recipe-formula-token {
  display: grid;
  width: 41px;
  height: 41px;
  place-items: center;
  border: 1px solid rgba(255, 222, 119, .82);
  border-radius: 13px 13px 18px 18px;
  background: linear-gradient(145deg, rgba(8, 117, 122, .9), rgba(3, 59, 66, .94));
  color: #ffe68e;
  font-size: 1.18rem;
  font-weight: 900;
  box-shadow: 0 7px 18px rgba(0, 20, 24, .3), inset 0 1px rgba(255, 255, 255, .25);
  transition: filter .35s ease, transform .35s ease, opacity .35s ease;
}

.recipe-formula-strip.is-hidden .recipe-formula-token {
  opacity: .34;
  filter: blur(8px);
  transform: scale(.88);
}

.recipe-formula-strip.is-hidden::after {
  position: absolute;
  content: attr(data-hidden-label);
  color: #fff0b1;
  font-size: .84rem;
  font-weight: 900;
  filter: none;
}

.recipe-formula-hint {
  margin: 3px 0 0;
  color: rgba(255, 249, 224, .9);
  font-size: .74rem;
  font-weight: 700;
  text-align: center;
}

.recipe-lab {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 0 2px;
}

.recipe-mixing-zone {
  position: relative;
  display: flex;
  min-height: 192px;
  align-items: center;
  justify-content: center;
}

.recipe-halo {
  position: absolute;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(38, 213, 210, .28), rgba(38, 213, 210, .06) 48%, transparent 69%);
  animation: recipeHaloPulse 3s ease-in-out infinite alternate;
}

.recipe-main-flask {
  position: relative;
  z-index: 2;
  width: 148px;
  height: 184px;
  filter: drop-shadow(0 22px 20px rgba(0, 17, 20, .48));
}

.recipe-main-flask > img {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.recipe-main-tone {
  position: absolute;
  z-index: 4;
  left: 19%;
  right: 19%;
  bottom: 8%;
  height: 45%;
  border-radius: 50% 50% 42% 42%;
  background: var(--mix-color, #25b8c6);
  opacity: .46;
  mix-blend-mode: color;
  filter: saturate(1.45) brightness(1.15);
  transition: background .35s ease, opacity .25s ease;
  pointer-events: none;
}

.recipe-liquid-layers {
  position: absolute;
  z-index: 6;
  inset: auto 25px 11px;
  display: flex;
  height: 11px;
  gap: 3px;
  direction: ltr;
}

.recipe-liquid-layer {
  min-width: 11px;
  flex: 1 1 0;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: var(--liquid);
  box-shadow: 0 0 9px var(--liquid), inset 0 1px rgba(255, 255, 255, .55);
  animation: recipeLiquidIn .48s cubic-bezier(.1, .75, .25, 1);
}

.recipe-bubbles {
  position: absolute;
  z-index: 7;
  inset: 49% 24% 15%;
  overflow: hidden;
  pointer-events: none;
}

.recipe-bubbles i {
  position: absolute;
  bottom: 0;
  width: var(--size);
  height: var(--size);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  animation: recipeBubbleUp var(--speed) ease-in forwards;
}

.recipe-pour-stream {
  position: absolute;
  z-index: 8;
  top: -18px;
  left: calc(50% - 5px);
  width: 10px;
  height: 92px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, var(--pour) 20% 86%, transparent);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--pour), white 25%));
  transform-origin: top center;
  animation: recipePour .62s ease-in-out forwards;
}

.recipe-main-flask.is-wrong { animation: recipeFlaskShake .48s ease; }
.recipe-main-flask.is-correct { animation: recipeFlaskSuccess .8s ease; }

.recipe-dose-count {
  position: absolute;
  z-index: 9;
  bottom: 4px;
  padding: 4px 11px;
  border: 1px solid rgba(255, 231, 151, .45);
  border-radius: 999px;
  background: rgba(5, 92, 96, .9);
  color: #fff5ce;
  font-size: .72rem;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(0, 41, 45, .24);
}

.recipe-ingredients > p {
  margin: 0 0 4px;
  color: #fff0bb;
  font-size: .75rem;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}

.recipe-tray {
  display: flex;
  justify-content: center;
  gap: clamp(4px, 1.2vw, 8px);
  direction: ltr;
}

.recipe-ingredient {
  position: relative;
  display: flex;
  width: clamp(51px, 13vw, 78px);
  min-width: 0;
  min-height: 92px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 4px 2px 5px;
  border: 1px solid rgba(255, 229, 145, .55);
  border-radius: 17px;
  background: rgba(2, 38, 43, .34);
  color: #fff1ae;
  box-shadow: 0 9px 22px rgba(0, 21, 24, .3), inset 0 1px rgba(255, 255, 255, .16);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .18s ease, border-color .18s ease, filter .18s ease;
}

.recipe-ingredient:hover,
.recipe-ingredient:focus-visible { transform: translateY(-3px); border-color: #ffe38a; filter: brightness(1.1); }
.recipe-ingredient:active { transform: scale(.95); }
.recipe-ingredient:disabled { opacity: .55; cursor: default; }
.recipe-ingredient.is-pouring { animation: recipeBottleTilt .65s ease; }
.recipe-ingredient > b { color: #fff1ad; font-size: .98rem; line-height: 1; text-shadow: 0 2px 7px rgba(0, 0, 0, .55); }

.recipe-mini-flask {
  position: relative;
  width: clamp(38px, 9.5vw, 55px);
  height: clamp(55px, 14vw, 78px);
  filter: drop-shadow(0 8px 7px rgba(0, 14, 18, .42));
}

.recipe-mini-flask img {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.recipe-mini-flask i {
  position: absolute;
  z-index: 3;
  left: 18%;
  right: 18%;
  bottom: 6%;
  height: 44%;
  border-radius: 50%;
  background: var(--liquid);
  opacity: .54;
  mix-blend-mode: color;
  filter: saturate(1.5) brightness(1.12);
}

.recipe-actions {
  display: grid;
  grid-template-columns: .7fr .8fr 1.35fr;
  gap: 7px;
}

.recipe-actions button {
  min-width: 0;
  min-height: 44px;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
}

.recipe-reset-button,
.recipe-undo-button {
  border: 1px solid rgba(255, 238, 177, .78);
  background: rgba(5, 72, 77, .75);
  color: #fff5d4;
  box-shadow: 0 7px 18px rgba(0, 27, 30, .22);
}

.recipe-check-button {
  border: 2px solid #fff0af;
  background: linear-gradient(145deg, #ffe68a 0%, #efbd51 54%, #d9942a 100%);
  color: #0b4c50;
  box-shadow: 0 10px 25px rgba(2, 29, 31, .35), inset 0 2px rgba(255, 255, 255, .7);
}

.recipe-actions button:disabled { opacity: .46; cursor: default; filter: grayscale(.25); }
.recipe-actions button:not(:disabled):active { transform: translateY(1px) scale(.98); }

.recipe-status {
  min-height: 20px;
  margin: -1px 0 0;
  color: #fff9df;
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 2px 7px rgba(0, 28, 32, .9);
}

@media (min-width: 760px) and (min-height: 650px) {
  .recipe-mechanic {
    width: min(940px, 96%);
    grid-template-columns: minmax(240px, .72fr) minmax(430px, 1.28fr);
    align-items: center;
    align-content: center;
    column-gap: 16px;
  }
  .recipe-formula-card { grid-column: 1; min-height: 170px; display: flex; flex-direction: column; justify-content: center; }
  .recipe-lab { grid-column: 2; grid-row: 1 / span 3; }
  .recipe-mixing-zone { min-height: 280px; }
  .recipe-main-flask { width: 205px; height: 255px; }
  .recipe-liquid-layers { inset-inline: 35px; bottom: 15px; }
  .recipe-actions,
  .recipe-status { grid-column: 1; }
  .recipe-ingredient { width: clamp(64px, 8vw, 86px); min-height: 116px; }
  .recipe-mini-flask { width: 60px; height: 88px; }
}

@media (max-width: 390px) {
  html[data-scene="healing"] .game-mechanic { padding-inline: 7px; }
  .recipe-formula-card { padding: 8px 10px; }
  .recipe-formula-token { width: 37px; height: 37px; }
  .recipe-mixing-zone { min-height: 170px; }
  .recipe-main-flask { width: 132px; height: 164px; }
  .recipe-ingredient { width: clamp(46px, 14.2vw, 57px); min-height: 84px; }
  .recipe-mini-flask { width: 35px; height: 52px; }
  .recipe-actions button { padding-inline: 6px; font-size: .76rem; }
}

@media (orientation: landscape) and (max-height: 650px) {
  html[data-scene="healing"] .game-mechanic {
    inset: max(54px, calc(env(safe-area-inset-top) + 45px)) 0 max(54px, calc(env(safe-area-inset-bottom) + 46px));
    transform: none;
  }
  .recipe-mechanic {
    width: min(980px, 96%);
    grid-template-columns: minmax(215px, .66fr) minmax(520px, 1.34fr);
    align-items: center;
    align-content: center;
    column-gap: 14px;
  }
  .recipe-formula-card { grid-column: 1; }
  .recipe-lab { grid-column: 2; grid-row: 1 / span 3; grid-template-columns: .75fr 1.25fr; align-items: center; }
  .recipe-mixing-zone { min-height: 205px; }
  .recipe-main-flask { width: 150px; height: 188px; }
  .recipe-actions,
  .recipe-status { grid-column: 1; }
  .recipe-ingredient { width: clamp(52px, 7vw, 72px); min-height: 87px; }
  .recipe-mini-flask { width: 39px; height: 58px; }
}

@keyframes recipeTimerSpin { to { transform: rotate(360deg); } }
@keyframes recipeCounterSpin { to { transform: rotate(-360deg); } }
@keyframes recipeHaloPulse { to { transform: scale(1.09); opacity: .7; } }
@keyframes recipeLiquidIn { from { transform: translateY(100%) scaleY(.2); opacity: .45; } to { transform: translateY(0) scaleY(1); opacity: 1; } }
@keyframes recipeBubbleUp { from { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: .8; } to { transform: translateY(-82px) scale(1.15); opacity: 0; } }
@keyframes recipePour { 0% { opacity: 0; transform: translateY(-28px) scaleY(.15); } 25% { opacity: 1; transform: translateY(0) scaleY(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(25px) scaleY(.2); } }
@keyframes recipeBottleTilt { 0%, 100% { transform: rotate(0); } 35%, 65% { transform: rotate(-17deg) translateY(-5px); } }
@keyframes recipeFlaskShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px) rotate(-2deg); } 50% { transform: translateX(9px) rotate(2deg); } 75% { transform: translateX(-5px); } }
@keyframes recipeFlaskSuccess { 0% { transform: scale(1); filter: brightness(1); } 45% { transform: scale(1.08); filter: brightness(1.28) drop-shadow(0 0 18px #55e4ce); } 100% { transform: scale(1); filter: brightness(1); } }

/* v44 — functional, high-fidelity Al-Biruni gear machine */
html[data-scene="earth"] .game-mechanic {
  inset: max(74px, calc(env(safe-area-inset-top) + 66px)) 0 max(68px, calc(env(safe-area-inset-bottom) + 60px));
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(12px, 3vh, 32px) 10px 10px;
  scrollbar-width: none;
}

html[data-scene="earth"] .game-mechanic::-webkit-scrollbar { display: none; }

html[data-scene="earth"] .earth-mechanic.gear-machine {
  width: min(760px, 100%);
  min-height: 100%;
  margin-inline: auto;
  align-content: end;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.earth-blueprint {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 226, 131, .64);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(4, 67, 73, .76), rgba(2, 38, 43, .68));
  box-shadow: 0 14px 34px rgba(0, 18, 22, .34), inset 0 1px rgba(255, 255, 255, .2);
  color: #fff3c4;
  backdrop-filter: blur(12px) saturate(1.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
}

.earth-blueprint div { display: grid; gap: 1px; }
.earth-blueprint small { color: #78ead5; font-size: .72rem; font-weight: 900; }
.earth-blueprint strong { font-size: clamp(1.02rem, 4vw, 1.3rem); line-height: 1.2; }
.earth-blueprint > span {
  display: flex;
  min-width: 62px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 229, 145, .7);
  border-radius: 999px;
  background: rgba(4, 95, 99, .78);
  color: #fff0ac;
  font-weight: 900;
}
.earth-blueprint > span b { color: #55e1c8; font-size: 1.18rem; }
.earth-blueprint > span i { opacity: .65; font-style: normal; }

html[data-scene="earth"] .gear-machine-board {
  height: clamp(250px, 35vh, 390px);
  border: 1px solid rgba(255, 226, 135, .66);
  border-radius: 26px;
  background:
    radial-gradient(circle at 21% 25%, rgba(255, 247, 188, .28) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 70%, rgba(255, 247, 188, .24) 0 2px, transparent 3px),
    linear-gradient(150deg, rgba(5, 91, 99, .44), rgba(2, 48, 58, .36));
  box-shadow: inset 0 0 0 2px rgba(255, 231, 141, .12), 0 15px 38px rgba(0, 24, 30, .25);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.gear-token { filter: drop-shadow(0 5px 5px rgba(0, 24, 31, .34)); }
.gear-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gear-teeth { fill: currentColor; stroke: var(--gear-dark); stroke-width: 2.4; stroke-linejoin: round; }
.gear-svg line { stroke: var(--gear-dark); stroke-linecap: round; }
.gear-inner-ring { fill: rgba(255, 245, 195, .18); stroke: var(--gear-dark); stroke-width: 9; }
.gear-hub-ring { fill: #ffe8a0; stroke: var(--gear-dark); stroke-width: 3; }
.gear-hub { fill: var(--gear-dark); stroke: rgba(255, 250, 218, .88); stroke-width: 2; }
.gear-form-fine .gear-teeth { stroke-width: 1.8; }
.gear-form-bold .gear-teeth { filter: saturate(1.08) brightness(1.06); }

.gear-slot {
  border-width: 2px;
  background: rgba(2, 42, 51, .42);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .06), 0 6px 15px rgba(0, 28, 35, .26);
}

.gear-slot:not(.is-filled)::after {
  z-index: 4;
  width: 17%;
  border-width: 2px;
}

.gear-slot.is-filled {
  border-color: rgba(255, 242, 178, .84);
  background: rgba(3, 70, 77, .52);
}

.gear-slot.is-new { animation: gearSnapIn .58s cubic-bezier(.18, .9, .3, 1.2); }
.gear-ghost { opacity: .38; filter: grayscale(.12) drop-shadow(0 0 6px rgba(255, 238, 159, .3)); }

.gear-input .gear-token {
  width: 100%;
  height: 100%;
  font-size: 0;
  filter: drop-shadow(0 5px 5px rgba(0, 28, 35, .35));
}

.gear-input .gear-handle {
  position: absolute;
  left: -22%;
  width: 35%;
  height: 78%;
  border: 4px solid #f6dc87;
  border-right: 0;
  border-radius: 16px 0 0 16px;
  transform: rotate(-12deg);
}

.earth-drive-gear {
  width: 100%;
  height: 100%;
  font-size: 0;
}

.earth-drive-gear .gear-token { width: 100%; height: 100%; }

.earth-output .earth-globe {
  position: relative;
  overflow: hidden;
  width: 53%;
  background:
    radial-gradient(circle at 35% 27%, rgba(255,255,255,.48), transparent 13%),
    linear-gradient(145deg, #58d5dd, #087da2 58%, #064a79);
  box-shadow: inset -6px -7px 10px rgba(1, 40, 79, .34), inset 4px 4px 8px rgba(255,255,255,.28), 0 0 0 3px rgba(255,224,111,.18);
}

.earth-land {
  position: absolute;
  display: block;
  inset: auto;
  border: 0;
  opacity: 1;
  background: #e4c357;
  box-shadow: inset -2px -2px 2px rgba(100, 87, 22, .25);
}
.earth-land-a { left: 16%; top: 23%; width: 47%; height: 29%; border-radius: 65% 35% 58% 42%; transform: rotate(18deg); }
.earth-land-b { right: 13%; bottom: 17%; width: 38%; height: 31%; border-radius: 40% 60% 35% 65%; transform: rotate(-15deg); }
.earth-output .earth-orbit {
  position: absolute;
  inset: -11px;
  border: 2px solid rgba(255, 230, 134, .54);
  border-left-color: transparent;
  border-radius: 50%;
  opacity: .72;
  transform: rotate(-22deg);
}

html[data-scene="earth"] .gear-status {
  min-height: 36px;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid rgba(255, 229, 145, .46);
  border-radius: 999px;
  background: rgba(2, 49, 55, .7);
  color: #fff3c5;
  box-shadow: 0 9px 24px rgba(0, 22, 27, .28);
}

html[data-scene="earth"] .gear-tray {
  min-height: 74px;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 229, 145, .4);
  border-radius: 20px;
  background: rgba(2, 43, 49, .34);
  box-shadow: 0 10px 26px rgba(0, 21, 25, .22);
}

html[data-scene="earth"] .gear-tray-button {
  width: clamp(53px, 12vw, 78px);
  padding: 6px;
  border: 1px solid rgba(255, 229, 145, .72);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 249, 216, .96), rgba(231, 190, 102, .94));
  box-shadow: 0 7px 16px rgba(36, 27, 8, .27), inset 0 1px rgba(255,255,255,.8);
}

.gear-tray-button[data-wrong="true"] { animation: gearTrayWrong .48s ease; border-color: #ffb19a; }

html[data-scene="earth"] .gear-crank {
  width: min(330px, 88%);
  min-height: 50px;
  border: 2px solid rgba(255, 240, 175, .92);
  background: linear-gradient(145deg, #ffe68a 0%, #efbd51 54%, #d9942a 100%);
  color: #0b4c50;
  box-shadow: 0 10px 25px rgba(2, 29, 31, .34), inset 0 2px rgba(255, 255, 255, .7);
}

.gear-machine.is-running .gear-svg,
.gear-machine.is-running .gear-input .gear-svg,
.gear-machine.is-running .earth-drive-gear .gear-svg {
  animation: gearSpin .75s linear infinite;
}
.gear-machine.is-running .spin-reverse .gear-svg { animation-direction: reverse; }
.gear-machine.is-running .earth-output .earth-orbit { animation: earthOrbit 1s linear infinite; opacity: 1; }

/* v45: photographic metal gears replace the flat drawn symbols. */
.gear-token {
  display: grid;
  place-items: center;
}

.gear-real-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 5px 4px rgba(0, 22, 27, .38));
}

.gear-ghost {
  opacity: 1;
  filter: none;
}

.gear-ghost .gear-real-image {
  opacity: .28;
  filter: grayscale(.42) brightness(1.18) drop-shadow(0 0 5px rgba(255, 236, 153, .4));
}

.gear-slot.is-filled .gear-real-image,
.gear-tray-button .gear-real-image {
  opacity: 1;
}

.gear-machine.is-running .gear-real-image,
.gear-machine.is-running .gear-input .gear-real-image,
.gear-machine.is-running .earth-drive-gear .gear-real-image {
  animation: gearSpin .75s linear infinite;
}

.gear-machine.is-running .spin-reverse .gear-real-image { animation-direction: reverse; }

/* v46: task prompts sit directly on the scene, without dark cards. */
.earth-blueprint,
.recipe-formula-card,
.astrolabe-status strong,
html[data-scene="canals"] .mechanic-status {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.earth-blueprint,
.recipe-formula-card {
  padding-inline: 8px;
}

.earth-blueprint small,
.earth-blueprint strong,
.recipe-formula-heading p,
.recipe-formula-heading h3,
.recipe-formula-hint,
.astrolabe-status strong,
html[data-scene="canals"] .mechanic-status {
  text-shadow: 0 2px 7px rgba(0, 18, 24, .96), 0 0 3px rgba(0, 18, 24, .9);
}

.astrolabe-status strong {
  padding: 3px 7px;
  color: #fff4ca;
}

html[data-scene="canals"] .mechanic-status {
  color: #fff4ca;
}

@media (max-width: 520px) and (orientation: portrait) {
  html[data-scene="earth"] .game-mechanic { padding-inline: 7px; }
  html[data-scene="earth"] .earth-mechanic.gear-machine { max-height: none; gap: 6px; }
  .earth-blueprint { min-height: 58px; padding: 8px 11px; }
  html[data-scene="earth"] .gear-machine-board { height: clamp(245px, 33vh, 335px); }
  html[data-scene="earth"] .gear-tray { min-height: 65px; padding: 5px 6px; }
  html[data-scene="earth"] .gear-tray-button { width: clamp(48px, 13.2vw, 58px); border-radius: 15px; }
  html[data-scene="earth"] .gear-status { font-size: .78rem; }
}

@media (min-width: 760px) and (min-height: 650px) {
  html[data-scene="earth"] .earth-mechanic.gear-machine {
    width: min(940px, 96%);
    grid-template-columns: minmax(240px, .72fr) minmax(430px, 1.28fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    align-content: center;
    column-gap: 16px;
  }
  .earth-blueprint { grid-column: 1; min-height: 92px; }
  html[data-scene="earth"] .gear-machine-board { grid-column: 2; grid-row: 1 / span 4; height: min(56vh, 520px); }
  html[data-scene="earth"] .gear-status,
  html[data-scene="earth"] .gear-tray,
  html[data-scene="earth"] .gear-machine-controls { grid-column: 1; }
  html[data-scene="earth"] .gear-tray { min-height: 116px; }
}

@media (orientation: landscape) and (max-height: 650px) {
  html[data-scene="earth"] .game-mechanic {
    inset: max(54px, calc(env(safe-area-inset-top) + 45px)) 0 max(54px, calc(env(safe-area-inset-bottom) + 46px));
    transform: none;
  }
  html[data-scene="earth"] .earth-mechanic.gear-machine {
    width: min(980px, 96%);
    grid-template-columns: minmax(210px, .64fr) minmax(520px, 1.36fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    align-content: center;
    column-gap: 14px;
  }
  .earth-blueprint { grid-column: 1; }
  html[data-scene="earth"] .gear-machine-board { grid-column: 2; grid-row: 1 / span 4; height: min(68vh, 390px); }
  html[data-scene="earth"] .gear-status,
  html[data-scene="earth"] .gear-tray,
  html[data-scene="earth"] .gear-machine-controls { grid-column: 1; }
}

@keyframes gearSnapIn {
  0% { transform: translate(-50%, -50%) scale(.38) rotate(-70deg); opacity: .2; }
  75% { transform: translate(-50%, -50%) scale(1.12) rotate(8deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
}

@keyframes gearTrayWrong {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px) rotate(-3deg); }
  50% { transform: translateX(8px) rotate(3deg); }
  75% { transform: translateX(-5px); }
}