:root{
  --rx-accent:#ee1f66;
  --rx-accent-2:#33beff;
  --rx-surface:#141416;
  --rx-surface-2:#202024;
  --rx-line:rgba(255,255,255,.12);
  --rx-muted:rgba(255,255,255,.58);
  --rx-font:inherit;
  --rx-green:#3ddc84;
  --rx-green-ink:#0b2a18;
}

body[data-ryuk-theme="terminal"]{--rx-accent:#ee1f66;--rx-accent-2:#33beff;--rx-surface:#141416;--rx-surface-2:#29292a;--rx-font:'Source Code Pro',monospace}
body[data-ryuk-theme="street"]{--rx-accent:#f91880;--rx-accent-2:#ff2b5e;--rx-surface:#131313;--rx-surface-2:#1a1a1a;--rx-font:'Inter',sans-serif}
body[data-ryuk-theme="lab"]{--rx-accent:#ec4899;--rx-accent-2:#22d3ee;--rx-surface:#14151a;--rx-surface-2:#282a36;--rx-font:'Manrope',sans-serif;--rx-green:#34d399;--rx-green-ink:#06281c}
body[data-ryuk-theme="portal"]{--rx-accent:#b296f8;--rx-accent-2:#f0abfc;--rx-surface:#0f0f13;--rx-surface-2:#18151f;--rx-font:'Onest',sans-serif;--rx-green:#7dffa0;--rx-green-ink:#0c2416}
body[data-ryuk-theme="hud"]{--rx-accent:#00e5ff;--rx-accent-2:#ff1f6a;--rx-surface:#090910;--rx-surface-2:#0e0e1a;--rx-font:'Share Tech Mono',monospace}
body[data-ryuk-theme="launcher"]{--rx-accent:#e03bb2;--rx-accent-2:#7c5cff;--rx-surface:#211f28;--rx-surface-2:#2b2833;--rx-font:'Nunito Sans',sans-serif;--rx-green:#3ddc84;--rx-green-ink:#0b2a18}

/* Character — крупнее, стикеры отдельным слоем поверх */
.ryuk-character{
  position:relative;
  width:min(100%,380px);
  height:auto;
  margin:0;
  overflow:visible;
}
.ryuk-character__stage{
  position:relative;
  width:100%;
  padding:10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  box-shadow:14px 14px 0 color-mix(in srgb,var(--rx-accent) 24%,rgba(0,0,0,.38));
  transform:rotate(2deg);
  animation:none;
  overflow:visible;
}
.ryuk-character__stage::before,
.ryuk-character__stage::after{content:none;display:none}
.ryuk-character__stage > img{
  display:block;
  width:100%;
  height:auto;
  border-radius:7px;
  background:transparent;
  object-fit:contain;
  position:relative;
  z-index:1;
}
/* Stickers — PNG ассеты, поверх персонажа; тема через data-ryuk-theme */
.ryuk-sticker{
  position:absolute;
  z-index:20;
  display:block;
  margin:0;
  padding:0;
  border:none;
  background:none;
  box-shadow:none;
  pointer-events:none;
  line-height:0;
  overflow:hidden;
  border-radius:10px;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.4));
  will-change:transform;
}
.ryuk-sticker img{
  display:block;
  width:100%;
  height:auto;
  border-radius:0;
  background:transparent;
  transform:none;
  -webkit-mask-image:none;
  mask-image:none;
}
.ryuk-sticker--pink{
  top:4%;
  left:-6%;
  width:68%;
  transform:rotate(-7deg);
  animation:ryuk-sticker-float-a 2.8s ease-in-out infinite;
}
.ryuk-sticker--green{
  bottom:8%;
  right:-5%;
  width:54%;
  transform:rotate(4deg);
  animation:ryuk-sticker-float-b 3.1s ease-in-out infinite;
}
/* короткий блик строго вдоль стикера (не диагональ) */
.ryuk-sticker::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:0;
  width:36%;
  border-radius:inherit;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4) 45%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.4) 55%, transparent);
  transform:translateX(-120%);
  animation:ryuk-sticker-shine 2.6s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:0;
}
.ryuk-sticker--green::after{ animation-delay:.55s; }
.ryuk-char-badge{display:none!important}
@keyframes ryuk-sticker-float-a{
  0%,100%{ transform:rotate(-7deg) translateY(0); }
  50%{ transform:rotate(-7deg) translateY(-4px); }
}
@keyframes ryuk-sticker-float-b{
  0%,100%{ transform:rotate(4deg) translateY(0); }
  50%{ transform:rotate(4deg) translateY(-3px); }
}
@keyframes ryuk-sticker-shine{
  0%,58%{ transform:translateX(-120%); opacity:0; }
  64%{ opacity:.75; }
  86%{ transform:translateX(280%); opacity:.4; }
  92%,100%{ transform:translateX(300%); opacity:0; }
}

/* --- стилизация стикеров под тему сайта --- */
body[data-ryuk-theme="lab"] .ryuk-sticker{
  filter:drop-shadow(0 0 14px rgba(236,72,153,.35)) drop-shadow(0 6px 12px rgba(0,0,0,.4));
  border-radius:8px;
}
body[data-ryuk-theme="lab"] .ryuk-sticker--pink{
  filter:hue-rotate(-8deg) saturate(1.08) drop-shadow(0 0 16px rgba(236,72,153,.45)) drop-shadow(0 6px 12px rgba(0,0,0,.4));
}
body[data-ryuk-theme="lab"] .ryuk-sticker--green{
  filter:hue-rotate(18deg) saturate(1.1) drop-shadow(0 0 14px rgba(52,211,153,.4)) drop-shadow(0 6px 12px rgba(0,0,0,.4));
}

body[data-ryuk-theme="portal"] .ryuk-sticker{
  border-radius:6px;
  filter:drop-shadow(0 0 16px rgba(178,150,248,.4)) drop-shadow(10px 10px 0 rgba(178,150,248,.18));
}
body[data-ryuk-theme="portal"] .ryuk-sticker--pink{
  /* розовый → фиолетовый портал */
  filter:hue-rotate(-48deg) saturate(1.05) brightness(1.05) drop-shadow(0 0 18px rgba(178,150,248,.5)) drop-shadow(10px 10px 0 rgba(178,150,248,.2));
}
body[data-ryuk-theme="portal"] .ryuk-sticker--green{
  filter:hue-rotate(35deg) saturate(.95) brightness(1.08) drop-shadow(0 0 14px rgba(125,255,160,.35)) drop-shadow(10px 10px 0 rgba(178,150,248,.15));
}
body[data-ryuk-theme="portal"] .ryuk-sticker--pink{ width:72%; left:-8%; }
body[data-ryuk-theme="portal"] .ryuk-sticker--green{ width:58%; right:-7%; }

body[data-ryuk-theme="launcher"] .ryuk-sticker,
body[data-ryuk-theme="launcher"] .promo-char .ryuk-sticker{
  border-radius:10px;
  filter:drop-shadow(0 0 14px rgba(224,59,178,.4)) drop-shadow(0 8px 16px rgba(0,0,0,.45));
}
body[data-ryuk-theme="launcher"] .ryuk-sticker--pink,
body[data-ryuk-theme="launcher"] .promo-char .ryuk-sticker--pink{
  filter:saturate(1.12) brightness(1.02) drop-shadow(0 0 16px rgba(224,59,178,.5)) drop-shadow(0 8px 16px rgba(0,0,0,.45));
  width:70%;
  left:-8%;
}
body[data-ryuk-theme="launcher"] .ryuk-sticker--green,
body[data-ryuk-theme="launcher"] .promo-char .ryuk-sticker--green{
  filter:saturate(1.08) drop-shadow(0 0 14px rgba(61,220,132,.4)) drop-shadow(0 8px 16px rgba(0,0,0,.45));
  width:56%;
  right:-6%;
}

body[data-ryuk-theme="terminal"] .ryuk-sticker{ border-radius:2px; filter:contrast(1.08) drop-shadow(0 0 10px rgba(238,31,102,.35)); }
body[data-ryuk-theme="hud"] .ryuk-sticker{ border-radius:0; filter:saturate(1.2) drop-shadow(0 0 12px rgba(0,229,255,.35)); }
body[data-ryuk-theme="street"] .ryuk-sticker{ border-radius:4px; filter:saturate(1.15) drop-shadow(0 0 12px rgba(249,24,128,.4)); }

@media (max-width:700px){
  .ryuk-sticker--pink{ left:-4%; width:72%; }
  .ryuk-sticker--green{ right:-3%; width:58%; }
}
@media (prefers-reduced-motion:reduce){
  .ryuk-sticker,
  .ryuk-sticker::after,
  .promo-char .ryuk-sticker,
  .promo-char .ryuk-sticker::after{ animation:none !important; }
}

body[data-ryuk-theme="terminal"] .ryuk-hero-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,330px);gap:42px;align-items:center;margin-bottom:30px}
body[data-ryuk-theme="terminal"] .ryuk-character{width:min(100%,360px);justify-self:end}
body[data-ryuk-theme="terminal"] .ryuk-character__stage{border-radius:4px}
body[data-ryuk-theme="terminal"] .ryuk-character__stage > img{border-radius:4px}

body[data-ryuk-theme="street"] .hero{grid-template-columns:minmax(0,1fr) minmax(360px,440px)}
body[data-ryuk-theme="street"] .hero-visual>.ryuk-character{position:relative;z-index:2;width:min(100%,410px)}

/* Lab hero: real split composition (Pipe-style), no absolute float */
body[data-ryuk-theme="lab"] .hero-stage{
  grid-template-columns:minmax(0,1.05fr) minmax(320px,400px);
  gap:32px 40px;
  align-items:center;
}
body[data-ryuk-theme="lab"] .hero-visual .ryuk-character{
  width:min(100%,380px);
  position:relative;
  z-index:2;
}
body[data-ryuk-theme="lab"] .hero-sub{
  color:rgba(226,230,240,.88);
}

body[data-ryuk-theme="portal"] .pcode .ryuk-character{position:relative;z-index:2;width:330px;justify-self:end}

body[data-ryuk-theme="hud"] .hero-grid{grid-template-columns:minmax(0,1fr) minmax(320px,380px)}
body[data-ryuk-theme="hud"] .nd-visual{position:relative;min-height:auto;display:grid;gap:16px;justify-items:center;align-items:start}
body[data-ryuk-theme="hud"] .nd-visual>.ryuk-character{width:350px;max-width:100%}
body[data-ryuk-theme="hud"] .ryuk-character__stage,
body[data-ryuk-theme="hud"] .ryuk-character__stage > img{border-radius:0}
body[data-ryuk-theme="hud"] .nd-visual>.tlm{position:relative;inset:auto;z-index:4;width:100%;margin:0;grid-template-columns:86px 1fr;padding:16px 18px;gap:16px;background:rgba(6,6,8,.92);backdrop-filter:blur(12px)}
body[data-ryuk-theme="hud"] .nd-visual .tlm-radar{width:82px;height:82px}

body[data-ryuk-theme="launcher"] .promo-char,
body[data-ryuk-theme="launcher"] .ryuk-character{width:310px;height:auto;display:block;flex:0 0 310px}

.ryuk-ingame{
  margin-top:36px;
  padding-top:34px;
  border-top:1px solid var(--rx-line);
  font-family:var(--rx-font);
}
.ryuk-ingame__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px}
.ryuk-ingame__eyebrow{display:block;margin-bottom:7px;color:var(--rx-accent);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.ryuk-ingame__head h3{margin:0;color:#fff;font-size:clamp(20px,3vw,28px);line-height:1.15;letter-spacing:0}
.ryuk-ingame__head p{max-width:470px;margin:0;color:var(--rx-muted);font-size:13px;line-height:1.55;text-align:right;letter-spacing:0}
.ryuk-ingame__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
.ryuk-demo{min-width:0;margin:0;border:1px solid var(--rx-line);border-radius:8px;overflow:hidden;background:var(--rx-surface);box-shadow:0 16px 40px rgba(0,0,0,.22);height:100%;display:flex;flex-direction:column}
.ryuk-demo__viewport{position:relative;width:100%;aspect-ratio:629/333;overflow:hidden;background:#0d0d11;flex:0 0 auto}
.ryuk-demo__viewport>img{display:block;width:100%;height:100%;object-fit:contain;background:#0d0d11}
.ryuk-demo figcaption{padding:14px 16px;border-top:1px solid var(--rx-line);color:var(--rx-muted);font-size:12.5px;line-height:1.55;letter-spacing:0;flex:1}
.ryuk-demo figcaption b{color:#fff;font-weight:700}
.ryuk-chat-ui{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column;justify-content:center;gap:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--rx-surface-2) 88%,#000),var(--rx-surface));color:#fff;font-family:inherit}
.ryuk-chat-ui::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,color-mix(in srgb,var(--rx-accent) 14%,transparent),transparent 70%);pointer-events:none}
.ryuk-chat__top{position:relative;display:flex;justify-content:space-between;gap:12px;color:rgba(255,255,255,.55);font-size:11px;font-weight:600;letter-spacing:.04em}
.ryuk-chat__line{position:relative;color:rgba(255,255,255,.72);font-size:13px;line-height:1.45;letter-spacing:0}
.ryuk-chat__line b{color:var(--rx-accent);font-weight:700}
.ryuk-chat__input{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid color-mix(in srgb,var(--rx-accent) 42%,transparent)}
.ryuk-chat__prompt{display:none}
.ryuk-chat__input code{min-width:0;color:#fff;font:700 clamp(14px,2.2vw,18px)/1.2 inherit;letter-spacing:.02em;overflow-wrap:anywhere}
.ryuk-chat__input kbd{margin-left:auto;padding:6px 10px;border:1px solid rgba(255,255,255,.16);border-radius:8px;color:rgba(255,255,255,.75);font:700 11px/1 inherit;letter-spacing:.02em;background:rgba(255,255,255,.05)}
.ryuk-chat__success{position:relative;align-self:flex-start;padding:7px 12px;border-radius:999px;border:1px solid rgba(61,220,132,.32);background:rgba(61,220,132,.1);color:#8ef0b8;font-size:12px;font-weight:700;line-height:1.35;letter-spacing:0}
.ryuk-ingame__actions{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:22px;
}
.ryuk-ingame__button,
.ryuk-ingame__link,
.ryuk-ingame__faq{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-height:48px;
  padding:0 22px;
  border-radius:10px;
  font:700 13px/1.2 var(--rx-font);
  letter-spacing:.02em;
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
  white-space:nowrap;
}
.ryuk-ingame__button{
  border:1px solid color-mix(in srgb,var(--rx-accent) 45%,transparent);
  background:color-mix(in srgb,var(--rx-accent) 12%,var(--rx-surface));
  color:#fff;
}
.ryuk-ingame__link{
  border:1px solid transparent;
  background:var(--rx-accent);
  color:#0b0616;
  box-shadow:0 4px 18px color-mix(in srgb,var(--rx-accent) 35%,transparent);
}
.ryuk-ingame__faq{
  border:1px solid color-mix(in srgb,var(--rx-accent) 28%,transparent);
  background:transparent;
  color:var(--rx-muted);
  padding:0 18px;
}
.ryuk-ingame__button:hover,
.ryuk-ingame__link:hover{transform:translateY(-2px)}
.ryuk-ingame__faq:hover{
  color:#fff;
  border-color:color-mix(in srgb,var(--rx-accent) 55%,transparent);
  background:color-mix(in srgb,var(--rx-accent) 10%,transparent);
}
.ryuk-ingame__button:focus-visible,
.ryuk-ingame__link:focus-visible,
.ryuk-ingame__faq:focus-visible{outline:2px solid var(--rx-accent-2);outline-offset:3px}

/* portal (v4): выровнять как кнопки сайта */
body[data-ryuk-theme="portal"] .ryuk-ingame__actions{gap:16px;margin-top:26px}
body[data-ryuk-theme="portal"] .ryuk-ingame__button,
body[data-ryuk-theme="portal"] .ryuk-ingame__link,
body[data-ryuk-theme="portal"] .ryuk-ingame__faq{
  min-height:52px;
  padding:0 26px;
  border-radius:12px;
  font-size:14px;
  font-weight:700;
}
body[data-ryuk-theme="portal"] .ryuk-ingame__button{
  background:rgba(178,150,248,.07);
  border:1px solid rgba(178,150,248,.3);
  color:var(--txt,#fff);
}
body[data-ryuk-theme="portal"] .ryuk-ingame__button:hover{
  background:rgba(178,150,248,.14);
  border-color:#b296f8;
  box-shadow:0 0 24px rgba(178,150,248,.24);
}
body[data-ryuk-theme="portal"] .ryuk-ingame__link{
  background:linear-gradient(135deg,#b296f8 0%,#7c3cf8 100%);
  color:#0b0616;
  box-shadow:0 4px 22px rgba(178,150,248,.36);
  border:1px solid rgba(255,255,255,.12);
}
body[data-ryuk-theme="portal"] .ryuk-ingame__link:hover{
  box-shadow:0 10px 44px rgba(178,150,248,.55);
}
body[data-ryuk-theme="portal"] .ryuk-ingame__faq{
  border:1px solid rgba(178,150,248,.28);
  color:#a09db8;
}
body[data-ryuk-theme="portal"] .ryuk-ingame__faq:hover{
  color:#fff;
  border-color:rgba(178,150,248,.5);
  background:rgba(178,150,248,.1);
}

.ryuk-trail-layer{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden;contain:strict}
.ryuk-trail-dot{position:absolute;left:0;top:0;width:6px;height:6px;opacity:0;background:var(--rx-accent);will-change:transform,opacity}
.ryuk-trail-dot.is-active{animation:ryukTrailFade .62s cubic-bezier(.16,.8,.28,1) forwards}
.ryuk-trail-dot:nth-child(2n){background:var(--rx-accent-2)}
body[data-ryuk-theme="terminal"] .ryuk-trail-dot{width:5px;height:5px;box-shadow:0 0 8px currentColor}
body[data-ryuk-theme="street"] .ryuk-trail-dot{width:18px;height:3px;transform-origin:left center;box-shadow:0 0 10px var(--rx-accent)}
body[data-ryuk-theme="lab"] .ryuk-trail-dot{width:7px;height:7px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);box-shadow:0 0 9px var(--rx-accent-2)}
body[data-ryuk-theme="portal"] .ryuk-trail-dot{width:12px;height:12px;border:1px solid var(--rx-accent);border-radius:50%;background:transparent;box-shadow:0 0 10px rgba(178,150,248,.55)}
body[data-ryuk-theme="portal"] .ryuk-trail-dot:nth-child(2n){background:transparent;border-color:var(--rx-accent-2)}
body[data-ryuk-theme="hud"] .ryuk-trail-dot{width:10px;height:10px;border:1px solid var(--rx-accent);background:transparent;box-shadow:0 0 8px rgba(0,229,255,.6)}
body[data-ryuk-theme="hud"] .ryuk-trail-dot:nth-child(2n){background:transparent;border-color:var(--rx-accent-2)}
body[data-ryuk-theme="launcher"] .ryuk-trail-dot{width:12px;height:3px;border-radius:2px;box-shadow:0 0 6px color-mix(in srgb,var(--rx-accent) 55%,transparent);opacity:.85}
@keyframes ryukTrailFade{
  0%{opacity:.76;transform:translate3d(var(--rx-x),var(--rx-y),0) rotate(var(--rx-angle)) scale(1)}
  100%{opacity:0;transform:translate3d(calc(var(--rx-x) + var(--rx-dx)),calc(var(--rx-y) + var(--rx-dy)),0) rotate(var(--rx-angle)) scale(.25)}
}

@media(max-width:1100px){
  body[data-ryuk-theme="lab"] .hero-stage{
    grid-template-columns:minmax(0,1fr) minmax(260px,320px);
    gap:24px 28px;
  }
  body[data-ryuk-theme="lab"] .hero-visual .ryuk-character{width:min(100%,320px)}
}
@media(max-width:860px){
  body[data-ryuk-theme="terminal"] .ryuk-hero-row{grid-template-columns:1fr;text-align:left}
  body[data-ryuk-theme="terminal"] .ryuk-character{width:min(300px,82vw);justify-self:center}
  body[data-ryuk-theme="street"] .hero{grid-template-columns:1fr}
  body[data-ryuk-theme="street"] .hero-visual>.ryuk-character{width:min(340px,82vw)}
  body[data-ryuk-theme="lab"] .hero-stage{grid-template-columns:1fr;gap:36px}
  body[data-ryuk-theme="lab"] .hero-visual .ryuk-character{width:min(300px,82vw)}
  body[data-ryuk-theme="hud"] .hero-grid{grid-template-columns:1fr}
  body[data-ryuk-theme="hud"] .nd-visual{min-height:auto;display:grid;gap:18px;justify-items:center}
  body[data-ryuk-theme="hud"] .nd-visual>.ryuk-character{width:min(320px,86vw)}
  body[data-ryuk-theme="hud"] .nd-visual>.tlm{position:relative;inset:auto;width:100%}
  body[data-ryuk-theme="launcher"] .promo-char,
  body[data-ryuk-theme="launcher"] .ryuk-character{display:block;width:min(320px,86vw);height:auto;justify-self:center;flex-basis:auto}
  body[data-ryuk-theme="portal"] .pcode .ryuk-character{width:min(320px,100%);justify-self:center}
  .ryuk-ingame__head{align-items:flex-start;flex-direction:column;gap:8px}
  .ryuk-ingame__head p{text-align:left}
  .ryuk-ingame__grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .ryuk-ingame{margin-top:28px;padding-top:26px}
  .ryuk-chat-ui{padding:14px;gap:10px}
  .ryuk-chat__top{font-size:10px}
  .ryuk-chat__line{font-size:12px}
  .ryuk-chat__input{min-height:42px;padding:10px 12px;gap:8px;border-radius:10px}
  .ryuk-chat__input kbd{font-size:10px;padding:5px 8px}
  .ryuk-chat__success{padding:6px 10px;font-size:11px}
  .ryuk-ingame__actions{align-items:stretch;gap:12px}
  .ryuk-ingame__button,
  .ryuk-ingame__link,
  .ryuk-ingame__faq{flex:1 1 100%;white-space:normal;text-align:center}
}
@media(pointer:coarse),(hover:none),(prefers-reduced-motion:reduce){
  .ryuk-trail-layer{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .ryuk-character__stage{animation:none!important}
}