/* ============================================================
   TUNA.XXX :: ГЛАЗА КРОВОТОЧАТ РОЗОВЫМ :: WEB 1.0 RETRO-FUTURISM
   Палитра .xxx-зоны: неон, сашими и стыд. NSFW тут только цвет.
   ============================================================ */
:root{
  --pink:#ff2e88;      /* неоновое сашими */
  --hotpink:#ff7ad9;   /* жвачка из 2005-го */
  --magenta:#ff00d4;   /* чистый разврат (легальный) */
  --lilac:#c77dff;     /* фиолетовый стыд */
  --rose:#ffb3da;      /* нежность перед унижением */
  --bg0:#1c0016; --bg1:#33002b; --bg2:#26001f; --bg3:#42003a;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

/* системный курсор прячем не везде — пусть мигает поверх, тунцы догонят */
body{
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text y="26" font-size="24">💗</text></svg>') 16 16, auto;
}

@keyframes bgblink{
  0%   { background-color:var(--bg0); }
  25%  { background-color:var(--bg1); }
  50%  { background-color:var(--bg2); }
  75%  { background-color:var(--bg3); }
  100% { background-color:var(--bg0); }
}
@keyframes hueshift{ from{ filter:hue-rotate(0deg);} to{ filter:hue-rotate(360deg);} }
@keyframes shake{
  0%{transform:translate3d(0,0,0) rotate(-1deg);}
  20%{transform:translate3d(-2px,1px,0) rotate(1deg);}
  40%{transform:translate3d(2px,-1px,0) rotate(-1.5deg);}
  60%{transform:translate3d(-1px,2px,0) rotate(1.5deg);}
  80%{transform:translate3d(1px,-2px,0) rotate(-1deg);}
  100%{transform:translate3d(0,0,0) rotate(1deg);}
}
@keyframes neonpulse{
  from{ text-shadow:0 0 4px var(--hotpink),0 0 11px var(--hotpink),0 0 19px var(--pink),0 0 40px var(--magenta); }
  to  { text-shadow:0 0 2px var(--pink),0 0 8px var(--magenta),0 0 22px var(--hotpink),0 0 55px var(--pink); }
}
@keyframes spin360{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes floatx{ 0%{transform:translate3d(0,0,0);} 50%{transform:translate3d(0,-25px,0);} 100%{transform:translate3d(0,0,0);} }
@keyframes rainbowtext{
  0%{color:var(--rose);} 33%{color:var(--magenta);} 66%{color:var(--lilac);} 100%{color:var(--rose);}
}

body{
  background:var(--bg0);
  animation: bgblink .6s steps(1) infinite;
  color:var(--rose);
  font-family:"Comic Sans MS","Impact","Comic Sans",cursive,sans-serif;
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
}
/* мигающий неоновый задник — на собственном слое, hue-rotate крутит GPU */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,46,136,.22), transparent 42%),
    radial-gradient(circle at 80% 70%, rgba(255,0,212,.20), transparent 42%),
    radial-gradient(circle at 50% 105%, rgba(199,125,255,.20), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,122,217,.06) 0 2px, transparent 2px 4px);
  animation: hueshift 8s linear infinite;
  will-change: filter;
  transform: translateZ(0);
}

h1,h2,h3{
  font-family:"Impact","Comic Sans MS",sans-serif;
  text-transform:uppercase;
  animation: shake .35s infinite, neonpulse .7s alternate infinite;
  text-align:center;
  letter-spacing:2px;
  will-change: transform, text-shadow;
}
h1{ font-size: clamp(28px, 7vw, 72px); color:var(--pink); margin:.2em 0; }
h2{ font-size: clamp(20px, 4vw, 38px); color:var(--hotpink); }

a{ color:var(--hotpink); }

.wrap{ max-width:980px; margin:0 auto; padding:14px; position:relative; z-index:1; }

.banner{
  text-align:center; font-size:22px; color:var(--pink);
  border:3px dashed var(--hotpink); padding:8px; margin:10px 0;
  animation: rainbowtext 1.5s infinite;
  background:rgba(20,0,16,.6);
}

.bananas{ text-align:center; font-size:46px; line-height:1; user-select:none; }
.bananas span{ display:inline-block; animation: floatx 1s infinite, spin360 2s linear infinite; will-change:transform; }
.bananas span:nth-child(2n){ animation-duration: 1.4s, 3s; }
.bananas span:nth-child(3n){ animation-duration: .8s, 1.5s; }

/* ===== БАКА-ДЕТЕКТОР 9001 ===== */
#baka{
  border:4px ridge var(--magenta);
  background:rgba(30,0,24,.78);
  padding:16px; margin:18px 0;
  box-shadow:0 0 25px var(--magenta) inset, 0 0 25px var(--pink);
}
#baka .verdict{
  font-size: clamp(16px, 2.6vw, 24px);
  color:#fff; min-height:2em;
  text-shadow:0 0 6px var(--magenta);
}
#baka .stats{ font-size:13px; color:var(--rose); opacity:.85; margin-top:8px; word-break:break-word; }
.btnvoice{
  margin-top:10px; font-family:inherit; font-size:16px; cursor:inherit;
  background:var(--hotpink); color:#2a0022; border:3px outset var(--magenta); padding:6px 14px;
  font-weight:bold;
}

/* эквалайзер приговора */
#eq{
  display:flex; align-items:flex-end; gap:4px;
  height:56px; margin-top:12px; padding:6px 10px;
  border:2px solid var(--pink); background:rgba(0,0,0,.55);
  box-shadow:0 0 14px var(--pink) inset;
}
#eq[hidden]{ display:none; }
#eq .bar{
  flex:1; height:100%;
  background:linear-gradient(to top, var(--magenta), var(--hotpink), #fff);
  transform-origin:bottom; transform:scaleY(.05);
  will-change:transform;
  box-shadow:0 0 8px var(--magenta);
}

/* ===== ФОРМА ГРЕХА ===== */
#sinbox{
  border:4px double var(--hotpink);
  background:rgba(25,0,18,.66);
  padding:16px; margin:18px 0;
}
#sinbox textarea{
  width:100%; min-height:80px; resize:vertical;
  background:#14000f; color:var(--hotpink); border:2px solid var(--pink);
  font-family:"Comic Sans MS",cursive; font-size:16px; padding:8px;
}
#sinbox button{
  margin-top:10px; font-family:"Impact",sans-serif; font-size:20px;
  background:var(--pink); color:#1c0016; border:4px outset var(--magenta);
  padding:8px 18px; cursor:inherit; text-transform:uppercase;
  animation: neonpulse 1s alternate infinite;
}
#sinbox button:disabled{ opacity:.6; filter:grayscale(.4); }
.counter{ color:var(--lilac); font-size:14px; margin-left:10px; }

/* ===== СТЕНА ПОЗОРА: ПОЛНЫЙ АРХИВ ===== */
#sinwall{
  border:4px ridge var(--pink);
  background:rgba(25,0,18,.72);
  padding:16px; margin:18px 0;
  box-shadow:0 0 22px var(--pink) inset, 0 0 18px var(--magenta);
}
.wall-scroll{ max-height:420px; overflow-y:auto; border:2px solid var(--magenta); }
.wall-scroll::-webkit-scrollbar{ width:12px; }
.wall-scroll::-webkit-scrollbar-track{ background:#14000f; }
.wall-scroll::-webkit-scrollbar-thumb{ background:linear-gradient(var(--magenta), var(--pink)); border:2px solid #14000f; }
#sinwall table{ width:100%; border-collapse:collapse; font-size:15px; }
#sinwall th{
  position:sticky; top:0; z-index:1;
  background:linear-gradient(180deg, var(--magenta), var(--pink));
  color:#1c0016; font-family:"Impact",sans-serif; text-transform:uppercase;
  letter-spacing:1px; padding:8px 10px; border:2px solid var(--magenta);
  text-shadow:0 0 6px rgba(255,255,255,.5);
}
#sinwall td{
  border:1px dashed var(--pink); padding:7px 10px;
  color:var(--rose); word-break:break-word;
}
#sinwall td:first-child{ color:var(--lilac); font-weight:bold; white-space:nowrap; text-align:right; }
#sinwall td:last-child{ color:var(--lilac); font-size:12px; white-space:nowrap; }
#sinwall tbody tr:nth-child(odd){ background:rgba(255,46,136,.09); }
#sinwall tbody tr:hover{ background:rgba(255,0,212,.2); text-shadow:0 0 7px var(--magenta); }
#sinwall tr.glitch-in{ animation: glitchin 1.4s steps(8) both; will-change:transform; }
#sinwall tr.glitch-in td{ color:inherit; }

/* ===== КРАСНАЯ УГРОЗА (единственное не-розовое: так страшнее) ===== */
#redzone{ text-align:center; margin:40px 0; min-height:140px; }
#redbtn{
  position:relative;
  font-family:"Impact",sans-serif; font-size: clamp(16px,3vw,26px);
  background:radial-gradient(circle at 50% 30%, #ff5566, #c4003c 70%, #57001f 100%);
  color:#fff; border:6px outset #ff0044; border-radius:18px;
  padding:26px 34px; cursor:inherit; font-weight:bold;
  box-shadow:0 0 30px #ff0044, 0 0 60px #ff2e88 inset;
  text-shadow:2px 2px 0 #000;
  transition:transform .09s linear;
  text-transform:uppercase; line-height:1.1; max-width:90vw;
  will-change:transform;
}
#redbtn:hover{ box-shadow:0 0 50px #ff2266, 0 0 90px #ff0066 inset; }

/* ===== БЕГУЩАЯ СТРОКА ПОЗОРА ===== */
.marquee-wrap{
  position:fixed; bottom:0; left:0; width:100%;
  background:rgba(12,0,10,.88); border-top:3px solid var(--magenta);
  overflow:hidden; white-space:nowrap; z-index:50; padding:6px 0;
}
.marquee-wrap .label{
  position:absolute; left:0; top:0; bottom:0; z-index:2;
  background:linear-gradient(180deg, var(--magenta), var(--pink)); color:#1c0016;
  font-weight:bold; padding:6px 10px;
  font-family:Impact,sans-serif; display:flex; align-items:center;
  box-shadow:6px 0 18px rgba(255,0,212,.6);
}
.marq-track{
  display:inline-flex;
  animation: scrollLeft 28s linear infinite;
  will-change:transform;
}
.marq-copy{ display:inline-flex; align-items:center; padding-left:50vw; }
.marq-copy .sin{
  font-size:18px; color:var(--hotpink);
  text-shadow:0 0 5px var(--magenta);
}
.marq-copy .sep{ color:var(--rose); padding:0 14px; }
@keyframes scrollLeft{ from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);} }

/* глитч свежего греха при появлении */
@keyframes glitchin{
  0%   { opacity:0; transform:translate3d(0,-14px,0) skewX(30deg); text-shadow:-4px 0 #0ff, 4px 0 var(--magenta); color:#fff; }
  20%  { opacity:1; transform:translate3d(4px,3px,0) skewX(-20deg); text-shadow:5px 0 #0ff, -5px 0 var(--magenta); }
  40%  { transform:translate3d(-5px,-2px,0) skewX(12deg); text-shadow:-3px 0 #0ff, 3px 0 var(--pink); }
  60%  { transform:translate3d(3px,1px,0) skewX(-6deg); text-shadow:2px 0 #0ff, -2px 0 var(--magenta); color:#fff; }
  80%  { transform:translate3d(-1px,0,0) skewX(2deg); }
  100% { transform:none; text-shadow:0 0 5px var(--magenta); color:var(--hotpink); }
}
.sin.glitch-in{ animation: glitchin 1.4s steps(8) both; will-change:transform; }

/* центральный глитч-тост о принятом грехе */
#glitchtoast{
  position:fixed; left:50%; top:38%; z-index:300;
  transform:translate(-50%,-50%);
  font-family:"Impact",sans-serif; font-size:clamp(20px,4vw,40px);
  color:#fff; text-transform:uppercase; text-align:center;
  pointer-events:none; max-width:90vw;
  text-shadow:-4px 0 #0ff, 4px 0 var(--magenta), 0 0 30px var(--pink);
  animation: glitchin .9s steps(6) both, toastout .6s ease-in 1.6s forwards;
}
@keyframes toastout{ to{ opacity:0; transform:translate(-50%,-50%) scale(2) rotate(6deg); } }

/* ===== ТУНЦОВАЯ ЗМЕЙКА ЗА КУРСОРОМ ===== */
.tuna-seg{
  position:fixed; left:0; top:0; z-index:9999; pointer-events:none;
  font-size:34px; line-height:1;
  will-change:transform;
  filter: drop-shadow(0 0 7px var(--magenta));
}

/* ===== АРМАГЕДДОН: CLIP-PATH MADNESS ===== */
@keyframes clipchaos{
  0%  { clip-path:inset(0 0 0 0); transform:none; }
  12% { clip-path:inset(8% 0 61% 0); transform:translate3d(-14px,5px,0) skewX(9deg); }
  24% { clip-path:inset(55% 0 4% 0); transform:translate3d(11px,-7px,0) skewX(-12deg); }
  36% { clip-path:inset(20% 30% 20% 0); transform:translate3d(-7px,2px,0) scale(1.02); }
  48% { clip-path:inset(0 0 75% 12%); transform:translate3d(16px,8px,0) skewY(4deg); }
  60% { clip-path:polygon(0 0,100% 12%,100% 88%,0 100%); transform:translate3d(-10px,-4px,0); }
  72% { clip-path:inset(40% 5% 30% 25%); transform:translate3d(8px,12px,0) skewX(18deg); }
  84% { clip-path:inset(3% 0 3% 0); transform:translate3d(-4px,-9px,0) scale(.98); }
  100%{ clip-path:inset(0 0 0 0); transform:none; }
}
@keyframes hueblast{
  0%  { filter:none; }
  25% { filter:invert(1) hue-rotate(120deg) saturate(3); }
  50% { filter:hue-rotate(250deg) contrast(2); }
  75% { filter:invert(1) saturate(5) hue-rotate(310deg); }
  100%{ filter:none; }
}
body.apocalypse{ animation: bgblink .12s steps(1) infinite, hueblast .33s linear 12; }
body.apocalypse .wrap{ animation: clipchaos .27s steps(3) 15; will-change:transform, clip-path; }
body.apocalypse .marquee-wrap{ animation: clipchaos .19s steps(2) 21 reverse; }

/* ===== ФЕЙКОВЫЙ ТЕРМИНАЛ ===== */
#terminal{
  position:fixed; inset:0; z-index:1000;
  background:rgba(10,0,8,.82);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(2px) saturate(1.6);
}
/* display:flex выше перебивает UA-стиль [hidden] — возвращаем ему силу */
#terminal[hidden]{ display:none; }
.term-window{
  width:min(720px, 94vw); max-height:84vh;
  background:#0c0009; border:3px solid var(--magenta);
  box-shadow:0 0 40px var(--magenta), 0 0 120px rgba(255,0,212,.4);
  display:flex; flex-direction:column;
}
.term-title{
  background:linear-gradient(90deg, var(--magenta), var(--pink));
  color:#fff; font-family:"Impact",sans-serif;
  padding:8px 12px; letter-spacing:1px;
  text-shadow:1px 1px 0 #000;
}
.term-body{
  margin:0; padding:14px; overflow-y:auto; flex:1; min-height:280px;
  font-family:"Courier New",monospace; font-size:14px; line-height:1.45;
  color:var(--hotpink); text-shadow:0 0 4px var(--magenta);
  white-space:pre-wrap; word-break:break-word;
}
.term-body::after{ content:"█"; animation: blinker .5s steps(1) infinite; }
#termclose{
  margin:12px; padding:10px;
  font-family:"Impact",sans-serif; font-size:18px; text-transform:uppercase;
  background:var(--pink); color:#1c0016; border:4px outset var(--magenta);
  cursor:inherit; animation: neonpulse .8s alternate infinite;
}

footer{ text-align:center; color:var(--pink); padding:30px 0 90px; font-size:13px; }
.blink{ animation: blinker .4s steps(1) infinite; }
@keyframes blinker{ 50%{ opacity:0; } }

/* совесть: если у юзера вестибулярка — почти всё гасим (но он всё равно baka) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; }
}