/* =========================================================
   THE FALLEN
   CLEAN MASTER STYLE
========================================================= */

:root {
  --red: #9e1d29;
  --red2: #d52f3c;
  --red-glow: rgba(210,35,48,.35);

  --black: #050307;
  --panel: rgba(5,4,7,.90);

  --cream: #d7c8b7;
  --muted: #8d8580;

  --border: rgba(170,125,105,.32);
}


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

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
  background: #050307;

  color: var(--cream);

  font-family:
    "Space Mono",
    monospace;
}

body.modal-open {
  overflow: hidden;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}


/* =========================================================
   MAIN SCREEN
========================================================= */

.screen {
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: auto;
    overflow: visible;
}


/* =========================================================
   BACKGROUND
========================================================= */

.background {
  position: absolute;

  inset: 0;

  overflow: hidden;

  z-index: 0;
}

.background-image {
  position: absolute;

  inset: -4%;

  background-image:
    url("./assets/fallen-background-clean.png");

  background-position:
    center center;

  background-size:
    cover;

  background-repeat:
    no-repeat;

  transform:
    scale(1.055);

  image-rendering:
    pixelated;

  will-change:
    transform;
}

.dark-left {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(3,2,5,.99) 0%,
      rgba(3,2,5,.94) 17%,
      rgba(3,2,5,.72) 34%,
      rgba(3,2,5,.25) 54%,
      transparent 78%
    );
}

.dark-bottom {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      0deg,
      rgba(2,1,4,.96) 0%,
      rgba(2,1,4,.42) 20%,
      transparent 42%
    );
}

.red-atmosphere {
  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 70% 42%,
      rgba(130,20,30,.14),
      transparent 32%
    );
}

.background::before {
  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  right: 12%;
  top: 20%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(190,20,35,.05),
      transparent 70%
    );

  filter:
    blur(35px);

  animation:
    castlePulse 8s
    ease-in-out
    infinite;
}

@keyframes castlePulse {

  0%,
  100% {
    opacity: .35;
    transform: scale(.9);
  }

  50% {
    opacity: .85;
    transform: scale(1.08);
  }

}


/* =========================================================
   NAV
========================================================= */

.nav {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;

  height: 72px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:
    0 3.2vw;

  border-bottom:
    1px solid rgba(180,130,110,.22);

  background:
    rgba(2,2,4,.68);

  backdrop-filter:
    blur(6px);

  z-index: 50;
}

.brand {
  display: flex;

  align-items: center;

  gap: 12px;

  font-family:
    "Cinzel",
    serif;

  font-weight: 600;

  font-size: 15px;

  letter-spacing: 4px;
}

.brand span {
  color: var(--red2);

  font-size: 22px;

  text-shadow:
    0 0 15px
    var(--red-glow);
}

.nav-links {
  position: absolute;

  left: 50%;

  transform:
    translateX(-50%);

  display: flex;

  align-items: center;

  gap: 27px;
}

.nav-links a {
  color: #a79c96;

  font-size: 8px;

  letter-spacing: 3px;

  transition:
    .3s;
}

.nav-links span {
  color: var(--red2);

  font-size: 7px;
}

.nav-links a:hover {
  color: white;

  text-shadow:
    0 0 15px
    var(--red-glow);
}

.nav-right {
  display: flex;

  align-items: center;

  gap: 17px;
}

.live {
  color: var(--red2);

  font-size: 8px;

  letter-spacing: 2px;
}

.live i {
  display: inline-block;

  width: 5px;
  height: 5px;

  margin-right: 5px;

  border-radius: 50%;

  background:
    var(--red2);

  box-shadow:
    0 0 10px
    var(--red2);

  animation:
    pulse 1.5s
    infinite;
}

@keyframes pulse {
  50% {
    opacity: .3;
  }
}

.nav-divider {
  width: 28px;
  height: 1px;

  background:
    rgba(200,170,160,.25);
}

.nav-right a {
  color: #aaa09a;

  font-size: 8px;

  letter-spacing: 2px;
}


/* =========================================================
   HERO
========================================================= */

.hero {
  position: absolute;

  left: 7%;

  top: 50%;

  transform:
    translateY(-45%);

  width: 470px;

  z-index: 10;
}

.hero-inner {
  animation:
    heroIn 1s
    cubic-bezier(.2,.8,.2,1)
    both;
}

@keyframes heroIn {

  from {
    opacity: 0;

    transform:
      translateY(25px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}

.hero-eyebrow {
  display: flex;

  align-items: center;

  gap: 10px;

  color: var(--red2);

  font-size: 8px;

  letter-spacing: 4px;

  margin-bottom: 20px;
}

.hero-eyebrow span {
  width: 35px;
  height: 1px;

  background:
    var(--red2);

  box-shadow:
    0 0 10px
    var(--red-glow);
}

.hero h1 {
  font-family:
    "Cinzel",
    serif;

  font-size:
    clamp(70px, 7vw, 110px);

  line-height:
    .78;

  font-weight: 600;

  letter-spacing:
    -4px;

  color:
    #d9ccbb;

  text-shadow:
    0 8px 35px #000,
    0 0 25px rgba(0,0,0,.5);

  animation:
    titleBreath 8s
    ease-in-out
    infinite;
}

@keyframes titleBreath {

  0%,
  100% {
    text-shadow:
      0 8px 35px #000,
      0 0 25px rgba(0,0,0,.5);
  }

  50% {
    text-shadow:
      0 8px 35px #000,
      0 0 38px rgba(120,20,30,.14);
  }

}

.hero-line {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: 27px;

  color:
    var(--red2);
}

.hero-line span {
  width: 100px;
  height: 1px;

  background:
    var(--red2);
}

.hero p {
  width: 390px;

  margin-top: 24px;

  color: #aaa09b;

  font-size: 9px;

  line-height: 2;
}

.enter-button {
  width: 320px;

  height: 52px;

  margin-top: 24px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:
    0 18px;

  color:
    var(--red2);

  border:
    1px solid
    rgba(200,35,50,.65);

  background:
    rgba(40,4,9,.45);

  cursor: pointer;

  font-size: 8px;

  letter-spacing: 3px;

  transition:
    .3s;

  overflow: hidden;
}

.enter-button:hover {
  color: white;

  background:
    rgba(145,25,35,.8);

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

  transform:
    translateY(-2px);
}

.enter-button span {
  font-size: 16px;
}


/* =========================================================
   RIGHT PANEL
========================================================= */

.panel {
  position: absolute;

  top: 88px;

  right: 2.4vw;

  width:
    min(510px, 31vw);

  bottom: 65px;

  z-index: 25;

  padding:
    14px 14px;

  background:
    linear-gradient(
      180deg,
      rgba(4,3,6,.94),
      rgba(5,4,7,.86)
    );

  border:
    1px solid
    rgba(175,125,105,.42);

  box-shadow:
    inset 0 0 35px rgba(0,0,0,.45),
    0 15px 50px rgba(0,0,0,.35);

  animation:
    panelIn 1s
    .15s
    both,
    panelBreath 8s
    1.5s
    ease-in-out
    infinite;
}

@keyframes panelIn {

  from {
    opacity: 0;

    transform:
      translateX(35px);
  }

  to {
    opacity: 1;

    transform:
      translateX(0);
  }

}

@keyframes panelBreath {

  0%,
  100% {
    border-color:
      rgba(175,125,105,.38);
  }

  50% {
    border-color:
      rgba(190,45,55,.52);
  }

}


/* =========================================================
   PANEL TITLE
========================================================= */

.panel-title {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;
}

.panel-title span {
  color:
    var(--red2);

  font-size: 9px;
}

.panel-title h2 {
  color:
    var(--red2);

  font-family:
    "Cinzel",
    serif;

  font-size: 21px;

  letter-spacing: 3px;

  font-weight: 500;
}

.progress {
  display: flex;

  align-items: baseline;

  justify-content: center;

  gap: 6px;

  margin:
    6px 0 10px;

  color:
    #756c68;

  font-size: 8px;

  letter-spacing: 1px;
}

.progress strong {
  color:
    #bdb0a6;

  font-family:
    "Cinzel",
    serif;

  font-size: 16px;
}


/* =========================================================
   TASKS
========================================================= */

.task {
  position: relative;

  min-height: 88px;

  display: grid;

  grid-template-columns:
    42px 40px 1fr 120px;

  align-items: center;

  gap: 10px;

  padding:
    10px 12px;

  margin-bottom: 6px;

  border:
    1px solid
    rgba(175,125,105,.32);

  background:
    rgba(5,4,7,.78);

  transition:
    transform .3s,
    border .3s,
    background .3s,
    box-shadow .3s;

  overflow: hidden;
}

.task::after {
  content: "";

  position: absolute;

  left: -120%;

  top: 0;

  width: 60%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(210,35,45,.055),
      transparent
    );

  transform:
    skewX(-20deg);

  pointer-events:
    none;

  animation:
    taskShimmer 9s
    ease-in-out
    infinite;
}

@keyframes taskShimmer {

  0%,
  70%,
  100% {
    left: -120%;
  }

  80% {
    left: 150%;
  }

}

.task:hover {
  transform:
    translateX(-3px);

  border-color:
    rgba(200,40,55,.65);

  background:
    rgba(35,5,10,.72);

  box-shadow:
    0 0 25px
    rgba(140,20,30,.12);
}

.task-number {
  color:
    var(--red2);

  font-family:
    "Cinzel",
    serif;

  font-size: 22px;
}

.task-icon {
  color:
    #aaa09a;

  font-size: 23px;

  text-align:
    center;

  transition:
    .4s;
}

.task:hover .task-icon {
  color:
    var(--red2);

  transform:
    scale(1.15)
    rotate(8deg);
}

.task-info small {
  color:
    #91857e;

  font-size: 6px;

  letter-spacing: 2px;
}

.task-info h3 {
  margin-top: 6px;

  color:
    #bdb0a5;

  font-family:
    "Cinzel",
    serif;

  font-size: 12px;

  font-weight: 500;

  letter-spacing: 1px;
}

.task-button {
  height: 38px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:
    0 12px;

  color:
    var(--red2);

  border:
    1px solid
    rgba(190,30,45,.7);

  background:
    rgba(55,5,10,.4);

  cursor: pointer;

  font-size: 7px;

  letter-spacing: 1.5px;

  transition:
    .3s;
}

.task-button span {
  font-size: 13px;

  transition:
    .3s;
}

.task-button:hover:not(:disabled) {
  color: white;

  background:
    var(--red);

  box-shadow:
    0 0 25px
    rgba(190,30,45,.2);
}

.task-button:hover:not(:disabled) span {
  transform:
    translate(2px,-2px);
}


/* =========================================================
   LOCKED
========================================================= */

.task.locked {
  opacity: .38;

  filter:
    grayscale(.8);

  cursor:
    not-allowed;
}

.task.locked:hover {
  transform: none;

  border-color:
    rgba(175,125,105,.25);

  box-shadow: none;

  background:
    rgba(5,4,7,.78);
}

.task.locked .task-number {
  color:
    #5b5250;
}

.task.locked .task-icon {
  color:
    #514b49;
}

.task.locked .task-info h3 {
  color:
    #716965;
}

.task.locked .task-button {
  color:
    #665e5a;

  border-color:
    rgba(120,110,105,.2);

  background:
    rgba(10,9,11,.8);

  cursor:
    not-allowed;
}


/* =========================================================
   WAITING / VERIFY
========================================================= */

.task.waiting {
  border-color:
    rgba(195,50,61,.75);

  box-shadow:
    inset 3px 0
      var(--red2),
    0 0 30px
      rgba(120,15,25,.12);
}

.task.waiting .task-button {
  background:
    rgba(110,15,23,.35);

  border-color:
    rgba(195,50,61,.8);

  animation:
    verifyPulse 2s
    ease-in-out
    infinite;
}

@keyframes verifyPulse {

  0%,
  100% {
    box-shadow:
      0 0 0
      rgba(195,50,61,0);
  }

  50% {
    box-shadow:
      0 0 20px
      rgba(195,50,61,.2);
  }

}


/* =========================================================
   COMPLETED
========================================================= */

.task.completed {
  border-color:
    rgba(92,130,95,.48);

  background:
    rgba(20,35,22,.35);

  opacity: 1;

  filter: none;
}

.task.completed .task-number,
.task.completed .task-icon {
  color:
    #79967c;
}

.task.completed .task-button {
  color:
    #79967c;

  border-color:
    rgba(92,130,95,.5);

  background:
    rgba(20,35,22,.25);

  cursor:
    default;
}


/* =========================================================
   COMPLETION ANIMATION
========================================================= */

.task-completing {
  animation:
    taskComplete
    .55s
    cubic-bezier(.2,.8,.2,1);
}

@keyframes taskComplete {

  0% {
    transform:
      scale(1);

    box-shadow:
      0 0 0
      rgba(210,35,48,0);
  }

  40% {
    transform:
      scale(1.025);

    box-shadow:
      0 0 35px
      rgba(210,35,48,.3);
  }

  100% {
    transform:
      scale(1);
  }

}


/* =========================================================
   FINAL GATE
========================================================= */

.final-gate {
  margin-top: 7px;

  padding:
    13px 13px;

  border:
    1px solid
    rgba(175,125,105,.38);

  background:
    rgba(3,3,5,.78);

  transition:
    .4s;
}

.final-gate.locked {
  opacity: .43;

  filter:
    grayscale(.7);
}

.final-gate.locked::after {
  content:
    "COMPLETE THE TRIALS";

  display:
    block;

  margin-top:
    7px;

  color:
    #625a56;

  text-align:
    center;

  font-size:
    5px;

  letter-spacing:
    2px;
}

.final-gate.locked input,
.final-gate.locked button {
  cursor:
    not-allowed;
}

.final-gate.unlocked {
  opacity: 1;

  filter: none;

  border-color:
    rgba(195,50,61,.6);

  box-shadow:
    0 0 35px
    rgba(150,20,30,.1);
}

.gate-title {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;
}

.gate-title span {
  color:
    var(--red2);

  font-size: 8px;
}

.gate-title h2 {
  color:
    var(--red2);

  font-family:
    "Cinzel",
    serif;

  font-size: 16px;

  font-weight: 500;

  letter-spacing: 2px;
}

.final-gate > p {
  margin:
    7px 0 10px;

  color:
    #8d837d;

  text-align:
    center;

  font-size: 6px;

  letter-spacing: 1px;
}


/* =========================================================
   WALLET
========================================================= */

.wallet-input {
  height: 42px;

  display: flex;

  align-items:
    center;

  border:
    1px solid
    rgba(175,125,105,.35);

  background:
    rgba(0,0,0,.5);
}

.wallet-input span {
  padding-left:
    12px;

  color:
    var(--red2);
}

.wallet-input input {
  width: 100%;

  height: 100%;

  padding:
    0 10px;

  outline: none;

  border: 0;

  color: white;

  background:
    transparent;

  font-size: 7px;
}

.wallet-input input::placeholder {
  color:
    #625a56;
}

.wallet-input input.error {
  animation:
    walletShake
    .4s;
}

@keyframes walletShake {

  20% {
    transform:
      translateX(-5px);
  }

  40% {
    transform:
      translateX(5px);
  }

  60% {
    transform:
      translateX(-4px);
  }

  80% {
    transform:
      translateX(4px);
  }

  100% {
    transform:
      translateX(0);
  }

}

.final-gate form > button {
  width: 100%;

  height: 40px;

  margin-top:
    5px;

  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    0 13px;

  color:
    #d0c4b9;

  background:
    rgba(35,30,29,.6);

  border:
    1px solid
    rgba(175,125,105,.25);

  cursor:
    pointer;

  font-size:
    7px;

  letter-spacing:
    2px;

  transition:
    .3s;
}

.final-gate form > button:hover:not(:disabled) {
  color:
    white;

  border-color:
    var(--red2);

  background:
    rgba(100,15,25,.65);
}

.final-gate form > button span {
  color:
    var(--red2);

  font-size:
    16px;
}

.wallet-note {
  display:
    block;

  margin-top:
    8px;

  color:
    #5d5652;

  text-align:
    center;

  font-size:
    5px;

  letter-spacing:
    1px;
}

.wallet-success {
  display:
    none;

  margin-top:
    8px;

  color:
    #77957b;

  text-align:
    center;

  font-size:
    7px;

  letter-spacing:
    2px;
}

.wallet-success.show {
  display:
    block;

  animation:
    success
    .5s
    ease
    both;
}

@keyframes success {

  from {
    opacity: 0;

    transform:
      translateY(6px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


/* =========================================================
   FINAL GATE MODAL
========================================================= */

#fallenTaskModal {
  position: fixed;

  inset: 0;

  display: flex;

  align-items:
    center;

  justify-content:
    center;

  opacity: 0;

  visibility:
    hidden;

  pointer-events:
    none;

  z-index:
    999999;

  transition:
    opacity .3s,
    visibility .3s;
}

#fallenTaskModal.show {
  opacity: 1;

  visibility:
    visible;

  pointer-events:
    auto;
}

.fallen-modal-backdrop {
  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at center,
      rgba(120,15,25,.14),
      rgba(0,0,0,.88) 60%,
      rgba(0,0,0,.97)
    );

  backdrop-filter:
    blur(9px);
}

.fallen-modal {
  position: relative;

  width:
    min(550px, 90vw);

  padding:
    48px 45px;

  text-align:
    center;

  background:
    linear-gradient(
      145deg,
      rgba(16,7,10,.99),
      rgba(5,4,6,.99)
    );

  border:
    1px solid
    rgba(195,50,61,.48);

  box-shadow:
    0 40px 120px
      rgba(0,0,0,.8),
    0 0 80px
      rgba(120,15,25,.12);

  transform:
    translateY(18px)
    scale(.97);

  transition:
    transform .4s
    cubic-bezier(.2,.8,.2,1);
}

#fallenTaskModal.show
.fallen-modal {
  transform:
    translateY(0)
    scale(1);
}

.fallen-modal::before,
.fallen-modal::after {
  content: "";

  position:
    absolute;

  width:
    35px;

  height:
    35px;

  border-color:
    rgba(195,50,61,.7);

  border-style:
    solid;
}

.fallen-modal::before {
  top: 12px;
  left: 12px;

  border-width:
    1px 0 0 1px;
}

.fallen-modal::after {
  right: 12px;
  bottom: 12px;

  border-width:
    0 1px 1px 0;
}

.fallen-modal-rune {
  color:
    var(--red2);

  font-family:
    "Cinzel",
    serif;

  font-size:
    34px;

  margin-bottom:
    12px;

  text-shadow:
    0 0 25px
    rgba(195,50,61,.45);
}

.fallen-modal-label {
  color:
    var(--red2);

  font-size:
    7px;

  letter-spacing:
    5px;

  margin-bottom:
    18px;
}

.fallen-modal h2 {
  font-family:
    "Cinzel",
    serif;

  font-size:
    clamp(30px, 4vw, 48px);

  font-weight:
    500;

  line-height:
    .95;

  color:
    #f1ece7;
}

.fallen-modal h2 em {
  color:
    #827875;

  font-style:
    normal;
}

.fallen-modal p {
  max-width:
    390px;

  margin:
    22px auto 30px;

  color:
    #8f8785;

  font-size:
    9px;

  line-height:
    2;
}

.fallen-modal-actions {
  display:
    grid;

  grid-template-columns:
    1fr 1.5fr;

  gap:
    8px;
}

.fallen-modal-actions button {
  height:
    50px;

  border:
    1px solid;

  cursor:
    pointer;

  font-family:
    "Space Mono",
    monospace;

  font-size:
    7px;

  letter-spacing:
    2px;

  transition:
    .3s;
}

.fallen-modal-cancel {
  color:
    #77706e;

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

  border-color:
    rgba(255,255,255,.1);
}

.fallen-modal-cancel:hover {
  color:
    #ddd;

  border-color:
    rgba(255,255,255,.25);
}

.fallen-modal-confirm {
  color:
    white;

  background:
    rgba(105,12,20,.45);

  border-color:
    rgba(195,50,61,.65);
}

.fallen-modal-confirm:hover {
  background:
    var(--red);

  box-shadow:
    0 0 40px
    rgba(195,50,61,.2);
}

.fallen-modal-confirm span {
  margin-left:
    22px;

  color:
    #e34a54;

  font-size:
    15px;
}


/* =========================================================
   TOAST
========================================================= */

#fallenToast {
  position:
    fixed;

  left:
    50%;

  bottom:
    35px;

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

  padding:
    13px 22px;

  color:
    #d8cabc;

  background:
    rgba(8,4,7,.96);

  border:
    1px solid
    rgba(195,50,61,.55);

  box-shadow:
    0 15px 50px
    rgba(0,0,0,.5);

  font-size:
    7px;

  letter-spacing:
    2px;

  opacity:
    0;

  visibility:
    hidden;

  z-index:
    1000000;

  transition:
    .3s;
}

#fallenToast.show {
  opacity:
    1;

  visibility:
    visible;

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


/* =========================================================
   PANEL UNLOCK
========================================================= */

.unlock-flash {
  animation:
    unlockFlash
    .75s
    ease;
}

@keyframes unlockFlash {

  0% {
    box-shadow:
      inset 0 0 35px
      rgba(0,0,0,.45),
      0 0 0
      rgba(210,35,48,0);
  }

  40% {
    box-shadow:
      inset 0 0 35px
      rgba(0,0,0,.45),
      0 0 50px
      rgba(210,35,48,.3);
  }

  100% {
    box-shadow:
      inset 0 0 35px
      rgba(0,0,0,.45),
      0 0 0
      rgba(210,35,48,0);
  }

}

.panel-attention {
  animation:
    panelAttention
    .7s
    ease;
}

@keyframes panelAttention {

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

  35% {
    transform:
      translateX(-7px);
  }

  65% {
    transform:
      translateX(5px);
  }

}


/* =========================================================
   EMBERS
========================================================= */

.embers {
  position:
    fixed;

  inset:
    0;

  pointer-events:
    none;

  z-index:
    18;

  overflow:
    hidden;
}

.ember {
  position:
    absolute;

  bottom:
    -10px;

  width:
    2px;

  height:
    2px;

  border-radius:
    50%;

  background:
    #d93240;

  box-shadow:
    0 0 8px
    #d93240;

  animation:
    rise
    linear
    infinite;
}

@keyframes rise {

  from {
    transform:
      translateY(20px);

    opacity:
      0;
  }

  15% {
    opacity:
      .8;
  }

  to {
    transform:
      translateY(-110vh)
      translateX(80px);

    opacity:
      0;
  }

}


/* =========================================================
   FOG
========================================================= */

.fog-layer {
  position:
    fixed;

  inset:
    0;

  overflow:
    hidden;

  pointer-events:
    none;

  z-index:
    14;
}

.fog {
  position:
    absolute;

  width:
    75vw;

  height:
    150px;

  border-radius:
    50%;

  background:
    radial-gradient(
      ellipse,
      rgba(135,120,135,.10),
      transparent 72%
    );

  filter:
    blur(24px);

  opacity:
    .5;
}

.fog-a {
  left:
    -20vw;

  bottom:
    9%;

  animation:
    fogA
    24s
    ease-in-out
    infinite
    alternate;
}

.fog-b {
  right:
    -25vw;

  bottom:
    19%;

  opacity:
    .35;

  animation:
    fogB
    31s
    ease-in-out
    infinite
    alternate;
}

@keyframes fogA {

  from {
    transform:
      translateX(-5vw);
  }

  to {
    transform:
      translateX(30vw)
      scale(1.18);
  }

}

@keyframes fogB {

  from {
    transform:
      translateX(10vw)
      scale(1.1);
  }

  to {
    transform:
      translateX(-30vw)
      scale(.95);
  }

}


/* =========================================
   THE FALLEN — RAVENS
========================================= */

.flight-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 30;
}

/* hide the original ◆ characters */
.flight {
  position: absolute;
  width: 46px;
  height: 28px;
  font-size: 0;
  opacity: 0;
}

/* raven body */
.flight::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 11px;

  width: 13px;
  height: 7px;

  background: #050508;
  border-radius: 70% 45% 60% 45%;

  transform: rotate(-4deg);
}

/* wings */
.flight::after {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;

  width: 46px;
  height: 21px;

  background:
    linear-gradient(
      145deg,
      transparent 0 35%,
      #050508 36% 48%,
      transparent 49%
    ),
    linear-gradient(
      35deg,
      transparent 0 35%,
      #050508 36% 48%,
      transparent 49%
    );

  clip-path: polygon(
    0 18%,
    15% 28%,
    32% 42%,
    42% 47%,
    50% 44%,
    58% 47%,
    68% 40%,
    86% 27%,
    100% 15%,
    88% 48%,
    72% 61%,
    60% 65%,
    50% 61%,
    40% 66%,
    27% 60%,
    12% 48%
  );
}


/* =========================================
   RAVEN 01 — MAIN
========================================= */

.flight-1 {
  top: 22%;
  left: -70px;

  transform: scale(1.15);

  animation: ravenOne 24s linear infinite;
}


/* =========================================
   RAVEN 02 — SMALL
========================================= */

.flight-2 {
  top: 30%;
  left: -70px;

  transform: scale(.65);

  animation: ravenTwo 31s linear infinite;
  animation-delay: -10s;
}


/* =========================================
   RAVEN 03 — DISTANT
========================================= */

.flight-3 {
  top: 17%;
  left: -70px;

  transform: scale(.45);

  animation: ravenThree 38s linear infinite;
  animation-delay: -20s;
}


/* =========================================
   RAVEN 04 — DISTANT
========================================= */

.flight-4 {
  top: 38%;
  left: -70px;

  transform: scale(.75);

  animation: ravenFour 29s linear infinite;
  animation-delay: -15s;
}


/* =========================================
   RAVEN ANIMATIONS
========================================= */

@keyframes ravenOne {

  0% {
    transform:
      translate(-80px, 25px)
      scale(1.15);

    opacity: 0;
  }

  8% {
    opacity: .48;
  }

  25% {
    transform:
      translate(25vw, -20px)
      scale(1.15);
  }

  50% {
    transform:
      translate(52vw, 15px)
      scale(1.05);

    opacity: .42;
  }

  75% {
    transform:
      translate(78vw, -30px)
      scale(.95);

    opacity: .3;
  }

  100% {
    transform:
      translate(115vw, 20px)
      scale(.8);

    opacity: 0;
  }
}


@keyframes ravenTwo {

  0% {
    transform:
      translate(-80px, 10px)
      scale(.65);

    opacity: 0;
  }

  10% {
    opacity: .3;
  }

  50% {
    transform:
      translate(55vw, -25px)
      scale(.65);

    opacity: .26;
  }

  100% {
    transform:
      translate(115vw, 15px)
      scale(.5);

    opacity: 0;
  }
}


@keyframes ravenThree {

  0% {
    transform:
      translate(-80px, 0)
      scale(.45);

    opacity: 0;
  }

  12% {
    opacity: .22;
  }

  50% {
    transform:
      translate(50vw, -35px)
      scale(.45);

    opacity: .18;
  }

  100% {
    transform:
      translate(115vw, 10px)
      scale(.35);

    opacity: 0;
  }
}


@keyframes ravenFour {

  0% {
    transform:
      translate(-80px, 15px)
      scale(.75);

    opacity: 0;
  }

  10% {
    opacity: .32;
  }

  50% {
    transform:
      translate(65vw, -20px)
      scale(.7);

    opacity: .25;
  }

  100% {
    transform:
      translate(115vw, 25px)
      scale(.55);

    opacity: 0;
  }
}


/* =========================================================
   CURSOR
========================================================= */

.cursor-glow {
  position:
    fixed;

  width:
    280px;

  height:
    280px;

  border-radius:
    50%;

  pointer-events:
    none;

  z-index:
    30;

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

  background:
    radial-gradient(
      circle,
      rgba(190,30,45,.14),
      transparent 68%
    );

  mix-blend-mode:
    screen;
}


/* =========================================================
   GRAIN
========================================================= */

.grain {
  position:
    fixed;

  inset:
    0;

  pointer-events:
    none;

  z-index:
    100;

  opacity:
    .035;

  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* =========================================================
   ATMOSPHERE
========================================================= */

.atmosphere {
  position:
    fixed;

  inset:
    0;

  pointer-events:
    none;

  z-index:
    17;

  background:
    radial-gradient(
      ellipse at 48% 28%,
      rgba(180,25,35,.08),
      transparent 30%
    ),
    radial-gradient(
      ellipse at 70% 70%,
      rgba(100,20,35,.07),
      transparent 35%
    );

  animation:
    atmosphereBreath
    9s
    ease-in-out
    infinite;
}

@keyframes atmosphereBreath {

  0%,
  100% {
    opacity:
      .65;
  }

  50% {
    opacity:
      1;
  }

}


/* =========================================================
   FOOTER
========================================================= */

footer {
  position:
    absolute;

  left:
    0;

  bottom:
    0;

  width:
    100%;

  height:
    50px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    0 4vw;

  border-top:
    1px solid
    rgba(175,125,105,.25);

  background:
    rgba(2,2,4,.78);

  z-index:
    20;

  color:
    #756b66;

  font-size:
    6px;

  letter-spacing:
    2px;
}

footer strong {
  color:
    var(--red2);

  font-weight:
    400;
}

footer a:hover {
  color:
    white;
}


/* =========================================================
   INTRO SCREEN
========================================================= */

.intro-screen {
  position:
    fixed !important;

  inset:
    0 !important;

  width:
    100vw !important;

  height:
    100vh !important;

  min-width:
    100vw !important;

  min-height:
    100vh !important;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  background:
    #030206;

  color:
    #d8cabc;

  z-index:
    999999;

  opacity:
    1;

  transition:
    opacity .7s ease;
}


/* INTRO BACKGROUND */

.intro-bg {
  position:
    absolute;

  inset:
    -5%;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(125,20,35,.20),
      transparent 28%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(80,10,20,.15),
      transparent 45%
    ),
    linear-gradient(
      180deg,
      #030205,
      #08040a 55%,
      #020103
    );

  animation:
    introBreath
    8s
    ease-in-out
    infinite;
}

@keyframes introBreath {

  0%,
  100% {
    transform:
      scale(1);
  }

  50% {
    transform:
      scale(1.025);
  }

}

.intro-vignette {
  position:
    absolute;

  inset:
    0;

  background:
    radial-gradient(
      ellipse at center,
      transparent 15%,
      rgba(0,0,0,.45) 65%,
      rgba(0,0,0,.92) 100%
    );

  pointer-events:
    none;
}


/* =========================================================
   LOADING
========================================================= */

.loading-content {
  position:
    absolute;

  left:
    50%;

  top:
    50%;

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

  width:
    min(420px,80vw);

  text-align:
    center;

  z-index:
    30;

  transition:
    opacity .45s ease,
    transform .45s ease;
}

.loading-content.loading-hidden {
  opacity:
    0;

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

.intro-symbol {
  color:
    #c62c3b;

  font-family:
    "Cinzel",
    serif;

  font-size:
    34px;

  margin-bottom:
    14px;

  text-shadow:
    0 0 25px
    rgba(200,35,50,.5);

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

@keyframes symbolPulse {

  0%,
  100% {
    opacity:
      .55;

    transform:
      scale(.95);
  }

  50% {
    opacity:
      1;

    transform:
      scale(1.05);
  }

}

.intro-name {
  font-family:
    "Cinzel",
    serif;

  font-size:
    24px;

  letter-spacing:
    8px;

  color:
    #d6c8b8;
}

.loading-rune {
  margin:
    25px 0 18px;

  color:
    #a72230;

  font-size:
    11px;

  animation:
    runeRotate
    6s
    linear
    infinite;
}

@keyframes runeRotate {
  to {
    transform:
      rotate(360deg);
  }
}

.loading-text {
  color:
    #756b67;

  font-size:
    6px;

  letter-spacing:
    3px;

  margin-bottom:
    13px;
}

.loading-bar {
  width:
    100%;

  height:
    2px;

  background:
    rgba(180,150,140,.12);

  overflow:
    hidden;
}

.loading-bar span {
  display:
    block;

  width:
    0%;

  height:
    100%;

  background:
    linear-gradient(
      90deg,
      #64101a,
      #d42f3e
    );

  box-shadow:
    0 0 12px
    rgba(210,35,50,.7);

  transition:
    width .1s linear;
}

.loading-percent {
  margin-top:
    12px;

  color:
    #b9aaa0;

  font-family:
    "Cinzel",
    serif;

  font-size:
    16px;

  letter-spacing:
    2px;
}


/* =========================================================
   GATE
========================================================= */

.gate-content {
  position:
    absolute;

  left:
    50%;

  top:
    50%;

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

  width:
    min(700px,90vw);

  text-align:
    center;

  opacity:
    0;

  pointer-events:
    none;

  z-index:
    40;

  transition:
    opacity .8s ease,
    transform .8s ease;
}

.gate-content.show {
  opacity:
    1;

  pointer-events:
    auto;

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

.gate-rune {
  color:
    #c52c3a;

  font-family:
    "Cinzel",
    serif;

  font-size:
    36px;

  margin-bottom:
    20px;

  text-shadow:
    0 0 30px
    rgba(200,30,45,.45);
}

.gate-eyebrow {
  color:
    #9b282f;

  font-size:
    7px;

  letter-spacing:
    5px;

  margin-bottom:
    20px;
}

.gate-content h2 {
  font-family:
    "Cinzel",
    serif;

  font-size:
    clamp(48px,6vw,80px);

  line-height:
    .85;

  font-weight:
    500;

  letter-spacing:
    -2px;

  color:
    #d8cabc;

  text-shadow:
    0 10px 40px #000;
}

.gate-content h2 em {
  color:
    #807570;

  font-style:
    normal;
}

.gate-divider {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  margin:
    28px 0;

  color:
    #b32634;

  font-size:
    9px;
}

.gate-divider span {
  width:
    90px;

  height:
    1px;

  background:
    rgba(190,35,50,.55);
}

.gate-content p {
  color:
    #8e8580;

  font-size:
    8px;

  line-height:
    2;

  margin-bottom:
    28px;
}


/* =========================================================
   UNLOCK BUTTON
========================================================= */

.unlock-button {
  position:
    relative;

  width:
    300px;

  height:
    58px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin:
    auto;

  padding:
    0 20px;

  color:
    #d8cabc;

  border:
    1px solid
    rgba(200,35,50,.65);

  background:
    rgba(50,5,10,.45);

  cursor:
    pointer;

  overflow:
    hidden;

  font-size:
    8px;

  letter-spacing:
    3px;

  transition:
    .35s;
}

.unlock-button::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    -100%;

  width:
    70%;

  height:
    100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,70,80,.15),
      transparent
    );

  transform:
    skewX(-20deg);

  animation:
    gateShimmer
    4s
    ease-in-out
    infinite;
}

@keyframes gateShimmer {

  0%,
  65% {
    left:
      -100%;
  }

  80%,
  100% {
    left:
      140%;
  }

}

.unlock-button b {
  color:
    #d42f3e;

  font-size:
    18px;

  font-weight:
    400;
}

.unlock-button:hover {
  color:
    white;

  background:
    rgba(140,20,30,.75);

  border-color:
    #d42f3e;

  box-shadow:
    0 0 45px
    rgba(190,25,40,.25);

  transform:
    translateY(-2px);
}

.gate-content > small {
  display:
    block;

  margin-top:
    16px;

  color:
    #4e4744;

  font-size:
    5px;

  letter-spacing:
    3px;
}


/* =========================================================
   GATE DOORS
========================================================= */

.gate-door {
  position:
    absolute;

  top:
    0;

  width:
    50%;

  height:
    100%;

  z-index:
    20;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      #070509,
      #10070c
    );

  transition:
    transform
    1.25s
    cubic-bezier(.77,0,.18,1);
}

.gate-door-left {
  left:
    0;

  border-right:
    1px solid
    rgba(180,30,45,.18);

  transform:
    translateX(0);
}

.gate-door-right {
  right:
    0;

  border-left:
    1px solid
    rgba(180,30,45,.18);

  transform:
    translateX(0);
}

.intro-screen.ready .gate-door-left,
.intro-screen.exit .gate-door-left {
  transform:
    translateX(-100%);
}

.intro-screen.ready .gate-door-right,
.intro-screen.exit .gate-door-right {
  transform:
    translateX(100%);
}

.intro-screen.exit {
  opacity:
    0;

  pointer-events:
    none;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px) {

  .panel {
    width:
      min(500px,42vw);
  }

  .hero {
    left:
      5%;

    width:
      430px;
  }

}

@media(max-width:850px) {

  html,
  body {
    overflow:
      auto;
  }

  .screen {
    height:
      auto;

    min-height:
      100vh;

    overflow:
      visible;
  }

  .nav-links {
    display:
      none;
  }

  .hero {
    position:
      relative;

    left:
      auto;

    top:
      auto;

    transform:
      none;

    width:
      86%;

    margin:
      110px auto 40px;
  }

  .hero h1 {
    font-size:
      64px;
  }

  .hero p {
    width:
      100%;
  }

  .panel {
    position:
      relative;

    top:
      auto;

    right:
      auto;

    bottom:
      auto;

    width:
      92%;

    margin:
      0 auto 70px;
  }

  footer {
    position:
      relative;

    height:
      auto;

    min-height:
      70px;

    gap:
      12px;

    flex-direction:
      column;

    justify-content:
      center;

    padding:
      15px;
  }

}

@media(max-width:600px) {

  .intro-name {
    font-size:
      18px;

    letter-spacing:
      5px;
  }

  .gate-content h2 {
    font-size:
      45px;
  }

  .unlock-button {
    width:
      270px;
  }

  .task {
    grid-template-columns:
      34px 30px 1fr 92px;

    gap:
      7px;

    padding:
      9px;
  }

  .task-info h3 {
    font-size:
      9px;
  }

  .task-button {
    font-size:
      6px;
  }

  .fallen-modal {
    padding:
      40px 25px;
  }

  .fallen-modal-actions {
    grid-template-columns:
      1fr;
  }

}
/* =========================================================
   THE FALLEN — READABILITY / TYPOGRAPHY UPGRADE
   Paste this at the VERY END of style.css
========================================================= */


/* =========================================================
   NAVIGATION
========================================================= */

.nav .brand {
  font-size: 17px !important;
  letter-spacing: 4px !important;
}

.nav-links a {
  font-size: 10px !important;
  letter-spacing: 3px !important;
}

.nav-links span {
  font-size: 9px !important;
}

.live {
  font-size: 10px !important;
  letter-spacing: 2px !important;
}

.nav-right a {
  font-size: 10px !important;
}


/* =========================================================
   HERO
========================================================= */

.hero-eyebrow {
  font-size: 10px !important;
  letter-spacing: 4px !important;
}

.hero h1 {
  font-size:
    clamp(82px, 7.5vw, 125px) !important;

  line-height: .80 !important;

  letter-spacing: -4px !important;
}

.hero p {
  width: 430px !important;

  color: #c1b5ac !important;

  font-size: 11px !important;

  line-height: 1.9 !important;
}

.enter-button {
  height: 56px !important;

  font-size: 10px !important;

  letter-spacing: 3px !important;
}


/* =========================================================
   TRIALS PANEL
========================================================= */

.panel-title h2 {
  font-size: 25px !important;

  letter-spacing: 3px !important;
}

.panel-title span {
  font-size: 11px !important;
}

.progress {
  margin:
    9px 0 14px !important;

  font-size: 10px !important;

  color: #aaa09a !important;
}

.progress strong {
  font-size: 19px !important;

  color: #ddd0c5 !important;
}


/* =========================================================
   TASK CARDS
========================================================= */

.task {
  min-height: 92px !important;

  grid-template-columns:
    48px 42px 1fr 130px !important;

  padding:
    12px 14px !important;
}


/* TASK NUMBER */

.task-number {
  font-size: 25px !important;

  color: #c52b39 !important;
}


/* TASK ICON */

.task-icon {
  font-size: 25px !important;

  color: #b7aca5 !important;
}


/* SMALL CATEGORY TEXT
   THE FIRST OATH / BLOOD MARK / etc.
*/

.task-info small {
  display: block !important;

  color: #b5aaa2 !important;

  font-size: 8px !important;

  letter-spacing: 2.5px !important;

  line-height: 1.4 !important;
}


/* MAIN TASK TEXT
   FOLLOW THE FALLEN / LIKE THE SIGNAL / etc.
*/

.task-info h3 {
  margin-top: 7px !important;

  color: #ddd1c6 !important;

  font-size: 14px !important;

  line-height: 1.35 !important;

  letter-spacing: 1px !important;

  font-weight: 600 !important;
}


/* BUTTONS */

.task-button {
  height: 42px !important;

  padding:
    0 13px !important;

  color: #d94752 !important;

  font-size: 9px !important;

  letter-spacing: 2px !important;
}

.task-button span {
  font-size: 15px !important;
}


/* LOCKED TASKS */

.task.locked .task-info small {
  color: #756d69 !important;
}

.task.locked .task-info h3 {
  color: #77706d !important;
}

.task.locked .task-number {
  color: #625b58 !important;
}

.task.locked .task-icon {
  color: #625b58 !important;
}


/* COMPLETED */

.task.completed .task-info small {
  color: #9eaf9f !important;
}

.task.completed .task-info h3 {
  color: #c1d0c2 !important;
}


/* =========================================================
   FINAL GATE
========================================================= */

.gate-title h2 {
  font-size: 19px !important;

  letter-spacing: 2px !important;
}

.gate-title span {
  font-size: 10px !important;
}

.final-gate > p {
  font-size: 8px !important;

  color: #99908a !important;

  letter-spacing: 1.5px !important;
}


/* WALLET INPUT */

.wallet-input {
  height: 46px !important;
}

.wallet-input input {
  font-size: 9px !important;

  color: #ddd4cc !important;
}

.wallet-input input::placeholder {
  color: #827a76 !important;

  opacity: 1 !important;
}


/* SUBMIT */

.final-gate form > button {
  height: 44px !important;

  font-size: 9px !important;

  letter-spacing: 2px !important;
}

.wallet-note {
  font-size: 6px !important;

  color: #756d69 !important;
}

.wallet-success {
  font-size: 8px !important;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
  font-size: 8px !important;

  letter-spacing: 2px !important;
}

footer strong {
  font-size: 8px !important;
}


/* =========================================================
   INTRO / LOADING SCREEN
========================================================= */

.intro-name {
  font-size: 30px !important;

  letter-spacing: 9px !important;
}

.loading-text {
  font-size: 8px !important;

  letter-spacing: 3px !important;

  color: #9d928c !important;
}

.loading-percent {
  font-size: 19px !important;

  color: #d0c1b6 !important;
}

.gate-eyebrow {
  font-size: 9px !important;

  letter-spacing: 5px !important;

  color: #b32a36 !important;
}

.gate-content h2 {
  font-size:
    clamp(58px, 6vw, 88px) !important;

  line-height: .86 !important;
}

.gate-content p {
  font-size: 10px !important;

  line-height: 1.9 !important;

  color: #a49a94 !important;
}

.unlock-button {
  height: 62px !important;

  width: 330px !important;

  font-size: 9px !important;

  letter-spacing: 3px !important;
}

.gate-content > small {
  font-size: 6px !important;

  letter-spacing: 3px !important;
}


/* =========================================================
   VERIFICATION WINDOW
========================================================= */

.verification-box > small {
  font-size: 8px !important;

  letter-spacing: 4px !important;
}

.verification-box h2 {
  font-size:
    clamp(36px, 4vw, 54px) !important;
}

.verification-box p {
  font-size: 10px !important;

  line-height: 1.9 !important;

  color: #aaa09a !important;
}

.verification-actions button {
  font-size: 8px !important;

  letter-spacing: 2px !important;
}


/* =========================================================
   GENERAL CONTRAST
========================================================= */

/*
   Yazıları arka plandan biraz daha ayırıyoruz.
*/

.panel,
.final-gate,
.task {
  text-shadow:
    0 1px 8px rgba(0,0,0,.8);
}

.task-info h3,
.panel-title h2,
.gate-title h2 {
  text-shadow:
    0 1px 10px rgba(0,0,0,.95);
}


/* =========================================================
   DESKTOP — 1600px+
========================================================= */

@media (min-width: 1500px) {

  .panel {
    width:
      min(540px, 31vw) !important;
  }

  .task {
    min-height: 96px !important;
  }

  .task-info small {
    font-size: 9px !important;
  }

  .task-info h3 {
    font-size: 15px !important;
  }

  .task-button {
    font-size: 10px !important;
  }

  .panel-title h2 {
    font-size: 27px !important;
  }

  .progress {
    font-size: 11px !important;
  }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

  .task-info h3 {
    font-size: 12px !important;
  }

  .task-info small {
    font-size: 7px !important;
  }

  .task-button {
    font-size: 8px !important;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .intro-name {
    font-size: 20px !important;

    letter-spacing: 5px !important;
  }

  .loading-text {
    font-size: 7px !important;
  }

  .gate-content h2 {
    font-size: 46px !important;
  }

  .gate-content p {
    font-size: 9px !important;
  }

  .hero h1 {
    font-size: 65px !important;
  }

  .hero p {
    width: 100% !important;

    font-size: 10px !important;
  }

  .task {
    grid-template-columns:
      35px 32px 1fr 95px !important;
  }

  .task-info small {
    font-size: 6px !important;
  }

  .task-info h3 {
    font-size: 10px !important;
  }

  .task-button {
    font-size: 7px !important;
  }

}
/* =========================================
   THE FALLEN — TRIALS ENHANCEMENT
========================================= */

.panel {
  animation: trialsPanelEnter 1.2s cubic-bezier(.16,1,.3,1) both;
}

@keyframes trialsPanelEnter {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(.97);
    filter: blur(8px);
  }

  60% {
    opacity: 1;
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* TASKS ENTER ONE BY ONE */

.task {
  position: relative;
  overflow: hidden;
  transition:
    transform .35s ease,
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}

.task:nth-of-type(1) {
  animation: taskReveal .7s .15s both;
}

.task:nth-of-type(2) {
  animation: taskReveal .7s .25s both;
}

.task:nth-of-type(3) {
  animation: taskReveal .7s .35s both;
}

.task:nth-of-type(4) {
  animation: taskReveal .7s .45s both;
}

@keyframes taskReveal {
  from {
    opacity: 0;
    transform: translateX(35px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* RED LIGHT SWEEP */

.task::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(170, 20, 35, .12),
    transparent
  );

  transform: skewX(-20deg);
  transition: left .8s ease;
  pointer-events: none;
}

.task:hover::before {
  left: 140%;
}


/* HOVER */

.task.active:hover {
  transform: translateX(-5px);

  border-color: rgba(150, 25, 40, .8);

  background:
    linear-gradient(
      90deg,
      rgba(100, 10, 20, .12),
      rgba(10, 5, 10, .05)
    );

  box-shadow:
    inset 3px 0 0 rgba(160, 20, 35, .8),
    0 0 25px rgba(120, 10, 25, .12);
}


/* TASK NUMBER */

.task.active:hover .task-number {
  text-shadow:
    0 0 10px rgba(190, 30, 45, .8),
    0 0 25px rgba(190, 30, 45, .35);
}


/* ICON */

.task.active:hover .task-icon {
  transform: scale(1.15) rotate(8deg);

  text-shadow:
    0 0 10px rgba(210, 40, 50, .8),
    0 0 20px rgba(210, 40, 50, .3);
}

.task-icon {
  transition:
    transform .35s ease,
    text-shadow .35s ease;
}


/* COMPLETED */

.task.completed {
  animation:
    taskCompleted .8s ease both;

  box-shadow:
    inset 3px 0 0 rgba(120, 170, 130, .7),
    0 0 30px rgba(80, 130, 90, .08);
}

@keyframes taskCompleted {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.015);
  }

  100% {
    transform: scale(1);
  }
}


/* NEWLY UNLOCKED */

.task.newly-unlocked {
  animation:
    fallenUnlock 1.2s cubic-bezier(.16,1,.3,1);
}

@keyframes fallenUnlock {

  0% {
    opacity: .3;
    transform: translateX(25px);
    box-shadow: 0 0 0 transparent;
  }

  35% {
    opacity: 1;
    transform: translateX(-5px);
    box-shadow:
      0 0 35px rgba(160, 20, 35, .35),
      inset 0 0 25px rgba(120, 10, 25, .08);
  }

  65% {
    transform: translateX(2px);
  }

  100% {
    transform: translateX(0);
    box-shadow: 0 0 0 transparent;
  }
}


/* =========================================
   FIRE CURSOR TRAIL
========================================= */

.cursor-fire {
  position: fixed;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #b51f2d;

  box-shadow:
    0 0 5px rgba(220, 45, 55, .9),
    0 0 12px rgba(190, 25, 40, .55),
    0 0 20px rgba(130, 10, 25, .25);

  pointer-events: none;

  z-index: 99999;

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

  animation: fireParticle .65s ease-out forwards;
}

@keyframes fireParticle {

  0% {
    opacity: .95;
    transform:
      translate(-50%, -50%)
      scale(1);
  }

  40% {
    opacity: .7;
  }

  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--drift-x)),
        calc(-50% + var(--drift-y))
      )
      scale(.15);
  }
}


/* thin flame streak */

.cursor-flame {
  position: fixed;

  width: 24px;
  height: 2px;

  pointer-events: none;

  z-index: 99998;

  transform-origin: right center;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(130, 10, 25, .15),
    rgba(210, 35, 45, .8)
  );

  filter: blur(.4px);

  animation: flameFade .45s ease-out forwards;
}

@keyframes flameFade {

  0% {
    opacity: .8;
  }

  100% {
    opacity: 0;
    width: 4px;
  }
}


/* REMOVE OLD CIRCLE */

.cursor-glow {
  display: none !important;
}
/* =========================================
   FALLEN — VISIBLE FLAME TRAIL
========================================= */

.fallen-trail {
  position: fixed;
  width: 18px;
  height: 3px;

  pointer-events: none;
  z-index: 999999;

  border-radius: 100%;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(120, 10, 20, 0.25) 25%,
    rgba(220, 35, 45, 0.95) 75%,
    rgba(255, 80, 70, 1) 100%
  );

  box-shadow:
    0 0 4px rgba(255, 45, 55, 0.9),
    0 0 10px rgba(190, 20, 35, 0.65),
    0 0 18px rgba(130, 10, 25, 0.4);

  transform-origin: right center;

  animation:
    fallenTrailFade 0.5s ease-out forwards;
}

@keyframes fallenTrailFade {

  0% {
    opacity: 1;
    width: 22px;
    filter: blur(0);
  }

  50% {
    opacity: .75;
  }

  100% {
    opacity: 0;
    width: 3px;
    filter: blur(2px);
  }
}


.fallen-spark {
  position: fixed;

  width: 4px;
  height: 4px;

  pointer-events: none;
  z-index: 1000000;

  border-radius: 50%;

  background: #e52b3b;

  box-shadow:
    0 0 5px #ff4655,
    0 0 12px rgba(210, 30, 45, .8);

  animation:
    fallenSparkFade .65s ease-out forwards;
}

@keyframes fallenSparkFade {

  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform:
      translate(
        var(--spark-x),
        var(--spark-y)
      )
      scale(.1);
  }
}
/* =========================================
   THE FALLEN — FIRE MOUSE TRAIL
========================================= */

.fallen-fire-trail {

  position: fixed;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  pointer-events: none;

  z-index: 999999;

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

  background:
    radial-gradient(
      circle,
      rgba(255,120,90,1) 0%,
      rgba(220,35,50,.9) 25%,
      rgba(130,10,25,.55) 55%,
      transparent 75%
    );

  box-shadow:
    0 0 5px rgba(255,60,50,.9),
    0 0 12px rgba(190,20,35,.7),
    0 0 22px rgba(120,10,25,.4);

  animation:
    fallenFireFade .65s ease-out forwards;

}


@keyframes fallenFireFade {

  0% {

    opacity: 1;

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

  }

  35% {

    opacity: .85;

    transform:
      translate(-50%, -50%)
      scale(.85);

  }

  100% {

    opacity: 0;

    transform:
      translate(
        -50%,
        calc(-50% - 12px)
      )
      scale(.15);

  }

}
/* =========================================
   THE FALLEN — FINAL GATE AWAKENING
========================================= */

.final-gate {
  position: relative;
  overflow: hidden;

  transition:
    opacity 1s ease,
    filter 1s ease,
    border-color 1s ease,
    box-shadow 1s ease,
    transform 1s cubic-bezier(.16,1,.3,1);
}


/* LIGHT SWEEP */

.final-gate::before {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 80%;
  height: 100%;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(190,25,40,.18),
      rgba(230,45,55,.35),
      transparent
    );

  transform: skewX(-18deg);

  opacity: 0;
}


/* UNLOCKED */

.final-gate.unlocked {
  opacity: 1;

  filter: none;

  transform:
    translateY(0)
    scale(1);

  border-color:
    rgba(195,50,61,.75);

  box-shadow:
    0 0 25px rgba(150,20,30,.12),
    inset 0 0 30px rgba(120,10,20,.06);
}


/* SWEEP ONCE */

.final-gate.unlocked::before {

  animation:
    finalGateSweep 1.4s
    cubic-bezier(.16,1,.3,1)
    forwards;

}


@keyframes finalGateSweep {

  0% {
    left: -120%;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  100% {
    left: 140%;
    opacity: 0;
  }

}


/* TITLE */

.final-gate.unlocked .gate-title {

  animation:
    gateTitleAwaken
    1s
    cubic-bezier(.16,1,.3,1)
    both;

}


@keyframes gateTitleAwaken {

  0% {
    opacity: .2;

    transform:
      translateY(10px);

    text-shadow:
      0 0 0 transparent;
  }

  50% {

    opacity: 1;

    text-shadow:
      0 0 12px rgba(210,35,45,.75),
      0 0 30px rgba(160,15,30,.35);

  }

  100% {

    opacity: 1;

    transform:
      translateY(0);

  }

}


/* RUNE */

.final-gate.unlocked .gate-title span {

  animation:
    gateRunePulse
    1.2s
    ease-out
    both;

}


@keyframes gateRunePulse {

  0% {
    opacity: .2;
    transform: scale(.7);
  }

  45% {
    opacity: 1;
    transform: scale(1.25);

    text-shadow:
      0 0 12px rgba(220,35,45,.9),
      0 0 25px rgba(160,15,30,.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }

}


/* CONTENT */

.final-gate.unlocked p,
.final-gate.unlocked form,
.final-gate.unlocked .wallet-note {

  animation:
    gateContentReveal
    .8s
    .35s
    cubic-bezier(.16,1,.3,1)
    both;

}


@keyframes gateContentReveal {

  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


/* SUBMIT BUTTON */

.final-gate.unlocked form > button {

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

}


.final-gate.unlocked form > button:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(210,45,55,.9);

  box-shadow:
    0 0 18px rgba(170,20,30,.22),
    inset 0 0 15px rgba(120,10,20,.08);

}
/* =========================================
   THE FALLEN — FINAL GATE ASCENSION
========================================= */

.final-gate.unlocked {
  position: relative;
  overflow: hidden;

  animation:
    finalGateAwaken 1.1s
    cubic-bezier(.16,1,.3,1)
    both;
}


/* RED ENERGY AROUND THE GATE */

.final-gate.unlocked::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  border: 1px solid transparent;

  background:
    linear-gradient(
      120deg,
      transparent 10%,
      rgba(220,40,50,.5),
      transparent 35%,
      transparent 70%,
      rgba(180,20,35,.4),
      transparent 90%
    );

  opacity: .0;

  animation:
    gateEnergy 2s
    ease-out
    forwards;

}


/* GATE AWAKEN */

@keyframes finalGateAwaken {

  0% {

    opacity: .55;

    transform:
      translateY(8px)
      scale(.985);

    box-shadow:
      0 0 0 rgba(180,20,35,0);

  }

  45% {

    opacity: 1;

    transform:
      translateY(-2px)
      scale(1.01);

    box-shadow:
      0 0 55px rgba(170,20,35,.18),
      inset 0 0 35px rgba(150,15,25,.08);

  }

  100% {

    opacity: 1;

    transform:
      translateY(0)
      scale(1);

    box-shadow:
      0 0 35px rgba(150,20,30,.08),
      inset 0 0 25px rgba(120,10,20,.05);

  }

}


@keyframes gateEnergy {

  0% {
    opacity: 0;
  }

  20% {
    opacity: .8;
  }

  100% {
    opacity: 0;
  }

}


/* =========================================
   GATE TITLE
========================================= */

.final-gate.unlocked .gate-title {

  animation:
    finalGateTitle
    .9s
    .25s
    cubic-bezier(.16,1,.3,1)
    both;

}


@keyframes finalGateTitle {

  0% {

    opacity: 0;

    transform:
      translateY(8px);

    letter-spacing:
      8px;

  }

  100% {

    opacity: 1;

    transform:
      translateY(0);

    letter-spacing:
      4px;

  }

}


.final-gate.unlocked .gate-title span {

  display: inline-block;

  color:
    #e04752;

  text-shadow:
    0 0 8px rgba(220,35,45,.55),
    0 0 22px rgba(160,15,30,.3);

}


/* =========================================
   FINAL GATE SUBTITLE
========================================= */

.final-gate.unlocked > p {

  color:
    #9b7778;

  animation:
    gateSubtitle
    .8s
    .45s
    ease
    both;

}


@keyframes gateSubtitle {

  from {

    opacity: 0;

    transform:
      translateY(6px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


/* =========================================
   WALLET RITUAL
========================================= */

.final-gate.unlocked .wallet-input {

  animation:
    walletRitual
    .8s
    .6s
    cubic-bezier(.16,1,.3,1)
    both;

}


@keyframes walletRitual {

  from {

    opacity: 0;

    transform:
      translateY(10px);

    border-color:
      rgba(195,50,61,.05);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

    border-color:
      rgba(195,50,61,.35);

  }

}


/* INPUT GLOW */

.final-gate.unlocked .wallet-input:hover {

  border-color:
    rgba(210,55,65,.6);

  box-shadow:
    0 0 25px rgba(150,15,25,.12),
    inset 0 0 20px rgba(120,10,20,.05);

}


/* =========================================
   SUBMIT BUTTON
========================================= */

.final-gate.unlocked #walletForm button {

  animation:
    walletButtonReveal
    .8s
    .75s
    cubic-bezier(.16,1,.3,1)
    both;

}


@keyframes walletButtonReveal {

  from {

    opacity: 0;

    transform:
      translateY(10px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


/* =========================================
   SMALL RUNE BREATH
========================================= */

.final-gate.unlocked .wallet-input span {

  animation:
    runeBreath
    2.5s
    ease-in-out
    infinite;

}


@keyframes runeBreath {

  0%,
  100% {

    opacity: .45;

    text-shadow:
      0 0 0 transparent;

  }

  50% {

    opacity: 1;

    color:
      #e04752;

    text-shadow:
      0 0 8px rgba(220,35,45,.8),
      0 0 18px rgba(160,15,30,.4);

  }

}


/* =========================================
   WALLET SUCCESS — OATH SEALED
========================================= */

.final-gate.wallet-sealed {

  border-color:
    rgba(220,50,60,.9) !important;

  box-shadow:
    0 0 70px rgba(180,20,35,.25),
    inset 0 0 45px rgba(150,15,25,.12) !important;

  animation:
    oathSealed
    .8s
    ease
    both;

}


@keyframes oathSealed {

  0% {

    transform:
      scale(1);

  }

  35% {

    transform:
      scale(1.015);

  }

  100% {

    transform:
      scale(1);

  }

}
/* =========================================
   FINAL GATE — TRUE AWAKENING
========================================= */

.final-gate.unlocked {
    position: relative !important;
    overflow: hidden !important;

    border-color: rgba(220, 45, 60, .85) !important;

    box-shadow:
        0 0 20px rgba(190, 25, 40, .18),
        0 0 60px rgba(150, 15, 30, .12),
        inset 0 0 35px rgba(120, 10, 20, .08) !important;

    animation: finalGateGlow 2.5s ease-in-out infinite;
}


/* =========================================
   MOVING RED LIGHT
========================================= */

.final-gate.unlocked::before {
    content: "";

    position: absolute;

    top: -20%;
    left: -60%;

    width: 35%;
    height: 140%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 45, 60, .12),
            rgba(255, 65, 75, .55),
            rgba(255, 45, 60, .12),
            transparent
        );

    transform: rotate(12deg);

    pointer-events: none;

    z-index: 20;

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


/* =========================================
   TITLE
========================================= */

.final-gate.unlocked .gate-title {
    position: relative;

    color: #e33d4b !important;

    text-shadow:
        0 0 8px rgba(230, 45, 60, .7),
        0 0 22px rgba(190, 20, 35, .45);

    animation:
        finalGateTitle 2s ease-in-out infinite;
}


/* THE ✦ SYMBOLS */

.final-gate.unlocked .gate-title span {
    color: #ff4655 !important;

    text-shadow:
        0 0 8px rgba(255, 50, 65, .9),
        0 0 20px rgba(200, 20, 35, .6);
}


/* =========================================
   DESCRIPTION
========================================= */

.final-gate.unlocked > p {
    color: rgba(210, 170, 170, .75) !important;

    animation:
        gateTextReveal .8s ease both;
}


/* =========================================
   WALLET
========================================= */

.final-gate.unlocked .wallet-input {
    border-color:
        rgba(205, 45, 60, .55) !important;

    box-shadow:
        inset 0 0 20px rgba(130, 10, 20, .06),
        0 0 15px rgba(150, 15, 25, .08);

    animation:
        walletReveal .8s .15s ease both;
}


/* INPUT FOCUS */

.final-gate.unlocked #walletInput:focus {
    border-color:
        rgba(230, 55, 70, .75) !important;

    box-shadow:
        0 0 18px rgba(190, 25, 40, .16);
}


/* =========================================
   SUBMIT
========================================= */

.final-gate.unlocked #walletForm button {
    border-color:
        rgba(215, 45, 60, .7) !important;

    animation:
        submitBreath 2.4s ease-in-out infinite;
}


/* =========================================
   KEYFRAMES
========================================= */

@keyframes finalGateGlow {

    0%,
    100% {
        box-shadow:
            0 0 18px rgba(190, 25, 40, .15),
            0 0 45px rgba(150, 15, 30, .08),
            inset 0 0 25px rgba(120, 10, 20, .04);
    }

    50% {
        box-shadow:
            0 0 30px rgba(220, 40, 55, .28),
            0 0 75px rgba(170, 20, 35, .18),
            inset 0 0 40px rgba(150, 15, 25, .09);
    }
}


@keyframes finalGateSweep {

    0% {
        left: -60%;
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    45% {
        left: 140%;
        opacity: 0;
    }

    100% {
        left: 140%;
        opacity: 0;
    }
}


@keyframes finalGateTitle {

    0%,
    100% {
        opacity: .82;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.025);
    }
}


@keyframes gateTextReveal {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes walletReveal {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes submitBreath {

    0%,
    100% {
        box-shadow:
            0 0 8px rgba(170, 20, 30, .08);
    }

    50% {
        box-shadow:
            0 0 25px rgba(200, 30, 45, .22);
    }
}
#fallenFireTrail {
    position: fixed;
    inset: 0;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none;
    z-index: 20;
}
.comment-link-field {
    margin: 18px 0;
    text-align: left;
}

.comment-link-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--red);
}

.comment-link-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 15px;
    background: rgba(5, 3, 7, .8);
    border: 1px solid rgba(175, 125, 105, .32);
    color: var(--cream);
    font-family: "Space Mono", monospace;
    font-size: 11px;
    outline: none;
}

.comment-link-field input:focus {
    border-color: rgba(220, 35, 45, .75);
    box-shadow: 0 0 18px rgba(180, 20, 35, .15);
}

.comment-link-field input::placeholder {
    color: rgba(216, 208, 188, .35);
}

.comment-link-field small {
    display: block;
    margin-top: 7px;
    font-size: 8px;
    color: rgba(216, 208, 188, .4);
    letter-spacing: 1px;
}
#fallenFireTrail {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}
/* =========================================
   VERIFICATION MODAL
========================================= */

#fallenVerification {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

#fallenVerification.show {
  opacity: 1;
  visibility: visible;
}

.verification-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(6px);
}

.verification-box {
  position: relative;
  z-index: 2;
  width: min(520px, calc(100vw - 40px));
  padding: 42px;
  background: #080609;
  border: 1px solid rgba(190, 25, 38, .7);
  box-shadow:
    0 0 40px rgba(180, 20, 35, .18),
    inset 0 0 50px rgba(180, 20, 35, .04);
  text-align: center;
}

.verification-rune {
  color: #c91f2d;
  font-size: 28px;
  margin-bottom: 18px;
}

.verification-box small {
  color: #777;
  letter-spacing: 3px;
  font-size: 10px;
}

.verification-box h2 {
  margin: 18px 0;
  color: #eee;
  font-family: "Cinzel", serif;
  font-size: 28px;
  letter-spacing: 2px;
}

.verification-box h2 em {
  color: #b91d2b;
  font-style: normal;
}

.verification-box p {
  color: #888;
  font-size: 12px;
  line-height: 1.8;
  margin-bottom: 28px;
}

.verification-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.verification-actions button {
  flex: 1;
  min-height: 48px;
  padding: 0 18px;
  background: transparent;
  border: 1px solid rgba(190, 25, 38, .55);
  color: #aaa;
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: .25s ease;
}

.verification-actions button:hover {
  border-color: #d32636;
  color: #fff;
}

.verification-actions button:last-child {
  color: #d32636;
}

.verification-actions button:last-child:hover {
  background: rgba(190, 25, 38, .1);
}

/* COMMENT LINK */

.comment-link-field {
  margin: 24px 0;
  text-align: left;
}

.comment-link-field label {
  display: block;
  margin-bottom: 8px;
  color: #aaa;
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: 2px;
}

.comment-link-field input {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  padding: 0 14px;
  background: #0b090b;
  border: 1px solid rgba(190, 25, 38, .5);
  color: #eee;
  outline: none;
  font-family: "Space Mono", monospace;
  font-size: 11px;
}

.comment-link-field input:focus {
  border-color: #d32636;
  box-shadow: 0 0 15px rgba(190, 25, 38, .12);
}

.comment-link-field input::placeholder {
  color: #555;
}

.comment-link-field small {
  display: block;
  margin-top: 8px;
  color: #555;
  font-size: 9px;
}
.comment-link-field {
  margin-top: 18px;
}

.comment-link-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 2px;
  color: #b92a36;
}

.comment-link-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(185, 42, 54, 0.45);
  color: #eee;
  font-family: "Space Mono", monospace;
  font-size: 11px;
  outline: none;
}

.comment-link-field input:focus {
  border-color: #b92a36;
  box-shadow: 0 0 15px rgba(185, 42, 54, 0.15);
}

.comment-link-field small {
  display: block;
  margin-top: 7px;
  font-size: 8px;
  letter-spacing: 1px;
  color: #666;
}
/* COMMENT TASK LAYOUT */
.task[data-task="comment"] {
  position: relative;
}

.task[data-task="comment"] .comment-link-field {
  grid-column: 3 / 5;
  grid-row: 2;
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
}

.task[data-task="comment"] .task-button {
  grid-column: 4;
  grid-row: 1;
  align-self: center;
  justify-self: end;
}

.task[data-task="comment"] .comment-link-field input {
  width: 100%;
  box-sizing: border-box;
}
/* =========================================
   COMMENT TASK
========================================= */

.task[data-task="comment"] {
  flex-wrap: wrap;
}

.task[data-task="comment"] .comment-link-field {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  margin-top: 18px;
}

.task[data-task="comment"] .comment-post-link {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  box-sizing: border-box;

  padding: 10px 14px;
  margin: 8px 0 10px;

  border: 1px solid rgba(190, 25, 38, .65);

  color: #d92535;
  text-decoration: none;

  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: 2px;

  transition: all .2s ease;
}

.task[data-task="comment"] .comment-post-link:hover {
  background: rgba(190, 25, 38, .12);
  border-color: #d92535;
  color: #fff;
}

.task[data-task="comment"] .comment-link-field input {
  width: 100%;
  box-sizing: border-box;
}

.task[data-task="comment"] .comment-link-field small {
  display: block;
  margin-top: 7px;
}
/* =========================================
   THE FALLEN - COMMENT TASK FINAL FIX
========================================= */

.task[data-task="comment"] {
  position: relative !important;
  display: block !important;
  height: auto !important;
  min-height: 235px !important;
  max-height: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  padding: 22px 24px 20px 24px !important;
}

/* Number */
.task[data-task="comment"] .task-number {
  position: absolute !important;
  left: 16px !important;
  top: 22px !important;
}

/* Icon */
.task[data-task="comment"] .task-icon {
  position: absolute !important;
  left: 82px !important;
  top: 24px !important;
}

/* Title */
.task[data-task="comment"] .task-info {
  position: absolute !important;
  left: 125px !important;
  top: 20px !important;
  right: 155px !important;
  min-width: 0 !important;
}

/* VERIFY / COMMENT button */
.task[data-task="comment"] > .task-button {
  position: absolute !important;
  right: 18px !important;
  top: 20px !important;
  width: 125px !important;
  min-width: 125px !important;
  box-sizing: border-box !important;
}

/* Comment section */
.task[data-task="comment"] .comment-link-field {
  position: absolute !important;
  left: 125px !important;
  right: 18px !important;
  top: 92px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Label */
.task[data-task="comment"] .comment-link-field label {
  display: block !important;
  margin-bottom: 8px !important;
}

/* Input */
.task[data-task="comment"] .comment-link-field input {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 48px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Small explanation */
.task[data-task="comment"] .comment-link-field small {
  display: block !important;
  margin-top: 7px !important;
  line-height: 1.4 !important;
  max-width: 100% !important;
}

/* Dar ekran */
@media (max-width: 700px) {

  .task[data-task="comment"] {
    min-height: 270px !important;
    padding: 20px 16px !important;
  }

  .task[data-task="comment"] .task-number {
    left: 14px !important;
  }

  .task[data-task="comment"] .task-icon {
    left: 65px !important;
  }

  .task[data-task="comment"] .task-info {
    left: 105px !important;
    right: 15px !important;
    top: 18px !important;
  }

  .task[data-task="comment"] > .task-button {
    position: absolute !important;
    left: 105px !important;
    right: 15px !important;
    top: 70px !important;
    width: auto !important;
  }

  .task[data-task="comment"] .comment-link-field {
    left: 15px !important;
    right: 15px !important;
    top: 125px !important;
  }
}
/* COMMENT TASK - HEIGHT FIX */
.task[data-task="comment"] {
  min-height: 285px !important;
  height: 285px !important;
  overflow: hidden !important;
}

.task[data-task="comment"] .comment-link-field {
  top: 92px !important;
}

.task[data-task="comment"] .comment-link-field small {
  margin-top: 8px !important;
  line-height: 1.5 !important;
}

.task[data-task="comment"] .comment-link-field input {
  height: 48px !important;
}
/* =========================================================
   THE FALLEN — FINAL PANEL / COMMENT FIT FIX
   ========================================================= */

/* PANEL CONTENT SHOULD DETERMINE HEIGHT */
.panel {
  height: auto !important;
  min-height: calc(100vh - 153px) !important;
  bottom: auto !important;
  overflow: visible !important;
}

/* NORMAL TASKS — COMPACT */
.panel > .task:not([data-task="comment"]) {
  min-height: 82px !important;
  height: 82px !important;
  padding: 10px 12px !important;
}

/* BUTTONS */
.panel > .task:not([data-task="comment"]) .task-button {
  height: 36px !important;
}

/* COMMENT TASK */
.task[data-task="comment"] {
  position: relative !important;
  display: block !important;

  height: auto !important;
  min-height: 225px !important;
  max-height: none !important;

  overflow: hidden !important;

  padding: 18px 18px 16px !important;
  box-sizing: border-box !important;

  margin-bottom: 7px !important;
}

/* NUMBER */
.task[data-task="comment"] .task-number {
  position: absolute !important;
  left: 16px !important;
  top: 18px !important;
}

/* ICON */
.task[data-task="comment"] .task-icon {
  position: absolute !important;
  left: 82px !important;
  top: 20px !important;
}

/* TITLE */
.task[data-task="comment"] .task-info {
  position: absolute !important;
  left: 125px !important;
  right: 145px !important;
  top: 16px !important;

  min-width: 0 !important;
}

/* VERIFY / COMMENT BUTTON */
.task[data-task="comment"] > .task-button {
  position: absolute !important;

  right: 16px !important;
  top: 16px !important;

  width: 120px !important;
  min-width: 120px !important;

  height: 38px !important;
}

/* COMMENT AREA */
.task[data-task="comment"] .comment-link-field {
  position: absolute !important;

  left: 125px !important;
  right: 16px !important;
  top: 82px !important;

  width: auto !important;
  max-width: none !important;

  margin: 0 !important;

  box-sizing: border-box !important;
}

/* LABEL */
.task[data-task="comment"] .comment-link-field label {
  display: block !important;

  margin: 0 0 6px !important;

  font-size: 8px !important;
  letter-spacing: 2px !important;
}

/* OPEN SIGNAL BUTTON */
.task[data-task="comment"] .comment-post-link {
  display: flex !important;

  width: 100% !important;
  height: 36px !important;

  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;

  padding: 0 10px !important;
  margin: 0 0 8px !important;

  font-size: 8px !important;
  letter-spacing: 1.5px !important;
}

/* COMMENT URL INPUT */
.task[data-task="comment"] .comment-link-field input {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: 42px !important;

  padding: 0 12px !important;

  box-sizing: border-box !important;

  font-size: 8px !important;
}

/* EXPLANATION */
.task[data-task="comment"] .comment-link-field small {
  display: block !important;

  margin-top: 6px !important;

  max-width: 100% !important;

  font-size: 6px !important;
  line-height: 1.35 !important;
  letter-spacing: 1px !important;
}

/* FINAL GATE */
.final-gate {
  margin-top: 6px !important;
  padding: 11px !important;
}

/* FINAL GATE TITLE */
.gate-title h2 {
  font-size: 17px !important;
}

/* FINAL GATE DESCRIPTION */
.final-gate > p {
  margin: 5px 0 8px !important;
  font-size: 6px !important;
}

/* WALLET */
.wallet-input {
  height: 38px !important;
}

.wallet-input input {
  font-size: 7px !important;
}

.final-gate form > button {
  height: 36px !important;
  margin-top: 4px !important;
}

/* =========================================================
   SMALL SCREENS
   ========================================================= */

@media (max-width: 700px) {

  .panel {
    width: 94% !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .panel > .task:not([data-task="comment"]) {
    min-height: 78px !important;
    height: 78px !important;
  }

  .task[data-task="comment"] {
    min-height: 255px !important;
    height: 255px !important;
    padding: 18px 15px !important;
  }

  .task[data-task="comment"] .task-number {
    left: 14px !important;
    top: 18px !important;
  }

  .task[data-task="comment"] .task-icon {
    left: 62px !important;
    top: 20px !important;
  }

  .task[data-task="comment"] .task-info {
    left: 100px !important;
    right: 15px !important;
    top: 16px !important;
  }

  .task[data-task="comment"] > .task-button {
    left: 100px !important;
    right: 15px !important;

    top: 62px !important;

    width: auto !important;
    min-width: 0 !important;
  }

  .task[data-task="comment"] .comment-link-field {
    left: 15px !important;
    right: 15px !important;
    top: 115px !important;
  }
}
/* =========================================
   FALLEN — BIRD SILHOUETTES
========================================= */

.flight-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 4;
}

.flight {
  position: absolute;
  width: 34px;
  height: 18px;
  font-size: 0;
  opacity: 0.32;
  filter: blur(0.2px);
}

/* LEFT WING */
.flight::before,
.flight::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 17px;
  height: 9px;
  border-top: 2px solid rgba(5, 5, 8, 0.9);
}

/* left wing */
.flight::before {
  right: 16px;
  border-radius: 100% 0 0 0;
  transform: rotate(14deg);
  transform-origin: right center;
}

/* right wing */
.flight::after {
  left: 16px;
  border-radius: 0 100% 0 0;
  transform: rotate(-14deg);
  transform-origin: left center;
}


/* =========================================
   BIRD 01
========================================= */

.flight-1 {
  top: 24%;
  left: 34%;
  transform: scale(0.9);
  animation: fallenBirdOne 18s linear infinite;
}


/* =========================================
   BIRD 02
========================================= */

.flight-2 {
  top: 31%;
  left: 58%;
  transform: scale(0.65);
  opacity: 0.22;
  animation: fallenBirdTwo 24s linear infinite;
}


/* =========================================
   BIRD 03
========================================= */

.flight-3 {
  top: 17%;
  left: 67%;
  transform: scale(0.5);
  opacity: 0.18;
  animation: fallenBirdThree 29s linear infinite;
}


/* =========================================
   BIRD 04
========================================= */

.flight-4 {
  top: 39%;
  left: 46%;
  transform: scale(0.72);
  opacity: 0.20;
  animation: fallenBirdFour 22s linear infinite;
}


/* =========================================
   FLIGHT PATHS
========================================= */

@keyframes fallenBirdOne {
  0% {
    transform: translate(-80px, 25px) scale(0.9);
  }

  50% {
    transform: translate(180px, -35px) scale(0.9);
  }

  100% {
    transform: translate(430px, 20px) scale(0.9);
  }
}

@keyframes fallenBirdTwo {
  0% {
    transform: translate(120px, 30px) scale(0.65);
  }

  50% {
    transform: translate(-100px, -20px) scale(0.65);
  }

  100% {
    transform: translate(-360px, 35px) scale(0.65);
  }
}

@keyframes fallenBirdThree {
  0% {
    transform: translate(80px, 20px) scale(0.5);
  }

  50% {
    transform: translate(-160px, -45px) scale(0.5);
  }

  100% {
    transform: translate(-420px, 10px) scale(0.5);
  }
}

@keyframes fallenBirdFour {
  0% {
    transform: translate(-100px, 15px) scale(0.72);
  }

  50% {
    transform: translate(130px, -30px) scale(0.72);
  }

  100% {
    transform: translate(380px, 25px) scale(0.72);
  }
}
/* =========================================
   THE FALLEN — FLYING BIRDS
========================================= */

.raven-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 25;
}


/* THE BIRD */

.bird {
  position: absolute;

  width: 46px;
  height: 28px;

  opacity: 0;

  pointer-events: none;

  /*
     Simple flying bird silhouette:
     head + body + two swept wings
  */

  background: #030305;

  clip-path: polygon(
    50% 48%,
    45% 39%,
    37% 28%,
    26% 16%,
    31% 32%,
    14% 20%,
    25% 39%,
    4% 34%,
    23% 50%,
    39% 57%,
    48% 53%,
    57% 57%,
    73% 50%,
    96% 34%,
    75% 39%,
    86% 20%,
    69% 32%,
    74% 16%,
    63% 28%,
    55% 39%
  );

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


/* =========================================
   BIRD 01
========================================= */

.bird-1 {
  width: 58px;
  height: 34px;

  top: 21%;
  left: -80px;

  animation:
    bird-flight-1
    24s
    linear
    infinite;
}


/* =========================================
   BIRD 02
========================================= */

.bird-2 {
  width: 38px;
  height: 23px;

  top: 14%;
  left: -70px;

  animation:
    bird-flight-2
    31s
    linear
    infinite;

  animation-delay: -12s;
}


/* =========================================
   BIRD 03
========================================= */

.bird-3 {
  width: 27px;
  height: 17px;

  top: 30%;
  left: -60px;

  animation:
    bird-flight-3
    37s
    linear
    infinite;

  animation-delay: -23s;
}


/* =========================================
   ANIMATION 01
========================================= */

@keyframes bird-flight-1 {

  0% {
    transform:
      translate(-80px, 15px)
      rotate(-3deg);

    opacity: 0;
  }

  8% {
    opacity: .65;
  }

  30% {
    transform:
      translate(28vw, -18px)
      rotate(2deg);
  }

  55% {
    transform:
      translate(55vw, 10px)
      rotate(-2deg);

    opacity: .55;
  }

  80% {
    transform:
      translate(82vw, -18px)
      rotate(2deg);

    opacity: .35;
  }

  100% {
    transform:
      translate(110vw, 15px)
      rotate(-3deg);

    opacity: 0;
  }
}


/* =========================================
   ANIMATION 02
========================================= */

@keyframes bird-flight-2 {

  0% {
    transform:
      translate(-70px, 5px)
      rotate(-2deg);

    opacity: 0;
  }

  12% {
    opacity: .4;
  }

  50% {
    transform:
      translate(52vw, -22px)
      rotate(2deg);

    opacity: .3;
  }

  100% {
    transform:
      translate(110vw, 10px)
      rotate(-2deg);

    opacity: 0;
  }
}


/* =========================================
   ANIMATION 03
========================================= */

@keyframes bird-flight-3 {

  0% {
    transform:
      translate(-60px, 0)
      rotate(-2deg);

    opacity: 0;
  }

  15% {
    opacity: .25;
  }

  50% {
    transform:
      translate(55vw, -20px)
      rotate(2deg);

    opacity: .2;
  }

  100% {
    transform:
      translate(110vw, 5px)
      rotate(-2deg);

    opacity: 0;
  }
}