/* Cosmic Horror card: living tentacles (kraken-canvas.js) and an octopus eye. */
.kraken-canvas{position:absolute;left:50%;top:50%;width:min(760px,150vw);height:520px;transform:translate(-50%,-50%);pointer-events:none;z-index:0;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
.rare-roll-stage--cosmic_horror .rare-roll-stage-card{animation:kraken-card-arrive 1.4s cubic-bezier(.2,.8,.3,1) both,kraken-card-breathe 5s ease-in-out 1.4s infinite;filter:drop-shadow(0 0 3px #e6ffc4) drop-shadow(0 0 14px #b1ff76cc) drop-shadow(0 0 42px #8a3cb0)}
.rare-roll-stage--cosmic_horror .rare-roll-stage-card::after{content:'';position:absolute;inset:-3px;border-radius:16px;pointer-events:none;box-shadow:0 0 0 1.5px #c8ff8acc,0 0 22px 4px #a6ff6a88,inset 0 0 18px #a6ff6a55;animation:kraken-aura 2.1s ease-in-out infinite}
@keyframes kraken-aura{0%,100%{opacity:.55}12%{opacity:1}24%{opacity:.7}34%{opacity:.95}}
@keyframes kraken-card-arrive{0%{opacity:0;transform:translateY(24px) scale(.9)}100%{opacity:1;transform:none}}
@keyframes kraken-card-breathe{50%{transform:scale(1.015) rotate(-.3deg)}}
.kraken-eye{position:absolute;z-index:5;left:50%;top:-82px;width:132px;height:92px;transform:translateX(-50%);overflow:visible;filter:drop-shadow(0 0 10px #b1ff7699) drop-shadow(0 0 30px #6b2a8a);animation:kraken-eye-rise 1.2s ease-out .4s both,kraken-eye-bob 6s ease-in-out 1.6s infinite}
.kraken-eye-look{transform:translate(var(--lx,0),var(--ly,0))}
.kraken-pupil{transform-box:fill-box;transform-origin:center;animation:kraken-dilate 5.5s ease-in-out infinite}
.kraken-lid{transition:none}
.kraken-lid--upper{animation:kraken-open-up 1.4s ease-out .6s both,kraken-blink-up 7s ease-in-out 2.4s infinite}
.kraken-lid--lower{animation:kraken-open-down 1.4s ease-out .6s both,kraken-blink-down 7s ease-in-out 2.4s infinite}
@keyframes kraken-eye-rise{from{opacity:0;transform:translateX(-50%) translateY(30px) scale(.6)}to{opacity:1;transform:translateX(-50%)}}
@keyframes kraken-eye-bob{50%{transform:translateX(-50%) translateY(-5px) rotate(1.5deg)}}
@keyframes kraken-dilate{0%,100%{transform:scale(1,1)}40%{transform:scale(.55,1.5)}60%{transform:scale(1.15,.8)}}
@keyframes kraken-open-up{from{transform:translateY(38px)}to{transform:none}}
@keyframes kraken-open-down{from{transform:translateY(-38px)}to{transform:none}}
@keyframes kraken-blink-up{0%,90%,97%,100%{transform:none}93.5%{transform:translateY(38px)}}
@keyframes kraken-blink-down{0%,90%,97%,100%{transform:none}93.5%{transform:translateY(-38px)}}
.rare-roll-stage--cosmic_horror{margin-top:62px}
@media(max-width:600px){.kraken-canvas{height:400px}.kraken-eye{width:96px;height:67px;top:-60px}.rare-roll-stage--cosmic_horror{margin-top:46px}}
@media(prefers-reduced-motion:reduce){.kraken-eye,.kraken-pupil,.kraken-lid{animation:none!important}}

/* A shockwave startles the eye: the iris snaps wide and shudders. */
.kraken-eye-look{transform-box:view-box;transform-origin:60px 42px}
.kraken-eye.is-startled .kraken-eye-look{animation:kraken-startle .9s cubic-bezier(.2,.8,.3,1)}
@keyframes kraken-startle{0%{scale:1}12%{scale:1.22}30%{scale:.94}55%{scale:1.06}100%{scale:1}}

/* The page-wide shockwave layer (kraken-page-wave.js): over everything, never catches clicks. */
.kraken-page-wave{position:fixed;inset:0;width:100vw;height:100vh;z-index:60;pointer-events:none}