/* =========================================================================
   VIVE TYPING - スタイル（ネオン・サイバー系）
   ========================================================================= */
:root{
  --bg:#07070f;
  --cyan:#22e5ff;
  --pink:#ff3bd4;
  --gold:#ffd83b;
  --ink:#e8f4ff;
  --dim:#5a6a80;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  background:
    radial-gradient(1000px 500px at 20% -10%, #1a0a2e 0%, transparent 60%),
    radial-gradient(1000px 500px at 80% -10%, #06202e 0%, transparent 60%),
    linear-gradient(180deg,#10101e 0%, #07070f 60%, #050508 100%);
  color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
}

#app{position:relative;height:100vh;display:flex;flex-direction:column;}

/* ===== 上部HUD ===== */
#hud{
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  padding:10px 18px;background:rgba(0,0,10,.5);
  border-bottom:2px solid var(--pink);font-size:14px;z-index:10;
}
#hud .item{display:flex;flex-direction:column;line-height:1.2;}
#hud .lbl{font-size:11px;color:var(--dim);letter-spacing:1px;}
#hud .val{font-size:20px;font-weight:bold;color:var(--cyan);font-variant-numeric:tabular-nums;}
#hpwrap{flex:1;min-width:160px;}
#hpbar{height:16px;border:2px solid var(--pink);border-radius:8px;overflow:hidden;background:#140518;}
#hpfill{height:100%;width:100%;background:linear-gradient(90deg,var(--pink),var(--cyan));transition:width .2s;}

/* ===== プレイ画面（奥から敵が迫る疑似3D視点） ===== */
#field{position:relative;flex:1;overflow:hidden;}
/* 地平線と奥行きグリッドの床 */
#ground{position:absolute;left:0;right:0;top:34%;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  box-shadow:0 0 14px var(--cyan);opacity:.6;}
#floor{position:absolute;left:-40%;right:-40%;top:34%;bottom:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(34,229,255,.14) 0 2px, transparent 2px 90px),
    repeating-linear-gradient(0deg,  rgba(34,229,255,.10) 0 2px, transparent 2px 64px);
  transform:perspective(320px) rotateX(58deg);transform-origin:50% 0;}

/* 主人公（画面下中央・ギター弾き語りの背中） */
#hero{
  position:absolute;left:50%;bottom:10%;transform:translateX(-50%);
  width:120px;filter:drop-shadow(0 0 14px rgba(34,229,255,.4));
  z-index:15;pointer-events:none;
}
#hero.groove{width:140px;}
#hero .pose{display:none;width:100%;height:auto;overflow:visible;}
#hero.idle   #heroIdle{display:block;}
#hero.play   #heroPlay{display:block;}
#hero.groove #heroGroove{display:block;}
#hero.hit{animation:shake .25s;}
@keyframes shake{
  0%,100%{transform:translateX(-50%);}
  25%{transform:translateX(calc(-50% - 10px));}
  75%{transform:translateX(calc(-50% + 10px));}}

/* 演奏アニメーション */
#heroPlay{animation:heroBob .5s ease-in-out infinite;}
@keyframes heroBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
#heroGroove{transform-origin:50% 92%;animation:heroSway .5s ease-in-out infinite;}
@keyframes heroSway{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}}
.strum{transform-box:fill-box;transform-origin:30% 12%;animation:strum .24s ease-in-out infinite;}
@keyframes strum{0%,100%{transform:rotate(0deg);}50%{transform:rotate(-12deg);}}
.strumBig{transform-box:fill-box;transform-origin:25% 10%;animation:strumBig .18s ease-in-out infinite;}
@keyframes strumBig{0%,100%{transform:rotate(5deg);}50%{transform:rotate(-15deg);}}
.spark{animation:sparkle .28s steps(2) infinite;}
@keyframes sparkle{0%,100%{opacity:1;}50%{opacity:.15;}}
.note{animation:noteFloat 1s ease-in-out infinite;}
.note.n2{animation-delay:.4s;}
@keyframes noteFloat{0%,100%{opacity:.3;transform:translateY(0);}50%{opacity:1;transform:translateY(-4px);}}

/* ギュイーン！ポップ */
.gyuin{position:absolute;z-index:16;font-weight:900;font-size:22px;color:var(--gold);
  text-shadow:0 0 10px var(--pink),2px 2px 0 #000;pointer-events:none;white-space:nowrap;
  animation:gyuin .7s ease-out forwards;}
@keyframes gyuin{
  0%{opacity:0;transform:translate(-50%,0) rotate(-10deg) scale(.5);}
  25%{opacity:1;transform:translate(-50%,-14px) rotate(-8deg) scale(1.15);}
  100%{opacity:0;transform:translate(-50%,-46px) rotate(-6deg) scale(1);}}

/* 「敵を倒し切った」バナー：ここから先は合唱パート、という一拍の区切り */
#victoryBanner{
  position:absolute;top:36%;left:50%;transform:translate(-50%,-50%);
  z-index:18;text-align:center;font-size:32px;font-weight:900;letter-spacing:2px;
  color:var(--gold);text-shadow:0 0 18px var(--pink),3px 3px 0 #000;
  opacity:0;pointer-events:none;
}
#victoryBanner small{display:block;font-size:14px;font-weight:normal;color:var(--cyan);
  letter-spacing:1px;margin-top:6px;text-shadow:none;}
#victoryBanner.show{animation:victoryBanner 2.4s ease-out forwards;}
@keyframes victoryBanner{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7);}
  15%{opacity:1;transform:translate(-50%,-50%) scale(1.05);}
  25%{transform:translate(-50%,-50%) scale(1);}
  78%{opacity:1;}
  100%{opacity:0;}}

/* ===== 仲間（解放した人。プレイヤーの左右に並び、一緒に歌う。打ち込みパネルとは重ならない高さ） ===== */
#allies{
  position:absolute;left:50%;bottom:15%;width:0;height:0;z-index:13;pointer-events:none;
}
.allyIcon{
  position:absolute;bottom:calc(var(--row) * 22px);width:17px;height:27px;
  /* --side: 偶数目=左(-1) / 奇数目=右(1)。--row: 外側の人ほど上の段に積み上がる */
  left:calc(var(--side) * (58px + var(--row) * 20px));
  transform:translateX(-50%);
  filter:drop-shadow(0 0 6px var(--cyan));
  animation:allySing .6s ease-in-out infinite;
}
.allyIcon svg{width:100%;height:100%;display:block;}
@keyframes allySing{0%,100%{transform:translateX(-50%) translateY(0) rotate(0deg);}
  50%{transform:translateX(-50%) translateY(-5px) rotate(-4deg);}}
.allyMore{
  position:absolute;bottom:0;left:0;transform:translateX(-50%);
  font-size:13px;font-weight:bold;color:var(--gold);
  background:rgba(0,0,10,.6);border:1px solid var(--gold);border-radius:10px;padding:2px 8px;
}

/* ===== 敵（left/top/scale はJSが毎フレーム設定する） ===== */
.enemy{
  position:absolute;transform:translate(-50%,-100%);
  text-align:center;z-index:3;will-change:left,top,transform;
}
.enemy .body{width:50px;height:80px;margin:0 auto;filter:drop-shadow(0 3px 4px #000);transition:filter .15s;}
.enemy .body svg{width:100%;height:100%;display:block;}
.enemy.boss .body{width:100px;height:160px;filter:drop-shadow(0 0 20px var(--pink));}
.enemy .hpbar{
  width:64px;height:8px;margin:0 auto 3px;
  border:1px solid var(--cyan);border-radius:4px;overflow:hidden;background:#041018;
}
.enemy.boss .hpbar{width:140px;height:12px;}
.enemy .hpfill{height:100%;width:100%;background:linear-gradient(90deg,var(--pink),var(--cyan));transition:width .1s;}
.enemy .glabel{font-size:15px;height:20px;}
.enemy.target .body{filter:drop-shadow(0 0 14px var(--gold));}
.enemy.target .hpbar{border-color:var(--gold);box-shadow:0 0 10px rgba(255,216,59,.4);}
.enemy.dmg .body{animation:edmg .12s;}
@keyframes edmg{0%{transform:scale(1);}40%{transform:scale(1.18);}100%{transform:scale(1);}}
/* 相性一致（刺さってる） */
.enemy.vibed .glabel{text-shadow:0 0 10px var(--gold);}
.enemy.vibed.target::after{
  content:"刺さってる！";
  position:absolute;top:-22px;left:50%;transform:translateX(-50%) rotate(-4deg);
  font-size:13px;font-weight:bold;color:var(--gold);text-shadow:0 0 8px rgba(255,216,59,.8);
  white-space:nowrap;
}

/* 解放セリフ */
.cry{position:absolute;z-index:8;font-size:24px;font-weight:bold;color:var(--cyan);
  text-shadow:0 0 10px var(--cyan),2px 2px 0 #000;pointer-events:none;white-space:nowrap;
  animation:cryUp 1.1s ease-out forwards;transform:translate(-50%,-50%);}
@keyframes cryUp{0%{opacity:0;transform:translate(-50%,-50%) scale(.6);}
  20%{opacity:1;transform:translate(-50%,-90%) scale(1.1);}
  100%{opacity:0;transform:translate(-50%,-170%) scale(1);}}

/* コンボ・判定ポップ */
#comboPop{position:absolute;top:16px;left:50%;transform:translateX(-50%);
  font-size:30px;font-weight:900;color:var(--gold);text-shadow:0 0 12px var(--pink),2px 2px 0 #000;
  opacity:0;transition:opacity .2s;z-index:6;pointer-events:none;}
#judgePop{position:absolute;left:50%;bottom:26%;transform:translateX(-50%);
  font-size:34px;font-weight:900;letter-spacing:2px;opacity:0;z-index:7;pointer-events:none;}
#judgePop.show{animation:jpop .35s;}
#judgePop.perfect{color:var(--gold);text-shadow:0 0 16px var(--pink),2px 2px 0 #000;}
#judgePop.good{color:var(--cyan);text-shadow:0 0 12px var(--cyan),2px 2px 0 #000;}
@keyframes jpop{0%{opacity:0;transform:translateX(-50%) scale(.6);}
  25%{opacity:1;transform:translateX(-50%) scale(1.15);}
  80%{opacity:1;transform:translateX(-50%) scale(1);}
  100%{opacity:0;transform:translateX(-50%) scale(1);}}

/* ミスのフラッシュ */
#flash{position:absolute;inset:0;background:var(--pink);opacity:0;pointer-events:none;z-index:7;}
#flash.on{animation:fl .18s;}
@keyframes fl{0%{opacity:.3;}100%{opacity:0;}}

/* ===== 打ち込みパネル ===== */
#typePanel{
  position:absolute;left:50%;bottom:4%;transform:translateX(-50%);
  display:flex;align-items:center;gap:18px;z-index:6;
  background:rgba(2,2,24,.7);border:2px solid var(--pink);border-radius:14px;
  padding:12px 24px;box-shadow:0 0 26px rgba(255,59,212,.25);
  min-width:340px;max-width:90vw;
}
#beatPulse{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 35% 35%, var(--cyan), #045);
  box-shadow:0 0 16px var(--cyan);opacity:.15;
}
#phraseJp{font-size:22px;font-weight:bold;color:#fff;line-height:1.3;}
#phraseRoman{font-family:"Courier New",monospace;font-size:19px;letter-spacing:1px;margin-top:2px;}
#phraseRoman .done{color:var(--cyan);}
#phraseRoman .now{color:#000;background:var(--pink);border-radius:3px;padding:0 2px;}
#phraseRoman .rest{color:var(--dim);}

/* ===== オーバーレイ（タイトル/曲選択/結果） ===== */
.overlay{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(800px 400px at 50% 30%,rgba(80,10,80,.35),rgba(0,0,8,.93));
  padding:24px;overflow-y:auto;}
.overlay.hidden{display:none;}
.title{font-size:min(11vw,72px);font-weight:900;letter-spacing:6px;margin:0;
  color:#fff;text-shadow:0 0 22px var(--cyan),3px 3px 0 #000;}
.title .pink{color:var(--pink);text-shadow:0 0 22px var(--pink),3px 3px 0 #000;}
.sub{color:var(--cyan);letter-spacing:5px;margin:8px 0 22px;font-size:15px;}
.desc{color:#9fb2c8;max-width:560px;line-height:1.8;margin-bottom:24px;font-size:14px;}
.desc b{color:var(--gold);}
.hint{color:var(--dim);font-size:12px;margin-top:18px;}

.btnrow{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.btnrow.col{flex-direction:column;align-items:stretch;min-width:min(420px,80vw);}
.btn{
  background:linear-gradient(180deg,#141428,#0a0a16);
  color:var(--ink);border:2px solid var(--pink);border-radius:10px;
  padding:14px 26px;font-size:17px;font-weight:bold;cursor:pointer;
  letter-spacing:2px;transition:transform .08s, background .15s, box-shadow .15s;
}
.btn:hover{background:linear-gradient(180deg,#2a1040,#140820);transform:translateY(-2px);
  box-shadow:0 0 16px rgba(255,59,212,.35);}
.btn small{display:block;font-size:11px;color:var(--dim);font-weight:normal;margin-top:4px;letter-spacing:0;}
.btn.sel{border-color:var(--gold);box-shadow:0 0 14px rgba(255,216,59,.45);}
.btn.mini{padding:8px 18px;font-size:14px;}
.btn.song{text-align:left;letter-spacing:1px;}
.btn.song .g{color:var(--cyan);font-size:13px;display:block;margin-bottom:2px;}
.btn.song .t{font-size:19px;display:block;}

.modeRow{display:flex;gap:10px;align-items:center;margin-bottom:20px;flex-wrap:wrap;justify-content:center;}
.modeLbl{color:var(--dim);font-size:13px;}

/* 結果画面 */
#resultTitle{font-size:min(12vw,58px);font-weight:900;letter-spacing:4px;
  color:var(--pink);text-shadow:0 0 20px var(--pink),3px 3px 0 #000;}
#resultTitle.clear{color:var(--gold);text-shadow:0 0 20px var(--gold),3px 3px 0 #000;}
#niceBadge{
  display:none;font-size:15px;font-weight:bold;letter-spacing:2px;color:var(--cyan);
  text-shadow:0 0 10px var(--cyan);margin-top:6px;
}
#niceBadge.show{display:block;animation:noteFloat 1.2s ease-in-out infinite;}
#rank{font-size:min(9vw,44px);font-weight:900;color:var(--gold);
  text-shadow:0 0 18px var(--pink);margin:6px 0;}
.stats{display:grid;grid-template-columns:repeat(2,minmax(140px,1fr));gap:10px 30px;
  margin:18px 0 26px;font-size:18px;}
.stats .k{color:var(--dim);font-size:13px;}
.stats .v{color:var(--cyan);font-weight:bold;font-size:24px;font-variant-numeric:tabular-nums;}