html,
    body {
      margin: 0;
      background:
        radial-gradient(circle at top, #1d2840, #090b13 70%);
      color: white;
      font-family: "Segoe UI", sans-serif;
      overflow: hidden;
    }

    * {
      box-sizing: border-box;
    }

    .game-container {
      width: 100vw;
      height: 100vh;

      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* 右UI */
    .side-panel {
      display: flex;
      flex-direction: column;
    }

    .panel {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(6px);
      box-shadow:
        0 0 20px rgba(0, 0, 0, 0.3),
        inset 0 0 10px rgba(255, 255, 255, 0.03);
    }

    .panel-title {
      opacity: 0.7;
    }

    .score {
      font-weight: bold;
    }

    .Level {
      color: #ffcb52;
      font-weight: bold;
    }

    /* STARTボタン */

    .start-button {
      border: none;
      font-weight: bold;
      color: white;
      cursor: pointer;

      background:
        linear-gradient(145deg,
          #ff7b4a,
          #ff2e63);

      box-shadow:
        0 0 20px rgba(255, 80, 80, 0.5),
        0 6px 20px rgba(0, 0, 0, 0.35),
        inset 0 0 12px rgba(255, 255, 255, 0.15);

      transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
    }

    /* ホバー */

    .start-button:hover {
      transform: translateY(-2px) scale(1.02);

      box-shadow:
        0 0 28px rgba(255, 120, 80, 0.9),
        0 8px 24px rgba(0, 0, 0, 0.45),
        inset 0 0 16px rgba(255, 255, 255, 0.2);

      filter: brightness(1.08);
    }

    /* 押した瞬間 */

    .start-button:active {
      transform: scale(0.97);

      box-shadow:
        0 0 10px rgba(255, 120, 80, 0.5),
        inset 0 0 10px rgba(0, 0, 0, 0.25);
    }

    /* 中央 */
    .center-area {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .board-wrapper {
      display: flex;
      flex-direction: column;
    }

    .board-label {
      margin-bottom: 0px;
      opacity: 0.7;
    }

    .board {
      position: relative;

      display: block;
      justify-content: center;
      align-items: center;

      background:
        linear-gradient(180deg,
          rgba(255, 255, 255, 0.05),
          rgba(255, 255, 255, 0.02));

      border: 2px solid rgba(255, 255, 255, 0.08);

      box-shadow:
        0 0 30px rgba(0, 0, 0, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.03);
    }

    /* キャンバスボード */
    #player-board-canvas,
    #break-board-canvas {
      border: 2px solid var(--color-border-primary);
      image-rendering: pixelated;
      display: block;
    }

    #break-wrapper {
      position: relative;
    }

    #break-board-canvas,
    #effect-canvas {
      position: absolute;
      inset: 0;
    }

    #effect-canvas {
      pointer-events: none;
    }

    #next-canvas {
      image-rendering: pixelated;
      display: block;
    }

    /* 次ブロック */
    .next-block {
      margin: auto;
    }

    .next-cell {
      background: rgba(255, 255, 255, 0.08);
    }

    .next-filled {
      background: linear-gradient(145deg, #ff7b4a, #ff2e2e);
    }

    /* 演出ライン */
    .separator {
      height: 2px;

      background:
        linear-gradient(90deg,
          transparent,
          rgba(255, 255, 255, 0.5),
          transparent);
    }

    /* =========================
   モバイル操作UI
========================= */

    .mobile-controls {
      display: none;

      align-items: flex-end;
      padding-bottom: env(safe-area-inset-bottom);
    }

    .control-group {
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: space-between;
    }

    .move-group {
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: space-around;
      align-items: center;
    }

    .control-btn {
      position: relative;
      flex: 1 1 0;

      border: 1px solid rgba(255, 255, 255, 0.12);

      background:
        linear-gradient(180deg,
          rgba(255, 255, 255, 0.10),
          rgba(255, 255, 255, 0.03));

      backdrop-filter: blur(12px);

      color: #ffffff;

      font-weight: bold;

      cursor: pointer;

      user-select: none;
      -webkit-user-select: none;

      touch-action: manipulation;

      box-shadow:
        0 0 12px rgba(120, 180, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);

      transition:
        transform 0.08s ease,
        box-shadow 0.12s ease,
        background 0.12s ease;
    }

    .control-btn:active {
      transform: scale(0.94);

      box-shadow:
        0 0 20px rgba(120, 180, 255, 0.40),
        0 0 40px rgba(120, 180, 255, 0.20);

      background:
        linear-gradient(180deg,
          rgba(140, 180, 255, 0.20),
          rgba(80, 120, 255, 0.10));
    }

    /* ハードドロップ */
    .drop-btn {
      box-shadow:
        0 0 18px rgba(255, 120, 120, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }

    .grecaptcha-badge {
      visibility: hidden !important;
    }

    /* スマホ時のみ表示 */
    @media (max-width: 768px) {

      .mobile-controls {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding-bottom: env(safe-area-inset-bottom);
      }

      .control-group {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: space-between;
      }

      .move-group {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        align-items: center;
      }

      .control-btn {
        flex: 1 1 0;
        position: relative;
      }
    }

    @media (max-width: 480px) {

      .mobile-controls {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding-bottom: env(safe-area-inset-bottom);
      }

      .control-group {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: space-between;
      }

      .move-group {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        align-items: center;
      }

      .control-btn {
        flex: 1 1 0;
        position: relative;
      }
    }

    /* =========================
   HELP / SETTINGS BUTTON
========================= */

    .menu-button {
      border: 1px solid rgba(255, 255, 255, 0.10);
      border-radius: 16px;

      background:
        linear-gradient(180deg,
          rgba(255, 255, 255, 0.08),
          rgba(255, 255, 255, 0.02));

      color: #ffffff;

      font-weight: 700;
      letter-spacing: 0.08em;

      cursor: pointer;

      backdrop-filter: blur(10px);

      box-shadow:
        0 0 16px rgba(120, 180, 255, 0.12);

      transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        background 0.12s ease;
    }

    .menu-button:hover {
      transform: translateY(-2px);

      box-shadow:
        0 0 24px rgba(120, 180, 255, 0.25);
    }

    /* =========================
   SETTINGS OVERLAY
========================= */

    .settings-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: none;
      justify-content: center;
      align-items: center;
      /* padding: 24px; */

      background:
        rgba(0, 0, 0, 0.72);

      backdrop-filter: blur(18px);
    }

    /* 開いた状態 */
    .settings-overlay.active {
      display: flex;
    }

    /* =========================
   SETTINGS CARD
========================= */

    .settings-card {
      overflow-y: auto;

      border: 1px solid rgba(255, 255, 255, 0.08);

      background:
        linear-gradient(180deg,
          rgba(24, 30, 42, 0.95),
          rgba(12, 16, 26, 0.96));

      box-shadow:
        0 0 40px rgba(0, 0, 0, 0.45),
        0 0 80px rgba(80, 120, 255, 0.12);
    }

    /* =========================
   HEADER
========================= */

    .settings-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .settings-title {
      color: #ffffff;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .close-settings-btn {
      border: none;

      background:
        rgba(255, 255, 255, 0.08);

      color: #ffffff;

      cursor: pointer;

      transition:
        background 0.12s ease,
        transform 0.12s ease;
    }

    .close-settings-btn:hover {
      transform: scale(1.08);

      background:
        rgba(255, 255, 255, 0.16);
    }

    /* =========================
   SECTIONS
========================= */

    .settings-section {
      background:
        rgba(255, 255, 255, 0.04);

      border:
        1px solid rgba(255, 255, 255, 0.06);
    }

    .settings-section-title {
      color: #8fc7ff;
      font-weight: 700;

      letter-spacing: 0.16em;
    }

    a:link {
      color: #0066cc;
    }

    /* =========================
   CONTROL HELP
========================= */

    .control-help-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr) !important;
    }

    .help-item {
      display: block;
      justify-content: space-between;
      align-items: center;

      background:
        rgba(255, 255, 255, 0.04);

      color: #ffffff;
    }

    /* =========================
   TOGGLES
========================= */

    .toggle-row {
      display: flex;
      justify-content: space-between;
      align-items: center;

      color: #ffffff;

      border-bottom:
        1px solid rgba(255, 255, 255, 0.06);
    }

    .toggle-row:last-child {
      border-bottom: none;
    }

    /* =========================
   DESCRIPTION
========================= */

    .settings-description {
      color: rgba(255, 255, 255, 0.72);
    }

    .settings-block-preview {
      display: flex;
      align-items: flex-start;
    }

    .settings-block-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .settings-player-block {
      border: 2px solid #c9c9c9;
      border-radius: 4px;
      background: rgba(201, 201, 201, 0.2);

      display: flex;
      align-items: center;
      justify-content: center;

      color: #ffffff;
      font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
      line-height: 1;
    }

    .settings-player-block.el-level-1 {
      border-color: #c9c9c9;
      background: rgba(201, 201, 201, 0.2);
    }

    .settings-player-block.el-level-2 {
      border-color: #780c0c;
      background: rgba(120, 12, 12, 0.2);
    }

    .settings-player-block.el-level-3 {
      border-color: #f50707;
      background: rgba(245, 7, 7, 0.2);
    }

    .settings-block-label {
      color: rgba(255, 255, 255, 0.72);
      font-size: 0.9em;
      letter-spacing: 0.04em;
    }

    /* =========================
   AUDIO SETTINGS
========================= */

    .audio-setting-label {
      color: rgba(255, 255, 255, 0.72);

      font-weight: 700;
      letter-spacing: 0.14em;
    }

    /* =========================
   VOLUME SLIDER
========================= */

    .volume-row {
      display: flex;
      align-items: center;
    }

    .volume-value {
      color: #8fc7ff;

      font-weight: 700;
      text-align: right;
    }

    .modern-slider {
      flex: 1;

      appearance: none;
      -webkit-appearance: none;

      border-radius: 999px;

      background:
        linear-gradient(90deg,
          #4d8dff,
          #8fbcff);

      outline: none;
    }

    /* スライダーつまみ */

    .modern-slider::-webkit-slider-thumb {

      appearance: none;
      -webkit-appearance: none;

      width: var(--modern-slider-thumb-size, 22px);
      height: var(--modern-slider-thumb-size, 22px);

      border-radius: 50%;

      border: var(--modern-slider-thumb-border-width, 2px) solid rgba(255, 255, 255, 0.6);

      background: #ffffff;

      cursor: pointer;

      box-shadow:
        0 0 16px rgba(120, 180, 255, 0.45);
    }

    .modern-slider::-moz-range-thumb {

      width: var(--modern-slider-thumb-size, 22px);
      height: var(--modern-slider-thumb-size, 22px);

      border: none;
      border-radius: 50%;

      background: #ffffff;

      cursor: pointer;
    }

    /* =========================
   SELECT BOX
========================= */

    .modern-select {

      width: 100%;
      padding: var(--modern-select-padding-y, 14px) var(--modern-select-padding-x, 16px);
      border-radius: var(--modern-select-radius, 16px);

      border:
        1px solid rgba(255, 255, 255, 0.08);

      background:
        rgba(255, 255, 255, 0.06);

      color: #fff !important;

      font-size: var(--modern-select-font-size, 14px);

      outline: none;

      backdrop-filter: blur(10px);

      transition:
        border 0.12s ease,
        background 0.12s ease;
    }

    .modern-select:hover {
      border:
        1px solid rgba(143, 199, 255, 0.35);
    }

    .modern-select:focus {
      border:
        1px solid rgba(143, 199, 255, 0.55);
      background:
        rgba(255, 255, 255, 0.08);
    }

    /* option色 */

    .modern-select option {
      background: #101722;
      color: #ffffff;
    }