/* ============================
 EEL PIT: theme + layout
 ============================ */
:root {
--bg0: #00121c;
--bg1: #021e30;
--bg2: #062b44;
--acid: #39ff14;
--eel: #7ef1ff;
--hot: #ff00e6;
--warn: #ffea00;
--txt: #e9f5ff;
}
/* Base */
html,
body {
height: 100%;
}
body {
margin: 0;
color: var(--txt);
font-family: 'Comic Sans MS', Papyrus, 'Courier New', cursive;
background:
radial-gradient(120vmax 120vmax at 10% 10%, rgba(255, 255, 255, 0.04),
transparent 40%),
radial-gradient(120vmax 120vmax at 90% 20%, rgba(255, 0, 255, 0.06),
transparent 45%),
repeating-linear-gradient(-8deg, var(--bg0) 0 14px, var(--bg1) 14px 28px,
var(--bg2) 28px 42px);
overflow-x: hidden;
}
/* Utility text colors */
.txt-hot {
color: var(--hot);
}
.txt-eel {
color: var(--eel);
}
/* Shimmering water overlay */
.water {
4
position: fixed;
inset: 0;
pointer-events: none;
mix-blend-mode: screen;
opacity: 0.2;
background: repeating-radial-gradient(circle at 50% 110%, rgba(0, 200, 255,
0.5), rgba(0, 200, 255, 0) 6px),
repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.2) 0 10deg,
transparent 10deg 20deg);
animation: drift 40s linear infinite;
}
@keyframes drift {
from {
transform: translateY(0);
}
to {
transform: translateY(-20%);
}
}
/* CRT scanlines */
.crt:before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.12;
background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, 0.9)
2px 3px);
}
/* Header */
.site-header {
text-align: center;
padding: 18px 10px 6px;
position: relative;
text-shadow: 0 0 6px var(--eel), 0 0 22px var(--hot), 0 0 50px var(--eel);
}
.site-header h1 {
font-size: clamp(34px, 6vw, 86px);
margin: 0.2rem 0;
letter-spacing: 2px;
}
.sub {
font-size: clamp(14px, 2.2vw, 28px);
color: var(--warn);
text-shadow: 0 0 6px var(--warn);
5
}
.ticky-tape {
display: block;
margin: 10px 0;
font-weight: bold;
color: var(--acid);
text-shadow: 0 0 6px var(--acid), 0 0 16px var(--acid);
}
/* Card container */
.card {
width: min(1100px, calc(100% - 24px));
margin: 18px auto;
padding: 16px;
border: 6px ridge var(--eel);
background: rgba(2, 20, 30, 0.65);
box-shadow: 0 0 25px rgba(0, 255, 255, 0.2), inset 0 0 40px rgba(0, 255, 255,
0.06);
position: relative;
}
/* Buttons */
.btn-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.tip {
opacity: 0.8;
}
.btn {
display: inline-block;
padding: 10px 16px;
border: 4px outset var(--warn);
background: linear-gradient(180deg, #112b2b, #0a1717);
color: var(--warn);
text-decoration: none;
font-weight: 800;
cursor: pointer;
margin: 6px;
user-select: none;
text-shadow: 0 0 6px var(--warn), 0 0 20px var(--warn);
transition: transform 0.05s ease;
}
.btn:active {
transform: translateY(2px);
border-style: inset;
6
}
.btn-lg {
font-size: 1.25rem;
padding: 14px 22px;
border-width: 6px;
}
/* Tank */
.tank {
position: relative;
height: 52vh;
min-height: 380px;
overflow: hidden;
border: 8px groove var(--hot);
background:
radial-gradient(120% 100% at 50% 120%, rgba(0, 0, 0, 0.65), rgba(0, 0, 0,
0) 45%),
linear-gradient(180deg, rgba(0, 40, 55, 0.55), rgba(0, 30, 44, 0.7));
filter: saturate(115%);
}
/* Old SVG eel (kept) */
.eel {
position: absolute;
width: 150px;
height: auto;
filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6)) hue-rotate(0deg);
animation: swim var(--speed, 22s) linear infinite;
}
@keyframes swim {
0% {
transform: translateX(-12%) translateY(var(--y)) scaleX(1) rotate(2deg);
filter: hue-rotate(0deg);
}
49% {
transform: translateX(92vw) translateY(calc(var(--y) + 6px)) scaleX(1)
rotate(-2deg);
}
50% {
transform: translateX(92vw) translateY(calc(var(--y) + 6px)) scaleX(-1)
rotate(2deg);
}
100% {
transform: translateX(-12%) translateY(var(--y)) scaleX(-1) rotate(-2deg);
filter: hue-rotate(180deg);
}
}
7
/* Warning */
.warning {
position: absolute;
top: 8px;
right: 10px;
font-weight: 900;
color: var(--warn);
text-shadow: 0 0 8px var(--warn);
animation: pulse 1.2s infinite steps(2, jump-none);
}
@keyframes pulse {
50% {
opacity: 0.2;
transform: scale(1.05);
}
}
/* Guestbook */
.guestbook-title {
margin: 14px 0 6px;
}
.guestbook {
display: grid;
gap: 12px;
grid-template-columns: 1fr;
margin-top: 10px;
}
.gb-row {
display: grid;
grid-template-columns: 120px 1fr;
align-items: start;
gap: 12px;
}
.gb-input,
textarea {
width: 100%;
border: 4px double var(--eel);
background: #032233;
color: var(--txt);
padding: 8px;
font-family: inherit;
}
/* Floating fact */
.fact {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(40px, 40px);
  padding: 6px 10px;
  max-width: 420px;              /* grows, but not infinite */
  min-width: 220px;              /* default small size */
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 3px dashed var(--hot);
  pointer-events: none;
  text-shadow: 0 0 6px var(--hot);
  z-index: 50;
  transition:
    transform 0.08s linear,
    width 0.3s ease,
    height 0.3s ease,
    padding 0.3s ease,
    background 0.3s ease;
  box-sizing: border-box;
  white-space: normal;           /* allow wrapping */
  word-break: break-word;
}
/* Splash goo */
.slime {
position: fixed;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--acid);
filter: blur(2px);
box-shadow: 0 0 10px var(--acid), 0 0 20px var(--acid);
opacity: 0.7;
pointer-events: none;
animation: goo 0.7s linear forwards;
}
@keyframes goo {
to {
transform: translateY(12px) scale(0);
opacity: 0;
}
}
/* Global shake (extreme mode) */
@keyframes shake {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(2px, -2px);
}
50% {
transform: translate(-1px, 2px);
}
75% {
9
transform: translate(2px, 1px);
}
100% {
transform: translate(0, 0);
}
}
/* Gate overlay */
.gate {
position: fixed;
inset: 0;
display: grid;
place-items: center;
background:
radial-gradient(120vmax 120vmax at 10% 10%, rgba(255, 255, 255, 0.03),
transparent 40%),
radial-gradient(120vmax 120vmax at 90% 20%, rgba(255, 0, 255, 0.05),
transparent 45%),
linear-gradient(180deg, rgba(0, 20, 30, 0.95), rgba(0, 10, 16, 0.98));
z-index: 9999;
text-align: center;
}
.gate-inner {
padding: 24px 28px;
border: 6px ridge var(--eel);
background: rgba(2, 20, 30, 0.85);
box-shadow: 0 0 25px rgba(0, 255, 255, 0.2), inset 0 0 40px rgba(0, 255, 255,
0.06);
max-width: 680px;
}
.gate h1 {
margin: 0 0 8px;
text-shadow: 0 0 12px var(--hot), 0 0 22px var(--eel);
}
.gate-tip {
opacity: 0.8;
font-size: 0.9rem;
margin-top: 10px;
}
/* Hide the gate when pit is open */
.pit-open .gate {
display: none;
}
/* ============================
 2D Ribbon Eel (segment) style
 ============================ */
10
.snake {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
.snake .seg {
position: absolute;
width: 40px;
height: 18px;
border-radius: 12px;
background: linear-gradient(90deg, #0a1730, #10294a 60%, #163b64);
box-shadow: 0 0 8px rgba(0, 40, 80, 0.8);
opacity: 0.9;
transform-origin: center;
}
.snake .seg.head {
width: 46px;
height: 20px;
background: linear-gradient(90deg, #0f2e57, #17467d 60%, #0f2e57);
}
.snake .seg.head::after {
content: '';
position: absolute;
right: 6px;
top: 6px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #9ccfff;
opacity: 0.8;
}
.snake.reverse .seg.head::after {
right: auto;
left: 6px;
transform: scaleX(-1);
}
.snake.excited .seg.head {
background: linear-gradient(90deg, #17467d, #256ed1 60%, #17467d);
box-shadow: 0 0 10px rgba(100, 160, 255, 0.9);
}
/* Breadcrumbs */
.crumb {
position: absolute;
width: 10px;
height: 8px;
border-radius: 4px 4px 3px 3px;
background: linear-gradient(180deg, #e6d2a2, #c9a86e);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
opacity: 0.95;
transition: transform 0.1s;
}
.crumb.sunk {
opacity: 0;
transition: opacity 0.6s ease;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.water,
.eel,
.ticky-tape,
.warning {
animation: none !important;
}
.snake .seg {
transition: none !important;
}
}

/* ======================================
   Bubble cursor trail (amp'd in Extreme)
   ====================================== */
.bubble {
  position: fixed;
  left: 0; top: 0;                 /* positioned via left/top in JS */
  width: var(--sz, 12px);
  height: var(--sz, 12px);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.85;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(126,241,255,0.45),
      rgba(57,255,20,0.18) 60%,
      rgba(255,0,230,0.0) 70%);
  border: 2px solid rgba(126,241,255,0.6);
  filter: drop-shadow(0 2px 6px rgba(0, 200, 255, 0.35)) blur(0.2px);
  transform: translate(-50%, -50%);   /* center on cursor */
  animation:
    bubble-rise var(--dur, 1.1s) ease-out forwards,
    bubble-wobble var(--dur, 1.1s) ease-in-out;
  will-change: transform, opacity;
}

@keyframes bubble-rise {
  to {
    transform: translate(-50%, calc(-50% - var(--rise, 120px))) scale(1.1);
    opacity: 0;
  }
}
@keyframes bubble-wobble {
  0%   { offset-distance: 0%; }
  50%  { offset-distance: 50%; }
  100% { offset-distance: 100%; }
}
/* Path for wobble — browsers ignore if unsupported; harmless fallback */
.bubble {
  offset-path: path('M0,0 C var(--dx,12px),-10  calc(var(--dx,12px)*-1),-60  0,-100');
}

/* ===================================================
   The Eel Ritual – escalating corruption (clean)
   =================================================== */

/* Continuous controls driven by --ritual */
body {
  /* default for safety */
  --ritual: 0;
}

/* Stage 1+ : Uneasy Currents */
body.ritual-ge-1 .water {
  opacity: 0.35;
  filter: hue-rotate(30deg) brightness(0.9);
}

/* Stage 3+ : The Pit Listens */
body.ritual-ge-3 {
  animation: rumble calc(0.5s - min(var(--ritual),12) * 0.02s) infinite;
}
@keyframes rumble {
  0%,100% { transform: translate(0,0); }
  25% { transform: translate(1px,-2px); }
  75% { transform: translate(-2px,1px); }
}

body.ritual-ge-3 .fact::after {
  content: " • it hears you";
  color: var(--hot);
  animation: blinkText 2s infinite;
}
@keyframes blinkText { 50% { opacity: 0.4; } }

/* Stage 6+ : The Eels Remember */
body.ritual-ge-6 .tank {
  background: linear-gradient(180deg, #170012 0%, #001014 100%);
  box-shadow: inset 0 0 calc(20px + var(--ritual) * 2px) #ff0044;
}
body.ritual-ge-6 .snake .seg.head::after {
  background: #ff0044;
  box-shadow: 0 0 6px #ff0044;
}

/* Stage 9+ : The Eelpocalypse (also scale continuously with --ritual) */
body.ritual-ge-9 {
  /* deepen corruption with level */
  filter:
    hue-rotate(calc(var(--ritual) * 12deg))
    saturate(calc(1 + var(--ritual) * 0.08));
  animation: apocalypsePulse
    calc(1.4s - min(var(--ritual),12) * 0.06s) infinite;
}
@keyframes apocalypsePulse {
  0%,100% { background-color: rgba(0,0,0,0.6); }
  50%     { background-color: rgba(40,0,30,0.85); }
}

/* Optional: scale CRT scanline harshness a touch with corruption */
body.ritual-ge-6.crt:before {
  opacity: calc(0.12 + min(var(--ritual),12) * 0.01);
}

/* ======================================
   The Eyes Watch – ritual ≥ 3
   ====================================== */
.eyes-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
}

.eye{
  position: absolute;
  width: var(--sz, 32px);
  height: calc(var(--sz, 32px) * 0.6);
  left: 0; top: 0;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  opacity: var(--op, 0.85);
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.6));
}

/* sclera */
.eye .ball{
  position: absolute;
  inset: 0;
  border-radius: 50% / 40%;
  background:
    radial-gradient(circle at 55% 55%, rgba(255,255,255,.95), rgba(240,240,255,.8) 40%, rgba(200,220,255,.4) 70%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.25), transparent 60%);
  border: 2px solid rgba(126,241,255,.5);
}

/* pupil */
.eye .ball::after{
  content:'';
  position:absolute;
  left:50%; top:50%;
  width: calc(var(--sz,32px) * 0.22);
  height: calc(var(--sz,32px) * 0.22);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #050a12 0 60%, rgba(57,255,20,.8) 61% 100%);
  box-shadow: 0 0 6px rgba(57,255,20,.6);
}

/* lids */
.eye .lid{
  position:absolute;
  left:-6%;
  width:112%;
  height:55%;
  background: linear-gradient(180deg, rgba(2,20,30,.95), rgba(0,10,16,.98));
  filter: drop-shadow(0 0 8px rgba(255,0,230,.25));
  border-radius: 0 0 50% 50% / 0 0 90% 90%;
  transform-origin: top center;
  animation: blink var(--blink, 5s) infinite;
  will-change: transform, opacity;
}
.eye .lid.top{
  top:-2%;
}
.eye .lid.bottom{
  bottom:-2%;
  transform-origin: bottom center;
  border-radius: 50% 50% 0 0 / 90% 90% 0 0;
}

/* blink timing tweaked via delay per-eye in JS */
@keyframes blink{
  0%, 92%, 100% { transform: scaleY(0); }
  94% { transform: scaleY(1); }
  96% { transform: scaleY(0); }
}

/* Make it creepier as ritual climbs */
body.ritual-ge-6 .eye { --op: 0.95; }
body.ritual-ge-9 .eye .ball::after { box-shadow: 0 0 10px rgba(255,0,68,.7); }

/* ================================
   The Eye of the Pit (maelstrom core)
   ================================ */
#eyeOfPit {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: var(--pit-size, 240px);
  height: calc(var(--pit-size, 240px) * 0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  filter: drop-shadow(0 0 15px rgba(255,0,68,.7))
          drop-shadow(0 0 35px rgba(255,0,68,.5));
  transition: opacity 2s ease;
}

body.maelstrom #eyeOfPit {
  opacity: 1;
}

#eyeOfPit .ball {
  position: absolute;
  inset: 0;
  border-radius: 50% / 40%;
  background:
    radial-gradient(circle at 55% 55%, rgba(255,255,255,.95), rgba(240,240,255,.8) 40%, rgba(200,220,255,.4) 70%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.25), transparent 60%);
  border: 4px solid rgba(126,241,255,.6);
}

#eyeOfPit .ball::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 25%; height: 25%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #050a12 0 60%, rgba(255,0,68,.9) 61% 100%);
  box-shadow: 0 0 30px rgba(255,0,68,.9);
}

@keyframes pitBlink {
  0%, 94%, 100% { transform: scaleY(0); }
  96% { transform: scaleY(1); }
  98% { transform: scaleY(0); }
}

body.maelstrom #eyeOfPit .ball::after {
  animation: pitPupil 6s ease-in-out infinite;
}
@keyframes pitPupil {
  0%,100% { transform: translate(-50%,-50%) scale(1); }
  50% { transform: translate(-50%,-50%) scale(1.4); }
}