/* ================================================================
   M♡N WORLD — Web attraction
   1u = min(1cqw, .5cqh)  … ステージ幅の1%（縦が足りない画面では高さ基準）
   ================================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  font-family:"Anton",Impact,"Arial Black",sans-serif;
  color:#fff;background:var(--bg0);
  -webkit-font-smoothing:antialiased;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;

  /* ---- PINK（到着エリアもこの色） ---- */
  --c1:#FF1493; --c2:#FF00AA; --c3:#FF6EC7; --hi:#FFD3EF;
  --bg0:#08000d; --bg1:#2b0040; --bg2:#5c0070;
  --m1:#FFB8E0; --m2:#FF3FA6; --m3:#5e0075;
  --ga:#FFD0EC; --gb:#FF1493; --gc:#7d0090; --grim:#FFE6F5;
  --bow:var(--c1);
  --heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 94'%3E%3Cpath d='M50 91C38 80 5 58 3.5 33 2.5 15 15 3 30 3c9.5 0 16.5 5.5 20 13.5C53.5 8.5 60.5 3 70 3c15 0 27.5 12 26.5 30C95 58 62 80 50 91Z'/%3E%3C/svg%3E");
}
body[data-heart=blue]{
  --c1:#1F6BFF; --c2:#00C2FF; --c3:#6FA8FF; --hi:#D2E8FF;
  --bg0:#00030e; --bg1:#001648; --bg2:#00307a;
  --m1:#CFE0FF; --m2:#4C86FF; --m3:#0a1f5c;
  --ga:#CFE6FF; --gb:#1F6BFF; --gc:#041a6b; --grim:#E6F1FF;
}
body[data-heart=green]{
  --c1:#00FF66; --c2:#39FF14; --c3:#6BFFA6; --hi:#D9FFE7;
  --bg0:#000803; --bg1:#002a12; --bg2:#00521f;
  --m1:#E3FFEE; --m2:#3FD37E; --m3:#07361c;
  --ga:#CFFFE0; --gb:#00E05A; --gc:#034d24; --grim:#E8FFF1;
}
body[data-heart=black]{
  --c1:#FFFFFF; --c2:#C8C8DA; --c3:#8C8CA6; --hi:#FFFFFF;
  --bg0:#000000; --bg1:#0e0e14; --bg2:#26262f;
  --m1:#F0F0F6; --m2:#8D8D9C; --m3:#141419;
  --ga:#9A9AAE; --gb:#23232C; --gc:#030304; --grim:#E9E9F2;
}
body[data-heart=silver]{
  --c1:#EAF2FF; --c2:#7FE9FF; --c3:#FF7BEA; --hi:#FFFFFF;
  --bg0:#07080d; --bg1:#23283a; --bg2:#4a5270;
  --m1:#FFFFFF; --m2:#AEB9CF; --m3:#3b4257;
  --ga:#FFFFFF; --gb:#C3CCDD; --gc:#5a6380; --grim:#FFFFFF;
  --bow:#C9D3E6;
}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------------- 共通の質感 ---------------- */
.neon{
  color:var(--hi);
  text-shadow:0 0 1px #fff,0 0 calc(var(--u)*.8) var(--c1),0 0 calc(var(--u)*2.2) var(--c1),0 0 calc(var(--u)*5) var(--c2);
}
.chrome-text{
  background:linear-gradient(180deg,#fff 0%,var(--m1) 28%,var(--m2) 47%,var(--m3) 53%,var(--m2) 68%,#fff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 calc(var(--u)*.5) 0 #000) drop-shadow(0 0 calc(var(--u)*2) var(--c1));
}
/* ラメ＋クローム：筐体の地 */
.glitter,
.m-side,.m-bot,.vend-body{
  background:
    linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 58%) 0 0/300% 100%,
    radial-gradient(circle,#fff 0 .6px,transparent 1.1px) 0 0/7px 7px,
    radial-gradient(circle,var(--hi) 0 .7px,transparent 1.2px) 3px 4px/11px 11px,
    radial-gradient(circle,var(--c1) 0 .8px,transparent 1.3px) 6px 1px/13px 13px,
    linear-gradient(180deg,var(--m1) 0%,var(--m2) 38%,var(--m3) 100%);
  animation:shimmer 4.5s linear infinite;
}
@keyframes shimmer{from{background-position:120% 0,0 0,3px 4px,6px 1px,0 0}to{background-position:-120% 0,0 0,3px 4px,6px 1px,0 0}}

/* ---------------- 背景 ---------------- */
#ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.amb-bg{position:absolute;inset:0;
  background:
    radial-gradient(120% 55% at 50% -5%,var(--bg2) 0%,transparent 62%),
    radial-gradient(90% 45% at 50% 105%,var(--bg2) 0%,transparent 70%),
    linear-gradient(180deg,var(--bg0) 0%,var(--bg1) 55%,var(--bg0) 100%);
}
.amb-bg::after{content:"";position:absolute;left:-60%;right:-60%;top:-10%;height:130%;
  background:repeating-conic-gradient(from 0deg at 50% 0%,transparent 0 7deg,rgba(255,255,255,.07) 7deg 8deg,transparent 8deg 11deg);
  transform-origin:50% 0;animation:rays 14s ease-in-out infinite alternate;mix-blend-mode:screen}
.amb-bg::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(40% 30% at 15% 30%,var(--c1),transparent 70%),
    radial-gradient(40% 30% at 85% 60%,var(--c2),transparent 70%);
  opacity:.18;mix-blend-mode:screen}
@keyframes rays{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}

.amb-floor{position:absolute;left:0;right:0;bottom:0;height:30%;perspective:320px;perspective-origin:50% 0;overflow:hidden}
.floor-plane{position:absolute;left:-100%;right:-100%;top:0;height:220%;
  transform-origin:50% 0;transform:rotateX(68deg);
  background:
    conic-gradient(#000 25%,var(--bg2) 0 50%,#000 0 75%,var(--bg2) 0) 0 0/70px 70px;
  -webkit-mask:linear-gradient(180deg,transparent 0%,#000 30%);mask:linear-gradient(180deg,transparent 0%,#000 30%);
  opacity:.85}
.amb-floor::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 70% at 50% 20%,var(--c1),transparent 70%);opacity:.28;mix-blend-mode:screen}

.hangers{position:absolute;inset:0}
.hanger{position:absolute;top:-6px;width:var(--size);margin-left:calc(var(--size)/-2);
  transform-origin:50% 0;animation:sway var(--d) ease-in-out infinite alternate;will-change:transform}
.hanger .chain{width:5px;margin:0 auto;height:var(--len);
  background:radial-gradient(circle,#fff 0 .9px,var(--m2) 1.5px,var(--m3) 2.1px,transparent 2.5px) 50% 0/5px 5px repeat-y}
.hanger .gem{margin-top:-3px;filter:drop-shadow(0 0 6px var(--c1));opacity:.92}
.hanger .gem svg{display:block;width:100%;height:auto}
@keyframes sway{from{transform:rotate(calc(var(--a)*-1))}to{transform:rotate(var(--a))}}

#fx{position:fixed;inset:0;width:100%;height:100%;z-index:30;pointer-events:none}

/* ---------------- ステージ ---------------- */
.stage{position:fixed;z-index:2;top:0;left:50%;transform:translateX(-50%);
  width:min(100vw,62vh);width:min(100vw,62dvh);height:100vh;height:100dvh;
  container-type:size;}
.stage *{--u:min(1cqw,.5cqh)}
.scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  padding:calc(env(safe-area-inset-top) + var(--u)*4) calc(var(--u)*4) calc(env(safe-area-inset-bottom) + var(--u)*4);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility 0s linear .6s}
.scene.is-on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .6s ease}
.flex{flex:1 1 0;min-height:0}

.mute{position:absolute;z-index:20;top:calc(env(safe-area-inset-top) + var(--u)*4.4);right:calc(var(--u)*4.4);
  width:calc(var(--u)*8);height:calc(var(--u)*8);border-radius:50%;
  font-family:"VT323",monospace;font-size:calc(var(--u)*5);line-height:1;color:var(--hi);
  background:rgba(0,0,0,.55);box-shadow:0 0 0 1.5px var(--m2),0 0 calc(var(--u)*3) var(--c1);
  opacity:0;transition:opacity .4s}
body.started .mute{opacity:1}
.mute.off{color:#666;box-shadow:0 0 0 1.5px #555}
.mute.off::after{content:"";position:absolute;left:20%;right:20%;top:50%;height:2px;background:#888;transform:rotate(-40deg)}

/* ================= 0. LANDING ================= */
.landing{justify-content:center;gap:calc(var(--u)*4);text-align:center;font-family:"VT323",monospace}
.landing.go{animation:landGo .7s ease-in forwards}
@keyframes landGo{to{opacity:0;transform:scale(1.4);filter:blur(6px)}}
.land-flight{font-size:calc(var(--u)*5);letter-spacing:.12em;color:var(--hi);opacity:.85}
.land-status{font-size:calc(var(--u)*8);letter-spacing:.08em;color:var(--c1);text-shadow:0 0 10px var(--c1)}
.land-btn{position:relative;width:calc(var(--u)*66);aspect-ratio:100/94;display:grid;place-items:center;margin:calc(var(--u)*4) 0}
.land-gem{position:absolute;inset:0;animation:beat 1.2s ease-in-out infinite}
.land-gem svg{width:100%;height:100%;filter:drop-shadow(0 0 calc(var(--u)*4) var(--c1)) drop-shadow(0 0 calc(var(--u)*10) var(--c2))}
.land-label{position:relative;font-family:"Anton",sans-serif;font-size:calc(var(--u)*9);line-height:.95;letter-spacing:.06em;
  margin-top:-10%;color:#fff;text-shadow:0 calc(var(--u)*.6) 0 #000,0 0 calc(var(--u)*3) #000,0 0 calc(var(--u)*6) var(--c2)}
.land-note{font-family:"Yellowtail",cursive;font-size:calc(var(--u)*6);color:var(--c3)}
@keyframes beat{0%,100%{transform:scale(1)}14%{transform:scale(1.08)}28%{transform:scale(.97)}42%{transform:scale(1.05)}60%{transform:scale(1)}}

/* ================= 1. ARRIVAL ================= */
.arrival{touch-action:none}
.arrival.shake{animation:shake .35s linear}
@keyframes shake{20%{transform:translate(-5px,3px)}40%{transform:translate(4px,-4px)}60%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}}

/* 到着案内板（スプリットフラップ） */
.board{width:100%;flex:none;position:relative;font-family:"VT323",monospace;
  padding:calc(var(--u)*2) calc(var(--u)*2.6) calc(var(--u)*2.4);border-radius:calc(var(--u)*2.4);
  background:linear-gradient(180deg,#111 0%,#030303 100%);
  box-shadow:0 0 0 calc(var(--u)*.6) #000,0 0 0 calc(var(--u)*1.2) var(--m2),0 0 0 calc(var(--u)*1.7) #000,0 0 calc(var(--u)*6) var(--c1),inset 0 0 calc(var(--u)*4) #000}
.board::before{content:"";position:absolute;inset:calc(var(--u)*-1.2);border-radius:calc(var(--u)*3.4);pointer-events:none;
  background:
    radial-gradient(circle,#fff 0 1px,var(--c3) 1.8px,var(--c1) 2.6px,transparent 3.2px) 0 0/9px 9px repeat-x,
    radial-gradient(circle,#fff 0 1px,var(--c3) 1.8px,var(--c1) 2.6px,transparent 3.2px) 0 100%/9px 9px repeat-x;
  filter:drop-shadow(0 0 3px var(--c1))}
.b-head{display:flex;justify-content:space-between;align-items:baseline;color:var(--c1);
  font-size:calc(var(--u)*5);letter-spacing:.1em;text-shadow:0 0 6px var(--c1);margin-bottom:calc(var(--u)*.6);
  padding-right:calc(var(--u)*9)} /* 右上の♪ボタンの分あける */
.b-head small{font-size:calc(var(--u)*3.6);color:var(--hi);opacity:.7}
.b-row{display:flex;gap:calc(var(--u)*1.6);margin-top:calc(var(--u)*.9);justify-content:space-between}
.b-cell{display:flex;gap:1px}
.flap{position:relative;width:calc(var(--u)*3.6);height:calc(var(--u)*5.2);display:grid;place-items:center;
  background:linear-gradient(180deg,#232327 0 49%,#000 49% 52%,#18181b 52%);border-radius:2px;
  color:var(--hi);font-size:calc(var(--u)*5);line-height:1;text-shadow:0 0 5px var(--c1)}
.flap.st{color:var(--c1)}

/* WELCOME */
.welcome{text-align:center;margin-top:calc(var(--u)*4);flex:none}
.w-script{position:relative;z-index:2;font-family:"Yellowtail",cursive;font-size:calc(var(--u)*11);line-height:1;transform:rotate(-6deg);margin-bottom:calc(var(--u)*-3)}
.logo{line-height:.86;font-weight:400}
.l-mon{display:block;font-family:"Rubik Wet Paint","Anton",sans-serif;font-size:calc(var(--u)*28);color:var(--c1);letter-spacing:.02em;
  text-shadow:
    calc(var(--u)*.6) calc(var(--u)*.6) 0 #000,calc(var(--u)*-.6) calc(var(--u)*.6) 0 #000,
    calc(var(--u)*.6) calc(var(--u)*-.6) 0 #000,calc(var(--u)*-.6) calc(var(--u)*-.6) 0 #000,
    0 calc(var(--u)*1.6) 0 #000,0 0 calc(var(--u)*5) var(--c2),0 0 calc(var(--u)*12) var(--c1)}
.l-mon img{height:calc(var(--u)*40);width:auto;display:block;margin:0 auto;filter:drop-shadow(0 0 calc(var(--u)*4) var(--c1))}
.l-heart{font-style:normal;display:inline-block;color:var(--c2);animation:beat 1.2s ease-in-out infinite}
.l-world{display:block;font-family:"Anton",sans-serif;font-size:calc(var(--u)*13);letter-spacing:.2em;margin-right:-.2em;margin-top:calc(var(--u)*-1)}
.declare{font-family:"Anton",sans-serif;font-size:calc(var(--u)*5.4);letter-spacing:.07em;line-height:1.2;margin-top:calc(var(--u)*3);
  color:#fff;text-shadow:0 0 calc(var(--u)*2) var(--c1),0 calc(var(--u)*.4) 0 #000}
.emoji{font-family:system-ui,sans-serif}

/* 照明ON演出 */
.arrival.lit .board{animation:dropIn .7s cubic-bezier(.2,1.4,.4,1) both}
.arrival.lit .w-script{animation:neonOn 1.1s .35s both}
.arrival.lit .l-mon{animation:slam .55s .75s cubic-bezier(.2,1.6,.4,1) both}
.arrival.lit .l-world{animation:neonOn 1s 1.05s both}
.arrival.lit .declare{animation:fadeUp .6s 1.5s both}
.arrival.lit .security{animation:riseIn .9s .95s cubic-bezier(.2,1.2,.4,1) both}
@keyframes dropIn{from{opacity:0;transform:translateY(-60%)}}
@keyframes slam{from{opacity:0;transform:scale(2.6) rotate(-8deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(40%)}}
@keyframes riseIn{from{opacity:0;transform:translateY(25%)}}
@keyframes neonOn{0%{opacity:0}8%{opacity:1}12%{opacity:.15}22%{opacity:1}28%{opacity:.3}40%,100%{opacity:1}}

/* ---- 手荷物検査エリア ---- */
.security{position:relative;flex:none;width:calc(var(--u)*100);height:calc(var(--u)*86);margin-bottom:calc(var(--u)*1)}
.security > *{position:absolute}

.tunnel-in{left:calc(var(--u)*35);width:calc(var(--u)*30);bottom:calc(var(--u)*9);height:calc(var(--u)*29);z-index:1;
  background:radial-gradient(90% 80% at 50% 60%,#1a0022,#000);box-shadow:inset 0 0 calc(var(--u)*4) var(--c1)}

.belt{left:calc(50% - 50vw);right:calc(50% - 50vw);bottom:0;height:calc(var(--u)*14);z-index:2}
.belt > *{position:absolute;left:0;right:0}
.belt-top{bottom:calc(var(--u)*9);height:calc(var(--u)*4.4);overflow:hidden;background:#050507;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 calc(var(--u)*-.4) calc(var(--u)*2) var(--c1)}
.belt-slats{position:absolute;top:0;bottom:0;left:-32px;right:-32px;will-change:transform;
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),transparent 40%,rgba(0,0,0,.6)),
    repeating-linear-gradient(90deg,#1d1d23 0 12px,#3b3b46 12px 13px,#050507 13px 16px)}
.belt-rail{bottom:calc(var(--u)*4);height:calc(var(--u)*5.4);border-radius:3px;
  background:var(--rail-gem,none) 0 50%/calc(var(--u)*8) calc(var(--u)*4) repeat-x,
    linear-gradient(180deg,#fff 0%,var(--m1) 16%,var(--m2) 44%,var(--m3) 62%,var(--m2) 82%,var(--m1) 100%);
  box-shadow:0 0 calc(var(--u)*3) var(--c1),inset 0 -1px 0 rgba(0,0,0,.4)}
.belt-legs{bottom:0;height:calc(var(--u)*4);
  background:repeating-linear-gradient(90deg,transparent 0 calc(var(--u)*17),var(--m3) calc(var(--u)*17) calc(var(--u)*19.5),transparent calc(var(--u)*19.5) calc(var(--u)*20))}

.touchdot{left:calc(var(--u)*6);bottom:calc(var(--u)*16);width:calc(var(--u)*9);height:calc(var(--u)*9);border-radius:50%;z-index:7;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0 28%,var(--c1) 45%,transparent 70%);
  box-shadow:0 0 calc(var(--u)*4) var(--c1);opacity:0;pointer-events:none}
.arrival.ready .touchdot{animation:swipe 1.8s ease-in-out .3s infinite}
.arrival.touched .touchdot{animation:none;opacity:0}
@keyframes swipe{0%{opacity:0;transform:translateX(0) scale(.6)}15%{opacity:1;transform:translateX(0) scale(1)}70%{opacity:1;transform:translateX(calc(var(--u)*30)) scale(1)}90%,100%{opacity:0;transform:translateX(calc(var(--u)*34)) scale(.6)}}

/* トレー（空港の荷物トレー） */
.tray{left:0;bottom:calc(var(--u)*11.5);width:calc(var(--u)*22);height:calc(var(--u)*25);z-index:3;will-change:transform}
.tray-heart{position:absolute;left:8%;right:8%;bottom:calc(var(--u)*3.5);transition:transform .6s cubic-bezier(.2,1.4,.4,1)}
.tray-heart svg{display:block;width:100%;height:auto;filter:drop-shadow(0 0 calc(var(--u)*1.5) #fff) drop-shadow(0 0 calc(var(--u)*3) var(--c1))}
.tray-heart.rise{transform:translateY(calc(var(--u)*-16)) scale(1.25)}
.tray-bin{position:absolute;left:0;right:0;bottom:0;height:calc(var(--u)*7.5);
  clip-path:polygon(0 0,100% 0,93% 100%,7% 100%);
  background:linear-gradient(180deg,rgba(255,255,255,.9) 0 6%,rgba(255,110,199,.55) 8%,rgba(255,20,147,.88) 100%);
  display:grid;place-items:center;font-size:calc(var(--u)*2.6);letter-spacing:.22em;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.tray-tag{position:absolute;right:calc(var(--u)*-3.5);bottom:calc(var(--u)*1);width:calc(var(--u)*8.5);padding:calc(var(--u)*.8) 0;
  transform:rotate(12deg);transform-origin:0 0;background:#fff;color:#000;border-radius:calc(var(--u)*.8);
  font-size:calc(var(--u)*2.1);line-height:1.05;text-align:center;letter-spacing:.04em;box-shadow:0 0 0 1px #000,0 0 calc(var(--u)*2) var(--c1)}
.tray-tag::before{content:"";position:absolute;left:50%;top:calc(var(--u)*-.2);width:calc(var(--u)*1.4);height:calc(var(--u)*1.4);margin-left:calc(var(--u)*-.7);border-radius:50%;background:var(--c1)}

/* X線検査機 */
.machine{left:calc(var(--u)*18);width:calc(var(--u)*64);bottom:calc(var(--u)*4);height:calc(var(--u)*42);z-index:4;
  display:flex;flex-direction:column;border-radius:calc(var(--u)*3) calc(var(--u)*3) calc(var(--u)*1) calc(var(--u)*1);
  box-shadow:0 0 calc(var(--u)*4) var(--c1)} /* filterを使うとm-windowのbackdrop-filterが効かなくなる */
.m-top{flex:none;height:calc(var(--u)*8);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*2);
  border-radius:calc(var(--u)*3) calc(var(--u)*3) 0 0;background:#08000c;
  box-shadow:inset 0 0 0 calc(var(--u)*.7) var(--m2),inset 0 0 0 calc(var(--u)*1.2) #000}
.m-name{font-size:calc(var(--u)*4.6);letter-spacing:.16em;color:var(--hi);
  text-shadow:0 0 2px #fff,0 0 calc(var(--u)*1.5) var(--c1),0 0 calc(var(--u)*3.5) var(--c1)}
.m-led{width:calc(var(--u)*2.6);height:calc(var(--u)*2.4);background:var(--c1);-webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat;
  filter:drop-shadow(0 0 4px var(--c1));animation:blink .9s steps(1) infinite}
.m-led:last-child{animation-delay:.45s}
.m-mid{flex:1;display:flex}
.m-side{width:calc(var(--u)*17);position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
.m-side::after{content:"";position:absolute;inset:calc(var(--u)*2.4) calc(var(--u)*2.4);border-radius:calc(var(--u)*1.2);
  background:radial-gradient(circle,#fff 0 1px,var(--c3) 1.8px,var(--c1) 2.6px,transparent 3.2px) 0 0/8px 8px;opacity:.55;
  -webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat}
.m-window{flex:1;position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 calc(var(--u)*.6) #000,inset 0 0 0 calc(var(--u)*1) var(--m1),inset 0 0 calc(var(--u)*3) var(--c1);
  background:linear-gradient(120deg,rgba(255,255,255,.14) 0 18%,transparent 19% 60%,rgba(255,255,255,.08) 61% 66%,transparent 67%)}
.security.scanning .m-window{
  -webkit-backdrop-filter:grayscale(1) invert(1) contrast(1.6) sepia(1) hue-rotate(155deg) saturate(3.5);
  backdrop-filter:grayscale(1) invert(1) contrast(1.6) sepia(1) hue-rotate(155deg) saturate(3.5)}
.m-beam{position:absolute;top:0;bottom:0;left:-30%;width:26%;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(160,255,255,.25) 40%,#bff 50%,rgba(160,255,255,.25) 60%,transparent)}
.security.scanning .m-beam{opacity:1;animation:beam .8s linear infinite}
@keyframes beam{to{left:104%}}
.curtain{position:absolute;top:0;bottom:calc(var(--u)*4.5);width:calc(var(--u)*3);transform-origin:50% 0;
  background:repeating-linear-gradient(90deg,rgba(10,0,14,.85) 0 calc(var(--u)*.9),rgba(255,255,255,.18) calc(var(--u)*.9) calc(var(--u)*1))}
.curtain.l{left:calc(var(--u)*1)}
.curtain.r{right:calc(var(--u)*1)}
.curtain.swish{animation:swish .6s ease-out}
@keyframes swish{25%{transform:skewX(-22deg)}55%{transform:skewX(10deg)}80%{transform:skewX(-4deg)}}
.m-bot{flex:none;height:calc(var(--u)*5.5);border-radius:0 0 calc(var(--u)*1) calc(var(--u)*1)}

/* 検査官バニー */
.officer{bottom:calc(var(--u)*44.5);width:calc(var(--u)*17);z-index:5;transform-origin:50% 100%}
.officer.l{left:calc(var(--u)*11);transform:rotate(-10deg);animation:peek 3.2s ease-in-out infinite}
.officer.r{right:calc(var(--u)*11);transform:rotate(10deg);animation:peek 3.2s ease-in-out -1.6s infinite}
.officer .bun,.officer img{width:100%;height:auto;display:block}
@keyframes peek{0%,100%{translate:0 0}50%{translate:0 calc(var(--u)*-1.2)}}
.security.scanning .officer{animation:hop .45s ease-in-out infinite}
.security.cleared .officer{animation:jump .7s cubic-bezier(.2,1.6,.4,1) 2}
@keyframes hop{50%{translate:0 calc(var(--u)*-2)}}
@keyframes jump{40%{translate:0 calc(var(--u)*-8)}}

/* モニター */
.monitor{left:calc(var(--u)*23);width:calc(var(--u)*54);bottom:calc(var(--u)*46);height:calc(var(--u)*39);z-index:6}
.mon-neck{position:absolute;bottom:0;left:40%;width:20%;height:calc(var(--u)*5);
  background:linear-gradient(90deg,var(--m3),var(--m1) 45%,var(--m2) 60%,var(--m3))}
.mon-screen{position:absolute;left:0;right:0;top:0;height:calc(var(--u)*34.5);overflow:hidden;border-radius:calc(var(--u)*2.6);
  background:radial-gradient(90% 90% at 50% 40%,#12001d,#000);
  box-shadow:0 0 0 calc(var(--u)*.8) #000,0 0 0 calc(var(--u)*1.7) var(--m2),0 0 0 calc(var(--u)*2.3) #000,0 0 calc(var(--u)*7) var(--c1),inset 0 0 calc(var(--u)*5) rgba(255,20,147,.35);
  font-family:"VT323",monospace}
.mon-screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:9;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),
    linear-gradient(160deg,rgba(255,255,255,.12),transparent 35%)}
.mon-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*1.5);text-align:center;transition:opacity .3s}
.mon-ready{font-size:calc(var(--u)*10);line-height:1;color:var(--c1);letter-spacing:.1em;text-shadow:0 0 calc(var(--u)*2) var(--c1)}
.mon-sub{font-size:calc(var(--u)*4.2);line-height:1.05;color:var(--hi);letter-spacing:.08em}
.mon-xray{position:absolute;inset:0;opacity:0;transition:opacity .3s;background:radial-gradient(80% 80% at 50% 45%,#062c4a,#010812)}
.mon-xray svg{position:absolute;inset:4% 0 0;width:100%;height:92%}
.mon-read{position:absolute;left:calc(var(--u)*2);bottom:calc(var(--u)*1.4);right:calc(var(--u)*2);z-index:3;
  font-size:calc(var(--u)*3.6);line-height:1.02;color:#aef6ff;text-shadow:0 0 6px #3cf;opacity:0}
.mon-read div{white-space:nowrap;animation:typeIn .25s steps(12) both;overflow:hidden}
.mon-read .pk{color:var(--c3);text-shadow:0 0 6px var(--c1)}
@keyframes typeIn{from{max-width:0}to{max-width:100%}}
.mon-scan{position:absolute;left:0;right:0;top:0;height:calc(var(--u)*1.2);opacity:0;z-index:4;
  background:#bff;box-shadow:0 0 calc(var(--u)*2) #6ff,0 0 calc(var(--u)*6) #3cf}
.security.scanning .mon-idle{opacity:0}
.security.scanning .mon-xray,.security.scanning .mon-read{opacity:1}
.security.scanning .mon-scan{opacity:1;animation:scanY 1.1s ease-in-out infinite alternate}
@keyframes scanY{to{top:calc(100% - var(--u)*1.2)}}
.mon-xray .xr-heart{animation:xrPulse .8s ease-in-out infinite alternate}
@keyframes xrPulse{to{opacity:.55}}

.stamp{position:absolute;left:50%;top:40%;z-index:6;padding:calc(var(--u)*1) calc(var(--u)*3) calc(var(--u)*1.2);
  transform:translate(-50%,-50%) rotate(-12deg) scale(2.8);opacity:0;
  font-family:"Anton",sans-serif;font-size:calc(var(--u)*10);line-height:1;letter-spacing:.08em;color:var(--c1);text-align:center;
  border:calc(var(--u)*.9) solid var(--c1);border-radius:calc(var(--u)*1.6);background:rgba(0,0,0,.72);
  text-shadow:0 0 calc(var(--u)*2) var(--c1);box-shadow:0 0 calc(var(--u)*4) var(--c1),inset 0 0 calc(var(--u)*3) var(--c1)}
.stamp small{display:block;font-size:calc(var(--u)*3);letter-spacing:.12em;margin-top:calc(var(--u)*.8);color:var(--hi)}
.security.cleared .stamp{animation:stampIn .32s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes stampIn{to{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}}

.hint{flex:none;display:flex;align-items:center;gap:calc(var(--u)*2.4);height:calc(var(--u)*9);
  font-size:calc(var(--u)*5.6);letter-spacing:.12em;color:#fff;text-shadow:0 0 calc(var(--u)*2) var(--c1),0 0 calc(var(--u)*5) var(--c1);
  opacity:0;transition:opacity .4s}
.hint b{color:var(--c1);font-size:calc(var(--u)*8);line-height:1;animation:chev .9s ease-in-out infinite}
.arrival.ready .hint{opacity:1}
.arrival.touched .hint{opacity:0}
@keyframes chev{50%{transform:translateX(calc(var(--u)*2));opacity:.5}}

/* ================= 2. GATE ================= */
.gate{justify-content:space-between}
.q{text-align:center;line-height:.9;font-weight:400;flex:none;margin-top:calc(var(--u)*6)}
.q span{display:block}
.q1{font-size:calc(var(--u)*8.4);letter-spacing:.1em}
.q2{font-size:calc(var(--u)*15);letter-spacing:.04em}
.q3{font-family:"Yellowtail",cursive;font-size:calc(var(--u)*14);transform:rotate(-5deg);margin-top:calc(var(--u)*-1)}
.gate.is-on .q1{animation:neonOn 1s .1s both}
.gate.is-on .q2{animation:slam .5s .35s cubic-bezier(.2,1.6,.4,1) both}
.gate.is-on .q3{animation:neonOn 1s .6s both}

.big{position:relative;width:calc(var(--u)*62);aspect-ratio:1;display:grid;place-items:center;flex:none}
.big-rays{position:absolute;inset:-28%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,var(--c1) 0 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 12%,transparent 66%);mask:radial-gradient(circle,#000 12%,transparent 66%);
  opacity:.55;animation:spin 16s linear infinite}
.big::before{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,var(--c1),transparent 68%);opacity:.55;filter:blur(8px)}
@keyframes spin{to{transform:rotate(1turn)}}
.big-gem{position:relative;width:84%;animation:float 3.4s ease-in-out infinite}
.big-gem svg{display:block;width:100%;height:auto;filter:drop-shadow(0 0 calc(var(--u)*2) var(--hi)) drop-shadow(0 0 calc(var(--u)*6) var(--c1))}
.big-gem.pop svg{animation:pop .75s cubic-bezier(.2,1.5,.4,1)}
@keyframes float{50%{transform:translateY(calc(var(--u)*-2.4)) rotate(2deg)}}
@keyframes pop{0%{transform:scale(.4) rotateY(0)}60%{transform:scale(1.12) rotateY(360deg)}100%{transform:scale(1) rotateY(360deg)}}

.pick-name{flex:none;text-align:center;line-height:1;margin-top:calc(var(--u)*-4)}
.pick-name b{display:block;font-weight:400;font-size:calc(var(--u)*15);letter-spacing:.14em;margin-right:-.14em;color:#fff;
  text-shadow:0 0 2px #fff,0 0 calc(var(--u)*2) var(--c1),0 0 calc(var(--u)*6) var(--c1),0 calc(var(--u)*.6) 0 #000}
.pick-name span{display:block;font-family:"Yellowtail",cursive;font-size:calc(var(--u)*7);color:var(--hi);margin-top:calc(var(--u)*1);
  text-shadow:0 0 calc(var(--u)*2) var(--c1)}
.pick-name.swap b{animation:glitch .4s steps(2)}
@keyframes glitch{0%{transform:translate(4px,-2px) skewX(20deg);opacity:.4}50%{transform:translate(-4px,2px) skewX(-15deg)}100%{transform:none;opacity:1}}

.cushion{flex:none;display:flex;justify-content:center;gap:calc(var(--u)*1.2);width:100%;
  padding:calc(var(--u)*3.4) calc(var(--u)*2) calc(var(--u)*2.4);border-radius:calc(var(--u)*5);
  background:radial-gradient(120% 90% at 50% 0%,var(--bg2),#000 80%);
  box-shadow:0 0 0 calc(var(--u)*.6) #000,0 0 0 calc(var(--u)*1.2) var(--m2),0 0 calc(var(--u)*5) var(--c1),inset 0 calc(var(--u)*1) calc(var(--u)*3) rgba(0,0,0,.8)}
.pick{flex:1;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1.2);min-width:0}
.pick .gem{width:100%;transition:transform .35s cubic-bezier(.2,1.6,.4,1);filter:drop-shadow(0 0 calc(var(--u)*1.2) var(--glow))}
.pick .gem svg{display:block;width:100%;height:auto}
.pick small{font-size:calc(var(--u)*3.2);letter-spacing:.12em;color:#fff;opacity:.75;transition:opacity .3s}
.pick.on .gem{transform:translateY(calc(var(--u)*-2.4)) scale(1.18);filter:drop-shadow(0 0 calc(var(--u)*2.6) var(--glow)) drop-shadow(0 0 calc(var(--u)*1) #fff)}
.pick.on small{opacity:1;text-shadow:0 0 calc(var(--u)*1.5) var(--glow)}
.gate.is-on .pick{animation:gemIn .6s cubic-bezier(.2,1.6,.4,1) both}
.gate.is-on .pick:nth-child(1){animation-delay:.7s}.gate.is-on .pick:nth-child(2){animation-delay:.78s}
.gate.is-on .pick:nth-child(3){animation-delay:.86s}.gate.is-on .pick:nth-child(4){animation-delay:.94s}
.gate.is-on .pick:nth-child(5){animation-delay:1.02s}
@keyframes gemIn{from{opacity:0;transform:translateY(60%) scale(.4)}}

.enter{flex:none;position:relative;overflow:hidden;width:100%;height:calc(var(--u)*15);margin-top:calc(var(--u)*3);border-radius:999px;
  background:#050005;touch-action:none;
  box-shadow:0 0 0 calc(var(--u)*.7) #000,0 0 0 calc(var(--u)*1.4) var(--m1),0 0 0 calc(var(--u)*2) #000,0 0 calc(var(--u)*6) var(--c1);
  opacity:.25;filter:grayscale(1);transition:opacity .4s,filter .4s;pointer-events:none}
.enter.ready{opacity:1;filter:none;pointer-events:auto;animation:enterGlow 1.6s ease-in-out infinite}
@keyframes enterGlow{50%{box-shadow:0 0 0 calc(var(--u)*.7) #000,0 0 0 calc(var(--u)*1.4) var(--m1),0 0 0 calc(var(--u)*2) #000,0 0 calc(var(--u)*11) var(--c1)}}
.enter-fill{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--c2),var(--c1) 60%,var(--hi))}
.enter-label{position:relative;font-size:calc(var(--u)*6);letter-spacing:.1em;color:#fff;
  text-shadow:0 0 calc(var(--u)*1.6) var(--c1),0 calc(var(--u)*.4) 0 #000}
.enter-label i{font-style:normal;color:var(--c1);display:inline-block;animation:beat 1.2s infinite}
.enter.nudge{animation:nudge .4s}
@keyframes nudge{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}

/* ================= 3. WORLD ================= */
.world{padding-bottom:calc(env(safe-area-inset-bottom) + var(--u)*3)}
.w-photo{position:absolute;inset:0;background:var(--photo,none) 50% 50%/cover no-repeat;display:none}
.world.has-photo .w-photo{display:block}
.world.has-photo .vend,.world.has-photo .sign,.world.has-photo .disco{display:none}
.world.has-photo .w-head{background:linear-gradient(180deg,rgba(0,0,0,.6),transparent);margin:0 calc(var(--u)*-4);padding:0 calc(var(--u)*4) calc(var(--u)*6)}

.w-head{position:relative;z-index:4;text-align:center;flex:none;margin-top:calc(var(--u)*10)} /* 上の CHANGE HEART / ♪ の段をよける */
.w-logo{font-family:"Rubik Wet Paint","Anton",sans-serif;font-size:calc(var(--u)*9);color:var(--c1);letter-spacing:.04em;line-height:1;
  text-shadow:calc(var(--u)*.4) calc(var(--u)*.4) 0 #000,calc(var(--u)*-.4) calc(var(--u)*.4) 0 #000,calc(var(--u)*.4) calc(var(--u)*-.4) 0 #000,calc(var(--u)*-.4) calc(var(--u)*-.4) 0 #000,0 0 calc(var(--u)*4) var(--c1)}
.w-logo i{font-style:normal;display:inline-block;animation:beat 1.2s infinite}
body[data-heart=black] .w-logo,body[data-heart=silver] .w-logo{color:#fff}
.w-side{font-family:"Yellowtail",cursive;font-size:calc(var(--u)*15);line-height:1.05;transform:rotate(-5deg)}

.sign{position:absolute;z-index:1;text-align:center;pointer-events:none}
.sign-l{left:calc(var(--u)*2);top:calc(env(safe-area-inset-top) + var(--u)*47);width:calc(var(--u)*34);
  font-family:"Yellowtail",cursive;font-size:calc(var(--u)*8.4);line-height:1;transform:rotate(-7deg)}
.sign-l span{display:block}
.sign-l i{display:block;font-style:normal;font-family:system-ui,sans-serif;font-size:calc(var(--u)*7);margin-top:calc(var(--u)*1)}
.sign-r{right:calc(var(--u)*1);top:calc(env(safe-area-inset-top) + var(--u)*43);width:calc(var(--u)*38);aspect-ratio:100/94;transform:rotate(6deg)}
.sign-r svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sign-r .nh{fill:none;stroke:var(--hi);stroke-width:3;filter:drop-shadow(0 0 2px var(--c1)) drop-shadow(0 0 6px var(--c1)) drop-shadow(0 0 12px var(--c2))}
.sign-r div{position:absolute;inset:18% 12% 30%;display:flex;flex-direction:column;justify-content:center;
  font-size:calc(var(--u)*4.6);line-height:1.02;letter-spacing:.06em}
.sign .neon-t{color:var(--hi);text-shadow:0 0 1px #fff,0 0 calc(var(--u)*.8) var(--c1),0 0 calc(var(--u)*2.2) var(--c1),0 0 calc(var(--u)*5) var(--c2)}
.sign-r .cross{position:absolute;left:50%;top:-38%;width:calc(var(--u)*7);height:calc(var(--u)*12);margin-left:calc(var(--u)*-3.5)}
.world.entering .sign-l{animation:neonOn 1.2s .6s both}
.world.entering .sign-r{animation:neonOn 1.2s .85s both}
.world.entering .w-head{animation:dropIn .8s .2s cubic-bezier(.2,1.4,.4,1) both}

/* 自販機 */
.vend{position:relative;z-index:2;flex:none;width:calc(var(--u)*76);margin-top:auto;margin-bottom:calc(var(--u)*8)}
.world.entering .vend{animation:vendIn 1s .1s cubic-bezier(.2,1.25,.4,1) both}
@keyframes vendIn{from{opacity:0;transform:translateY(40%) scale(.85)}}
.vend-bow{position:absolute;z-index:3;top:calc(var(--u)*-8.5);left:50%;width:calc(var(--u)*30);transform:translateX(-50%)}
.vend-bow svg{display:block;width:100%;height:auto;filter:drop-shadow(0 0 calc(var(--u)*2) var(--c1))}
.vend-body{position:relative;border-radius:calc(var(--u)*4);padding:calc(var(--u)*3.2) calc(var(--u)*3);
  display:grid;grid-template-columns:1fr calc(var(--u)*15);grid-template-rows:auto auto;gap:calc(var(--u)*2.4);
  box-shadow:0 0 0 calc(var(--u)*.6) #fff,0 0 0 calc(var(--u)*1.4) #000,0 0 calc(var(--u)*8) var(--c1),0 calc(var(--u)*6) calc(var(--u)*8) rgba(0,0,0,.7),inset 0 0 calc(var(--u)*4) rgba(0,0,0,.45)}
.vend-body::before{content:"";position:absolute;inset:calc(var(--u)*1);border-radius:calc(var(--u)*3.2);pointer-events:none;
  background:
    radial-gradient(circle,#fff 0 1px,var(--hi) 1.6px,var(--c1) 2.4px,transparent 3px) 0 0/8px 8px repeat-x,
    radial-gradient(circle,#fff 0 1px,var(--hi) 1.6px,var(--c1) 2.4px,transparent 3px) 0 100%/8px 8px repeat-x,
    radial-gradient(circle,#fff 0 1px,var(--hi) 1.6px,var(--c1) 2.4px,transparent 3px) 0 0/8px 8px repeat-y,
    radial-gradient(circle,#fff 0 1px,var(--hi) 1.6px,var(--c1) 2.4px,transparent 3px) 100% 0/8px 8px repeat-y}
.vend-glass{position:relative;border-radius:calc(var(--u)*1.8);padding:calc(var(--u)*2.2) calc(var(--u)*1.6) calc(var(--u)*1.2);overflow:hidden;
  background:radial-gradient(90% 70% at 50% 40%,var(--bg2),#000 90%);
  box-shadow:inset 0 0 0 calc(var(--u)*.7) #000,inset 0 0 calc(var(--u)*5) var(--c1),0 0 0 calc(var(--u)*.6) var(--m1)}
.vend-glass::before{content:"";position:absolute;inset:calc(var(--u)*.9);border-radius:calc(var(--u)*1.2);pointer-events:none;z-index:2;
  border:calc(var(--u)*.7) dotted var(--hi);filter:drop-shadow(0 0 3px var(--c1)) drop-shadow(0 0 8px var(--c1));animation:ledRun 1.2s steps(2) infinite}
@keyframes ledRun{50%{opacity:.6}}
.vend-glass::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(118deg,rgba(255,255,255,.22) 0 14%,transparent 15% 62%,rgba(255,255,255,.1) 63% 68%,transparent 69%)}
.shelf{position:relative;display:flex;justify-content:center;align-items:flex-end;height:calc(var(--u)*19.5);padding:0 calc(var(--u)*1)}
.shelf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--u)*1.2);
  background:linear-gradient(180deg,rgba(255,255,255,.85),var(--m2) 50%,rgba(0,0,0,.4));box-shadow:0 0 calc(var(--u)*2) var(--c1)}
.slot{position:relative;width:calc(var(--u)*15.5);margin:0 calc(var(--u)*-1.6);transform-origin:50% 100%;cursor:pointer}
.slot .bun,.slot img{display:block;width:100%;height:auto}
.slot.wig{animation:wig .6s ease-in-out}
@keyframes wig{20%{transform:rotate(-14deg) translateY(-8%)}45%{transform:rotate(12deg) translateY(-12%)}70%{transform:rotate(-6deg)}}
.world.entering .slot{animation:slotIn .5s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(.6s + var(--i)*.05s)}
@keyframes slotIn{from{opacity:0;transform:translateY(-40%) scale(.6)}}
.vend-panel{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*2.2);
  padding:calc(var(--u)*2.4) calc(var(--u)*1.2);border-radius:calc(var(--u)*1.6);background:linear-gradient(180deg,#0b0b0f,#000);
  box-shadow:inset 0 0 0 calc(var(--u)*.5) var(--m2),inset 0 0 calc(var(--u)*2) rgba(255,255,255,.08)}
.vp-screen{font-family:"VT323",monospace;font-size:calc(var(--u)*4.4);line-height:1;padding:calc(var(--u)*.5) calc(var(--u)*1.2);
  color:var(--c1);background:#000;border:calc(var(--u)*.4) solid var(--m2);text-shadow:0 0 6px var(--c1)}
.vp-keys{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*1.3)}
.vp-keys i{width:calc(var(--u)*4.4);height:calc(var(--u)*4.1);background:var(--c1);
  -webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat;filter:drop-shadow(0 0 3px var(--c1))}
.vp-keys i:nth-child(3n){animation:blink 1.4s steps(1) infinite}
.vp-coin{width:calc(var(--u)*3.4);height:calc(var(--u)*9);border-radius:calc(var(--u)*1);background:#000;
  box-shadow:0 0 0 calc(var(--u)*.5) var(--m1),inset 0 0 0 calc(var(--u)*1.2) #222}
.vp-gem{width:calc(var(--u)*11);margin-top:auto}
.vp-gem svg,.vp-bow svg{display:block;width:100%;height:auto;filter:drop-shadow(0 0 calc(var(--u)*1.5) var(--c1))}
.vp-bow{width:calc(var(--u)*12)}
.vend-out{grid-column:1;grid-row:2;position:relative;height:calc(var(--u)*17);border-radius:calc(var(--u)*1.6);overflow:hidden;
  display:flex;justify-content:center;align-items:flex-end;gap:calc(var(--u)*1);padding-bottom:calc(var(--u)*.8);
  background:linear-gradient(180deg,#000,var(--bg1));
  box-shadow:inset 0 0 0 calc(var(--u)*.7) #000,inset 0 calc(var(--u)*2) calc(var(--u)*3) rgba(0,0,0,.9),0 0 0 calc(var(--u)*.6) var(--m1)}
.vend-out::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.2) 0 12%,transparent 13%);pointer-events:none}
.vend-out .slot{width:calc(var(--u)*17);margin:0}
.vend-out .slot:first-child{transform:rotate(-22deg) translateY(14%)}
.vend-out .slot:last-child{transform:rotate(18deg) translateY(16%)}

.disco{position:absolute;z-index:3;bottom:calc(env(safe-area-inset-bottom) + var(--u)*2);width:calc(var(--u)*24);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0 6%,transparent 22%),
    repeating-linear-gradient(0deg,transparent 0 calc(var(--u)*2),rgba(0,0,0,.45) calc(var(--u)*2) calc(var(--u)*2.3)),
    repeating-linear-gradient(90deg,transparent 0 calc(var(--u)*2),rgba(0,0,0,.45) calc(var(--u)*2) calc(var(--u)*2.3)),
    radial-gradient(circle at 40% 35%,#fff,var(--m1) 30%,var(--m2) 55%,var(--m3) 85%,#000);
  box-shadow:0 0 calc(var(--u)*6) var(--c1),inset calc(var(--u)*-2) calc(var(--u)*-3) calc(var(--u)*5) rgba(0,0,0,.6);
  animation:discoSpin 3s linear infinite}
.disco.l{left:calc(var(--u)*-8)}
.disco.r{right:calc(var(--u)*-8);animation-direction:reverse}
@keyframes discoSpin{to{background-position:0 0,calc(var(--u)*4.6) 0,calc(var(--u)*4.6) 0,0 0}}
.world.entering .disco{animation:rollIn 1s .3s cubic-bezier(.2,1.3,.4,1) both,discoSpin 3s linear infinite}
@keyframes rollIn{from{opacity:0;transform:translateY(60%) scale(.3)}}

.recolor{position:absolute;z-index:6;left:calc(var(--u)*3);top:calc(env(safe-area-inset-top) + var(--u)*3);
  height:calc(var(--u)*10);padding:0 calc(var(--u)*3.4);border-radius:999px;
  font-size:calc(var(--u)*3.8);letter-spacing:.12em;color:#fff;background:rgba(0,0,0,.6);
  box-shadow:0 0 0 1.5px var(--m1),0 0 calc(var(--u)*3) var(--c1);text-shadow:0 0 6px var(--c1)}

/* ---------------- 演出レイヤー ---------------- */
.shock{position:fixed;inset:0;z-index:25;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--x,50%) var(--y,50%),#fff 0,var(--hi) 6%,var(--c1) 18%,transparent 62%)}
.shock.go{animation:shock .7s ease-out}
@keyframes shock{0%{opacity:1}100%{opacity:0}}
.flood{position:fixed;z-index:26;left:0;top:0;width:60px;height:56px;margin:-28px 0 0 -30px;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 45%,#fff 0,var(--hi) 12%,var(--c1) 35%,var(--c2) 60%,var(--bg1) 100%);
  -webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat}
.flood.go{animation:flood 1.5s cubic-bezier(.6,0,.3,1) forwards}
@keyframes flood{0%{opacity:1;transform:scale(.2)}45%{opacity:1;transform:scale(48)}100%{opacity:0;transform:scale(70)}}

/* ---------------- バニー（仮キャラ。assets/ に画像を置けば差し替わる） ---------------- */
.bun{display:block;overflow:visible}
.bun .fur{fill:var(--fur);stroke:var(--line);stroke-width:4.5;stroke-linejoin:round}
.bun .inner{fill:var(--c1);opacity:.85}
.bun .stitch{fill:none;stroke:var(--stitch);stroke-width:1.6;stroke-dasharray:3 4}
.bun .eye{fill:none;stroke:var(--eye);stroke-width:6.5;stroke-linecap:round}
.bun .nose{fill:var(--eye)}
.bun .blush{stroke:var(--c1);stroke-width:2.4;stroke-linecap:round}
.bun .bow path{fill:var(--bow);stroke:#000;stroke-width:3;stroke-linejoin:round}
.bun .bow .knot{fill:var(--hi)}
.bun .bow .shine{fill:#fff;stroke:none;opacity:.85}
.bun .pawheart{fill:var(--c1)}
.bun.w{--fur:#fff;--line:#0a0a0e;--eye:#0a0a0e;--stitch:rgba(0,0,0,.3)}
.bun.k{--fur:#18181e;--line:#000;--eye:#fff;--stitch:rgba(255,255,255,.38)}
.bun.k .inner{fill:#34343f;opacity:1}
.bun.k .paws .fur{fill:#fff}
body[data-heart=black] .bun .inner{fill:#d8d8e4}
body[data-heart=black] .bun.k .inner{fill:#34343f}
body[data-heart=black] .bun .blush,body[data-heart=black] .bun .pawheart{stroke:#ff2a7a;fill:#ff2a7a}
.bun.xray .fur{fill:rgba(140,230,255,.1);stroke:#aef6ff;stroke-width:3}
.bun.xray .inner,.bun.xray .blush{display:none}
.bun.xray .stitch{stroke:rgba(170,240,255,.45)}
.bun.xray .eye{stroke:#dff}
.bun.xray .nose{fill:#dff}
.bun.xray .bow path{fill:rgba(255,110,210,.35);stroke:#ffb3ea}
.bun.xray .pawheart{fill:#ff7ad6}

@media (prefers-reduced-motion:reduce){
  .hanger,.amb-bg::after,.big-rays{animation:none}
}