/*
  The whole page is designed on a 390x844 phone frame.
  --s is one "design pixel": it shrinks or grows by whichever of the
  window's width or height is tighter, so everything always fits on
  one screen with no scrolling and keeps the same proportions.
*/
:root {
  --red: #ff1a1a;
  --red-deep: #b30000;
  --red-glow: rgba(255, 20, 20, .65);
  --text: #f2f2f2;
  --muted: #c9c9c9;
  --chrome: linear-gradient(180deg, #ffffff 0%, #d9d9d9 30%, #8a8a8a 52%, #f4f4f4 70%, #9b9b9b 100%);

  --ease-out: cubic-bezier(.22, 1, .36, 1);   /* calm deceleration for things entering */
  --ease-in: cubic-bezier(.4, 0, .7, .2);     /* gentle acceleration for things leaving */

  --vh: 1vh;
  --s: min(calc(100vw / 390), calc(var(--vh) * 100 / 844), 1.9px);
}
@supports (height: 1dvh) {
  :root { --vh: 1dvh; }
}

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

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior: none;
}

body {
  font-family: "Cairo", system-ui, sans-serif;
  color: var(--text);
  background: #050203;
  position: relative;
  height: calc(var(--vh) * 100);
  display: flex;
  flex-direction: column;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Background ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: #050203 url("assets/bg-mobile.jpg") center top / cover no-repeat;
}
.bg-shade {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 45% at 50% 30%, rgba(255, 0, 0, .14), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.1) 30%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.05) 100%);
}

/* ---------- Top bar ---------- */
.topbar {
  direction: ltr;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: calc(var(--s) * 1100);
  margin: 0 auto;
  padding: max(calc(var(--s) * 12), env(safe-area-inset-top)) max(calc(var(--s) * 22), 4vw) 0;
  position: relative;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: calc(var(--s) * 7); text-decoration: none; }
.brand-icon {
  width: calc(var(--s) * 50);
  height: auto;
  filter: drop-shadow(0 0 calc(var(--s) * 10) var(--red-glow));
}
.brand-text {
  font-family: "Russo One", "Cairo", sans-serif;
  font-style: italic;
  font-size: calc(var(--s) * 31);
  line-height: 1;
  letter-spacing: 1px;
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: max(1px, calc(var(--s) * 1.4)) var(--red-deep);
  filter: drop-shadow(0 0 calc(var(--s) * 6) rgba(255, 0, 0, .55));
}

.menu-btn {
  --w: calc(var(--s) * 74);
  width: var(--w);
  height: calc(var(--w) * .66);
  position: relative;
  border: 0;
  cursor: pointer;
  background: var(--red);
  clip-path: polygon(18% 0, 82% 0, 100% 50%, 82% 100%, 18% 100%, 0 50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--w) * .085);
  filter: drop-shadow(0 0 calc(var(--s) * 10) var(--red-glow));
}
.menu-btn::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: linear-gradient(180deg, #1a0a0b, #050203);
  clip-path: inherit;
}
.menu-btn span {
  position: relative;
  width: 34%;
  height: max(2px, calc(var(--w) * .04));
  border-radius: 2px;
  background: #fff;
  transition: transform .3s, opacity .3s;
}
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(calc(var(--w) * .125)) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(calc(var(--w) * -.125)) rotate(-45deg); }

.menu {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 15;
  padding: calc(max(calc(var(--s) * 12), env(safe-area-inset-top)) + var(--s) * 70) 8vw calc(var(--s) * 26);
  background: linear-gradient(180deg, rgba(10, 2, 3, .97), rgba(20, 3, 4, .93));
  border-bottom: 1px solid rgba(255, 30, 30, .5);
  box-shadow: 0 10px 40px rgba(255, 0, 0, .25);
  display: flex;
  flex-direction: column;
  gap: calc(var(--s) * 10);
  transform: translateY(-110%);
  opacity: 0;
  transition: transform .5s var(--ease-out), opacity .4s ease;
}
.menu.open { transform: translateY(0); opacity: 1; }
.menu a {
  color: var(--text);
  text-decoration: none;
  font-size: max(15px, calc(var(--s) * 18));
  font-weight: 700;
  padding: calc(var(--s) * 11) calc(var(--s) * 16);
  border: 1px solid rgba(255, 40, 40, .35);
  border-radius: 10px;
  background: rgba(255, 0, 0, .06);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .3s ease, transform .4s var(--ease-out), background .25s ease;
}
.menu.open a { opacity: 1; transform: none; }
.menu.open a:nth-child(1) { transition-delay: .12s, .12s, 0s; }
.menu.open a:nth-child(2) { transition-delay: .2s, .2s, 0s; }
.menu a:hover, .menu a:active { background: rgba(255, 0, 0, .2); }

/* ---------- Hero ---------- */
.hero {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 4vw max(calc(var(--s) * 18), env(safe-area-inset-bottom));
}

.emblem-wrap {
  width: calc(var(--s) * 318);
  margin-top: calc(var(--s) * -10);
  position: relative;
  flex: none;
}
.emblem-wrap::before {
  content: "";
  position: absolute;
  inset: 12% 10%;
  background: radial-gradient(circle, rgba(255, 0, 0, .45), transparent 65%);
  filter: blur(calc(var(--s) * 30));
  z-index: -1;
  animation: pulse 3.2s ease-in-out infinite;
}
.emblem {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  display: block;
  filter: drop-shadow(0 0 calc(var(--s) * 18) rgba(255, 0, 0, .45));
  animation: float 5s ease-in-out infinite, zap 6s steps(1) infinite;
}

.title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--s) * 12);
  font-weight: 900;
  font-size: calc(var(--s) * 44);
  line-height: 1.15;
  margin-top: calc(var(--s) * 2);
}
.title-word {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #bdbdbd 60%, #f5f5f5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 calc(var(--s) * 3) calc(var(--s) * 8) rgba(0, 0, 0, .85));
}
.title-kos {
  position: relative;
  font-family: "Russo One", "Cairo", sans-serif;
  font-size: 1.08em;
  letter-spacing: calc(var(--s) * 1);
  background:
    linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .95) 50%, transparent 65%) -200% 0 / 250% 100% no-repeat,
    linear-gradient(180deg, #ff5050 0%, #ff1a1a 45%, #b80000 60%, #ff2a2a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 calc(var(--s) * 12) rgba(255, 0, 0, .7)) drop-shadow(0 calc(var(--s) * 3) calc(var(--s) * 6) rgba(0, 0, 0, .8));
  animation: kos-shine 4.5s ease-in-out infinite;
}
/* glitch slice */
.title-kos::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #fff;
  -webkit-text-fill-color: #fff;
  opacity: 0;
  clip-path: inset(40% 0 45% 0);
  animation: glitch 5s steps(1) infinite;
}

.subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--s) * 8);
  color: #d6d6d6;
  font-weight: 700;
  font-size: calc(var(--s) * 19);
  line-height: 1.5;
  margin-top: calc(var(--s) * 2);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}
.sub-line {
  width: calc(var(--s) * 34);
  height: max(1px, calc(var(--s) * 2));
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--red));
  box-shadow: 0 0 calc(var(--s) * 8) var(--red-glow);
}
.sub-line:last-child { background: linear-gradient(-90deg, transparent, var(--red)); }
.live-dot {
  width: calc(var(--s) * 9);
  height: calc(var(--s) * 9);
  border-radius: 50%;
  background: #ff2a2a;
  box-shadow: 0 0 0 0 rgba(255, 40, 40, .7);
  animation: live 1.6s ease-out infinite;
}

/* ---------- Content column ---------- */
.hero-content { display: flex; flex-direction: column; align-items: center; flex: none; }

/* ---------- Features ---------- */
.features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--s) * 6);
  width: min(94vw, calc(var(--s) * 560));
  margin-top: calc(var(--s) * 22);
  flex: none;
}
.features li { display: flex; flex-direction: column; align-items: center; gap: calc(var(--s) * 9); }
.f-icon {
  width: calc(var(--s) * 60);
  aspect-ratio: 1;
  border-radius: calc(var(--s) * 14);
  border: max(1px, calc(var(--s) * 1.5)) solid rgba(255, 30, 30, .85);
  background: radial-gradient(circle at 50% 40%, rgba(70, 0, 0, .8), rgba(10, 0, 0, .9));
  box-shadow: 0 0 calc(var(--s) * 14) rgba(255, 0, 0, .45), inset 0 0 calc(var(--s) * 14) rgba(255, 0, 0, .25);
  display: grid;
  place-items: center;
  position: relative;
  transition: transform .25s ease;
}
/* light that runs around each icon frame */
.f-icon::before {
  content: "";
  position: absolute;
  inset: max(-1px, calc(var(--s) * -1.5));
  border-radius: inherit;
  padding: max(1px, calc(var(--s) * 2));
  background: conic-gradient(from var(--ang, 0deg), transparent 0 62%, rgba(255, 60, 60, .2) 70%, #ff3b3b 84%, #ffffff 90%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: orbit 3.6s linear infinite;
  animation-delay: calc(var(--i) * -.9s);
  pointer-events: none;
}
.features li:hover .f-icon { transform: translateY(calc(var(--s) * -4)) scale(1.05); }
.f-icon svg { position: relative; width: 48%; height: 48%; fill: var(--red); filter: drop-shadow(0 0 5px var(--red-glow)); }
.f-icon svg.stroke { fill: none; stroke: var(--red); stroke-width: 2.6; width: 60%; }
.f-text {
  font-size: calc(var(--s) * 14.5);
  font-weight: 700;
  line-height: 1.35;
  color: #e6e6e6;
  white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .9);
}

/* ---------- Buttons ---------- */
.actions {
  width: min(92vw, calc(var(--s) * 480));
  display: flex;
  flex-direction: column;
  gap: calc(var(--s) * 18);
  margin-top: calc(var(--s) * 26);
  flex: none;
}
.btn {
  --shape: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
  --p: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--s) * 12);
  width: 100%;
  height: calc(var(--s) * 68);
  padding: 0 calc(var(--s) * 26);
  border: 0;
  font: inherit;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  clip-path: var(--shape);
  background: linear-gradient(180deg, #ffffff, #8d8d8d 45%, #e8e8e8 60%, #6a6a6a);
  transition: transform .15s ease, filter .25s;
  isolation: isolate;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
.btn::before {
  content: "";
  position: absolute;
  inset: max(2px, calc(var(--s) * 3));
  clip-path: var(--shape);
  z-index: -2;
}
.btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; width: 40%;
  left: 0;
  transform: translateX(-150%);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  animation: shine 3.8s ease-in-out infinite;
  z-index: -1;
}
.btn-red { filter: drop-shadow(0 0 calc(var(--s) * 16) rgba(255, 0, 0, .7)); }
.btn-red::before {
  background: linear-gradient(180deg, #ff3b3b 0%, #e00000 45%, #a80000 55%, #d30000 100%);
  box-shadow: inset 0 0 20px rgba(0,0,0,.35);
}
.btn-dark { filter: drop-shadow(0 0 calc(var(--s) * 12) rgba(255, 255, 255, .35)); }
.btn-dark::before { background: linear-gradient(180deg, #2a2a2a 0%, #0b0b0b 50%, #000 51%, #151515 100%); }
.btn:hover { filter: brightness(1.08) drop-shadow(0 0 calc(var(--s) * 18) rgba(255, 0, 0, .75)); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: none; filter: brightness(1.12) drop-shadow(0 0 calc(var(--s) * 20) #fff); }

.btn-label {
  order: 1;
  flex: 1;
  position: relative;
  text-align: center;
  font-size: calc(var(--s) * 25);
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.btn-label .pct {
  display: inline-block;
  min-width: 2.6em;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-size: .9em;
  direction: ltr;
}
.btn-arrow { order: 0; position: relative; width: calc(var(--s) * 24); height: calc(var(--s) * 24); flex: none; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.btn:hover .btn-arrow { transform: translateX(calc(var(--s) * -5)); }
.btn-icon-wrap { order: 2; position: relative; flex: none; width: calc(var(--s) * 36); height: calc(var(--s) * 36); display: grid; place-items: center; }
.btn-icon { grid-area: 1 / 1; width: 100%; height: auto; fill: #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .25s; }
.icon-key { transform: scaleX(-1); }
.icon-check { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 26; opacity: 0; }

/* progress layer (download) */
.btn-progress {
  position: absolute;
  inset: max(2px, calc(var(--s) * 3));
  clip-path: var(--shape);
  z-index: -1;
  pointer-events: none;
}
.btn-fill {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: calc(var(--p) * 100%);
  background:
    repeating-linear-gradient(-55deg, rgba(255,255,255,.16) 0 calc(var(--s) * 10), transparent calc(var(--s) * 10) calc(var(--s) * 20)),
    linear-gradient(180deg, #ff7070 0%, #ff2626 45%, #c20000 55%, #ff3a3a 100%);
  background-size: calc(var(--s) * 46) 100%, 100% 100%;
  animation: stripes .6s linear infinite;
  box-shadow: inset 0 0 calc(var(--s) * 14) rgba(255, 255, 255, .35);
}
.btn-fill::after {
  /* white-hot leading edge */
  content: "";
  position: absolute;
  top: -10%; bottom: -10%; left: calc(var(--s) * -3);
  width: calc(var(--s) * 6);
  background: #fff;
  box-shadow: 0 0 calc(var(--s) * 10) #fff, 0 0 calc(var(--s) * 24) #ff3b3b, 0 0 calc(var(--s) * 40) #ff0000;
  animation: flicker .12s steps(2) infinite;
}
.btn-ball {
  --b: calc(var(--s) * 30);
  position: absolute;
  top: 50%;
  right: calc(var(--p) * 100% - var(--b) / 2);
  width: var(--b);
  height: var(--b);
  margin-top: calc(var(--b) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6a6a6a 0%, #151515 38%, #000 70%);
  box-shadow: 0 0 calc(var(--s) * 12) rgba(0, 0, 0, .8), inset calc(var(--s) * -3) calc(var(--s) * -3) calc(var(--s) * 6) rgba(255, 0, 0, .4);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.3) rotate(calc(var(--p) * -1080deg));
}
.btn-ball i {
  width: 52%;
  height: 52%;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font: 900 calc(var(--s) * 12) / 1 "Cairo", sans-serif;
  font-style: normal;
  display: grid;
  place-items: center;
}

/* loading state */
.btn-red.is-loading { animation: rumble .18s linear infinite; filter: drop-shadow(0 0 calc(var(--s) * 26) rgba(255, 30, 30, .95)); }
.btn-red.is-loading::before { background: linear-gradient(180deg, #3a0000 0%, #1a0000 50%, #0d0000 51%, #2a0000 100%); }
.btn-red.is-loading::after { animation: none; opacity: 0; }
.btn-red.is-loading .btn-ball { opacity: 1; transform: scale(1) rotate(calc(var(--p) * -1080deg)); transition: opacity .3s, transform .3s; }
.btn-red.is-loading .icon-down .arrow { animation: drop .55s cubic-bezier(.5,0,.5,1) infinite; }
.btn-red.is-loading .btn-arrow { opacity: 0; transform: translateX(calc(var(--s) * 20)); }
.btn-red.is-loading .btn-label { animation: label-in .35s ease both; text-shadow: 0 0 4px #000, 0 0 10px #000, 0 2px 6px rgba(0, 0, 0, .8); }

/* done state */
.btn-red.is-done { animation: done-pop .55s cubic-bezier(.2,1.6,.4,1); filter: drop-shadow(0 0 calc(var(--s) * 30) rgba(255, 255, 255, .8)); }
.btn-red.is-done .btn-fill { animation: none; background: linear-gradient(180deg, #ff6262 0%, #ff1f1f 45%, #c60000 55%, #ff3434 100%); }
.btn-red.is-done .btn-fill::after { opacity: 0; }
.btn-red.is-done .icon-down { opacity: 0; transform: translateY(calc(var(--s) * 20)) scale(.4); }
.btn-red.is-done .icon-check { opacity: 1; animation: draw .5s .1s ease forwards; }
.btn-red.is-done .btn-label { animation: label-in .4s ease both; }
.btn-red.is-done .btn-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  animation: flash .6s ease-out forwards;
}

/* key button: the key turns like unlocking */
.btn-dark.is-turning .icon-key { animation: key-turn .6s cubic-bezier(.3,1.4,.5,1) forwards; }
.btn-dark.is-turning { filter: drop-shadow(0 0 calc(var(--s) * 22) rgba(255, 255, 255, .7)); }

/* ---------- Key sheet ---------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .5s;
}
.sheet.open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(120, 0, 0, .55), rgba(0, 0, 0, .82) 70%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .45s ease;
}
.sheet.open .sheet-backdrop { opacity: 1; }
.sheet-panel {
  position: relative;
  width: min(100%, calc(var(--s) * 470));
  max-height: calc(var(--vh) * 92);
  overflow-y: auto;
  padding: calc(var(--s) * 18) calc(var(--s) * 18) max(calc(var(--s) * 24), env(safe-area-inset-bottom));
  border-radius: calc(var(--s) * 26) calc(var(--s) * 26) 0 0;
  background:
    linear-gradient(180deg, rgba(40, 4, 6, .96), rgba(8, 2, 3, .98)),
    #080203;
  border: 1px solid rgba(255, 40, 40, .55);
  border-bottom: 0;
  box-shadow: 0 calc(var(--s) * -10) calc(var(--s) * 50) rgba(255, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .15);
  transform: translateY(105%);
  transition: transform .42s var(--ease-in);
}
.sheet.open .sheet-panel { transform: translateY(0); transition: transform .62s var(--ease-out); }
.sheet.open .sheet-panel.resizing { transition: transform .62s var(--ease-out), height .48s var(--ease-out); }
.sheet-panel::before {
  /* red energy line across the top */
  content: "";
  position: absolute;
  top: -1px; left: 12%; right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff2a2a, #fff, #ff2a2a, transparent);
  box-shadow: 0 0 14px #ff2a2a;
}
.sheet-grip {
  display: block;
  width: calc(var(--s) * 46);
  height: calc(var(--s) * 5);
  margin: 0 auto calc(var(--s) * 8);
  border-radius: 9px;
  background: rgba(255, 255, 255, .25);
}
.sheet-close {
  position: absolute;
  top: calc(var(--s) * 14);
  left: calc(var(--s) * 14);
  width: calc(var(--s) * 38);
  height: calc(var(--s) * 38);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .3s, background .3s;
}
.sheet-close:hover { transform: rotate(90deg); background: rgba(255, 30, 30, .3); }
.sheet-close svg { width: 50%; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }

.sheet-head { text-align: center; margin-bottom: calc(var(--s) * 16); }
.sheet-emblem {
  width: calc(var(--s) * 62);
  height: calc(var(--s) * 62);
  margin: 0 auto calc(var(--s) * 8);
  display: grid;
  place-items: center;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: linear-gradient(180deg, #ff4040, #a00000);
  filter: drop-shadow(0 0 12px rgba(255, 0, 0, .8));
}
.sheet-emblem svg { width: 52%; fill: #fff; transform: scaleX(-1); }
.sheet.open .sheet-emblem svg { animation: key-turn .7s .25s cubic-bezier(.3,1.4,.5,1) both; }
.sheet-head h2 { font-size: calc(var(--s) * 28); font-weight: 900; line-height: 1.2; }
.sheet-head h2 span { color: var(--red); text-shadow: 0 0 14px rgba(255, 0, 0, .6); }
.sheet-head p { color: var(--muted); font-size: calc(var(--s) * 15); font-weight: 600; }

.key-options { display: flex; flex-direction: column; gap: calc(var(--s) * 14); perspective: 900px; }
.key-card {
  --shape: polygon(4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50%);
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--s) * 14);
  width: 100%;
  padding: calc(var(--s) * 16) calc(var(--s) * 24);
  border: 0;
  font: inherit;
  color: #fff;
  text-align: right;
  cursor: pointer;
  clip-path: var(--shape);
  background: linear-gradient(180deg, #ffffff, #7d7d7d 45%, #e0e0e0 60%, #5a5a5a);
  isolation: isolate;
  overflow: hidden;
  opacity: 0;
  transform: translateY(22px) scale(.97) rotateX(-18deg);
  transform-origin: 50% 0;
  transition: filter .25s;
}
.sheet.open .key-card { animation: card-in .75s calc(.22s + var(--d) * .11s) var(--ease-out) forwards; }
.key-card::before {
  content: "";
  position: absolute;
  inset: max(2px, calc(var(--s) * 2.5));
  clip-path: var(--shape);
  z-index: -2;
  background: linear-gradient(180deg, #232323 0%, #0c0c0c 50%, #000 51%, #161616 100%);
}
.key-long { filter: drop-shadow(0 0 16px rgba(255, 0, 0, .55)); }
.key-long::before { background: linear-gradient(180deg, #ff3b3b 0%, #d40000 45%, #9a0000 55%, #c80000 100%); }
.key-card:hover { filter: brightness(1.12) drop-shadow(0 0 18px rgba(255, 40, 40, .8)); }
.key-card:active, .key-card.picked { transform: scale(.97); }
.key-card.picked { filter: brightness(1.4) drop-shadow(0 0 26px #fff); }

.kc-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat;
  animation: card-shine 3.4s ease-in-out infinite;
  animation-delay: calc(var(--d) * 1.2s);
}
.kc-icon {
  flex: none;
  width: calc(var(--s) * 52);
  height: calc(var(--s) * 52);
  border-radius: calc(var(--s) * 14);
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255, 40, 40, .85);
  background: radial-gradient(circle at 50% 40%, rgba(80, 0, 0, .9), rgba(10, 0, 0, .95));
  box-shadow: 0 0 12px rgba(255, 0, 0, .5);
}
.key-long .kc-icon { border-color: rgba(255, 255, 255, .85); background: radial-gradient(circle at 50% 40%, #2a0000, #000); box-shadow: 0 0 14px rgba(255, 255, 255, .45); }
.kc-icon svg { width: 52%; fill: var(--red); filter: drop-shadow(0 0 5px var(--red-glow)); }
.key-long .kc-icon svg { fill: #ffd34d; filter: drop-shadow(0 0 6px rgba(255, 200, 60, .8)); }
.kc-body { flex: 1; display: flex; flex-direction: column; gap: calc(var(--s) * 2); min-width: 0; }
.kc-tag {
  align-self: flex-start;
  font: 400 calc(var(--s) * 10.5) / 1 "Russo One", sans-serif;
  letter-spacing: calc(var(--s) * 2);
  padding: calc(var(--s) * 4) calc(var(--s) * 8);
  border-radius: 4px;
  background: rgba(255, 30, 30, .2);
  border: 1px solid rgba(255, 40, 40, .6);
  color: #ff6b6b;
}
.key-long .kc-tag { background: rgba(0, 0, 0, .35); border-color: rgba(255, 211, 77, .8); color: #ffd34d; }
.kc-title { font-size: calc(var(--s) * 21); font-weight: 900; line-height: 1.25; }
.kc-desc { font-size: calc(var(--s) * 13.5); font-weight: 600; color: rgba(255, 255, 255, .75); }
.kc-arrow { flex: none; width: calc(var(--s) * 22); fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.key-card:hover .kc-arrow { transform: translateX(calc(var(--s) * -5)); }

/* ---------- Sheet views (multi-step) ---------- */
.sheet-back {
  position: absolute;
  top: calc(var(--s) * 14);
  right: calc(var(--s) * 14);
  z-index: 2;
  width: calc(var(--s) * 38);
  height: calc(var(--s) * 38);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(.6);
  pointer-events: none;
  transition: opacity .25s, transform .3s, background .3s;
}
.sheet-back.show { opacity: 1; transform: none; pointer-events: auto; }
.sheet-back:hover { background: rgba(255, 30, 30, .3); }
.sheet-back svg { width: 50%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sheet-close { z-index: 2; }

.views { position: relative; }
.view { display: none; }
.view.is-active { display: block; animation: view-in .5s var(--ease-out) .06s both; }
.view.is-active.from-back { animation-name: view-back; }
.view.is-leaving {
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  pointer-events: none;
  animation: view-out .26s var(--ease-in) both;
}
.view.is-leaving.to-back { animation-name: view-out-back; }
.view > * + * { margin-top: calc(var(--s) * 14); }

.sheet-panel[data-view="tasks"] { height: calc(var(--vh) * 92); display: flex; flex-direction: column; }
.sheet-panel[data-view="tasks"] .views { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sheet-panel[data-view="tasks"] .view.is-active { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* stepper */
.stepper {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--s) * 8);
  margin: calc(var(--s) * 2) auto 0;
  font-size: calc(var(--s) * 12.5);
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
}
.stepper li { display: flex; align-items: center; gap: calc(var(--s) * 6); transition: color .4s; }
.stepper li span {
  width: calc(var(--s) * 24);
  height: calc(var(--s) * 24);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  font: 400 calc(var(--s) * 12) / 1 "Russo One", sans-serif;
  transition: all .4s;
}
.stepper li.on { color: #fff; }
.stepper li.on span { background: var(--red); border-color: #ff8080; box-shadow: 0 0 12px var(--red-glow); }
.stepper .bar { width: calc(var(--s) * 46); height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.2), var(--red), rgba(255,255,255,.2)); }

/* view header */
.v-head { text-align: center; }
.v-head h3 { font-size: calc(var(--s) * 25); font-weight: 900; line-height: 1.25; margin-top: calc(var(--s) * 8); }
.v-head h3 span, .verify h3 span { color: var(--red); text-shadow: 0 0 14px rgba(255, 0, 0, .6); }
.v-head p { color: var(--muted); font-size: calc(var(--s) * 14.5); font-weight: 600; }
.yt-logo, .crown-logo {
  width: calc(var(--s) * 64);
  height: calc(var(--s) * 64);
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: calc(var(--s) * 18);
  background: linear-gradient(180deg, #ff2a2a, #b30000);
  box-shadow: 0 0 24px rgba(255, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .4);
  animation: logo-bob 2.6s ease-in-out infinite;
}
.yt-logo svg { width: 64%; fill: #fff; }
.crown-logo { background: linear-gradient(180deg, #2a0000, #000); border: 1.5px solid #ffd34d; box-shadow: 0 0 24px rgba(255, 200, 60, .45); }
.crown-logo svg { width: 56%; fill: #ffd34d; filter: drop-shadow(0 0 6px rgba(255, 200, 60, .8)); }

/* YouTube channel card */
.yt-card {
  display: flex;
  align-items: center;
  gap: calc(var(--s) * 12);
  padding: calc(var(--s) * 12) calc(var(--s) * 14);
  border-radius: calc(var(--s) * 18);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .14);
}
.yt-avatar {
  width: calc(var(--s) * 50);
  height: calc(var(--s) * 50);
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 0 2px #ff2a2a, 0 0 16px rgba(255, 0, 0, .6);
}
.yt-info { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: right; }
.yt-info b { font: 400 calc(var(--s) * 16) / 1.3 "Russo One", sans-serif; }
.yt-info small { color: var(--muted); font-size: calc(var(--s) * 12.5); text-align: right; }
.yt-sub {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--s) * 6);
  padding: calc(var(--s) * 10) calc(var(--s) * 18);
  border: 0;
  border-radius: 999px;
  background: #ff0000;
  color: #fff;
  font: 800 calc(var(--s) * 15) / 1 "Cairo", sans-serif;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(255, 0, 0, .7), 0 6px 18px rgba(255, 0, 0, .45);
  animation: sub-pulse 1.8s ease-out infinite;
  transition: transform .2s, background .3s;
}
.yt-sub svg { width: calc(var(--s) * 17); fill: #fff; transform-origin: 50% 10%; animation: bell 2.4s ease-in-out infinite; }
.yt-sub:hover { transform: scale(1.05); }
.yt-sub:active { transform: scale(.95); }
.yt-sub.clicked { background: #3a3a3a; animation: none; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.yt-sub.clicked svg { animation: none; }

/* 5-second wait */
.wait {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--s) * 12);
  padding: calc(var(--s) * 10) calc(var(--s) * 14);
  border-radius: calc(var(--s) * 16);
  background: rgba(0, 0, 0, .35);
  border: 1px dashed rgba(255, 255, 255, .18);
  transition: border-color .4s, background .4s;
}
.wait-ring { width: calc(var(--s) * 46); height: calc(var(--s) * 46); flex: none; transform: rotate(-90deg); }
.wait-ring circle { fill: none; stroke-width: 3.5; }
.wait-ring .track { stroke: rgba(255, 255, 255, .12); }
.wait-ring .prog { stroke: var(--red); stroke-linecap: round; filter: drop-shadow(0 0 4px #ff2a2a); transition: stroke-dashoffset .1s linear; }
.wait-num, .wait-check {
  position: absolute;
  right: calc(var(--s) * 14);
  width: calc(var(--s) * 46);
  text-align: center;
  font: 400 calc(var(--s) * 17) / 1 "Russo One", sans-serif;
}
.wait-check { height: calc(var(--s) * 46); padding: calc(var(--s) * 12); fill: none; stroke: #3dff8a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 26; opacity: 0; }
.wait-text { flex: 1; font-size: calc(var(--s) * 14); font-weight: 700; color: #ddd; }
.wait-text b { color: #fff; }
.wait[data-state="idle"] .wait-num { opacity: .35; }
.wait[data-state="counting"] { border-color: rgba(255, 40, 40, .6); background: rgba(80, 0, 0, .3); }
.wait[data-state="counting"] .wait-num { animation: num-tick 1s ease-in-out infinite; }
.wait[data-state="done"] { border: 1px solid rgba(61, 255, 138, .55); background: rgba(0, 60, 25, .3); }
.wait[data-state="done"] .wait-ring .prog { stroke: #3dff8a; filter: drop-shadow(0 0 4px #3dff8a); }
.wait[data-state="done"] .wait-num { opacity: 0; }
.wait[data-state="done"] .wait-check { opacity: 1; animation: draw .5s ease forwards; }

/* CTA buttons inside sheet */
.btn-cta { height: calc(var(--s) * 62); }
.btn-cta .btn-label { font-size: calc(var(--s) * 20); }
.btn[disabled] { cursor: not-allowed; filter: grayscale(.85) brightness(.55); }
.btn[disabled]::after { animation: none; opacity: 0; }
.btn[disabled]:hover .btn-arrow { transform: none; }
.lock-open { opacity: 0; transform: scale(.4); }
.btn.unlocked { animation: done-pop .6s cubic-bezier(.2,1.6,.4,1); }
.btn.unlocked .lock-closed { opacity: 0; transform: scale(.4) rotate(-30deg); }
.btn.unlocked .lock-open { opacity: 1; transform: none; }
.btn.unlocked:not(:hover) { animation: done-pop .6s cubic-bezier(.2,1.6,.4,1), cta-glow 1.6s .6s ease-in-out infinite; }

/* vault (key reveal) */
.vault { position: relative; width: calc(var(--s) * 130); height: calc(var(--s) * 130); margin: calc(var(--s) * 6) auto 0; }
.vault-rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.vault-rings circle { fill: none; transform-origin: 60px 60px; }
.vault-rings .r1 { stroke: rgba(255, 40, 40, .9); stroke-width: 2; stroke-dasharray: 30 14 6 14; animation: spin 3s linear infinite; filter: drop-shadow(0 0 4px #ff2a2a); }
.vault-rings .r2 { stroke: rgba(255, 255, 255, .55); stroke-width: 3; stroke-dasharray: 4 8; animation: spin 2.2s linear infinite reverse; }
.vault-rings .r3 { stroke: rgba(255, 40, 40, .6); stroke-width: 1.5; stroke-dasharray: 60 20; animation: spin 1.4s linear infinite; }
.vault-core {
  position: absolute;
  inset: 30%;
  display: grid;
  place-items: center;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: linear-gradient(180deg, #ff4040, #9a0000);
  filter: drop-shadow(0 0 14px rgba(255, 0, 0, .9));
  transition: background .4s;
}
.vault-key, .vault-ok { grid-area: 1 / 1; width: 54%; transition: opacity .3s, transform .4s; }
.vault-key { fill: #fff; transform: scaleX(-1); animation: key-shake .5s ease-in-out infinite; }
.vault-ok { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 26; opacity: 0; }
.vault[data-state="done"] .vault-rings circle { animation-duration: 12s; }
.vault[data-state="done"] .vault-rings .r1 { stroke: #ffd34d; filter: drop-shadow(0 0 6px #ffd34d); }
.vault[data-state="done"] .vault-key { opacity: 0; transform: scaleX(-1) rotate(-90deg) scale(.4); animation: none; }
.vault[data-state="done"] .vault-ok { opacity: 1; animation: draw .5s .15s ease forwards; }
.vault[data-state="done"] .vault-core { animation: done-pop .6s cubic-bezier(.2,1.6,.4,1); }
.vault[data-state="error"] .vault-rings circle { animation-play-state: paused; stroke: #555; }
.vault[data-state="error"] .vault-key { animation: none; opacity: .5; }

.reveal-head { margin-top: calc(var(--s) * 4) !important; }

.key-box {
  position: relative;
  padding: calc(var(--s) * 20) calc(var(--s) * 12) calc(var(--s) * 16);
  border-radius: calc(var(--s) * 16);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 40, 40, .25), transparent 70%),
    linear-gradient(180deg, #120304, #050101);
  border: 1.5px solid rgba(255, 60, 60, .7);
  box-shadow: 0 0 22px rgba(255, 0, 0, .35), inset 0 0 22px rgba(255, 0, 0, .15);
  overflow: hidden;
  opacity: 0;
  transform: scale(.85) rotateX(40deg);
  transition: opacity .4s, transform .5s cubic-bezier(.2, 1.3, .4, 1);
}
.key-box.show { opacity: 1; transform: none; }
.cooldown {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--s) * 6);
  width: fit-content;
  margin-inline: auto;
  padding: calc(var(--s) * 7) calc(var(--s) * 16);
  border-radius: 999px;
  border: 1px solid rgba(255, 211, 77, .45);
  background: linear-gradient(90deg, rgba(255, 180, 0, .06), rgba(255, 180, 0, .16), rgba(255, 180, 0, .06));
  box-shadow: 0 0 16px rgba(255, 190, 40, .15);
  text-align: center;
  color: #e9d9a8;
  font-size: calc(var(--s) * 13.5);
  font-weight: 700;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .5s var(--ease-out);
}
.cooldown.show { opacity: 1; transform: none; }
.cooldown::before {
  content: "";
  width: calc(var(--s) * 15);
  height: calc(var(--s) * 15);
  background: #ffd34d;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h12v2h-1v3.2a5 5 0 0 1-2.3 4.2L13.3 12l1.4.6A5 5 0 0 1 17 16.8V20h1v2H6v-2h1v-3.2a5 5 0 0 1 2.3-4.2L10.7 12l-1.4-.6A5 5 0 0 1 7 7.2V4H6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h12v2h-1v3.2a5 5 0 0 1-2.3 4.2L13.3 12l1.4.6A5 5 0 0 1 17 16.8V20h1v2H6v-2h1v-3.2a5 5 0 0 1 2.3-4.2L10.7 12l-1.4-.6A5 5 0 0 1 7 7.2V4H6z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: hourglass 2.4s var(--ease-out) infinite;
}
.cooldown b { color: #ffd34d; font-family: "Russo One", sans-serif; font-weight: 400; letter-spacing: .06em; text-shadow: 0 0 10px rgba(255, 211, 77, .5); }
.kc-desc.is-cooldown { color: #e9d9a8; }
.kc-desc.is-cooldown b { color: #ffd34d; font-family: "Russo One", sans-serif; font-weight: 400; letter-spacing: .05em; }
@keyframes hourglass { 0%, 70% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
.key-box.pulse { animation: box-pulse .6s ease; }
.kb-tag {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  padding: calc(var(--s) * 3) calc(var(--s) * 12);
  border-radius: 0 0 8px 8px;
  background: var(--red);
  font: 400 calc(var(--s) * 10) / 1.2 "Russo One", sans-serif;
  letter-spacing: calc(var(--s) * 2);
}
.kb-code {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--s) * 2);
  font: 400 calc(var(--s) * 15.5) / 1 "Russo One", monospace;
}
.kc-char {
  width: 1.08em;
  padding: .38em 0;
  text-align: center;
  border-radius: 5px;
  background: rgba(255, 255, 255, .06);
  color: #ff6b6b;
  border-bottom: 2px solid rgba(255, 60, 60, .5);
  transition: color .2s, background .2s, transform .2s;
}
.kc-char.set { color: #fff; background: rgba(255, 255, 255, .1); text-shadow: 0 0 8px rgba(255, 255, 255, .7); animation: char-set .3s ease; }
.kc-dash { align-self: center; color: var(--red); font-size: .6em; padding: 0; }
.kb-holo {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .16) 45%, rgba(255, 80, 80, .18) 50%, transparent 65%) -150% 0 / 60% 100% no-repeat;
  animation: card-shine 3s ease-in-out infinite;
  pointer-events: none;
}

#copyKey { opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .4s, transform .4s; }
#copyKey.show { opacity: 1; transform: none; pointer-events: auto; }
.icon-copied { fill: none; stroke: #3dff8a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); }
#copyKey.copied .icon-copy { opacity: 0; transform: scale(.4); }
#copyKey.copied .icon-copied { opacity: 1; transform: none; }
#copyKey.copied { filter: drop-shadow(0 0 calc(var(--s) * 16) rgba(61, 255, 138, .7)); }

/* long-term: notice + video */
.notice {
  display: flex;
  gap: calc(var(--s) * 10);
  padding: calc(var(--s) * 12) calc(var(--s) * 14);
  border-radius: calc(var(--s) * 14);
  background: linear-gradient(90deg, rgba(255, 30, 30, .05), rgba(255, 30, 30, .18));
  border: 1px solid rgba(255, 50, 50, .35);
  border-right: calc(var(--s) * 4) solid var(--red);
}
.notice-icon svg { width: calc(var(--s) * 24); fill: var(--red); filter: drop-shadow(0 0 5px var(--red-glow)); }
.notice p { font-size: calc(var(--s) * 14.5); font-weight: 700; line-height: 1.6; color: #eee; }
.notice b { color: #ff5c5c; }

.video-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--s) * 14);
  width: 100%;
  padding: calc(var(--s) * 12);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: calc(var(--s) * 16);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .75) 70%),
    url("assets/bg-mobile.jpg") center 70% / cover;
  color: #fff;
  font: inherit;
  text-align: right;
  cursor: pointer;
  overflow: hidden;
  height: auto;
  transition: transform .25s, border-color .3s;
}
.video-card:hover { transform: translateY(-2px); border-color: rgba(255, 60, 60, .8); }
.vc-play {
  position: relative;
  flex: none;
  width: calc(var(--s) * 54);
  height: calc(var(--s) * 54);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ff0000;
  box-shadow: 0 0 20px rgba(255, 0, 0, .8);
}
.vc-play::before, .vc-play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 60, 60, .8);
  animation: ripple 1.8s ease-out infinite;
}
.vc-play::after { animation-delay: .9s; }
.vc-play svg { width: 46%; fill: #fff; margin-right: -8%; }
.vc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--s) * 2); }
.vc-body b { font-size: calc(var(--s) * 18); font-weight: 900; }
.vc-body small { display: block; font-size: calc(var(--s) * 12.5); font-weight: 600; color: rgba(255, 255, 255, .85); line-height: 1.55; }

/* verify */
.verify { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(var(--s) * 30) 0; }
.verify.hide { display: none; }
.verify h3 { font-size: calc(var(--s) * 24); font-weight: 900; margin-top: calc(var(--s) * 14); }
.radar {
  position: relative;
  width: calc(var(--s) * 140);
  height: calc(var(--s) * 140);
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 32%, rgba(255, 40, 40, .25) 33% 34%, transparent 35% 60%, rgba(255, 40, 40, .25) 61% 62%, transparent 63%),
    radial-gradient(circle, #1a0203, #050101 70%);
  border: 1.5px solid rgba(255, 50, 50, .7);
  box-shadow: 0 0 30px rgba(255, 0, 0, .35), inset 0 0 30px rgba(255, 0, 0, .2);
  overflow: hidden;
}
.radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 75%, rgba(255, 40, 40, .1) 80%, rgba(255, 60, 60, .75) 99%, #fff 100%);
  animation: spin 1.4s linear infinite;
}
.radar-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 60, 60, .6); animation: ripple 1.6s ease-out infinite; }
.radar-shield { position: absolute; inset: 33%; fill: #ff3b3b; filter: drop-shadow(0 0 8px #ff2a2a); animation: pulse 1s ease-in-out infinite; }
.verify[data-state="done"] .radar { border-color: #3dff8a; box-shadow: 0 0 30px rgba(61, 255, 138, .4); }
.verify[data-state="done"] .radar-sweep { animation: none; opacity: 0; }
.verify[data-state="done"] .radar-shield { fill: #3dff8a; filter: drop-shadow(0 0 10px #3dff8a); animation: done-pop .5s cubic-bezier(.2,1.6,.4,1); }
.checks { list-style: none; margin: calc(var(--s) * 14) auto 0; width: fit-content; text-align: right; }
.checks li {
  display: flex;
  align-items: center;
  gap: calc(var(--s) * 10);
  padding: calc(var(--s) * 5) 0;
  font-size: calc(var(--s) * 14.5);
  font-weight: 700;
  color: rgba(255, 255, 255, .45);
  transition: color .3s;
}
.checks i {
  position: relative;
  width: calc(var(--s) * 20);
  height: calc(var(--s) * 20);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .2);
  border-top-color: var(--red);
  animation: spin .8s linear infinite;
}
.checks li.done { color: #fff; }
.checks li.done i { animation: none; border-color: #3dff8a; background: #3dff8a; box-shadow: 0 0 10px rgba(61, 255, 138, .7); }
.checks li.done i::after {
  content: "";
  position: absolute;
  left: 30%; top: 14%;
  width: 28%; height: 50%;
  border: solid #031; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* tasks */
.tasks { display: none; flex: 1; min-height: 0; flex-direction: column; gap: calc(var(--s) * 12); }
.tasks.show { display: flex; animation: view-in .55s var(--ease-out) both; }
.guide-btn {
  --shape: polygon(4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50%);
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--s) * 12);
  width: 100%;
  margin-top: calc(var(--s) * 34);
  padding: calc(var(--s) * 12) calc(var(--s) * 22);
  border: 0;
  clip-path: var(--shape);
  background: linear-gradient(90deg, #ffd34d, #fff6cc 50%, #ffb300);
  color: #fff;
  font: inherit;
  text-align: right;
  cursor: pointer;
  isolation: isolate;
  filter: drop-shadow(0 0 calc(var(--s) * 14) rgba(255, 200, 60, .6));
  animation: guide-glow 1.8s ease-in-out infinite;
}
.guide-btn::before {
  content: "";
  position: absolute;
  inset: max(2px, calc(var(--s) * 2.5));
  clip-path: var(--shape);
  z-index: -1;
  background: linear-gradient(180deg, #3a0000, #120000 55%, #2a0000);
}
.guide-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 220, 120, .3) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat;
  animation: card-shine 2.6s ease-in-out infinite;
}
.gb-icon {
  flex: none;
  width: calc(var(--s) * 44);
  height: calc(var(--s) * 44);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ffd34d, #ff9d00);
  box-shadow: 0 0 14px rgba(255, 200, 60, .8);
}
.gb-icon svg { width: 46%; fill: #2a0000; margin-right: -8%; }
.gb-text { flex: 1; display: flex; flex-direction: column; }
.gb-text b { font-size: calc(var(--s) * 15.5); font-weight: 900; line-height: 1.3; }
.gb-text small { font-size: calc(var(--s) * 13); font-weight: 700; color: #ffd34d; }
.gb-badge {
  flex: none;
  padding: calc(var(--s) * 4) calc(var(--s) * 10);
  border-radius: 999px;
  background: #ffd34d;
  color: #2a0000;
  font-size: calc(var(--s) * 12);
  font-weight: 900;
}
.guide-btn:hover { filter: brightness(1.15) drop-shadow(0 0 calc(var(--s) * 20) rgba(255, 200, 60, .9)); }
.guide-btn:active { transform: scale(.98); }

.task-frame {
  flex: 1;
  min-height: calc(var(--s) * 220);
  display: flex;
  flex-direction: column;
  border-radius: calc(var(--s) * 16);
  border: 1.5px solid rgba(255, 255, 255, .22);
  background: #050101;
  box-shadow: 0 0 0 1px rgba(255, 0, 0, .25), 0 0 26px rgba(255, 0, 0, .25);
  overflow: hidden;
}
.tf-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--s) * 6);
  padding: calc(var(--s) * 8) calc(var(--s) * 12);
  background: linear-gradient(180deg, #1d1d1d, #0d0d0d);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  direction: ltr;
}
.tf-bar i { width: calc(var(--s) * 9); height: calc(var(--s) * 9); border-radius: 50%; background: #ff3b3b; }
.tf-bar i:nth-child(2) { background: #ffc107; }
.tf-bar i:nth-child(3) { background: #3dff8a; }
.tf-bar span { margin-left: auto; font-size: calc(var(--s) * 12); font-weight: 700; color: rgba(255, 255, 255, .6); }
.tf-body { position: relative; flex: 1; min-height: 0; }
.tf-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; opacity: 0; transition: opacity .4s; }
.tf-body.loaded iframe { opacity: 1; }
.tf-empty {
  position: absolute;
  inset: calc(var(--s) * 12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--s) * 6);
  border-radius: calc(var(--s) * 12);
  border: 1.5px dashed rgba(255, 60, 60, .45);
  background: repeating-linear-gradient(-45deg, rgba(255, 0, 0, .03) 0 10px, transparent 10px 20px);
  text-align: center;
}
.tf-empty svg { width: calc(var(--s) * 44); fill: rgba(255, 60, 60, .8); filter: drop-shadow(0 0 8px var(--red-glow)); }
.tf-empty b { font-size: calc(var(--s) * 16); }
.tf-empty small { color: var(--muted); font-size: calc(var(--s) * 13); }
.tf-loading { position: absolute; inset: 0; display: grid; place-items: center; }
.tf-loading span { width: calc(var(--s) * 36); height: calc(var(--s) * 36); border-radius: 50%; border: 3px solid rgba(255, 255, 255, .15); border-top-color: var(--red); animation: spin .8s linear infinite; }
.tf-body.loaded .tf-loading { display: none; }

@keyframes view-in { from { opacity: 0; transform: translateX(-26px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes view-back { from { opacity: 0; transform: translateX(26px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes view-out { to { opacity: 0; transform: translateX(20px) scale(.985); } }
@keyframes view-out-back { to { opacity: 0; transform: translateX(-20px) scale(.985); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes logo-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes sub-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, .7), 0 6px 18px rgba(255, 0, 0, .45); } 100% { box-shadow: 0 0 0 14px rgba(255, 0, 0, 0), 0 6px 18px rgba(255, 0, 0, .45); } }
@keyframes bell { 0%, 60%, 100% { transform: rotate(0); } 66% { transform: rotate(18deg); } 74% { transform: rotate(-16deg); } 82% { transform: rotate(10deg); } 90% { transform: rotate(-6deg); } }
@keyframes num-tick { 0% { transform: scale(1.3); } 30%, 100% { transform: scale(1); } }
@keyframes cta-glow { 0%, 100% { filter: drop-shadow(0 0 calc(var(--s) * 14) rgba(255, 0, 0, .7)); } 50% { filter: drop-shadow(0 0 calc(var(--s) * 28) rgba(255, 60, 60, 1)); } }
@keyframes key-shake { 0%, 100% { transform: scaleX(-1) rotate(0); } 25% { transform: scaleX(-1) rotate(-12deg); } 75% { transform: scaleX(-1) rotate(12deg); } }
@keyframes char-set { 0% { transform: translateY(-30%) scale(1.3); } 100% { transform: none; } }
@keyframes box-pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 255, 138, .8); border-color: #3dff8a; } 100% { box-shadow: 0 0 0 18px rgba(61, 255, 138, 0); } }
@keyframes ripple { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
@keyframes guide-glow { 0%, 100% { filter: drop-shadow(0 0 calc(var(--s) * 10) rgba(255, 200, 60, .5)); } 50% { filter: drop-shadow(0 0 calc(var(--s) * 22) rgba(255, 200, 60, .95)); } }

@media (prefers-reduced-motion: reduce) {
  .view.is-active, .view.is-leaving, .tasks.show, .yt-logo, .crown-logo, .yt-sub, .yt-sub svg, .vault-rings circle, .vault-key, .kb-holo,
  .vc-play::before, .vc-play::after, .radar-sweep, .radar-ring, .radar-shield, .guide-btn, .guide-btn::after, .btn.unlocked { animation: none !important; }
  .view.is-leaving { display: none; }
  .menu, .menu a, .sheet-panel, .sheet-backdrop, .cooldown { transition-duration: .01s !important; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  top: calc(max(calc(var(--s) * 12), env(safe-area-inset-top)) + var(--s) * 64);
  z-index: 60;
  max-width: 90vw;
  padding: calc(var(--s) * 10) calc(var(--s) * 20);
  border-radius: 999px;
  background: rgba(15, 2, 3, .92);
  border: 1px solid rgba(255, 40, 40, .6);
  box-shadow: 0 0 20px rgba(255, 0, 0, .35);
  color: #fff;
  font-size: max(13px, calc(var(--s) * 15));
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -16px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- FX layer ---------- */
.embers { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.fx-layer { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.fx-spark {
  position: absolute;
  width: calc(var(--s) * 5);
  height: calc(var(--s) * 5);
  border-radius: 50%;
  box-shadow: 0 0 calc(var(--s) * 8) currentColor, 0 0 calc(var(--s) * 12) #ff2a2a;
}
.fx-shard {
  position: absolute;
  width: calc(var(--s) * 9);
  height: calc(var(--s) * 4);
  clip-path: polygon(0 50%, 30% 0, 100% 50%, 30% 100%);
  box-shadow: 0 0 6px #fff;
}
.fx-wave {
  position: absolute;
  clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
  background: radial-gradient(ellipse at center, transparent 55%, rgba(255, 40, 40, .9) 75%, transparent 80%);
  border: 2px solid rgba(255, 60, 60, .9);
}
.fx-wave-white { background: radial-gradient(ellipse at center, rgba(255,255,255,.25) 40%, rgba(255, 255, 255, .9) 75%, transparent 80%); border-color: #fff; }

/* ---------- Animations ---------- */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes orbit { to { --ang: 360deg; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--s) * -7)); } }
@keyframes pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes shine { 0%, 70% { transform: translateX(-150%); } 100% { transform: translateX(260%); } }
@keyframes kos-shine { 0%, 55% { background-position: -200% 0, 0 0; } 100% { background-position: 250% 0, 0 0; } }
@keyframes glitch {
  0%, 91%, 100% { opacity: 0; transform: none; }
  92% { opacity: .9; transform: translateX(calc(var(--s) * 4)); clip-path: inset(20% 0 60% 0); color: #ff2a2a; -webkit-text-fill-color: #ff2a2a; }
  94% { opacity: .9; transform: translateX(calc(var(--s) * -4)); clip-path: inset(60% 0 15% 0); }
  96% { opacity: 0; }
}
@keyframes zap {
  0%, 88%, 92%, 100% { filter: drop-shadow(0 0 calc(var(--s) * 18) rgba(255, 0, 0, .45)); }
  89%, 91% { filter: brightness(1.35) drop-shadow(0 0 calc(var(--s) * 30) rgba(255, 40, 40, .95)); }
}
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(255, 40, 40, .8); } 100% { box-shadow: 0 0 0 calc(var(--s) * 10) rgba(255, 40, 40, 0); } }
@keyframes stripes { to { background-position: calc(var(--s) * -46) 0, 0 0; } }
@keyframes flicker { 50% { opacity: .55; } }
@keyframes drop { 0% { transform: translateY(-40%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(25%); opacity: 0; } }
@keyframes rumble { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(.6px, -.6px); } 50% { transform: translate(-.6px, .4px); } 75% { transform: translate(.4px, .6px); } }
@keyframes label-in { from { opacity: 0; transform: translateY(40%); letter-spacing: .2em; } to { opacity: 1; transform: none; letter-spacing: normal; } }
@keyframes done-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes flash { from { opacity: .85; } to { opacity: 0; } }
@keyframes key-turn { 0% { transform: scaleX(-1) rotate(0); } 60% { transform: scaleX(-1) rotate(-100deg); } 100% { transform: scaleX(-1) rotate(-90deg); } }
@keyframes card-in { to { opacity: 1; transform: none; } }
@keyframes card-shine { 0%, 60% { background-position: -150% 0; } 100% { background-position: 250% 0; } }

@media (prefers-reduced-motion: reduce) {
  .emblem, .emblem-wrap::before, .btn::after, .title-kos, .title-kos::after, .f-icon::before, .live-dot, .kc-glow,
  .btn-red.is-loading, .btn-fill, .btn-fill::after { animation: none !important; }
  .sheet.open .key-card { animation-duration: .01s; animation-delay: 0s; }
}

/* ---------- Wide screens: wider background ---------- */
@media (min-aspect-ratio: 1/1) {
  .bg { background-image: url("assets/bg-desktop.jpg"); background-position: center; }
  .menu { left: auto; width: calc(var(--s) * 340); min-width: 260px; border-left: 1px solid rgba(255, 30, 30, .5); }
  .sheet { align-items: center; }
  .sheet-panel { border-radius: calc(var(--s) * 26); border-bottom: 1px solid rgba(255, 40, 40, .55); opacity: 0; transform: translateY(26px) scale(.96); transition: transform .45s var(--ease-in), opacity .35s ease; }
  .sheet.open .sheet-panel { transition: transform .6s var(--ease-out), opacity .45s ease; }
  .sheet.open .sheet-panel.resizing { transition: transform .6s var(--ease-out), opacity .45s ease, height .48s var(--ease-out); }
  .sheet.open .sheet-panel { opacity: 1; transform: none; }
  .sheet-grip { display: none; }
}

/* ---------- Short landscape (rotated phone): logo beside the content ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --s: min(calc(100vw / 820), calc(var(--vh) * 100 / 420)); }
  .topbar { position: absolute; top: 0; left: 0; right: 0; max-width: none; }
  .hero {
    flex-direction: row;
    gap: calc(var(--s) * 30);
    padding: calc(var(--s) * 40) 4vw calc(var(--s) * 10);
  }
  .emblem-wrap { width: calc(var(--s) * 330); margin-top: 0; }
  .features { width: calc(var(--s) * 400); margin-top: calc(var(--s) * 14); }
  .actions { width: calc(var(--s) * 400); margin-top: calc(var(--s) * 18); gap: calc(var(--s) * 12); }
  .btn { height: calc(var(--s) * 58); }
}