/* 公開用に外側から足す分 (表紙・再生ボタン・読みこみ・おことわり)。MV 本体の見た目は index.html の中 */
html,body{touch-action:manipulation;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#cover,#err{display:none!important}                 /* MV 本体の再生マークとエラー文は、下の部品におきかえる */
html #stage{cursor:default;position:fixed}   /* fixed: スマホで、1920px のステージがページの幅を広げてしまわないように */
html:not(.site-ready) #stage{opacity:0}              /* 読みこみが終わるまで、代わりのフォントの画面を見せない */

#site{position:fixed;inset:0;z-index:10;cursor:pointer;user-select:none;-webkit-user-select:none;
  font-family:"neokuro-vf";font-weight:900;font-synthesis:none;color:#F6ECD9}
#site-box{position:absolute;left:50%;top:50%;width:var(--w,100vw);height:var(--h,56.25vw);transform:translate(-50%,-50%);
  font-size:calc(var(--w,100vw)/100);display:flex;align-items:center;justify-content:center;transition:background .2s}
.st-paused #site-box,.st-ended #site-box{background:rgba(26,22,19,.42)}
/* 表紙: 題・キャラ・再生ボタン。MV の 0 秒の画面には頼らない (冒頭が変わっても表紙はそのまま)。1em = ステージの幅の 1% */
#site-cover{display:none;position:absolute;inset:0;overflow:hidden;background:#F6ECD9 repeating-linear-gradient(45deg,#EDDFC4 0 3.9em,transparent 3.9em 7.8em)}
.st-cover #site-cover{display:block}
#site-title{position:absolute;left:.32em;top:.34em;font-size:12.3em;line-height:1;color:#F26B3A;white-space:nowrap;
  text-shadow:.035em 0 #1A1613,-.035em 0 #1A1613,0 .035em #1A1613,0 -.035em #1A1613,.025em .025em #1A1613,-.025em .025em #1A1613,.025em -.025em #1A1613,-.025em -.025em #1A1613,.056em .077em #1A1613}
#site-band{position:absolute;left:4em;top:20em;width:57em;height:10.6em;border-radius:2.3em;background:#1A1613;box-shadow:.62em .73em 0 #E35C2C;
  display:flex;align-items:center;justify-content:center;color:#F6ECD9}
#site-band span{font-size:8.2em;line-height:1}
#site-card{position:absolute;left:65em;top:3.4em;width:31em;height:45.4em;border-radius:2.7em;overflow:hidden;background:#F26B3A;
  box-shadow:0 0 0 .73em #1A1613,1.15em 1.35em 0 .73em #E35C2C}
#site-card img{position:absolute;height:48.4em;left:50%;bottom:-4.6em;transform:translateX(-50%)}
.st-cover #site-box{align-items:flex-start;justify-content:flex-start;padding:35.2em 0 0 4em;box-sizing:border-box}
.st-cover #site-btn{gap:1.2em;align-items:flex-start;position:relative}
.st-cover #site-pill{font-size:4.6em}
.st-cover #site-note{font-size:2em}
.og #site-pill{visibility:hidden}

/* ボタン (ネオクロの字は、読みこみが終わるまで出さない) */
#site-btn{display:none;flex-direction:column;align-items:center;gap:1.6em;outline:none}
.st-cover #site-btn,.st-paused #site-btn,.st-ended #site-btn{display:flex}
#site-pill{display:flex;align-items:center;gap:.32em;font-size:6.4em;line-height:1;padding:.3em .62em .34em .5em;border-radius:99em;
  background:#F26B3A;color:#1A1613;box-shadow:0 0 0 .1em #1A1613,.16em .2em 0 .1em #F6ECD9;animation:site-pulse 1.58s ease-in-out infinite}
#site-btn:focus-visible #site-pill{box-shadow:0 0 0 .1em #1A1613,0 0 0 .2em #7CD4F7}
.ic{width:.86em;height:.86em;fill:#1A1613;stroke:#1A1613;flex:none}
.l,.ic{display:none}
.st-cover .l-start,.st-paused .l-resume,.st-ended .l-again,.st-cover .ic-play,.st-paused .ic-play,.st-ended .ic-again{display:block}
#site-note{font-size:2.3em;line-height:1;padding:.5em 1em .56em;border-radius:99em;background:#1A1613;color:#F6ECD9;white-space:nowrap;
  font-variation-settings:"wdth" 80}
.st-paused #site-note{display:none}
@keyframes site-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* ローディング: 開いてすぐ出る (CSS だけ。画像を待たない)。バーと跳ねる丸は最初から、字 (.nk) はネオクロが届いてから (.font-ok) */
#site-load{display:none;position:absolute;inset:0;overflow:hidden;background:#F6ECD9 repeating-linear-gradient(45deg,#EDDFC4 0 3.9em,transparent 3.9em 7.8em)}
.st-loading #site-load{display:block}
#site-load .nk{visibility:hidden;position:absolute;line-height:1;white-space:nowrap}
.font-ok #site-load .nk{visibility:visible}
#site-load #ld-set{visibility:hidden!important;left:0;top:0;font-size:1em}      /* % の数字を最初から読みこませる置き場 */
#ld-dots{position:absolute;left:0;right:0;top:17em;display:flex;justify-content:center;gap:2em}
#ld-dots i{width:3em;height:3em;border-radius:50%;background:#F26B3A;box-shadow:0 0 0 .5em #1A1613;animation:site-dot .79s ease-in-out infinite}
#ld-dots i:nth-child(2){animation-delay:.13s;background:#F6ECD9}
#ld-dots i:nth-child(3){animation-delay:.26s;background:#7CD4F7}
@keyframes site-dot{0%,100%{transform:translateY(0) scale(1.08,.92)}45%{transform:translateY(-2.4em) scale(.94,1.06)}}
#ld-word{left:0;right:0;top:1.02em;text-align:center;font-size:12em;color:#F26B3A;
  text-shadow:.035em 0 #1A1613,-.035em 0 #1A1613,0 .035em #1A1613,0 -.035em #1A1613,.025em .025em #1A1613,-.025em .025em #1A1613,.025em -.025em #1A1613,-.025em -.025em #1A1613,.056em .077em #1A1613}
#ld-word span,#ld-sub span{display:inline-block;transform-origin:50% 100%}
#ld-bar{position:absolute;left:12em;right:12em;top:30em;height:5.4em}
#ld-track{position:absolute;inset:0;border-radius:99em;background:#1A1613;box-shadow:.5em .6em 0 #E35C2C;overflow:hidden}
#ld-fill{position:absolute;left:.8em;right:.8em;top:.8em;bottom:.8em;border-radius:99em;background:#F26B3A;transform-origin:0 50%;transform:scaleX(0)}
#ld-star{position:absolute;left:0;top:50%;width:7.6em;height:7.6em;fill:#F6ECD9;stroke:#1A1613;stroke-width:7;stroke-linejoin:round;transform:translate(-50%,-50%)}
#ld-sub{left:1.7em;top:5.2em;font-size:7.4em;color:#1A1613}
#ld-pct{right:1.7em;top:5.2em;font-size:7.4em;color:#F26B3A;text-shadow:.04em .05em 0 #1A1613;font-variation-settings:"wdth" 80}
#ld-fan{right:3em;bottom:1.4em;font-size:2em;padding:.5em 1em .56em;border-radius:99em;background:#1A1613;color:#F6ECD9;font-variation-settings:"wdth" 80}
.font-ok #ld-dots{top:3em;transform:scale(.6)}

/* たて持ちのとき: 画面の下にひとこと */
#site-turn{display:none;position:absolute;left:0;right:0;top:calc(50% + var(--h,56.25vw)/2 + 22px);text-align:center;font-size:max(18px,5.4vw);line-height:1}
@media (orientation:portrait){.st-cover #site-turn,.st-paused #site-turn,.st-ended #site-turn{display:block}}

/* おことわり (ネオクロや素材を読みこめなかったとき。ここだけ端末のフォント) */
.st-failed{background:#1A1613;cursor:default}
#site-msg{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(86vw,560px);text-align:center;
  font:500 16px/1.8 system-ui,sans-serif;color:#F6ECD9}
.st-failed #site-msg{display:block}
#site-msg p{margin:0 0 20px}
#site-retry{font:700 17px/1 system-ui,sans-serif;color:#1A1613;background:#F26B3A;border:0;border-radius:99px;padding:15px 28px;cursor:pointer;box-shadow:0 0 0 3px #1A1613,4px 5px 0 3px #F6ECD9}

@media (prefers-reduced-motion:reduce){#site-pill,#ld-dots i{animation:none}}