:root {
  color-scheme: dark;
  --ink: #f8f7ff;
  --muted: #b8b2cf;
  --panel: rgba(255,255,255,.075);
  --panel-strong: rgba(255,255,255,.12);
  --stroke: rgba(255,255,255,.11);
  --purple: #7b5cff;
  --blue: #28a9ff;
  --gold: #ffc552;
  --green: #5de0b5;
  --danger: #ff6b86;
  font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  color: var(--ink);
  background: radial-gradient(circle at 100% 0%, #30206c 0, transparent 38%), linear-gradient(145deg,#080b1d,#17102f 60%,#0c1731);
  overflow-x: hidden;
}
button, input { font: inherit; }
button { cursor: pointer; }
.aurora { position: fixed; filter: blur(80px); opacity: .18; pointer-events: none; border-radius: 50%; }
.aurora-one { width: 340px; height: 340px; background: var(--purple); left: -170px; bottom: 10%; }
.aurora-two { width: 290px; height: 290px; background: var(--blue); right: -160px; top: 34%; }
#app { position: relative; width: min(100%, 760px); margin: auto; min-height: 100svh; padding: max(20px,env(safe-area-inset-top)) 20px max(28px,env(safe-area-inset-bottom)); }
.screen { animation: arrive .34s ease both; }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } }
h1,h2,h3,p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(2.1rem,9vw,3.2rem); line-height: .98; letter-spacing: -.05em; }
h2 { margin-bottom: 6px; font-size: 1.7rem; letter-spacing: -.03em; }
h3 { margin-bottom: 7px; font-size: 1.25rem; }
.eyebrow { color: var(--gold); font-size: .73rem; font-weight: 900; letter-spacing: .15em; margin-bottom: 8px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.hero { padding: 48px 6px 20px; text-align: center; }
.brand-mark { display: grid; place-items: center; width: 98px; height: 98px; margin: 0 auto 22px; border-radius: 29px; font-size: 48px; background: linear-gradient(145deg,var(--purple),#4e2fb7); box-shadow: 0 20px 55px #6f52ff4d, inset 0 1px #ffffff55; transform: rotate(-5deg); }
.hero .muted { font-size: 1.08rem; }
.panel { padding: 20px; border: 1px solid var(--stroke); border-radius: 24px; background: var(--panel); box-shadow: 0 20px 50px #00000020; backdrop-filter: blur(16px); }
.benefits { display: grid; gap: 15px; margin: 16px 0 22px; }
.benefit { display: grid; grid-template-columns: 38px 1fr; gap: 11px; align-items: center; font-weight: 700; }
.benefit-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #ffc5521b; }
label { display: grid; gap: 8px; margin: 16px 0; color: var(--muted); font-size: .86rem; font-weight: 800; }
input[type="text"],input:not([type]) { width: 100%; border: 1px solid var(--stroke); border-radius: 15px; padding: 15px; color: var(--ink); background: #07091666; outline: none; }
input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px #7b5cff25; }
input[type="range"] { accent-color: var(--purple); width: 100%; }
.primary,.secondary,.option-button { width: 100%; border: 0; border-radius: 17px; padding: 15px 18px; color: white; font-weight: 900; }
.primary { background: linear-gradient(135deg,var(--purple),#6542df); box-shadow: 0 12px 30px #6744e748; }
.primary:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.secondary { background: var(--panel-strong); border: 1px solid var(--stroke); }
.button-row { display: grid; gap: 12px; margin-top: 18px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 7px 0 24px; }
.topbar h2 { margin: 0; }
.score-pill { white-space: nowrap; padding: 10px 14px; border-radius: 99px; color: var(--gold); font-weight: 900; background: var(--panel); border: 1px solid var(--stroke); }
.icon-button { border: 0; background: var(--panel-strong); color: var(--muted); width: 40px; height: 40px; border-radius: 50%; }
.crew-list { display: flex; gap: 13px; margin: 12px 0 24px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
.crew-list::-webkit-scrollbar { display: none; }
.crew-person { min-width: 70px; text-align: center; }
.avatar { display: grid; place-items: center; width: 64px; height: 64px; margin: auto; border-radius: 50%; background: var(--panel); border: 1px solid var(--stroke); font-size: 2.2rem; }
.crew-person small { display: block; margin-top: 6px; max-width: 76px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
.mission-art { position: relative; display: grid; place-items: center; height: 210px; margin-bottom: 20px; border-radius: 20px; overflow: hidden; font-size: 5rem; background: linear-gradient(145deg,#2caaff,#7652ee 65%,#ff7eaa); }
.mission-art::before,.mission-art::after { content:""; position:absolute; border-radius:50%; background:#ffffff22; }
.mission-art::before { width:160px;height:160px;left:-40px;top:-60px; }
.mission-art::after { width:210px;height:210px;right:-70px;bottom:-120px; }
.mission-art span { z-index: 1; filter: drop-shadow(0 15px 12px #15205555); }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin: 12px 0 18px; }
.tag { padding: 7px 10px; border-radius: 99px; color: var(--muted); font-size: .78rem; font-weight: 800; background: var(--panel); }
.match { display:flex; gap:9px; align-items:center; color:var(--gold); font-weight:800; font-size:.9rem; margin-bottom:18px; }
.crew-card { display:flex; align-items:center; gap:13px; margin-bottom:11px; }
.crew-card .avatar { margin:0; width:55px; height:55px; font-size:1.8rem; flex:0 0 auto; }
.crew-card p { margin:2px 0 0; }
.remove { margin-left:auto; border:0; color:var(--danger); background:transparent; font-size:1.1rem; }
.dialog { width:min(calc(100% - 24px),560px); max-height:90svh; padding:0; color:var(--ink); border:1px solid var(--stroke); border-radius:25px; background:#14102b; box-shadow:0 30px 100px #000a; }
.dialog::backdrop { background:#030411bb; backdrop-filter:blur(7px); }
.dialog form { padding:22px; overflow-y:auto; max-height:90svh; }
.dialog-head { display:flex; justify-content:space-between; align-items:start; }
.dialog-head h2 { margin:0; }
fieldset { border:0; padding:0; margin:20px 0; }
legend { color:var(--muted); font-size:.86rem; font-weight:800; margin-bottom:10px; }
.choice-grid { display:flex; flex-wrap:wrap; gap:8px; }
.choice { padding:9px 12px; border:1px solid var(--stroke); border-radius:12px; background:var(--panel); color:var(--ink); }
.choice.selected { border-color:var(--gold); color:var(--gold); background:#ffc55214; }
.avatar-grid .choice { font-size:1.55rem; padding:7px 11px; }
.mission-header { position:sticky; top:max(0px,env(safe-area-inset-top)); z-index:5; margin:-20px -20px 20px; padding:18px 20px 13px; background:#100d27dc; backdrop-filter:blur(18px); }
.mission-header-row { display:grid; grid-template-columns:40px 1fr 64px; align-items:center; gap:10px; text-align:center; }
.mission-header h3 { margin:0; font-size:.94rem; }
.progress { height:6px; margin-top:12px; border-radius:99px; overflow:hidden; background:#ffffff16; }
.progress span { display:block; height:100%; background:linear-gradient(90deg,var(--gold),#ff9652); transition:width .35s ease; }
.challenge-icon { display:grid; place-items:center; width:105px; height:105px; margin:30px auto 18px; border:1px solid var(--stroke); border-radius:50%; font-size:2.8rem; background:var(--panel); box-shadow:0 0 45px #ffc55216; }
.story { font-size:1.08rem; line-height:1.6; }
.prompt { font-size:1.08rem; font-weight:850; text-align:center; margin:23px 5px; }
.leader { display:flex; width:max-content; max-width:100%; align-items:center; gap:10px; margin:0 auto 22px; padding:9px 14px; border-radius:99px; background:#ffc55216; }
.leader span { font-size:1.55rem; }
.leader p { margin:0; font-size:.8rem; font-weight:800; }
.leader small { color:var(--muted); }
.options { display:grid; gap:10px; }
.option-button { display:flex; justify-content:space-between; text-align:left; background:var(--panel); border:1px solid var(--stroke); }
.option-button.selected { background:#7554ed70; border-color:#a68eff; }
.feedback { min-height:25px; margin:10px 0; text-align:center; color:var(--green); font-weight:800; }
.complete { text-align:center; padding-top:30px; }
.trophy { font-size:6rem; filter:drop-shadow(0 15px 25px #ffc55255); animation:float 2.1s ease-in-out infinite; }
@keyframes float { 50% { transform:translateY(-10px) rotate(3deg); } }
.reward { display:flex; align-items:center; justify-content:space-between; text-align:left; margin:25px 0; }
.reward strong:last-child { color:var(--gold); font-size:1.35rem; }
.privacy { margin-top:16px; color:var(--muted); font-size:.75rem; text-align:center; }
.toast { position:fixed; z-index:20; left:50%; bottom:calc(25px + env(safe-area-inset-bottom)); transform:translateX(-50%); padding:12px 18px; border-radius:99px; color:#090d20; background:var(--green); font-weight:900; box-shadow:0 12px 35px #0008; animation:toast 2.6s ease both; pointer-events:none; }
@keyframes toast { 0%,100%{opacity:0;transform:translate(-50%,12px)} 12%,85%{opacity:1;transform:translate(-50%,0)} }
@media (min-width:620px) {
  #app { padding-left:32px; padding-right:32px; }
  .benefits { grid-template-columns:repeat(3,1fr); }
  .benefit { grid-template-columns:1fr; text-align:center; }
  .benefit-icon { margin:auto; }
  .button-row.two { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }