/* =========================================================
   shipE
   THE ENTREPRENEURSHIP GAME
   ========================================================= */

:root{
  --ink:#24163F;
  --ink-night:#100A20;
  --ink-night-2:#1A1231;
  --ink-night-3:#241A40;

  --forest-plum:#211535;

  --parchment:#FFF7DE;
  --parchment-dark:#E9DCBA;

  --candy-pink:#F45B91;
  --candy-pink-deep:#C9366B;
  --candy-mint:#4CE0B3;
  --candy-lemon:#FFD166;

  --ok-green:#35C98A;
  --warn-yellow:#F2C94C;
  --danger-red:#E14B4B;
  --thorn-red:#D94C5B;

  --funding-gold:#E5B84A;
  --funding-gold-light:#FFE7A1;
  --funding-green:#52C99A;
  --funding-green-dark:#287A61;
  --funding-red:#D85A5A;
  --funding-blue:#6597D8;

  --font-display:"Baloo 2", sans-serif;
  --font-body:"Nunito", sans-serif;
}


/* =========================================================
   RESET
   ========================================================= */

*{
  box-sizing:border-box;
}

html,
body{
  width:100%;
  min-height:100%;
  margin:0;
  padding:0;
}

body{
  background:
    radial-gradient(
      circle at 50% -20%,
      rgba(89,61,130,.35),
      transparent 55%
    ),
    linear-gradient(
      180deg,
      #171027 0%,
      #100A20 100%
    );

  color:var(--parchment);
  font-family:var(--font-body);
  overflow-x:hidden;
}

button{
  font:inherit;
  cursor:pointer;
}

button:disabled{
  cursor:default;
}

h1,
h2,
h3,
h4,
p{
  margin:0;
}

.hidden{
  display:none !important;
}


/* =========================================================
   APP / SCREENS
   ========================================================= */

#app{
  position:relative;
  width:100%;
  min-height:100vh;
}

.screen{
  position:relative;
  min-height:100vh;
  width:100%;
  display:none;
  flex-direction:column;
  align-items:center;
  padding:30px 24px 60px;
}

.screen.active{
  display:flex;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:800;
  font-size:.78rem;
  color:var(--candy-lemon);
  margin-bottom:8px;
}

.eyebrow.light{
  color:#FFE8B8;
}

.title-huge{
  font-size:clamp(2.6rem,7vw,4.6rem);
  line-height:1;
  color:var(--parchment);
}

.title-accent{
  color:var(--candy-pink);
}

.title-large{
  font-size:clamp(2rem,5vw,3rem);
  color:var(--parchment);
}

.title-mid{
  font-size:clamp(1.5rem,4vw,2.1rem);
  color:var(--parchment);
  text-align:center;
}

.title-mid.accent{
  color:var(--candy-lemon);
  margin-top:2px;
}

.subtitle{
  max-width:560px;
  font-size:1.05rem;
  color:#E7DFF6;
  margin-top:14px;
  line-height:1.5;
}

.scene-hint{
  color:#CFC6E6;
  font-size:.92rem;
  margin-top:6px;
  max-width:560px;
  line-height:1.5;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn{
  border:none;
  border-radius:999px;
  font-weight:800;
  font-family:var(--font-display);
  padding:14px 30px;
  font-size:1rem;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
  box-shadow:0 6px 0 rgba(0,0,0,.25);
}

.btn:active{
  transform:translateY(4px);
  box-shadow:0 2px 0 rgba(0,0,0,.25);
}

.btn-primary{
  background:
    linear-gradient(
      180deg,
      var(--candy-pink),
      var(--candy-pink-deep)
    );
  color:#fff;
}

.btn-primary:hover{
  filter:brightness(1.06);
}

.btn-giant{
  padding:18px 42px;
  font-size:1.25rem;
  margin-top:26px;
}

.btn-secondary{
  background:var(--ink-night-2);
  color:var(--parchment);
  border:2px solid rgba(255,255,255,.18);
  box-shadow:none;
}

.btn-punch,
.btn-kick{
  background:
    linear-gradient(
      180deg,
      var(--candy-lemon),
      #E8A93B
    );
  color:#3A2200;
  padding:16px 26px;
  font-size:1.1rem;
}

.btn-kick{
  background:
    linear-gradient(
      180deg,
      var(--candy-mint),
      #23A87F
    );
  color:#062E22;
}


/* =========================================================
   WELCOME
   ========================================================= */

#screen-welcome{
  justify-content:center;
}

.fork-bg{
  position:absolute;
  inset:0;
  display:flex;
  overflow:hidden;
  z-index:0;
}

.fork-side{
  flex:1;
  height:100%;
  opacity:.5;
}

.fork-side.candy{
  background:
    repeating-linear-gradient(
      115deg,
      rgba(255,255,255,.08) 0 26px,
      transparent 26px 52px
    ),
    linear-gradient(
      160deg,
      var(--candy-pink) 0%,
      var(--candy-pink-deep) 60%,
      #B12E63 100%
    );
}

.fork-side.forest{
  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.05),
      transparent 40%
    ),
    linear-gradient(
      200deg,
      var(--forest-plum) 0%,
      #150E24 70%,
      #0C0817 100%
    );
}

.welcome-card{
  position:relative;
  z-index:1;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:60px 24px;
}


/* =========================================================
   LEVEL MENU
   ========================================================= */

#screen-menu{
  justify-content:flex-start;
  padding-top:60px;
}

.menu-wrap{
  max-width:1000px;
  width:100%;
  text-align:center;
}

.level-grid{
  display:grid;
  grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
  margin-top:36px;
}

.level-card{
  background:var(--ink-night-2);
  border:2px solid rgba(255,255,255,.1);
  border-radius:22px;
  padding:24px 20px;
  text-align:left;
  color:var(--parchment);
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.level-card.unlocked{
  cursor:pointer;
}

.level-card.unlocked:hover{
  transform:translateY(-4px);
  border-color:var(--candy-pink);
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}

.level-card.locked{
  opacity:.5;
}

.level-card-badge{
  align-self:flex-start;
  background:var(--candy-lemon);
  color:#3A2200;
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.06em;
  padding:4px 12px;
  border-radius:999px;
  text-transform:uppercase;
}

.level-card h3{
  font-size:1.3rem;
}

.level-card p{
  font-size:.9rem;
  color:#CFC6E6;
  flex:1;
  line-height:1.45;
}

.level-card-cta{
  font-weight:800;
  color:var(--candy-mint);
}

.locked-tag{
  color:#9C93B5;
}

.level-two-card{
  border-color:rgba(76,224,179,.25);
}

.level-two-card:hover{
  border-color:var(--candy-mint) !important;
}

.level-three-card{
  border-color:rgba(229,184,74,.32);
}

.level-three-card:hover{
  border-color:var(--funding-gold) !important;
}


/* =========================================================
   MENU ACTIONS
   ========================================================= */

.menu-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:26px;
}


/* =========================================================
   LEVEL INTRO
   ========================================================= */

.intro-wrap{
  max-width:560px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:40px;
}

.intro-character{
  margin:28px 0;
}

.intro-copy{
  color:#E7DFF6;
  line-height:1.6;
  margin-top:10px;
}

.legal-note{
  max-width:560px;
  margin-top:12px;
  color:#AFA4C8;
  font-size:.72rem;
  line-height:1.4;
  font-style:italic;
}


/* =========================================================
   SPRITE
   ========================================================= */

.sprite.explorer{
  position:relative;
  width:64px;
  height:80px;
}

.sprite.explorer.big{
  width:110px;
  height:140px;
}

.sprite.explorer.stuck{
  width:70px;
  height:60px;
  overflow:hidden;
}

.sprite-head{
  width:60%;
  aspect-ratio:1/1;
  margin:0 auto;
  background:
    radial-gradient(
      circle at 35% 30%,
      #FFD9B0,
      #F2A65A 75%
    );
  border-radius:50%;
  position:relative;
  box-shadow:
    inset -4px -4px 0 rgba(0,0,0,.12);
}

.sprite-eye{
  position:absolute;
  top:42%;
  width:12%;
  height:12%;
  background:#24163F;
  border-radius:50%;
}

.sprite-eye.l{
  left:28%;
}

.sprite-eye.r{
  right:28%;
}

.sprite-scarf{
  width:70%;
  height:22%;
  margin:2px auto 0;
  background:
    linear-gradient(
      90deg,
      var(--candy-mint),
      #23A87F
    );
  border-radius:8px;
}

.sprite-body{
  width:78%;
  height:40%;
  margin:4px auto 0;
  background:
    linear-gradient(
      180deg,
      var(--candy-pink),
      var(--candy-pink-deep)
    );
  border-radius:16px 16px 10px 10px;
}


/* =========================================================
   HUD
   ========================================================= */

.hud{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;

  display:flex;
  align-items:center;
  gap:18px;

  padding:12px 20px;

  background:rgba(20,12,40,.85);
  backdrop-filter:blur(6px);

  border-bottom:
    2px solid rgba(255,255,255,.08);
}

.hud-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.hud-btn{
  border:2px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.07);
  color:var(--parchment);
  padding:8px 11px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:.82rem;

  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease;
}

.hud-btn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.28);
}

.hud-btn:active{
  transform:translateY(1px);
}

.hud-avatar{
  position:relative;
  flex-shrink:0;
  transform:scale(.6);
  transform-origin:left center;
}

.shield-badges{
  position:absolute;
  top:-6px;
  right:-14px;

  display:flex;
  flex-direction:column;
  gap:2px;
}

.shield-badge{
  width:22px;
  height:22px;
  border-radius:50%;

  background:
    linear-gradient(
      180deg,
      #6FC7FF,
      #2D8FE0
    );

  color:#fff;
  font-weight:800;
  font-size:.85rem;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:
    0 2px 0 rgba(0,0,0,.3);

  animation:pop .3s ease;
}

@keyframes pop{
  from{
    transform:scale(0);
  }

  to{
    transform:scale(1);
  }
}

.hud-bars{
  flex:1;
  max-width:280px;
}

.hud-bars.boss-bars{
  max-width:340px;
}

.bar-label{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  margin-bottom:4px;
  color:#CFC6E6;
}

.health-bar-track{
  width:100%;
  height:14px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
  border:2px solid rgba(255,255,255,.18);
}

.health-bar-fill{
  height:100%;
  width:100%;
  background:var(--ok-green);
  transition:
    width .35s ease,
    background-color .35s ease;
}

.health-bar-track.boss .health-bar-fill{
  background:var(--thorn-red);
}


/* =========================================================
   FORK SCENE
   ========================================================= */

.fork-scene{
  position:relative;
  width:100%;
  max-width:920px;
  height:78vh;
  min-height:520px;
}

.fork-road{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}

.road-stem{
  fill:none;
  stroke:rgba(255,255,255,.5);
  stroke-width:14;
  stroke-linecap:round;
}

.road-branch{
  fill:none;
  stroke-width:14;
  stroke-linecap:round;
}

.candy-road{
  stroke:var(--candy-lemon);
  filter:
    drop-shadow(
      0 0 6px
      rgba(255,209,102,.6)
    );
}

.forest-road{
  stroke:#5A4A78;
}

.fork-runner{
  position:absolute;
  left:50%;
  bottom:6%;
  transform:translateX(-50%);
  z-index:2;

  transition:
    left 1.1s ease,
    bottom 1.1s ease,
    transform 1.1s ease;
}

.fork-runner.go-candy{
  left:10%;
  bottom:82%;
}

.fork-runner.go-forest{
  left:90%;
  bottom:82%;
}

.question-card{
  position:relative;
  z-index:3;

  background:var(--parchment);
  color:var(--ink);

  border-radius:22px;

  padding:22px 24px;

  max-width:520px;
  margin:8px auto 0;

  box-shadow:
    0 14px 0 rgba(0,0,0,.25);

  text-align:center;
}

.q-eyebrow{
  font-size:.72rem;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--candy-pink-deep);
  margin-bottom:6px;
}

.q-text{
  font-family:var(--font-display);
  font-size:1.25rem;
  margin-bottom:14px;
}

.q-text.small{
  font-size:1rem;
}

.q-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.q-option{
  background:#F1E7FF;
  border:2px solid transparent;
  border-radius:14px;

  padding:12px 14px;

  font-weight:700;
  font-size:.92rem;
  color:var(--ink);

  text-align:left;

  transition:all .15s ease;
}

.q-option:hover{
  border-color:var(--candy-pink);
  background:#FCE6EF;
}

.q-option.correct{
  background:#CFF5DC;
  border-color:var(--ok-green);
}

.q-option.wrong{
  background:#FADADA;
  border-color:var(--danger-red);
}

.q-option:disabled{
  pointer-events:none;
  opacity:.85;
}


/* =========================================================
   GENERIC SCENE
   ========================================================= */

.scene{
  width:100%;
  max-width:920px;

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;

  padding-top:64px;
}

.candy-scene{
  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(255,209,102,.15),
      transparent 45%
    );
}


/* =========================================================
   MATCHING GAME
   ========================================================= */

.match-wrap{
  position:relative;
  width:100%;
  max-width:760px;

  margin-top:26px;

  display:flex;
  justify-content:space-between;

  gap:40px;

  min-height:340px;
}

.match-svg{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  pointer-events:none;
  z-index:2;
}

.match-col{
  flex:1;

  display:flex;
  flex-direction:column;

  gap:14px;

  z-index:3;
}

.match-node{
  background:var(--parchment);
  color:var(--ink);

  border-radius:14px;

  padding:14px 16px;

  font-weight:700;
  font-size:.9rem;

  border:3px solid transparent;

  cursor:pointer;
  user-select:none;

  box-shadow:
    0 4px 0 rgba(0,0,0,.2);

  transition:
    border-color .15s ease,
    transform .1s ease;
}

.match-node.q-node{
  text-align:left;
}

.match-node.a-node{
  text-align:right;
}

.match-node.active{
  border-color:var(--candy-lemon);
  transform:scale(1.03);
}

.match-node.matched{
  background:#CFF5DC;
  border-color:var(--ok-green);
  cursor:default;
  opacity:.85;
}

.match-node.shake{
  animation:shake .4s ease;
  border-color:var(--danger-red);
}

@keyframes shake{
  0%,100%{
    transform:translateX(0);
  }

  25%{
    transform:translateX(-6px);
  }

  75%{
    transform:translateX(6px);
  }
}


/* =========================================================
   QUICKSAND
   ========================================================= */

.quicksand-stage{
  position:relative;

  width:100%;
  max-width:760px;
  height:380px;

  margin-top:24px;
}

.quicksand-pit{
  position:absolute;

  bottom:0;
  left:50%;

  transform:translateX(-50%);

  width:220px;
  height:70px;

  border-radius:50%;

  background:
    radial-gradient(
      ellipse at center,
      #C89A5B,
      #8B6B3C 70%
    );

  box-shadow:
    inset 0 6px 14px rgba(0,0,0,.35);
}

.sprite.explorer.stuck{
  position:absolute;

  bottom:8px;
  left:50%;

  transform:translateX(-50%);

  animation:
    sink 2.4s ease-in-out infinite alternate;
}

@keyframes sink{
  from{
    transform:translate(-50%,0);
  }

  to{
    transform:translate(-50%,6px);
  }
}

.question-bird{
  position:absolute;

  top:0;
  right:6%;

  display:flex;
  flex-direction:column;
  align-items:flex-end;

  gap:8px;

  animation:
    hover 3s ease-in-out infinite;
}

@keyframes hover{
  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-10px);
  }
}

.bird-body{
  position:relative;

  width:70px;
  height:56px;

  background:
    linear-gradient(
      180deg,
      var(--candy-mint),
      #23A87F
    );

  border-radius:
    50% 50% 45% 45%;
}

.bird-wing{
  position:absolute;

  top:18px;
  left:-8px;

  width:30px;
  height:20px;

  background:#1F8F6E;

  border-radius:50%;

  transform:rotate(-20deg);
}

.bird-eye{
  position:absolute;

  top:14px;
  right:16px;

  width:8px;
  height:8px;

  background:#0C2A20;

  border-radius:50%;
}

.bird-beak{
  position:absolute;

  top:22px;
  right:-8px;

  width:0;
  height:0;

  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:14px solid var(--candy-lemon);
}

.bird-textbox{
  background:var(--parchment);
  color:var(--ink);

  border-radius:16px;

  padding:16px 18px;

  width:280px;

  box-shadow:
    0 10px 0 rgba(0,0,0,.22);
}

.bird-textbox .q-options{
  grid-template-columns:1fr;
}


/* =========================================================
   WIN / GAMEOVER
   ========================================================= */

.win-wrap{
  text-align:center;

  max-width:600px;

  margin:0 auto;

  padding-top:14vh;

  display:flex;
  flex-direction:column;
  align-items:center;
}

.win-stats{
  margin-top:20px;

  display:flex;

  gap:14px;

  flex-wrap:wrap;

  justify-content:center;
}

.win-stat{
  background:var(--ink-night-2);

  border:2px solid rgba(255,255,255,.12);

  border-radius:14px;

  padding:10px 18px;

  font-weight:800;
}

.forest-win .title-huge{
  color:var(--candy-mint);
}

.gameover .title-huge{
  color:var(--thorn-red);
}


/* =========================================================
   FOREST
   ========================================================= */

.forest-scene canvas,
.boss-scene canvas{
  margin-top:20px;

  width:100%;
  max-width:900px;

  border-radius:20px;

  border:3px solid rgba(255,255,255,.1);

  background:
    linear-gradient(
      180deg,
      #241A38 0%,
      #150E24 100%
    );
}

.dodge-controls{
  display:flex;
  gap:14px;
  margin-top:16px;
}

.dodge-progress-track{
  width:100%;
  max-width:900px;

  height:10px;

  border-radius:999px;

  background:rgba(255,255,255,.1);

  margin-top:14px;

  overflow:hidden;
}

.dodge-progress-fill{
  height:100%;
  width:0%;

  background:var(--candy-mint);

  transition:
    width .2s linear;
}

.powerup-track{
  display:flex;
  gap:14px;
  margin-top:22px;
}

.powerup-chip{
  padding:10px 18px;

  border-radius:999px;

  font-weight:800;
  font-size:.85rem;

  background:rgba(255,255,255,.08);

  border:2px solid rgba(255,255,255,.15);

  color:#B7ADD1;
}

.powerup-chip.unlocked{
  background:
    linear-gradient(
      180deg,
      var(--candy-lemon),
      #E8A93B
    );

  color:#3A2200;

  border-color:transparent;
}

.boss-controls{
  display:flex;
  gap:16px;
  margin-top:18px;
}

.boss-hint{
  color:#CFC6E6;
  font-size:.9rem;
  margin-top:12px;
  max-width:600px;
}


/* =========================================================
   =========================================================
   LEVEL 3 — FUNDING
   =========================================================
   ========================================================= */


/* =========================================================
   FUNDING INTRO
   ========================================================= */

#screen-level3-intro{
  justify-content:center;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(229,184,74,.10),
      transparent 45%
    );
}

.funding-intro-wrap{
  width:100%;
  max-width:720px;

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;

  padding:30px 0;
}

.funding-intro-wrap .title-large{
  margin-bottom:2px;
}

.funding-intro-character{
  margin:24px 0 12px;

  padding:20px 42px;

  border-radius:30px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.01)
    );

  border:
    1px solid rgba(255,255,255,.08);
}

.funding-intro-copy{
  max-width:650px;

  color:#E7DFF6;

  line-height:1.65;

  margin-top:12px;

  font-size:1rem;
}

.funding-intro-note{
  margin-top:20px;

  padding:14px 22px;

  border-radius:14px;

  background:rgba(229,184,74,.08);

  border:
    1px solid rgba(229,184,74,.25);

  color:#F2E5BE;

  font-size:.9rem;
}

.funding-intro-note b{
  color:var(--funding-gold-light);
}


/* =========================================================
   TECH / NON-TECH CHOICE
   ========================================================= */

#screen-funding-type{
  justify-content:flex-start;
  padding-top:8vh;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(76,224,179,.08),
      transparent 50%
    );
}

.funding-choice-wrap{
  width:100%;
  max-width:1000px;

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;
}

.funding-choice-wrap .title-large{
  max-width:800px;
}

.funding-type-grid{
  width:100%;

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:24px;

  margin-top:38px;
}

.funding-type-card{
  position:relative;

  min-height:300px;

  border-radius:24px;

  border:
    2px solid rgba(255,255,255,.10);

  background:
    linear-gradient(
      145deg,
      #211635,
      #171027
    );

  color:var(--parchment);

  padding:36px 30px;

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;

  box-shadow:
    0 14px 30px rgba(0,0,0,.18);
}

.funding-type-card:hover{
  transform:translateY(-7px);

  border-color:
    rgba(229,184,74,.65);

  box-shadow:
    0 20px 40px rgba(0,0,0,.28);
}

.funding-type-icon{
  width:76px;
  height:76px;

  border-radius:22px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:2.3rem;

  margin-bottom:18px;

  background:
    rgba(229,184,74,.10);

  border:
    1px solid rgba(229,184,74,.20);
}

.funding-type-card h2{
  font-family:var(--font-display);

  font-size:1.8rem;

  margin-bottom:10px;
}

.funding-type-card p{
  color:#CFC6E6;

  line-height:1.55;

  max-width:380px;

  flex:1;
}

.funding-type-card span{
  margin-top:20px;

  color:var(--funding-gold-light);

  font-weight:800;
}

.funding-fine-print{
  margin-top:24px;

  max-width:700px;

  color:#8F86A7;

  font-size:.72rem;

  line-height:1.45;

  font-style:italic;
}


/* =========================================================
   INDUSTRY SPINNER
   ========================================================= */

#screen-funding-spinner{
  justify-content:flex-start;
  padding-top:7vh;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(229,184,74,.08),
      transparent 45%
    );
}

.spinner-wrap{
  width:100%;
  max-width:800px;

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;
}

.industry-spinner{
  position:relative;

  width:310px;
  height:310px;

  margin:34px auto 18px;
}

.spinner-pointer{
  position:absolute;

  z-index:4;

  top:-13px;
  left:50%;

  transform:translateX(-50%);

  color:var(--funding-gold-light);

  font-size:1.5rem;

  filter:
    drop-shadow(
      0 3px 3px rgba(0,0,0,.5)
    );
}

.spinner-wheel{
  position:relative;

  width:100%;
  height:100%;

  border-radius:50%;

  border:
    10px solid #2A1D40;

  background:
    conic-gradient(
      #D65B82 0deg 51deg,
      #5ABF9A 51deg 102deg,
      #D6A84E 102deg 153deg,
      #668FD0 153deg 204deg,
      #9B69C8 204deg 255deg,
      #C76A58 255deg 306deg,
      #4EADBC 306deg 360deg
    );

  box-shadow:
    0 14px 30px rgba(0,0,0,.3),
    inset 0 0 0 3px rgba(255,255,255,.15);

  transition:
    transform 3.2s
    cubic-bezier(.15,.85,.18,1);
}

.spinner-wheel::before{
  content:"";

  position:absolute;
  inset:18px;

  border-radius:50%;

  border:
    2px dashed rgba(255,255,255,.22);
}

.spinner-wheel-center{
  position:absolute;

  top:50%;
  left:50%;

  transform:translate(-50%,-50%);

  width:84px;
  height:84px;

  border-radius:50%;

  background:
    linear-gradient(
      145deg,
      #FFF0B6,
      #DDAE48
    );

  color:#3A2700;

  display:flex;
  align-items:center;
  justify-content:center;

  font-family:var(--font-display);

  font-size:2rem;

  font-weight:800;

  border:
    5px solid #2A1D40;

  box-shadow:
    0 5px 0 rgba(0,0,0,.25);
}

.spinner-result{
  min-width:340px;

  padding:20px 28px;

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.02)
    );

  border:
    1px solid rgba(229,184,74,.3);
}

.spinner-result .title-mid{
  color:var(--funding-gold-light);
}


/* =========================================================
   YEAR 1 FOUNDATION
   ========================================================= */

#screen-funding-foundation{
  justify-content:flex-start;

  padding-top:7vh;

  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(76,224,179,.08),
      transparent 50%
    );
}

.funding-foundation-wrap{
  width:100%;
  max-width:900px;

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;
}

.foundation-dialog{
  width:100%;

  margin-top:28px;

  display:grid;

  grid-template-columns:150px 1fr;

  gap:20px;

  align-items:center;

  text-align:left;

  background:
    linear-gradient(
      145deg,
      #211735,
      #171027
    );

  border:
    2px solid rgba(255,255,255,.09);

  border-radius:24px;

  padding:26px;

  box-shadow:
    0 18px 35px rgba(0,0,0,.24);
}

.dialog-character{
  display:flex;
  justify-content:center;
}

.dialog-content{
  color:#E7DFF6;

  line-height:1.6;
}

.dialog-speaker{
  color:var(--funding-gold-light);

  font-size:.72rem;

  letter-spacing:.12em;

  font-weight:800;

  margin-bottom:8px;
}

.foundation-stats{
  width:100%;

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:14px;

  margin-top:18px;
}

.foundation-stat{
  background:
    var(--ink-night-2);

  border:
    2px solid rgba(255,255,255,.09);

  border-radius:16px;

  padding:18px 14px;

  display:flex;
  flex-direction:column;

  gap:3px;
}

.foundation-stat span{
  text-transform:uppercase;

  letter-spacing:.08em;

  color:#9D93B4;

  font-size:.68rem;

  font-weight:800;
}

.foundation-stat strong{
  font-family:var(--font-display);

  color:var(--funding-gold-light);

  font-size:1.4rem;
}

.foundation-stat small{
  color:#AAA1BD;

  font-size:.72rem;
}

.funding-explainer{
  width:100%;

  max-width:760px;

  margin-top:18px;

  padding:18px 22px;

  background:
    rgba(76,224,179,.06);

  border:
    1px solid rgba(76,224,179,.16);

  border-radius:16px;

  text-align:left;
}

.funding-explainer h3{
  color:var(--funding-green);

  font-family:var(--font-display);

  font-size:1.15rem;

  margin-bottom:6px;
}

.funding-explainer p{
  color:#BEB5CE;

  line-height:1.55;

  font-size:.84rem;
}


/* =========================================================
   FUNDING SIMULATOR SCREEN
   ========================================================= */

#screen-funding-simulator{
  padding:
    0
    0
    34px;

  background:
    radial-gradient(
      circle at 50% -15%,
      rgba(229,184,74,.10),
      transparent 42%
    );

  align-items:stretch;
}


/* =========================================================
   FUNDING TOP BAR
   ========================================================= */

.funding-topbar{
  width:100%;

  min-height:70px;

  padding:10px 20px;

  display:grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:center;

  gap:16px;

  background:
    rgba(14,9,27,.94);

  border-bottom:
    1px solid rgba(255,255,255,.08);

  position:sticky;

  top:0;

  z-index:20;
}

.funding-topbar-left{
  display:flex;
  gap:8px;
}

.funding-nav-btn{
  width:40px;
  height:40px;

  border-radius:11px;

  border:
    1px solid rgba(255,255,255,.12);

  background:
    rgba(255,255,255,.06);

  color:var(--parchment);

  font-size:1.1rem;

  font-weight:800;

  transition:
    background .15s ease,
    transform .15s ease;
}

.funding-nav-btn:hover{
  background:
    rgba(255,255,255,.12);

  transform:translateY(-2px);
}

.funding-year-display{
  display:flex;

  align-items:baseline;

  justify-content:center;

  gap:8px;

  white-space:nowrap;
}

.funding-year-display span{
  color:#9E94B2;

  font-size:.72rem;

  font-weight:800;

  letter-spacing:.12em;
}

.funding-year-display strong{
  color:var(--funding-gold-light);

  font-family:var(--font-display);

  font-size:1.65rem;

  line-height:1;
}

.funding-topbar-right{
  justify-self:end;

  display:flex;

  align-items:center;

  gap:6px;

  font-size:.78rem;
}

.funding-industry-label{
  color:#817892;
}

#fundingIndustryTop{
  color:var(--funding-green);

  max-width:180px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;
}


/* =========================================================
   TEN-YEAR PROGRESS
   ========================================================= */

.funding-year-progress{
  width:100%;

  padding:
    13px
    20px
    16px;

  background:
    rgba(16,10,32,.75);

  border-bottom:
    1px solid rgba(255,255,255,.05);
}

.funding-year-progress-track{
  position:relative;

  width:100%;

  height:13px;

  border-radius:999px;

  background:
    #2A203A;

  border:
    1px solid rgba(255,255,255,.10);

  overflow:visible;
}

.funding-year-progress-fill{
  position:absolute;

  left:0;
  top:0;

  height:100%;

  width:10%;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      var(--funding-green),
      var(--funding-gold)
    );

  transition:
    width .5s ease;
}

.funding-year-boxes{
  position:absolute;

  left:0;
  right:0;

  top:-5px;

  display:grid;

  grid-template-columns:
    repeat(10,1fr);

  height:23px;

  pointer-events:none;
}

.funding-year-boxes span{
  display:flex;

  align-items:center;

  justify-content:center;

  height:23px;

  border-left:
    1px solid rgba(255,255,255,.16);

  color:#746B83;

  font-size:.58rem;

  font-weight:800;

  transition:
    color .25s ease;
}

.funding-year-boxes span:first-child{
  border-left:none;
}

.funding-year-boxes span.active{
  color:var(--funding-gold-light);
}

.funding-year-boxes span.completed{
  color:var(--funding-green);
}


/* =========================================================
   FUNDING MAIN LAYOUT
   ========================================================= */

.funding-layout{
  width:100%;

  max-width:1500px;

  margin:
    18px
    auto
    0;

  padding:
    0
    20px;

  display:grid;

  grid-template-columns:
    260px
    minmax(500px,1fr)
    220px;

  gap:18px;

  align-items:start;
}


/* =========================================================
   FUNDING SIDEBAR
   ========================================================= */

.funding-sidebar{
  display:flex;

  flex-direction:column;

  gap:14px;
}

.company-panel,
.cofounder-panel,
.value-panel,
.competitor-panel,
.competitor-mini-chart{
  background:
    linear-gradient(
      145deg,
      #201633,
      #171027
    );

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:18px;

  padding:18px;

  box-shadow:
    0 10px 24px rgba(0,0,0,.15);
}

.company-panel-label{
  color:#847A98;

  text-transform:uppercase;

  letter-spacing:.11em;

  font-size:.64rem;

  font-weight:800;

  margin-bottom:5px;
}

.company-panel h2{
  font-family:var(--font-display);

  font-size:1.35rem;

  line-height:1.05;
}

.company-type-label{
  color:var(--funding-green);

  font-size:.72rem;

  font-weight:800;

  margin-top:3px;
}

.company-value-block{
  margin:
    18px
    0
    15px;

  padding:
    14px
    12px;

  border-radius:14px;

  background:
    rgba(229,184,74,.07);

  border:
    1px solid rgba(229,184,74,.14);
}

.company-value-block span{
  display:block;

  color:#8D829F;

  font-size:.61rem;

  font-weight:800;

  letter-spacing:.09em;
}

.company-value-block strong{
  display:block;

  margin-top:2px;

  font-family:var(--font-display);

  font-size:1.8rem;

  color:var(--funding-gold-light);
}

.company-metric{
  padding:
    9px
    0;

  border-top:
    1px solid rgba(255,255,255,.05);
}

.company-metric > div:first-child{
  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:8px;
}

.company-metric span{
  color:#968CA5;

  font-size:.72rem;
}

.company-metric strong{
  color:#E9E2F1;

  font-size:.75rem;

  font-weight:800;
}

.metric-bar{
  height:5px;

  width:100%;

  margin-top:6px;

  border-radius:999px;

  background:
    rgba(255,255,255,.08);

  overflow:hidden;
}

.metric-bar-fill{
  height:100%;

  width:0%;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      var(--funding-green),
      var(--funding-gold)
    );

  transition:
    width .35s ease;
}


/* =========================================================
   COFOUNDER
   ========================================================= */

.cofounder-panel h3{
  font-family:var(--font-display);

  font-size:1.15rem;
}

.cofounder-panel > p{
  color:#978DA8;

  font-size:.72rem;

  margin-top:2px;
}

.cofounder-status{
  display:flex;

  justify-content:space-between;

  margin-top:10px;

  padding-top:9px;

  border-top:
    1px solid rgba(255,255,255,.05);
}

.cofounder-status span{
  color:#847A98;

  font-size:.68rem;
}

.cofounder-status strong{
  color:#E7DFF6;

  font-size:.7rem;
}


/* =========================================================
   VALUE PANEL / PIE
   ========================================================= */

.value-panel{
  text-align:center;
}

.value-pie-wrap{
  display:flex;

  justify-content:center;

  padding:
    8px
    0
    10px;
}

.value-pie,
.computer-value-pie{
  width:135px;
  height:135px;

  border-radius:50%;

  background:
    conic-gradient(
      var(--funding-green) 0deg 160deg,
      var(--funding-gold) 160deg 260deg,
      var(--funding-blue) 260deg 320deg,
      #B75E83 320deg 360deg
    );

  display:flex;

  align-items:center;

  justify-content:center;

  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.10),
    0 8px 20px rgba(0,0,0,.22);

  transition:
    transform .4s ease;
}

.value-pie:hover,
.computer-value-pie:hover{
  transform:scale(1.04);
}

.value-pie-hole{
  width:76px;
  height:76px;

  border-radius:50%;

  background:
    #191129;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.06);
}

.value-pie-hole strong{
  color:var(--funding-gold-light);

  font-family:var(--font-display);

  font-size:.9rem;

  line-height:1.05;
}

.value-pie-hole span{
  color:#80758F;

  font-size:.48rem;

  letter-spacing:.1em;

  font-weight:800;

  margin-top:2px;
}

.value-change{
  display:flex;

  justify-content:center;

  gap:8px;

  font-size:.7rem;
}

.value-change span{
  color:#847A98;
}

.value-change strong{
  color:var(--funding-green);
}


/* =========================================================
   CENTER GAME AREA
   ========================================================= */

.funding-main{
  min-width:0;

  display:flex;

  flex-direction:column;

  gap:14px;
}


/* =========================================================
   EVENT CARD
   ========================================================= */

.funding-event-card{
  position:relative;

  background:
    linear-gradient(
      145deg,
      #FFF7DE,
      #EDE0BE
    );

  color:var(--ink);

  border-radius:20px;

  padding:
    21px
    24px;

  box-shadow:
    0 9px 0 rgba(0,0,0,.22);

  overflow:hidden;
}

.funding-event-card::after{
  content:"";

  position:absolute;

  right:-50px;
  top:-50px;

  width:140px;
  height:140px;

  border-radius:50%;

  background:
    rgba(229,184,74,.12);
}

.event-card-header{
  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:10px;

  margin-bottom:7px;
}

.event-card-header span:first-child{
  color:#806F52;

  text-transform:uppercase;

  letter-spacing:.12em;

  font-size:.62rem;

  font-weight:800;
}

#fundingEventTag{
  background:#D9C897;

  color:#4A3B1F;

  padding:3px 8px;

  border-radius:999px;

  font-size:.55rem;

  font-weight:800;

  letter-spacing:.08em;
}

.funding-event-card h1{
  font-family:var(--font-display);

  font-size:1.65rem;

  line-height:1.05;

  margin-bottom:6px;
}

.funding-event-card p{
  color:#5E533F;

  line-height:1.5;

  font-size:.87rem;

  max-width:700px;
}


/* =========================================================
   FUNDING DECISION AREA
   ========================================================= */

.funding-decision-header{
  display:flex;

  justify-content:space-between;

  align-items:end;

  gap:14px;

  padding:
    4px
    2px;
}

.funding-decision-header h2{
  font-family:var(--font-display);

  font-size:1.35rem;
}

.funding-decision-header p{
  color:#857B91;

  font-size:.7rem;

  text-align:right;
}

.funding-card-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:12px;
}

.funding-decision-card{
  position:relative;

  min-height:190px;

  border-radius:16px;

  border:
    1px solid rgba(255,255,255,.10);

  background:
    linear-gradient(
      145deg,
      #251B3C,
      #1B132E
    );

  color:var(--parchment);

  padding:
    17px
    16px;

  text-align:left;

  display:flex;

  flex-direction:column;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

button.funding-decision-card{
  cursor:pointer;
}

button.funding-decision-card:hover{
  transform:translateY(-4px);

  border-color:
    rgba(76,224,179,.45);

  box-shadow:
    0 12px 24px rgba(0,0,0,.20);
}

.funding-card-icon{
  width:38px;
  height:38px;

  border-radius:11px;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:1.2rem;

  background:
    rgba(229,184,74,.09);

  border:
    1px solid rgba(229,184,74,.12);

  margin-bottom:9px;
}

.funding-decision-card h3{
  font-family:var(--font-display);

  font-size:1.05rem;

  line-height:1.1;

  margin-bottom:6px;
}

.funding-decision-card p{
  color:#AAA0B9;

  font-size:.72rem;

  line-height:1.45;

  flex:1;
}

.funding-card-footer{
  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-top:13px;

  padding-top:9px;

  border-top:
    1px solid rgba(255,255,255,.06);
}

.funding-card-footer span{
  color:#776C84;

  font-size:.61rem;

  text-transform:uppercase;

  letter-spacing:.08em;

  font-weight:800;
}

.funding-card-footer strong{
  color:var(--funding-gold-light);

  font-size:.72rem;
}


/* =========================================================
   PERSONAL SPENDING
   ========================================================= */

.personal-spending-card{
  cursor:default !important;
}

.personal-spending-card:hover{
  transform:none !important;

  border-color:
    rgba(255,255,255,.10) !important;

  box-shadow:none !important;
}

.personal-spending-options{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:6px;

  margin-top:11px;
}

.personal-spend-btn{
  border:
    1px solid rgba(255,255,255,.13);

  border-radius:9px;

  padding:8px 4px;

  background:
    rgba(255,255,255,.05);

  color:#DDD4E7;

  font-weight:800;

  font-size:.67rem;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.personal-spend-btn:hover{
  background:
    rgba(216,90,90,.15);

  border-color:
    rgba(216,90,90,.55);

  transform:translateY(-2px);
}

.personal-spend-btn.danger-choice{
  color:#FF9A9A;
}


/* =========================================================
   YEAR TIMER
   ========================================================= */

.funding-year-timer{
  padding:
    11px
    14px;

  border-radius:13px;

  background:
    rgba(255,255,255,.035);

  border:
    1px solid rgba(255,255,255,.06);
}

.timer-header{
  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:7px;
}

.timer-header span{
  color:#82778E;

  text-transform:uppercase;

  font-size:.6rem;

  letter-spacing:.1em;

  font-weight:800;
}

.timer-header strong{
  color:var(--funding-gold-light);

  font-family:var(--font-display);

  font-size:.9rem;
}

.timer-track{
  width:100%;

  height:6px;

  border-radius:999px;

  overflow:hidden;

  background:
    rgba(255,255,255,.08);
}

.timer-fill{
  width:100%;

  height:100%;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      var(--funding-green),
      var(--funding-gold)
    );

  transform-origin:left center;
}


/* =========================================================
   BOTTOM EXPLANATION
   ========================================================= */

.funding-bottom-explanation{
  padding:
    14px
    16px;

  border-radius:14px;

  background:
    rgba(76,224,179,.045);

  border:
    1px solid rgba(76,224,179,.12);
}

.funding-bottom-explanation h3{
  font-family:var(--font-display);

  font-size:.98rem;

  color:var(--funding-green);

  margin-bottom:4px;
}

.funding-bottom-explanation p{
  color:#91869D;

  font-size:.68rem;

  line-height:1.5;
}


/* =========================================================
   COMPETITOR
   ========================================================= */

.funding-competitor{
  display:flex;

  flex-direction:column;

  gap:14px;
}

.competitor-panel h2{
  font-family:var(--font-display);

  font-size:1.4rem;

  line-height:1;
}

.competitor-panel > p{
  color:#84798E;

  font-size:.7rem;

  margin-top:2px;
}

.competitor-value{
  margin-top:17px;

  padding:
    13px;

  border-radius:13px;

  background:
    rgba(216,90,90,.06);

  border:
    1px solid rgba(216,90,90,.12);
}

.competitor-value span,
.competitor-rank span,
.competitor-gap span{
  display:block;

  color:#80758C;

  font-size:.59rem;

  text-transform:uppercase;

  letter-spacing:.08em;

  font-weight:800;
}

.competitor-value strong{
  display:block;

  font-family:var(--font-display);

  font-size:1.45rem;

  color:#F1D9D9;

  margin-top:2px;
}

.competitor-rank,
.competitor-gap{
  display:flex;

  justify-content:space-between;

  align-items:center;

  padding-top:10px;

  margin-top:10px;

  border-top:
    1px solid rgba(255,255,255,.05);
}

.competitor-rank strong{
  color:var(--funding-green);

  font-family:var(--font-display);
}

.competitor-gap strong{
  color:#E5D9E6;

  font-size:.75rem;
}

.competitor-mini-chart{
  text-align:center;
}

.competitor-mini-chart .computer-value-pie{
  width:120px;
  height:120px;

  margin:
    10px
    auto
    2px;

  background:
    conic-gradient(
      #B75E83 0deg 100deg,
      #7662BD 100deg 210deg,
      #D15D67 210deg 290deg,
      #9B8B58 290deg 360deg
    );
}


/* =========================================================
   FUNDING DIALOG
   ========================================================= */

.funding-dialog{
  position:relative;

  display:grid;

  grid-template-columns:80px 1fr;

  align-items:center;

  gap:14px;

  padding:14px;

  background:
    rgba(10,7,20,.96);

  border:
    2px solid rgba(229,184,74,.25);

  border-radius:16px;

  box-shadow:
    0 18px 35px rgba(0,0,0,.35);

  z-index:10;
}

.funding-dialog-character{
  display:flex;

  justify-content:center;
}

.funding-dialog-box{
  color:#E7DFF6;

  line-height:1.5;

  font-size:.82rem;
}

.funding-dialog-box .btn{
  margin-top:10px;

  padding:
    8px
    17px;

  font-size:.75rem;
}


/* =========================================================
   MAJOR EVENT SCREEN
   ========================================================= */

#screen-funding-event{
  justify-content:center;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(229,184,74,.08),
      transparent 50%
    );
}

.funding-major-event-wrap{
  width:100%;

  max-width:900px;

  display:flex;

  flex-direction:column;

  align-items:center;

  text-align:center;
}

.major-event-dialog{
  width:100%;

  margin-top:28px;

  display:grid;

  grid-template-columns:180px 1fr;

  align-items:center;

  gap:28px;

  padding:30px;

  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      #241937,
      #171027
    );

  border:
    2px solid rgba(229,184,74,.20);

  box-shadow:
    0 20px 45px rgba(0,0,0,.28);
}

.major-event-character{
  display:flex;

  justify-content:center;
}

.major-event-content{
  text-align:left;

  color:#E7DFF6;

  font-size:1rem;

  line-height:1.65;
}

.major-event-content .dialog-speaker{
  color:var(--funding-gold-light);
}

.major-event-choices{
  width:100%;

  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:14px;

  margin-top:18px;
}


/* =========================================================
   FINAL SCREEN
   ========================================================= */

#screen-funding-finish{
  justify-content:flex-start;

  padding-top:9vh;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(76,224,179,.08),
      transparent 50%
    );
}

.funding-finish-wrap{
  width:100%;

  max-width:1000px;

  display:flex;

  flex-direction:column;

  align-items:center;

  text-align:center;
}

.final-comparison{
  width:100%;

  margin-top:35px;

  display:grid;

  grid-template-columns:
    1fr
    100px
    1fr;

  align-items:center;

  gap:15px;
}

.final-company-card{
  padding:28px;

  border-radius:22px;

  background:
    linear-gradient(
      145deg,
      #211735,
      #171027
    );

  border:
    2px solid rgba(255,255,255,.09);
}

.final-company-card p{
  color:#8D829B;

  text-transform:uppercase;

  letter-spacing:.12em;

  font-size:.7rem;

  font-weight:800;
}

.final-company-card strong{
  display:block;

  color:var(--funding-gold-light);

  font-family:var(--font-display);

  font-size:2.3rem;

  margin-top:4px;
}

.final-company-card span{
  display:block;

  color:#8D829B;

  font-size:.7rem;

  margin-top:4px;
}

.player-final{
  border-color:
    rgba(76,224,179,.25);
}

.computer-final{
  border-color:
    rgba(216,90,90,.25);
}

.final-vs{
  font-family:var(--font-display);

  color:#80758E;

  font-size:1.4rem;

  font-weight:800;
}

.final-result{
  margin-top:22px;

  max-width:700px;

  padding:20px 28px;

  border-radius:18px;

  background:
    rgba(255,255,255,.035);

  border:
    1px solid rgba(255,255,255,.08);
}

.final-result h2{
  color:var(--funding-green);

  font-family:var(--font-display);

  font-size:1.8rem;
}

.final-result p{
  color:#AAA0B6;

  line-height:1.5;

  margin-top:5px;
}

.final-stat-grid{
  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:10px;

  margin-top:18px;
}


/* =========================================================
   RESPONSIVE — LEVEL 3
   ========================================================= */

@media (max-width:1100px){

  .funding-layout{
    grid-template-columns:
      220px
      minmax(0,1fr)
      190px;

    gap:12px;

    padding:
      0
      12px;
  }

  .funding-card-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .funding-decision-header{
    align-items:flex-start;

    flex-direction:column;

    gap:2px;
  }

  .funding-decision-header p{
    text-align:left;
  }
}


@media (max-width:850px){

  .funding-layout{
    grid-template-columns:
      1fr;
  }

  .funding-sidebar{
    display:grid;

    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .funding-competitor{
    display:grid;

    grid-template-columns:
      1fr 1fr;
  }

  .company-panel{
    grid-column:
      span 2;
  }

  .value-panel{
    text-align:center;
  }

  .funding-type-grid{
    grid-template-columns:1fr;

    max-width:600px;
  }

  .foundation-dialog{
    grid-template-columns:100px 1fr;
  }

  .major-event-dialog{
    grid-template-columns:120px 1fr;
  }
}


@media (max-width:640px){

  .screen{
    padding-left:14px;
    padding-right:14px;
  }

  .q-options{
    grid-template-columns:1fr;
  }

  .match-wrap{
    gap:16px;
  }

  .hud{
    gap:8px;
  }

  .hud-nav{
    gap:5px;
  }

  .hud-btn{
    padding:7px 8px;
    font-size:.75rem;
  }

  .hud-btn span{
    display:none;
  }

  .hud-bars{
    min-width:0;
  }

  .menu-actions{
    flex-direction:column;
  }

  .menu-actions .btn{
    width:100%;
    max-width:250px;
  }

  .funding-topbar{
    grid-template-columns:
      auto
      1fr
      auto;

    padding:
      8px
      10px;
  }

  .funding-year-display{
    gap:4px;
  }

  .funding-year-display strong{
    font-size:1.25rem;
  }

  .funding-year-display span{
    font-size:.58rem;
  }

  .funding-topbar-right{
    max-width:95px;
  }

  .funding-industry-label{
    display:none;
  }

  .funding-layout{
    padding:
      0
      10px;
  }

  .funding-sidebar{
    display:flex;
  }

  .funding-competitor{
    display:flex;
  }

  .company-panel{
    grid-column:auto;
  }

  .funding-card-grid{
    grid-template-columns:1fr;
  }

  .foundation-stats{
    grid-template-columns:1fr;
  }

  .foundation-dialog{
    grid-template-columns:1fr;

    text-align:center;
  }

  .foundation-dialog .dialog-content{
    text-align:center;
  }

  .industry-spinner{
    width:260px;
    height:260px;
  }

  .spinner-result{
    min-width:0;

    width:100%;
  }

  .major-event-dialog{
    grid-template-columns:1fr;

    text-align:center;
  }

  .major-event-content{
    text-align:center;
  }

  .major-event-choices{
    grid-template-columns:1fr;
  }

  .final-comparison{
    grid-template-columns:1fr;

    gap:8px;
  }

  .final-vs{
    padding:2px;
  }

  .final-company-card strong{
    font-size:1.9rem;
  }

  .funding-decision-header{
    display:block;
  }

  .funding-decision-header p{
    margin-top:2px;
  }

  .funding-bottom-explanation{
    font-size:.8rem;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}


/* =========================================================
   KEYBOARD FOCUS
   ========================================================= */

button:focus-visible,
.match-node:focus-visible{
  outline:
    3px solid
    var(--candy-lemon);

  outline-offset:2px;
}