/* Kiko's interactive layer: complements the original Vault design. */
.hero-kiko {
  cursor: pointer;
  /* Keep every approved character pixel and proportion in place. */
  animation: kiko-aura 5.4s ease-in-out infinite;
}
.hero-kiko:hover,
.hero-kiko:focus-visible {
  filter: drop-shadow(0 18px 25px #000c) drop-shadow(0 0 38px #65d64a88);
}
.hero-kiko:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 26px; }
.hero-kiko.kiko-react { animation: none; }

/* Multi-stage anime katana strike; independent from the approved image. */
.kiko-ninja-fx {
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events: none;
  isolation:isolate;
}
.kiko-ninja-fx svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.kiko-arc-glow,.kiko-arc-edge,.kiko-arc-core {
  fill:none;
  stroke-linecap:round;
  stroke-dasharray:760;
  stroke-dashoffset:760;
  opacity:0;
}
.kiko-arc-glow { stroke:#00d9f5; stroke-width:25; filter:blur(10px); }
.kiko-arc-edge { stroke:#00d9f5; stroke-width:13; filter:drop-shadow(0 0 14px #00eafa); }
.kiko-arc-core { stroke:#f7ffed; stroke-width:4.5; }
.kiko-drawn-blade { opacity:0; transform-box:view-box; transform-origin:402px 315px; }
.kiko-motion-line { fill:none; stroke-linecap:round; opacity:0; stroke-dasharray:170;stroke-dashoffset:170; }
.kiko-motion-line.cyan { stroke:#00d9f5;stroke-width:5; }
.kiko-motion-line.gold { stroke:#f4c75e;stroke-width:3.5; }
.kiko-burst-ring { fill:none;stroke:#fbd477;stroke-width:7;opacity:0;transform-box:fill-box;transform-origin:center; }
.kiko-ninja-spark { opacity:0;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 8px #ffe36b); }
.kiko-ninja-afterimage {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  clip-path:ellipse(31% 38% at 51% 35%);
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 18px #00d9f5);
  opacity:0;
}
.kiko-ninja-word {
  position:absolute;
  top:19%;
  right:1%;
  z-index:7;
  font-size:clamp(22px,3vw,37px);
  font-style:italic;
  font-weight:1000;
  letter-spacing:-.065em;
  line-height:1;
  text-transform:uppercase;
  color:#fff3ba;
  -webkit-text-stroke:1.5px #151212;
  text-shadow:2px 3px 0 #1c6472,0 0 25px #00d9f5;
  transform:skew(-12deg) rotate(-13deg) scale(.3);
  opacity:0;
}
.hero-art.kiko-striking .kiko-drawn-blade {animation:kiko-blade-draw 1.45s cubic-bezier(.25,.78,.2,1) both;}
.hero-art.kiko-striking .kiko-arc-glow {animation:kiko-sword-arc 1.06s .33s ease-out both;}
.hero-art.kiko-striking .kiko-arc-edge {animation:kiko-sword-arc 1.06s .35s ease-out both;}
.hero-art.kiko-striking .kiko-arc-core {animation:kiko-sword-arc 1.06s .37s ease-out both;}
.hero-art.kiko-striking .kiko-motion-line {animation:kiko-speed-streak .65s .4s ease-out both;}
.hero-art.kiko-striking .kiko-burst-ring {animation:kiko-impact-ring .72s .75s ease-out both;}
.hero-art.kiko-striking .kiko-ninja-spark {animation:kiko-spark-flight 1s .64s ease-out both;}
.hero-art.kiko-striking .kiko-ninja-afterimage.one {animation:kiko-afterimage-left .78s .16s ease-out both;}
.hero-art.kiko-striking .kiko-ninja-afterimage.two {animation:kiko-afterimage-right .75s .35s ease-out both;}
.hero-art.kiko-striking .kiko-ninja-word {animation:kiko-battle-word .92s .64s cubic-bezier(.1,.75,.2,1) both;}
.kiko-ninja-fx .kiko-smoke {opacity:0;filter:blur(11px);}
.hero-art.kiko-striking .kiko-smoke {animation:kiko-smoke-burst 1s .85s ease-out both;}
.browse-card[role="button"] { cursor: pointer; }
.browse-card[role="button"]:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.kiko-hero-invite {
  position: absolute;
  z-index: 6;
  bottom: 2%;
  left: 4%;
  padding: 9px 13px;
  border: 1px solid #00d9f566;
  border-radius: 999px;
  color: #befff1;
  background: #071112d9;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: .08em;
  pointer-events: none;
  text-transform: uppercase;
}

.kiko-assistant {
  position: fixed;
  z-index: 90;
  left: 23px;
  right: auto;
  bottom: 23px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  color: #f8f4e7;
  font-family: inherit;
}
.kiko-launcher {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 69px;
  padding: 5px 14px 5px 6px;
  border: 1px solid #d6a83ea3;
  border-radius: 99px;
  background: linear-gradient(115deg,#1f241e,#0c1014 75%);
  color: #fff;
  box-shadow: 0 16px 40px #0009,0 0 22px #00d9f526;
  cursor: pointer;
  transition: transform .22s,border-color .22s,box-shadow .22s;
}
.kiko-launcher:hover,.kiko-launcher:focus-visible {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 18px 42px #000a,0 0 28px #65d64a55;
}
.kiko-launcher:focus-visible,.kiko-assistant button:focus-visible,.kiko-assistant input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.kiko-launcher.kiko-launch-reaction { animation:kiko-launcher-glow 1.35s ease-out both; }
.kiko-avatar {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: block;
  border-radius: 50%;
  border: 2px solid #d6a83e;
  box-shadow: 0 0 0 3px #65d64a2b;
  overflow: hidden;
  background: #090909;
}
.kiko-avatar img {
  width: 180%;
  height: 180%;
  max-width: none;
  object-fit: cover;
  transform: translate(-22%, -5%);
  display: block;
}
.kiko-launch-text { text-align: left; display:flex; flex-direction:column; gap:3px; }
.kiko-launch-text strong { color: #fff8d7; font-size: 13px; font-weight: 950; text-transform: uppercase; letter-spacing: .045em; }
.kiko-launch-text small { color: #90e5d8; font-size: 10px; letter-spacing: .05em; }
.kiko-launch-spark { color: var(--gold); font-size: 22px; padding-left: 3px; }
.kiko-panel {
  width: min(372px,calc(100vw - 34px));
  height: min(560px,calc(100dvh - 110px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d6a83e88;
  border-radius: 17px;
  background: #111219;
  box-shadow: 0 28px 85px #000d,0 0 42px #00d9f522;
  animation: kiko-panel-in .2s ease-out;
}
.kiko-panel[hidden],.kiko-toast[hidden] { display: none!important; }
.kiko-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  background: linear-gradient(110deg,#25221b,#151d1b 72%);
  border-bottom: 1px solid #d6a83e55;
}
.kiko-panel-head .kiko-avatar { width: 46px; height: 46px; flex-basis: 46px; }
.kiko-panel-head strong { display:block; font-size:14px; color:#f8e2a2; }
.kiko-panel-head small { display:block; margin-top:4px; color:#b7b4b5; font-size:11px; }
.kiko-close {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border: 1px solid #ffffff33;
  border-radius: 9px;
  color: #e7d5d5;
  background: #ffffff0d;
  font-size: 24px;
  line-height: 1;
}
.kiko-chat {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 16px 13px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  background: radial-gradient(circle at 100% 0,#1a332b50,transparent 45%),#101017;
}
.kiko-message {
  max-width: 92%;
  padding: 12px 13px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.65;
  margin: 0;
  overflow-wrap: anywhere;
}
.kiko-message.bot { align-self: flex-start; background:#272731; border:1px solid #ffffff15; color:#f5f2e9; border-top-left-radius: 3px; }
.kiko-message.visitor { align-self: flex-end; background:#214a37; border:1px solid #65d64a55; color:#e8ffe4; border-top-right-radius: 3px; }
.kiko-quick-title { margin:0 16px 6px; color:#d6a83e; font-size:10px; text-transform:uppercase; letter-spacing:.12em; font-weight:900; }
.kiko-quick {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding: 0 16px 13px;
}
.kiko-quick button {
  border: 1px solid #00d9f54c;
  background: #00d9f50d;
  color: #c8f8fe;
  border-radius: 99px;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 800;
  cursor:pointer;
}
.kiko-quick button:hover { border-color: var(--green); background: #65d64a19; color: #d9ffd2; }
.kiko-chat-form { display:flex; align-items:center; gap:7px; padding:11px 12px; border-top:1px solid #ffffff1c; }
.kiko-chat-form input {
  flex: 1;
  min-width: 0;
  padding: 12px 11px;
  color:#fff;
  border:1px solid #ffffff30;
  border-radius: 9px;
  background:#1e2028;
  font-size:12px;
}
.kiko-chat-form input::placeholder { color: #9b9aa2; }
.kiko-chat-form button { height: 41px; width:41px; border:0; border-radius:9px; background:var(--green); color:#121713; font-size:22px; font-weight:900; }
.kiko-disclaimer { padding:0 14px 12px; margin:0; color:#96949c; font-size:9px; line-height:1.45; text-align:center; }
.kiko-toast {
  width: min(320px,calc(100vw - 30px));
  padding: 12px 17px;
  border-radius: 12px;
  border: 1px solid #00d9f56b;
  background: #0d1f20ef;
  box-shadow: 0 11px 35px #000a;
  color: #baffef;
  text-align:center;
  font-size:12px;
  line-height:1.45;
  font-weight: 800;
  animation:kiko-panel-in .16s ease-out;
}
.kiko-screenreader-only { position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }

@keyframes kiko-aura {
  0%,100% {filter:drop-shadow(0 18px 25px #000c) drop-shadow(0 0 20px #65d64a27);}
  50% {filter:drop-shadow(0 18px 25px #000c) drop-shadow(0 0 32px #00d9f55a);}
}
@keyframes kiko-blade-draw {
  0%,13%{opacity:0;transform:rotate(-92deg) scale(.78);}
  21%{opacity:1;transform:rotate(-55deg) scale(.94);}
  43%{opacity:1;transform:rotate(-30deg) scale(1);}
  64%{opacity:1;transform:rotate(56deg) scale(1.08);}
  76%{opacity:1;transform:rotate(114deg) scale(1.02);}
  92%,100%{opacity:0;transform:rotate(132deg) scale(.88);}
}
@keyframes kiko-sword-arc {
  0%,15%{opacity:0;stroke-dashoffset:760;}
  24%{opacity:1;stroke-dashoffset:580;}
  58%{opacity:1;stroke-dashoffset:0;}
  100%{opacity:0;stroke-dashoffset:-580;}
}
@keyframes kiko-speed-streak {
  0%{opacity:0;stroke-dashoffset:170;}
  32%{opacity:1;stroke-dashoffset:0;}
  100%{opacity:0;stroke-dashoffset:-170;}
}
@keyframes kiko-impact-ring {
  0%{opacity:0;transform:scale(.2);}
  25%{opacity:1;transform:scale(.7);}
  100%{opacity:0;transform:scale(3.4);}
}
@keyframes kiko-spark-flight {
  0%{opacity:0;transform:translate(0,0) scale(.4);}
  24%{opacity:1;transform:translate(0,0) scale(1.4);}
  100%{opacity:0;transform:translate(var(--sx,16px),var(--sy,-30px)) scale(.2);}
}
@keyframes kiko-afterimage-left {
  0%{opacity:0;transform:translate(55px,25px) scale(.98);}
  22%{opacity:.33;transform:translate(-26px,-12px) scale(1.025);}
  100%{opacity:0;transform:translate(-95px,-32px) scale(1.03);}
}
@keyframes kiko-afterimage-right {
  0%{opacity:0;transform:translate(-45px,-30px) scale(1.02);}
  28%{opacity:.24;transform:translate(28px,0) scale(.99);}
  100%{opacity:0;transform:translate(90px,35px) scale(.96);}
}
@keyframes kiko-battle-word {
  0%{opacity:0;transform:skew(-12deg) rotate(-13deg) scale(.3);}
  23%{opacity:1;transform:skew(-12deg) rotate(-13deg) scale(1.17);}
  50%{opacity:1;transform:skew(-12deg) rotate(-13deg) scale(1);}
  100%{opacity:0;transform:skew(-12deg) rotate(-13deg) translateY(-16px) scale(1);}
}
@keyframes kiko-smoke-burst {
  0%{opacity:0;transform:scale(.3) translateY(0);}
  25%{opacity:.55;transform:scale(.8) translateY(-3px);}
  100%{opacity:0;transform:scale(2.5) translateY(-35px);}
}
@keyframes kiko-launcher-glow {
  0%,100%{box-shadow:0 16px 40px #0009,0 0 22px #00d9f526;}
  40%{box-shadow:0 16px 40px #0009,0 0 36px #00d9f5b0;}
}
@keyframes kiko-panel-in { from{opacity:0;transform:translateY(8px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
@media(max-width:550px) {
  .kiko-assistant { left: 12px; right: auto; bottom: 12px; gap: 8px; }
  .kiko-launcher { min-height: 61px; padding:4px 12px 4px 5px; }
  .kiko-launcher .kiko-avatar { width:49px; height:49px; flex-basis:49px; }
  .kiko-panel { width:calc(100vw - 24px); height:min(530px,calc(100dvh - 85px)); }
  .kiko-hero-invite { font-size:9px; left:3%; bottom:0; }
  .kiko-ninja-word { top:19%;right:0;font-size:clamp(18px,5vw,27px); }
}
@media(prefers-reduced-motion:reduce) {
  .hero-kiko,.hero-kiko.kiko-react,.kiko-launcher.kiko-launch-reaction,.kiko-panel,.kiko-toast { animation:none!important; }
  .kiko-ninja-fx { visibility:hidden!important; }
  .kiko-launcher { transition:none; }
}