/* 入門の場面（join-scene.js）。色はキャラごとの --join-color（光・紙吹雪）と --join-glow（光の芯）。
   段は2種類の印で描き分ける：data-phase＝いまの段（入りの動きを付ける）、data-<段>＝通った段（最後の姿を置く）。
   入りの動きが外れても最後の姿のまま止まるので、途中で飛ばしても（.is-skipped）同じ見た目になる。
   型 shoji：障子の向こうの光（--light）が 白→青→金→虹 と上がり、影のぼかし（--blur）が減り、戸のすき間（--seam）が広がる。 */
@property --light{syntax:'<color>';inherits:true;initial-value:#ffe7c2}
@property --blur{syntax:'<length>';inherits:true;initial-value:7px}
@property --seam{syntax:'<length>';inherits:true;initial-value:0px}
@property --paper{syntax:'<number>';inherits:true;initial-value:.4}
dialog.join-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#10142b;box-shadow:none;overflow:hidden;color:#fff}
dialog.join-dialog::backdrop{background:#0b0f22}
.join-scene{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:calc(max(12px,env(safe-area-inset-top)) + 38px) 20px max(38px,env(safe-area-inset-bottom));overflow:hidden;text-align:center;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
 background:radial-gradient(120% 70% at 50% 46%,#2b3160 0%,#171c3a 52%,#0b0f22 100%);
 --light:#ffe7c2;--blur:7px;--seam:0px;--paper:.4;transition:--light .45s,--blur .5s,--seam .35s,--paper .45s}
.join-scene[data-knock]{--seam:2px;--paper:.5}
.join-scene[data-tap1]{--light:#4fb0ff;--blur:5px;--seam:4px;--paper:.58}
.join-scene[data-tap2]{--light:#ffc531;--blur:3px;--seam:7px;--paper:.66}
.join-scene[data-tap3]{--light:#ff5fcf;--blur:1.5px;--seam:11px;--paper:.75}
.join-scene[data-hush]{--seam:3px;--paper:.3}
.join-scene[data-open]{--light:#fff4d8;--blur:0px}
.join-scene[data-done]{cursor:default}
.js-caption{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* 部屋の暗さ。戸が開くまでは暗く、山場の前にいちばん暗くなる */
.js-shade{position:absolute;inset:0;background:#000;opacity:.72;pointer-events:none;transition:opacity .6s}
.join-scene[data-knock] .js-shade{opacity:.62}
.join-scene[data-tap2] .js-shade{opacity:.52}
.join-scene[data-hush] .js-shade{opacity:.86;transition-duration:.25s}
.join-scene[data-open] .js-shade{opacity:0;transition-duration:.15s}

/* スキップ（右上）。正体が出たら消える（そのあとは場面のタップで最後の姿へ）。場面の上の余白（38px）はこのボタンの分 */
.js-skip{position:absolute;z-index:3;top:max(12px,env(safe-area-inset-top));right:12px;padding:6px 14px;border:1px solid #ffffff59;border-radius:999px;background:#0006;color:#ffffffd9;font:inherit;font-size:13px;font-weight:800;letter-spacing:.08em;cursor:pointer;transition:opacity .3s,visibility .3s}
.js-skip::after{content:' ▶▶';font-size:10px}
.join-scene[data-reveal] .js-skip{opacity:0;visibility:hidden}

/* 上の一行：だれか来た → 気配が強く → 紋の気配 → 来る → 新しい仲間 */
.js-kicker{position:relative;z-index:1;display:grid;margin:0;font-size:15px;font-weight:800;letter-spacing:.08em;line-height:1.5}
.js-kicker span{grid-area:1/1;opacity:0;transition:opacity .3s}
.js-kicker .js-k0{opacity:1;animation:js-fade-in .6s both}
.js-k2,.js-k3{color:#ffe38a}
.js-k3{font-size:18px;letter-spacing:.24em}
.js-after{color:var(--join-glow)}
.join-scene[data-tap1] .js-k0{opacity:0}
.join-scene[data-tap1]:not([data-tap2]) .js-k1,.join-scene[data-tap2]:not([data-tap3]) .js-k2,.join-scene[data-tap3]:not([data-reveal]) .js-k3,.join-scene[data-reveal] .js-after{opacity:1}
.join-scene[data-phase="tap1"] .js-k1,.join-scene[data-phase="tap2"] .js-k2,.join-scene[data-phase="tap3"] .js-k3{animation:js-kick .4s cubic-bezier(.3,1.6,.5,1) both}

/* 口ぐせの吹き出し。場所は最初から取っておく（出たときに画面がずれない） */
.js-bubble{position:relative;z-index:1;max-width:min(88vw,360px);padding:9px 16px;border-radius:18px;background:#fff;color:#1d2440;font-weight:800;font-size:17px;line-height:1.5;box-shadow:0 5px 0 #0005;opacity:0;transform:translateY(10px) scale(.8);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.js-bubble::after{content:'';position:absolute;left:50%;bottom:-9px;margin-left:-9px;border:9px solid transparent;border-bottom:0;border-top-color:#fff}
.js-bubble small{display:block;margin-top:2px;font-size:12px;font-weight:600;color:#5b6479;line-height:1.4}
.join-scene[data-greet] .js-bubble{opacity:1;transform:none}

/* 土俵：光の柱・光の輪・光の筋・足もとの影・力士・障子・？・衝撃の輪 */
/* 土俵の飾りは画面の外まで広がるので、タップを受けない（下の場面が受ける） */
.js-stage{position:relative;flex:none;width:min(66vw,300px,32dvh);aspect-ratio:1;pointer-events:none;container-type:inline-size;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.join-scene[data-tap1] .js-stage{transform:scale(1.02)}
.join-scene[data-tap2] .js-stage{transform:scale(1.05)}
.join-scene[data-tap3] .js-stage{transform:scale(1.08)}
.join-scene[data-hush] .js-stage{transform:scale(1.11);transition:transform .9s ease-in}
.join-scene[data-open] .js-stage{transform:none;transition:transform .3s ease-out}
.join-scene[data-phase="open"] .js-stage{animation:js-shake .45s both}
.js-pillar{position:absolute;left:20%;right:20%;bottom:2%;height:320%;border-radius:50% 50% 0 0/8% 8% 0 0;background:linear-gradient(to top,#fff 0%,color-mix(in srgb,var(--light) 60%,#fff) 30%,transparent 100%);filter:blur(8px);opacity:0;transform:scaleX(.1);transform-origin:50% 100%;transition:opacity .5s,transform .5s}
.join-scene[data-open] .js-pillar{opacity:.9;transform:none}
.join-scene[data-phase="open"] .js-pillar{animation:js-pillar .5s cubic-bezier(.2,1.4,.4,1) both}
.join-scene[data-reveal] .js-pillar{opacity:.35}
.join-scene[data-name] .js-pillar{opacity:0;transition-duration:1.2s}
.js-halo{position:absolute;inset:-26%;border-radius:50%;opacity:0;transform:scale(.6);transition:opacity .45s,transform .6s cubic-bezier(.3,1.3,.5,1);
 background:radial-gradient(circle,#fff 0%,var(--light) 26%,color-mix(in srgb,var(--light) 55%,transparent) 44%,transparent 66%)}
.join-scene[data-dark] .js-halo{opacity:.45;transform:scale(.8)}
.join-scene[data-knock] .js-halo{opacity:.7;transform:scale(.9)}
.join-scene[data-tap1] .js-halo{opacity:.85;transform:none}
.join-scene[data-tap2] .js-halo{opacity:.95;transform:scale(1.08)}
.join-scene[data-tap3] .js-halo{opacity:1;transform:scale(1.16)}
.join-scene[data-hush] .js-halo{opacity:.12;transform:scale(.7);transition-duration:.25s}
.join-scene[data-open] .js-halo{opacity:1;transform:scale(1.2)}
.join-scene[data-reveal] .js-halo{transform:scale(1.14);background:radial-gradient(circle,#fff 0%,var(--join-glow) 22%,color-mix(in srgb,var(--join-color) 80%,transparent) 40%,transparent 66%)}
.join-scene:is([data-phase="knock"],[data-phase="tap1"],[data-phase="tap2"]) .js-halo{animation:js-breathe 1.1s ease-in-out infinite alternate}
.join-scene[data-phase="tap3"] .js-halo{animation:js-hue 1.2s linear infinite,js-breathe .3s ease-in-out infinite alternate}
.js-rays{position:absolute;inset:-48%;border-radius:50%;opacity:0;transition:opacity .5s;animation:js-spin 16s linear infinite;
 background:repeating-conic-gradient(from 0deg,var(--join-glow) 0deg 6deg,transparent 6deg 20deg);
 -webkit-mask:radial-gradient(circle,#000 16%,transparent 66%);mask:radial-gradient(circle,#000 16%,transparent 66%)}
.join-scene[data-rainbow] .js-rays{background:repeating-conic-gradient(from 0deg,#ef5a5a 0deg 6deg,transparent 6deg 17deg,#f7d154 17deg 23deg,transparent 23deg 34deg,#4fa9e0 34deg 40deg,transparent 40deg 51deg)}
.join-scene[data-tap3] .js-rays{opacity:.35}
.join-scene[data-hush] .js-rays{opacity:0}
.join-scene[data-open] .js-rays{opacity:.8}
.js-spot{position:absolute;left:16%;right:16%;bottom:-5%;height:12%;border-radius:50%;background:radial-gradient(closest-side,#0009,transparent)}
/* 力士：戸が開くまでは障子に映る影（黒塗り＋ぼかし）、開いたら光の縁どりの影絵、光ったら正体 */
.js-actor{position:absolute;inset:0;transform-origin:50% 100%;opacity:0}
.js-body{position:absolute;inset:0;transform-origin:50% 100%;filter:brightness(0) blur(var(--blur))}
.js-body .sumo-sprite{width:100%;height:100%}
.join-scene[data-arrive] .js-actor{opacity:1}
.join-scene[data-phase="arrive"] .js-actor{animation:js-drop .75s linear both}
.join-scene[data-phase="wonder"] .js-actor{animation:js-hop .85s ease-in-out both}
.join-scene[data-open] .js-body{filter:brightness(0) drop-shadow(0 0 5px #fff) drop-shadow(0 0 16px var(--join-glow))}
.join-scene[data-phase="open"] .js-body{animation:js-tremble .09s linear infinite}
.join-scene[data-reveal] .js-body{filter:none;transition:filter .22s}
.join-scene[data-phase="reveal"] .js-actor{animation:js-pop .55s cubic-bezier(.3,1.5,.5,1) both}
.join-scene[data-phase="done"] .js-body{animation:js-bob 2.6s ease-in-out infinite}
/* 障子：枠と桟（::after）、向こうの光で色づく紙（::before）。紙は半透明で、後ろの影が透ける */
/* 戸は名札の場所（土俵の下 70px）まで下ろす。名札は戸が開いてから出る */
.js-doors{position:absolute;left:-14%;right:-14%;top:-12%;bottom:-70px;display:flex;opacity:0;transition:opacity .9s}
.join-scene[data-dark] .js-doors{opacity:1}
.js-door{position:relative;flex:1;border:5px solid #4a2f1a;box-shadow:inset 0 0 0 2px #7a5433,0 6px 18px #0008;transition:transform .5s cubic-bezier(.2,.9,.3,1),opacity .35s .15s}
.js-door.l{border-right-width:3px}.js-door.r{border-left-width:3px}
.js-door::before{content:'';position:absolute;inset:0;opacity:var(--paper);
 background:radial-gradient(130% 85% at var(--cx) 58%,color-mix(in srgb,var(--light) 75%,#fff) 0%,color-mix(in srgb,var(--light) 50%,transparent) 50%,color-mix(in srgb,var(--light) 12%,transparent) 100%),#efe3c826}
.js-door.l::before{--cx:100%}.js-door.r::before{--cx:0%}
.js-door::after{content:'';position:absolute;inset:0;background:
 linear-gradient(90deg,transparent calc(33.3% - 1.5px),#4a2f1a calc(33.3% - 1.5px) calc(33.3% + 1.5px),transparent calc(33.3% + 1.5px) calc(66.6% - 1.5px),#4a2f1a calc(66.6% - 1.5px) calc(66.6% + 1.5px),transparent calc(66.6% + 1.5px)),
 repeating-linear-gradient(180deg,transparent 0 calc(16.66% - 3px),#4a2f1a calc(16.66% - 3px) 16.66%)}
/* 3回目（虹）：紙も光も七色。色がめぐる */
.join-scene[data-tap3]:not([data-open]) .js-door::before{background:radial-gradient(130% 85% at var(--cx) 58%,#ffffffb3 0%,#fff0 55%),linear-gradient(165deg,#ff6b6b,#ffb84d,#fff27a,#6fe07a,#5cc8ff,#8a7dff,#e27dff)}
.join-scene[data-tap3]:not([data-open]) .js-halo{background:radial-gradient(circle,#fff 0%,#fff0 42%),conic-gradient(#ff6b6b,#ffb84d,#fff27a,#6fe07a,#5cc8ff,#8a7dff,#e27dff,#ff6b6b);-webkit-mask:radial-gradient(circle,#000 22%,transparent 66%);mask:radial-gradient(circle,#000 22%,transparent 66%)}
.join-scene[data-phase="tap3"] .js-door::before,.join-scene[data-phase="tap3"] .js-seam{animation:js-hue 1.2s linear infinite}
.join-scene[data-phase="arrive"] .js-doors{animation:js-rattle1 .32s .43s both}
.join-scene[data-phase="tap1"] .js-doors{animation:js-rattle1 .32s both}
.join-scene[data-phase="tap2"] .js-doors{animation:js-rattle2 .38s both}
.join-scene[data-phase="tap3"] .js-doors{animation:js-rattle3 .42s both,js-shiver .07s .42s linear infinite}
.join-scene[data-phase="hush"] .js-doors{animation:js-bulge .45s ease-in-out infinite alternate}
.join-scene[data-open] .js-door.l{transform:translateX(-125%) rotate(-10deg);opacity:0}
.join-scene[data-open] .js-door.r{transform:translateX(125%) rotate(10deg);opacity:0}
.js-seam{position:absolute;left:50%;top:3%;bottom:3%;width:var(--seam);transform:translateX(-50%);border-radius:99px;background:#fff;opacity:0;transition:opacity .4s;
 box-shadow:0 0 10px 3px var(--light),0 0 34px 10px color-mix(in srgb,var(--light) 70%,transparent)}
.join-scene[data-knock] .js-seam{opacity:.85}
.join-scene[data-open] .js-seam{opacity:0;transition-duration:.1s}
/* 紋の手がかり：2回目のタップで戸の上に丸紋が浮かび、3回目で脈打つ（影の形は隠さない） */
.js-hint{position:absolute;left:50%;top:15%;display:grid;place-items:center;width:30cqw;aspect-ratio:1;border:max(3px,1.2cqw) solid currentColor;border-radius:50%;font-family:'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif;font-size:19cqw;box-shadow:0 0 12px var(--join-glow),inset 0 0 10px var(--join-glow);font-weight:900;line-height:1;
 color:color-mix(in srgb,var(--join-color) 75%,#1a0f08);text-shadow:0 0 10px var(--join-glow),0 0 26px var(--join-color),0 0 2px #fff;
 opacity:0;transform:translate(-50%,-50%) scale(.4);transition:opacity .5s,transform .6s cubic-bezier(.3,1.6,.5,1)}
.join-scene[data-tap2] .js-hint{opacity:.92;transform:translate(-50%,-50%)}
.join-scene[data-phase="tap3"] .js-hint{animation:js-throb .3s ease-in-out infinite alternate}
.join-scene[data-open] .js-hint{opacity:0;transition:opacity .12s}
.js-q{position:absolute;z-index:1;font-size:clamp(28px,9vw,42px);font-weight:900;line-height:1;color:#fff;text-shadow:0 3px 0 #0007,0 0 12px #fff8;opacity:0;transition:opacity .25s}
.js-q.q1{left:2%;top:0;--r:-16deg}.js-q.q2{left:44%;top:-14%;--r:0deg}.js-q.q3{right:2%;top:2%;--r:14deg}
.join-scene[data-wonder]:not([data-tap1]) .js-q{opacity:1;transform:rotate(var(--r))}
.join-scene[data-phase="wonder"] .js-q{animation:js-q .6s cubic-bezier(.3,1.6,.5,1) both}
.join-scene[data-phase="wonder"] .js-q.q2{animation-delay:.14s}.join-scene[data-phase="wonder"] .js-q.q3{animation-delay:.28s}
.join-scene[data-phase="knock"] .js-q{animation:js-qbob 1.3s ease-in-out infinite alternate}
.join-scene[data-phase="knock"] .js-q.q2{animation-delay:-.4s}.join-scene[data-phase="knock"] .js-q.q3{animation-delay:-.8s}
.js-ring{position:absolute;left:50%;top:55%;width:40%;aspect-ratio:1;border:6px solid #fff;border-radius:50%;box-shadow:0 0 18px var(--light);opacity:0;transform:translate(-50%,-50%) scale(.2)}
.join-scene[data-phase="open"] .js-ring{animation:js-ring .7s ease-out both}

/* 下の場所：戸が開くまでは「戸を タップ！」、最後はボタン */
.js-foot{position:relative;z-index:1;display:grid;place-items:center;margin-top:6px}
.js-foot>*{grid-area:1/1}
.js-knock{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 26px;border:2px solid #ffffff8c;border-radius:999px;background:#ffffff1a;color:#fff;font:inherit;font-size:17px;font-weight:900;letter-spacing:.12em;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
/* 出るときはすぐ見える（すぐフォーカスできる）、消えるときは薄くなってから */
.join-scene[data-knock]:not([data-tap3]) .js-knock{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s;animation:js-beckon 1.1s ease-in-out infinite}
.js-pips{display:flex;gap:8px}
.js-pips i{width:10px;height:10px;border:2px solid #ffffffb3;border-radius:50%;transition:background .2s,box-shadow .2s}
.join-scene[data-tap1] .js-pips i:nth-child(1),.join-scene[data-tap2] .js-pips i:nth-child(2),.join-scene[data-tap3] .js-pips i:nth-child(3){background:var(--light);box-shadow:0 0 10px var(--light)}
/* 名札：紋・名前・入門の判 */
.js-plate{position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px;padding:8px 28px 8px 10px;border:3px solid #8a6333;border-radius:10px;background:linear-gradient(#fbf0d6,#f0dcad);color:#4a3218;box-shadow:0 5px 0 #5a3d1b,0 0 0 4px var(--join-color);opacity:0;transform:translateY(-36px) rotate(-3deg)}
.js-plate strong{font-size:clamp(28px,8vw,36px);font-weight:900;letter-spacing:.08em;line-height:1.3}
.js-crest{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--join-color);color:#fff;font-size:22px;font-weight:900;box-shadow:inset 0 0 0 2px #fff9}
.join-scene[data-rainbow] .js-crest{background:conic-gradient(#ef5a5a,#f59b3d,#f7d154,#6cc56a,#4fa9e0,#5a6fd6,#a067d0,#ef5a5a)}
.js-stamp{position:absolute;right:-16px;top:-18px;padding:1px 8px;border:3px solid #d2372b;border-radius:8px;background:#fff8ee;color:#d2372b;font-size:15px;font-weight:900;white-space:nowrap;opacity:0;transform:rotate(12deg) scale(0)}
.join-scene[data-name] .js-plate{opacity:1;transform:none}
.join-scene[data-name] .js-stamp{opacity:1;transform:rotate(12deg)}
.join-scene[data-phase="name"] .js-plate{animation:js-plate .45s cubic-bezier(.3,1.4,.5,1) both}
.join-scene[data-phase="name"] .js-stamp{animation:js-stamp .32s .28s cubic-bezier(.2,1.6,.4,1) both}

/* ボタンは最後に出る。場所は最初から取っておく */
.js-actions{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s,transform .35s}
.js-actions .button{min-width:220px}
.js-actions .text-button{color:#d4dafc}
.join-scene[data-done] .js-actions{opacity:1;visibility:visible;transform:none}

/* 光と粒 */
.js-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 44%,#fff 0%,#fff 34%,var(--light) 58%,transparent 86%)}
.join-scene[data-phase="open"] .js-flash{animation:js-flash-open .55s ease-out both}
.join-scene[data-reveal] .js-flash{background:radial-gradient(circle at 50% 44%,#fff 0%,#fff 28%,var(--join-glow) 52%,transparent 82%)}
.join-scene[data-phase="reveal"] .js-flash{animation:js-flash .6s ease-out both}
.js-fx{position:absolute;pointer-events:none}
.js-fx span{position:absolute;opacity:0}
.js-leak{left:50%;top:var(--y);width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--color);box-shadow:0 0 8px 2px var(--color);animation:js-leak 1s var(--delay) ease-out both}
.js-mote{left:50%;top:52%;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--color);box-shadow:0 0 10px 3px var(--color);animation:js-mote .75s var(--delay) cubic-bezier(.55,0,.9,.5) both}
.js-paper{left:50%;top:50%;width:var(--size);height:calc(var(--size)*.6);border-radius:2px;background:var(--color);animation:js-paper 2.1s var(--delay) cubic-bezier(.15,.7,.4,1) both}
.js-star{left:50%;top:50%;width:18px;height:18px;margin:-9px;background:var(--color);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:js-star 1.2s var(--delay) ease-out both}

/* キャラ専用の趣向（join-scene.js の MOTIFS・[data-motif]）。8人それぞれ。 */
/* 気配：2回目のタップから、障子に映る影の粒（雨・風・葉・花びら・羽根・小石）と火の明かり・月の空の星。戸の上に重ねる（紋と光のすき間はその上）。
   粒が多いのでぼかさない（スマホで重くしない） */
.js-mood{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .4s}
.join-scene[data-tap2] .js-mood{opacity:1}
.join-scene[data-hush] .js-mood{opacity:.5}
.join-scene[data-open] .js-mood{opacity:0;transition-duration:.1s}
.js-mood span{position:absolute;opacity:0}
.join-scene[data-motif="fire"] .js-mood::after{content:'';position:absolute;left:-10%;right:-10%;bottom:0;height:55%;background:radial-gradient(55% 100% at 50% 100%,#ff3d12d9,#ff7a2a80 45%,#ff7a2a00 75%);animation:js-flicker .16s steps(2) infinite alternate}
.join-scene[data-motif="fire"][data-tap3] .js-mood::after{height:75%}
/* 月（もちこ）：戸の向こう・影の後ろに満月。2回目のタップで下から昇って障子ごしに透け、静まる段で陰り、
   戸が開くと満月を背に影絵（後ろの光は弱めて月を見せる）。名札が出るころ消える */
.js-back{position:absolute;left:13%;top:-6%;width:74%;aspect-ratio:1;border-radius:50%;opacity:0;translate:0 38%;transition:opacity .8s,translate 1.6s cubic-bezier(.2,.7,.3,1),scale .5s;
 background:radial-gradient(circle at 66% 62%,#e3bd4f 0 7%,#0000 7.6%),radial-gradient(circle at 32% 68%,#e8c258 0 5%,#0000 5.6%),radial-gradient(circle at 46% 28%,#ebc964 0 4%,#0000 4.6%),
  radial-gradient(circle at 40% 38%,#fffbe6,#ffe89a 55%,#ffd24d);
 box-shadow:0 0 0 3px #ffe08a66,0 0 26px 8px #ffe08a99,0 0 80px 24px #ffd24d40}
.join-scene[data-tap2] .js-back{opacity:.95;translate:0 0}
.join-scene[data-tap3] .js-back{opacity:1;scale:1.04}
.join-scene[data-hush] .js-back{opacity:.35;transition-duration:.25s}
.join-scene[data-open] .js-back{opacity:1;scale:1.1;transition-duration:.2s,1.6s,.5s}
.join-scene[data-name] .js-back{opacity:0;transition-duration:1s}
.join-scene[data-motif="moon"][data-open]:not([data-reveal]) .js-halo{opacity:.5}
/* 気配と光の粒の動き（--x・--y から、--dx・--dy へ） */
.js-fall,.js-drift,.js-rise,.js-blow,.js-twinkle{left:var(--x);top:var(--y)}
.js-fall{animation:js-fall var(--life) linear both}
.js-drift{animation:js-drift var(--life) ease-in-out both}
.js-rise{animation:js-rise var(--life) ease-out both}
.js-blow{animation:js-blow var(--life) cubic-bezier(.3,0,.7,1) both}
.js-twinkle{margin:calc(var(--size,12px)/-2) 0 0 calc(var(--size,12px)/-2);animation:js-twinkle var(--life) var(--delay,0ms) ease-in-out both}
/* 粒の形（戸からもれる粒・気配・開いた瞬間・紙吹雪の半分）。色は --color */
.join-scene .is-streak{width:2px;height:var(--size,16px);margin:0;border-radius:2px;background:linear-gradient(#0000,var(--color));box-shadow:none;rotate:14deg}
.join-scene .is-gust{width:var(--size,60px);height:3px;margin:0;border-radius:3px;background:linear-gradient(90deg,#0000,var(--color) 35%,var(--color) 65%,#0000);box-shadow:none}
.join-scene .is-drop{width:calc(var(--size,8px)*.72);height:var(--size,8px);margin:0;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(circle at 35% 35%,#fff 0 18%,var(--color) 30%);box-shadow:0 0 6px color-mix(in srgb,var(--color) 60%,transparent)}
.join-scene .is-leaf{width:var(--size,12px);height:calc(var(--size,12px)*.58);margin:0;border-radius:0 100% 0 100%;background:linear-gradient(155deg,var(--color) 46%,color-mix(in srgb,var(--color) 60%,#000) 50%,var(--color) 54%);box-shadow:none}
.join-scene .is-petal{width:var(--size,11px);height:calc(var(--size,11px)*.82);margin:0;border-radius:0;background:radial-gradient(circle at 50% 80%,#fff8 0 20%,var(--color) 60%);clip-path:polygon(50% 16%,64% 0,86% 10%,100% 42%,86% 78%,50% 100%,14% 78%,0 42%,14% 10%,36% 0);box-shadow:none}
.join-scene .is-ember{width:calc(var(--size,6px)*.6);height:calc(var(--size,6px)*.6);margin:0;border-radius:50%;background:var(--color);box-shadow:0 0 6px 2px color-mix(in srgb,var(--color) 70%,#ff5a1f)}
.join-scene .is-feather{width:calc(var(--size,14px)*.46);height:var(--size,14px);margin:0;border-radius:50% 50% 50% 50%/72% 72% 28% 28%;background:linear-gradient(90deg,var(--color) 45%,#ffffffc0 47% 53%,var(--color) 55%);box-shadow:none}
.join-scene .is-pebble{width:var(--size,10px);height:calc(var(--size,10px)*.8);margin:0;border-radius:0;background:linear-gradient(135deg,color-mix(in srgb,var(--color) 70%,#fff),var(--color) 55%,color-mix(in srgb,var(--color) 70%,#000));clip-path:polygon(22% 0,78% 6%,100% 44%,86% 92%,36% 100%,0 72%,6% 22%);box-shadow:none}
.join-scene .is-mochi{width:var(--size,12px);height:calc(var(--size,12px)*.78);margin:0;border-radius:50% 50% 44% 44%/62% 62% 38% 38%;background:radial-gradient(circle at 38% 30%,#fff 0 22%,var(--color) 62%);box-shadow:0 1px 0 #0000001f}
.join-scene .is-star{width:var(--size,12px);height:var(--size,12px);border-radius:0;background:radial-gradient(circle,#fff 0 22%,var(--color) 48%);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);box-shadow:none}
.js-mood .is-feather,.js-mood .is-drop{background:var(--color)}
/* 戸の開き方：雨・羽根＝左右へはじけ飛ぶ（型 shoji のまま）、風＝回りながら吹き飛ぶ、葉＝化けの煙に消える、花＝すっと開く、
   火＝こちらへ突き破る、岩＝前へ崩れ落ちる、月＝つきたての餅のように下へぺったんとつぶれる */
.join-scene[data-motif="wind"] .js-door{transition:transform .8s cubic-bezier(.2,.8,.3,1),opacity .5s .3s}
.join-scene[data-motif="wind"][data-open] .js-door.l{transform:translate(-150%,-70%) rotate(-240deg)}
.join-scene[data-motif="wind"][data-open] .js-door.r{transform:translate(150%,-60%) rotate(260deg)}
.join-scene[data-motif="leaf"] .js-door{transition:transform .3s,opacity .2s .08s}
.join-scene[data-motif="leaf"][data-open] .js-door.l,.join-scene[data-motif="leaf"][data-open] .js-door.r{transform:scale(.92)}
.join-scene[data-motif="petal"] .js-door{transition:transform .75s cubic-bezier(.45,0,.2,1),opacity .4s .5s}
.join-scene[data-motif="petal"][data-open] .js-door.l{transform:translateX(-102%)}
.join-scene[data-motif="petal"][data-open] .js-door.r{transform:translateX(102%)}
.join-scene[data-motif="petal"][data-phase="open"] .js-stage{animation:none}
.join-scene[data-motif="fire"] .js-door{transition:transform .45s cubic-bezier(.1,.8,.3,1),opacity .3s .12s}
.join-scene[data-motif="fire"][data-open] .js-door.l{transform:translate(-80%,25%) scale(1.9) rotate(-28deg)}
.join-scene[data-motif="fire"][data-open] .js-door.r{transform:translate(80%,25%) scale(1.9) rotate(28deg)}
.join-scene[data-motif="rock"] .js-door{transform-origin:50% 100%;transition:transform .55s cubic-bezier(.5,0,.9,.6),opacity .3s .25s}
.join-scene[data-motif="rock"][data-open] .js-door.l{transform:translate(-25%,45%) rotate(-38deg)}
.join-scene[data-motif="rock"][data-open] .js-door.r{transform:translate(25%,45%) rotate(38deg)}
.join-scene[data-motif="moon"] .js-door{transform-origin:50% 100%;transition:transform .3s cubic-bezier(.6,-.3,.8,.4),opacity .25s .24s}
.join-scene[data-motif="moon"][data-open] .js-door.l{transform:translateX(-14%) scale(1.3,.05)}
.join-scene[data-motif="moon"][data-open] .js-door.r{transform:translateX(14%) scale(1.3,.05)}
/* 岩：3回目から地面が小さく揺れつづけ、戸が開くと大きく揺れる */
.join-scene[data-motif="rock"]:is([data-phase="tap3"],[data-phase="hush"]) .js-stage{animation:js-tremor .11s linear infinite}
.join-scene[data-motif="rock"][data-phase="open"] .js-stage{animation:js-quake .8s both}
/* 開いた瞬間の描き文字。名札が出るまで */
.js-sfx{position:absolute;z-index:2;left:50%;top:2%;white-space:nowrap;font-size:clamp(30px,15cqw,52px);font-weight:900;letter-spacing:.02em;line-height:1;color:#fff;
 --ink:color-mix(in srgb,var(--join-color) 72%,#000);
 text-shadow:3px 0 var(--ink),-3px 0 var(--ink),0 3px var(--ink),0 -3px var(--ink),2px 2px var(--ink),-2px -2px var(--ink),2px -2px var(--ink),-2px 2px var(--ink),0 7px 0 #0006,0 0 22px var(--join-glow);
 opacity:0;transform:translateX(-50%) rotate(-8deg) scale(.3)}
.join-scene[data-open]:not([data-name]) .js-sfx{animation:js-sfx 1.4s cubic-bezier(.2,1.5,.4,1) both}
.join-scene[data-motif="petal"][data-open]:not([data-name]) .js-sfx{animation:js-sfx-soft 1.4s ease-out both}
/* 岩：静まる段の「ゴゴゴゴ」（戸の左右に縦書き） */
.js-rumble{position:absolute;z-index:2;top:4%;writing-mode:vertical-rl;font-size:clamp(20px,10cqw,34px);font-weight:900;letter-spacing:-.04em;color:#d9c9ff;
 text-shadow:2px 0 #2a1d4a,-2px 0 #2a1d4a,0 2px #2a1d4a,0 -2px #2a1d4a,0 0 14px #8a6cff;opacity:0}
.js-rumble.l{left:-16%;rotate:-6deg}.js-rumble.r{right:-16%;top:22%;rotate:6deg}
.join-scene:is([data-phase="tap3"],[data-phase="hush"]) .js-rumble{opacity:1;animation:js-rumble .09s linear infinite}
.join-scene[data-phase="tap3"] .js-rumble{opacity:.45}
/* 開いた瞬間の飾り：雨の波紋・風のつむじ・煙（葉）と土けむり（岩）・火の玉 */
.js-ripple{left:50%;top:97%;width:44%;height:11%;margin:-5.5% 0 0 -22%;border:3px solid #cfeeff;border-radius:50%;box-shadow:0 0 10px #8fd0ff;animation:js-ripple 1.2s var(--delay) ease-out both}
.js-swirl{left:50%;top:50%;width:var(--size);height:var(--size);margin:calc(var(--size)/-2);border:4px solid #0000;border-top-color:#e2fff6;border-right-color:#9ff0da;border-radius:50%;filter:drop-shadow(0 0 6px #e2fff6);animation:js-swirl 1s var(--delay) ease-out both}
.js-puff{left:50%;top:var(--y);width:var(--size);height:var(--size);margin:calc(var(--size)/-2);border-radius:50%;filter:blur(2px);
 background:radial-gradient(circle at 42% 40%,#fff 0%,var(--color) 38%,color-mix(in srgb,var(--color) 82%,#6b5a44) 56%,color-mix(in srgb,var(--color) 50%,transparent) 64%,transparent 71%);animation:js-puff 1.35s var(--delay) ease-out both}
.js-flame{left:50%;top:58%;width:130%;aspect-ratio:1;margin:-65% 0 0 -65%;border-radius:50%;background:radial-gradient(circle,#fff6c8 0%,#ffcf5a 22%,#ff7a2a 46%,#e8563f00 70%);animation:js-flame .8s ease-out both}

/* 飛ばしたとき・動きを減らす設定：入りの動きと切り替えの変化を付けず、最後の姿だけ */
.join-scene.is-skipped,.join-scene.is-skipped *,.join-scene.is-skipped *::before,.join-scene.is-skipped *::after{transition:none!important}
.reduce-motion .join-scene,.reduce-motion .join-scene *,.reduce-motion .join-scene *::before{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.join-scene,.join-scene *,.join-scene *::before{animation:none!important;transition:none!important}}

@keyframes js-fade-in{from{opacity:0;transform:translateY(6px)}}
@keyframes js-kick{from{opacity:0;transform:scale(1.5)}}
@keyframes js-spin{to{transform:rotate(360deg)}}
@keyframes js-hue{to{filter:hue-rotate(360deg)}}
@keyframes js-breathe{from{scale:.95}to{scale:1.05}}
@keyframes js-beckon{0%,100%{transform:scale(1);box-shadow:0 0 0 0 #ffffff55}50%{transform:scale(1.07);box-shadow:0 0 0 12px #ffffff00}}
@keyframes js-drop{
 0%{opacity:0;transform:translateY(-120%) scale(.94);animation-timing-function:cubic-bezier(.55,0,1,.45)}
 8%{opacity:1}
 56%{transform:translateY(0) scale(1.1,.86);animation-timing-function:ease-out}
 74%{transform:translateY(-5%) scale(.97,1.04);animation-timing-function:ease-in}
 88%{transform:translateY(0) scale(1.02,.98)}
 100%{opacity:1;transform:none}}
@keyframes js-hop{
 0%,36%,72%,100%{transform:none}
 18%{transform:translateY(-8%) rotate(-5deg)}
 54%{transform:translateY(-5%) rotate(5deg)}}
@keyframes js-rattle1{20%{transform:translateX(-1.5%) rotate(-.6deg)}45%{transform:translateX(1.2%) rotate(.5deg)}70%{transform:translateX(-.6%)}}
@keyframes js-rattle2{15%{transform:translateX(-2.5%) rotate(-1deg) scale(1.02)}35%{transform:translateX(2.2%) rotate(1deg)}55%{transform:translateX(-1.4%)}75%{transform:translateX(.8%)}}
@keyframes js-rattle3{12%{transform:translateX(-3.5%) rotate(-1.5deg) scale(1.04)}28%{transform:translateX(3.2%) rotate(1.4deg) scale(1.03)}44%{transform:translateX(-2.4%) rotate(-.8deg)}62%{transform:translateX(1.6%)}80%{transform:translateX(-.8%)}}
@keyframes js-shiver{0%,100%{transform:translateX(0)}50%{transform:translateX(.9%)}}
@keyframes js-bulge{from{transform:none}to{transform:scale(1.025)}}
@keyframes js-throb{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.1)}}
@keyframes js-shake{0%,100%{translate:0 0}12%{translate:-11px 7px}26%{translate:10px -8px}40%{translate:-8px 5px}56%{translate:6px -4px}74%{translate:-3px 2px}}
@keyframes js-pillar{0%{opacity:0;transform:scaleX(.05)}40%{opacity:1;transform:scaleX(1.25)}100%{opacity:.9;transform:none}}
@keyframes js-tremble{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.6%) rotate(-1deg)}75%{transform:translateX(1.6%) rotate(1deg)}}
@keyframes js-pop{0%{transform:scale(1.2)}60%{transform:scale(.95)}100%{transform:none}}
@keyframes js-bob{50%{transform:translateY(-2.4%)}}
@keyframes js-q{0%{opacity:0;transform:translateY(22px) rotate(var(--r)) scale(.3)}60%{opacity:1;transform:rotate(var(--r)) scale(1.15)}100%{opacity:1;transform:rotate(var(--r))}}
@keyframes js-qbob{from{transform:rotate(var(--r))}to{transform:translateY(-8px) rotate(var(--r))}}
@keyframes js-ring{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.8)}}
@keyframes js-flash-open{0%{opacity:0}10%{opacity:1}100%{opacity:0}}
@keyframes js-flash{0%{opacity:0}14%{opacity:1}100%{opacity:0}}
@keyframes js-plate{0%{opacity:0;transform:translateY(-36px) rotate(-3deg)}100%{opacity:1;transform:none}}
@keyframes js-stamp{0%{opacity:0;transform:rotate(12deg) scale(2.4)}100%{opacity:1;transform:rotate(12deg) scale(1)}}
@keyframes js-leak{0%{opacity:0;transform:scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.8)}}
@keyframes js-mote{0%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(1.4)}25%{opacity:1}100%{opacity:0;transform:scale(.3)}}
@keyframes js-paper{0%{opacity:1;transform:none}35%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(calc(var(--spin)*.4))}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + var(--fall))) rotate(var(--spin))}}
@keyframes js-star{0%{opacity:0;transform:scale(.2)}30%{opacity:1;transform:translate(calc(var(--dx)*.7),calc(var(--dy)*.7)) scale(1.3) rotate(45deg)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.5) rotate(120deg)}}
@keyframes js-fall{0%{opacity:0;transform:translate(0,0) rotate(0deg)}8%,85%{opacity:var(--o,1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin,0deg))}}
@keyframes js-drift{0%{opacity:0;transform:translate(0,0) rotate(0deg)}10%{opacity:var(--o,1)}
 30%{transform:translate(var(--sway),calc(var(--dy)*.3)) rotate(calc(var(--spin)*.3))}
 60%{transform:translate(calc(var(--sway)*-1),calc(var(--dy)*.6)) rotate(calc(var(--spin)*.6))}
 88%{opacity:var(--o,1)}100%{opacity:0;transform:translate(calc(var(--sway)*.5),var(--dy)) rotate(var(--spin))}}
@keyframes js-rise{0%{opacity:0;transform:translate(0,0) scale(1)}15%{opacity:var(--o,1)}60%{transform:translate(calc(var(--dx)*.5),calc(var(--dy)*.6)) scale(1.2)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}
@keyframes js-blow{0%{opacity:0;transform:translate(0,0) rotate(0deg)}15%,80%{opacity:var(--o,1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin,0deg))}}
@keyframes js-twinkle{0%{opacity:0;transform:scale(.2) rotate(0deg)}45%{opacity:var(--o,1);transform:scale(1.15) rotate(calc(var(--spin,0deg)*.5))}100%{opacity:0;transform:scale(.3) rotate(var(--spin,0deg))}}
@keyframes js-flicker{from{opacity:.75}to{opacity:1}}
@keyframes js-tremor{0%,100%{translate:0 0}25%{translate:-2px 1px}50%{translate:2px -1px}75%{translate:-1px -1px}}
@keyframes js-quake{0%,100%{translate:0 0}8%{translate:-16px 10px}18%{translate:15px -12px}30%{translate:-13px 8px}44%{translate:10px -7px}60%{translate:-7px 5px}78%{translate:4px -3px}}
@keyframes js-sfx{0%{opacity:0;transform:translateX(-50%) rotate(-8deg) scale(.3)}16%{opacity:1;transform:translateX(-50%) rotate(-8deg) scale(1.18)}30%{transform:translateX(-50%) rotate(-8deg) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-14px) rotate(-8deg) scale(1.04)}}
@keyframes js-sfx-soft{0%{opacity:0;transform:translate(-50%,10px) rotate(-4deg)}18%{opacity:1}32%{transform:translateX(-50%) rotate(-4deg)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-10px) rotate(-4deg)}}
@keyframes js-rumble{0%,100%{translate:0 0}50%{translate:1.5px -1px}}
@keyframes js-ripple{0%{opacity:0;transform:scale(.2)}15%{opacity:1}100%{opacity:0;transform:scale(2.6)}}
@keyframes js-swirl{0%{opacity:0;transform:rotate(0deg) scale(.3)}20%{opacity:1}100%{opacity:0;transform:rotate(var(--turn)) scale(1.6)}}
@keyframes js-puff{0%{opacity:0;transform:translate(0,0) scale(.2)}18%{opacity:.96}62%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
@keyframes js-flame{0%{opacity:0;transform:scale(.2)}18%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}