:root {
  --ink: #f5f1e8;
  --muted: #a9b5c3;
  --night: #07111e;
  --night-soft: #0d1d2c;
  --panel: #112536;
  --panel-light: #183348;
  --line: rgba(174, 207, 224, 0.18);
  --cyan: #6de5ea;
  --cyan-bright: #b6ffff;
  --gold: #e9bb67;
  --gold-light: #ffe0a0;
  --success: #78dfa5;
  --danger: #ffb292;
  --radius: 22px;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
  font-family: "Avenir Next", "Trebuchet MS", Arial, sans-serif;
  color: var(--ink);
  background: var(--night);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  background: var(--night);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 20% -10%, rgba(53, 133, 157, 0.18), transparent 36rem),
    linear-gradient(180deg, #07111e 0%, #091827 60%, #06101b 100%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

button { font: inherit; }
button:focus-visible { outline: 3px solid var(--cyan-bright); outline-offset: 3px; }
button:disabled { opacity: 0.45; }
[hidden] { display: none !important; }

.ambient {
  position: fixed;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  filter: blur(65px);
  opacity: 0.18;
  pointer-events: none;
}
.ambient-one { top: 18%; left: -7rem; background: var(--cyan); }
.ambient-two { right: -8rem; bottom: 7%; background: var(--gold); }

.cover {
  position: relative;
  z-index: 2;
  min-height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-width: 34rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cover-compass {
  position: relative;
  width: min(58vw, 15rem);
  aspect-ratio: 1;
  margin-bottom: 2rem;
  border: 2px solid rgba(233, 187, 103, 0.72);
  border-radius: 50%;
  box-shadow: inset 0 0 0 10px rgba(233, 187, 103, 0.06), inset 0 0 40px rgba(109, 229, 234, 0.13), 0 0 55px rgba(109, 229, 234, 0.16);
  background: repeating-conic-gradient(from 5deg, rgba(233,187,103,.32) 0deg 1deg, transparent 1deg 45deg), radial-gradient(circle, #153049 0 36%, #0c1d2c 37% 62%, #07111e 63%);
}
.cover-compass::before,
.cover-compass::after {
  content: "";
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(109, 229, 234, 0.35);
  border-radius: 50%;
}
.cover-compass::after { inset: 30%; border-color: rgba(233, 187, 103, 0.36); }
.cover-needle {
  position: absolute;
  z-index: 2;
  top: 17%;
  left: calc(50% - 7px);
  width: 14px;
  height: 43%;
  background: linear-gradient(90deg, #d5a24b, #ffe4a7 50%, #a2712d 51%);
  clip-path: polygon(50% 0, 100% 100%, 50% 82%, 0 100%);
  transform-origin: 50% 78%;
  transform: rotate(24deg);
  filter: drop-shadow(0 0 8px rgba(233,187,103,.65));
  animation: needle-seek 3.6s ease-in-out infinite;
}
.cover-gem {
  position: absolute;
  z-index: 3;
  left: calc(50% - 11px);
  top: calc(50% - 11px);
  width: 22px;
  height: 22px;
  border: 3px solid var(--gold);
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 20px rgba(109,229,234,.75);
}
.cover-kicker,
.eyebrow,
.scene-label,
.action-kicker,
.completion-kicker,
.success-kicker {
  margin: 0;
  color: var(--gold-light);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cover h1 {
  margin: .65rem 0 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 11vw, 4.2rem);
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.cover h1 span { color: var(--cyan-bright); }
.cover-copy {
  max-width: 24rem;
  margin: 0 0 1.8rem;
  color: #c2d0dc;
  font-size: 1.08rem;
  line-height: 1.55;
}
.cover-note { margin: .85rem 0 0; color: #8192a2; font-size: .78rem; }

.primary-button,
.secondary-button {
  width: 100%;
  min-height: 54px;
  border-radius: 16px;
  border: 0;
  padding: .9rem 1.2rem;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease, filter .16s ease;
}
.primary-button {
  color: #07131e;
  background: var(--gold-light);
  box-shadow: 0 10px 26px rgba(223, 168, 73, .22);
}
.secondary-button {
  color: var(--ink);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line);
}
.primary-button:active,
.secondary-button:active,
.choice-button:active,
.order-item:active { transform: scale(.98); }
.cover-button { max-width: 25rem; }

.app-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 34rem);
  min-height: 100svh;
  margin: 0 auto;
  padding: .9rem 1rem 3rem;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .55rem 0 1rem;
}
.mission-label { margin: .3rem 0 0; color: var(--muted); font-size: .82rem; }
.inventory-button {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .45rem .7rem;
  color: var(--ink);
  background: rgba(17,37,54,.86);
  cursor: pointer;
}
.inventory-icon { color: var(--gold); font-size: 1.1rem; }
.inventory-count {
  min-width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #07131e;
  background: var(--gold-light);
  font-size: .7rem;
  font-weight: 900;
}

.progress-track {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: start;
  padding: 0 .25rem 1rem;
}
.progress-step { display: grid; justify-items: center; gap: .28rem; color: #6f8292; }
.progress-step i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #5c7081;
  background: var(--night);
  transition: all .25s ease;
}
.progress-step b { font-size: .64rem; font-weight: 700; }
.progress-line { height: 1px; margin-top: 6px; background: #3c5262; }
.progress-step.active { color: var(--cyan-bright); }
.progress-step.active i { border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 13px rgba(109,229,234,.65); }
.progress-step.complete { color: var(--gold-light); }
.progress-step.complete i { border-color: var(--gold); background: var(--gold); }

.scene-art {
  position: relative;
  height: 13.5rem;
  overflow: hidden;
  border: 1px solid rgba(170,204,222,.2);
  border-radius: 28px 28px 10px 10px;
  background: #10273a;
  box-shadow: var(--shadow);
  isolation: isolate;
}
.scene-art::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(transparent, rgba(4,12,20,.65));
  pointer-events: none;
}
.art-mist { position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 40%, rgba(109,229,234,.2), transparent 45%); }
.art-floor { position: absolute; left: -10%; right: -10%; bottom: -28%; height: 55%; border-radius: 50%; background: #0a1824; transform: perspective(180px) rotateX(55deg); }
.art-door { position: absolute; left: 9%; bottom: 12%; width: 35%; height: 79%; border: 8px solid #1b3749; border-bottom: 0; background: linear-gradient(90deg,#0a1926,#183247 45%,#0c1c29); box-shadow: inset -8px 0 rgba(0,0,0,.2); }
.art-door::after { content:""; position:absolute; right:12%; top:50%; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 9px var(--gold); }
.art-box { position: absolute; z-index: 2; left: 28%; bottom: 17%; width: 35%; height: 24%; border-radius: 5px; background: linear-gradient(145deg,#295e84,#123a5a); border: 2px solid #4e8bb1; transform: skewY(-5deg); box-shadow: 0 16px 28px rgba(0,0,0,.45); }
.art-box::before { content:""; position:absolute; left:47%; top:0; width:8%; height:100%; background:rgba(233,187,103,.62); }
.art-firefly { position: absolute; z-index: 3; right: 15%; top: 23%; width: 31px; height: 42px; border-radius: 45% 45% 55% 55%; background: #8fd9a5; border: 4px solid #18383b; box-shadow: 0 0 28px rgba(120,223,165,.72); transform: rotate(12deg); animation: firefly-float 2.2s ease-in-out infinite; }
.art-firefly::before,.art-firefly::after { content:""; position:absolute; top:7px; width:23px; height:15px; border:1px solid rgba(182,255,255,.7); background:rgba(109,229,234,.13); }
.art-firefly::before { right:22px; border-radius:100% 20%; transform:rotate(-22deg); }
.art-firefly::after { left:22px; border-radius:20% 100%; transform:rotate(22deg); }
.art-compass-small { position:absolute; z-index:3; right:28%; bottom:17%; width:52px; height:52px; border-radius:50%; border:4px solid var(--gold); background:radial-gradient(circle,#5bc2c8 0 8%,#16364a 9% 55%,#0b1d2c 56%); box-shadow:0 0 22px rgba(109,229,234,.26); }
.art-compass-small::after { content:""; position:absolute; left:23px; top:7px; width:3px; height:34px; background:var(--gold-light); transform:rotate(24deg); }

.scene-art.scene-1 { background: radial-gradient(circle at 50% 48%, #183c51, #0a1724 68%); }
.art-compass-large { position:absolute; left:50%; top:50%; width:177px; height:177px; border:5px solid var(--gold); border-radius:50%; transform:translate(-50%,-47%); background:repeating-conic-gradient(rgba(233,187,103,.55) 0 1deg,transparent 1deg 51.42deg),radial-gradient(circle,#63d7dc 0 5%,#193c51 6% 48%,#0a1b28 49%); box-shadow:inset 0 0 30px rgba(109,229,234,.15),0 0 45px rgba(109,229,234,.2); }
.art-compass-large::before { content:""; position:absolute; left:82px; top:20px; width:8px; height:118px; background:linear-gradient(var(--gold-light) 0 50%,#46828d 50%); clip-path:polygon(50% 0,100% 50%,65% 50%,65% 100%,35% 100%,35% 50%,0 50%); transform:rotate(-28deg); }
.art-crack { position:absolute; z-index:2; left:calc(50% - 5px); top:9px; width:10px; height:35px; border-left:2px solid var(--cyan-bright); transform:rotate(13deg); filter:drop-shadow(0 0 5px var(--cyan)); }
.art-crack::after { content:""; position:absolute; left:-1px; top:15px; width:12px; height:2px; background:var(--cyan-bright); transform:rotate(-45deg); }
.art-schema { position:absolute; right:5%; top:12%; width:68px; height:90px; border:1px solid rgba(233,187,103,.35); transform:rotate(8deg); background:rgba(233,187,103,.07); }
.art-schema::before { content:""; position:absolute; left:17px; top:24px; width:33px; height:33px; border:1px dashed var(--gold); border-radius:50%; }

.scene-art.scene-2 { background: linear-gradient(180deg,#112e45 0 54%,#081523 55%); }
.art-window { position:absolute; left:8%; top:8%; width:84%; height:78%; overflow:hidden; border:8px solid #1d4054; border-radius:70px 70px 8px 8px; background:linear-gradient(#153a59,#316b80 58%,#0c2230 59%); box-shadow:inset 0 0 32px rgba(0,0,0,.5); }
.art-window::after { content:""; position:absolute; left:50%; top:0; bottom:0; width:4px; background:#1d4054; }
.art-island { position:absolute; left:36%; bottom:6%; width:34%; height:17%; border-radius:50% 50% 15% 15%; background:#07141c; }
.art-lighthouse { position:absolute; z-index:2; left:51%; bottom:17%; width:18px; height:73px; background:linear-gradient(90deg,#c3b27f,#f1dca6 50%,#8d7c57); clip-path:polygon(28% 0,72% 0,100% 100%,0 100%); }
.art-lighthouse::before { content:""; position:absolute; left:-5px; top:-12px; width:28px; height:14px; border-radius:4px 4px 1px 1px; background:var(--gold-light); box-shadow:0 0 18px var(--gold-light); }
.art-beam { position:absolute; z-index:1; left:52%; bottom:76%; width:62%; height:25px; transform-origin:left center; transform:rotate(-11deg); background:linear-gradient(90deg,rgba(255,224,160,.55),transparent); clip-path:polygon(0 38%,100% 0,100% 100%,0 62%); animation: beam-sweep 4s ease-in-out infinite; }
.art-route { position:absolute; z-index:3; left:10%; right:10%; bottom:8%; height:3px; background:linear-gradient(90deg,transparent,var(--cyan),var(--gold)); box-shadow:0 0 11px var(--cyan); }
.art-route::after { content:""; position:absolute; right:0; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--gold-light); box-shadow:0 0 14px var(--gold); }

.story-card,
.action-card,
.completion-card {
  position: relative;
  margin-top: -.55rem;
  padding: 1.35rem 1.1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 10px 10px var(--radius) var(--radius);
  background: rgba(13,29,44,.97);
  box-shadow: var(--shadow);
}
.story-heading { padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.story-heading h2,
.action-card h2,
.completion-card h2,
.inventory-header h2,
.success-dialog h2 {
  margin: .35rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 7vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.story-text { margin: 1rem 0 1.2rem; padding-left: 1.45rem; }
.story-text li { padding-left: .35rem; margin: 0 0 .8rem; color:#edf1f2; font-size:1.04rem; line-height:1.58; }
.story-text li::marker { color: var(--gold); font-weight: 800; }

.action-card { margin-top: 1rem; border-radius: var(--radius); background:#10283b; }
.action-card h2 { color: var(--cyan-bright); }
.action-prompt { margin:.75rem 0 1rem; color:#c3d0d9; line-height:1.5; }
.choice-list { display:grid; gap:.65rem; }
.choice-button,
.order-item {
  width:100%;
  min-height:54px;
  border:1px solid rgba(174,207,224,.22);
  border-radius:15px;
  padding:.85rem 1rem;
  color:var(--ink);
  background:#17364a;
  text-align:left;
  font-weight:750;
  cursor:pointer;
  transition:transform .14s ease,border-color .14s ease,background .14s ease;
}
.choice-button:hover,.order-item:hover { border-color:rgba(109,229,234,.65); }
.feedback { margin-top:.9rem; padding:.8rem .9rem; border-radius:12px; color:#3a1d0f; background:var(--danger); font-size:.9rem; line-height:1.42; font-weight:700; }
.feedback.discovery { color:#082d32; background:#86e6df; box-shadow:0 0 18px rgba(109,229,234,.16); }

.gesture-note { margin:.25rem 0 0; color:#b5c8d2; font-size:.86rem; line-height:1.4; text-align:center; }
.parcel-stage { display:grid; justify-items:center; gap:.8rem; min-height:13rem; padding:.5rem 0 .2rem; }
.parcel-box { position:relative; width:9.8rem; height:7.1rem; border:0; background:transparent; cursor:pointer; filter:drop-shadow(0 18px 18px rgba(0,0,0,.35)); }
.parcel-box:disabled { opacity:1; cursor:default; }
.parcel-lid,.parcel-body,.parcel-glow { position:absolute; left:0; width:100%; pointer-events:none; }
.parcel-lid { z-index:3; top:.45rem; height:2.25rem; border:2px solid #66a9d1; border-radius:9px 9px 4px 4px; background:linear-gradient(145deg,#3a7da7,#174d72); transform-origin:12% 90%; }
.parcel-lid::after { content:""; position:absolute; left:46%; top:0; width:8%; height:100%; background:rgba(233,187,103,.72); }
.parcel-body { z-index:2; bottom:.35rem; height:4.9rem; border:2px solid #4f92bb; border-radius:5px 5px 12px 12px; background:linear-gradient(145deg,#245f87,#123b5c); }
.parcel-body::after { content:""; position:absolute; left:46%; inset-block:0; width:8%; background:rgba(233,187,103,.56); }
.parcel-glow { z-index:1; inset:18% -18% -15%; width:auto; border-radius:50%; opacity:0; background:radial-gradient(circle,rgba(109,229,234,.62),transparent 66%); }
.parcel-stage.opened .parcel-lid { animation:parcel-open .55s cubic-bezier(.2,.85,.25,1) both; }
.parcel-stage.opened .parcel-glow { animation:parcel-glow .8s ease-out both; }
.parcel-items { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
.parcel-item { min-height:74px; display:grid; place-items:center; gap:.15rem; border:1px solid rgba(109,229,234,.35); border-radius:15px; color:var(--ink); background:linear-gradient(155deg,#183c52,#102b40); cursor:pointer; animation:item-rise .42s ease-out both; }
.parcel-item:nth-child(2) { animation-delay:.06s; }
.parcel-item:nth-child(3) { animation-delay:.12s; }
.parcel-item:nth-child(4) { animation-delay:.18s; }
.parcel-item:active { transform:scale(.97); }
.parcel-symbol { color:var(--gold-light); font-size:1.65rem; line-height:1; }
.parcel-item small { font-weight:800; }
.parcel-firefly { border-color:rgba(143,217,165,.5); box-shadow:inset 0 0 22px rgba(120,223,165,.08); }

.scan-stage { position:relative; min-height:24rem; padding:2.4rem .2rem 2.8rem; overflow:hidden; border:1px solid rgba(109,229,234,.12); border-radius:22px; background:radial-gradient(circle at 50% 42%,rgba(109,229,234,.08),transparent 58%); }
.scan-compass { margin:.5rem auto 0; }
.scan-crack { position:absolute; z-index:4; left:calc(50% - 4px); top:-5%; width:12px; height:26%; opacity:0; border-left:3px solid var(--cyan-bright); transform:rotate(17deg); filter:drop-shadow(0 0 8px var(--cyan-bright)); pointer-events:none; }
.scan-crack::after { content:""; position:absolute; left:-2px; top:48%; width:14px; height:3px; background:var(--cyan-bright); transform:rotate(-42deg); }
.scan-stage.revealed .scan-crack { opacity:1; animation:crack-flash 1s ease-out; }
.hotspot-cell.hidden-cell { opacity:.16; border-style:dashed; color:transparent; box-shadow:none; }
.scan-stage.revealed .hotspot-cell[data-cell="7"] { animation:cell-reveal .7s ease-out; }
.scan-orb { position:absolute; z-index:7; left:14%; top:79%; width:54px; height:54px; display:grid; place-items:center; transform:translate(-50%,-50%); touch-action:none; border:2px solid #c2ffd4; border-radius:50%; color:#effff4; background:radial-gradient(circle,#d9ffe4 0 10%,#73d994 11% 35%,#183b3c 38%); box-shadow:0 0 13px #73d994,0 0 32px rgba(115,217,148,.68); font-size:1.25rem; cursor:grab; animation:orb-float 1.8s ease-in-out infinite; }
.scan-orb.dragging { cursor:grabbing; animation:none; transform:translate(-50%,-50%) scale(1.12); }
.scan-stage.revealed .scan-orb { box-shadow:0 0 18px #b8ffd0,0 0 44px rgba(109,229,234,.85); }
.scan-note { position:absolute; left:1rem; right:1rem; bottom:.65rem; }

.compass-control { position:relative; width:min(100%,19rem); aspect-ratio:1; margin:1.2rem auto .2rem; border:4px solid var(--gold); border-radius:50%; background:repeating-conic-gradient(rgba(233,187,103,.33) 0 1deg,transparent 1deg 51.42deg),radial-gradient(circle,#6de5ea 0 4%,#15394d 5% 52%,#0a1926 53%); box-shadow:inset 0 0 35px rgba(109,229,234,.13),0 0 26px rgba(109,229,234,.1); }
.compass-control::before { content:""; position:absolute; left:calc(50% - 4px); top:17%; width:8px; height:65%; background:linear-gradient(var(--gold-light) 0 50%,#3c7982 50%); clip-path:polygon(50% 0,100% 50%,68% 50%,68% 100%,32% 100%,32% 50%,0 50%); transform:rotate(18deg); pointer-events:none; }
.hotspot-cell { position:absolute; width:46px; height:46px; border-radius:50%; border:2px solid rgba(182,255,255,.35); background:rgba(8,25,38,.78); color:#cbe5e9; font-weight:900; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.hotspot-cell[data-cell="1"] { left:42%; top:8%; }
.hotspot-cell[data-cell="2"] { right:11%; top:22%; }
.hotspot-cell[data-cell="3"] { right:9%; bottom:24%; }
.hotspot-cell[data-cell="4"] { left:42%; bottom:5%; }
.hotspot-cell[data-cell="5"] { left:9%; bottom:24%; }
.hotspot-cell[data-cell="6"] { left:11%; top:22%; }
.hotspot-cell[data-cell="7"] { left:42%; top:-10%; border-color:var(--cyan-bright); color:var(--cyan-bright); box-shadow:0 0 18px rgba(109,229,234,.4); }
.hotspot-cell[data-cell="7"]::after { content:""; position:absolute; left:20px; top:5px; width:11px; height:29px; border-left:2px solid var(--cyan-bright); transform:rotate(18deg); }

.order-selection { min-height:82px; display:flex; align-items:center; gap:.45rem; margin:.6rem 0 1rem; padding:.65rem; border:2px dashed rgba(109,229,234,.38); border-radius:16px; background:rgba(109,229,234,.035); transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.order-selection.drop-ready { border-color:var(--cyan-bright); background:rgba(109,229,234,.11); box-shadow:inset 0 0 24px rgba(109,229,234,.14),0 0 18px rgba(109,229,234,.14); }
.order-placeholder { color:#a0b4c0; font-size:.86rem; padding-left:.35rem; }
.order-chip { flex:1; min-width:0; display:grid; justify-items:center; gap:.15rem; padding:.45rem .25rem; border-radius:10px; color:var(--gold-light); background:rgba(233,187,103,.11); font-size:.72rem; font-weight:800; animation:item-rise .28s ease-out; }
.order-chip span { font-size:1.15rem; }
.order-arrow { color:#7790a0; }
.order-items { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; overflow:visible; }
.order-item { position:relative; z-index:1; min-height:82px; padding:.55rem .25rem; display:grid; place-items:center; text-align:center; touch-action:none; user-select:none; -webkit-user-select:none; }
.order-item span { display:block; color:var(--gold-light); font-size:1.45rem; }
.order-item small { font-weight:800; font-size:.76rem; }
.order-item.selected { opacity:.35; pointer-events:none; }
.order-item.dragging { z-index:12; transition:none; border-color:var(--cyan-bright); box-shadow:0 16px 30px rgba(0,0,0,.48),0 0 20px rgba(109,229,234,.28); }
.reset-order { margin:.7rem 0 0; min-height:44px; border:0; color:#b2c3cd; background:transparent; text-decoration:underline; cursor:pointer; }

.completion-card { margin-top:.5rem; border-radius:var(--radius); text-align:center; background:linear-gradient(180deg,#133148,#0c1e2e); }
.completion-kicker { color:var(--success); }
.portal-seal { width:8.2rem; aspect-ratio:1; margin:1.3rem auto; display:grid; place-items:center; border:3px solid var(--cyan); border-radius:50%; box-shadow:inset 0 0 25px rgba(109,229,234,.2),0 0 35px rgba(109,229,234,.24); animation:portal-pulse 2.8s ease-in-out infinite; }
.portal-seal span { width:52%; height:52%; border:2px solid var(--gold); border-radius:45% 55% 50% 50%; transform:rotate(45deg); background:rgba(233,187,103,.12); }
.completion-copy { color:#c9d7df; line-height:1.5; }
.reward-list { display:grid; gap:.55rem; padding:0; margin:1rem 0; list-style:none; text-align:left; }
.reward-list li { padding:.75rem .85rem; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.04); }
.reward-list li::before { content:"✦"; margin-right:.65rem; color:var(--gold); }
.completion-card blockquote { margin:1.25rem 0; padding:1rem; border-top:1px solid rgba(109,229,234,.35); border-bottom:1px solid rgba(109,229,234,.35); color:var(--cyan-bright); font-family:Georgia,"Times New Roman",serif; font-size:1.1rem; line-height:1.45; }

.inventory-panel { position:fixed; z-index:20; left:50%; bottom:0; width:min(100%,34rem); max-height:82svh; overflow:auto; transform:translateX(-50%); padding:1.2rem 1rem calc(1.2rem + env(safe-area-inset-bottom)); border:1px solid var(--line); border-bottom:0; border-radius:25px 25px 0 0; background:#0d2131; box-shadow:0 -20px 60px rgba(0,0,0,.5); }
.inventory-header { display:flex; justify-content:space-between; align-items:start; }
.close-button { width:46px; height:46px; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:rgba(255,255,255,.06); font-size:1.7rem; cursor:pointer; }
.inventory-slots { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin:1.2rem 0; }
.inventory-slot { min-height:105px; display:grid; place-items:center; align-content:center; gap:.35rem; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.035); text-align:center; }
.inventory-slot i { font-style:normal; color:var(--gold-light); font-size:1.65rem; }
.inventory-slot span { color:#9eb1be; font-size:.72rem; line-height:1.2; }
.inventory-slot.empty { border-style:dashed; opacity:.55; }
.crystal-panel { padding:.9rem; border-radius:16px; background:rgba(109,229,234,.05); }
.crystal-panel p { margin:0 0 .65rem; color:#a9c1cd; font-size:.82rem; }
.crystal-row { display:flex; justify-content:space-between; gap:.35rem; }
.crystal-row i { flex:1; max-width:30px; aspect-ratio:1; border:1px solid rgba(109,229,234,.35); transform:rotate(45deg); background:#091824; }
.inventory-scrim { position:fixed; z-index:19; inset:0; width:100%; border:0; background:rgba(1,7,12,.72); }

.success-overlay { position:fixed; z-index:30; inset:0; display:grid; place-items:center; padding:1.2rem; background:rgba(2,9,15,.82); }
.success-dialog { width:min(100%,29rem); padding:1.6rem 1.2rem 1.2rem; border:1px solid rgba(109,229,234,.35); border-radius:24px; background:#10283a; box-shadow:0 25px 70px rgba(0,0,0,.55); text-align:center; }
.success-spark { width:4.4rem; height:4.4rem; margin:0 auto .8rem; display:grid; place-items:center; border-radius:50%; color:var(--gold-light); background:rgba(233,187,103,.12); font-size:2rem; box-shadow:0 0 28px rgba(233,187,103,.18); }
.success-dialog p:not(.success-kicker) { color:#c5d3dc; line-height:1.5; }
.success-dialog .primary-button { margin-top:.65rem; }

@keyframes needle-seek { 0%,100%{transform:rotate(24deg)} 50%{transform:rotate(-16deg)} }
@keyframes firefly-float { 0%,100%{transform:translateY(0) rotate(12deg)} 50%{transform:translateY(-10px) rotate(6deg)} }
@keyframes beam-sweep { 0%,100%{transform:rotate(-13deg)} 50%{transform:rotate(4deg)} }
@keyframes portal-pulse { 0%,100%{transform:scale(1);opacity:.85} 50%{transform:scale(1.04);opacity:1} }
@keyframes parcel-open { 0%{transform:rotate(0) translate(0,0)} 100%{transform:rotate(-24deg) translate(-22px,-27px)} }
@keyframes parcel-glow { 0%{opacity:0;transform:scale(.65)} 55%{opacity:1} 100%{opacity:.42;transform:scale(1)} }
@keyframes item-rise { 0%{opacity:0;transform:translateY(12px) scale(.94)} 100%{opacity:1;transform:translateY(0) scale(1)} }
@keyframes orb-float { 0%,100%{margin-top:0} 50%{margin-top:-8px} }
@keyframes crack-flash { 0%{opacity:0;filter:drop-shadow(0 0 0 transparent)} 45%{opacity:1;filter:drop-shadow(0 0 17px #b8ffff)} 100%{opacity:1;filter:drop-shadow(0 0 8px var(--cyan-bright))} }
@keyframes cell-reveal { 0%{opacity:.15;transform:scale(.55)} 55%{opacity:1;transform:scale(1.2)} 100%{opacity:1;transform:scale(1)} }

@media (min-width: 560px) {
  .app-shell { padding-top:1.3rem; }
  .scene-art { height:16rem; }
  .story-card,.action-card,.completion-card { padding:1.55rem 1.45rem 1.4rem; }
  .story-text li { font-size:1.1rem; }
}

@media (max-width: 370px) {
  .app-shell { padding-left:.7rem; padding-right:.7rem; }
  .scene-art { height:11.8rem; }
  .story-card,.action-card,.completion-card { padding-left:.9rem; padding-right:.9rem; }
  .story-text li { font-size:.97rem; }
  .inventory-button span:nth-child(2) { display:none; }
}

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