/* ============================================================
   KanSiKa - Onboarding / Character Selection
   Visual direction: SONIC JUNGLE COMMAND
   Dark cyber-jungle base · cyan/violet sonic glow · gold
   ancient-tech accents · premium glass cards · CSS/SVG only.

   Consumed ONLY by index.html (onboarding). auth.html carries
   its own inline styles and is intentionally untouched.
   JS contract (public/scripts/main.js - do not rename):
   #charGrid  #proceedBtn  #ksHint  .ks-card  .is-selected
   .is-hidden  [data-char]  card-kan/sim/kav  has-emblem
   ============================================================ */

/* -- Design tokens ------------------------------------------- */
:root {
  /* Jungle base surfaces */
  --ks-bg0:        #030807;
  --ks-bg1:        #061410;
  --ks-bg2:        #0A1F19;
  --ks-glass:      rgba(9, 24, 19, .58);
  --ks-glass-edge: rgba(125, 240, 255, .14);

  /* Sonic energy */
  --ks-cyan:        #7DF0FF;
  --ks-cyan-glow:   rgba(125, 240, 255, .55);
  --ks-cyan-mid:    rgba(125, 240, 255, .30);
  --ks-cyan-dim:    rgba(125, 240, 255, .12);
  --ks-violet:      #9B6BE0;
  --ks-violet-glow: rgba(155, 107, 224, .55);
  --ks-violet-dim:  rgba(155, 107, 224, .14);

  /* Ancient-tech gold */
  --ks-gold:        #F0C36A;
  --ks-gold-glow:   rgba(240, 195, 106, .45);
  --ks-gold-dim:    rgba(240, 195, 106, .14);

  /* Jungle jade (environment only, never text) */
  --ks-jade:        #3BE08F;
  --ks-jade-dim:    rgba(59, 224, 143, .08);

  /* Clan accents (SIM ember-red per Bull canon) */
  --ks-ember:       #FF8A76;
  --ks-ember-glow:  rgba(255, 138, 118, .55);
  --ks-ember-dim:   rgba(255, 138, 118, .13);

  /* Text */
  --ks-white:       #EDF4F1;
  --ks-muted:       rgba(232, 240, 236, .46);
  --ks-faint:       rgba(232, 240, 236, .28);

  /* Motion */
  --ks-ease-pop:    cubic-bezier(.34, 1.56, .64, 1);
  --ks-ease-out:    cubic-bezier(.22, 1, .36, 1);

  /* Legacy aliases kept for safety */
  --ks-black:       var(--ks-bg0);
  --ks-pink:        var(--ks-ember);
  --ks-pink-glow:   var(--ks-ember-glow);
}

/* -- Reset --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  min-height: 100%;
  background: var(--ks-bg0);
  color: var(--ks-white);
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  overflow-x: hidden;
}

/* ============================================================
   STAGE  (full-screen wrapper)
   ============================================================ */
.ks-stage {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 36px 24px calc(30px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  isolation: isolate;
}

/* -- Cyber-jungle depth base --------------------------------
   Canopy green above, sonic cyan heart, violet undergrowth,
   warm gold ground-line at the very bottom. */
.ks-stage::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 55% at 50% -12%,  rgba(16, 58, 44, .55) 0%, transparent 62%),
    radial-gradient(ellipse 70% 52% at 50% 42%,    rgba(125, 240, 255, .055) 0%, transparent 70%),
    radial-gradient(ellipse 52% 40% at 8% 92%,     rgba(155, 107, 224, .10) 0%, transparent 62%),
    radial-gradient(ellipse 52% 40% at 94% 90%,    rgba(59, 224, 143, .06) 0%, transparent 62%),
    radial-gradient(ellipse 90% 16% at 50% 103%,   rgba(240, 195, 106, .10) 0%, transparent 75%),
    linear-gradient(180deg, rgba(6, 20, 16, .72) 0%, rgba(3, 9, 7, .8) 55%, rgba(5, 16, 11, .88) 100%);
}

/* -- Tech grid ------------------------------------------------ */
.ks-bg {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(125, 240, 255, .033) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 240, 255, .033) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 85% at 50% 45%, #000 15%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 45%, #000 15%, transparent 100%);
}

/* -- Canopy shadow shapes (organic jungle silhouettes) ------- */
.ks-canopy {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 26% at -6% -4%,  rgba(4, 30, 20, .85) 0%, transparent 70%),
    radial-gradient(ellipse 46% 26% at 106% -4%, rgba(4, 30, 20, .85) 0%, transparent 70%),
    radial-gradient(ellipse 30% 14% at 26% -3%,  rgba(6, 40, 26, .6)  0%, transparent 70%),
    radial-gradient(ellipse 30% 14% at 74% -3%,  rgba(6, 40, 26, .6)  0%, transparent 70%);
}

/* -- Scanlines (kept very subtle) ----------------------------- */
.ks-scanlines {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 3px,
    rgba(0, 0, 0, .12) 3px, rgba(0, 0, 0, .12) 4px
  );
}

/* -- Sonic resonance rings (SVG, breathing behind the cards) -- */
.ks-sonic {
  position: absolute; z-index: 1; pointer-events: none;
  left: 50%; top: 52%;
  width: min(135vmin, 1000px); height: auto;
  transform: translate(-50%, -50%);
  color: var(--ks-cyan);
  opacity: .16;
  animation: ksSonicBreath 7s ease-in-out infinite;
}

@keyframes ksSonicBreath {
  0%, 100% { opacity: .11; transform: translate(-50%, -50%) scale(.985); }
  50%      { opacity: .20; transform: translate(-50%, -50%) scale(1.015); }
}

/* ============================================================
   HEADER
   ============================================================ */
.ks-header {
  position: relative; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; gap: 7px;
  text-align: center;
  padding-bottom: 2px;
}

/* Game wordmark - ancient-tech chip */
.ks-wordmark {
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .45em; text-indent: .45em;
  text-transform: uppercase;
  color: var(--ks-muted);
  padding: 6px 18px;
  border: 1px solid rgba(240, 195, 106, .22);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(240, 195, 106, .06), transparent);
  box-shadow: inset 0 1px 0 rgba(240, 195, 106, .12);
}
.ks-wordmark em {
  font-style: normal;
  color: var(--ks-cyan);
  text-shadow: 0 0 12px var(--ks-cyan-glow);
}

/* Main headline */
.ks-headline {
  display: flex; flex-direction: column;
  align-items: center; gap: 2px; line-height: 1;
}

.ks-headline__top {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(12px, 1.5vw, 17px);
  font-weight: 600; letter-spacing: .55em; text-indent: .55em;
  color: var(--ks-muted); text-transform: uppercase;
}

.ks-headline__main {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(32px, 6.4vw, 70px);
  font-weight: 900; letter-spacing: .06em;
  background: linear-gradient(180deg, #FFFFFF 0%, #C8F4FF 46%, #6FD8EC 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 0 22px rgba(125, 240, 255, .40))
    drop-shadow(0 2px 0 rgba(0, 0, 0, .85));
  animation: ksGlow 3.6s ease-in-out infinite;
}

@keyframes ksGlow {
  0%, 100% { filter: drop-shadow(0 0 22px rgba(125, 240, 255, .38)) drop-shadow(0 2px 0 rgba(0, 0, 0, .85)); }
  50%      { filter: drop-shadow(0 0 38px rgba(125, 240, 255, .62)) drop-shadow(0 2px 0 rgba(0, 0, 0, .85)); }
}

.ks-sub {
  margin-top: 2px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .25em; text-indent: .25em;
  text-transform: uppercase;
  color: var(--ks-muted);
}

/* Tribal divider - cyan lines, gold gem */
.ks-divider {
  width: min(320px, 72vw); height: 14px;
  margin-top: 4px;
  overflow: visible;
}
.ks-divider__line {
  stroke: var(--ks-cyan); stroke-width: 1;
  stroke-opacity: .35;
}
.ks-divider__dot { fill: var(--ks-cyan); fill-opacity: .55; }
.ks-divider__gem {
  fill: var(--ks-gold);
  filter: drop-shadow(0 0 6px var(--ks-gold-glow));
  animation: ksGemPulse 3.2s ease-in-out infinite;
}

@keyframes ksGemPulse {
  0%, 100% { fill-opacity: .75; }
  50%      { fill-opacity: 1; }
}

/* ============================================================
   CHARACTER GRID
   ============================================================ */
.ks-grid {
  position: relative; z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: clamp(16px, 3vw, 42px);
  flex: 1;
  padding: 14px 0;
  width: 100%;
}

/* -- Card - premium jungle-glass armory panel ----------------- */
.ks-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: clamp(190px, 21vw, 262px);
  aspect-ratio: 10 / 13.4;
  border-radius: 20px;
  cursor: pointer;
  outline: none;
  border: 1.5px solid var(--ks-glass-edge);
  background:
    linear-gradient(180deg, rgba(125, 240, 255, .045) 0%, transparent 30%),
    linear-gradient(165deg, var(--ks-glass) 0%, rgba(5, 14, 11, .72) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
  box-shadow:
    0 10px 34px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .05);

  /* Per-clan accent, overridden by [data-char] below */
  --ac:      var(--ks-cyan);
  --ac-glow: var(--ks-cyan-glow);
  --ac-dim:  var(--ks-cyan-dim);

  transition:
    transform .32s var(--ks-ease-pop),
    border-color .24s ease,
    box-shadow .24s ease;
}

/* Clan accent assignment */
.ks-card[data-char="kan"] { --ac: var(--ks-cyan);   --ac-glow: var(--ks-cyan-glow);   --ac-dim: var(--ks-cyan-dim); }
.ks-card[data-char="sim"] { --ac: var(--ks-ember);  --ac-glow: var(--ks-ember-glow);  --ac-dim: var(--ks-ember-dim); }
.ks-card[data-char="kav"] { --ac: var(--ks-violet); --ac-glow: var(--ks-violet-glow); --ac-dim: var(--ks-violet-dim); }

/* Legacy emblem variable aliases */
.ks-card {
  --emblem-color: var(--ac);
  --emblem-glow:  var(--ac-glow);
  --card-glow:    var(--ac-glow);
  --card-dim:     var(--ac-dim);
}

/* Hover: lift + accent awakening (pointer devices only) */
@media (hover: hover) {
  .ks-card:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: color-mix(in srgb, var(--ac) 45%, transparent);
    box-shadow:
      0 0 0 1px var(--ac-dim),
      0 22px 54px rgba(0, 0, 0, .68),
      0 0 34px var(--ac-dim),
      inset 0 1px 0 rgba(255, 255, 255, .07);
  }
}

/* Press feedback */
.ks-card:active { transform: scale(.975); }

/* Focus ring (keyboard nav) */
.ks-card:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 4px;
}

/* -- Selected state: accent border + breathing glow ----------- */
.ks-card.is-selected {
  border-color: var(--ac);
  box-shadow:
    0 0 0 2px var(--ac-glow),
    0 0 44px var(--ac-dim),
    0 18px 52px rgba(0, 0, 0, .75);
  animation: ksCardPulse 2.6s ease-in-out infinite;
}

@keyframes ksCardPulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px var(--ac-glow),
      0 0 44px var(--ac-dim),
      0 18px 52px rgba(0, 0, 0, .75);
  }
  50% {
    box-shadow:
      0 0 0 2.5px var(--ac),
      0 0 68px var(--ac-dim),
      0 0 26px var(--ac-dim),
      0 18px 52px rgba(0, 0, 0, .75);
  }
}

/* -- Ancient-tech corner brackets ----------------------------- */
.ks-corner {
  position: absolute; z-index: 6;
  width: 16px; height: 16px;
  pointer-events: none;
  opacity: .38;
  transition: opacity .25s ease;
  border: 0 solid var(--ks-gold);
}
.ks-corner--tl { top: 7px;    left: 7px;   border-top-width: 1.5px; border-left-width: 1.5px;  border-top-left-radius: 6px; }
.ks-corner--tr { top: 7px;    right: 7px;  border-top-width: 1.5px; border-right-width: 1.5px; border-top-right-radius: 6px; }
.ks-corner--bl { bottom: 7px; left: 7px;   border-bottom-width: 1.5px; border-left-width: 1.5px;  border-bottom-left-radius: 6px; }
.ks-corner--br { bottom: 7px; right: 7px;  border-bottom-width: 1.5px; border-right-width: 1.5px; border-bottom-right-radius: 6px; }

.ks-card:hover .ks-corner,
.ks-card.is-selected .ks-corner {
  opacity: .9;
}
.ks-card.is-selected .ks-corner {
  box-shadow: 0 0 8px var(--ks-gold-glow);
}

/* -- Collar accent line (top of card, canon collar color) ----- */
.ks-card__collar {
  position: absolute; top: 0; left: 18px; right: 18px; z-index: 5;
  height: 2px; border-radius: 0 0 2px 2px;
  background: var(--ac);
  box-shadow: 0 0 10px var(--ac-glow);
  opacity: 0;
  transition: opacity .3s ease;
}
.ks-card.is-selected .ks-card__collar { opacity: 1; }

/* -- Emblem zone (upper region of the card) ------------------- */
.ks-card__frame { border-radius: inherit; }

.ks-card__emblem-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 10px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 52%, var(--ac-dim) 0%, transparent 60%),
    radial-gradient(ellipse 90% 40% at 50% 106%, rgba(4, 16, 11, .8) 0%, transparent 70%);
}

/* Soft breathing aura behind the emblem */
.ks-card__emblem-frame::before {
  content: '';
  position: absolute;
  z-index: 0;
  width: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ac-glow) 0%, var(--ac-dim) 38%, transparent 72%);
  filter: blur(12px);
  opacity: .5;
  animation: ksEmblemAura 4s ease-in-out infinite;
  pointer-events: none;
}

.ks-card__emblem,
.ks-card__emblem-fallback {
  width: min(80%, 210px);
  max-height: 100%;
  transform-origin: 50% 55%;
  animation: ksEmblemFloat 4.4s ease-in-out infinite;
}

.ks-card__emblem {
  position: relative;
  z-index: 2;
  display: block;
  height: auto;
  object-fit: contain;
  border-radius: 22%;
  mix-blend-mode: screen;
  user-select: none;
  pointer-events: none;
}

.ks-card__emblem-fallback {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--ac);
  border-radius: 50%;
  color: var(--ac);
  background: radial-gradient(circle, var(--ac-dim), rgba(3, 10, 8, .78) 68%);
  box-shadow: inset 0 0 28px var(--ac-dim), 0 0 20px var(--ac-glow);
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 900;
  letter-spacing: .12em;
  text-indent: .12em;
  text-shadow: 0 0 18px var(--ac-glow);
}

.ks-card__emblem-frame.has-emblem .ks-card__emblem-fallback { opacity: 0; }

/* Selection ring around the emblem */
.ks-card__emblem-frame::after {
  content: '';
  position: absolute;
  z-index: 3;
  width: 84%;
  aspect-ratio: 1;
  border: 1.5px solid var(--ac);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 22px var(--ac-glow), inset 0 0 18px var(--ac-dim);
  transition: opacity .24s ease;
}

.ks-card.is-selected .ks-card__emblem-frame::after {
  opacity: .95;
  animation: ksEmblemRing 2.2s ease-in-out infinite;
}
.ks-card.is-selected .ks-card__emblem-frame::before {
  opacity: .85;
  animation-duration: 2.4s;
}
.ks-card.is-selected .ks-card__emblem,
.ks-card.is-selected .ks-card__emblem-fallback {
  animation-name: ksEmblemActive;
  animation-duration: 3.2s;
}

@media (hover: hover) {
  .ks-card:hover .ks-card__emblem,
  .ks-card:hover .ks-card__emblem-fallback {
    animation-name: ksEmblemActive;
  }
}

.ks-card:active .ks-card__emblem,
.ks-card:active .ks-card__emblem-fallback {
  animation: none;
  transform: scale(.97);
}

@keyframes ksEmblemAura {
  0%, 100% { transform: scale(.9);  opacity: .38; }
  50%      { transform: scale(1.05); opacity: .72; }
}

@keyframes ksEmblemFloat {
  0%, 100% {
    transform: translateY(3px) scale(1);
    filter: brightness(1.02) saturate(1.08) drop-shadow(0 0 10px var(--ac-dim));
  }
  50% {
    transform: translateY(-7px) scale(1.02);
    filter: brightness(1.12) saturate(1.18) drop-shadow(0 0 20px var(--ac-dim));
  }
}

@keyframes ksEmblemActive {
  0%, 100% {
    transform: translateY(2px) scale(1.02);
    filter: brightness(1.1) saturate(1.15) drop-shadow(0 0 16px var(--ac-glow));
  }
  50% {
    transform: translateY(-8px) scale(1.06);
    filter: brightness(1.2) saturate(1.25) drop-shadow(0 0 28px var(--ac-glow));
  }
}

@keyframes ksEmblemRing {
  0%, 100% { transform: scale(.97); opacity: .55; }
  50%      { transform: scale(1.02); opacity: .95; }
}

/* -- Identity block (lower region of the card) ---------------- */
.ks-card__body {
  position: relative; z-index: 5;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px 15px 14px;
  border-top: 1px solid rgba(125, 240, 255, .10);
  background: linear-gradient(180deg, rgba(4, 13, 10, .55) 0%, rgba(3, 9, 7, .82) 100%);
}

/* Fine gold hairline over the divider */
.ks-card__body::before {
  content: '';
  position: absolute; top: -1px; left: 22%; right: 22%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ks-gold-glow), transparent);
  opacity: .55;
}

.ks-card__badge {
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  text-align: center;
}

.ks-card__name {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 900; letter-spacing: .14em; text-indent: .14em;
  color: var(--ks-white);
  text-shadow: 0 0 16px var(--ac-glow);
}

.ks-card__title {
  font-size: 11px; font-weight: 700;
  letter-spacing: .22em; text-indent: .22em;
  text-transform: uppercase;
  color: var(--ks-gold);
  text-shadow: 0 0 10px var(--ks-gold-dim);
}

.ks-card__clan {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .24em; text-indent: .24em;
  text-transform: uppercase;
  color: var(--ks-muted);
}

/* -- Trait meters (static, decorative) ------------------------ */
.ks-card__traits {
  list-style: none;
  display: flex; flex-direction: column; gap: 5px;
}

.ks-trait {
  display: flex; align-items: center; gap: 8px;
}

.ks-trait__lbl {
  flex: 0 0 30px;
  font-family: 'Orbitron', sans-serif;
  font-size: 8px; font-weight: 700; letter-spacing: .14em;
  color: var(--ks-faint);
}

.ks-trait__bar {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(125, 240, 255, .08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
  overflow: hidden;
}

.ks-trait__bar i {
  position: absolute; inset: 0 auto 0 0;
  width: var(--v, 50%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ac) 0%, color-mix(in srgb, var(--ac) 55%, var(--ks-gold)) 100%);
  box-shadow: 0 0 8px var(--ac-dim);
  opacity: .78;
  transition: opacity .25s ease;
}

.ks-card.is-selected .ks-trait__bar i,
.ks-card:hover .ks-trait__bar i { opacity: 1; }

/* -- "SELECTED" chip (top-right) ------------------------------ */
.ks-card__sel {
  position: absolute; top: 12px; right: 12px; z-index: 7;
  display: none;
  align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--ac) 14%, rgba(3, 10, 8, .7));
  border: 1px solid var(--ac);
  font-size: 9px; font-weight: 800; letter-spacing: .15em;
  color: var(--ac);
  box-shadow: 0 0 14px var(--ac-dim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ks-card__sel svg { width: 11px; height: 11px; flex-shrink: 0; }

.ks-card.is-selected .ks-card__sel {
  display: flex;
  animation: ksSelPop .32s var(--ks-ease-pop);
}

@keyframes ksSelPop {
  0%   { transform: scale(.6); opacity: 0; }
  100% { transform: scale(1);  opacity: 1; }
}

/* ============================================================
   FOOTER / PROCEED
   ============================================================ */
.ks-footer {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  padding-top: 2px;
}

.ks-proceed-wrap {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
}

/* Button - disabled: dormant glass slab */
.ks-proceed {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 46px; border-radius: 14px;
  font-family: 'Orbitron', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .18em;
  cursor: not-allowed;
  overflow: hidden;
  background: rgba(255, 255, 255, .028);
  border: 1.5px solid rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .22);
  transition: all .3s var(--ks-ease-pop);
}

/* Enabled: sonic-charged command button */
.ks-proceed:not([disabled]) {
  cursor: pointer;
  background: linear-gradient(135deg, rgba(125, 240, 255, .17) 0%, rgba(155, 107, 224, .20) 100%);
  border-color: var(--ks-cyan);
  color: var(--ks-cyan);
  text-shadow: 0 0 12px var(--ks-cyan-glow);
  box-shadow:
    0 0 34px rgba(125, 240, 255, .16),
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 8px 28px rgba(0, 0, 0, .55);
  animation: ksProceed 2.6s ease-in-out infinite;
}

/* Shimmer sweep across the enabled button */
.ks-proceed:not([disabled])::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .13), transparent);
  transform: skewX(-18deg);
  animation: ksSheen 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ksSheen {
  0%, 55%  { left: -60%; }
  100%     { left: 130%; }
}

.ks-proceed:not([disabled]):hover {
  background: linear-gradient(135deg, rgba(125, 240, 255, .26) 0%, rgba(155, 107, 224, .28) 100%);
  box-shadow:
    0 0 56px rgba(125, 240, 255, .30),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 10px 30px rgba(0, 0, 0, .55);
  transform: scale(1.04) translateY(-1px);
}
.ks-proceed:not([disabled]):active { transform: scale(.97); }

.ks-proceed:focus-visible {
  outline: 2px solid var(--ks-gold);
  outline-offset: 4px;
}

@keyframes ksProceed {
  0%, 100% { box-shadow: 0 0 34px rgba(125, 240, 255, .15), inset 0 1px 0 rgba(255, 255, 255, .10), 0 8px 28px rgba(0, 0, 0, .55); }
  50%      { box-shadow: 0 0 58px rgba(125, 240, 255, .32), inset 0 1px 0 rgba(255, 255, 255, .10), 0 8px 28px rgba(0, 0, 0, .55); }
}

/* Arrow icon inside button */
.ks-proceed__arrow {
  width: 18px; height: 18px;
  transition: transform .25s var(--ks-ease-pop);
  flex-shrink: 0;
}
.ks-proceed:not([disabled]):hover .ks-proceed__arrow { transform: translateX(6px); }

/* Hint text below button */
.ks-hint {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ks-muted);
  transition: opacity .3s ease;
}
.ks-hint.is-hidden { opacity: 0; pointer-events: none; }

/* ============================================================
   DESKTOP REFINEMENT (1280px+) - larger scene, wider lanes
   ============================================================ */
@media (min-width: 1280px) {
  .ks-stage { padding-top: 48px; }
  .ks-grid  { gap: 48px; }
  .ks-card  { width: clamp(240px, 19vw, 280px); }
  .ks-card__body { padding: 13px 18px 17px; gap: 10px; }
  .ks-proceed { padding: 17px 56px; font-size: 14px; }
}

/* ============================================================
   MOBILE (≤640px) - horizontal armory rows, thumb-first
   Emblem left · identity right · everything in one viewport.
   ============================================================ */
@media (max-width: 640px) {
  .ks-stage {
    min-height: 100svh;
    justify-content: flex-start;
    gap: 16px;
    padding: 24px 16px calc(22px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }

  .ks-sonic { top: 46%; width: 170vmin; }

  .ks-header { gap: 5px; }
  .ks-wordmark { font-size: 10px; padding: 5px 14px; }
  .ks-headline__main { font-size: clamp(30px, 9vw, 46px); }
  .ks-sub { font-size: 10.5px; }

  .ks-grid {
    flex-direction: column;
    align-items: center;
    flex: unset;
    padding: 2px 0;
    gap: 13px;
  }

  /* Row card: emblem zone left, identity right */
  .ks-card {
    flex-direction: row;
    width: 100%;
    max-width: 420px;
    aspect-ratio: auto;
    min-height: 112px;
    border-radius: 18px;
  }

  .ks-card__emblem-frame {
    flex: 0 0 118px;
    padding: 8px;
    background:
      radial-gradient(circle at 50% 50%, var(--ac-dim) 0%, transparent 65%),
      linear-gradient(90deg, transparent 82%, rgba(3, 9, 7, .6) 100%);
  }

  .ks-card__emblem,
  .ks-card__emblem-fallback { width: min(86%, 96px); }
  .ks-card__emblem-fallback { font-size: 20px; }

  .ks-card__body {
    flex: 1;
    justify-content: center;
    gap: 7px;
    padding: 12px 14px 12px 6px;
    border-top: none;
    background: none;
  }
  .ks-card__body::before { display: none; }

  .ks-card__badge { align-items: flex-start; text-align: left; gap: 2px; }
  .ks-card__name  { font-size: 18px; }
  .ks-card__title { font-size: 10px; }
  .ks-card__clan  { font-size: 9px; }

  .ks-trait__lbl { flex-basis: 28px; }

  /* Selected chip stays clear of the identity text */
  .ks-card__sel { top: 9px; right: 9px; padding: 3px 8px; }

  .ks-corner { width: 12px; height: 12px; }
  .ks-corner--tl { top: 5px; left: 5px; }
  .ks-corner--tr { top: 5px; right: 5px; }
  .ks-corner--bl { bottom: 5px; left: 5px; }
  .ks-corner--br { bottom: 5px; right: 5px; }

  /* Hover-lift is pointer-only; mobile keeps press feedback */
  .ks-card:active { transform: scale(.98); }

  /* Full-width, thumb-friendly CTA */
  .ks-footer { padding-bottom: 2px; }
  .ks-proceed-wrap { width: 100%; max-width: 420px; }
  .ks-proceed {
    width: 100%;
    justify-content: center;
    padding: 17px 20px;
    min-height: 54px;
  }
}

/* Very small phones: compact header so all 3 cards + CTA fit */
@media (max-width: 640px) and (max-height: 700px) {
  .ks-stage { gap: 12px; padding-top: 18px; }
  .ks-headline__main { font-size: 30px; }
  .ks-divider { display: none; }
  .ks-card { min-height: 102px; }
  .ks-card__emblem-frame { flex-basis: 106px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ks-headline__main,
  .ks-sonic,
  .ks-divider__gem,
  .ks-card,
  .ks-card.is-selected,
  .ks-card__emblem,
  .ks-card__emblem-fallback,
  .ks-card__emblem-frame::before,
  .ks-card.is-selected .ks-card__emblem,
  .ks-card.is-selected .ks-card__emblem-fallback,
  .ks-card.is-selected .ks-card__emblem-frame::after,
  .ks-card__sel,
  .ks-proceed:not([disabled]) {
    animation: none;
  }
  .ks-proceed:not([disabled])::after { display: none; }
  .ks-card { transition: border-color .15s ease, box-shadow .15s ease; }
  .ks-card:hover { transform: none; }
}

/* ============================================================
   CINEMATIC INTRO OVERLAY - plays once before onboarding reveal
   Pure CSS/SVG, no libraries. Controlled by a tiny inline script
   in index.html that toggles body.ks-intro-active; it never
   touches #charGrid / #proceedBtn / .ks-card selection logic.
   ============================================================ */

/* -- Full-bleed jungle photo backdrop (desktop by default) ---- */
.ks-photobg {
  position: absolute; inset: 0; z-index: -1;
  background-image: url('/assets/backgrounds/bg-desktop.jpeg');
  background-size: cover;
  background-position: center;
  filter: brightness(.5) saturate(1.05);
}
@media (max-width: 640px) {
  .ks-photobg { background-image: url('/assets/backgrounds/bg-mobile.jpeg'); }
}

/* -- Onboarding content: hidden while intro plays, then reveals --
   Gated on .ks-intro-complete (added by JS only - via timeout or the
   Skip button, never by CSS alone) so the content cannot leak out
   from behind the intro before the reveal is actually triggered. */
body.ks-intro-active:not(.ks-intro-complete) .ks-header,
body.ks-intro-active:not(.ks-intro-complete) .ks-grid,
body.ks-intro-active:not(.ks-intro-complete) .ks-footer {
  opacity: 0;
  pointer-events: none;
}
body.ks-intro-complete .ks-header,
body.ks-intro-complete .ks-grid,
body.ks-intro-complete .ks-footer {
  animation: ksContentReveal .9s var(--ks-ease-out) both;
}
@keyframes ksContentReveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -- Intro stage ----------------------------------------------- */
.ks-intro {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center;
  overflow: hidden;
  background: #01040a; /* opaque fallback: content can NEVER show through
                           the overlay, even for a single frame before the
                           gradient/void layer below has painted */
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .4s ease, visibility .4s ease;
}
body.ks-intro-complete .ks-intro {
  opacity: 0; visibility: hidden; pointer-events: none;
}

/* Phase 1 - dark jungle void, dissolves across the whole ~4.5s timeline */
.ks-intro__void {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 70% 45% at 50% 42%, rgba(125, 240, 255, .07), transparent 65%),
    radial-gradient(ellipse 55% 35% at 20% 75%, rgba(155, 107, 224, .08), transparent 65%),
    radial-gradient(ellipse 55% 35% at 82% 78%, rgba(240, 195, 106, .07), transparent 65%),
    radial-gradient(circle at 50% 50%, rgba(1, 4, 6, .82), #01040a 78%);
  animation: ksIntroVoid 4.5s ease-in forwards;
}
@keyframes ksIntroVoid {
  0%   { opacity: .97; }
  50%  { opacity: .93; }
  75%  { opacity: .5; }
  100% { opacity: 0; }
}

/* Phase 2 - KanSiKa wordmark + ancient-tech rings.
   .ks-intro-logo-big is the deliberately oversized, high-impact
   treatment called for by design: this must read as a real game
   logo, not a subtle watermark. */
.ks-intro__logo {
  position: relative; z-index: 5;
  display: grid; place-items: center;
}
.ks-intro-logo-big {
  width: clamp(220px, 34vw, 340px);
  aspect-ratio: 1;
  opacity: 0;
  /* v92 slam/blast animation removed - the v93 block below assigns
     the current ksV2LogoIn/ksV2LogoBeat treatment. */
}
.ks-intro__ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--ks-cyan);
  border-right-color: var(--ks-violet);
  border-bottom-color: var(--ks-gold);
  box-shadow: 0 0 50px rgba(125, 240, 255, .5), inset 0 0 50px rgba(155, 107, 224, .4);
  animation: ksIntroSpin 1.4s linear infinite;
}
.ks-intro__ring--inner {
  inset: 14%;
  border-width: 2px;
  border-top-color: var(--ks-gold);
  border-right-color: var(--ks-cyan);
  animation: ksIntroSpin .9s linear infinite reverse;
}
@keyframes ksIntroSpin { to { transform: rotate(360deg); } }

/* Big game-logo wordmark: cyan core, violet outer glow, gold accent
   syllable + gold underline frame, dark drop shadow for depth. */
.ks-intro__word {
  position: relative;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(54px, 11vw, 150px);
  font-weight: 900; letter-spacing: .04em;
  line-height: 1;
  /* Layer 1: moving glint streak (animated via background-position by
     ksIntroWordShine). Layer 2: the base cyan metal gradient. Both are
     clipped to the letterforms, so the glint runs THROUGH the text -
     the classic trailer title-card shine. */
  background-image:
    linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .95) 50%, transparent 60%),
    linear-gradient(180deg, #f2fdff 0%, var(--ks-cyan) 48%, #bfe9ff 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow:
    0 0 10px var(--ks-cyan-glow),
    0 0 30px var(--ks-violet-glow),
    0 0 60px rgba(240, 195, 106, .45),
    0 5px 0 rgba(0, 0, 0, .9);
  /* v92 track-in/shine/pulse animation removed - the v93 block below
     sets this element to animation:none and animates the syllables. */
}
.ks-intro__word .ks-intro__accent { color: var(--ks-gold); text-shadow: 0 0 18px var(--ks-gold-glow), 0 5px 0 rgba(0, 0, 0, .9); }
.ks-intro__word::after {
  content: '';
  position: absolute; left: 6%; right: 6%; bottom: -.16em;
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ks-gold), transparent);
  box-shadow: 0 0 16px var(--ks-gold-glow), 0 0 32px var(--ks-gold-glow);
  transform-origin: 50% 50%;
  animation: ksIntroUnderline .5s cubic-bezier(.16, 1, .3, 1) 1.45s both;
}
@media (max-width: 640px) {
  .ks-intro__word { font-size: clamp(54px, 15vw, 72px); }
}
/* (Removed) v92 letter-tracking compression (ksIntroWordTrack), shine
   glint (ksIntroWordShine) and brightness pulse (ksIntroWordPulse)
   keyframes - dead since the v93 rewrite set .ks-intro__word to
   animation:none; deleted in the responsive-intro-video pass.
   ksIntroUnderline stays: the v93 intro still draws the underline. */
@keyframes ksIntroUnderline {
  0%   { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* (Removed) v92 "AAA trailer" pieces - logo slam-in (ksIntroLogoCharge),
   blast-out (ksIntroLogoBlast) and camera shake (ksIntroShake) - were
   already dead in the cascade since the v93 "Signal Awakening" rewrite
   re-assigned every animation shorthand; deleted outright in the
   responsive-intro-video pass so old CSS intro effects cannot return. */

/* Phase 3 - armory-war bubble blast. .ks-intro-shockwave-strong scopes
   the deliberately big/bright/long-held ring, flash and neon-splash
   fragment styling - this must read as an obvious blast, not a
   subtle shimmer. */
.ks-intro__blast {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  pointer-events: none;
}
.ks-intro-shockwave-strong .ks-intro__shock {
  position: absolute;
  width: 50px; height: 50px; border-radius: 50%;
  border: 5px solid var(--ks-cyan);
  box-shadow: 0 0 70px var(--ks-cyan-glow), 0 0 120px var(--ks-cyan-glow), inset 0 0 50px var(--ks-violet-glow);
  opacity: 0;
  animation: ksIntroShock 1.1s cubic-bezier(.1,.8,.25,1) 2.6s forwards;
}
.ks-intro-shockwave-strong .ks-intro__shock--2 {
  border-color: var(--ks-gold);
  box-shadow: 0 0 80px var(--ks-gold-glow), 0 0 130px var(--ks-gold-glow), inset 0 0 50px var(--ks-cyan-glow);
  animation-delay: 2.72s;
}
.ks-intro-shockwave-strong .ks-intro__shock--3 {
  border-color: var(--ks-violet);
  box-shadow: 0 0 90px var(--ks-violet-glow), 0 0 140px var(--ks-violet-glow), inset 0 0 50px var(--ks-gold-glow);
  animation-delay: 2.84s;
}
@keyframes ksIntroShock {
  0%   { opacity: 1;  transform: scale(0);  border-width: 12px; }
  55%  { opacity: 1; }
  85%  { opacity: .5; }
  100% { opacity: 0;  transform: scale(70); border-width: 1px; }
}
.ks-intro-shockwave-strong .ks-intro__flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,.95), rgba(125,240,255,.55) 25%, rgba(155,107,224,.3) 48%, transparent 72%);
  opacity: 0;
  mix-blend-mode: screen;
  animation: ksIntroFlash .7s ease-out 2.6s forwards;
}
@keyframes ksIntroFlash {
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Neon splash fragments - visible shards flung outward by the blast,
   angle set per-fragment via the --ang custom property on each span. */
.ks-intro-shockwave-strong .ks-intro-splash {
  position: absolute; left: 50%; top: 50%;
  width: 6px; height: 34px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--ks-cyan), var(--ks-gold));
  box-shadow: 0 0 16px var(--ks-cyan-glow), 0 0 28px var(--ks-cyan-glow);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--ang, 0deg)) translateY(0) scale(1);
  animation: ksIntroSplash 1s cubic-bezier(.15,.8,.25,1) 2.62s forwards;
}
.ks-intro-shockwave-strong .ks-intro-splash--alt {
  background: linear-gradient(180deg, var(--ks-violet), var(--ks-gold));
  box-shadow: 0 0 16px var(--ks-violet-glow), 0 0 28px var(--ks-violet-glow);
}
@keyframes ksIntroSplash {
  0%   { opacity: 1;  transform: translate(-50%, -50%) rotate(var(--ang, 0deg)) translateY(0) scale(1); }
  65%  { opacity: 1; }
  100% { opacity: 0;  transform: translate(-50%, -50%) rotate(var(--ang, 0deg)) translateY(-240px) scale(.35); }
}

/* Punctuates the hand-off to the onboarding content with one more
   clearly visible bright flash, distinct from the mid-blast flash. */
.ks-intro-reveal-flash {
  position: absolute; inset: 0; z-index: 10;
  background: radial-gradient(circle at center, rgba(255,255,255,.9), rgba(125,240,255,.4) 35%, transparent 68%);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: ksIntroRevealFlash .6s ease-out 3.9s forwards;
}
@keyframes ksIntroRevealFlash {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Phase 4 - wind / color travel sweep */
.ks-intro__wind {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(100deg,
    transparent 30%,
    rgba(125, 240, 255, .4) 44%,
    rgba(155, 107, 224, .4) 54%,
    rgba(240, 195, 106, .4) 64%,
    rgba(255, 138, 118, .3) 72%,
    transparent 82%);
  mix-blend-mode: screen;
  filter: blur(6px);
  opacity: 0;
  transform: translateX(-55%) scaleX(.6);
  animation: ksIntroWind 1s ease-out 3s forwards;
}
@keyframes ksIntroWind {
  0%   { opacity: 0; transform: translateX(-55%) scaleX(.55); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(55%) scaleX(1.9); }
}

/* Skip control */
.ks-intro__skip {
  position: absolute; z-index: 5;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  padding: 7px 16px; border-radius: 999px;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .2em; text-indent: .2em;
  color: var(--ks-muted);
  background: rgba(3, 10, 8, .5);
  border: 1px solid rgba(125, 240, 255, .25);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: color .2s ease, border-color .2s ease;
}
.ks-intro__skip:hover,
.ks-intro__skip:focus-visible {
  color: var(--ks-cyan);
  border-color: var(--ks-cyan);
}
.ks-intro__skip:focus-visible { outline: 2px solid var(--ks-gold); outline-offset: 3px; }

@media (max-width: 640px) {
  .ks-intro__skip { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); right: 16px; }
}

/* -- Reduced motion: short simplified intro, NOT an instant skip --
   Dark jungle + big KanSiKa logo + quick fade only (~1.5s total).
   The blast/wind phases are dropped and the rings stop spinning, but
   the logo keeps its full .ks-intro-logo-big size - this must still
   read as an obvious, visible intro, not a flicker. Driven by the
   same JS completeIntro() timeout (~1.5s) as everything else. */
body.ks-intro-reduced .ks-intro__blast,
body.ks-intro-reduced .ks-intro__wind {
  display: none;
}
body.ks-intro-reduced .ks-intro__void {
  animation: none;
  opacity: .9;
}
body.ks-intro-reduced .ks-intro__ring {
  animation: none;
  opacity: .55;
}
body.ks-intro-reduced .ks-intro-logo-big {
  animation: ksIntroLogoFade .5s ease-out .2s forwards;
}
body.ks-intro-reduced .ks-intro__word,
body.ks-intro-reduced .ks-intro__word::after {
  animation: none;
}
body.ks-intro-reduced .ks-intro-reveal-flash {
  animation: ksIntroRevealFlash .4s ease-out 1s forwards;
}
@keyframes ksIntroLogoFade {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ================================================================
   INTRO v2 - "SIGNAL AWAKENING" (full creative replacement)
   The old slam/blast/shake trailer is fully retired: every intro
   element below gets a NEW animation shorthand, which (same
   selectors, later in the cascade) kills all previous keyframe
   assignments. Same DOM, same JS timings (4.5s full / 1.5s reduced),
   same Skip button - presentation only.

   Timeline:
   0.0-0.9  black signal field; a thin cyan scanline sweeps down
            (repurposed .ks-intro__wind); first sonar ping expands.
   0.55-1.7 two ancient-tech arcs swing in and LOCK around the mark;
            the three syllables rise + wipe in staggered - each in
            its clan color (Kan pink / Si violet / Ka orange);
            gold underline draws beneath.
   2.1-2.6  heartbeat: the mark pumps once; violet + orange sonar
            rings answer; a soft flash breathes.
   1.4+     eight bio-fireflies (repurposed .ks-intro-splash dots)
            drift-glow around the mark.
   3.55-4.4 iris-out: the whole intro collapses into a shrinking
            circle centered on the mark, revealing the forest page -
            a lens closing, not a fade.
   ================================================================ */

/* Clan v2 accents (also used by the cards below) */
:root {
  --ks-clan-pink:        #FF5FA8;
  --ks-clan-pink-glow:   rgba(255, 95, 168, .55);
  --ks-clan-pink-dim:    rgba(255, 95, 168, .14);
  --ks-clan-orange:      #FF9440;
  --ks-clan-orange-glow: rgba(255, 148, 64, .55);
  --ks-clan-orange-dim:  rgba(255, 148, 64, .14);
}

/* -- Stage: iris-out exit (replaces the old shake on this selector) -- */
body.ks-intro-active:not(.ks-intro-reduced) .ks-intro {
  clip-path: circle(141% at 50% 46%);
  animation: ksV2Iris .85s cubic-bezier(.7, 0, .3, 1) 3.55s forwards;
}
@keyframes ksV2Iris {
  0%   { clip-path: circle(141% at 50% 46%); }
  100% { clip-path: circle(0% at 50% 46%); }
}

/* -- Void: still, deep, alive at the edges -- */
.ks-intro__void {
  animation: ksV2Void 4.5s ease-in forwards;
}
@keyframes ksV2Void {
  0%   { opacity: 1; }
  70%  { opacity: .96; }
  100% { opacity: .88; }
}

/* -- Scanline sweep (repurposed wind layer) -- */
.ks-intro__wind {
  background:
    linear-gradient(180deg, transparent 46%, rgba(125, 240, 255, .0) 48%, rgba(125, 240, 255, .55) 50%, rgba(125, 240, 255, .0) 52%, transparent 54%);
  mix-blend-mode: screen;
  filter: blur(1px);
  opacity: 0;
  transform: translateY(-58%);
  animation: ksV2Scan .9s cubic-bezier(.5, 0, .5, 1) .05s forwards;
}
@keyframes ksV2Scan {
  0%   { opacity: 0;  transform: translateY(-58%); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0;  transform: translateY(58%); }
}

/* -- Mark container: quiet rise, then one heartbeat pump -- */
.ks-intro-logo-big {
  opacity: 0;
  animation:
    ksV2LogoIn 1s cubic-bezier(.2, .9, .3, 1) .55s forwards,
    ksV2LogoBeat .5s cubic-bezier(.3, 0, .2, 1) 2.1s;
}
@keyframes ksV2LogoIn {
  0%   { opacity: 0; transform: translateY(26px) scale(.96); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0)    scale(1);   filter: blur(0); }
}
@keyframes ksV2LogoBeat {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.055); }
}

/* -- Arcs: swing in + lock, then a barely-there drift (no busy spin) -- */
.ks-intro__ring {
  border-width: 2px;
  border-top-color: var(--ks-cyan);
  border-right-color: transparent;
  border-bottom-color: var(--ks-gold);
  border-left-color: transparent;
  box-shadow: 0 0 24px rgba(125, 240, 255, .28), inset 0 0 24px rgba(155, 107, 224, .18);
  opacity: 0;
  animation:
    ksV2ArcIn .8s cubic-bezier(.2, .9, .3, 1) .6s forwards,
    ksV2ArcDrift 22s linear 1.4s infinite;
}
.ks-intro__ring--inner {
  border-width: 1px;
  border-top-color: var(--ks-clan-orange);
  border-bottom-color: var(--ks-clan-pink);
  animation:
    ksV2ArcInR .8s cubic-bezier(.2, .9, .3, 1) .72s forwards,
    ksV2ArcDriftR 26s linear 1.5s infinite;
}
@keyframes ksV2ArcIn   { 0% { opacity: 0; transform: rotate(-140deg); } 100% { opacity: 1; transform: rotate(0deg); } }
@keyframes ksV2ArcInR  { 0% { opacity: 0; transform: rotate(140deg); }  100% { opacity: 1; transform: rotate(0deg); } }
@keyframes ksV2ArcDrift  { from { transform: rotate(0deg); }  to { transform: rotate(360deg); } }
@keyframes ksV2ArcDriftR { from { transform: rotate(0deg); }  to { transform: rotate(-360deg); } }

/* -- Wordmark: syllables own the show now -- */
.ks-intro__word {
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  color: transparent;
  text-shadow: none;
  animation: none;
}
.ks-intro__word::after {
  animation: ksIntroUnderline .55s cubic-bezier(.16, 1, .3, 1) 1.55s both;
}
.ks-intro__syl {
  display: inline-block;
  opacity: 0;
  transform: translateY(.32em);
  clip-path: inset(-20% 100% -20% 0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ksV2SylIn .6s cubic-bezier(.2, .9, .3, 1) forwards;
}
.ks-intro__syl--kan {
  background-image: linear-gradient(180deg, #fff 8%, var(--ks-clan-pink) 62%, #d13c85 100%);
  filter: drop-shadow(0 0 14px var(--ks-clan-pink-glow)) drop-shadow(0 4px 0 rgba(0, 0, 0, .85));
  animation-delay: .7s;
}
.ks-intro__syl--sim {
  background-image: linear-gradient(180deg, #fff 8%, var(--ks-violet) 62%, #6c3fb8 100%);
  filter: drop-shadow(0 0 14px var(--ks-violet-glow)) drop-shadow(0 4px 0 rgba(0, 0, 0, .85));
  animation-delay: .95s;
}
.ks-intro__syl--kav {
  background-image: linear-gradient(180deg, #fff 8%, var(--ks-clan-orange) 62%, #d66e1d 100%);
  filter: drop-shadow(0 0 14px var(--ks-clan-orange-glow)) drop-shadow(0 4px 0 rgba(0, 0, 0, .85));
  animation-delay: 1.2s;
}
@keyframes ksV2SylIn {
  0%   { opacity: 0; transform: translateY(.32em); clip-path: inset(-20% 100% -20% 0); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); clip-path: inset(-20% -10% -20% 0); }
}

/* -- Sonar pings (repurposed shock rings): ping / heartbeat answers -- */
.ks-intro-shockwave-strong .ks-intro__shock {
  width: 60px; height: 60px;
  border-width: 1.5px;
  border-color: rgba(125, 240, 255, .8);
  box-shadow: 0 0 26px rgba(125, 240, 255, .3);
  animation: ksV2Ping 1.6s cubic-bezier(.1, .6, .3, 1) .35s forwards;
}
.ks-intro-shockwave-strong .ks-intro__shock--2 {
  border-color: rgba(155, 107, 224, .8);
  box-shadow: 0 0 26px var(--ks-violet-glow);
  animation: ksV2Ping 1.2s cubic-bezier(.1, .6, .3, 1) 2.12s forwards;
}
.ks-intro-shockwave-strong .ks-intro__shock--3 {
  border-color: rgba(255, 148, 64, .75);
  box-shadow: 0 0 26px var(--ks-clan-orange-glow);
  animation: ksV2Ping 1.3s cubic-bezier(.1, .6, .3, 1) 2.24s forwards;
}
@keyframes ksV2Ping {
  0%   { opacity: .9; transform: scale(.2); border-width: 2.5px; }
  70%  { opacity: .35; }
  100% { opacity: 0;  transform: scale(14); border-width: 1px; }
}
.ks-intro-shockwave-strong .ks-intro__flash {
  background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .5), rgba(125, 240, 255, .22) 26%, transparent 60%);
  animation: ksV2Breathe .6s ease-out 2.1s forwards;
}
@keyframes ksV2Breathe {
  0%   { opacity: 0; }
  35%  { opacity: .8; }
  100% { opacity: 0; }
}

/* -- Fireflies (repurposed splash shards -> drifting bio-lights) -- */
.ks-intro-shockwave-strong .ks-intro-splash {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ks-cyan);
  box-shadow: 0 0 10px var(--ks-cyan-glow);
  opacity: 0;
  transform: none;
  animation: ksV2Fly 3.4s ease-in-out 1.4s infinite;
}
.ks-intro-shockwave-strong .ks-intro-splash--alt {
  background: var(--ks-clan-pink);
  box-shadow: 0 0 10px var(--ks-clan-pink-glow);
}
.ks-intro-shockwave-strong .ks-intro-splash:nth-of-type(odd) { animation-duration: 4.1s; }
.ks-intro-shockwave-strong .ks-intro-splash:nth-of-type(1) { left: 22%; top: 30%; animation-delay: 1.4s; }
.ks-intro-shockwave-strong .ks-intro-splash:nth-of-type(2) { left: 74%; top: 26%; animation-delay: 1.8s; background: var(--ks-violet); box-shadow: 0 0 10px var(--ks-violet-glow); }
.ks-intro-shockwave-strong .ks-intro-splash:nth-of-type(3) { left: 82%; top: 58%; animation-delay: 2.1s; }
.ks-intro-shockwave-strong .ks-intro-splash:nth-of-type(4) { left: 16%; top: 62%; animation-delay: 2.4s; background: var(--ks-clan-orange); box-shadow: 0 0 10px var(--ks-clan-orange-glow); }
.ks-intro-shockwave-strong .ks-intro-splash:nth-of-type(5) { left: 30%; top: 76%; animation-delay: 1.6s; }
.ks-intro-shockwave-strong .ks-intro-splash:nth-of-type(6) { left: 66%; top: 78%; animation-delay: 2.0s; background: var(--ks-clan-pink); box-shadow: 0 0 10px var(--ks-clan-pink-glow); }
.ks-intro-shockwave-strong .ks-intro-splash:nth-of-type(7) { left: 48%; top: 20%; animation-delay: 2.6s; }
.ks-intro-shockwave-strong .ks-intro-splash:nth-of-type(8) { left: 58%; top: 68%; animation-delay: 2.9s; background: var(--ks-violet); box-shadow: 0 0 10px var(--ks-violet-glow); }
@keyframes ksV2Fly {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  25%      { opacity: .9; }
  50%      { opacity: .5; transform: translate(6px, -10px); }
  75%      { opacity: .85; transform: translate(-4px, -16px); }
}

/* Old reveal-flash retired - the iris IS the reveal now */
.ks-intro-reveal-flash { animation: none; opacity: 0; }

/* -- Reduced-motion guards re-asserted AFTER v2 (source order) -- */
body.ks-intro-reduced .ks-intro { clip-path: none; animation: none; }
body.ks-intro-reduced .ks-intro__wind,
body.ks-intro-reduced .ks-intro__void { animation: none; }
body.ks-intro-reduced .ks-intro__ring,
body.ks-intro-reduced .ks-intro__ring--inner { animation: none; opacity: .55; transform: none; }
body.ks-intro-reduced .ks-intro__syl {
  animation: ksIntroLogoFade .5s ease-out .2s forwards;
  clip-path: none;
  transform: none;
}
body.ks-intro-reduced .ks-intro__word::after { animation: none; }
body.ks-intro-reduced .ks-intro-logo-big { animation: ksIntroLogoFade .5s ease-out .2s forwards; }

/* ================================================================
   FOREST ALIVE - bioluminescent lighting VFX behind the clan cards.
   Two additive light layers over the photo backdrop: breathing
   tri-color glow pools (pink/violet/orange - the clan trio) and a
   slow god-ray shaft drifting across the canopy. Pure light, no
   particles, no clutter. Disabled under prefers-reduced-motion.
   ================================================================ */
.ks-photobg::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 34% 26% at 18% 34%, var(--ks-clan-pink-dim), transparent 70%),
    radial-gradient(ellipse 30% 24% at 82% 30%, rgba(155, 107, 224, .16), transparent 70%),
    radial-gradient(ellipse 36% 26% at 50% 78%, var(--ks-clan-orange-dim), transparent 70%),
    radial-gradient(ellipse 26% 20% at 68% 62%, rgba(125, 240, 255, .12), transparent 70%);
  animation: ksForestBreath 9s ease-in-out infinite;
}
@keyframes ksForestBreath {
  0%, 100% { opacity: .55; }
  33%      { opacity: .95; }
  66%      { opacity: .7; }
}
.ks-canopy::after {
  content: '';
  position: absolute; inset: -20%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 42%, rgba(210, 245, 255, .07) 49%, rgba(255, 244, 214, .09) 52%, transparent 60%);
  filter: blur(6px);
  animation: ksGodRay 16s ease-in-out infinite alternate;
}
@keyframes ksGodRay {
  0%   { transform: translateX(-12%) rotate(.5deg); opacity: .5; }
  100% { transform: translateX(12%)  rotate(-.5deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-photobg::after, .ks-canopy::after { animation: none; }
}

/* ================================================================
   CLAN ACCENTS v2 - KAN = pink, SIM = purple, KAV = orange
   (hover AND selected both inherit these via the --ac custom props).
   Later in cascade than the original assignment, so these win.
   ================================================================ */
.ks-card[data-char="kan"] { --ac: var(--ks-clan-pink);   --ac-glow: var(--ks-clan-pink-glow);   --ac-dim: var(--ks-clan-pink-dim); }
.ks-card[data-char="sim"] { --ac: var(--ks-violet);      --ac-glow: var(--ks-violet-glow);      --ac-dim: var(--ks-violet-dim); }
.ks-card[data-char="kav"] { --ac: var(--ks-clan-orange); --ac-glow: var(--ks-clan-orange-glow); --ac-dim: var(--ks-clan-orange-dim); }

/* ================================================================
   RESPONSIVE INTRO VIDEO - full-bleed cinematic clip inside #ksIntro.
   The inline script in index.html adds .ks-intro--video to the
   overlay only when it actually starts a video: that class shows the
   video layer, hides every CSS-intro layer (logo/arcs/blast/wind/
   void/reveal-flash) so old animation and video can never run
   together, and cancels the v93 iris-out exit (which would have
   clipped the overlay away at 3.55s, mid-video). The overlay's own
   opaque #01040a background + the video's #000 background mean no
   white flash at any point. Reduced-motion never adds this class -
   it keeps the existing simplified CSS intro and downloads nothing.
   ================================================================ */
.ks-intro__video {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  object-fit: cover;            /* full coverage, no stretch/squeeze */
  background: #000;             /* dark fallback while first frame decodes */
  display: none;                /* only shown once JS engages video mode */
  pointer-events: none;         /* taps fall through to the overlay (autoplay retry) */
}
.ks-intro--video .ks-intro__video { display: block; }

.ks-intro--video .ks-intro__logo,
.ks-intro--video .ks-intro__blast,
.ks-intro--video .ks-intro__wind,
.ks-intro--video .ks-intro__void,
.ks-intro--video .ks-intro-reveal-flash {
  display: none;
}

/* Same specificity as the v93 iris rule (1 element + 3 classes),
   later in source - wins, so the overlay stays intact until the JS
   completeIntro() fade. */
body.ks-intro-active:not(.ks-intro-reduced) .ks-intro.ks-intro--video {
  clip-path: none;
  animation: none;
}

/* Keep Skip above the video layer on both placements. */
.ks-intro--video .ks-intro__skip { z-index: 7; }