/* ——— Suzume: Close the Doors ——— */
:root{
  --ink:#e6efef;
  --ink-dim:#9fb4b6;
  --accent:#8df0dc;
  --accent-deep:#3ec9ae;
  --gold:#e8c98a;
  --danger:#e86a5e;
  --night:#070d18;
  --panel:rgba(7,14,24,.78);
  --hair:rgba(141,240,220,.28);
  --serif:"Cormorant Garamond","Noto Serif JP",serif;
  --jp:"Noto Serif JP",serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{background:#000;overflow:hidden;font-family:var(--serif);color:var(--ink);}

#viewport{position:fixed;inset:0;background:#000;}
#stage{
  position:absolute;left:50%;top:50%;width:1920px;height:1080px;
  transform:translate(-50%,-50%);transform-origin:center;
  background:var(--night);overflow:hidden;
}

/* ——— screens ——— */
.screen{position:absolute;inset:0;display:none;}
.screen.on{display:block;}

.bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(7,13,24,.55) 0%,rgba(7,13,24,0) 28%,rgba(7,13,24,0) 62%,rgba(7,13,24,.72) 100%);}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,transparent 55%,rgba(4,8,16,.55) 100%);}

/* Ever-After treatment */
.ever .bg{filter:saturate(1.25) hue-rotate(-12deg) brightness(.82);}
.ever-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.ever-stars i{position:absolute;width:2px;height:90px;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#cfeee6 60%,#fff);
  opacity:0;transform:rotate(24deg);animation:fallstar 3.6s linear infinite;}
@keyframes fallstar{
  0%{opacity:0;transform:rotate(24deg) translateY(-140px);}
  12%{opacity:.9;}
  70%{opacity:.7;}
  100%{opacity:0;transform:rotate(24deg) translateY(760px);}
}

/* ——— shared type ——— */
.kicker{font-size:24px;letter-spacing:.55em;text-transform:uppercase;color:var(--accent);font-weight:500;}
.jp{font-family:var(--jp);letter-spacing:.5em;color:var(--ink-dim);font-size:23px;}
h1.big{font-size:104px;font-weight:500;letter-spacing:.16em;line-height:1.05;text-transform:uppercase;
  text-shadow:0 4px 40px rgba(0,0,0,.6);}
.quote{font-size:38px;font-style:italic;color:var(--ink);line-height:1.5;}

/* door open animation */
#door-anim{position:absolute;transform:translate(-50%,-50%);z-index:25;display:none;perspective:1400px;}
.da-rays{position:absolute;inset:-60%;opacity:0;transition:opacity 1.3s ease .45s;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,247,224,.16) 0deg 2.4deg,transparent 2.4deg 10deg);
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 4%,transparent 56%);
  mask:radial-gradient(circle at 50% 50%,#000 4%,transparent 56%);
  mix-blend-mode:screen;animation:rayspin 32s linear infinite;}
#door-anim.open .da-rays{opacity:.7;}
@keyframes rayspin{to{transform:rotate(360deg);}}
.da-frame{position:absolute;inset:0;border-radius:7px;overflow:hidden;
  background:linear-gradient(150deg,#b9ac90,#857a5f);
  box-shadow:0 0 0 3px rgba(58,46,30,.6),0 26px 64px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.15);
  transition:box-shadow 1s ease;}
#door-anim.open .da-frame{box-shadow:0 0 0 3px rgba(58,46,30,.6),0 26px 64px rgba(0,0,0,.55),0 0 80px rgba(141,240,220,.5);}
.da-portal{position:absolute;inset:6%;border-radius:3px;overflow:hidden;opacity:0;transition:opacity 1.1s ease .35s;background:#0a1230;}
#door-anim.open .da-portal{opacity:1;}
.da-portal .sky{position:absolute;inset:-14%;background:url('../assets/bg-mountain.png') 35% 22%/330% auto no-repeat;
  filter:saturate(1.4) brightness(1.12);animation:skydrift 18s ease-in-out infinite alternate;}
@keyframes skydrift{from{transform:scale(1) translateY(0);}to{transform:scale(1.14) translateY(-3%);}}
.da-portal .tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,50,100,.12),rgba(141,240,220,.22));mix-blend-mode:screen;}
.da-portal .twinkle{position:absolute;inset:0;animation:twinkle 2.6s ease-in-out infinite;background:
  radial-gradient(circle at 22% 18%,#fff 0 1.6px,transparent 3.4px),
  radial-gradient(circle at 68% 12%,#fff 0 1.3px,transparent 3px),
  radial-gradient(circle at 45% 34%,#fff 0 1.8px,transparent 3.6px),
  radial-gradient(circle at 80% 42%,#fff 0 1.2px,transparent 2.8px),
  radial-gradient(circle at 30% 56%,#fff 0 1.5px,transparent 3.2px),
  radial-gradient(circle at 62% 70%,#fff 0 1.7px,transparent 3.4px),
  radial-gradient(circle at 18% 82%,#fff 0 1.2px,transparent 2.8px),
  radial-gradient(circle at 86% 86%,#fff 0 1.4px,transparent 3px);}
@keyframes twinkle{0%,100%{opacity:.35;}50%{opacity:1;}}
.da-portal .twinkle.t2{animation-delay:1.3s;animation-duration:3.4s;background:
  radial-gradient(circle at 38% 14%,#cfeee6 0 1.4px,transparent 3px),
  radial-gradient(circle at 12% 38%,#cfeee6 0 1.6px,transparent 3.4px),
  radial-gradient(circle at 74% 28%,#cfeee6 0 1.2px,transparent 2.8px),
  radial-gradient(circle at 52% 52%,#cfeee6 0 1.8px,transparent 3.6px),
  radial-gradient(circle at 88% 64%,#cfeee6 0 1.3px,transparent 3px),
  radial-gradient(circle at 40% 78%,#cfeee6 0 1.5px,transparent 3.2px);}
.da-light{position:absolute;inset:-8%;border-radius:12px;opacity:0;transition:opacity 1.2s ease .5s;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,250,235,.55),rgba(141,240,220,.32) 48%,transparent 74%);}
#door-anim.open .da-light{opacity:1;}
.da-leaf{position:absolute;inset:6%;transform-origin:left center;transform:rotateY(0deg);
  transition:transform 1.5s cubic-bezier(.62,0,.28,1);border-radius:3px;overflow:hidden;
  background:#d8d2c4 url('../assets/door-real.png') center/100% 100% no-repeat;
  box-shadow:inset 0 0 0 1px rgba(120,108,84,.4),7px 12px 34px rgba(0,0,0,.5),inset -10px 0 26px rgba(0,0,0,.3);}
#door-anim.open .da-leaf{transform:rotateY(-115deg);}
#door-anim.shut .da-leaf{transition:transform .55s cubic-bezier(.7,0,.9,1);}
.da-leaf .pane{display:none;}
.da-knob{display:none;}
.da-sparks i{position:absolute;bottom:12%;width:5px;height:5px;border-radius:50%;background:#fff;opacity:0;}
.da-sparks i:nth-child(1){left:18%;}
.da-sparks i:nth-child(2){left:38%;}
.da-sparks i:nth-child(3){left:55%;}
.da-sparks i:nth-child(4){left:70%;}
.da-sparks i:nth-child(5){left:86%;}
#door-anim.open .da-sparks i{animation:sparkrise 2.1s ease-out infinite;}
#door-anim.open .da-sparks i:nth-child(2){animation-delay:.5s;}
#door-anim.open .da-sparks i:nth-child(3){animation-delay:1s;}
#door-anim.open .da-sparks i:nth-child(4){animation-delay:.3s;}
#door-anim.open .da-sparks i:nth-child(5){animation-delay:.8s;}
@keyframes sparkrise{0%{opacity:0;transform:translateY(0) scale(.6);}14%{opacity:.95;}100%{opacity:0;transform:translateY(-240px) scale(1.15);}}

.mascot{width:60px;height:60px;animation:mbob 3s ease-in-out infinite;filter:drop-shadow(0 0 14px rgba(255,255,255,.35));}
@keyframes mbob{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-6px) rotate(2deg);}}

/* difficulty pill */
.diff{display:inline-block;font-size:.62em;letter-spacing:.25em;padding:3px 13px 2px;border-radius:999px;
  border:1px solid currentColor;vertical-align:middle;margin-left:6px;}
.diff.low{color:#8df0dc;} .diff.med{color:#e8c98a;} .diff.hard{color:#e86a5e;}

/* runner game */
.run-field{position:absolute;inset:0;overflow:hidden;cursor:pointer;}
.run-ground{position:absolute;left:0;right:0;bottom:0;height:96px;
  background:linear-gradient(180deg,rgba(141,240,220,.10),rgba(7,14,24,.55));
  border-top:2px solid rgba(141,240,220,.45);box-shadow:0 -12px 44px rgba(141,240,220,.14);}
.run-ground::before{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(141,240,220,.12) 0 2px,transparent 2px 46px);}
.run-chair{position:absolute;left:150px;bottom:96px;width:78px;height:96px;transform-origin:50% 100%;will-change:transform;}
.run-chair svg{width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));}
.run-chair.hit svg{animation:chairhit .4s ease;}
@keyframes chairhit{0%,100%{filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));}30%{filter:drop-shadow(0 0 16px rgba(232,106,94,.95)) brightness(1.35) saturate(1.4);}}
.run-obs{position:absolute;bottom:96px;border-radius:7px 7px 2px 2px;
  background:linear-gradient(180deg,#5a3b2c,#2e1a10);border:1px solid rgba(232,106,94,.55);
  box-shadow:0 0 20px rgba(232,106,94,.3),inset 0 0 14px rgba(0,0,0,.4);}
.run-obs::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.6;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 6px,transparent 6px 13px);}
.run-obs.tall{background:linear-gradient(180deg,#6a4636,#231007);border-color:rgba(232,106,94,.6);}
.run-obs.bird{background:none;border:none;box-shadow:none;animation:birdbob 1.1s ease-in-out infinite;}
.run-obs.bird::before{display:none;}
.run-obs.bird svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));}
@keyframes birdbob{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

/* cat race */
.race-field{position:absolute;inset:0;overflow:hidden;cursor:pointer;}
.race-track{position:absolute;inset:7% 4% 9% 4%;border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,rgba(141,240,220,.06),rgba(7,14,24,.42));
  border:1px solid rgba(141,240,220,.18);}
.race-lane{position:absolute;left:0;right:0;height:23%;}
.race-lane::before{content:"";position:absolute;left:1%;right:10%;top:64%;height:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.15) 0 20px,transparent 20px 38px);}
.race-finish{position:absolute;right:4%;top:3%;bottom:3%;width:16px;border-radius:3px;z-index:2;
  background:repeating-linear-gradient(180deg,#eae3d6 0 13px,#2e2620 13px 26px);
  box-shadow:0 0 22px rgba(141,240,220,.45);}
.race-cat{position:absolute;left:3%;bottom:8%;width:64px;height:64px;transform:translateX(-50%);transition:left .06s linear;}
.race-cat svg{width:100%;height:100%;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));}
.race-cat.me{width:80px;height:80px;}
.race-cat.me::after{content:"YOU";position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  font-size:13px;letter-spacing:.22em;color:var(--accent);text-shadow:0 1px 4px #000;}
.race-cat .dust{position:absolute;left:-6px;bottom:6px;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.5),transparent 70%);opacity:0;}
.race-cat.run .dust{animation:racedust .4s linear infinite;}
@keyframes racedust{0%{opacity:.5;transform:translateX(0) scale(.6);}100%{opacity:0;transform:translateX(-26px) scale(1.2);}}
.race-cat.run{animation:catrun .26s ease-in-out infinite;}
@keyframes catrun{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-6px);}}
.race-cat.bound{animation:catboundr .28s ease;}
@keyframes catboundr{0%,100%{transform:translateX(-50%) translateY(0) scaleY(1);}40%{transform:translateX(-50%) translateY(-13px) scaleY(1.08);}}
.race-flag{position:absolute;left:50%;top:40%;transform:translateX(-50%);
  font-size:30px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);
  text-shadow:0 2px 14px #000;transition:opacity .4s;pointer-events:none;animation:aurapulse 1.4s ease-in-out infinite;}

/* cutscene */
#cutscene{position:absolute;inset:0;z-index:70;display:none;background:#03060c;
  flex-direction:column;align-items:center;justify-content:center;gap:30px;}
#cutscene.on{display:flex;}
.cs-frame{width:1280px;aspect-ratio:16/9;border:1px solid var(--hair);
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 60px rgba(141,240,220,.12);background:#000;}
.cs-frame iframe,.cs-frame video{width:100%;height:100%;border:0;object-fit:cover;display:block;}
.videoframe video{width:100%;height:100%;display:block;object-fit:cover;background:#000;}
.cs-bar{display:flex;align-items:center;gap:46px;width:1280px;}
.cs-cap{flex:1;font-size:25px;font-style:italic;color:var(--ink-dim);line-height:1.5;}

/* ——— buttons ——— */
.btn{
  font-family:var(--serif);font-size:26px;letter-spacing:.35em;text-transform:uppercase;
  color:var(--ink);background:rgba(141,240,220,.08);border:1px solid var(--hair);
  padding:22px 54px 20px 60px;cursor:pointer;transition:all .25s ease;border-radius:999px;
}
.btn:hover{background:rgba(141,240,220,.18);border-color:var(--accent);color:#fff;
  box-shadow:0 0 34px rgba(141,240,220,.25);}
.btn.primary{border-color:var(--accent);color:var(--accent);}
.btn.primary:hover{color:#06231d;background:var(--accent);}
.btn.ghost{border-color:rgba(230,239,239,.25);font-size:21px;padding:16px 36px 14px 42px;color:var(--ink-dim);}
.btn.ghost:hover{color:var(--ink);background:rgba(230,239,239,.08);box-shadow:none;}

/* ——— title screen ——— */
#screen-title .inner{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:30px;text-align:center;}
#screen-title .titlecard{display:flex;flex-direction:column;gap:18px;align-items:center;
  padding:70px 110px;background:rgba(5,10,19,.45);border:1px solid rgba(141,240,220,.16);
  backdrop-filter:blur(3px);border-radius:24px;}
#screen-title .actions{display:flex;gap:26px;margin-top:26px;}
.title-foot{position:absolute;bottom:34px;width:100%;display:flex;justify-content:center;
  font-size:19px;letter-spacing:.3em;color:rgba(230,239,239,.5);text-transform:uppercase;}

/* ——— level scene ——— */
.hud{position:absolute;top:0;left:0;right:0;padding:36px 48px;display:flex;
  justify-content:space-between;align-items:flex-start;z-index:30;pointer-events:none;}
.hud .left,.hud .right{display:flex;flex-direction:column;gap:14px;}
.hud .right{align-items:flex-end;pointer-events:auto;}
.hud-loc{font-size:30px;letter-spacing:.28em;text-transform:uppercase;text-shadow:0 2px 18px rgba(0,0,0,.8);}
.hud-jp{font-family:var(--jp);font-size:19px;letter-spacing:.45em;color:var(--accent);}
.charms{display:flex;gap:10px;margin-top:6px;}
.charm{width:26px;height:38px;border:1px solid var(--gold);border-radius:3px 3px 6px 6px;
  background:linear-gradient(180deg,rgba(232,201,138,.30),rgba(232,201,138,.08));position:relative;transition:all .4s;}
.charm::after{content:"♡";position:absolute;top:4px;left:50%;transform:translateX(-50%);
  font-size:15px;line-height:1;color:rgba(7,13,24,.75);}
.charm.spent{opacity:.18;filter:grayscale(1);transform:translateY(4px);}
.iconbtn{pointer-events:auto;background:rgba(7,14,24,.55);border:1px solid rgba(230,239,239,.22);
  color:var(--ink-dim);font-family:var(--serif);font-size:17px;letter-spacing:.3em;text-transform:uppercase;
  padding:10px 20px 8px 24px;cursor:pointer;transition:all .2s;border-radius:999px;}
.iconbtn:hover{color:var(--ink);border-color:var(--accent);}

.progress-doors{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  display:flex;gap:18px;z-index:30;}
.pdoor{width:30px;height:48px;border:1px solid rgba(230,239,239,.35);border-radius:2px;
  background:rgba(7,14,24,.4);position:relative;transition:all .5s;}
.pdoor.locked{border-color:var(--accent);background:rgba(141,240,220,.18);
  box-shadow:0 0 18px rgba(141,240,220,.35);}
.pdoor.now{border-color:var(--gold);box-shadow:0 0 14px rgba(232,201,138,.4);}
.pdoor.locked::after{content:"";position:absolute;inset:8px 6px;border:1px solid rgba(141,240,220,.6);}

/* door hotspot */
.door-hotspot{position:absolute;transform:translate(-50%,-50%);cursor:pointer;z-index:20;
  display:flex;align-items:center;justify-content:center;}
.door-aura{position:absolute;inset:-18%;border-radius:50% 50% 40% 40%;
  background:radial-gradient(ellipse at center,rgba(141,240,220,.28) 0%,rgba(141,240,220,.10) 45%,transparent 72%);
  animation:aurapulse 2.6s ease-in-out infinite;}
@keyframes aurapulse{0%,100%{opacity:.55;transform:scale(.96);}50%{opacity:1;transform:scale(1.05);}}
.door-edge{position:absolute;inset:0;border:2px solid rgba(141,240,220,.55);border-radius:3px;
  box-shadow:0 0 26px rgba(141,240,220,.5),inset 0 0 26px rgba(141,240,220,.25);
  animation:edgepulse 2.6s ease-in-out infinite;}
@keyframes edgepulse{0%,100%{opacity:.35;}50%{opacity:.9;}}
.door-hint{position:absolute;top:104%;left:50%;white-space:nowrap;
  font-size:21px;letter-spacing:.4em;text-transform:uppercase;color:var(--accent);
  text-shadow:0 2px 14px rgba(0,0,0,.9);animation:hintbob 2.2s ease-in-out infinite;}
@keyframes hintbob{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-7px);}}
.door-hotspot:hover .door-edge{opacity:1;animation:none;}

/* brief card */
.card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:40;
  width:880px;padding:64px 72px;text-align:center;background:var(--panel);
  border:1px solid var(--hair);backdrop-filter:blur(6px);border-radius:20px;
  display:flex;flex-direction:column;gap:24px;align-items:center;
}
.card .lvl{font-size:21px;letter-spacing:.55em;color:var(--gold);text-transform:uppercase;}
.card h2{font-size:58px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;}
.card p{font-size:27px;line-height:1.6;color:var(--ink-dim);font-style:italic;max-width:660px;}
.card .btn{margin-top:10px;}

/* ——— minigame overlay ——— */
#mg-overlay{position:absolute;inset:0;z-index:50;display:none;background:rgba(4,8,16,.55);}
#mg-overlay.on{display:block;}
#mg-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:1280px;height:820px;background:var(--panel);border:1px solid var(--hair);
  backdrop-filter:blur(8px);display:flex;flex-direction:column;overflow:hidden;border-radius:20px;}
#mg-head{display:flex;justify-content:space-between;align-items:baseline;
  padding:30px 44px 22px;border-bottom:1px solid rgba(141,240,220,.14);}
#mg-title{font-size:34px;letter-spacing:.22em;text-transform:uppercase;}
#mg-stat{font-size:25px;color:var(--gold);letter-spacing:.12em;font-variant-numeric:tabular-nums;}
#mg-body{position:relative;flex:1;}
#mg-instr{padding:14px 44px;font-size:22px;font-style:italic;color:var(--ink-dim);
  border-top:1px solid rgba(141,240,220,.1);text-align:center;letter-spacing:.04em;}

/* voices (simon) */
.wisp-field{position:absolute;inset:0;}
.wisp{position:absolute;width:120px;height:120px;border-radius:50%;cursor:pointer;
  transform:translate(-50%,-50%);transition:transform .15s;
  background:radial-gradient(circle at 42% 38%,rgba(255,255,255,.85) 0%,rgba(141,240,220,.5) 28%,rgba(141,240,220,.10) 62%,transparent 75%);
  opacity:.34;filter:saturate(.7);}
.wisp:hover{transform:translate(-50%,-50%) scale(1.07);}
.wisp.lit{opacity:1;filter:saturate(1.4) brightness(1.35);
  box-shadow:0 0 60px rgba(141,240,220,.65);}
.wisp.err{background:radial-gradient(circle at 42% 38%,#fff 0%,rgba(232,106,94,.6) 30%,transparent 72%);opacity:1;}
.mg-center-note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:30px;letter-spacing:.35em;text-transform:uppercase;color:var(--ink-dim);
  pointer-events:none;text-align:center;line-height:2;}

/* daijin */
.cat-field{position:absolute;inset:0;cursor:crosshair;}
.cat{position:absolute;width:120px;height:120px;transform:translate(-50%,-50%) scale(.4);cursor:pointer;
  opacity:0;transition:transform .18s ease,opacity .18s ease;}
.cat.in{opacity:1;transform:translate(-50%,-50%) scale(1);}
.cat svg{width:100%;height:100%;filter:drop-shadow(0 0 18px rgba(255,255,255,.55));}
.cat.shadow svg{filter:drop-shadow(0 0 16px rgba(120,40,160,.8));}
.cat .glowring{position:absolute;inset:-12%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22) 0%,transparent 65%);}
.cat.shadow .glowring{background:radial-gradient(circle,rgba(150,60,200,.25) 0%,transparent 65%);}

/* hold the door */
.hold-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:90px;}
.hold-door{width:240px;height:460px;border:3px solid #cfd8d6;border-radius:4px;position:relative;
  background:linear-gradient(160deg,#e8e3d8,#cfc6b4);box-shadow:0 0 60px rgba(232,106,94,0);}
.hold-door .panel{position:absolute;border:2px solid rgba(90,84,70,.45);border-radius:2px;}
.hold-door .knob{position:absolute;right:16px;top:50%;width:16px;height:16px;border-radius:50%;background:#7a6a4a;}
.hold-door.strain{animation:doorshake .12s linear infinite;}
@keyframes doorshake{0%{transform:translate(0,0) rotate(0);}25%{transform:translate(-3px,1px) rotate(-.4deg);}
  50%{transform:translate(2px,-2px) rotate(.3deg);}75%{transform:translate(-2px,2px) rotate(-.2deg);}100%{transform:translate(3px,-1px) rotate(.4deg);}}
.worm-glow{position:absolute;inset:-6px;border-radius:8px;pointer-events:none;
  box-shadow:0 0 0 rgba(232,106,94,0);transition:box-shadow .2s;}
.gauge{width:90px;height:520px;border:1px solid var(--hair);position:relative;background:rgba(7,14,24,.6);}
.gauge .band{position:absolute;left:0;right:0;background:rgba(141,240,220,.18);
  border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);}
.gauge .needle{position:absolute;left:-12px;right:-12px;height:4px;background:var(--gold);
  box-shadow:0 0 12px rgba(232,201,138,.8);}
.gauge .needle.out{background:var(--danger);box-shadow:0 0 14px rgba(232,106,94,.9);}
.hold-side{display:flex;flex-direction:column;gap:22px;align-items:center;width:300px;}
.hold-big{font-size:88px;font-variant-numeric:tabular-nums;letter-spacing:.06em;}
.hold-note{font-size:22px;color:var(--ink-dim);font-style:italic;text-align:center;line-height:1.6;}
.hold-key{font-size:20px;letter-spacing:.35em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--hair);padding:14px 26px;}

/* wisp faces (cute) */
.wisp .wface{position:absolute;inset:26%;opacity:.5;transition:opacity .2s;}
.wisp.lit .wface{opacity:1;}
.wisp.pop{animation:wisppop .32s ease;}
@keyframes wisppop{0%{transform:translate(-50%,-50%) scale(1);}45%{transform:translate(-50%,-50%) scale(1.16);}100%{transform:translate(-50%,-50%) scale(1);}}

/* words of closing */
.words-field{position:absolute;inset:0;}
.word-tile{position:absolute;transform:translate(-50%,-50%);cursor:pointer;
  font-size:27px;font-style:italic;letter-spacing:.05em;padding:18px 34px;white-space:nowrap;
  background:rgba(7,14,24,.72);border:1px solid rgba(230,239,239,.3);transition:all .2s;}
.word-tile:hover{border-color:var(--accent);color:#fff;}
.word-tile.got{opacity:0;pointer-events:none;transform:translate(-50%,-90%);}
.word-tile.err{border-color:var(--danger);color:var(--danger);}
.chant-preview{position:absolute;inset:0;display:flex;flex-direction:column;gap:16px;
  align-items:center;justify-content:center;text-align:center;}
.chant-preview .line{font-size:34px;font-style:italic;line-height:1.5;}
.chant-preview .count{font-size:24px;letter-spacing:.4em;color:var(--gold);margin-top:18px;}

/* finale */
.finale-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:80px;}
.ringbox{position:relative;width:480px;height:480px;}
.ringbox svg{width:100%;height:100%;}
.finale-side{width:380px;display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center;}
.finale-stage{font-size:21px;letter-spacing:.5em;color:var(--gold);text-transform:uppercase;}
.finale-note{font-size:24px;color:var(--ink-dim);font-style:italic;line-height:1.7;}
.mash-meter{width:340px;height:18px;border:1px solid var(--hair);background:rgba(7,14,24,.6);}
.mash-meter i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--accent-deep),var(--accent));
  box-shadow:0 0 14px rgba(141,240,220,.5);transition:width .08s linear;}
.shake-sm{animation:doorshake .14s linear infinite;}
.shake-lg{animation:doorshake .07s linear infinite;}

/* lock stamp */#lock-flash{position:absolute;inset:0;z-index:60;background:#eaf6f2;opacity:0;pointer-events:none;}
#lock-stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1.6);z-index:61;
  opacity:0;pointer-events:none;text-align:center;display:flex;flex-direction:column;gap:18px;align-items:center;}
#lock-stamp .big{font-size:74px;letter-spacing:.4em;text-transform:uppercase;color:var(--accent);
  text-shadow:0 0 40px rgba(141,240,220,.8);}
#lock-stamp .jp{font-size:26px;}
#lock-stamp.go{animation:stampin 1.4s ease forwards;}
@keyframes stampin{0%{opacity:0;transform:translate(-50%,-50%) scale(1.6);}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  80%{opacity:1;}100%{opacity:0;transform:translate(-50%,-50%) scale(.98);}}

/* fail card */
.fail-tint{position:absolute;inset:0;z-index:45;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(ellipse at 50% 50%,rgba(232,106,94,.18),rgba(120,20,30,.4));}
.fail-tint.on{opacity:1;}

/* ——— victory ——— */
#screen-victory .inner{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:34px;text-align:center;z-index:5;}
#screen-victory .videoframe{width:1060px;aspect-ratio:16/9;border:1px solid var(--hair);
  box-shadow:0 30px 90px rgba(0,0,0,.6);background:#000;}
#screen-victory iframe{width:100%;height:100%;border:0;}

/* video modal */
#video-modal{position:absolute;inset:0;z-index:80;display:none;background:rgba(3,6,12,.85);}
#video-modal.on{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:26px;}
#video-modal .videoframe{width:1280px;aspect-ratio:16/9;border:1px solid var(--hair);background:#000;}
#video-modal iframe{width:100%;height:100%;border:0;}

/* transitions */
.fade-in{animation:fadein .8s ease both;}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both;}
@keyframes rise{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}
.card.crise{animation:cardrise .7s cubic-bezier(.2,.7,.2,1) both;}
@keyframes cardrise{from{opacity:0;transform:translate(-50%,-46%);}to{opacity:1;transform:translate(-50%,-50%);}}

/* ——— cat race v2 (lane runner) ——— */
.race2{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;}
.r2-top{padding:16px 32px 8px;}
.r2-names{display:flex;justify-content:space-between;font-size:18px;letter-spacing:.22em;}
.r2-names .you{color:var(--accent);} .r2-names .riv{color:var(--danger);}
.r2-bar{position:relative;height:12px;margin-top:9px;border:1px solid var(--hair);border-radius:999px;background:rgba(7,14,24,.5);}
.r2-bar .mk{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);transition:left .12s linear;}
.r2-bar .mk.you{background:var(--accent);box-shadow:0 0 12px var(--accent);z-index:2;}
.r2-bar .mk.riv{background:var(--danger);box-shadow:0 0 12px var(--danger);}
.r2-bar::after{content:"";position:absolute;right:-2px;top:-7px;bottom:-7px;width:3px;background:var(--gold);border-radius:2px;}
.r2-track{position:relative;flex:1;margin:8px 24px 22px;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,rgba(141,240,220,.05),rgba(7,14,24,.42));border:1px solid rgba(141,240,220,.16);}
.r2-track.hit{animation:doorshake .3s linear;}
.r2-line{position:absolute;left:0;right:0;height:1px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 22px,transparent 22px 40px);}
.r2-cat{position:absolute;left:16%;top:50%;width:74px;height:74px;transform:translate(-50%,-50%);transition:top .1s linear;}
.r2-cat svg{width:100%;height:100%;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));animation:catrun .26s ease-in-out infinite;}
.r2-cat.pop svg{animation:catboundr .3s ease;}
.r2-cat .r2-trail{position:absolute;right:62%;top:52%;width:34px;height:9px;border-radius:6px;
  background:linear-gradient(90deg,transparent,rgba(141,240,220,.5));}
.r2-item{position:absolute;width:48px;height:42px;transform:translate(-50%,-50%);}
.r2-item svg{width:100%;height:100%;}
.r2-fish svg{filter:drop-shadow(0 0 10px rgba(141,240,220,.6));}
.r2-item.got{transition:transform .2s,opacity .2s;transform:translate(-50%,-100%) scale(1.4);opacity:0;}
.r2-flag{position:absolute;left:50%;top:46%;transform:translateX(-50%);white-space:nowrap;
  font-size:23px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);text-shadow:0 2px 12px #000;
  transition:opacity .4s;pointer-events:none;animation:aurapulse 1.6s ease-in-out infinite;}

/* ——— the worm · boss fight ——— */
.boss{position:absolute;inset:0;overflow:hidden;}
.boss.shk{animation:doorshake .3s linear;}
.boss-hpwrap{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:60%;text-align:center;}
.boss-hpwrap span{font-size:16px;letter-spacing:.4em;color:var(--danger);text-transform:uppercase;}
.boss-hp{margin-top:6px;height:12px;border:1px solid rgba(232,106,94,.5);border-radius:999px;background:rgba(7,14,24,.6);overflow:hidden;}
.boss-hp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#7a1530,#e8434f,#ff8a5a);transition:width .25s;}
.boss-worm{position:absolute;top:9%;left:50%;transform:translateX(-50%);width:44%;filter:drop-shadow(0 0 26px rgba(232,67,79,.6));}
.boss-worm svg{width:100%;display:block;animation:wormwrithe 2.4s ease-in-out infinite;}
@keyframes wormwrithe{0%,100%{transform:translateX(0) rotate(-1.5deg) scaleY(1);}50%{transform:translateX(12px) rotate(1.5deg) scaleY(1.05);}}
.boss-worm.hurt{animation:wormhurt .25s linear;}
@keyframes wormhurt{0%,100%{filter:drop-shadow(0 0 26px rgba(232,67,79,.6));}50%{filter:drop-shadow(0 0 42px #fff) brightness(2.2);}}
.boss-worm.dead{transition:opacity 1.2s,transform 1.2s;opacity:0;transform:translateX(-50%) scale(.6) translateY(-30px);}
.boss-orb{position:absolute;width:34px;height:34px;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 40% 35%,#fff,#ff8a5a 40%,#e8434f 72%,transparent 82%);
  box-shadow:0 0 20px rgba(232,67,79,.8);}
.boss-orb.near{box-shadow:0 0 32px rgba(141,240,220,.95);}
.boss-orb.parried{transition:transform .2s,opacity .2s;transform:translate(-50%,-50%) scale(1.9);opacity:0;
  background:radial-gradient(circle,#fff,rgba(141,240,220,.7) 50%,transparent 78%);}
.boss-orb.miss{transition:opacity .2s;opacity:0;}
.boss-ring{position:absolute;left:50%;top:80%;width:122px;height:122px;border-radius:50%;transform:translate(-50%,-50%);
  border:3px solid rgba(141,240,220,.5);box-shadow:0 0 18px rgba(141,240,220,.3),inset 0 0 18px rgba(141,240,220,.2);transition:opacity .5s;}
.boss-ring.hot{border-color:var(--accent);box-shadow:0 0 36px rgba(141,240,220,.75),inset 0 0 22px rgba(141,240,220,.45);}
.boss-ring.whiff{animation:doorshake .2s linear;}
.bring-core{position:absolute;inset:35%;border-radius:50%;background:rgba(141,240,220,.18);}
.boss-hearts{position:absolute;top:20px;right:30px;display:flex;gap:9px;}
.boss-hearts span{width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(45deg);}
.boss-hearts span.on{background:var(--danger);box-shadow:0 0 12px rgba(232,106,94,.6);}
.boss-hearts span.off{background:rgba(232,106,94,.18);}
.boss-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 80%,rgba(141,240,220,.35),transparent 60%);}
.boss-flash.go{animation:bflash .4s ease;}
@keyframes bflash{0%{opacity:.9;}100%{opacity:0;}}
.boss-key{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) scale(.4);width:90px;opacity:0;pointer-events:none;}
.boss-key svg{width:100%;filter:drop-shadow(0 0 22px rgba(232,201,138,.8));}
.boss-key.show{opacity:1;transform:translate(-50%,-50%) scale(1);
  transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1);animation:keyfloat 2s ease-in-out infinite .6s;cursor:pointer;pointer-events:auto;}
@keyframes keyfloat{0%,100%{margin-top:0;}50%{margin-top:-12px;}}
.boss-key.grabbed{transition:transform .6s,opacity .6s;transform:translate(-50%,-170%) scale(.7);opacity:0;}
.boss-msg{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);text-align:center;
  font-size:24px;font-style:italic;color:var(--ink);text-shadow:0 2px 12px #000;max-width:80%;}
.boss-meter{position:absolute;left:50%;bottom:17%;transform:translateX(-50%);width:340px;height:16px;
  border:1px solid var(--hair);border-radius:999px;background:rgba(7,14,24,.6);overflow:hidden;}
.boss-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent-deep),var(--accent));box-shadow:0 0 14px rgba(141,240,220,.5);}

/* victory summary */
.victory-shell{display:flex;flex-direction:column;align-items:center;gap:24px;padding:34px 48px 18px;
  background:rgba(5,10,19,.38);border:1px solid rgba(141,240,220,.16);border-radius:28px;backdrop-filter:blur(4px);}
.victory-copy{max-width:920px;font-size:24px;line-height:1.7;color:var(--ink-dim);font-style:italic;}
.victory-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:min(100%,980px);}
.victory-stat{padding:20px 18px 18px;border:1px solid rgba(141,240,220,.16);border-radius:18px;
  background:rgba(7,14,24,.48);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);}
.victory-stat strong{display:block;font-size:42px;letter-spacing:.08em;color:var(--accent);}
.victory-stat span{display:block;margin-top:8px;font-size:16px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-dim);}

/* daijin among shadows */
.hunt-field{position:absolute;inset:0;overflow:hidden;}
.hunt-stage{position:absolute;inset:26px 28px 24px;border-radius:18px;
  background:radial-gradient(circle at 50% 32%,rgba(141,240,220,.06),rgba(7,14,24,.32) 62%,rgba(7,14,24,.58));
  border:1px solid rgba(141,240,220,.10);overflow:hidden;cursor:crosshair;}
.hunt-field.shake{animation:doorshake .22s linear;}
.hunt-cat{position:absolute;transform:translate(-50%,-50%) scale(.45);opacity:0;border:0;background:none;padding:0;cursor:pointer;
  transition:transform .16s ease,opacity .16s ease,filter .16s ease;}
.hunt-cat.in{opacity:1;transform:translate(-50%,-50%) scale(1);}
.hunt-cat svg{width:100%;height:100%;filter:drop-shadow(0 0 18px rgba(255,255,255,.55));}
.hunt-cat .glowring{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22) 0%,transparent 65%);}
.hunt-cat.shadow svg{filter:drop-shadow(0 0 16px rgba(120,40,160,.85));}
.hunt-cat.shadow .glowring{background:radial-gradient(circle,rgba(156,95,208,.32) 0%,transparent 65%);}
.hunt-cat:hover{transform:translate(-50%,-50%) scale(1.08);}
.hunt-cat.got{opacity:0;transform:translate(-50%,-110%) scale(1.22);}
.hunt-cat.bad{filter:brightness(1.35) saturate(1.4);}
.hunt-burst{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);padding:12px 20px;border-radius:999px;
  background:rgba(7,14,24,.75);border:1px solid rgba(141,240,220,.14);font-size:18px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--ink-dim);opacity:0;pointer-events:none;}
.hunt-burst.show{animation:huntburst .65s ease;}
.hunt-burst.good{color:var(--accent);border-color:rgba(141,240,220,.32);}
.hunt-burst.bad{color:var(--danger);border-color:rgba(232,106,94,.32);}
@keyframes huntburst{0%{opacity:0;transform:translateX(-50%) translateY(10px);}25%{opacity:1;}100%{opacity:0;transform:translateX(-50%) translateY(-10px);}}

/* upgraded race */
.r2-charge{margin-top:12px;height:10px;border-radius:999px;border:1px solid rgba(141,240,220,.18);background:rgba(7,14,24,.55);overflow:hidden;}
.r2-charge i{display:block;height:100%;width:0;background:linear-gradient(90deg,#427f8f,var(--accent));box-shadow:0 0 12px rgba(141,240,220,.45);transition:width .14s linear;}
.rush .r2-track{background:
  linear-gradient(180deg,rgba(141,240,220,.09),rgba(7,14,24,.48)),
  radial-gradient(circle at 16% 24%,rgba(141,240,220,.08),transparent 34%),
  radial-gradient(circle at 76% 72%,rgba(255,255,255,.05),transparent 30%);
  border-color:rgba(141,240,220,.24);}
.r2-track.burst{box-shadow:0 0 34px rgba(141,240,220,.26), inset 0 0 28px rgba(141,240,220,.08);}
.r2-alert{position:absolute;left:50%;top:14%;transform:translateX(-50%);padding:12px 18px;border-radius:999px;
  background:rgba(7,14,24,.72);border:1px solid rgba(141,240,220,.12);font-size:16px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-dim);opacity:0;pointer-events:none;white-space:nowrap;}
.r2-alert.show{animation:r2alert .8s ease;}
.r2-alert.good{color:var(--accent);}
.r2-alert.bad{color:var(--danger);}
@keyframes r2alert{0%{opacity:0;transform:translateX(-50%) translateY(12px);}20%{opacity:1;}100%{opacity:0;transform:translateX(-50%) translateY(-10px);}}
.r2-item{width:54px;height:48px;}
.r2-item svg{display:block;}
.r2-fish svg{filter:drop-shadow(0 0 12px rgba(141,240,220,.62));}
.r2-eddy svg{filter:drop-shadow(0 0 12px rgba(156,198,255,.42));animation:eddyspin 1.2s linear infinite;}
@keyframes eddyspin{to{transform:rotate(360deg);}}
.r2-lantern svg{filter:drop-shadow(0 0 14px rgba(255,217,140,.52));}
.r2-gate{width:84px;transform:translate(-50%,-50%);display:flex;align-items:stretch;justify-content:space-between;padding:0 8px;}
.r2-gate span{display:block;width:26px;height:100%;border-radius:8px;background:linear-gradient(180deg,#6a4636,#2e1a10);
  border:1px solid rgba(232,106,94,.6);box-shadow:0 0 18px rgba(232,106,94,.28), inset 0 0 12px rgba(0,0,0,.35);}

/* final lock */
.boss-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:82px;
  opacity:0;pointer-events:none;transform:scale(.96);transition:opacity .45s ease,transform .45s ease;}
.boss-lock.show{opacity:1;transform:scale(1);}
.boss-lock-side{width:390px;display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center;}
.boss-lock .hold-key{background:rgba(7,14,24,.58);}
.boss-lock-meter{width:340px;}
.boss-lock.surge .boss-lock-meter i{box-shadow:0 0 24px rgba(232,201,138,.78);}
.ringbox.hit{animation:ringflash .28s ease;}
.ringbox.whiff{animation:doorshake .24s linear;}
@keyframes ringflash{0%{transform:scale(1);}40%{transform:scale(1.04);}100%{transform:scale(1);}}
/* ============================================================
   Suzume Doors — CSS for rebuilt WATER MIRROR RUSH + EVER-AFTER
   Append this to the END of css/suzume.css
   (You may also delete the old .race2 / .boss / .boss-lock
    blocks if you like — they're no longer referenced.)
   ============================================================ */

/* ===========================================================
   WATER MIRROR RUSH  (.race3)
   =========================================================== */
.race3{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;}
.r3-hud{display:flex;justify-content:space-between;align-items:center;padding:14px 30px 6px;gap:24px;}
.r3-pos{font-size:20px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
  text-shadow:0 1px 8px rgba(0,0,0,.6);font-variant-numeric:tabular-nums;}
.r3-charge{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.r3-charge>span{font-size:14px;letter-spacing:.3em;color:var(--ink-dim);}
.r3-chargebar{width:200px;height:10px;border-radius:999px;border:1px solid rgba(141,240,220,.2);
  background:rgba(7,14,24,.55);overflow:hidden;}
.r3-chargebar i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,#427f8f,var(--accent));box-shadow:0 0 12px rgba(141,240,220,.45);
  transition:width .14s linear;}

.r3-track{position:relative;flex:1;margin:8px 22px 20px;border-radius:16px;overflow:hidden;
  border:1px solid rgba(141,240,220,.18);
  background:
    linear-gradient(180deg,rgba(20,40,70,.50),rgba(7,14,24,.66)),
    radial-gradient(ellipse 120% 70% at 50% 0%,rgba(141,240,220,.10),transparent 60%);
}
/* moving water shimmer (the "mirror") */
.r3-water{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:screen;
  background:
    repeating-linear-gradient(100deg,rgba(141,240,220,.05) 0 3px,transparent 3px 16px),
    repeating-linear-gradient(80deg,rgba(255,255,255,.04) 0 2px,transparent 2px 22px);
  animation:r3water 6s linear infinite;}
@keyframes r3water{from{background-position:0 0,0 0;}to{background-position:-220px 0,180px 0;}}
.r3-lines{position:absolute;inset:0;pointer-events:none;}
.r3-line{position:absolute;left:0;right:0;height:1px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 22px,transparent 22px 42px);
  animation:r3lines .5s linear infinite;}
@keyframes r3lines{from{background-position:0 0;}to{background-position:-64px 0;}}
.r3-track.hit{animation:doorshake .3s linear;}
.r3-track.burst{box-shadow:inset 0 0 40px rgba(141,240,220,.18);}
.r3-track.burst .r3-water{animation-duration:2.6s;opacity:.8;}

.r3-goal{position:absolute;right:2%;top:6%;bottom:6%;width:54px;border-radius:8px;z-index:3;
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(180deg,rgba(234,227,214,.9) 0 14px,rgba(46,38,32,.85) 14px 28px);
  box-shadow:0 0 26px rgba(141,240,220,.4);}
.r3-goal span{font-family:var(--jp);font-size:30px;color:#1a140e;writing-mode:vertical-rl;
  text-shadow:0 1px 2px rgba(255,255,255,.4);}

.r3-cat{position:absolute;width:74px;height:74px;transform:translate(-50%,-50%);
  transition:top .12s linear,left .12s linear;z-index:4;}
.r3-cat svg{width:100%;height:100%;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));
  animation:catrun .26s ease-in-out infinite;}
.r3-cat.you svg{filter:drop-shadow(0 0 12px rgba(141,240,220,.55)) drop-shadow(0 4px 8px rgba(0,0,0,.5));}
.r3-cat.riv{filter:hue-rotate(-40deg) saturate(.85);}
.r3-cat.riv svg{filter:drop-shadow(0 0 12px rgba(232,106,94,.5)) drop-shadow(0 4px 8px rgba(0,0,0,.5));opacity:.96;}
.r3-cat .r3-wake{position:absolute;right:60%;top:54%;width:40px;height:10px;border-radius:6px;
  background:linear-gradient(90deg,transparent,rgba(141,240,220,.45));}
.r3-cat.riv .r3-wake{background:linear-gradient(90deg,transparent,rgba(232,106,94,.4));}
.r3-cat .r3-tag{position:absolute;top:-22px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:12px;letter-spacing:.22em;text-shadow:0 1px 4px #000;}
.r3-cat.you .r3-tag{color:var(--accent);}
.r3-cat.riv .r3-tag{color:var(--danger);}
.r3-cat.pop svg{animation:catboundr .3s ease;}
.r3-cat.win svg{animation:catboundr .5s ease infinite;}

.r3-item{position:absolute;width:54px;height:48px;transform:translate(-50%,-50%);z-index:2;}
.r3-item svg{width:100%;height:100%;display:block;}
.r3-fish svg{filter:drop-shadow(0 0 12px rgba(141,240,220,.6));}
.r3-eddy svg{filter:drop-shadow(0 0 12px rgba(141,184,255,.45));animation:eddyspin 1.2s linear infinite;}
.r3-lantern svg{filter:drop-shadow(0 0 14px rgba(255,217,140,.55));}
.r3-item.got{transition:transform .2s,opacity .2s;transform:translate(-50%,-110%) scale(1.4);opacity:0;}
.r3-gate{width:86px;display:flex;align-items:stretch;justify-content:space-between;padding:0 8px;}
.r3-gate span{display:block;width:26px;height:100%;border-radius:8px;
  background:linear-gradient(180deg,#6a4636,#2e1a10);border:1px solid rgba(232,106,94,.6);
  box-shadow:0 0 18px rgba(232,106,94,.28),inset 0 0 12px rgba(0,0,0,.35);}

.r3-alert{position:absolute;left:50%;top:13%;transform:translateX(-50%);padding:11px 18px;border-radius:999px;
  background:rgba(7,14,24,.74);border:1px solid rgba(141,240,220,.12);
  font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);
  opacity:0;pointer-events:none;white-space:nowrap;z-index:6;}
.r3-alert.show{animation:r2alert .9s ease;}
.r3-alert.good{color:var(--accent);}
.r3-alert.bad{color:var(--danger);}
.r3-flag{position:absolute;left:50%;top:46%;transform:translateX(-50%);white-space:nowrap;
  font-size:22px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  text-shadow:0 2px 12px #000;transition:opacity .4s;pointer-events:none;
  animation:aurapulse 1.6s ease-in-out infinite;z-index:6;}


/* ===========================================================
   THE EVER-AFTER  (.ever finale)
   =========================================================== */
.ever{position:absolute;inset:0;overflow:hidden;}
.ev-sky{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 120% 80% at 50% 6%,rgba(120,60,140,.45),transparent 55%),
    radial-gradient(ellipse 100% 70% at 50% 100%,rgba(20,60,90,.5),transparent 60%),
    linear-gradient(180deg,#1a0f2e 0%,#231a44 38%,#10243a 78%,#070d18 100%);
}
.ev-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.ev-stars i{position:absolute;top:-12%;width:2px;height:80px;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#cfeee6 60%,#fff);
  opacity:0;transform:rotate(20deg);animation:evfall 4s linear infinite;}
.ev-stars i.far{height:48px;opacity:0;filter:blur(.4px);transform:rotate(20deg) scale(.7);}
@keyframes evfall{0%{opacity:0;transform:rotate(20deg) translateY(-120px);}
  12%{opacity:.9;}70%{opacity:.6;}100%{opacity:0;transform:rotate(20deg) translateY(900px);}}

.ev-hud{position:absolute;top:16px;left:0;right:0;display:flex;justify-content:space-between;
  align-items:center;padding:0 32px;z-index:6;}
.ev-stage{font-size:19px;letter-spacing:.42em;color:var(--gold);text-transform:uppercase;
  text-shadow:0 1px 10px rgba(0,0,0,.7);}
.ev-hearts{display:flex;gap:9px;}
.ev-hearts span{width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(45deg);}
.ev-hearts span.on{background:var(--danger);box-shadow:0 0 12px rgba(232,106,94,.6);}
.ev-hearts span.off{background:rgba(232,106,94,.16);}

.ev-field{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);
  width:560px;height:600px;z-index:4;}
.ev-field.shk{animation:doorshake .26s linear;}

/* the Worm: a column the coils fall through */
.ev-worm{position:absolute;inset:0;overflow:hidden;border-radius:18px;
  background:
    radial-gradient(ellipse 120% 30% at 50% -6%,rgba(255,138,90,.45),transparent 60%),
    linear-gradient(180deg,rgba(232,67,79,.16),rgba(110,18,48,.05) 60%,transparent);
  box-shadow:inset 0 0 60px rgba(232,67,79,.2);transition:opacity 1s,transform 1s;}
.ev-worm.receding{opacity:0;transform:translateY(-40px) scale(1.05);}

/* coils = horizontal red bands with one open gap lane */
.ev-coil{position:absolute;left:0;right:0;top:-12%;height:11%;}
.ev-coil .seg,.ev-coil .gap{position:absolute;top:0;bottom:0;width:33.33%;transform:translateX(-50%);}
.ev-coil .seg{
  background:linear-gradient(180deg,#ff8a5a,#e8434f 55%,#6e1230);
  border-radius:40% 40% 46% 46%/60% 60% 40% 40%;
  box-shadow:0 0 22px rgba(232,67,79,.6),inset 0 -6px 14px rgba(110,18,48,.7),inset 0 6px 12px rgba(255,180,140,.5);}
.ev-coil .seg::after{content:"";position:absolute;inset:18% 20%;border-radius:inherit;opacity:.4;
  background:radial-gradient(circle at 40% 30%,rgba(255,224,138,.5),transparent 60%);}
.ev-coil .gap{} /* open channel — nothing */

.ev-lanes{position:absolute;inset:0;transition:opacity .5s;}
.ev-chair{position:absolute;top:78%;left:50%;width:84px;height:98px;transform:translate(-50%,-50%);
  transition:left .1s linear;z-index:5;}
.ev-chair svg{width:100%;height:100%;filter:drop-shadow(0 0 16px rgba(232,201,138,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.5));}
.ev-chair.hurt svg{animation:chairhit .4s ease;}

/* the lock (phase II/III) */
.ev-lock{position:absolute;left:50%;top:50%;width:440px;height:440px;transform:translate(-50%,-50%) scale(.9);
  opacity:0;pointer-events:none;transition:opacity .5s,transform .5s;z-index:5;}
.ev-lock.show{opacity:1;transform:translate(-50%,-50%) scale(1);}
.ev-lock svg{width:100%;height:100%;filter:drop-shadow(0 0 30px rgba(141,240,220,.25));}
.ev-lock.hit{animation:ringflash .3s ease;}
.ev-lock.whiff{animation:doorshake .24s linear;}

/* side panel */
.ev-side{position:absolute;right:40px;top:50%;transform:translateY(-50%);width:300px;z-index:6;
  display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center;}
.ev-note{font-size:21px;color:var(--ink-dim);font-style:italic;line-height:1.65;
  text-shadow:0 1px 8px rgba(0,0,0,.6);}
.ev-meterwrap{width:100%;display:none;}
.ev-meter{width:100%;height:18px;border:1px solid var(--hair);border-radius:999px;
  background:rgba(7,14,24,.6);overflow:hidden;}
.ev-meter i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent));
  box-shadow:0 0 14px rgba(141,240,220,.5);transition:width .08s linear;}
.ever.surge .ev-meter i{box-shadow:0 0 26px rgba(232,201,138,.8);}
.ev-key-hint{font-size:18px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--hair);padding:12px 24px;border-radius:6px;background:rgba(7,14,24,.5);}

.ev-flash{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 54%,rgba(255,250,235,.6),rgba(141,240,220,.3) 45%,transparent 72%);}
.ev-flash.go{animation:bflash .45s ease;}
.ev-msg{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);text-align:center;
  font-size:23px;font-style:italic;color:var(--ink);text-shadow:0 2px 12px #000;max-width:74%;z-index:6;}
.ever.surge .ev-sky{animation:evsurge .5s ease;}
@keyframes evsurge{0%,100%{filter:none;}50%{filter:brightness(1.3) saturate(1.4);}}

/* mobile / narrow safety — keep side panel from colliding */
@media (max-width:1100px){
  .ev-side{position:absolute;right:50%;top:auto;bottom:8%;transform:translateX(50%);width:80%;}
  .ev-field{top:46%;}
}

.back-to-dashboard-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(15, 15, 25, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    color: #fff;
    text-decoration: none;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}
.back-to-dashboard-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 25px rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}
.back-to-dashboard-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
}