:root {
  --ink:#17334a;
  --muted:#698194;
  --cream:#f8f7ef;
  --mint:#b8f2d1;
  --aqua:#62d9d0;
  --coral:#ff896f;
  --gold:#ffd46e;
  --line:rgba(26,58,77,.12);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #102c45;
  color: var(--ink);
  font-family:
    "DM Sans",
    system-ui,
    sans-serif;
}
button {
  font: inherit;
  border: 0;
  cursor: pointer;
  color: inherit;
}
#app {
  height: 100dvh;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(
      ellipse at 50% 28%,
      #e5f6e6 0,
      #b7e9da 30%,
      #75c9c9 68%,
      #326f8b 100%);
  position: relative;
  overflow: hidden;
}
.skyglow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(255, 255, 224, .78),
      transparent 31%);
  pointer-events: none;
}
.topbar {
  z-index: 3;
  height: 72px;
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(14px, 3vw, 40px);
  color: #effbf6;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -.04em;
  font-size: 20px;
}
.brandmark {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background:
    linear-gradient(
      145deg,
      #b7f2ce,
      #5dd5d0);
  display: grid;
  place-items: center;
  color: #16475b;
  font-size: 20px;
  box-shadow: 0 5px 16px #173f5333;
}
.hud {
  display: flex;
  align-items: center;
  gap: 9px;
}
.pill {
  height: 39px;
  border-radius: 999px;
  background: #0e334dcc;
  border: 1px solid #d7fff333;
  color: #f5fff7;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(10px);
}
.seed-icon {
  color: var(--gold);
  font-size: 17px;
}
.map-toggle {
  width: 39px;
  padding: 0;
  justify-content: center;
  font-size: 18px;
  color: #f3ffe6;
}
.sound {
  width: 39px;
  padding: 0;
  justify-content: center;
  font-size: 17px;
}
.main {
  z-index: 1;
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0 14px 12px;
}
.game-shell {
  width: min(1180px, 100%);
  height: auto;
  max-height: 100%;
  aspect-ratio: 1000/620;
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid #fff9;
  box-shadow: 0 24px 70px #09253d55, 0 5px 18px #113c4933;
  background: #5fc4be;
}
.scene {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}
.mission {
  position: absolute;
  top: 20px;
  left: 20px;
  width: min(265px, 39%);
  padding: 17px 18px 15px;
  border-radius: 20px;
  background: #fff9f0ed;
  box-shadow: 0 10px 32px #193b4a27;
  border: 1px solid #ffffff;
}
.eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #6f9292;
  font-weight: 800;
}
.level-kicker {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  margin: 8px 0 0;
  color: #648a84;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}
.level-name {
  color: #256b6b;
}
.level-steps {
  display: flex;
  gap: 5px;
  margin: 7px 0 9px;
}
.level-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #a3b4a7;
  font-size: 13px;
}
.level-step:before {
  content: "";
  width: 100%;
  height: 4px;
  border-radius: 5px;
  background: #dce8dc;
  transition: background .35s;
}
.level-step.active,
.level-step.done {
  color: #267a70;
}
.level-step.active:before,
.level-step.done:before {
  background:
    linear-gradient(
      90deg,
      #53bca7,
      #bad665);
}
.level-step small {
  font-size: 8px;
  font-weight: 800;
}
.mission h1 {
  font: 700 19px/1.15 "Space Grotesk", sans-serif;
  letter-spacing: -.04em;
  margin: 4px 0 6px;
}
.mission p {
  font-size: 12px;
  line-height: 1.45;
  color: #63808b;
  margin: 0 0 13px;
}
.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 7px;
}
.progress-track {
  height: 8px;
  border-radius: 10px;
  background: #dce9dc;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  background:
    linear-gradient(
      90deg,
      #4ec4ad,
      #b3d865);
  border-radius: 10px;
  transition: width .35s;
}
.quest-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #537581;
  font-size: 10px;
  font-weight: 700;
}
.quest-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff9a71;
  box-shadow: 0 0 0 4px #ff9a7129;
}
.tip {
  position: absolute;
  right: 18px;
  top: 20px;
  padding: 10px 13px;
  border-radius: 14px;
  background: #153d4ac7;
  color: #effff4;
  font-size: 11px;
  font-weight: 700;
  backdrop-filter: blur(8px);
}
.interact {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  padding: 12px 19px;
  background: #fff9e9;
  color: #21445a;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 8px 24px #17394b38;
  display: none;
  white-space: nowrap;
  animation: bob 1.4s ease-in-out infinite;
}
.interact span {
  color: #e27c55;
  margin-right: 5px;
}
.mobile-controls {
  display: none;
  position: absolute;
  bottom: 15px;
  left: 16px;
  right: 16px;
  justify-content: space-between;
  align-items: end;
  pointer-events: none;
}
.dpad {
  width: 126px;
  height: 126px;
  position: relative;
  pointer-events: auto;
}
.dpad button {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #143c4eb8;
  color: #fff;
  border: 1px solid #ffffff66;
  backdrop-filter: blur(7px);
  font-size: 18px;
  touch-action: none;
}
.dpad .up {
  left: 42px;
  top: 0;
}
.dpad .down {
  left: 42px;
  bottom: 0;
}
.dpad .left {
  left: 0;
  top: 42px;
}
.dpad .right {
  right: 0;
  top: 42px;
}
.use-btn {
  pointer-events: auto;
  width: 63px;
  height: 63px;
  border-radius: 50%;
  background: #ffe193;
  color: #42505a;
  font-weight: 900;
  box-shadow: 0 7px 20px #13374755;
  touch-action: none;
}
.overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: auto;
  background:
    linear-gradient(
      130deg,
      #113a4ba8,
      #10314d80);
  backdrop-filter: blur(5px);
}
.modal {
  width: min(475px, 100%);
  max-height: 100%;
  overflow-y: auto;
  border-radius: 28px;
  padding: 28px;
  background: #fbf9ed;
  box-shadow: 0 22px 70px #0b2b3f88;
  border: 1px solid white;
  position: relative;
  overflow: hidden;
}
.modal:before {
  content: "";
  position: absolute;
  width: 240px;
  height: 180px;
  border-radius: 50%;
  background: #a5e7ca66;
  filter: blur(30px);
  right: -80px;
  top: -70px;
}
.modal > * {
  position: relative;
}
.modal .eyebrow {
  color: #428c83;
}
.modal h2 {
  font: 700 clamp(28px, 7vw, 39px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -.06em;
  margin: 9px 0 12px;
}
.modal p {
  font-size: 14px;
  line-height: 1.55;
  color: #617985;
  margin: 0 0 20px;
}
.primary {
  border-radius: 14px;
  padding: 13px 18px;
  background: #143c50;
  color: #f7ffe9;
  font-weight: 800;
  box-shadow: 0 7px 16px #143c5033;
}
.primary:hover {
  transform: translateY(-1px);
  background: #1c5864;
}
.secondary {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 11px 16px;
  border: 1px solid rgba(20,60,80,.18);
  border-radius: 12px;
  background: #edf5e9;
  color: #214d5b;
  font-weight: 800;
}
.secondary:hover { background: #dff0df; }
.world-map-overlay { z-index: 8; overflow: hidden; }
.world-map-panel {
  position: relative;
  width: min(820px, 100%);
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid #fff;
  border-radius: 30px;
  background: linear-gradient(145deg, #fbf9ed, #e7f4e9);
  box-shadow: 0 25px 80px #09253d99;
}
.world-map-panel:before {
  content: "";
  position: absolute;
  width: 280px;
  height: 220px;
  top: -100px;
  right: -85px;
  border-radius: 50%;
  background: #9ddfc877;
  filter: blur(32px);
  pointer-events: none;
}
.world-map-panel > * { position: relative; z-index: 1; }
.world-map-panel h2 {
  margin: 8px 52px 7px 0;
  color: #17384c;
  font: 700 clamp(28px, 5vw, 42px)/1 "Space Grotesk", sans-serif;
  letter-spacing: -.055em;
}
.world-map-intro {
  max-width: 560px;
  margin: 0 0 18px;
  color: #607986;
  line-height: 1.5;
  font-size: 14px;
}
.map-close {
  position: absolute;
  z-index: 3;
  top: 17px;
  right: 17px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #173e50;
  color: #f7ffe9;
  font-size: 27px;
  line-height: 1;
}
.map-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.map-summary span {
  padding: 7px 11px;
  border: 1px solid #d3e4d7;
  border-radius: 999px;
  background: #f7fbf1;
  color: #39726d;
  font-size: 11px;
  font-weight: 800;
}
.island-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
  align-items: center;
}
.world-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid #dce9dc;
  border-radius: 22px;
  background: #fffdf5e8;
  box-shadow: 0 9px 23px #17415412;
}
.world-card.awakened { border-color: #8dcdb3; box-shadow: 0 9px 25px #40a98222; }
.world-card.locked { background: #f1f1e8; }
.world-card-art {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 12px;
  border-radius: 18px;
  font-size: 26px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px #ffffff99;
}
.meadow-art { color: #fff7d4; background: radial-gradient(circle at 38% 30%, #c1e49a, #55b39a 70%, #286879); }
.wind-art { color: #e8fff4; background: radial-gradient(circle at 40% 25%, #b4e9df, #62a9b2 67%, #335d84); }
.world-status {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e6f2e6;
  color: #54826f;
  font-size: 10px;
  font-weight: 900;
}
.world-card.locked .world-status { background: #e9e9dd; color: #7c8b87; }
.world-card h3 {
  margin: 10px 0 5px;
  font: 700 20px/1.1 "Space Grotesk", sans-serif;
  letter-spacing: -.04em;
  color: #1c4054;
}
.world-card p {
  min-height: 43px;
  margin: 0 0 13px;
  color: #667f83;
  font-size: 12px;
  line-height: 1.45;
}
.world-action {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border-radius: 12px;
  background: #174257;
  color: #f8ffed;
  font-size: 12px;
  font-weight: 800;
}
.world-action:hover:not(:disabled) { background: #216b6a; }
.world-action:disabled {
  cursor: not-allowed;
  background: #e0e6db;
  color: #71827b;
}
.world-map-panel button:focus-visible { outline: 3px solid #e8b943; outline-offset: 2px; }
.route-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 105px;
  color: #8ca7a0;
}
.route-link:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 2px dashed #b8ccc0;
}
.route-link span {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eef4e9;
  color: #73978a;
  font-size: 17px;
}
.route-link small { z-index: 1; padding: 3px; background: #f0f6ea; text-align: center; font-size: 8px; font-weight: 800; }
.route-link.active { color: #4f9a7e; }
.route-link.active:before { border-color: #62bd9a; }
.route-link.active span { background: #8cdbb3; color: #155d5c; }
.map-footnote {
  margin: 17px 0 0;
  color: #52777c;
  font-size: 12px;
  line-height: 1.45;
}

.install-app {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 11px 16px;
  border: 1px solid rgba(20,60,80,.22);
  border-radius: 12px;
  background: #f1f7e9;
  color: #214d5b;
  font-weight: 800;
}
.install-app:hover { background: #dff2df; }
.install-app[hidden] { display: none !important; }
.install-help {
  margin: 9px 0 0;
  color: #4f6f7a;
  font-size: .82rem;
  line-height: 1.45;
}
.puzzle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 18px auto;
  width: min(250px, 100%);
}
.puzzle-grid button {
  aspect-ratio: 1;
  border-radius: 15px;
  background: #e9eee2;
  font-size: 28px;
  box-shadow: inset 0 -3px 0 #d4ddd0;
  transition: transform .12s, background .2s;
}
.puzzle-grid button:hover {
  transform: translateY(-2px);
}
.puzzle-grid button.selected {
  background: #c5efdb;
  box-shadow: inset 0 0 0 2px #52b89e;
}
.puzzle-grid button.correct {
  background: #c5efdb;
}
.puzzle-grid button.wrong {
  animation: shake .28s;
  background: #ffd1bd;
}
.puzzle-status {
  text-align: center;
  color: #64818b;
  font-size: 12px;
  font-weight: 700;
  min-height: 18px;
}
.sound-replay {
  display: block;
  margin: 3px auto 11px;
  padding: 9px 13px;
  border-radius: 999px;
  background: #e4f3e7;
  color: #24586a;
  font-size: 12px;
  font-weight: 800;
}
.sound-replay:active {
  transform: scale(.97);
}
.toast {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.9);
  background: #153c4feF;
  color: white;
  padding: 12px 17px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: .25s;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.level-flash {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(
      ellipse at 50% 48%,
      #113c4d88,
      #092b3daa);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s, visibility .28s;
  backdrop-filter: blur(3px);
}
.level-flash.show {
  opacity: 1;
  visibility: visible;
}
.level-flash-card {
  width: min(390px, 100%);
  padding: 28px 24px 22px;
  text-align: center;
  border: 1px solid #ffffffcc;
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 88% 7%,
      #d9f3d9 0,
      transparent 38%),
    #fbf8e9;
  box-shadow: 0 22px 70px #07273f80;
  transform: translateY(16px) scale(.92);
  transition: transform .45s cubic-bezier(.2, .85, .25, 1.2);
}
.level-flash.show .level-flash-card {
  transform: translateY(0) scale(1);
}
.level-flash-symbol {
  margin: 0 auto 11px;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      #b8f2d1,
      #65d1c5);
  color: #174b5b;
  font-size: 34px;
  box-shadow: 0 0 0 9px #87dcc733, 0 8px 22px #28605233;
  animation: levelPulse .8s ease-in-out infinite alternate;
}
.level-flash-kicker {
  color: #388b81;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}
.level-flash-card h2 {
  margin: 8px 0 5px;
  font: 700 clamp(23px, 6vw, 31px)/1.08 "Space Grotesk", sans-serif;
  letter-spacing: -.045em;
  color: #17394b;
}
.level-flash-card p {
  margin: 0;
  color: #647e85;
  font-size: 13px;
  line-height: 1.45;
}
.level-flash-orbs {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
}
.level-flash-orbs i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64cabb;
  animation: orb .7s ease-in-out infinite alternate;
}
.level-flash-orbs i:nth-child(2) {
  animation-delay: .15s;
}
.level-flash-orbs i:nth-child(3) {
  animation-delay: .3s;
}
@keyframes levelPulse {
  to {
    transform: scale(1.08) rotate(-5deg);
    box-shadow: 0 0 0 14px #87dcc722, 0 8px 28px #28605255;
  }
}
@keyframes orb {
  to {
    transform: translateY(-5px);
    opacity: .5;
  }
}
.footer {
  z-index: 2;
  height: 31px;
  flex: 0 0 31px;
  text-align: center;
  color: #e7fff1b8;
  font-size: 10px;
  letter-spacing: .05em;
}
.mobile-help {
  display: none;
}
@keyframes bob {
  50% {
    transform: translate(-50%, -5px);
  }
}
@keyframes shake {
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}
@media (max-width: 700px) {
  .map-toggle { width: 34px; height: 34px; font-size: 16px; }
  .island-route { grid-template-columns: 1fr; gap: 0; }
  .world-map-overlay { padding: 10px; }
  .world-map-panel { padding: 22px 16px 18px; border-radius: 23px; }
  .world-map-panel h2 { margin-right: 45px; font-size: 30px; }
  .world-map-intro { font-size: 12px; margin-bottom: 13px; }
  .map-summary { gap: 6px; margin-bottom: 13px; }
  .map-summary span { padding: 6px 8px; font-size: 9px; }
  .world-card { display: grid; grid-template-columns: 48px 1fr; column-gap: 10px; padding: 12px; border-radius: 17px; }
  .world-card-art { grid-row: span 2; width: 46px; height: 46px; margin: 0; border-radius: 15px; }
  .world-status { align-self: end; justify-self: start; font-size: 9px; min-height: 20px; }
  .world-card h3 { margin: 4px 0 0; font-size: 18px; }
  .world-card p, .world-action { grid-column: 1 / -1; }
  .world-card p { min-height: 0; margin: 9px 0 10px; font-size: 11px; }
  .world-action { min-height: 39px; }
  .route-link { min-height: 43px; flex-direction: row; gap: 8px; }
  .route-link:before { top: 0; bottom: 0; left: 50%; right: auto; border-top: 0; border-left: 2px dashed #b8ccc0; }
  .route-link.active:before { border-left-color: #62bd9a; }
  .route-link span { width: 24px; height: 24px; }
  .route-link small { padding: 2px 4px; font-size: 8px; }
  .map-close { top: 12px; right: 12px; width: 38px; height: 38px; }

  #app {
    min-height: 0;
  }
  .topbar {
    height: 58px;
    flex-basis: 58px;
    padding: 0 14px;
  }
  .brand {
    font-size: 17px;
  }
  .brandmark {
    width: 32px;
    height: 32px;
  }
  .pill {
    height: 34px;
    padding: 0 10px;
    font-size: 11px;
  }
  .main {
    padding: 0 7px 6px;
  }
  .game-shell {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 22px;
    min-height: 0;
  }
  .mission {
    top: 9px;
    left: 9px;
    width: 176px;
    padding: 9px 10px;
    border-radius: 14px;
  }
  .mission h1 {
    font-size: 15px;
    margin: 4px 0;
  }
  .mission p,
  .quest-footer,
  .tip {
    display: none;
  }
  .progress-label {
    font-size: 9px;
    margin-bottom: 5px;
  }
  .progress-track {
    height: 6px;
  }
  .mobile-controls {
    display: flex;
    bottom: 9px;
    left: 10px;
    right: 10px;
  }
  .dpad {
    width: 98px;
    height: 98px;
  }
  .dpad button {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 15px;
  }
  .dpad .up {
    left: 32px;
  }
  .dpad .down {
    left: 32px;
  }
  .dpad .left {
    top: 32px;
  }
  .dpad .right {
    top: 32px;
  }
  .use-btn {
    width: 52px;
    height: 52px;
  }
  .interact {
    bottom: auto;
    top: 48%;
    padding: 9px 12px;
    font-size: 11px;
  }
  .footer {
    height: 24px;
    flex-basis: 24px;
    font-size: 9px;
  }
  .sound {
    display: flex;
    width: 34px;
    height: 34px;
    font-size: 15px;
    padding: 0;
  }
}
@media (max-width: 420px) {
  .mission {
    width: 166px;
  }
  .mission p {
    max-width: 140px;
  }
  .brand {
    gap: 7px;
    font-size: 15px;
  }
  .tip {
    max-width: 118px;
  }
  .modal {
    padding: 24px;
  }
}
.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background:
    linear-gradient(
      180deg,
      #0b2e45a8,
      transparent);
  padding-top: env(safe-area-inset-top, 0px);
}
.main {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  z-index: 1;
}
.game-shell {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: auto;
  flex: none;
  padding: 8px 4px;
  text-shadow: 0 2px 6px #08283c;
  pointer-events: none;
}
.mission {
  top: 76px;
  left: clamp(12px, 2.2vw, 26px);
}
@media (max-width: 700px) {
  .topbar {
    height: 58px;
    flex-basis: 58px;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .mission {
    top: 66px;
    left: 10px;
    width: 176px;
  }
  .mobile-controls {
    bottom: 38px;
  }
  .footer {
    bottom: 1px;
  }
  .game-shell {
    border: 0;
    border-radius: 0;
  }
}
@media (max-width: 420px) {
  .mission {
    top: 66px;
    width: 166px;
  }
  .mobile-controls {
    bottom: 34px;
  }
}
.mission {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.mission.dragging {
  cursor: grabbing;
}
.mission-drag {
  position: absolute;
  z-index: 4;
  right: 7px;
  top: 7px;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  background: #d9eee4;
  color: #34756e;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 900;
  cursor: grab;
  touch-action: none;
  user-select: none;
  box-shadow: 0 2px 7px #17394b22;
}
.mission-drag:active {
  cursor: grabbing;
}
.mission-drag:focus-visible {
  outline: 2px solid #e7a65e;
  outline-offset: 2px;
}
.mission .level-kicker {
  padding-right: 27px;
}
.toast {
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 50%;
  max-width: min(84vw, 340px);
  white-space: normal;
  text-align: center;
  font-size: 12px;
  box-shadow: 0 8px 24px #0b2b3f55;
}
@media (max-width: 700px) {
  .mission {
    top: calc(env(safe-area-inset-top, 0px) + 64px);
    left: 10px;
    width: min(218px, calc(100vw - 20px));
    padding: 8px 10px 7px;
    border-radius: 15px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto;
    gap: 3px 7px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    background: #fffaf0e8;
    box-shadow: 0 5px 20px #193b4a30;
  }
  .mission:focus-visible {
    outline: 3px solid #ffe17f;
    outline-offset: 3px;
  }
  .mission > .eyebrow,
  .mission > p,
  .mission > .quest-footer {
    display: none;
  }
  .mission .level-kicker {
    grid-column: 1/3;
    grid-row: 1;
    margin: 0;
    display: flex;
    justify-content: space-between;
    gap: 4px;
    font-size: 8px;
    line-height: 1;
    white-space: nowrap;
  }
  .mission .level-steps {
    grid-column: 1/3;
    grid-row: 3;
    display: flex;
    gap: 5px;
    margin: 0;
  }
  .mission .level-step {
    gap: 1px;
    font-size: 9px;
  }
  .mission .level-step:before {
    height: 3px;
  }
  .mission .level-step span {
    display: none;
  }
  .mission .level-step small {
    display: block;
    font-size: 7px;
    line-height: 1.1;
  }
  .mission h1 {
    grid-column: 1;
    grid-row: 2;
    font-size: 12px;
    line-height: 1.1;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mission .progress-label {
    grid-column: 2;
    grid-row: 2;
    position: static;
    display: flex;
    justify-content: flex-end;
    font-size: 8px;
    line-height: 1;
    margin: 0;
  }
  .mission .progress-label span:first-child {
    display: none;
  }
  .mission .progress-track {
    grid-column: 1/3;
    grid-row: 4;
    position: static;
    width: auto;
    height: 4px;
  }
  .mission.expanded {
    display: block;
    max-height: 46dvh;
    overflow-y: auto;
    cursor: pointer;
    padding: 10px 12px;
  }
  .mission.expanded > .eyebrow,
  .mission.expanded > p,
  .mission.expanded > .quest-footer {
    display: block;
  }
  .mission.expanded .level-kicker {
    display: flex;
    margin: 8px 0 0;
    font-size: 9px;
    line-height: normal;
    white-space: normal;
  }
  .mission.expanded .level-steps {
    display: flex;
    margin: 7px 0 9px;
  }
  .mission.expanded .level-step {
    gap: 3px;
    font-size: 13px;
  }
  .mission.expanded .level-step:before {
    height: 4px;
  }
  .mission.expanded .level-step span {
    display: block;
  }
  .mission.expanded .level-step small {
    font-size: 8px;
    line-height: normal;
  }
  .mission.expanded h1 {
    font-size: 15px;
    line-height: 1.15;
    margin: 4px 0;
    white-space: normal;
    overflow: visible;
  }
  .mission.expanded .progress-label {
    position: static;
    display: flex;
    font-size: 9px;
    margin: 0 0 5px;
  }
  .mission.expanded .progress-label span:first-child {
    display: block;
  }
  .mission.expanded .progress-track {
    position: static;
    width: auto;
    height: 6px;
  }
}

/* Accesibilitate */
button:focus-visible,
.primary:focus-visible,
.puzzle-grid button:focus-visible {
  outline: 3px solid #ffd46e;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Legături între insule */
.links { margin: 0 0 20px; font-size: 12px; color: #4f6f7a; }
.links-head { display: flex; justify-content: space-between; font-weight: 800; margin-bottom: 8px; color: #2c6670; }
.links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.links li { display: grid; gap: 2px; padding: 9px 12px; border-radius: 12px; background: #e9efe4; border: 1px dashed #b5c6b7; opacity: .75; }
.links li b { font-size: 12px; }
.links li span { line-height: 1.35; }
.links li.on { opacity: 1; background: #d8f5e4; border: 1px solid #62d9d0; color: #1d5a55; }


/* Illustrated archipelago map */
.world-map-overlay {
  padding: clamp(10px, 2vw, 24px);
  background: rgba(4, 20, 36, .62);
  backdrop-filter: blur(2px);
}
.world-map-panel {
  width: min(1240px, 100%);
  height: min(780px, calc(100dvh - 48px));
  max-height: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
  padding: clamp(20px, 3.4vw, 42px);
  border: 1px solid #d9f6ff99;
  border-radius: 30px;
  color: #f3fbff;
  background-color: #0b2c43;
  background-image:
    linear-gradient(180deg, rgba(4, 23, 39, .64) 0%, rgba(5, 27, 42, .16) 42%, rgba(5, 24, 38, .52) 62%, rgba(5, 23, 37, .94) 100%),
    url("../assets/archipelago-dormant.webp");
  background-size: 100% 100%, cover;
  background-position: center, center;
  box-shadow: 0 28px 90px #041827aa;
  animation: mapReveal .5s cubic-bezier(.18,.72,.24,1) both;
}
#worldMap[data-island-state="meadow-awake"] .world-map-panel,
#worldMap[data-island-state="all-awake"] .world-map-panel {
  background-image:
    linear-gradient(180deg, rgba(4, 23, 39, .58) 0%, rgba(5, 27, 42, .10) 42%, rgba(5, 24, 38, .50) 62%, rgba(5, 23, 37, .94) 100%),
    url("../assets/archipelago-meadow-awake.webp");
}
.world-map-panel:before { display: none; }
.world-map-panel > * { z-index: 1; }
.world-map-panel .eyebrow {
  color: #bff2dc;
  font-size: 12px;
  text-shadow: 0 2px 12px #031727;
}
.world-map-panel h2 {
  margin: 4px 60px 8px 0;
  color: #fff;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1;
  text-shadow: 0 4px 24px #041b2dcc;
}
.world-map-intro {
  max-width: 600px;
  margin: 0 0 8px;
  color: #e8f7fa;
  font-size: 16px;
  text-shadow: 0 2px 12px #041b2dcc;
}
.map-close {
  top: 20px;
  right: 20px;
  background: #0a2c42e8;
  border: 1px solid #ffffff77;
  box-shadow: 0 5px 18px #04182766;
}
.map-summary { gap: 9px; margin: 0; }
.map-summary span {
  padding: 9px 13px;
  color: #f4fff5;
  border: 1px solid #d8f8ec66;
  background: #0a3549d9;
  backdrop-filter: blur(9px);
  font-size: 13px;
}
.island-route { flex: 1; min-height: 250px; align-items: end; }
.world-card {
  padding: 18px;
  border: 1px solid #d9f7ff80;
  background: linear-gradient(145deg, #0b3649e8, #08283fe8);
  box-shadow: 0 14px 34px #03182677, inset 0 1px #ffffff20;
  backdrop-filter: blur(13px);
}
.world-card.awakened {
  border-color: #8ff0bd;
  background: linear-gradient(145deg, #145545ec, #0b3945ec);
  box-shadow: 0 0 0 1px #9cf3be55, 0 0 34px #76e9b955;
}
.world-card.locked { background: linear-gradient(145deg, #122f3edc, #0a2639e8); }
.world-status,
.world-card.locked .world-status {
  color: #f0ffed;
  background: #236856e8;
  font-size: 12px;
}
.world-card.locked .world-status { background: #465964e8; color: #d3e0e2; }
.world-card h3 { color: #fff; font-size: 22px; }
.world-card p {
  min-height: 48px;
  margin-bottom: 14px;
  color: #e0eef1;
  font-size: 14px;
}
.world-action {
  min-height: 46px;
  border: 1px solid #c9ffe4aa;
  background: linear-gradient(135deg, #8ce8c0, #59c6c4);
  color: #10374a;
  font-size: 14px;
  box-shadow: 0 7px 20px #041b2d44;
}
.world-action:hover:not(:disabled) { background: linear-gradient(135deg, #b3f4d2, #74e2df); }
.world-action:disabled {
  color: #d5e0df;
  border-color: #ffffff26;
  background: #536a70d9;
}
.route-link { color: #fff1b7; }
.route-link:before { border-color: #ffe29a; filter: drop-shadow(0 0 5px #ffd976); }
.route-link span {
  width: 38px;
  height: 38px;
  color: #563e13;
  background: #ffe29a;
  box-shadow: 0 0 24px #ffdc7eaa;
}
.route-link small {
  padding: 5px 8px;
  color: #fff8dc;
  background: #0b3044d9;
  font-size: 10px;
}
.route-link.active { color: #baffd5; }
.route-link.active:before { border-color: #9cf0c3; }
.route-link.active span { color: #103b4c; background: #abf1c5; box-shadow: 0 0 26px #79edb4cc; }
.map-footnote {
  margin: 0;
  color: #e7f7ee;
  font-size: 14px;
  text-shadow: 0 2px 10px #031724;
}
@keyframes mapReveal {
  from { opacity: .72; transform: scale(1.015); }
  to { opacity: 1; transform: scale(1); }
}
@media (max-width: 700px) {
  .world-map-overlay { padding: 9px; }
  .world-map-panel {
    width: 100%;
    height: calc(100dvh - 18px);
    padding: calc(18px + env(safe-area-inset-top, 0px)) 15px 16px;
    border-radius: 23px;
    background-size: 100% 100%, 100% auto;
    background-position: center, top center;
  }
  #worldMap[data-island-state="meadow-awake"] .world-map-panel,
  #worldMap[data-island-state="all-awake"] .world-map-panel {
    background-size: 100% 100%, 100% auto;
    background-position: center, top center;
  }
  .world-map-panel h2 { margin-right: 48px; font-size: clamp(30px, 8vw, 38px); }
  .world-map-intro { max-width: 92%; font-size: 14px; }
  .map-summary span { padding: 8px 10px; font-size: 12px; }
  .island-route { flex: 1; min-height: 0; align-content: end; padding-bottom: 2px; }
  .world-card { padding: 12px; }
  .world-card-art { width: 46px; height: 46px; }
  .world-card h3 { font-size: 19px; }
  .world-card p { font-size: 13px; line-height: 1.35; }
  .world-action { min-height: 44px; font-size: 13px; }
  .route-link { min-height: 42px; }
  .route-link span { width: 28px; height: 28px; }
  .route-link small { font-size: 9px; }
  .map-footnote { font-size: 12px; }
  .map-close { top: 12px; right: 12px; width: 38px; height: 38px; }
}
/* Third island: a responsive wind duel. */
.island-route { grid-template-columns: 1fr 50px 1fr 50px 1fr; }
.world-map-panel { overflow-y: auto; }
.breeze-art { background: linear-gradient(145deg,#99e6ce,#ffd190); }
#pongIsland[hidden], .pong-curtain[hidden] { display:none; }
#pongIsland { position:absolute; inset:0; z-index:7; display:flex; flex-direction:column; align-items:center; padding:18px; background:radial-gradient(ellipse at top,#23596a,#081e32); color:#effff4; overflow:auto; }
.pong-active .mission,.pong-active .tip,.pong-active .mobile-controls,.pong-active .interact { display:none!important; }
.pong-heading { text-align:center; }
.pong-heading>span { font-size:11px; letter-spacing:2px; color:#a9e9d4; }
.pong-heading h1 { margin:5px 0; font-size:clamp(24px,3vw,35px); }
.pong-heading p { margin:4px 0; font-size:13px; }
.pong-score { display:flex; gap:28px; align-items:center; margin:8px 0; }
.pong-score span { display:flex; gap:12px; align-items:center; font-size:14px; }
.pong-score b { font:700 30px 'Space Grotesk',sans-serif; }
.pong-score i { color:#ffdb9c; font-style:normal; }
#pongCanvas { width:100%; max-width:800px; min-height:0; flex:1; object-fit:contain; touch-action:none; border-radius:25px; outline-offset:3px; }
.pong-bottom { display:flex; align-items:center; gap:16px; margin-top:8px; font-size:12px; }
.pong-bottom button { padding:8px 16px; border-radius:20px; border:1px solid #83bdb9; color:#effff4; background:#174854; }
.pong-curtain { position:absolute; inset:0; display:grid; place-items:center; background:#061f35a8; backdrop-filter:blur(8px); padding:20px; }
.pong-curtain>div { width:min(470px,100%); padding:30px; border-radius:28px; background:linear-gradient(140deg,#faffed,#d8f3e7); color:#163d4a; box-shadow:0 20px 80px #04172680; }
.pong-curtain h2 { font:700 clamp(27px,4vw,42px)/1.08 'Space Grotesk',sans-serif; margin:14px 0; }
.pong-curtain p { font-size:16px; line-height:1.55; }
.pong-curtain .secondary { display:block; margin:14px 0 0; }
@media(max-width:900px){.island-route{grid-template-columns:1fr;align-content:start}.world-map-panel{flex-shrink:0}.route-link{min-height:38px}.world-card-art{float:right}.world-card p{min-height:0}.island-route{flex:none}.world-map-panel{gap:12px}}
@media(max-width:700px){#pongIsland{padding:12px 8px}.pong-heading p{max-width:310px}.pong-bottom{font-size:10px;gap:8px}.pong-curtain>div{padding:24px}.world-map-panel{overflow-y:auto}.pong-score{margin:4px 0}}

/* Keep the duel between the global header and footer. */
#pongIsland { padding:8px 16px; overflow:hidden; }
.pong-heading { flex:none; }
.pong-heading p { min-height:2.8em; max-width:560px; line-height:1.4; }
.pong-score,.pong-bottom { flex:none; }
#pongCanvas { display:block; }
.pong-curtain { overflow-y:auto; }
@media(max-width:700px) and (orientation:portrait) {
  #pongIsland { padding:4px 10px; }
  .pong-heading>span { font-size:9px; letter-spacing:1px; }
  .pong-heading h1 { font-size:25px; margin:4px 0; }
  .pong-heading p { font-size:12px; min-height:2.8em; margin:2px 0; }
  .pong-score { gap:22px; margin:0 0 3px; }
  .pong-score b { font-size:26px; }
  #pongCanvas { max-width:600px; border-radius:18px; }
  .pong-bottom { width:100%; justify-content:space-between; font-size:11px; margin:3px 0 0; }
  .pong-bottom button { min-height:40px; padding:8px 14px; }
}

/* Victory is part of the landscape, with a small result card below it. */
#pongIsland.garden-won .pong-curtain {
  position:relative; inset:auto; flex:none; width:100%; padding:8px 0 0;
  display:block; background:none; backdrop-filter:none; overflow:visible;
}
#pongIsland.garden-won .pong-curtain[hidden] { display:none; }
#pongIsland.garden-won .pong-curtain>div {
  width:min(690px,100%); margin:0 auto; padding:12px 18px; border-radius:18px;
  background:linear-gradient(120deg,#e8f6d8ee,#d1f0e7ee); box-shadow:0 4px 18px #04172644;
}
#pongIsland.garden-won .pong-curtain .eyebrow { display:none; }
#pongIsland.garden-won .pong-curtain h2 { font-size:21px; margin:0 0 4px; }
#pongIsland.garden-won .pong-curtain p { font-size:12px; line-height:1.4; margin:0 0 8px; }
#pongIsland.garden-won .pong-curtain button { display:inline-block; width:auto; min-height:36px; padding:8px 13px; font-size:12px; margin:0 8px 0 0; }
@media(max-width:700px){
  #pongIsland.garden-won .pong-curtain>div{padding:10px 12px;}
  #pongIsland.garden-won .pong-curtain h2{font-size:18px;}
}

/* The sanctuary is shown upright in either orientation, without the match HUD. */
#pongIsland.sanctuary-active .pong-heading,#pongIsland.sanctuary-active .pong-score {display:none;}
#pongIsland.sanctuary-active #pongCanvas {max-width:none;border-radius:12px;}
#pongIsland.sanctuary-active .pong-bottom {width:100%;justify-content:center;color:#e6f5d7;}
#pongVisit[hidden] {display:none!important;}
@media(max-width:700px){#pongIsland.sanctuary-active .pong-bottom{font-size:11px;gap:8px;}#pongIsland.sanctuary-active .pong-bottom span{flex:1;}}

/* Full-width sanctuary framing; no previous island behind the global header. */
.game-shell.pong-active {background:#0b283c;}
.game-shell.pong-active #scene {visibility:hidden;}
#pongIsland.sanctuary-active {top:0!important;bottom:0!important;padding:64px 0 12px;background:#0b283c;}
#pongIsland.sanctuary-active #pongCanvas {width:100%;max-width:none;object-fit:fill;border-radius:0;}
#pongIsland.sanctuary-active .pong-bottom {padding:0 14px;box-sizing:border-box;}
#app:has(.sanctuary-active:not([hidden])) .footer {display:none;}
@media(max-width:700px){#pongIsland.sanctuary-active{padding-top:calc(66px + env(safe-area-inset-top,0px));padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));}}
/* Fourth island: a complete maze on both portrait phones and desktops. */
.game-shell.maze-active {background:#091827;}
.game-shell.maze-active #scene {visibility:hidden;}
#mazeIsland {position:absolute;inset:66px 0 0;z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 16px 12px;box-sizing:border-box;color:#e1f5ed;overflow:hidden;}
#mazeIsland[hidden],#mazeIsland [hidden] {display:none!important;}
.maze-heading {text-align:center;flex:none;}
.maze-heading>span {font-size:10px;letter-spacing:2px;color:#9bbdbb;}
.maze-heading h1 {font-size:clamp(20px,3vw,30px);margin:3px 0;}
.maze-heading p {font-size:12px;margin:4px auto;max-width:620px;min-height:16px;}
.maze-meters {display:flex;justify-content:center;gap:18px;font-size:12px;flex:none;}
#mazeIsland canvas {display:block;min-height:0;flex:1;width:100%;max-width:650px;object-fit:contain;touch-action:none;outline:none;}
.maze-controls {display:flex;gap:12px;align-items:center;justify-content:center;font-size:11px;flex:none;}
.maze-controls button {min-height:40px;padding:8px 12px;border:1px solid #8cc5bd;border-radius:20px;color:#e0fff5;background:#173a46;cursor:pointer;}
.maze-overlay {position:absolute;inset:0;background:rgba(5,19,31,.73);display:grid;place-items:center;padding:16px;backdrop-filter:blur(5px);}
.maze-overlay>div {background:#f4f6e9;color:#183843;border-radius:25px;padding:26px;max-width:420px;box-shadow:0 15px 60px #0005;}
.maze-overlay h2 {font-size:28px;margin:12px 0;}
.maze-overlay p {line-height:1.65;font-size:15px;}
.maze-overlay button {display:block;margin:10px 0 0;}
.maze-art {background:radial-gradient(circle,#8ac8ab,#302b49);color:#eae0fa;}
#mazeIsland.maze-won .maze-overlay {inset:auto 16px 58px;background:none;backdrop-filter:none;padding:0;}
#mazeIsland.maze-won .maze-overlay>div {padding:14px 20px;max-width:540px;}
#mazeIsland.maze-won .maze-overlay h2 {font-size:20px;margin:4px 0;}
#mazeIsland.maze-won .maze-overlay .eyebrow {display:none;}
#mazeIsland.maze-won .maze-overlay p {font-size:12px;margin:5px 0;}
#mazeIsland.maze-won .maze-overlay button {display:inline-block;font-size:12px;padding:10px;}
@media(max-width:700px){#mazeIsland{inset:calc(66px + env(safe-area-inset-top,0px)) 0 0;padding:6px 8px;gap:5px;}.maze-heading p{font-size:11px;max-width:360px;}.maze-meters{gap:12px;font-size:11px;}.maze-controls{gap:7px;font-size:10px;}.maze-overlay>div{padding:22px;}.maze-overlay h2{font-size:25px;}}
@media(max-height:550px){.maze-heading h1{font-size:18px;}.maze-heading p{display:none;}#mazeIsland{gap:3px;padding-top:0;}.maze-controls button{min-height:32px;}}
.maze-active .mission,.maze-active .tip,.maze-active .mobile-controls,.maze-active .interact {display:none!important;}
#app:has(.maze-active) .footer {display:none;}
.island-route {grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr);}
@media(max-width:1150px){.island-route{grid-template-columns:1fr;align-content:start;flex:none;}.route-link{min-height:32px;}.world-map-panel{overflow-y:auto;flex-shrink:0;}.world-card p{min-height:0;}}