:root {
      --bg: #2d3748; 
      --win-color: #fa4204;
      --lose-color: #474545;

      /* ==========================================
         デフォルト（暗い背景用）の変数定義　
         ========================================== */
      --text-main: #2d3748;
      --text-sub: #fe5b5b;
      --text-id: #646464;

      --badge-bg: rgba(0, 0, 0, 0.08);
      --badge-border: rgba(0, 0, 0, 0.1);
      --badge-color: rgba(0, 0, 0, 0.6);

      --history-panel-bg: rgba(255, 255, 255, 0.6);
      --history-item-color: rgba(0, 0, 0, 0.85);
      --history-item-border: rgba(0, 0, 0, 0.1);
      --history-miss-color: rgba(0, 0, 0, 0.45);
    }

    * { box-sizing: border-box; }
    
    body {
      color: var(--text-main);
      background-color: #ffffff;
      background-image: url('../assets/bg.jpg');
      background-blend-mode: multiply;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      background-position: center;
      margin: 0;
      padding: 0;
      font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

    #win-bg-video {
      display: none; /* デフォルトは非表示 */
      position: fixed;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -1; /* コンテンツの背面に配置 */
      transform: translate(-50%, -50%);
      object-fit: cover;
    }

    /* 当選時（state-win）のボディと動画の表示切り替え */
    body.state-win {
      background-image: none !important; /* 当選時は背景画像を消す */
    }
    body.state-win #win-bg-video {
      display: block; /* 当選時だけ動画を表示する */
    }

    #lose-bg-video {
      display: none; /* デフォルトは非表示 */
      position: fixed;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -1; /* コンテンツの背面に配置 */
      transform: translate(-50%, -50%);
      object-fit: cover;
    }

    /* ハズレ時（state-lose）のボディと動画の表示切り替え */
    /* body.state-lose {
      background-image: none !important; 
    }
    body.state-lose #lose-bg-video {
      display: block; 
    } */
    
    
    /* 2. スタート後（くじ引き準備画面）の背景 */
    body.state-ready {
      background-image: url('../assets/bg_ready.jpg');
    }

    /* 3. 抽選中の背景 */
    body.state-roulette {
      background-image: url('../assets/bg_roulette.jpg');
    }

    /* 4. アタリ（WIN）の背景 */
    /* body.state-win {
      background-image: url('../assets/bg_win.jpg');
    } */

    /* 5. ハズレ（MISS） / エラーの背景 */
    body.state-lose {
      background-image: url('../assets/bg_lose.jpg');
    }

    /* 6. 終了画面の背景 */
    body.state-ended {
      background-image: url('../assets/bg_ended.jpg');
    }
    #stage {
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 20px;
    }

    /* 端末ID表示バッジ */
    #device-badge {
      position: fixed;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 20;
      background: var(--badge-bg);
      backdrop-filter: blur(4px);
      border: 1px solid var(--badge-border);
      color: var(--badge-color);
      font-family: monospace;
      font-size: 11px;
      padding: 3px 12px;
      border-radius: 12px;
      pointer-events: none;
      letter-spacing: 0.5px;
    }

    /* スタート画面用スタイル */
    #start-screen h1 {
      font-size: 4vw;
      margin-bottom: 40px;
      text-shadow: 0 4px 10px rgba(0,0,0,0.5);
    }
    #start-button {
      font-size: 5vw;
      padding: 0.8em 2.2em;
      border-radius: 50px;
      border: none;
      background: linear-gradient(135deg, #ff7a18, #ffb400);
      color: #fff;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 10px 30px rgba(255,150,0,0.4);
      outline: none;
      transition: transform 0.15s;
    }
    #start-button:active { transform: scale(0.95); }

    /* くじ引きボタン */
    #draw-button {
      font-size: 6vw;
      padding: 0.8em 2.5em;
      border-radius: 50px;
      border: none;
      background: linear-gradient(135deg, #ff416c, #ff4b2b);
      color: #fff;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 10px 40px rgba(255,60,60,0.5);
      transition: transform 0.15s;
      outline: none;
    }
    #draw-button:active { transform: scale(0.95); }
    #draw-button .btn-icon {
      width: 1.2em;
      height: 1.2em;
      object-fit: contain;
    }

    #result-screen { display: none; }
    #result-screen.win .result-box { color: var(--win-color); }
    #result-screen.lose .result-box { color: var(--lose-color); }

    .result-box {
      font-size: 10vw;
      font-weight: 900;
      animation: pop 0.4s ease-out;
      /* color: #ff0000; */
      /* -webkit-text-stroke: 5px #ffffff;
      paint-order: stroke fill; */
    }
    .result-sub {
      font-size: 5vw;
      margin-top: 20px;
      font-weight: bold;
      color: var(--text-sub);
      /* -webkit-text-stroke: 5px #ffffff; ふちの太さと色
      paint-order: stroke fill; */
    }
    .result-id {
      font-size: 3vw;
      margin-top: 10px;
      font-family: monospace;
      color: var(--text-id);
      /* -webkit-text-stroke: 5px #ffffff; /* ふちの太さと色 */
      /* paint-order: stroke fill; */
    }
    .result-icon {
      display: inline-block;
      height: 1.2em;
      vertical-align: -0.2em;
      margin: 0 8px;
      /* -webkit-text-stroke: 5px #ffffff; /* ふちの太さと色 */
      /* paint-order: stroke fill; */
    }

    @keyframes pop {
      0% { transform: scale(0.3); opacity: 0; }
      70% { transform: scale(1.15); opacity: 1; }
      100% { transform: scale(1); }
    }

    /* 抽選中の演出画面用CSS */
    #roulette-screen {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .roulette-text {
      font-size: 10vw;
      font-weight: 900;
      color: #ff1100;
      text-shadow: 0 0 20px rgba(88, 47, 47, 0.6);
      animation: pulse-shake 0.3s infinite ease-in-out alternate;
    }

    @keyframes pulse-shake {
      0% { transform: scale(0.95) translate(-2px, 1px); opacity: 0.8; }
      50% { transform: scale(1.05) translate(2px, -1px); opacity: 1; }
      100% { transform: scale(1) translate(-1px, -2px); opacity: 0.9; }
    }

    #confetti-layer {
      position: fixed; inset: 0; pointer-events: none; overflow: hidden; display: none;
      z-index: 5;
    }
    .confetti {
      position: absolute; top: -10px; width: 10px; height: 16px; opacity: 0.9;
      animation: fall linear forwards;
    }
    @keyframes fall {
      to { transform: translateY(110vh) rotate(360deg); opacity: 0.6; }
    }

    /* 誤操作防止用のガード */
    #interaction-shield {
      position: fixed;
      inset: 0;
      background: transparent;
      z-index: 10;
      display: none;
    }

    #history-panel {
      position: fixed;
      bottom: 15px;
      left: 15px;
      right: 15px;
      display: none;
      align-items: center;
      gap: 1.4vw;
      background: var(--history-panel-bg);
      backdrop-filter: blur(4px);
      border-radius: 16px;
      padding: 0.7vw 1.6vw;
      z-index: 15;
    }
    #history-panel-header {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.4vw;
      flex: 0 0 auto;
    }

    #history-list {
      display: flex;
      flex-direction: row;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 1vw;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      flex: 1 1 auto;
      min-width: 0;
    }
    #history-list li {
      flex: 0 0 calc((100% - 4 * 1vw) / 5);
      box-sizing: border-box;
      text-align: center;
      font-size: 1.8vw;
      padding: 0.4vw 0.4vw;
      color: var(--history-item-color);
      border-right: 1px solid var(--history-item-border);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #history-list li:last-child {
      border-right: none;
    }
    #history-list li.win { color: var(--win-color); font-weight: bold; }
    #history-list li.miss { color: var(--history-miss-color); }

    /* スタッフ用リセットボタン（右上） */
    #again-button {
      position: fixed;
      top: 15px;
      right: 15px;
      font-size: 11px;
      padding: 0;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.15);
      background: rgba(255, 255, 255, 0.05);
      color: rgba(255,255,255,0.3);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 20;
      outline: none;
      transition: background 0.15s, color 0.15s;
    }
    #again-button:active {
      background: rgba(255,255,255,0.25);
      color: #fff;
    }