/* EVE 2040 — mobile-first styles
   EVE Design System, Evening tokens over a full-bleed video (canvas "EVE 2040 Game Screens") */
:root{
  --canvas:#1E2B26; --surface:#27382F; --quiet:#34483C;
  --action:#A5D7C3; --on-action:#1E2B26; --focus:#B8DDD2;
  --text:#EFF3EB; --text-2:#B6C4B7; --control-border:#728B7C;
  --error-ink:#F0B5A9; --error-surface:#492F2C; --warning-ink:#EDD09B;
  --info-ink:#BDD7E6; --info-surface:#283D48;
  --glass:rgba(30,43,38,.74); --glass-pill:rgba(30,43,38,.66); --glass-line:rgba(239,243,235,.2);
  --r-control:10px; --r-surface:16px;
  --font:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#141E1A;color:var(--text);font-family:var(--font);overscroll-behavior:none}
body{display:flex;justify-content:center}
button,input{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.app{position:relative;width:100%;max-width:480px;height:100vh;height:100dvh;overflow:hidden;background:var(--canvas)}
@media (min-width:520px){.app{height:min(100dvh,940px);margin:auto 0;border-radius:var(--r-surface);align-self:center}}

.mark{display:block;flex:none;width:72px;height:42px;object-fit:contain}
.mark-lg{width:104px;height:61px}

/* ---------- Stage ---------- */
.stage{position:absolute;inset:0;z-index:0}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease,filter .6s ease}
.stage video.on{opacity:1}
.app.is-dead .stage video{filter:grayscale(.5)}
/* Start screen photo: a 2040 ecovillage with the old city far behind (Canva-generated) */
.hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:0;transition:opacity .6s ease}
.app[data-view="start"] .hero.loaded{opacity:1}

/* Missing video: a quiet card in the scene's mood, year in large type */
.fallback{position:absolute;inset:0;display:grid;place-items:center;background:var(--fb,var(--surface));transition:background-color .6s ease}
.fb-year{transform:translateY(-14%);font-weight:650;font-size:clamp(72px,26vw,120px);letter-spacing:-.035em;
  color:rgba(239,243,235,.16);font-variant-numeric:tabular-nums}
.fallback.enter .fb-year{animation:fade .6s ease both}
.fallback[data-mood="summit"],.fallback[data-mood="city"],.fallback[data-mood="couch"]{--fb:var(--canvas)}
.fallback[data-mood="water"],.fallback[data-mood="energy"]{--fb:var(--info-surface)}
.fallback[data-mood="danger"],.fallback[data-mood="drought"],.fallback[data-mood="fire"],.fallback[data-mood="death"]{--fb:var(--error-surface)}

/* Legibility shades, one per view, cross-faded */
.shade{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s ease}
.shade-start{background:linear-gradient(180deg,rgba(30,43,38,.45) 0%,rgba(30,43,38,0) 16%,rgba(30,43,38,0) 40%,rgba(30,43,38,.8) 62%,rgba(30,43,38,.96) 100%)}
.shade-video{background:linear-gradient(180deg,rgba(30,43,38,.6) 0%,rgba(30,43,38,0) 20%,rgba(30,43,38,0) 52%,rgba(30,43,38,.78) 74%,rgba(30,43,38,.94) 100%)}
.shade-choose{background:linear-gradient(180deg,rgba(30,43,38,.6) 0%,rgba(30,43,38,0) 20%,rgba(30,43,38,0) 34%,rgba(30,43,38,.82) 54%,rgba(30,43,38,.95) 100%)}
.app.has-stats .shade-choose{background:linear-gradient(180deg,rgba(30,43,38,.6) 0%,rgba(30,43,38,.1) 26%,rgba(30,43,38,0) 40%,rgba(30,43,38,.82) 58%,rgba(30,43,38,.95) 100%)}
.shade-outcome{background:linear-gradient(180deg,rgba(30,43,38,.6) 0%,rgba(30,43,38,.25) 22%,rgba(30,43,38,.4) 50%,rgba(30,43,38,.7) 100%)}
.app[data-view="start"] .shade-start,.app[data-view="video"] .shade-video,
.app[data-view="choose"] .shade-choose,.app[data-view="outcome"] .shade-outcome{opacity:1}
.mark-shade{position:absolute;left:0;top:0;width:280px;height:200px;pointer-events:none;
  background:radial-gradient(ellipse at 0 0,rgba(20,30,26,.8) 0%,rgba(20,30,26,.45) 40%,rgba(20,30,26,0) 72%)}
.app[data-view="start"] .mark-shade{width:320px;height:240px}

/* ---------- HUD ---------- */
.hud{position:absolute;left:0;right:0;top:0;z-index:7;display:flex;flex-direction:column;gap:8px;padding:calc(12px + var(--safe-t)) 20px 0}
.hud-row{display:flex;align-items:center;gap:12px}
.timeline-bar{flex:1;min-width:40px;height:6px;border-radius:3px;background:rgba(239,243,235,.25);overflow:hidden}
.timeline-fill{width:0;height:100%;border-radius:3px;background:var(--action);transition:width .9s var(--ease)}
.year-pill{flex:none;padding:4px 12px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass-pill);color:var(--text);
  font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.icon-btn{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:var(--r-control);
  border:1px solid rgba(239,243,235,.24);background:var(--glass-pill);color:var(--text);cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hud-sub{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.hud-sub span:last-child{text-align:right}

/* Resource tracker */
.stats{margin-top:4px;padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px;border-radius:var(--r-surface);
  border:1px solid rgba(239,243,235,.18);background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:background-color .3s ease}
.app[data-view="outcome"] .stats{background:rgba(30,43,38,.8)}
.stats-head{margin:0;display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:600}
.stats-head span:last-child{color:var(--text-2);font-weight:400;text-align:right}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.stat{display:flex;flex-direction:column;gap:6px;min-width:0}
.stat-top{display:flex;align-items:center;gap:8px}
.stat-top img{flex:none;width:28px;height:28px}
.stat-name{flex:1;min-width:0;font-size:14px;font-weight:600}
.stat-flag{font-size:13px;font-weight:600;color:var(--error-ink)}
.stat-val{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.stat-bar{height:6px;border-radius:3px;background:rgba(239,243,235,.2);overflow:hidden}
.stat-fill{height:100%;border-radius:3px;background:var(--action);transition:width .8s var(--ease),background-color .4s ease}
.stat.mid .stat-fill{background:var(--warning-ink)}
.stat.low .stat-fill{background:var(--error-ink)}
.stat.low .stat-val{color:var(--error-ink)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 16px;border:1px solid transparent;
  border-radius:var(--r-control);font-size:16px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,opacity .2s ease,transform .12s ease}
.btn:active{transform:scale(.98)}
.btn svg{flex:none}
.btn-primary{background:var(--action);color:var(--on-action);font-size:17px;font-weight:700}
.btn-primary:hover{background:var(--focus)}
.btn-big{width:100%;min-height:52px}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--control-border)}
.btn-secondary:hover{background:var(--quiet)}
.btn-glass{border-color:rgba(239,243,235,.3);background:rgba(39,56,47,.7);color:var(--text);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-glass:hover{border-color:var(--action)}
.btn-link{align-self:center;padding:8px 12px;background:none;color:var(--action)}
.btn-link:hover{color:var(--text)}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- Start ---------- */
.screen{position:absolute;inset:0;z-index:8;overflow-y:auto;-webkit-overflow-scrolling:touch}
.start{z-index:6;display:flex;flex-direction:column;padding:calc(96px + var(--safe-t)) 20px calc(24px + var(--safe-b))}
.start > .mark{position:absolute;left:20px;top:calc(18px + var(--safe-t))}
.start-inner{margin-top:auto;display:flex;flex-direction:column;gap:18px;animation:rise .6s var(--ease) both}
.start-copy{display:flex;flex-direction:column;gap:8px}
.kicker{margin:0;font-size:15px;font-weight:600;color:var(--action)}
.start-title{margin:0;font-size:88px;line-height:.95;font-weight:650;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.start-lead{margin:6px 0 0;font-size:18px;line-height:1.5}
.start-actions{display:flex;flex-direction:column;gap:10px}
.start .btn-big{min-height:54px}
.hint,.fiction{margin:0;text-align:center;font-size:14px;color:var(--text-2)}
.fiction{font-size:13px}

/* ---------- Scene sheet ---------- */
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:4;max-height:calc(100% - var(--hud-h,96px) - 12px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:14px;padding:0 20px calc(20px + var(--safe-b))}
.sheet-copy{display:flex;flex-direction:column;gap:6px}
.sheet.enter .sheet-copy{animation:rise .4s var(--ease) both}
.scene-title{margin:0;font-size:32px;line-height:1.2;font-weight:650;letter-spacing:-.025em}
.scene-text{margin:0;font-size:17px;line-height:1.5}
.sheet.choosing .scene-text{font-size:16px}
.vprog{flex:none;height:4px;border-radius:2px;background:rgba(239,243,235,.25);overflow:hidden}
.vprog-fill{width:0;height:100%;background:var(--text)}
.sheet.choosing .vprog{display:none}

.choices{display:flex;flex-direction:column;gap:8px}
.choices:empty{display:none}
.choice{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 14px;text-align:left;cursor:pointer;
  border-radius:var(--r-surface);border:1px solid var(--glass-line);background:var(--glass);color:var(--text);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  animation:rise .32s var(--ease) both;transition:border-color .2s ease,background-color .2s ease,opacity .2s ease}
.choice:hover{border-color:var(--action)}
.choice svg{flex:none;color:var(--action)}
.choice-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.choice-label{font-size:16px;font-weight:600;line-height:1.35}
.choice-sub{font-size:14px;line-height:1.4;color:var(--text-2)}
.choice.picked{border-color:var(--action);background:rgba(52,72,60,.92)}
.choices.locked .choice:not(.picked){opacity:.35}

.sheet-actions{display:flex;gap:8px}
.sheet-actions:not(:has(.btn:not([hidden]))){display:none}
#skipBtn{margin-left:auto}

/* ---------- Outcome ---------- */
.outcome{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;overflow-y:auto;
  padding:calc(var(--hud-h,96px) + 12px) 12px calc(12px + var(--safe-b))}
.outcome-card{margin-top:auto;display:flex;flex-direction:column;gap:14px;padding:22px 18px 18px;border-radius:var(--r-surface);
  border:1px solid rgba(239,243,235,.18);background:rgba(39,56,47,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  animation:rise .32s var(--ease) both}
.outcome-head{display:flex;flex-direction:column;gap:4px}
.outcome-kicker{margin:0;font-size:14px;font-weight:600;color:var(--action)}
.outcome-choice{margin:0;font-size:24px;line-height:1.3;font-weight:650;letter-spacing:-.025em}
.outcome-text{margin:0;font-size:19px;line-height:1.45}
.outcome.has-fx .outcome-text{font-size:18px}
.deltas{display:flex;flex-wrap:wrap;gap:8px}
.deltas:empty{display:none}
.delta{display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 4px;border-radius:999px;background:var(--quiet);color:var(--action);
  font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;animation:fade .3s ease both}
.delta img{width:24px;height:24px}
.delta.neg{background:var(--error-surface);color:var(--error-ink)}
.tool-line{margin:0;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-control);background:var(--canvas);font-size:15px}
.tool-line svg{flex:none;color:var(--action)}
.tool-line strong{font-weight:600}
.next-line{margin:0;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-2)}
.next-line svg{flex:none}
.outcome .btn{margin-top:2px}

/* ---------- Endings ---------- */
.end{container-type:size}
.end-scroll{position:relative;min-height:100%}
.end-death .end-scroll{background:linear-gradient(180deg,rgba(30,43,38,.5) 0,rgba(30,43,38,.1) 20vh,rgba(30,43,38,.35) 38vh,rgba(30,43,38,.9) 56vh,var(--canvas) 92vh)}
.end-win .end-scroll{background:linear-gradient(180deg,rgba(30,43,38,.45) 0,rgba(30,43,38,0) 18vh,rgba(30,43,38,.2) 36vh,rgba(30,43,38,.88) 56vh,var(--canvas) 90vh)}
.end-death .end-scroll{background:linear-gradient(180deg,rgba(30,43,38,.5) 0,rgba(30,43,38,.1) 20cqh,rgba(30,43,38,.35) 38cqh,rgba(30,43,38,.9) 56cqh,var(--canvas) 92cqh)}
.end-win .end-scroll{background:linear-gradient(180deg,rgba(30,43,38,.45) 0,rgba(30,43,38,0) 18cqh,rgba(30,43,38,.2) 36cqh,rgba(30,43,38,.88) 56cqh,var(--canvas) 90cqh)}
.end-head{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(12px + var(--safe-t)) 20px 0}
.end-body{display:flex;flex-direction:column;gap:16px;padding:clamp(220px,44vh,372px) 20px calc(24px + var(--safe-b));
  padding-top:clamp(220px,44cqh,372px);animation:rise .5s var(--ease) both}
.end-win .end-body{gap:32px}
.end-intro{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.status{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:14px;font-weight:600}
.status-error{background:var(--error-surface);color:var(--error-ink)}
.status-success{background:var(--quiet);color:var(--action)}
.end-title{margin:0;font-size:44px;line-height:1.1;font-weight:650;letter-spacing:-.025em}
.win-year{font-size:96px;line-height:.95;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.end-meta{margin:0;font-size:14px;color:var(--text-2);font-variant-numeric:tabular-nums}
.end-text{margin:4px 0 0;font-size:17px;line-height:1.5}
.end-win .end-text{margin-top:6px}

.callout{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:var(--r-control);background:var(--info-surface);color:var(--info-ink);
  font-size:16px;line-height:1.5}
.callout svg{flex:none;margin-top:2px}
.callout p{margin:0}
.callout strong{display:block;font-weight:600}

.block{display:flex;flex-direction:column;gap:12px}
.block h2{margin:0;font-size:22px;line-height:1.3;font-weight:650;letter-spacing:-.025em}
.world-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;font-size:15px;line-height:1.4}
.world-list li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;padding:7px 0;border-bottom:1px solid var(--quiet);animation:fade .4s ease both}
.world-list li b{font-variant-numeric:tabular-nums}
.world-list li span{color:var(--text-2)}
.world-list li.you{margin:2px -10px;padding:7px 10px;border-bottom:0;border-radius:var(--r-control);background:var(--quiet)}
.world-list li.you b{color:var(--action)}
.world-list li.you span{color:var(--text);font-weight:600}
.final-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.fs{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;border-radius:var(--r-surface);background:var(--surface)}
.fs img{width:32px;height:32px}
.fs b{font-size:20px;font-variant-numeric:tabular-nums}
.fs span{font-size:13px;color:var(--text-2)}
.tools-used{display:flex;flex-wrap:wrap;gap:8px}
.tools-used span{padding:4px 12px;border-radius:999px;background:var(--quiet);font-size:14px;font-weight:600}

.badge-preview{position:relative;align-self:center;width:min(324px,100%);aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-surface)}
.badge-preview canvas{display:block;width:100%;height:100%}
.badge-preview.locked canvas{filter:blur(6px)}
.badge-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(30,43,38,.35)}
.badge-preview:not(.locked) .badge-lock{display:none}
.lock-dot{width:56px;height:56px;display:grid;place-items:center;border-radius:999px;background:var(--canvas)}
.lock-pill{padding:4px 12px;border-radius:999px;background:var(--canvas);font-size:14px;font-weight:600}
.badge-preview.unlocked{animation:fade .5s ease both}
.badge-actions{display:flex;flex-direction:column;gap:10px}

/* ---------- Forms ---------- */
.capture{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:var(--r-surface);background:var(--surface);border:1px solid var(--quiet)}
.end-death .capture{margin-top:12px}
.capture-head{display:flex;flex-direction:column;gap:6px}
.capture h2{margin:0;font-size:24px;line-height:1.3;font-weight:650;letter-spacing:-.025em}
.capture-head p{margin:0;font-size:16px;line-height:1.5;color:var(--text-2)}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;font-weight:600}
.field input{width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--control-border);border-radius:var(--r-control);
  background:var(--canvas);color:var(--text);font-size:16px}
.field input::placeholder{color:var(--text-2)}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.4}
.consent input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--action)}
.consent a{color:var(--action)}
.form-msg{margin:0;font-size:14px}
.form-msg.err{color:var(--error-ink)}
.form-msg.ok{color:var(--action)}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

@media (max-height:700px){
  .start-title{font-size:72px}
  .scene-title{font-size:28px}
  .scene-text{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}