:root {
  --marble: #fff3e3;
  --ink: #24201f;
  --muted: #766f68;
  --gold: #c4944f;
  --bronze: #8b6546;
  --rose: #c9897c;
  --sea: #577d8d;
  --glass: rgba(255, 250, 242, 0.62);
  --soft-shadow: 0 10px 24px rgba(64, 46, 32, 0.12);
  --hairline: rgba(255, 255, 255, 0.52);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.74), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(201,137,124,.20), transparent 30%),
    linear-gradient(145deg, #efe0c8, #fff3e3 55%, #cab896);
}
button { font: inherit; color: inherit; border: 0; }
.shell { position: relative; width: 100vw; height: 100dvh; overflow: hidden; }
.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: flex; }

#intro {
  align-items: center;
  justify-content: space-between;
  padding: max(26px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
  flex-direction: column;
  background:
    linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.34)),
    radial-gradient(circle at 50% 18%, rgba(255,236,192,.42), transparent 27%),
    linear-gradient(180deg, #111a24 0%, #36485b 46%, #d9b983 100%);
}

.sky{
    position:absolute;
    inset:0;
    overflow:hidden;

    background:
        radial-gradient(circle at 50% 15%,
            rgba(255,255,255,.10),
            transparent 30%),

        radial-gradient(circle at 15% 20%,
            rgba(255,210,160,.12),
            transparent 35%),

        radial-gradient(circle at 85% 18%,
            rgba(180,230,255,.10),
            transparent 35%),

        linear-gradient(
            180deg,
            #101b24 0%,
            #2e4355 42%,
            #8ca1a3 72%,
            #d9c7a4 100%
        );
}

/* .sky {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(transparent 66%, rgba(25, 112, 132, .18) 67%, rgba(25,112,132,.35) 77%, rgba(255,255,255,.48) 78%),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(142,89,59,.14) 39px 41px);
  mask-image: linear-gradient(to bottom, transparent 0, black 14%, black 88%, transparent 100%);
} */
.titlemark { z-index: 1; text-align: center; margin-top: 5dvh; max-width: 360px; }
.sigil {
  display: grid; place-items: center; width: 82px; height: 82px; margin: 0 auto 22px;
  border-radius: 50%; color: white; background: linear-gradient(145deg, var(--gold), var(--bronze));
  font-size: 44px; box-shadow: var(--soft-shadow);
}
.sigil.small { width: 54px; height: 54px; margin-bottom: 14px; font-size: 30px; }
.titlemark p { margin: 0 0 8px; font-size: 12px; letter-spacing: 4px; color: var(--bronze); }
.titlemark h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(42px, 11vw, 66px); line-height: .92; letter-spacing: 0; }
.titlemark small { display: block; margin-top: 16px; color: #f4d6a6; font-size: 15px; }
.intro-story {
  z-index: 1;
  width: min(360px, 100%);
  max-height: 28dvh;
  overflow: auto;
  padding: 14px;
  border-radius: 8px;
  background: rgba(255, 246, 234, .18);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(16px);
  box-shadow: var(--soft-shadow);
}
.intro-story p {
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: 14px;
  line-height: 1.42;
  text-shadow: 0 2px 12px rgba(0,0,0,.28);
}
.intro-story p + p { margin-top: 9px; }
.intro-actions { z-index: 1; display: grid; gap: 10px; width: min(360px, 100%); }
.primary, .ghost {
  min-height: 52px; border-radius: 8px; padding: 0 18px; font-weight: 800;
  position: relative;
  overflow: hidden;
  transition: transform 520ms ease, opacity 520ms ease;
}
.primary::after, .ghost::after, .choice::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-120%);
  transition: transform 640ms ease;
  pointer-events: none;
}
.primary:hover::after, .ghost:hover::after, .choice:hover::after { transform: translateX(120%); }
.primary { background: linear-gradient(135deg, #202426, #3d3c34); color: white; box-shadow: var(--soft-shadow); }
.ghost { background: var(--glass); backdrop-filter: blur(16px); border: 1px solid rgba(196,148,79,.22); }

.resume-screen,
.transition-screen {
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    linear-gradient(rgba(255,255,255,.56), rgba(255,255,255,.72)),
    linear-gradient(160deg, #f7efe0, #ddd7c7 58%, #c9b486);
}
.resume-card,
.transition-card {
  width: min(360px, 100%);
  padding: 22px;
  border-radius: 8px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(255,255,255,.68);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(18px);
  text-align: center;
}
.resume-card .eyebrow,
.transition-card .eyebrow {
  margin: 0 0 7px;
  color: var(--bronze);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.resume-card h1,
.transition-card h1 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 34px;
  letter-spacing: 0;
}
.resume-card p:not(.eyebrow),
.transition-card p:not(.eyebrow) {
  margin: 12px 0 18px;
  color: var(--muted);
  line-height: 1.4;
}
.transition-card p:not(.eyebrow) { white-space: pre-line; text-align: left; }
.resume-actions { display: grid; gap: 9px; }

#game {
  flex-direction: column;
  background:
    radial-gradient(circle at 50% 7%, rgba(255,255,255,.76), transparent 24%),
    radial-gradient(circle at 88% 14%, rgba(201,137,124,.16), transparent 30%),
    linear-gradient(180deg, #fff3e3 0%, #efe2ce 54%, #d4c09c 100%);
}
.ambient-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ambient-bg span {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  filter: blur(28px);
  opacity: .16;
  animation: floatGlow 800ms ease-in-out infinite alternate;
}
.ambient-bg span:nth-child(1) { left: -70px; top: 12%; background: var(--gold); }
.ambient-bg span:nth-child(2) { right: -80px; top: 38%; background: var(--rose); animation-delay: -4s; }
.ambient-bg span:nth-child(3) { left: 22%; bottom: -100px; background: var(--sea); animation-delay: -7s; }
@keyframes floatGlow {
  from { opacity: .10; transform: scale(.98); }
  to { opacity: .16; transform: scale(1.02); }
}
.topbar {
  position: relative;
  z-index: 2;
  height: calc(72px + env(safe-area-inset-top)); padding: max(12px, env(safe-area-inset-top)) 14px 8px;
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px;
}
.icon-btn {
  width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(255,255,255,.70); border: 1px solid rgba(30,36,37,.10); backdrop-filter: blur(14px);
  font-size: 23px; font-weight: 800;
  box-shadow: var(--soft-shadow);
  transition: transform 520ms ease, opacity 520ms ease;
}
.icon-btn svg { width: 20px; height: 20px; stroke-width: 2.25; }
.icon-btn:hover { opacity: .86; }
.chapter-chip { text-align: center; min-width: 0; }
.chapter-chip span { display: block; color: var(--bronze); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.chapter-chip strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Georgia, serif; font-size: 23px; }
.stage {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  padding: 4px 14px 84px;
  display: grid;
  grid-template-rows: 20dvh minmax(0, 1fr) minmax(118px, auto);
  gap: 10px;
}
.scene-art {
  position: relative; overflow: hidden; border-radius: 8px; background-color: #f5dec0;
  background-image: var(--scene-image), var(--scene);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.46), var(--soft-shadow);
  transform: translateZ(0);
  animation: sceneRise 640ms ease both;
}
.scene-art[data-has-image="true"] {
  background-size: cover;
  background-position: center;
}
.scene-art[data-has-image="true"] .scene-sun,
.scene-art[data-has-image="true"] .scene-ray,
.scene-art[data-has-image="true"] .scene-island,
.scene-art[data-has-image="true"] .scene-path,
.scene-art[data-has-image="true"] .scene-ruin,
.scene-art[data-has-image="true"] .scene-artifact,
.scene-art[data-has-image="true"] .scene-kassandra,
.scene-art[data-has-image="true"] .scene-heartline {
  opacity: 0;
}
/* .scene-art::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(105deg, transparent 0 38%, rgba(255,255,255,.20) 47%, transparent 58%),
    linear-gradient(180deg, rgba(36,32,31,.02), rgba(36,32,31,.20)),
    radial-gradient(ellipse at 50% 96%, rgba(255,246,228,.40), transparent 48%);
  animation: breathe 800ms ease both;
} */
.scene-art::after {
  content: attr(data-caption);
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  color: rgba(255,255,255,.92);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.26);
}
@keyframes breathe { from { opacity: 0; } to { opacity: .74; } }
@keyframes sceneRise {
  from { opacity: 0; transform: translateY(12px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.scene-sun,
.scene-ray,
.scene-island,
.scene-path,
.scene-ruin,
.scene-artifact,
.scene-kassandra,
.scene-heartline {
  position: absolute;
  display: none;
  pointer-events: none;
}
.scene-sun {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  left: calc(50% - 26px);
  top: 18px;
  background: radial-gradient(circle, #fff 0 36%, #ffe5ad 58%, rgba(255,229,173,0) 72%);
  opacity: .95;
  animation: softPulse 800ms ease-in-out infinite alternate;
}
.scene-ray {
  width: 160px;
  height: 2px;
  left: calc(50% - 80px);
  top: 86px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent);
  transform-origin: center;
  opacity: .62;
}
.ray-a { transform: rotate(-13deg); }
.ray-b { transform: rotate(13deg); top: 104px; opacity: .42; }
.scene-island {
  height: 36px;
  border-radius: 50% 50% 0 0;
  bottom: 60px;
  background: linear-gradient(180deg, rgba(110,98,76,.32), rgba(110,98,76,.06));
  opacity: .72;
}
.island-a { width: 180px; left: -28px; }
.island-b { width: 154px; right: -32px; bottom: 68px; opacity: .52; }
.scene-path {
  width: 130px;
  height: 92px;
  left: calc(50% - 65px);
  bottom: -22px;
  background: linear-gradient(180deg, rgba(255,248,228,.12), rgba(255,248,228,.78));
  clip-path: polygon(43% 0, 57% 0, 88% 100%, 12% 100%);
  opacity: .92;
}
.scene-ruin {
  width: 82px;
  height: 72px;
  right: 28px;
  bottom: 46px;
  opacity: .56;
  background:
    linear-gradient(90deg, rgba(255,255,255,.72) 0 10px, transparent 10px 17px, rgba(255,255,255,.72) 17px 27px, transparent 27px 36px, rgba(255,255,255,.72) 36px 46px, transparent 46px 55px, rgba(255,255,255,.72) 55px 65px, transparent 65px),
    linear-gradient(rgba(139,101,70,.18), rgba(139,101,70,.18));
  clip-path: polygon(0 30%, 100% 18%, 100% 100%, 0 100%);
}
.scene-artifact {
  left: calc(50% - 18px);
  bottom: 68px;
  width: 36px;
  height: 36px;
  display: none;
  place-items: center;
  color: white;
  border-radius: 50%;
  background: rgba(196,148,79,.68);
  font-size: 19px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5);
  animation: artifactFloat 760ms ease-in-out infinite alternate;
}
.scene-artifact::before {
  content: "✦";
  color: white;
  font-size: 18px;
  line-height: 1;
}
.scene-art[data-locked="true"] .scene-artifact::before { content: "⌖"; }
.scene-kassandra {
  left: calc(50% - 8px);
  bottom: 25px;
  width: 16px;
  height: 42px;
  border-radius: 11px 11px 3px 3px;
  background: linear-gradient(180deg, #423735, #1f1d1d);
  opacity: .82;
}
.scene-kassandra::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  left: 1px;
  top: -12px;
  background: #2b2424;
}
.scene-heartline {
  width: 84px;
  height: 1px;
  left: calc(50% - 42px);
  bottom: 17px;
  background: linear-gradient(90deg, transparent, rgba(201,137,124,.72), transparent);
  opacity: .82;
}
.scene-art[data-chapter="tide"] .scene-ruin { opacity: .18; }
.scene-art[data-chapter="tide"] .scene-path { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(87,125,141,.40)); }
.scene-art[data-chapter="harbor"] .scene-artifact { background: rgba(196,148,79,.82); }
.scene-art[data-chapter="path"] .scene-path { width: 88px; transform: rotate(-6deg); }
.scene-art[data-chapter="light"] .scene-ray { opacity: .78; }
.scene-art[data-chapter="hands"] .scene-heartline { height: 2px; }
@keyframes softPulse {
  from { opacity: .72; transform: scale(.98); }
  to { opacity: .96; transform: scale(1.03); }
}
@keyframes artifactFloat {
  from { opacity: .74; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(-3px); }
}
.scene-copy {
  position: relative;
  padding: 16px; border-radius: 8px; background: rgba(255,250,242,.72); backdrop-filter: blur(18px);
  border: 1px solid var(--hairline); min-height: 0;
  max-height: none;
  overflow: auto;
  box-shadow: var(--soft-shadow);
  animation: panelIn 640ms ease both;
}
.scene-copy::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .8;
}
.speaker { margin: 0 0 6px; color: var(--bronze); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.scene-copy h2 { margin: 0 0 10px; font-family: Georgia, serif; font-size: 28px; line-height: 1.04; letter-spacing: 0; }
.scene-copy p:last-child { margin: 0; line-height: 1.45; font-size: 15px; color: #303737; white-space: pre-line; }
.choices {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.choice {
  position: relative;
  min-height: 49px; border-radius: 8px; padding: 11px 13px 11px 42px; text-align: left; line-height: 1.2;
  background: rgba(255,250,242,.76); border: 1px solid rgba(196,148,79,.16); box-shadow: none;
  animation: choiceIn 560ms ease both;
  transition: transform 520ms ease, opacity 520ms ease;
}
.choice > svg {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--gold);
  stroke-width: 2.5;
}
.choice:nth-child(2) { animation-delay: .04s; }
.choice:nth-child(3) { animation-delay: .08s; }
.choice:hover { opacity: .88; }
.choice strong { display: block; font-size: 14px; }
.choice span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.puzzle-hint[hidden] { display: none; }
.puzzle-hint {
  border-color: rgba(201, 152, 57, .34);
  background: rgba(255, 250, 242, .94);
}
.finale-card {
  padding: 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,250,242,.96), rgba(242,234,219,.94));
  border: 1px solid rgba(201, 152, 57, .32);
  box-shadow: var(--soft-shadow);
}
.finale-card h3 {
  margin: 0 0 6px;
  font-family: Georgia, serif;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0;
}
.finale-card p {
  margin: 0;
  color: #303737;
  font-size: 14px;
  line-height: 1.42;
}
.final-mission-choice {
  min-height: 78px;
  border-color: rgba(126,67,84,.38);
  background: linear-gradient(135deg, rgba(255,250,242,.92), rgba(247,230,212,.88));
}
.final-mission-choice strong { font-size: 16px; }
.tabs {
  position: absolute; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 3;
  height: 66px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 7px;
  border-radius: 8px; background: rgba(255,250,242,.74); backdrop-filter: blur(18px); box-shadow: var(--soft-shadow);
  border: 1px solid rgba(255,255,255,.58);
}
.tabs button {
  border-radius: 7px;
  background: transparent;
  color: #424949;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
  gap: 2px;
  transition: transform 520ms ease, opacity 520ms ease;
}
.tabs button svg { width: 19px; height: 19px; stroke-width: 2.2; }
.tabs button:hover { opacity: .72; }
.tabs button:active, .choice:active, .icon-btn:active, .primary:active, .ghost:active { transform: translateY(1px); }
.drawer {
  position: absolute; inset: 0; display: none; align-items: end; background: rgba(30,36,37,.28); padding: 12px;
  z-index: 40;
}
.drawer.open { display: flex; }
.drawer-card {
  width: 100%; max-height: min(78dvh, 680px); min-height: 360px; overflow: hidden;
  border-radius: 8px; background: rgba(250,248,242,.94); backdrop-filter: blur(18px); box-shadow: var(--soft-shadow);
  display: flex; flex-direction: column;
  animation: drawerIn 520ms ease both;
}
.drawer-head { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px 18px; }
.drawer-head h2 { margin: 0; font-family: Georgia, serif; letter-spacing: 0; }
.drawer-body { flex: 1; overflow: auto; padding: 0 16px 16px; }
.list { display: grid; gap: 10px; }
.item { padding: 12px; border-radius: 8px; background: white; border: 1px solid rgba(30,36,37,.08); }
.item h3 { margin: 0 0 5px; font-size: 15px; }
.item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.pill { border-radius: 999px; background: #f2eadb; color: var(--bronze); padding: 5px 9px; font-size: 12px; font-weight: 800; }
.skill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.skill { min-height: 78px; text-align: left; border-radius: 8px; padding: 10px; background: white; border: 1px solid rgba(30,36,37,.08); }
.skill.active { border-color: rgba(184,141,74,.72); }
.mapbox { height: 310px; border-radius: 8px; overflow: hidden; position: relative; background: linear-gradient(145deg, #bfe2df, #e7cf91); z-index: 1; }
.mapbox .leaflet-control-attribution { font-size: 9px; }
.map-actions { display: grid; gap: 8px; }
.qrbox video { width: 100%; max-height: 280px; border-radius: 8px; background: #111; }
.qrbox canvas { display: none; }
.field { width: 100%; min-height: 46px; border-radius: 8px; border: 1px solid rgba(30,36,37,.14); padding: 0 12px; background: white; font: inherit; }
.toast {
  position: absolute; left: 18px; right: 18px; bottom: calc(86px + env(safe-area-inset-bottom));
  padding: 12px 14px; border-radius: 8px; background: rgba(30,36,37,.92); color: white;
  transform: translateY(24px); opacity: 0; pointer-events: none; transition: transform 520ms ease, opacity 520ms ease;
  z-index: 60;
}
.toast.show { transform: translateY(0); opacity: 1; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes choiceIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes drawerIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}
@media (min-width: 760px) {
  .shell { max-width: 430px; max-height: 932px; margin: auto; top: 50%; transform: translateY(-50%); border-radius: 22px; box-shadow: 0 16px 40px rgba(0,0,0,.14); }
  body { display: grid; place-items: center; background: #d8dedb; }
}