/* ミニゲーム。**サイズは比率値だけで書く。** 端末の画面が縦にも横にも大きく
   変わるので、px で置くと どこかの端末で必ず崩れる。
   横向きで遊ぶ画面なので、基準は vh（画面の高さ）に寄せてある。 */

:root {
  --pink: #ff5fae;
  --blue: #35c8f0;
  --ink: #2a2f45;
  --panel: rgba(12, 18, 44, .82);
}

* { box-sizing: border-box; }

body.gm {
  margin: 0;
  min-height: 100%;
  color: #eaf2ff;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;
  background: radial-gradient(120% 120% at 50% 0%, #3a2a6e 0%, #171a3a 60%, #0d1026 100%);
}

/* ===== 選曲画面（縦でも横でも読める） ===== */

.gm-wrap { max-width: 46em; margin: 0 auto; padding: 4vh 1.2em 8vh; }
.gm-h1 { font-size: 1.7em; margin: 0 0 .2em; }
.gm-sub { color: #9fb0d8; font-size: .95em; margin: 0 0 1.6em; line-height: 1.8; }

.gm-table { width: 100%; border-collapse: collapse; font-size: .95em; }
.gm-table th, .gm-table td { padding: .55em .6em; border-bottom: 1px solid #2a345f; }
.gm-table th { color: #9fb0d8; font-weight: 600; text-align: left; }
.gm-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.gm-fc { color: #ffd166; font-size: .8em; }
.gm-pfc { color: #ff5fae; font-size: .8em; }

.gm-btn {
  display: inline-block; padding: .7em 1.4em; border-radius: 2em;
  background: #3a4a8f; color: #fff; text-decoration: none; border: 0;
  font-size: 1em; cursor: pointer;
}
.gm-btn:hover { background: #4a5cab; }
/* 押せない間。**見た目でも分かるようにする。**
   disabled だけだと、この配色では色の差がほとんど出ず、
   押せないのか固まったのか分からない */
.gm-btn:disabled, .gm-btn[disabled] {
  background: #2a3145; color: #6b7684; cursor: not-allowed;
  opacity: .6;
}
.gm-btn:disabled:hover { background: #2a3145; }
.gm-btn.wide { width: 100%; text-align: center; }
.gm-row { display: flex; gap: .7em; margin-top: 1.4em; flex-wrap: wrap; }

/* ===== プレイ画面（横向き専用） ===== */

/* 縦持ちのときの案内。**画面の回転は Web から強制できない**
   （screen.orientation.lock は全画面時のみ・iOS Safari は非対応）ので、
   出せるのは案内だけ */
.gm-rotate {
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center; text-align: center;
  background: #0d1026; z-index: 50; padding: 2em; font-size: 1.2em; line-height: 2;
}
@media (orientation: portrait) { .gm-rotate { display: flex; } }

/* 端末内の動画を選んだときの背景。**カードより後ろで、控えめに。**
   はっきり出すとカードと白枠が見づらくなる。
   （上に板を重ねて暗くする方法も試したが、かえって重くなった） */
/* 背景の映像。**そのままの明るさで出す。**
   以前は 0.45 に落として譜面を見やすくしていたが、映像が汚れて見えた */
.gm-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000;
  z-index: 0; pointer-events: none;
}
.gm-layer, .gm-pads, .gm-score, .gm-combo { z-index: 1; }

/* 遊んでいる最中にやめるボタン。**スワイプ領域より上に置く。**
   領域が画面いっぱいなので、下に置くと指が届かない */
.gm-quit {
  position: absolute; right: 2vh; bottom: 2vh; z-index: 3;
  padding: 1.2vh 2.4vh; border-radius: 2vh;
  border: .3vh solid rgba(255, 255, 255, .5);
  background: rgba(0, 0, 0, .45); color: #fff;
  font-size: 2vh; opacity: .5;
}
.gm-quit:active { opacity: 1; }

/* 何が詰まっているのかを見るための表示 */
.gm-diag {
  position: absolute; left: 2vh; bottom: 2vh; z-index: 3;
  background: rgba(0, 0, 0, .7); color: #8ef0b0;
  padding: .8vh 1.4vh; border-radius: 1vh;
  font-size: 1.8vh; line-height: 1.5; white-space: pre; pointer-events: none;
}

.gm-stage {
  position: relative; width: 100%; height: 100vh; overflow: hidden;
  touch-action: none;                 /* スワイプでページが動かないように */
  user-select: none; -webkit-user-select: none;
}
@media (orientation: portrait) { .gm-stage { display: none; } }

/* ===== 端末内の映像が無いときの背景（しずくが出てくる） =====
   **昼の空にしてある。** 暗いままだと画面が寂しい。
   ただし白い枠（.gm-target）が沈むので、そちらに濃い輪郭を足してある。
   **動きは全部 CSS。** JS がするのは、どの動き方にするかを選ぶのと、
   カードと重なったときに .is-shy を付けることだけ */
.gm-idle { position: absolute; inset: 0; z-index: 0; overflow: hidden;
           pointer-events: none; }

/* ===== 背景の骨組み。**形はどの背景でも同じ** =====
   sky    …… 空。scene-* が色を決める
   orb    …… 太陽・月・惑星など、動かない大きな光
   floats …… 右から左へゆっくり流れる大きな飾り（3つ）
   sparks …… 下から上へ昇る小さな飾り（8つ）
   ground …… 地面
   飾りの絵は ::before の中身（文字か図形）で着せ替える */
.gm-idle-sky { position: absolute; inset: 0; }

.gm-idle-orb {
  position: absolute; top: 4vh; right: 8vh; width: 22vh; height: 22vh;
  border-radius: 50%;
}

.gm-idle-floats span {
  position: absolute; display: block;
  animation: gmIdleDrift linear infinite;
}
.gm-idle-floats span::before {
  content: ""; display: block; line-height: 1;
}
.gm-idle-floats span:nth-child(1) { top:  8vh; font-size: 11vh;
  animation-duration: 70s; animation-delay: 0s; }
.gm-idle-floats span:nth-child(2) { top: 20vh; font-size: 8vh;
  animation-duration: 95s; animation-delay: -30s; opacity: .8; }
.gm-idle-floats span:nth-child(3) { top: 33vh; font-size: 14vh;
  animation-duration: 120s; animation-delay: -70s; opacity: .65; }
@keyframes gmIdleDrift {
  0%   { transform: translateX(115vw); }
  100% { transform: translateX(-30vw); }
}

.gm-idle-sparks span {
  position: absolute; bottom: -6vh; display: block; line-height: 1;
  animation: gmIdleRise linear infinite;
}
.gm-idle-sparks span::before {
  content: ""; display: block; width: 100%; height: 100%;
  border-radius: 50%; background: rgba(255, 255, 255, .8);
}
.gm-idle-sparks span:nth-child(1) { left:  6%; width: 3.0vh; height: 3.0vh;
  font-size: 5.0vh; animation-duration: 13s; animation-delay: 0s; }
.gm-idle-sparks span:nth-child(2) { left: 18%; width: 4.4vh; height: 4.4vh;
  font-size: 7.0vh; animation-duration: 17s; animation-delay: -4s; }
.gm-idle-sparks span:nth-child(3) { left: 31%; width: 2.4vh; height: 2.4vh;
  font-size: 4.2vh; animation-duration: 11s; animation-delay: -8s; }
.gm-idle-sparks span:nth-child(4) { left: 44%; width: 5.4vh; height: 5.4vh;
  font-size: 8.4vh; animation-duration: 21s; animation-delay: -2s; }
.gm-idle-sparks span:nth-child(5) { left: 58%; width: 3.2vh; height: 3.2vh;
  font-size: 5.4vh; animation-duration: 15s; animation-delay: -11s; }
.gm-idle-sparks span:nth-child(6) { left: 71%; width: 4.6vh; height: 4.6vh;
  font-size: 7.4vh; animation-duration: 19s; animation-delay: -6s; }
.gm-idle-sparks span:nth-child(7) { left: 84%; width: 2.6vh; height: 2.6vh;
  font-size: 4.6vh; animation-duration: 12s; animation-delay: -14s; }
.gm-idle-sparks span:nth-child(8) { left: 93%; width: 3.8vh; height: 3.8vh;
  font-size: 6.2vh; animation-duration: 16s; animation-delay: -9s; }
@keyframes gmIdleRise {
  0%   { transform: translateY(0);      opacity: 0; }
  12%  { opacity: .9; }
  88%  { opacity: .9; }
  100% { transform: translateY(-112vh); opacity: 0; }
}

.gm-idle-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 9vh;
  box-shadow: inset 0 .3vh 0 rgba(255, 255, 255, .35);
}

/* 文字を飾りに使うとき共通の下ごしらえ。**丸みのある字を先に置く** */
.gm-idle-floats span::before,
.gm-idle-sparks span::before {
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic UI", system-ui, sans-serif;
}
/* ===== ① 昼の空 ===== */
.scene-sky .gm-idle-sky {
  background: linear-gradient(180deg,
    #6fb0e8 0%, #9fd0f4 42%, #d3ecfb 70%, #f6e8cd 100%);
}
.scene-sky .gm-idle-orb {
  background: radial-gradient(circle, rgba(255, 248, 214, .95) 0%,
    rgba(255, 236, 170, .45) 38%, rgba(255, 236, 170, 0) 70%);
}
.scene-sky .gm-idle-floats span::before {
  width: 12vh; height: 4vh; border-radius: 8vh;
  background: rgba(255, 255, 255, .85);
  box-shadow: 3vh -1.2vh 0 -.4vh rgba(255, 255, 255, .85),
              7vh .4vh 0 -.8vh rgba(255, 255, 255, .85);
}
/* **昇るのはしゃぼん玉。** ただの白い丸だと、雪が逆に降っているように見える */
.scene-sky .gm-idle-sparks span::before {
  background: radial-gradient(circle at 32% 28%,
    rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .25) 18%,
    rgba(190, 225, 255, .18) 55%, rgba(255, 255, 255, .10) 100%);
  border: .25vh solid rgba(255, 255, 255, .75);
  box-shadow: inset -.4vh -.6vh 1vh rgba(150, 200, 245, .35);
}
.scene-sky .gm-idle-ground {
  background: linear-gradient(180deg, #f3e2be 0%, #e6cf9f 100%);
}

/* ===== ② 宝石 ===== */
.scene-gem .gm-idle-sky {
  background: linear-gradient(180deg,
    #2b1b4d 0%, #4b2a75 45%, #8a4fa8 78%, #c98fd6 100%);
}
.scene-gem .gm-idle-orb {
  background: radial-gradient(circle, rgba(255, 214, 246, .8) 0%,
    rgba(180, 130, 230, .35) 40%, rgba(180, 130, 230, 0) 70%);
}
/* 宝石はダイヤの形（上が平らなブリリアントカット）に切り抜く。
   **絵文字は使わない**（端末で形が変わるため）。
   ただのひし形だと、小さいときに雪と見分けが付かなかった */
.scene-gem .gm-idle-floats span::before {
  width: 13vh; height: 12vh;
  clip-path: polygon(26% 0%, 74% 0%, 100% 30%, 50% 100%, 0% 30%);
  background:
    linear-gradient(100deg, rgba(255, 255, 255, .55) 0 18%,
      rgba(255, 255, 255, 0) 18% 34%, rgba(255, 255, 255, .4) 34% 44%,
      rgba(255, 255, 255, 0) 44% 62%, rgba(255, 255, 255, .35) 62% 70%,
      rgba(255, 255, 255, 0) 70%),
    linear-gradient(150deg, #bff4ff, #6fd0f0 45%, #d98fe8);
  opacity: .75;
  filter: drop-shadow(0 0 1.2vh rgba(190, 240, 255, .5));
}
/* **粒も同じダイヤの形にする。** 丸のままだと雪にしか見えなかった */
.scene-gem .gm-idle-sparks span::before {
  clip-path: polygon(26% 0%, 74% 0%, 100% 30%, 50% 100%, 0% 30%);
  border-radius: 0;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, .6) 0 20%,
      rgba(255, 255, 255, 0) 20% 40%, rgba(255, 255, 255, .45) 40% 52%,
      rgba(255, 255, 255, 0) 52%),
    linear-gradient(150deg, #bff4ff, #7fd8f5 42%, #f0a8e8);
  filter: drop-shadow(0 0 .8vh rgba(255, 220, 255, .9));
}
.scene-gem .gm-idle-ground {
  background: linear-gradient(180deg, #6b3f92 0%, #40255c 100%);
}

/* ===== ③ 宇宙 ===== */
.scene-space .gm-idle-sky {
  background: radial-gradient(120% 90% at 30% 10%,
    #2a1a5e 0%, #140d38 45%, #06081f 100%);
}
/* 輪のある星 */
.scene-space .gm-idle-orb {
  width: 14vh; height: 14vh; top: 6vh; right: 10vh;
  background: radial-gradient(circle at 35% 32%, #ffd9a8, #d98a52 60%, #8a4d2c 100%);
  box-shadow: 0 0 4vh 1vh rgba(255, 200, 140, .18);
}
.scene-space .gm-idle-orb::after {
  content: ""; position: absolute; left: -6vh; top: 5.4vh;
  width: 26vh; height: 3.2vh; border-radius: 50%;
  border: .5vh solid rgba(255, 224, 190, .55);
  transform: rotate(-16deg);
}
.scene-space .gm-idle-floats span::before {
  width: 5vh; height: 5vh; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #9fb6ff, #3a4a9e);
  opacity: .7;
}
.scene-space .gm-idle-sparks span::before {
  background: #fff;
  box-shadow: 0 0 1.2vh .2vh rgba(200, 220, 255, .9);
}
.scene-space .gm-idle-ground {
  background: linear-gradient(180deg, #241a52 0%, #0d0a26 100%);
}

/* ===== ④ 動物 ===== */
.scene-animal .gm-idle-sky {
  background: linear-gradient(180deg,
    #8fd0f5 0%, #bfe7fb 45%, #e6f6de 78%, #cdeeae 100%);
}
.scene-animal .gm-idle-orb {
  background: radial-gradient(circle, rgba(255, 250, 215, .9) 0%,
    rgba(255, 240, 170, .4) 38%, rgba(255, 240, 170, 0) 70%);
}
/* 流れるのは猫の顔。**耳を影で足して形を作る。**
   丸い茂みだと、動物の背景だと分からなかった */
.scene-animal .gm-idle-floats span::before {
  width: 9vh; height: 8vh; border-radius: 45% 45% 50% 50%;
  background: #fff;
  /* 左右の耳（三角のかわりに小さな丸を寄せる） */
  box-shadow: -3.1vh -2.9vh 0 -1.2vh #fff, 3.1vh -2.9vh 0 -1.2vh #fff;
  opacity: .85;
}
/* 目とひげ。**中身は ::after にまとめる** */
.scene-animal .gm-idle-floats span { position: absolute; }
.scene-animal .gm-idle-floats span::after {
  content: ""; position: absolute; left: 2.2vh; top: 3.6vh;
  width: .9vh; height: .9vh; border-radius: 50%; background: #4a5566;
  box-shadow: 3.7vh 0 0 0 #4a5566,               /* もう片方の目 */
              1.85vh 1.9vh 0 -.2vh #f09aa8;      /* 鼻 */
}
/* 昇るのは足あと。肉球1つ＋指4つ（影で足す）。
   **白では空に溶けるので、こげ茶にする** */
.scene-animal .gm-idle-sparks span::before {
  background: rgba(120, 88, 66, .72);
  border-radius: 50% 50% 45% 45%;
  box-shadow: -1.35vh -1.35vh 0 -.55vh rgba(120, 88, 66, .72),
              -.45vh -2.1vh  0 -.55vh rgba(120, 88, 66, .72),
               .45vh -2.1vh  0 -.55vh rgba(120, 88, 66, .72),
              1.35vh -1.35vh 0 -.55vh rgba(120, 88, 66, .72);
}
.scene-animal .gm-idle-ground {
  background: linear-gradient(180deg, #9fd97c 0%, #6fb955 100%);
}

/* ===== ⑤ 花 ===== */
.scene-flower .gm-idle-sky {
  background: linear-gradient(180deg,
    #ffd0e4 0%, #ffe3f0 40%, #fff4e2 72%, #f6f0cf 100%);
}
.scene-flower .gm-idle-orb {
  background: radial-gradient(circle, rgba(255, 255, 240, .95) 0%,
    rgba(255, 214, 236, .45) 40%, rgba(255, 214, 236, 0) 72%);
}
.scene-flower .gm-idle-floats span::before {
  content: "✿"; color: rgba(255, 255, 255, .85);
}
/* 花びらは横にも揺れながら舞う */
.scene-flower .gm-idle-sparks span::before {
  content: "✿"; background: none; border-radius: 0;
  width: auto; height: auto; color: rgba(255, 170, 205, .95);
}
.scene-flower .gm-idle-ground {
  background: linear-gradient(180deg, #cfe9a8 0%, #a8d47f 100%);
}

/* ===== ⑥ 音楽 ===== */
.scene-music .gm-idle-sky {
  background: linear-gradient(180deg,
    #143a63 0%, #2f6f9e 40%, #6fb8cf 74%, #bfe6ea 100%);
}
.scene-music .gm-idle-orb {
  background: radial-gradient(circle, rgba(220, 250, 255, .8) 0%,
    rgba(130, 210, 235, .35) 40%, rgba(130, 210, 235, 0) 70%);
}
.scene-music .gm-idle-floats span::before {
  content: "♫"; color: rgba(255, 255, 255, .55);
}
.scene-music .gm-idle-sparks span::before {
  content: "♪"; background: none; border-radius: 0;
  width: auto; height: auto; color: rgba(255, 255, 255, .9);
}
.scene-music .gm-idle-sparks span:nth-child(2n)::before { content: "♫"; }
.scene-music .gm-idle-ground {
  background: linear-gradient(180deg, #2f6f8a 0%, #1b4560 100%);
}

/* ===== ⑦ 姫 ===== */
.scene-princess .gm-idle-sky {
  background: linear-gradient(180deg,
    #f3c6e2 0%, #f9dcec 38%, #fff0d6 72%, #ffe6b8 100%);
}
.scene-princess .gm-idle-orb {
  background: radial-gradient(circle, rgba(255, 246, 210, .95) 0%,
    rgba(255, 224, 150, .45) 40%, rgba(255, 224, 150, 0) 72%);
}
.scene-princess .gm-idle-floats span::before {
  content: "♥"; color: rgba(255, 255, 255, .7);
}
.scene-princess .gm-idle-sparks span::before {
  content: "♥"; background: none; border-radius: 0;
  width: auto; height: auto; color: rgba(255, 180, 210, .95);
}
/* 王冠も混ぜる */
.scene-princess .gm-idle-sparks span:nth-child(3n)::before {
  content: "♛"; color: rgba(240, 200, 110, .95);
}
.scene-princess .gm-idle-ground {
  background: linear-gradient(180deg, #f4dca6 0%, #e2bf7c 100%);
}

/* ===== しずくの動き方。**JS が mode-* を1つ付ける** ===== */
.gm-idle-walk { position: absolute; bottom: 8vh; left: 0; }
.gm-idle-bob  { animation: gmIdleBob .62s ease-in-out infinite; }
@keyframes gmIdleBob {
  0%, 100% { transform: translateY(0)      rotate(-2.5deg); }
  50%      { transform: translateY(-1.1vh) rotate(2.5deg); }
}

/* (1) のんびり歩く。端まで来たら向きを変えて戻る（45%〜50% が振り向き） */
.gm-idle.mode-walk .gm-idle-walk { animation: gmIdleWalk 24s linear infinite; }
@keyframes gmIdleWalk {
  0%   { transform: translateX(-14vw) scaleX(1); }
  45%  { transform: translateX(86vw)  scaleX(1); }
  50%  { transform: translateX(86vw)  scaleX(-1); }
  95%  { transform: translateX(-14vw) scaleX(-1); }
  100% { transform: translateX(-14vw) scaleX(1); }
}

/* (2) 真ん中で立ち止まってびっくりする。**顔の切り替えも同じ周期**に
       そろえてあるので、位置と顔がずれない */
.gm-idle.mode-surprise .gm-idle-walk { animation: gmIdleStopMid 20s linear infinite; }
@keyframes gmIdleStopMid {
  0%   { transform: translateX(-14vw); }
  38%  { transform: translateX(44vw); }
  56%  { transform: translateX(44vw); }
  95%  { transform: translateX(112vw); }
  100% { transform: translateX(112vw); }
}
.gm-idle.mode-surprise .gm-idle-mouth   { animation: gmIdleHideMid 20s linear infinite; }
.gm-idle.mode-surprise .gm-idle-mouth-o { animation: gmIdleShowMid 20s linear infinite; }
.gm-idle.mode-surprise .gm-idle-eyes    { animation: gmIdleEyesBig 20s linear infinite; }
.gm-idle.mode-surprise .gm-idle-foot    { animation: gmIdleStepStop 20s linear infinite; }
@keyframes gmIdleHideMid { 0%, 37.9%, 56.1%, 100% { opacity: 1; }
                           38%, 56% { opacity: 0; } }
@keyframes gmIdleShowMid { 0%, 37.9%, 56.1%, 100% { opacity: 0; }
                           38%, 56% { opacity: 1; } }
@keyframes gmIdleEyesBig { 0%, 37.9%, 56.1%, 100% { transform: scale(1); }
                           38%, 56% { transform: scale(1.5); } }
@keyframes gmIdleStepStop { 0%, 37.9%, 56.1%, 100% { transform: translate(0, 0); }
                            38%, 56% { transform: translate(0, 0); } }

/* (3) 右上からひょっこり顔を出す */
.gm-idle.mode-peek .gm-idle-walk {
  bottom: auto; top: 0; left: auto; right: 6vw;
  animation: gmIdlePeek 7s ease-in-out infinite;
}
.gm-idle.mode-peek .gm-idle-bob { animation: gmIdleTilt 2.2s ease-in-out infinite; }
@keyframes gmIdlePeek {
  0%, 8%    { transform: translateY(-108%); }
  22%, 62%  { transform: translateY(-40%); }
  80%, 100% { transform: translateY(-108%); }
}
@keyframes gmIdleTilt {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(7deg); }
}

/* (4) 高速で走り抜ける。走っていない間は画面の外 */
.gm-idle.mode-dash .gm-idle-walk { animation: gmIdleDash 10s linear infinite; }
.gm-idle.mode-dash .gm-idle-bob  { animation: gmIdleBob .18s ease-in-out infinite; }
.gm-idle.mode-dash .gm-idle-foot.l { animation: gmIdleStep .18s ease-in-out infinite; }
.gm-idle.mode-dash .gm-idle-foot.r { animation: gmIdleStep .18s ease-in-out infinite -.09s; }
/* **走っている時間を長くとる。** 端で待つ時間が長いと、
   ほとんど画面に出てこない（8秒のうち1秒しか見えていなかった） */
@keyframes gmIdleDash {
  0%         { transform: translateX(-16vw) scaleX(1)  rotate(-7deg); }
  40%        { transform: translateX(112vw) scaleX(1)  rotate(-7deg); }
  40.1%, 52% { transform: translateX(112vw) scaleX(-1) rotate(-7deg); }
  92%        { transform: translateX(-16vw) scaleX(-1) rotate(-7deg); }
  100%       { transform: translateX(-16vw) scaleX(-1) rotate(-7deg); }
}

/* カードと重なったら、目をおおって立ち止まる。**JS が付ける** */
.gm-idle.is-shy .gm-idle-walk,
.gm-idle.is-shy .gm-idle-bob,
.gm-idle.is-shy .gm-idle-foot { animation-play-state: paused; }
.gm-idle.is-shy .gm-idle-hands { opacity: 1; }
.gm-idle.is-shy .gm-idle-eyes  { opacity: 0; }

/* ===== しずくの絵 ===== */
.gm-idle-shizuku { display: block; width: 15vh; height: auto; }
.gm-idle-shadow  { fill: rgba(90, 70, 40, .22); }
.gm-idle-body    { fill: #a9d4f5; stroke: #3f83c8; stroke-width: 4; }
.gm-idle-shine   { fill: rgba(255, 255, 255, .8); }
.gm-idle-cheek   { fill: #f6a0b2; opacity: .9; }
.gm-idle-eyes    { fill: #24303f; transform-origin: 60px 90px;
                   animation: gmIdleBlink 5.4s infinite; }
.gm-idle-mouth   { fill: none; stroke: #24303f; stroke-width: 4;
                   stroke-linecap: round; }
.gm-idle-mouth-o { fill: #7a3b46; opacity: 0; }
.gm-idle-hands   { fill: #8dc3ee; stroke: #3f83c8; stroke-width: 3; opacity: 0; }
.gm-idle-foot    { fill: #5b9ada; }
.gm-idle-foot.l  { animation: gmIdleStep .62s ease-in-out infinite; }
.gm-idle-foot.r  { animation: gmIdleStep .62s ease-in-out infinite -.31s; }
@keyframes gmIdleStep {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(5px, -9px); }
}
@keyframes gmIdleBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.08); }
}

/* **動きを減らす設定にしている人には止めて出す。**
   歩き続ける絵は、目が回る人には遊びづらい */
@media (prefers-reduced-motion: reduce) {
  .gm-idle, .gm-idle * { animation: none !important; }
  .gm-idle .gm-idle-walk { transform: translateX(42vw); }
}

/* 運ぶ先の白枠。ノートごとに移動先へ出る */
.gm-target {
  position: absolute; left: 0; top: 0;
  width: var(--cw); height: var(--ch); border-radius: 1vh;
  border: .5vh solid rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .06);
  /* **明るい背景でも沈まないように輪郭を足す。**
     しずくの背景（昼の空）だと、白い枠だけでは見えなくなる */
  box-shadow: 0 0 0 .18vh rgba(20, 34, 66, .5), 0 .3vh .9vh rgba(0, 0, 0, .25);
  opacity: 0; transition: opacity .15s;
}
.gm-target.on { opacity: 1; }

/* 動かすカード。絵柄は自作のしずく。
   **最初は出ていない。** 実機と同じで、ノートの手前で出て、終わると消える
   （連続して動く場面では消さずに出したまま） */
.gm-card {
  position: absolute; left: 0; top: 0;
  width: var(--cw); height: var(--ch); border-radius: 1vh;
  will-change: transform;           /* 毎フレーム動くのはこれだけ */
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .12s;
}
.gm-card.on { opacity: 1; }
.gm-card.l { background: linear-gradient(160deg, #ffd7ec, #ff9ed0); border: .4vh solid var(--pink); }
.gm-card.r { background: linear-gradient(160deg, #d7f4ff, #9edcf5); border: .4vh solid var(--blue); }
.gm-card svg { width: 62%; height: 62%; }

/* 判定の演出。**カードそのものを光らせる。**
   位置を transform で決めているので、ここでは transform を触らない。
   光らせるのは影（box-shadow）と、しずくの filter だけ */
.gm-card.shine-gold   { animation: gm-shine-gold .52s ease-out; }
.gm-card.shine-silver { animation: gm-shine-silver .52s ease-out; }
.gm-card.shine-gold svg   { animation: gm-drop-gold .52s ease-out; }
.gm-card.shine-silver svg { animation: gm-drop-silver .52s ease-out; }

@keyframes gm-shine-gold {
  0%   { box-shadow: 0 0 0 0 rgba(255, 209, 102, .0); }
  35%  { box-shadow: 0 0 2.6vh .9vh rgba(255, 209, 102, .95),
                     0 0 6vh 2vh rgba(255, 176, 32, .6); }
  100% { box-shadow: 0 0 0 0 rgba(255, 209, 102, 0); }
}
@keyframes gm-shine-silver {
  0%   { box-shadow: 0 0 0 0 rgba(230, 236, 245, .0); }
  35%  { box-shadow: 0 0 2.2vh .7vh rgba(230, 236, 245, .9),
                     0 0 5vh 1.6vh rgba(170, 186, 210, .5); }
  100% { box-shadow: 0 0 0 0 rgba(230, 236, 245, 0); }
}
@keyframes gm-drop-gold {
  0%, 100% { filter: none; }
  35%      { filter: drop-shadow(0 0 1.4vh #ffd166) sepia(1) saturate(4)
                     hue-rotate(-18deg) brightness(1.25); }
}
@keyframes gm-drop-silver {
  0%, 100% { filter: none; }
  35%      { filter: drop-shadow(0 0 1.2vh #e6ecf5) grayscale(1) brightness(1.6); }
}

/* 経路の△。移動元から移動先へ並べる */
.gm-arrow {
  position: absolute; left: 0; top: 0;
  width: 3.2vh; height: 3.2vh; opacity: .16;
}
.gm-arrow.on { opacity: 1; }
.gm-arrow svg { width: 100%; height: 100%; display: block; }

/* 左下・右下のスワイプ受付エリア。**ノブ付きスティックにしない。**
   指を振る動作そのものを取るほうが、始点と終点の時刻が素直に取れる。

   **画面のふちから離すこと。** ふちに置くと、OS のジェスチャー
   （Android の戻る／ホーム、iOS のコントロールセンター）と取り合いになり、
   遊んでいる途中に設定画面が出る。**これは Web からは無効化できない**
   （そういう API が無い）ので、当たらない場所に置くしか手がない。

   余白は比率で置くが、OS のジェスチャー帯は画面が小さくても縮まないので
   max() で下限を持たせている。em は文字サイズ基準の比率値 */
.gm-pads {
  position: absolute;
  inset: 0;
  display: flex; justify-content: space-between;
}
/* **ふだんは見えない。** 画面いっぱいなので、枠を出しておく意味がなく、
   出しておくと背景の映像が見えなくなる。最初の数秒だけ点滅させて知らせる */
.gm-pad {
  flex: 1; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 2.6vh; font-weight: 700; text-align: center;
  line-height: 1.6; text-shadow: 0 .2vh .6vh rgba(0, 0, 0, .8);
  border: 0 solid transparent; border-radius: 2vh;
  opacity: 0; transition: opacity .8s;
}
.gm-stage.intro .gm-pad.l { background: rgba(255, 95, 174, .16); }
.gm-stage.intro .gm-pad.r { background: rgba(53, 200, 240, .16); }

/* 左上：ゲージ。**中身の仕様は未定。**枠と伸びる帯だけ用意しておく */

.gm-combo {
  position: absolute; top: 12vh; right: 3vh; text-align: right;
  font-weight: 900; line-height: 1; text-shadow: 0 .3vh .6vh rgba(0,0,0,.5);
}
.gm-combo-n { font-size: 9vh; color: #ffd166; }
.gm-combo-l { font-size: 2vh; color: #ffe9b0; }
.gm-combo.off { visibility: hidden; }

/* 左上：いまの点。
   **8桁ぶんの幅で固定して右寄せ。** 桁が増えるたびに数字が動くと、
   目の端で追えない。数字の幅も揃える（tabular-nums）。
   丸ゴシックを先に置く。無い環境では太めのゴシックに落ちる */
.gm-score {
  /* **上端から下げてある。** 映像の左上には番組のロゴが入っていることが多く、
     真上に置くと重なって、どちらも読めなくなる */
  position: absolute; top: 18vh; left: 2vh;
  width: 8ch; text-align: right;
  font-family: "Hiragino Maru Gothic ProN", "Rounded Mplus 1c",
               "Yu Gothic UI", "M PLUS Rounded 1c", system-ui, sans-serif;
  font-size: 6vh; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  /* **明るい背景でも暗い映像でも読めるように、白抜き＋濃い縁取り。**
     色だけで分けると、どちらかで沈む */
  color: #fff;
  -webkit-text-stroke: .45vh #24486f;
  paint-order: stroke fill;
  text-shadow: 0 .4vh .9vh rgba(0, 0, 0, .45);
}

/* 開始前と終了後に重ねる面 */
.gm-overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4vh; background: rgba(9, 12, 32, .9); padding: 3vh; text-align: center;
  overflow-y: auto;
}
.gm-overlay.hide { display: none; }

/* 曲を決める画面。**攻略ポータルから続いた明るさにする。**
   ここだけ急に暗くなると、別のサイトへ来たように見える */
.gm-overlay.light {
  background: linear-gradient(140deg, #ffd9ea 0%, #ffeccd 38%,
                              #d9f2d0 68%, #cfe6ff 100%);
  color: #2b3446;
}
.gm-overlay.light h2 { color: #22293a; }
.gm-overlay.light p { color: #4a5566; }
.gm-overlay.light .gm-sub { color: #5a6478; }
.gm-overlay.light .gm-btn { background: #6f7fbf; }
.gm-overlay.light .gm-btn:hover { background: #8291cd; }
/* **「はじめる」は明るい面でも桃色のまま。** ここだけ他と色を変えて目立たせる */
.gm-overlay.light .gm-btn.gm-go {
  background: linear-gradient(180deg, #ff8fbf, #f0559a);
}
.gm-overlay.light .gm-btn.gm-go:hover {
  background: linear-gradient(180deg, #ffa3cb, #f76ba9);
}
.gm-overlay.light input[type="number"] { background: #fff; color: #2b3446; }

/* 曲の情報。**ボタンに見えないように、1列の表で並べる** */
.gm-facts { border-collapse: collapse; margin: 0 auto 2vh; font-size: 2vh; }
.gm-facts th, .gm-facts td {
  padding: .45em 1.1em; border-bottom: 1px solid rgba(0, 0, 0, .12);
}
.gm-facts th { text-align: left; font-weight: 600; color: #5a6478; }
.gm-facts td { text-align: right; font-variant-numeric: tabular-nums; }
.gm-overlay h2 { font-size: 3.4vh; margin: 0; }
.gm-overlay p { margin: 0; font-size: 1.9vh; line-height: 1.8; color: #b9c8ec; }
/* 先へ進むボタン。**ここを押すのだと一目で分かるように光らせる。**
   ゆっくり脈打たせ、上を光がすべる。動きを減らす設定の人には止める */
.gm-btn.gm-go {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #ff8fbf, #f0559a);
  font-weight: 700; padding: .9em 3em; letter-spacing: .08em;
  animation: gmGoPulse 1.6s ease-in-out infinite;
}
.gm-btn.gm-go:hover { background: linear-gradient(180deg, #ffa3cb, #f76ba9); }
.gm-btn.gm-go::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0),
              rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  animation: gmGoShine 2.4s ease-in-out infinite;
}
@keyframes gmGoPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 143, 191, .55),
                         0 .4vh 1.2vh rgba(0, 0, 0, .18); }
  50%      { box-shadow: 0 0 2.4vh .8vh rgba(255, 143, 191, .75),
                         0 .4vh 1.2vh rgba(0, 0, 0, .18); }
}
@keyframes gmGoShine {
  0%       { left: -50%; }
  60%, 100% { left: 115%; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-btn.gm-go, .gm-btn.gm-go::after { animation: none; }
}

.gm-overlay .gm-btn { font-size: 2.2vh; }
/* **数を入れる欄だけの指定。**
   以前は input 全部に width: 8em を掛けていたので、チェックボックスまで
   8em の幅になり、四角と文字が大きく離れて見えていた */
.gm-overlay input[type="number"], .gm-overlay input[type="text"] {
  font-size: 2.4vh; padding: .5em .7em; border-radius: .5em; border: 0;
  text-align: center; width: 8em;
}

/* チェックは文字のすぐ左に置く */
.gm-overlay label { display: inline-flex; align-items: center; gap: .5em; }
.gm-overlay input[type="checkbox"] {
  width: 2.6vh; height: 2.6vh; margin: 0; flex: none;
  accent-color: #f0559a;
}

/* ファイルを選ぶボタン。**📁 だけ。**
   端末ごとに文言も幅も違う既定のボタンを出さない */
.gm-pick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4.4vh; height: 4.4vh; margin-left: .8em;
  border-radius: 1vh; cursor: pointer; font-size: 2.4vh; line-height: 1;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(0, 0, 0, .12);
}
.gm-pick:hover { background: #fff; }

/* この行だけで改行して、次の行に出す */
.gm-line { display: block; width: 100%; }
/* ===== 結果画面の背景：お城の前のステージ =====
   **暗い面をやめる。** プレイ画面を暗くしただけの真っ黒では、
   遊び終わった気分にならない。動きは全部 CSS に任せる。
   絵は自作（城は SVG の輪郭、あとは図形）で、公式のものは使わない */
.gm-overlay.sea { background: none; color: #f2f6ff; }
.gm-sea { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.gm-overlay.sea > *:not(.gm-sea) { position: relative; z-index: 1; }

/* 夕暮れの空。**花火が映える暗さにしつつ、真っ黒にはしない** */
.gm-sea-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    #2a2a63 0%, #4a3a86 30%, #8a4f95 55%, #d97a86 74%, #f5b57c 88%, #ffd9a8 100%);
}

/* 城。空の色に沈めた輪郭で置く */
/* **文字の後ろに大きく置きすぎない。** 成績を読む面なので、
   城は左右に広がる背景として控えめに置く */
.gm-castle {
  position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%);
  width: 92%; max-width: 120vh; height: auto; opacity: .92;
}
.gm-castle .cst { fill: #241d4a; }
.gm-castle .gate { fill: #3a2f63; }
/* 窓の明かり。**ゆっくり瞬かせる** */
.gm-castle .win rect {
  fill: #ffdf9a;
  animation: gmWin 3.4s ease-in-out infinite;
}
.gm-castle .win rect:nth-child(2n) { animation-delay: -1.1s; }
.gm-castle .win rect:nth-child(3n) { animation-delay: -2.2s; }
@keyframes gmWin {
  0%, 100% { opacity: .95; }
  50%      { opacity: .55; }
}

/* 舞台の照明。左右から扇形の光が振れる */
.gm-spot {
  position: absolute; bottom: 22%; width: 26vh; height: 60vh;
  background: linear-gradient(to top,
    rgba(255, 246, 214, .34), rgba(255, 246, 214, 0) 78%);
  clip-path: polygon(42% 100%, 58% 100%, 100% 0, 0 0);
  transform-origin: 50% 100%;
  filter: blur(.4vh);
}
.gm-spot.s1 { left: 8%;  animation: gmSpot1 5.2s ease-in-out infinite; }
.gm-spot.s2 { right: 8%; animation: gmSpot2 6.4s ease-in-out infinite; }
@keyframes gmSpot1 {
  0%, 100% { transform: rotate(-16deg); }
  50%      { transform: rotate(10deg); }
}
@keyframes gmSpot2 {
  0%, 100% { transform: rotate(15deg); }
  50%      { transform: rotate(-11deg); }
}

/* 舞台の床。手前に伸びる面と、ふちのフットライト */
.gm-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .05) 0 4vh, rgba(255, 255, 255, 0) 4vh 8vh),
    linear-gradient(180deg, #3b2f66 0%, #241c46 60%, #191436 100%);
  box-shadow: inset 0 .5vh 2vh rgba(255, 220, 170, .35),
              inset 0 .18vh 0 rgba(255, 226, 170, .9);
}

/* 紙吹雪。**降りながら回る** */
.gm-conf span {
  position: absolute; top: -6vh; width: 1.1vh; height: 1.7vh; border-radius: .2vh;
  animation: gmConf linear infinite;
}
.gm-conf span:nth-child(1) { left:  6%; background: #ff8fbf; animation-duration: 6.5s; animation-delay: 0s; }
.gm-conf span:nth-child(2) { left: 16%; background: #ffd166; animation-duration: 8.0s; animation-delay: -2s; }
.gm-conf span:nth-child(3) { left: 27%; background: #7fe3ff; animation-duration: 7.2s; animation-delay: -4s; }
.gm-conf span:nth-child(4) { left: 37%; background: #b9a2ff; animation-duration: 9.0s; animation-delay: -1s; }
.gm-conf span:nth-child(5) { left: 47%; background: #9ff0c0; animation-duration: 6.8s; animation-delay: -5s; }
.gm-conf span:nth-child(6) { left: 58%; background: #ff8fbf; animation-duration: 8.6s; animation-delay: -3s; }
.gm-conf span:nth-child(7) { left: 68%; background: #ffd166; animation-duration: 7.6s; animation-delay: -6s; }
.gm-conf span:nth-child(8) { left: 78%; background: #7fe3ff; animation-duration: 9.4s; animation-delay: -2.5s; }
.gm-conf span:nth-child(9) { left: 87%; background: #b9a2ff; animation-duration: 6.2s; animation-delay: -4.5s; }
.gm-conf span:nth-child(10){ left: 95%; background: #9ff0c0; animation-duration: 8.2s; animation-delay: -1.5s; }
@keyframes gmConf {
  0%   { transform: translateY(0) rotate(0deg);      opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(112vh) rotate(900deg); opacity: 0; }
}

/* 花火。**1つの点にたくさんの影を付けて、丸ごと拡大して散らす。**
   外側12個・内側8個の二重にすると、輪の並びではなく「散った」ように見える */
.gm-fw {
  position: absolute; width: .6vh; height: .6vh; border-radius: 50%;
  background: transparent;
  box-shadow: 7.00vh 0.00vh 0 0 var(--fw), 6.06vh 3.50vh 0 0 var(--fw), 3.50vh 6.06vh 0 0 var(--fw), 0.00vh 7.00vh 0 0 var(--fw), -3.50vh 6.06vh 0 0 var(--fw), -6.06vh 3.50vh 0 0 var(--fw), -7.00vh 0.00vh 0 0 var(--fw), -6.06vh -3.50vh 0 0 var(--fw), -3.50vh -6.06vh 0 0 var(--fw), -0.00vh -7.00vh 0 0 var(--fw), 3.50vh -6.06vh 0 0 var(--fw), 6.06vh -3.50vh 0 0 var(--fw), 3.51vh 1.45vh 0 -.1vh var(--fw), 1.45vh 3.51vh 0 -.1vh var(--fw), -1.45vh 3.51vh 0 -.1vh var(--fw), -3.51vh 1.45vh 0 -.1vh var(--fw), -3.51vh -1.45vh 0 -.1vh var(--fw), -1.45vh -3.51vh 0 -.1vh var(--fw), 1.45vh -3.51vh 0 -.1vh var(--fw), 3.51vh -1.45vh 0 -.1vh var(--fw);
  opacity: 0; transform: scale(.15);
  animation: gmFw 4.4s ease-out infinite;
  filter: drop-shadow(0 0 .6vh rgba(255, 255, 255, .55));
}
@keyframes gmFw {
  0%   { opacity: 0;   transform: scale(.15); }
  6%   { opacity: 1;   transform: scale(.45); }
  40%  { opacity: .95; transform: scale(1.15); }
  66%  { opacity: 0;   transform: scale(1.5); }
  100% { opacity: 0;   transform: scale(1.5); }
}
.gm-fw.f1 { --fw: #ff6fae; left: 18%; top: 20%; animation-duration: 4.4s;
            animation-delay: 0s; }
.gm-fw.f2 { --fw: #ffd166; left: 44%; top: 12%; animation-duration: 5.2s;
            animation-delay: -1.6s; }
.gm-fw.f3 { --fw: #7fe3ff; left: 70%; top: 26%; animation-duration: 4.8s;
            animation-delay: -3.1s; }
.gm-fw.f4 { --fw: #b9a2ff; left: 86%; top: 15%; animation-duration: 6.0s;
            animation-delay: -2.3s; }

/* しずくの形に開く花火。**10発に1発くらい混ぜる**（決めるのは play.js）。
   火花を、下は丸く・上はとがった輪郭に沿って並べる */
.gm-fw.drop {
  --fw: #9fdcff;
  box-shadow: 4.51vh 0.56vh 0 -.05vh var(--fw), 4.80vh 2.20vh 0 -.05vh var(--fw), 4.51vh 3.84vh 0 -.05vh var(--fw), 3.68vh 5.29vh 0 -.05vh var(--fw), 2.40vh 6.36vh 0 -.05vh var(--fw), 0.83vh 6.93vh 0 -.05vh var(--fw), -0.83vh 6.93vh 0 -.05vh var(--fw), -2.40vh 6.36vh 0 -.05vh var(--fw), -3.68vh 5.29vh 0 -.05vh var(--fw), -4.51vh 3.84vh 0 -.05vh var(--fw), -4.80vh 2.20vh 0 -.05vh var(--fw), -4.51vh 0.56vh 0 -.05vh var(--fw), -3.40vh -2.20vh 0 -.05vh var(--fw), -1.90vh -4.80vh 0 -.05vh var(--fw), 0.00vh -7.60vh 0 -.05vh var(--fw), 1.90vh -4.80vh 0 -.05vh var(--fw), 3.40vh -2.20vh 0 -.05vh var(--fw);
}

/* ===== パーフェクトフルコンボのときだけ、盛大にする ===== */
/* 花火の間隔を詰める。**音は絵に合わせて鳴るので、音も一緒に増える** */
.gm-overlay.pfc .gm-fw.f1 { animation-duration: 1.0s; }
.gm-overlay.pfc .gm-fw.f2 { animation-duration: 1.4s; }
.gm-overlay.pfc .gm-fw.f3 { animation-duration: 1.7s; }
.gm-overlay.pfc .gm-fw.f4 { animation-duration: 2.0s; }
.gm-overlay.pfc .gm-fw { filter: drop-shadow(0 0 1vh rgba(255, 255, 255, .8)); }
/* 紙吹雪を速く・濃く */
.gm-overlay.pfc .gm-conf span {
  animation-duration: 3.6s; width: 1.4vh; height: 2.2vh;
}
/* 照明を明るく、振りも大きく */
.gm-overlay.pfc .gm-spot {
  background: linear-gradient(to top,
    rgba(255, 246, 214, .55), rgba(255, 246, 214, 0) 78%);
}
.gm-overlay.pfc .gm-spot.s1 { animation-duration: 3.4s; }
.gm-overlay.pfc .gm-spot.s2 { animation-duration: 4.0s; }
/* 空ごと金色に脈打たせる */
.gm-overlay.pfc .gm-sea-sky::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 30%,
    rgba(255, 220, 140, .38) 0%, rgba(255, 220, 140, 0) 70%);
  animation: gmPfcGlow 2.2s ease-in-out infinite;
}
@keyframes gmPfcGlow {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
/* 見出しをさらに大きく、脈打たせる */
.gm-overlay.pfc .gm-fc {
  font-size: 5.6vh;
  animation: gmFcFlow 2s linear infinite, gmFcBeat 1.1s ease-in-out infinite;
}
@keyframes gmFcBeat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .gm-overlay.pfc .gm-sea-sky::after, .gm-overlay.pfc .gm-fc { animation: none; }
}

/* 成績を載せる面。**背景が賑やかなので、いったん落ち着かせてから文字を置く** */
.gm-endpanel {
  display: flex; flex-direction: column; align-items: center;
  gap: .6vh; padding: 2vh 3.2vh 1.6vh; border-radius: 2vh;
  background: rgba(26, 20, 56, .52);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 1vh 4vh rgba(10, 6, 30, .45);
  backdrop-filter: blur(.6vh);
  -webkit-backdrop-filter: blur(.6vh);
  max-width: 92%;
}

/* ===== 結果の文字。**夕暮れの空の上に置くので、濃い影で浮かせる** ===== */
/* **セレクタを .gm-overlay 付きにしてある。**
   .gm-overlay p の指定（1.9vh）のほうが強く、曲名だけ小さいままだった */
.gm-overlay .gm-endsong {
  font-size: 4.4vh; font-weight: 800; margin: 0; color: #fff; line-height: 1.3;
  text-shadow: 0 .2vh .6vh rgba(0, 0, 0, .6), 0 0 1.6vh rgba(0, 0, 0, .45);
}
.gm-overlay.sea .gm-stars { color: #ffd166;
  text-shadow: 0 0 1.4vh rgba(255, 209, 102, .7), 0 .2vh .6vh rgba(0, 0, 0, .55); }
.gm-overlay.sea .gm-stars .off { color: rgba(255, 255, 255, .28); text-shadow: none; }
.gm-overlay.sea .gm-res .k { color: #d8c8ff; }
.gm-overlay.sea .gm-res .v { color: #fff; }
.gm-overlay.sea .gm-big { color: #fff;
  text-shadow: 0 .2vh .6vh rgba(0, 0, 0, .6); }
.gm-overlay.sea .gm-parts th { color: #d8c8ff;
  border-bottom-color: rgba(255, 255, 255, .28); }
.gm-overlay.sea .gm-parts td { color: #f2f6ff; }
.gm-overlay.sea .gm-parts .perfect { color: #ffd166; }
.gm-overlay.sea .gm-parts .good { color: #cfd8e6; }
.gm-overlay.sea .gm-parts .miss { color: #a58fb0; }
.gm-overlay.sea p { color: #e6ddff; }

/* フルコンボの見出し。**虹色を流して光らせる** */
.gm-fc {
  font-size: 4.4vh; font-weight: 900; letter-spacing: .06em; margin: .4vh 0 .6vh;
  background: linear-gradient(90deg,
    #ff5f7e, #ffb84d, #ffe66d, #6fe39b, #5fd0ff, #a78bfa, #ff5f7e);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 .2vh .5vh rgba(0, 0, 0, .55))
          drop-shadow(0 0 1.6vh rgba(255, 255, 255, .45));
  animation: gmFcFlow 3s linear infinite;
}
@keyframes gmFcFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-fw, .gm-fc, .gm-spot, .gm-conf span, .gm-castle .win rect { animation: none; }
  .gm-fw { opacity: .9; transform: scale(1.1); }
}

.gm-res { display: grid; grid-template-columns: auto auto; gap: .6vh 1.8vh;
          font-size: 2.8vh; margin: 1vh 0; align-items: baseline; }
.gm-res .k { color: #9fb0d8; text-align: right; }
.gm-res .v { font-variant-numeric: tabular-nums; font-weight: 700; text-align: left; }
.gm-big { font-size: 5.6vh; font-weight: 900; color: #ffd166;
          font-variant-numeric: tabular-nums; }

/* 審査結果の☆。**数で見せる。** 色や大きさで段を作ると、
   隣の段との差が読み取りにくい */
.gm-stars {
  font-size: 4.6vh; letter-spacing: .1em; color: #ffd166; margin: .6vh 0 1vh;
  text-shadow: 0 0 1.2vh rgba(255, 209, 102, .6);
}
.gm-stars .off { color: #3a4152; text-shadow: none; }

/* パートごとの成績 */
.gm-parts { margin: 1vh auto; border-collapse: collapse; font-size: 2.4vh; }
.gm-parts th, .gm-parts td { padding: .45vh 1.4vh; text-align: right; }
.gm-parts th { color: #9fb0d8; font-weight: 400; border-bottom: 1px solid #3a4152; }
.gm-parts td:first-child, .gm-parts th:first-child { text-align: left; }
.gm-parts .perfect { color: #ffd166; font-weight: 700; }
.gm-parts .good { color: #cfd8e6; font-weight: 700; }
.gm-parts .miss { color: #8a94a6; }

/* 下のボタンの並び。**「曲選択へもどる」だけ右下へ。**
   親が中央寄せなので、幅を持たせないと右に寄らない */
.gm-endrow {
  width: 100%; max-width: 86vh; margin-left: auto; margin-right: auto;
  justify-content: flex-start;
}
.gm-endrow .gm-back { margin-left: auto; }

/* ===== なぞる・ふる・パートの見せ方 =====
   **位置はすべて JS が px で入れる**（.gm-slot などと同じ決まり） */

/* なぞる軌跡の点。順に現れ、カードが通ると光る */
.gm-dot {
  position: absolute; left: 0; top: 0;
  width: 3vh; height: 3vh; border-radius: 50%;   /* 半径2倍 */
  background: rgba(255, 214, 102, .85);
  box-shadow: 0 0 .6vh rgba(255, 214, 102, .5);
  opacity: 0; transition: opacity .12s;
}
.gm-dot.on { opacity: 1; }
.gm-dot.lit { background: #fff; box-shadow: 0 0 1.4vh #ffd666; }

/* ふるの最中。カードを左右に揺らす。**位置は JS が入れるので
   transform は使えない。** 揺れは中の絵だけを動かす */
@keyframes gm-shake {
  0%, 100% { transform: translateX(-12%) rotate(-7deg); }
  50%      { transform: translateX(12%) rotate(7deg); }
}
.gm-card.shaking svg { animation: gm-shake .18s linear infinite; }

/* パートの前置き。実機の水色パネル */
.gm-cue {
  position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%);
  padding: 1.2vh 2.4vh; border-radius: 1.2vh;
  background: rgba(186, 233, 255, .92); color: #123;
  font-weight: 700; font-size: 2.6vh; white-space: nowrap;
  box-shadow: 0 .4vh 1.2vh rgba(0, 0, 0, .35);
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.gm-cue.on { opacity: 1; }

/* パートの結果 */
/* ===== 管理者だけに出す確認用の表示 ===== */

/* 判定のずれ（ms）。カードのそばに小さく出す */
.gm-dev {
  position: absolute; z-index: 3; pointer-events: none;
  font-size: 2.6vh; font-weight: 700; white-space: nowrap;
  line-height: 1.35; text-align: center;
  padding: .3vh .8vh; border-radius: .6vh;
  background: rgba(0, 0, 0, .55);
  transform: translate(-50%, -50%);
  text-shadow: 0 .2vh .5vh rgba(0, 0, 0, .9);
  transition: opacity .3s;
}
/* 色は**行ごと**に付ける。始点と終点で別々に判断できるように */
.gm-dev .fast { color: #5ec8ff; }    /* はやい（−Perfect窓より手前）＝青 */
.gm-dev .slow { color: #ff6b6b; }    /* おそい（＋Perfect窓より後ろ）＝赤 */
.gm-dev .on0  { color: #b8f0c6; }    /* 窓の中＝緑 */

/* 残り時間の帯。**10等分の目盛りを内側に置く** */
.gm-timebar {
  position: absolute; left: 8%; right: 8%; bottom: 4.5vh; height: 1.6vh;
  z-index: 3; border-radius: .8vh; overflow: hidden;
  background: rgba(0, 0, 0, .5); box-shadow: 0 0 0 .2vh rgba(255, 255, 255, .35);
}
.gm-timebar-fill {
  position: absolute; inset: 0; transform-origin: left center;
  background: linear-gradient(90deg, #ffd166, #ff8f5e);
}
/* 目盛り。**帯の中に線を引く**（外に置くと帯の外へはみ出す） */
.gm-timebar-ticks {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg,
    rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .55) .2vh, transparent .2vh,
    transparent 10%);
}
.gm-timebar-label {
  position: absolute; right: .6vh; top: 50%; transform: translateY(-50%);
  font-size: 1.2vh; font-weight: 700; color: #fff;
  text-shadow: 0 0 .4vh rgba(0, 0, 0, .9);
}

/* パートを取り切ったときに中央へ出す言葉。
   **.gm-res とは別のクラスにする。** 同じ名前だと結果画面の表を潰す
   （実際に潰していた） */
.gm-part-res {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  font-weight: 900; font-size: 6vh; color: #fff;
  text-shadow: 0 0 1.8vh #ffd166, 0 0 4vh #ff9c1a, 0 .3vh .6vh rgba(0, 0, 0, .6);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.gm-part-res.on { opacity: 1; }

/* 管理者向けの表示への入口。**目立たせない**（一般の人には用が無い） */