:root {
  --night: #1c123c;
  --night-deep: #120c2c;
  --gold: #ffdd55;
  --panel: #39285e;
}
body {
  background: radial-gradient(ellipse at 70% -5%, #483076 0, transparent 54%),
    radial-gradient(ellipse at 0 82%, #281a4f 0, transparent 47%), var(--night);
}
.topbar { min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: .4rem; font-size: clamp(1.75rem, 3.1vw, 2.4rem); }
.brand .brand-star { filter: drop-shadow(0 0 .4rem #ffd44e55); }
.top-actions .quiet { background: #e8dcff; }
.top-actions .quiet[aria-pressed="true"] { background: #bdeec7; }
.world-hero {
  display: grid;
  align-content: end;
  min-height: clamp(160px, 19vw, 290px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #bba0ec55;
  border-radius: clamp(1.05rem, 2.2vw, 1.8rem);
  background: linear-gradient(90deg, #16102be8 0%, #1b113bc9 28%, #1b113b30 62%),
    url("../assets/archipel-els.jpg") center 8% / cover, #241650;
}
.world-copy { padding: clamp(.9rem, 3vw, 2.4rem); max-width: min(100%, 42rem); }
.world-copy h1 { font-size: clamp(2.1rem, 5.3vw, 4.55rem); text-wrap: balance; margin-bottom: .55rem; }
.world-copy p { color: #eee6ff; font-weight: 720; font-size: clamp(.9rem, 1.7vw, 1.35rem); margin-bottom: .75rem; }
.hero-quiet {
  min-height: 2.75rem; padding: .65rem 1rem; border-radius: 2rem;
  background: #342354e8; border: 1px solid #aa90df; color: #fff7ed; line-height: 1.12;
}
.world-nav { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .85rem 0; }
.world-nav .switcher, .level-switcher {
  flex: 0 1 28rem; display: grid; grid-template-columns: 1fr 1fr; padding: .25rem; gap: .3rem;
  border: 1px solid #8c75b385; border-radius: 2rem; background: #251744;
}
.world-nav .switcher button, .level-switcher button {
  font-size: clamp(.92rem, 1.75vw, 1.28rem); color: #fff7eb; background: transparent; white-space: nowrap;
}
.world-nav .switcher [aria-pressed="true"], .level-switcher [aria-pressed="true"] {
  background: var(--gold); color: var(--ink); box-shadow: none;
}
.world-count { color: #efdbff; font-weight: 850; font-size: clamp(.86rem, 1.9vw, 1.38rem); white-space: nowrap; }
.game-grid { gap: clamp(.55rem, 1.15vw, 1rem); }
.game-tile {
  grid-template-columns: 43% 1fr; height: clamp(88px, 9vw, 128px); min-height: 0;
  border-radius: clamp(.9rem, 1.55vw, 1.32rem); box-shadow: inset 0 -4px 0 #22144132, 0 4px 8px #10082955;
}
.game-tile > img { min-height: 0; mask-image: linear-gradient(90deg, black 85%, transparent 100%); }
.game-tile .tile-info, .map-stop .tile-info { display: grid; gap: .3rem; padding: .5rem .65rem .55rem .25rem; min-width: 0; }
.game-tile .tile-info > b, .map-stop .tile-info > b {
  font-size: clamp(1rem, 2vw, 1.9rem); font-weight: 900; line-height: 1.06; letter-spacing: -.035em;
}
.star-row {
  display: inline-flex !important; width: max-content; align-items: center; gap: .17em;
  font: 850 clamp(.9rem, 2vw, 1.48rem) / 1 system-ui, sans-serif !important;
  letter-spacing: .02em !important; padding: 0 !important; color: #38254e; white-space: nowrap;
}
.star-row i { font-style: normal; }
.star-row .earned { color: #fff1a1; text-shadow: 0 1px #5b3100, 1px 0 #5b3100, -1px 0 #5b3100, 0 -1px #5b3100; }
.map-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.map-stop {
  position: relative; min-width: 0; min-height: clamp(68px, 8vw, 105px);
  display: grid; grid-template-columns: 32% 1fr; align-items: center; text-align: start; overflow: hidden;
  padding: 0; border-radius: 1rem; background: #3a2861; color: #fff8ed;
  box-shadow: inset 0 -4px #180f3590;
}
.map-stop img { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.map-stop .tile-info { padding-inline: .75rem .45rem; }
.map-stop .tile-info small { color: #e8d8f8; font-size: .73rem; }
.map-stop .stop-index {
  position: absolute; top: .28rem; left: .28rem; width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
  background: #251540; border: 1px solid #f5db96; color: #ffebad; border-radius: 50%;
  font-size: .86rem; font-weight: 900;
}
.map-stop.is-current { background: var(--tile); color: var(--ink); }
.map-stop.is-current .tile-info small { color: var(--ink); }
.map-stop:disabled { filter: saturate(.45); opacity: .7; }
.is-pointed { outline: 3px solid #fff3a9; outline-offset: 3px; }
.level-intro {
  position: relative; display: grid; grid-template-columns: clamp(5rem, 19vw, 17rem) 1fr; align-items: center;
  gap: clamp(.8rem, 3vw, 2rem); padding: 0; overflow: hidden; background: var(--tile); color: var(--ink);
  border-radius: clamp(1rem, 2vw, 1.65rem);
}
.level-intro img { width: 100%; height: 100%; min-height: 0; object-fit: cover; mask-image: linear-gradient(90deg, black 82%, transparent 100%); }
.level-intro > div { padding: .8rem .6rem .8rem 0; }
.level-intro h1 { font-size: clamp(1.55rem, 4.9vw, 4.3rem); }
.level-intro p { margin: .35rem 0 .6rem; font-size: clamp(.88rem, 2vw, 1.45rem); font-weight: 700; }
.level-switcher { max-width: 30rem; }
.level { grid-template-columns: auto 1fr; align-items: center; gap: .75rem; min-height: clamp(5rem, 10vw, 8rem); }
.level-symbol { display: grid; place-items: center; width: 2.5rem; aspect-ratio: 1; border-radius: 50%; background: #3e2a6a; color: #fff0a0; }
.level .level-info { display: grid; gap: .2rem; }
.level-info > strong { font-size: .82rem; }
.level-info > b { font-size: clamp(1rem, 2vw, 1.5rem); }
.level-info > small { font-size: .72rem; font-weight: 750; }
.journal-head { display: flex; justify-content: space-between; gap: .8rem; align-items: center; margin: 0 0 .85rem; }
.journal-head h1 { font-size: clamp(1.9rem, 4.6vw, 3.8rem); }
.journal-total {
  display: flex; align-items: center; gap: .4rem; padding: .5rem .8rem;
  border-radius: 1rem; background: #ffdf6b; color: var(--ink); font-weight: 900; white-space: nowrap;
}
.journal-bar, .stage-meter progress {
  appearance: none; border: none; border-radius: 2rem; overflow: hidden; background: #554174; color: var(--gold);
}
.journal-bar::-webkit-progress-bar, .stage-meter progress::-webkit-progress-bar { background: #554174; }
.journal-bar::-webkit-progress-value, .stage-meter progress::-webkit-progress-value { border-radius: 2rem; background: var(--gold); }
.journal-bar::-moz-progress-bar, .stage-meter progress::-moz-progress-bar { border-radius: 2rem; background: var(--gold); }
.journal-bar { display: block; width: 100%; height: .68rem; margin-bottom: 1rem; }
.journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.journal-card {
  display: grid; grid-template-columns: 38% 1fr; align-items: center; column-gap: .5rem; text-align: start;
  overflow: hidden; padding: 0 .4rem 0 0; border-radius: .85rem; min-height: clamp(70px, 8vw, 105px);
  background: var(--tile); color: var(--ink);
}
.journal-card img { grid-row: span 2; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.journal-card b { align-self: end; font-size: clamp(.85rem, 1.85vw, 1.35rem); }
.journal-card .star-row { align-self: start; margin: .3rem 0; }
.stage-meter { display: flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 850; }
.stage-meter progress { height: .55rem; width: clamp(3.1rem, 8vw, 7rem); }
.activity .activity-body { padding-block: .35rem; }
.activity-controls .answer { touch-action: manipulation; }
.answer:active:not(:disabled), .primary:active:not(:disabled) { scale: .96; }
.game-toast {
  pointer-events: none; position: fixed; z-index: 6; inset-inline: 0; bottom: max(1.2rem, env(safe-area-inset-bottom));
  margin: auto; width: max-content; max-width: calc(100% - 1.2rem); min-height: 2.8rem;
  display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem; border-radius: 2rem;
  color: var(--ink); background: #ffed99; font-weight: 900; box-shadow: 0 5px 22px #13092b95;
  animation: toast-in .32s ease-out both;
}
.game-toast:empty { display: none; }
.game-toast span { font-size: 1.4rem; color: #9b581a; }
@keyframes toast-in { from { opacity: 0; transform: translateY(.65rem); } to { opacity: 1; transform: translateY(0); } }
.win-screen { padding-block: clamp(1.1rem, 3.5vw, 3.1rem); gap: .65rem; text-align: center; }
.win-medal { position: relative; width: clamp(8rem, 21vw, 13.25rem); margin: .5rem .85rem .9rem; }
.win-medal img {
  display: block; width: 100%; aspect-ratio: 235 / 178; object-fit: cover;
  border-radius: clamp(.9rem, 2.5vw, 1.8rem); border: 2px solid var(--tile); box-shadow: 0 .8rem 2rem #120c30a6;
}
.win-ribbon {
  position: absolute; inset: auto -.55rem -.55rem auto; display: grid; place-items: center;
  width: 28%; aspect-ratio: 1; border: 2px solid #fff0a4; border-radius: 50%; font-size: clamp(1.15rem, 3.6vw, 2.4rem);
  font-weight: 900; background: #ffdc55; color: #734419; box-shadow: 0 .2rem 0 #bb7b23, 0 0 1rem #ffda7766;
}
.win-progress { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .25rem 0 .5rem; }
.win-progress .star-row { color: #f3e9ff; font-size: 1.55rem !important; }
#remote { width: min(100% - 1.3rem, 660px); padding-block: max(.65rem, env(safe-area-inset-top)) max(.65rem, env(safe-area-inset-bottom)); }
.remote-choices .answer { touch-action: manipulation; }
.remote-choices.remote-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.remote-compact .answer {
  grid-template-columns: 1fr; min-height: clamp(4.4rem, 17dvh, 7.5rem);
  padding: .45rem; font-size: clamp(.98rem, 4.7vw, 1.6rem); border-radius: 1rem;
}
.remote-compact .answer-icon { font-size: clamp(1.55rem, 7vw, 3.25rem); }
.remote-choices .remote-picked:disabled { opacity: 1; filter: brightness(.87); box-shadow: inset 0 0 0 3px #fff4ac; }
.parent-reset { display: grid; justify-items: start; gap: .6rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #bba0ec55; }
.parent-reset p { margin-top: 0; }
#reset-confirmation { display: grid; gap: .65rem; }
#reset-result:empty { display: none; }
.reset-confirm { min-height: 2.75rem; padding: .65rem 1rem; border-radius: 2rem; background: #ffc2cb; color: #452039; }
@media (max-width: 660px) {
  .world-hero { background-position: center, right 10%, center; }
  .world-nav .switcher { flex-basis: auto; }
  .world-nav .switcher button { padding-inline: .65rem; }
  .game-tile .tile-info > b, .map-stop .tile-info > b { font-size: clamp(.85rem, 3.45vw, 1.2rem); }
  .game-tile .tile-info, .map-stop .tile-info { padding-inline: .35rem; }
  .map-route, .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .level { grid-template-columns: 1fr; gap: .4rem; }
  .level-symbol { width: 1.85rem; }
  .journal-head { align-items: start; }
  .journal-total { font-size: .84rem; }
}
@media (max-height: 730px) and (min-width: 760px) {
  .world-hero { min-height: 155px; }
  .world-copy { padding: 1.1rem 1.5rem; }
  .world-copy h1 { font-size: clamp(2rem, 4.15vw, 3.5rem); }
  .game-tile { height: clamp(72px, 12vh, 108px); }
}
@media (prefers-reduced-motion: reduce) {
  .game-toast { animation: none; }
  .answer:active:not(:disabled), .primary:active:not(:disabled) { scale: 1; }
}

/* Adventure board and persistent play area */
.map-world {
  position: relative;
  display: block;
  aspect-ratio: 2.54;
  max-height: max(310px, calc(100svh - 300px));
  isolation: isolate;
  border-radius: 1.45rem;
  border: 1px solid #a98bd36b;
  background: #211650 url("../assets/carte-archipel.jpg") center / 100% 100% no-repeat;
}
.adventure-hero { min-height: 0; background: linear-gradient(110deg, #33215f, #201643); }
.adventure-hero .world-copy {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  max-width: none; padding: clamp(.75rem, 1.7vw, 1.45rem); column-gap: .7rem;
}
.adventure-hero h1 { font-size: clamp(1.85rem, 3.8vw, 3.5rem); }
.adventure-hero p { grid-row: 2; margin: 0; }
.adventure-hero .actions { grid-row: 1 / span 2; grid-column: 2; justify-content: end; }
.map-trail {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(0deg, #1b123fa3, transparent 33%), #17102926;
}
.map-world .map-stop {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: auto 1fr;
  width: clamp(116px, 14vw, 193px);
  min-height: clamp(48px, 5.7vw, 74px);
  overflow: visible;
  border: 1px solid #bea5e089;
  border-radius: .95rem;
  background: #27194cdd;
  box-shadow: 0 3px 12px #100725ac;
  transition: translate .18s ease, box-shadow .18s ease;
}
.map-world .map-stop:not(:disabled):hover { translate: 0 -3px; }
.map-world .map-stop:disabled { opacity: .83; filter: saturate(.48); }
.map-world .map-stop .tile-info { padding-inline: .3rem .45rem; }
.map-world .map-stop .tile-info > b { font-size: clamp(.86rem, 1.35vw, 1.3rem); }
.map-world .map-stop .tile-info > small { font-size: clamp(.62rem, .85vw, .8rem); }
.map-world .map-stop .stop-index {
  inset: auto auto -.38rem -.38rem;
  width: 1.55rem;
  height: 1.55rem;
  box-shadow: 0 2px 4px #150d38a6;
}
.map-world .map-icon { display: grid; place-items: center; padding: .45rem; font-size: clamp(1.15rem, 2.8vw, 2.35rem); }
.map-world .map-stop.is-lit { border-color: #ffdc61; }
.map-world .map-stop.is-lit .stop-index { color: #412046; background: #ffdb61; }
.map-world .map-stop.is-current {
  background: var(--tile);
  border: 2px solid #ffe3a4;
  box-shadow: 0 0 0 4px #ffdd6658, 0 0 2rem #ffdb5c75;
}
.live-stage { min-width: 0; }
.live-stage .activity-body {
  position: relative;
  min-width: 0;
  width: 100%;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 54%, color-mix(in srgb, var(--game-accent) 14%, #261947), transparent 70%);
}
.live-stage .activity-prompt { text-wrap: balance; }
.game-progress-slot:empty { display: none; }
.activity-feedback:empty { min-height: 0; }
.scene-direct { row-gap: .55rem; }
.scene-direct .activity-body { padding-bottom: .45rem; }
.scene-direct [data-cell], .scene-direct button { touch-action: manipulation; }
@media (max-width: 680px) {
  .adventure-hero .world-copy { display: block; }
  .adventure-hero .actions { justify-content: start; margin-top: .5rem; }
  .map-world {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    aspect-ratio: auto;
    max-height: none;
    padding: .8rem;
    background-size: auto 100%;
  }
  .map-world .map-stop {
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .map-world .map-stop:not(:disabled):hover { translate: none; }
}
.remote-choices.remote-pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: ". up ." "left extra right" ". down tools";
  gap: clamp(.42rem, 1.6vw, .72rem);
}
.remote-pad [data-pad="up"] { grid-area: up; }
.remote-pad [data-pad="right"] { grid-area: right; }
.remote-pad [data-pad="down"] { grid-area: down; }
.remote-pad [data-pad="left"] { grid-area: left; }
.remote-pad [data-pad="extra-1"] { grid-area: extra; }
.remote-pad [data-pad="extra-2"] { grid-area: tools; }
.remote-pad .answer { padding-inline: .2rem; font-size: clamp(.86rem, 3.8vw, 1.35rem); }