/* ═════════════════════════════════════════════════════════
   LUXE — 動きと高級感の仕上げ
   金の流れる帯・光る飾り罫・金の照り返し・カーソル・レコードの演出
   ═════════════════════════════════════════════════════════ */

/* ───── 金の文字が流れる帯 ───── */
.ribbonband{position:relative;z-index:3;overflow:hidden;padding:18px 0;
  background:linear-gradient(180deg,#2a0409,#5e0a17 50%,#2a0409);
  border-top:1px solid rgba(231,193,105,.6);border-bottom:1px solid rgba(231,193,105,.6);
  box-shadow:0 0 0 4px rgba(7,7,10,.9),0 0 0 5px rgba(231,193,105,.25),0 20px 40px rgba(0,0,0,.5);transform:rotate(-1.2deg);margin:-6px -2%}
.ribbonband__track{display:flex;width:max-content;animation:ribbon 38s linear infinite}
.ribbonband:nth-of-type(even) .ribbonband__track{animation-direction:reverse}
.ribbonband span{flex:none;padding-right:2.4rem;white-space:nowrap;font-family:"Cinzel Decorative","Zen Old Mincho",serif;font-weight:700;
  font-size:clamp(1.3rem,3vw,2.4rem);letter-spacing:.12em;line-height:1.3;
  background:var(--foil);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 6s linear infinite}
.ribbonband span i{font-style:normal;margin:0 1.6rem;color:var(--crimson-hi);-webkit-text-fill-color:var(--crimson-hi)}
@keyframes ribbon{to{transform:translateX(-50%)}}

/* ───── 見出し：光が走る飾り罫と、上から射すスポット ───── */
.head{position:relative}
.head::before{content:"";position:absolute;left:50%;top:-40%;width:min(720px,90vw);height:170%;transform:translateX(-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(40% 55% at 50% 0,rgba(255,196,110,.22),transparent 70%);filter:blur(4px);animation:headSpot 6s ease-in-out infinite alternate}
@keyframes headSpot{to{opacity:.55;transform:translateX(-50%) scaleX(1.15)}}
.head::after{background:linear-gradient(90deg,#8a6a22,#e7c169 30%,#fff6d6 50%,#e7c169 70%,#8a6a22) 0 0/200% 100%;
  -webkit-mask:var(--filigree) center/contain no-repeat;mask:var(--filigree) center/contain no-repeat;animation:foil 4s linear infinite}

/* ───── 額縁の写真に金の照り返しが走る ───── */
.tier figure,.reel__row li,.poster,.tchai__portrait,.sleeve{position:relative;overflow:hidden}
.tier figure::before,.poster::before,.tchai__portrait::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,240,200,.45) 48%,rgba(255,255,255,.7) 50%,rgba(255,240,200,.45) 52%,transparent 65%) -200% 0/300% 100% no-repeat}
.in .tier figure::before,.tier.in figure::before,.poster.in::before,.tchai__portrait.in::before{animation:glint 1.6s .3s cubic-bezier(.4,0,.2,1) both}
.tier li:hover figure::before{animation:glint 1.1s cubic-bezier(.4,0,.2,1) both}
@keyframes glint{from{background-position:-200% 0}to{background-position:200% 0}}
/* 出演者は一人ずつ舞台に上がる */
.tier li{opacity:0;transform:translateY(34px) scale(.96);transition:opacity 1s var(--slow),transform 1.2s var(--slow);transition-delay:calc(var(--d,0)*90ms)}
.tier.in li{opacity:1;transform:none}
.tier li:hover{transform:translateY(-6px)}
.tier li:hover figure{box-shadow:0 0 0 3px rgba(7,7,10,.8),0 0 0 4px var(--gold-lit),0 0 40px rgba(255,180,58,.45),0 24px 40px rgba(0,0,0,.6)}

/* ───── ヘッダの金線が流れる ───── */
.masthead::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,#e7c169 20%,#fff6d6 50%,#e7c169 80%,transparent) 0 0/200% 100%;animation:foil 5s linear infinite}

/* ───── 金の輪のカーソル ───── */
.cursor{position:fixed;left:0;top:0;z-index:120;pointer-events:none;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
  border:1px solid rgba(246,221,152,.8);box-shadow:0 0 14px rgba(255,190,90,.5),inset 0 0 10px rgba(255,190,90,.3);
  transition:width .3s var(--slow),height .3s var(--slow),margin .3s var(--slow),background .3s,opacity .3s;opacity:0}
.cursor i{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#fff2cd;box-shadow:0 0 8px #ffcf7a}
.cursor.on{opacity:1}
.cursor.big{width:70px;height:70px;margin:-35px 0 0 -35px;background:rgba(231,193,105,.12)}
@media(hover:none){.cursor{display:none}}

/* ═════════ 応援ソング：動くレコードプレーヤー ═════════ */
.songs{overflow:hidden}
.songs__beams{position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:.45;transition:opacity 1.2s}
.songs__beams::before,.songs__beams::after{content:"";position:absolute;top:-10%;width:34%;height:130%;transform-origin:50% 0;filter:blur(10px);
  background:linear-gradient(180deg,rgba(255,196,110,.55),transparent 70%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%)}
.songs__beams::before{left:6%;animation:sweepL 7s ease-in-out infinite alternate}
.songs__beams::after{right:6%;animation:sweepR 8s ease-in-out infinite alternate}
@keyframes sweepL{from{transform:rotate(-18deg)}to{transform:rotate(14deg)}}
@keyframes sweepR{from{transform:rotate(18deg)}to{transform:rotate(-14deg)}}
.songs.is-live .songs__beams{opacity:1}
.songs.is-live .songs__beams::before{animation-duration:3.2s}
.songs.is-live .songs__beams::after{animation-duration:3.8s}

/* ジャケットから盤が引き出される */
.sleeve{transition:transform 1.2s var(--slow),box-shadow 1.2s}
.player.is-playing .sleeve{transform:rotate(-9deg) translate(-6%,-4%);box-shadow:0 0 0 1px var(--gold),0 0 50px rgba(255,180,58,.35),0 30px 50px rgba(0,0,0,.6)}
.sleeve::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%) -200% 0/300% 100% no-repeat;animation:glint 5s 1s ease-in-out infinite}

/* プラッターの周りの金のストロボ */
.deck__strobe{position:absolute;left:2.5%;top:4.3%;width:79%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(246,221,152,.95) 0 1.4deg,transparent 1.4deg 7.5deg);
  -webkit-mask:radial-gradient(circle,transparent 64.5%,#000 65%,#000 68%,transparent 68.5%);mask:radial-gradient(circle,transparent 64.5%,#000 65%,#000 68%,transparent 68.5%);
  animation:spin 12s linear infinite reverse;animation-play-state:paused;opacity:.6}
.player.is-playing .deck__strobe{animation-play-state:running;opacity:1;filter:drop-shadow(0 0 6px rgba(255,200,110,.9))}
.platter{transition:box-shadow .8s}
.player.is-playing .platter{animation:platterGlow 1.6s ease-in-out infinite}
@keyframes platterGlow{50%{box-shadow:0 0 0 2px rgba(246,221,152,.5),0 0 40px rgba(255,180,58,.55),0 8px 18px rgba(0,0,0,.6)}}
/* 回っても動かない照り返し（本物のレコードの艶） */
.vinyl__shine{position:absolute;inset:3%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 300deg,transparent 0deg,rgba(255,255,255,.28) 25deg,transparent 55deg,transparent 180deg,rgba(255,236,200,.18) 205deg,transparent 235deg);
  -webkit-mask:radial-gradient(circle,transparent 31%,#000 32%);mask:radial-gradient(circle,transparent 31%,#000 32%)}
.player.is-playing .vinyl{animation-duration:1.8s}
/* 曲が変わると金の光が弾ける */
.player.burst .platter::after{content:"";position:absolute;inset:-12%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,236,190,.9),rgba(255,180,58,.4) 40%,transparent 70%);animation:burst .9s ease-out forwards}
@keyframes burst{from{transform:scale(.4);opacity:1}to{transform:scale(1.5);opacity:0}}

/* ON AIR 表示とイコライザー */
.player__onair{display:inline-flex;align-items:center;gap:.6em;margin-top:.9rem;font-family:"Cinzel Decorative",serif;font-size:.72rem;letter-spacing:.3em;color:rgba(246,221,152,.5);transition:color .4s}
.player__onair i{width:9px;height:9px;border-radius:50%;background:#5a2a2a;box-shadow:0 0 0 2px rgba(246,221,152,.3)}
.player.is-playing .player__onair{color:var(--gold-lit)}
.player.is-playing .player__onair i{background:#ff2a4a;box-shadow:0 0 0 2px rgba(246,221,152,.5),0 0 12px #ff2a4a;animation:blink 1.2s ease-in-out infinite}
.player__now{margin-top:.1em}
.eq{display:flex;align-items:flex-end;gap:3px;height:34px;margin-top:.9rem}
.eq i{flex:1;max-width:8px;height:12%;border-radius:2px 2px 0 0;background:linear-gradient(180deg,#fff2cd,#e7c169 40%,#8a6a22);
  box-shadow:0 0 6px rgba(255,190,90,.4);transform-origin:bottom;transition:height .4s}
.player.is-playing .eq i{animation:eqb .9s ease-in-out infinite alternate}
.eq i:nth-child(3n){animation-duration:.62s!important}.eq i:nth-child(4n+1){animation-duration:.78s!important}
.eq i:nth-child(5n+2){animation-duration:1.05s!important}.eq i:nth-child(7n){animation-duration:.54s!important}
.eq i:nth-child(odd){animation-delay:-.3s!important}.eq i:nth-child(3n+1){animation-delay:-.55s!important}
@keyframes eqb{from{height:10%}to{height:100%}}
/* 再生ボタンの金の波紋 */
.ctrl__play{position:relative}
.ctrl__play::before,.ctrl__play::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid rgba(246,221,152,.8);opacity:0;pointer-events:none}
.player.is-playing .ctrl__play::before{animation:ripple 2s ease-out infinite}
.player.is-playing .ctrl__play::after{animation:ripple 2s 1s ease-out infinite}
.player:not(.is-playing) .ctrl__play{animation:invite 2.2s ease-in-out infinite}
@keyframes ripple{from{transform:scale(1);opacity:.9}to{transform:scale(1.9);opacity:0}}
@keyframes invite{50%{box-shadow:0 0 0 2px var(--wine),0 0 0 3.5px var(--gold-lit),0 10px 24px rgba(0,0,0,.5),0 0 44px rgba(255,200,110,.7)}}
.notes i{font-size:22px;color:#fff2cd;text-shadow:0 0 10px rgba(255,190,90,.9),0 0 22px rgba(255,120,80,.5)}

/* ═════════ くるみ割り人形・応援ソング（Cheer Songs）：漆黒と金のプログラム ═════════ */
.tracks__head{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-top:1rem}
.tracks__head i{flex:0 1 160px;height:14px;background:linear-gradient(90deg,#8a6a22,#e7c169 30%,#fff6d6 50%,#e7c169 70%,#8a6a22) 0 0/200% 100%;
  -webkit-mask:var(--filigree) center/auto 100% no-repeat;mask:var(--filigree) center/auto 100% no-repeat;animation:foil 4s linear infinite}
.tracks__head span{white-space:nowrap;font-family:"Cormorant Garamond",serif;font-style:normal;font-weight:600;font-size:clamp(1.7rem,3.4vw,2.3rem);letter-spacing:.06em;line-height:1.1;
  color:var(--gold-lit);text-shadow:0 1px 0 rgba(0,0,0,.6),0 0 18px rgba(255,190,80,.35)}
.tracks__head b{white-space:nowrap;font-family:var(--title);font-weight:900;font-size:.95rem;letter-spacing:.3em;color:var(--gold-lit)}
.tracks{--ink:#fff3dc;--text:#efe3cf;--muted:rgba(239,227,207,.7);
  counter-reset:none;gap:0 3rem;padding:clamp(1.6rem,3.4vw,2.6rem) clamp(1.4rem,3.6vw,3rem);
  background:
    radial-gradient(80% 60% at 50% 0,rgba(255,180,58,.12),transparent 70%),
    linear-gradient(180deg,#160b0f,#0b0709);
  color:var(--ink);border:1px solid var(--gold);
  box-shadow:0 0 0 5px #0b0709,0 0 0 6px rgba(231,193,105,.5),0 0 0 10px #0b0709,0 0 0 11px rgba(231,193,105,.25),0 30px 60px rgba(0,0,0,.55)}
.tracks::before{inset:10px}
.tracks li{position:relative}
.tracks li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(231,193,105,.45),transparent)}
.tracks button{grid-template-columns:3rem auto 1fr auto;padding:.85em .4em;border:0;position:relative;overflow:hidden;border-radius:2px;transition:background .4s}
.tracks button::before{border-bottom:1px dotted rgba(231,193,105,.55);transform:translateY(.3em)}
.tracks i{width:2.3rem;height:2.3rem;display:grid;place-items:center;border-radius:50%;font-family:"Cinzel Decorative",serif;font-style:normal;font-weight:700;font-size:.82rem;
  color:var(--gold-lit);border:1px solid rgba(231,193,105,.7);box-shadow:inset 0 0 0 3px #0b0709,inset 0 0 0 4px rgba(231,193,105,.35);transition:all .4s}
.tracks b{font-size:1.06rem;letter-spacing:.06em;color:#fff3dc;transition:letter-spacing .5s var(--slow)}
.tracks em{font-family:"Cinzel Decorative",serif;font-size:.86rem;color:var(--gold)}
.tracks button::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:linear-gradient(90deg,transparent,rgba(231,193,105,.14),transparent)}
.tracks button:hover::after{opacity:1}
.tracks button:hover b{letter-spacing:.12em;background:var(--foil);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 3s linear infinite}
.tracks button:hover i{background:rgba(231,193,105,.15)}
/* 選択中の曲：真紅のビロードの帯＋金のメダル */
.tracks li.on button{background:linear-gradient(90deg,rgba(139,14,34,0),rgba(139,14,34,.85) 12%,rgba(139,14,34,.85) 88%,rgba(139,14,34,0));
  box-shadow:inset 0 1px 0 rgba(231,193,105,.6),inset 0 -1px 0 rgba(231,193,105,.6)}
.tracks li.on i{color:#3a0610;background:radial-gradient(circle at 40% 35%,#fff6d6,#e7c169 50%,#8a6a22);border-color:#fff2cd;box-shadow:0 0 14px rgba(255,190,90,.7)}
.tracks li.on i::before{content:none}
.tracks li.on b{background:var(--foil);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 3s linear infinite}
.tracks li.on em{color:#fff2cd}
.tracks i{position:relative}
.player.is-playing .tracks li.on i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px dashed rgba(246,221,152,.9);animation:spin 4s linear infinite}
.player.is-playing .tracks li.on i::before{content:none}

@media(max-width:700px){
  .ribbonband{padding:12px 0}
  .tracks__head{gap:.6rem}
  .tracks__head i{flex-basis:40px}
  .tracks__head{flex-wrap:wrap;row-gap:.35rem}
  .tracks__head span{font-size:1.75rem;letter-spacing:.05em}
  .tracks__head b{white-space:nowrap;font-size:.8rem;order:3;flex-basis:100%;text-align:center}
  .tracks b{font-size:.95rem;letter-spacing:.02em}
  .tracks{gap:0}
  .tracks button{grid-template-columns:2.6rem auto 1fr auto}
}
@media(prefers-reduced-motion:reduce){
  .ribbonband__track,.ribbonband span{animation:none}
  .tier li{opacity:1;transform:none}
  .cursor{display:none}
}
/* 準備中のチケットボタン */
.redbtn.is-soon{filter:grayscale(.75) brightness(.8);cursor:default;pointer-events:none}
.redbtn.is-soon::after{display:none}
/* チケット購入ボタン（ぴあ・teket へ直接） */
.tixbuy{margin-top:1.8em;padding:1.2em 1.2em 1.4em;border:1px solid rgba(194,154,79,.55);background:rgba(124,10,29,.08);text-align:center}
.tixbuy__t{font-weight:800;letter-spacing:.2em;font-size:1rem;margin-bottom:1em}
.tixbuy__t small{display:block;margin-top:.3em;font-size:.72rem;font-weight:400;letter-spacing:.08em;opacity:.8}
.tixbuy__btns{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.redbtn--big{display:grid;padding:1em .8em;font-size:1.02rem;letter-spacing:.1em}
@media(max-width:560px){.tixbuy__btns{grid-template-columns:1fr}}

/* ═════════ アルバム「CLARA’S RECORD — Midnight Dreams」 ═════════ */
.head--album .head__en{font-family:var(--title);font-weight:900;letter-spacing:.22em;font-size:clamp(1rem,1.9vw,1.25rem);
  color:#fff2cd;-webkit-text-fill-color:#fff2cd;text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 14px rgba(255,200,110,.45)}
.album__title{font-family:"Cinzel Decorative","Zen Old Mincho",serif!important;font-weight:700;letter-spacing:.08em;line-height:1.1;
  font-size:clamp(2.1rem,6.4vw,5rem)!important}
/* スマホで「RECOR / D」と単語の途中で折れないよう、1行に収まる大きさに */
@media(max-width:560px){.album__title{white-space:nowrap;font-size:7.4vw!important;letter-spacing:.04em}}
.album__sub{display:flex;align-items:center;gap:1rem;margin-top:.35em;font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:600;
  font-size:clamp(1.3rem,3vw,2.1rem);letter-spacing:.14em;color:#fff2cd;text-shadow:0 0 18px rgba(255,190,90,.55)}
.album__sub i{display:block;width:clamp(28px,6vw,70px);height:1px;background:linear-gradient(90deg,transparent,var(--gold-lit))}
.album__sub i:last-child{background:linear-gradient(90deg,var(--gold-lit),transparent)}
/* 「オリジナルソング」を大きく、ひと目で */
.album__big{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.3em .9em;margin-top:1.1rem;padding:.55em 1.6em .6em;
  border:1px solid rgba(246,221,152,.75);background:linear-gradient(180deg,rgba(139,14,34,.55),rgba(60,5,15,.55));
  box-shadow:0 0 0 4px rgba(20,3,8,.6),0 0 0 5px rgba(231,193,105,.3),0 0 40px rgba(255,180,58,.25)}
.album__count{font-family:var(--title);font-weight:900;font-size:clamp(1.1rem,2.4vw,1.6rem);color:#fff}
.album__count b{font-family:"Cinzel Decorative",serif;font-size:1.8em;line-height:1;margin-right:.08em;
  background:var(--foil);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 5s linear infinite}
.album__label{font-family:var(--title);font-weight:900;font-size:clamp(1.6rem,4.4vw,3rem);letter-spacing:.14em;line-height:1.2;
  background:linear-gradient(180deg,#fff 0%,#fff2cd 45%,#e7c169 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 16px rgba(255,190,90,.45)) drop-shadow(0 3px 0 rgba(0,0,0,.4))}
.album__lead{display:block;margin-bottom:.5em;font-family:var(--title);font-weight:900;font-size:clamp(1.02rem,2.2vw,1.3rem);line-height:1.8;color:#fff3dc;
  text-shadow:0 0 14px rgba(255,190,90,.35)}
.head--album .head__lead{max-width:44em}
.album__lead span{display:inline-block}

/* チケットぴあQRの有効日のご案内 */
.qrnote{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em .8em;margin-top:1.8em;padding:.9em 1.1em;font-size:.9rem;line-height:1.8;color:var(--text);
  border:1px solid rgba(246,221,152,.55);background:rgba(20,4,9,.45);box-shadow:inset 3px 0 0 var(--gold-lit)}
.qrnote b{flex:none;font-size:.72rem;letter-spacing:.2em;padding:.1em .7em;color:#3a0610;background:linear-gradient(180deg,#f6dd98,#b8862f)}
.qrnote strong{color:#fff2cd}
.poster__note{margin-top:.8em;text-align:center;font-size:.8rem;color:#fff2cd;letter-spacing:.06em}
.qrnote{display:block}
.qrnote b{display:inline-block;margin-right:.8em;vertical-align:.08em}
/* 「オリジナルソング」は少しだけ太く */
.head--album .head__lead .album__em{font-weight:700;color:#fff2cd}

/* 同じ大きさの写真が並ぶ段は、写真の上端をそろえる（名前が2行になっても写真は水平のまま） */
.tier--r2,.tier--guest,.tier--friends,.tier--t1,.tier--t2{align-items:flex-start}
.tier--r2 li,.tier--guest li,.tier--friends li,.tier--t1 li,.tier--t2 li{align-content:start}
/* 2段目は役名が写真の上：役名の欄を同じ高さにして写真の位置をそろえる */
.tier--r2 .p__role{min-height:3em;display:flex;align-items:flex-end;justify-content:center;text-align:center}
@media(min-width:701px){.tier--r2 .p__role{min-height:1.6em}}

/* ═════════ 本格的なレコード：10曲ぶんの溝と、進んでいく針 ═════════ */
/* 曲と曲のあいだの無音の溝（明るい細い輪）を10曲ぶん */
.vinyl{background:
    conic-gradient(from 20deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,.2) 20deg,rgba(255,255,255,0) 50deg,rgba(255,255,255,0) 180deg,rgba(255,255,255,.16) 200deg,rgba(255,255,255,0) 230deg),
    radial-gradient(circle closest-side,
      transparent 41.5%,rgba(255,255,255,.14) 42%,transparent 42.6%,
      transparent 47%,rgba(255,255,255,.1) 47.4%,transparent 47.9%,
      transparent 52.4%,rgba(255,255,255,.1) 52.8%,transparent 53.3%,
      transparent 57.8%,rgba(255,255,255,.1) 58.2%,transparent 58.7%,
      transparent 63.2%,rgba(255,255,255,.1) 63.6%,transparent 64.1%,
      transparent 68.6%,rgba(255,255,255,.1) 69%,transparent 69.5%,
      transparent 74%,rgba(255,255,255,.1) 74.4%,transparent 74.9%,
      transparent 79.4%,rgba(255,255,255,.1) 79.8%,transparent 80.3%,
      transparent 84.8%,rgba(255,255,255,.1) 85.2%,transparent 85.7%,
      transparent 90.2%,rgba(255,255,255,.1) 90.6%,transparent 91.1%,
      transparent 95.6%,rgba(255,255,255,.14) 96%,transparent 96.6%),
    repeating-radial-gradient(circle,#141414 0 1.5px,#222 1.5px 3px),
    #111}
/* 再生中の曲の帯だけ、金色にほのかに光る */
.vinyl__now{position:absolute;inset:3%;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .8s;
  background:radial-gradient(circle closest-side,transparent var(--band-i,90.6%),rgba(246,221,152,.16) var(--band-i,90.6%),rgba(246,221,152,.16) var(--band-o,96%),transparent var(--band-o,96%))}
.player.is-playing .vinyl__now{opacity:1}
/* 針：止まっている時は休み位置、再生中は計算した溝の位置へ */
.player.is-playing .tonearm{transform:rotate(var(--arm,20deg))}
.tonearm{transition:transform 1.4s cubic-bezier(.3,.7,.2,1)}

/* ═════════ ピンボールの得点板 ═════════
   得点・玉・章は台の上端（壁の外側）に canvas で描く。スマホでも台が一画面に収まるよう、ここは読み上げ用にだけ残す */
.hud{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ═════════ 台の上に出す文字の背景は、台が透けて見えるように ═════════
   章の帯・休憩の案内とも、背景は半透明にして、文字は縁どりの光で読ませる */
.banner{background:linear-gradient(180deg,rgba(194,24,47,.38),rgba(124,10,29,.38));
  box-shadow:inset 0 0 0 1.5px rgba(236,208,140,.8),0 10px 30px rgba(90,7,20,.18)}
.banner__no,.banner__ja,.banner__music{text-shadow:0 1px 2px rgba(50,0,10,.95),0 0 10px rgba(50,0,10,.75),0 0 18px rgba(50,0,10,.5)}
.intermission{background:radial-gradient(90% 60% at 50% 40%,rgba(255,248,234,.62),rgba(243,220,184,.42))}
.intermission__label,.intermission__big,.intermission__body,.intermission__hint{text-shadow:0 0 3px #fff8ea,0 0 8px #fff8ea,0 0 16px rgba(255,248,234,.9)}