:root {
/* File: css/base.css
   Purpose: Global layout, typography, and shared components.
*/
      --bg: #090909;
      --panel: #111111ee;
      --text: #f8f8f8;
      --red: #cb101e;
      --red-bright: #ff2940;
      --line: #ffffff;
      --yellow: #ffd447;
      --shadow: 0 8px 26px #00000099;
      --minigame-left: 12px;
      --minigame-right: 12px;
      --minigame-top: 62px;
      --minigame-bottom: 178px;
      --minigame-padding: 10px;
      /* テキストウィンドウの実測高さ。JS(syncTextboxHeightVar)が随時更新する。
         未設定時はベースの .textbox min-height と同じ値を仮定する。 */
      --textbox-h: 142px;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: var(--bg);
      color: var(--text);
      font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    }

    #app {
      position: relative;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at 20% 20%, #2b0a0e 0%, #100406 36%, #050505 100%);
    }

    #app.live-mode .top-ui,
    #app.live-mode .stage-hud,
    #app.live-mode .status-panel,
    #app.guitar-mode .top-ui,
    #app.guitar-mode .stage-hud,
    #app.guitar-mode .status-panel,
    #app.bass-mode .top-ui,
    #app.bass-mode .stage-hud,
    #app.bass-mode .status-panel,
    #app.drum-mode .top-ui,
    #app.drum-mode .stage-hud,
    #app.drum-mode .status-panel {
      display: none;
    }

    .screen {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      transform: translateX(4%);
      transition: opacity 300ms ease, transform 300ms ease;
    }

    .screen.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(0);
    }

    .title-wrap {
      height: 100%;
      padding: 8vh 6vw;
      display: grid;
      grid-template-columns: 1fr minmax(220px, 360px);
      gap: 4vw;
      align-items: center;
    }

    .title-main {
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 900;
      line-height: 0.92;
      font-size: clamp(2.2rem, 8.8vw, 8rem);
      text-shadow: 0 0 22px #c70f1f55;
    }

    .title-main .accent {
      color: var(--red-bright);
      display: inline-block;
      transform: skewX(-12deg);
    }

    .title-sub {
      margin-top: 16px;
      font-size: clamp(0.9rem, 2vw, 1.3rem);
      letter-spacing: 0.18em;
      color: #f2dcdc;
    }

    .slash {
      width: 85%;
      height: 10px;
      margin-top: 20px;
      background: linear-gradient(100deg, transparent 0 8%, var(--red) 8% 88%, transparent 88% 100%);
    }

    .menu-panel {
      padding: 18px;
      background: #0d0d0dd9;
      border: 2px solid #ffffff66;
      clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
      box-shadow: var(--shadow);
    }

    .menu-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .menu-item {
      border: 2px solid #ffffff55;
      padding: 12px 16px;
      font-size: clamp(1rem, 2.3vw, 1.35rem);
      font-weight: 800;
      letter-spacing: 0.08em;
      clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%, 0 14px);
      background: #141414;
      color: var(--text);
      cursor: pointer;
      transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
      text-align: left;
    }

    .menu-item.selected,
    .menu-item:hover {
      transform: scale(1.05) rotate(-1deg);
      background: var(--red);
      border-color: #fff;
    }

    .hint {
      margin-top: 14px;
      font-size: 0.78rem;
      color: #d6c5c5;
      letter-spacing: 0.06em;
    }

    #gameScreen {
      background: #000;
    }

    .scene {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }

    .bg-layer {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      filter: brightness(0.62) saturate(0.92);
      transition: opacity 440ms ease;
    }

    .bg-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(115deg, #000000d2 0 16%, transparent 34%),
        linear-gradient(10deg, transparent 0 60%, #7d0b1770 100%);
      pointer-events: none;
    }

    .wipe {
      position: absolute;
      inset: -20% -30%;
      background: linear-gradient(105deg, #0000 0 22%, #cb101eed 40% 64%, #0000 80%);
      transform: translateX(-120%) skewX(-16deg);
      pointer-events: none;
      opacity: 0;
    }

    .wipe.play {
      animation: wipeMove 360ms ease;
    }

    @keyframes wipeMove {
      0% { transform: translateX(-120%) skewX(-16deg); opacity: 0.95; }
      100% { transform: translateX(120%) skewX(-16deg); opacity: 0; }
    }

    .top-ui {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 6;
      display: flex;
      gap: 8px;
    }

    .mini-btn {
      padding: 8px 12px;
      background: #111;
      color: #fff;
      border: 2px solid #ffffff80;
      clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%, 0 10px);
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      font-weight: 700;
      cursor: pointer;
    }


    .cast-layer {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
    }

    .chara {
      position: absolute;
      /* テキストウィンドウの実際の高さぶん上に立たせる。
         固定vhだと画面の縦横比次第で足元とウィンドウの間に隙間ができてしまうため、
         実測値(--textbox-h)を使う。さらに少し下げてウィンドウに軽く重ねることで、
         画像側の余白（靴底のシェーディング等）による見た目の隙間を打ち消す。 */
      bottom: calc(var(--textbox-h, 142px) - 22px);
      width: min(42vw, 390px);
      max-height: 76vh;
      object-fit: contain;
      filter: drop-shadow(0 10px 20px #000);
      opacity: 0;
      transform: translateY(14px) scale(0.98);
      transition: opacity 250ms ease, transform 250ms ease;
    }

    .chara.show {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .chara.show.talk-pop {
      animation: charaTalkPop 220ms ease-out;
    }

    @keyframes charaTalkPop {
      0% { transform: translateY(0) scale(1); }
      45% { transform: translateY(-10px) scale(1.01); }
      100% { transform: translateY(0) scale(1); }
    }

    .chara.left { left: 2vw; }
    .chara.right { right: 2vw; }

    .stage-hud {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 6;
      padding: 10px 12px;
      background: #111a;
      border: 2px solid #ffffff80;
      clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%, 0 10px);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      min-width: 186px;
    }

    .stage-hud span.done { color: var(--yellow); }

    .status-panel {
      position: absolute;
      top: 62px;
      left: 12px;
      z-index: 6;
      min-width: 220px;
      padding: 10px 12px;
      background: linear-gradient(160deg, #ffd84d 0%, #f5b91f 100%);
      color: #111;
      border: 2px solid #111;
      clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
      box-shadow: 0 6px 14px #00000066;
    }

    .status-title {
      font-weight: 900;
      font-size: 0.8rem;
      letter-spacing: 0.08em;
      margin-bottom: 6px;
    }

    .status-row {
      display: grid;
      grid-template-columns: 80px 1fr;
      align-items: center;
      font-size: 0.74rem;
      margin-bottom: 3px;
      font-weight: 800;
    }

    .status-stars {
      font-size: 0.92rem;
      letter-spacing: 0.08em;
    }

    .finalscore-layer {
      position: absolute;
      inset: 0;
      z-index: 11;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background:
        radial-gradient(circle at 20% 20%, #ffffff10 0%, transparent 40%),
        radial-gradient(circle at 80% 0%, #ffd65a22 0%, transparent 36%),
        linear-gradient(180deg, #02040bcc 0%, #07080ee6 100%);
    }

    .finalscore-layer.active {
      display: flex;
      animation: finalScoreEnter 420ms ease-out;
    }

    .finalscore-panel {
      width: min(860px, 94vw);
      border: 2px solid #f4f6ffcc;
      background:
        linear-gradient(126deg, #f5b81d 0 10%, transparent 10% 100%),
        linear-gradient(180deg, #0b101aee 0%, #121928f2 100%);
      box-shadow: 0 0 0 2px #0b1018 inset, 0 18px 40px #00000088;
      padding: 18px 18px 16px;
      clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
    }

    .finalscore-kicker {
      display: inline-block;
      background: #fff;
      color: #0a0c14;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.12em;
      padding: 2px 8px;
      margin-bottom: 8px;
      text-transform: uppercase;
    }

    .finalscore-title {
      margin: 0 0 12px;
      color: #fff;
      font-size: clamp(1.1rem, 2.2vw, 1.55rem);
      font-weight: 900;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      text-shadow: 0 1px 0 #000, 2px 2px 0 #d79b0d;
    }

    .finalscore-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }

    .finalscore-card {
      border: 1px solid #ffffff55;
      background: linear-gradient(180deg, #ffffff15 0%, #ffffff06 100%);
      padding: 10px 10px 8px;
      min-height: 90px;
      clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
      transition: border-color 160ms ease, box-shadow 160ms ease;
    }

    /* カウントアップ中のカードを金色でハイライトし、集計中であることを示す。 */
    .finalscore-card.counting,
    .finalscore-total-wrap.counting {
      border-color: #ffd875;
      box-shadow: 0 0 14px #ffd87566;
    }

    .finalscore-label {
      margin-bottom: 8px;
      color: #ffd875;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-shadow: 0 1px 0 #000;
    }

    .finalscore-value {
      color: #f8fbff;
      font-size: clamp(1.2rem, 2.8vw, 1.7rem);
      font-weight: 900;
      letter-spacing: 0.03em;
      text-shadow: 0 2px 8px #000;
      word-break: break-all;
    }

    .finalscore-total-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 2px solid #ffffff77;
      background: linear-gradient(90deg, #ffffff10 0%, #ffffff04 100%);
      padding: 10px 12px;
      clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
      transition: border-color 160ms ease, box-shadow 160ms ease;
    }

    .finalscore-total-label {
      color: #ffe49d;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .finalscore-total-value {
      color: #ffffff;
      font-size: clamp(1.3rem, 3vw, 2rem);
      font-weight: 900;
      text-shadow: 0 2px 8px #000;
    }

    .finalscore-actions {
      margin-top: 12px;
      display: flex;
      justify-content: flex-end;
    }

    /* 紙吹雪の共通スタイル。画面左下・右下から斜め上へ勢いよく打ち上がるクラッカー風。
       JS(scene-ui.js の spawnConfettiBurst)が1枚ごとに角度・勢い・回転・時間を変えて
       生成し、位置決め用に配置先コンテナ(position指定済みの全画面レイヤーなど)へ追加する。
       bassクイズ正解時・最終リザルトの高得点演出など、複数の画面から使い回す。 */
    .confetti-piece {
      position: absolute;
      bottom: 10px;
      width: 8px;
      height: 12px;
      border-radius: 1px;
      pointer-events: none;
      will-change: transform, opacity;
      transform: translate3d(0, 0, 0) rotate(0deg);
      animation: confettiBurst var(--dur, 1100ms) cubic-bezier(0.12, 0.62, 0.3, 1) forwards;
      z-index: 12;
    }

    .confetti-piece.from-left { left: 14px; }

    .confetti-piece.from-right { right: 14px; }

    /* 0%=発射 → 減速しながら上昇し続け、70%以降フェードアウトして消える。
       落下フェーズは持たせない（上に飛んだまま消える）。 */
    @keyframes confettiBurst {
      0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
      }
      70% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: translate3d(var(--dx, 160px), var(--peak, -320px), 0)
          rotate(var(--rot, 320deg)) scale(0.9);
      }
    }

    @keyframes finalScoreEnter {
      from { opacity: 0; transform: scale(0.98); }
      to { opacity: 1; transform: scale(1); }
    }

    .textbox-wrap {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 7;
      padding: 0;
    }

    .textbox {
      width: 100%;
      margin: 0;
      background: var(--panel);
      border: 3px solid #fff;
      clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 22px) 100%, 0 100%, 0 22px);
      box-shadow: var(--shadow);
      padding: 18px 18px 16px;
      position: relative;
      min-height: 142px;
    }

    .textbox::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 5px;
      background: linear-gradient(90deg, var(--red) 0 30%, #fff 30% 42%, var(--red) 42% 100%);
    }

    .name-tag {
      display: inline-block;
      margin-top: -30px;
      margin-bottom: 8px;
      background: var(--red);
      border: 2px solid #fff;
      clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%, 0 8px);
      padding: 5px 12px;
      font-size: 0.88rem;
      font-weight: 900;
      letter-spacing: 0.06em;
    }

    .dialog {
      font-size: clamp(1rem, 2.2vw, 1.28rem);
      line-height: 1.7;
      min-height: 3.8em;
      letter-spacing: 0.02em;
      text-shadow: 0 2px 4px #000;
    }

    .next-indicator {
      position: absolute;
      right: 20px;
      bottom: 10px;
      font-size: 0.9rem;
      color: #fff;
      opacity: 0;
    }

    .next-indicator.show {
      animation: blink 900ms infinite;
    }

    @keyframes blink { 0%, 55% { opacity: 0.2; } 60%, 100% { opacity: 1; } }

    .choice-btn {
      border: 2px solid #fff;
      background: #141414;
      color: #fff;
      text-align: left;
      padding: 10px 12px;
      font-weight: 800;
      font-size: 0.95rem;
      cursor: pointer;
      clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%, 0 12px);
      transition: transform 100ms ease, background-color 100ms ease;
    }

    .choice-btn:hover, .choice-btn:focus-visible {
      background: var(--red);
      transform: translateX(3px);
      outline: none;
    }

    .shake {
      animation: shakeScene 320ms;
    }