:root {
      /* 背景色・テキスト色・ニュートラルカラー */
      --bg: #e9f7ff;
      --fg: #0f172a;
      --muted: #64748b;
      --ring: #bae6fd;
      --card: #fff;

      /* アクセントカラー（主に操作ボタン） */
      --accent: #0ea5e9;
      --accent2: #38bdf8;
      --danger: #ef4444;
      --shadow: 0 8px 24px rgba(2, 132, 199, .15);

      /* ビンゴ達成時の金色 */
      --gold: #ffec99;
      --gold-b: #facc15;

      /* 汎用スタイル */
      --radius: 16px;

      /* 出目セルサイズ（0～59グリッド） */
      --cell: 30px;

      /* レイヤー（z-index）設定 */
      --z-demesticky: 9998;
      --z-sticky: 9999;

      /* ビンゴカード盤面のマス線幅 */
      --card-cell-stroke-width: 2px;

      /* 出目グリッド関連 */
      --draw-stroke: 2px;
      --draw-border: #e9f3ff;
      --stroke-card: 3px;
      --stroke-draw: 3px;
    }

    /* カードの各マス（あなたのテンプレで .cell を使っている前提） */
    .card .cell {
      border-width: var(--card-cell-stroke-width);
    }

    /* リーチ外枠だけ黄線を太くしている場合の上書きも合わせて */
    .card .cell.reach-outline {
      border-width: var(--card-cell-stroke-width);
    }

    /* もし .marked / .hit-row / .reach-row が border 使いの場合も同様に */
    .card .cell.marked,
    .card .cell.hit-row,
    .card .cell.reach-row {
      border-width: var(--card-cell-stroke-width);
    }


    .modal-demeoverlay {
      z-index: var(--z-demesticky);
    }

    /* number のスピンボタンを可能なら表示させる（WebKit系） */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: inner-spin-button;
      display: block;
      height: auto;
    }

    /* Firefoxで誤って非表示化されないよう明示（必要なら） */
    input[type="number"] {
      -moz-appearance: number-input;
    }

    /* マウント前のチラ見え防止 */
    [v-cloak] {
      display: none;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      background: var(--bg);
      color: var(--fg);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", sans-serif;
      padding-top: 0 !important;
    }

    .wrap {
      max-width: 1180px;
      margin: 0 auto;
      padding: 20px;
      display: grid;
      gap: 16px
    }

    /* ★ header タイトルエリア（h1 と時計を横一列） */
    .header-title {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap
    }

    header h1 {
      margin: 0;
      font-size: clamp(20px, 3vw, 28px)
    }

    /* ★ 時計表示スタイル */
    #clock {
      font-size: 14px;
      margin: 0;
      font-weight: bold;
      white-space: nowrap
    }

    header p {
      margin: 0;
      color: var(--muted);
      font-size: 14px
    }

    /* 説明トグル（roulette と同じ） */
    .tablist {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin: 0 0 12px;
    }

    .tab {
      background: #fff;
      border: 1px solid #ccc;
      padding: 6px 14px;
      border-radius: 6px 6px 0 0;
      cursor: pointer;
    }

    .tab[aria-selected="true"] {
      background: #9cccf7e4;
      border-bottom: 2px solid var(--ring);
      font-weight: bold;
    }

    .balloon-explanation {
      position: relative;
      display: inline-block;
      background: #fff8dc;
      border-radius: 30px;
      padding: 4px 8px;
      font-size: 10pt;
      font-weight: bold;
      color: #333;
      border: 1px solid #f0c000;
    }

    .balloon-explanation::before {
      content: "";
      border-width: 10px;
      border-style: solid;
      border-color: #fff8dc transparent transparent transparent;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
    }

    .grid {
      display: grid;
      gap: 16px
    }

    @media(min-width:1060px) {
      .grid {
        grid-template-columns: 1.2fr .8fr
      }
    }

    .card {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      border: 1px solid #e6f4ff;
      overflow: clip
    }

    .card .hd {
      padding: 14px 16px 0;
      font-weight: 700
    }

    .card .bd {
      padding: 14px 16px 16px
    }

    /* 操作パネル */
    .controls {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 12px;
      align-items: end
    }

    .field {
      display: grid;
      gap: 6px
    }

    .span-3 {
      grid-column: span 3
    }

    .span-2 {
      grid-column: span 2
    }

    .span-4 {
      grid-column: span 4
    }

    .span-5 {
      grid-column: span 5
    }

    .span-6 {
      grid-column: span 6
    }

    label {
      font-size: 12px;
      color: var(--muted)
    }

    input[type="number"] {
      padding: 10px 12px;
      border-radius: 12px;
      border: 1.5px solid var(--ring);
      background: #f8fdff;
      font-size: 16px
    }

    input[type="number"]:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 4px rgba(14, 165, 233, .12);
      outline: none
    }

    .hstack {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap
    }

    .btn {
      appearance: none;
      border: none;
      border-radius: 10px;
      padding: 6px 8px;
      font-weight: 700;
      cursor: pointer
    }

    .btn-primary {
      background: linear-gradient(180deg, var(--accent), var(--accent2));
      color: #fff;
      box-shadow: 0 8px 18px rgba(14, 165, 233, .35)
    }

    .btn-ball {
      background: linear-gradient(180deg, #ffaa00, var(--danger));
      color: #fff
    }

    .btn-ghost {
      background: #f0fbff;
      border: 1px solid var(--ring);
      color: #0369a1
    }

    .btn-danger {
      background: linear-gradient(180deg, #f87171, var(--danger));
      color: #fff
    }

    .btn-mainback {
      background: linear-gradient(180deg, lightgreen, green);
      color: #fff;
      text-decoration: none !important
    }

    /* ON（現在の緑） */
    .btn-rename-on {
      background: linear-gradient(180deg, lightgreen, green);
      color: #fff;
    }

    /* OFF（灰色） */
    .btn-rename-off {
      background: linear-gradient(180deg, #cccccc, #eeeeee);
      color: #444;
    }

    .btn-rename {
      background: linear-gradient(180deg, aqua, lightblue);
      color: black;
      text-decoration: none !important
    }

    .btn-gold {
      background: linear-gradient(180deg, #fde68a, #facc15);
      color: #7c2d12;
      border: 1px solid #f59e0b
    }

    button:disabled {
      opacity: .6;
      filter: grayscale(15%);
      cursor: not-allowed
    }

    .badge {
      display: inline-grid;
      place-items: center;
      min-width: 40px;
      height: 32px;
      padding: 0 10px;
      border-radius: 999px;
      background: #ecfeff;
      border: 1px solid var(--ring);
      color: #0369a1;
      font-weight: 800
    }

    .mini {
      font-size: 12px;
      color: var(--muted)
    }

    /* 出目エリア（0～59の盤面） */
    .draw-grid {
      display: grid;
      grid-template-columns: repeat(10, var(--cell));
      gap: 6px;
      justify-content: center
    }

    .draw-cell {
      width: var(--cell);
      height: var(--cell);
      border-radius: 10px;
      background: #ffffff;
      border-style: solid;
      border-color: #e9f3ff;
      border-width: var(--stroke-draw);
      /*  太さだけ指定 */
      display: grid;
      place-items: center;
      font-weight: 800;
      font-size: 14px;
      user-select: none;
      transition: transform .06s ease;
    }

    .draw-cell:active {
      transform: scale(.99)
    }

    .st-normal {
      background: #ffffff
    }

    .st-flash {
      background: #fef9c3;
      border-color: #fde68a;
      color: #7c5800
    }

    .st-selected {
      background: #fee2e2;
      border-color: #fecaca;
      color: #991b1b
    }

    .st-past {
      background: #fde7f3;
      border-color: #fbcfe8;
      color: #9d174d
    }

    /* ビンゴカード */
    /*  カード群全体：auto-fill で柔軟なグリッド配置、290px最小幅 */
    .cards {
      display: grid;

      gap: 14px;
      overflow-y: auto;
    }

    /*  カード本体：薄い枠線と丸み */
    .bcard {
      border: 1px solid #e6f4ff;
      border-radius: 14px;
      overflow: hidden
    }

    /*  カードタイトル（参加者名）：上下配置 */
    .btitle {
      padding: 8px 12px;
      font-weight: 700;
      background: #f6fbff;
      border-bottom: 1px solid #e6f4ff;
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    /*  ビンゴ達成時のタイトル：金色グラデ背景 */
    .btitle.winner {
      background: linear-gradient(0deg, var(--gold), #fffdeb);
      border-bottom-color: #fde68a;
      box-shadow: inset 0 -2px 0 #fcd34d
    }

    /*  "WINNER" テキスト表示：濃い茶色 */
    .btitle .wmark {
      color: #92400e;
      font-weight: 900
    }

    /*  ビンゴ盤面：5×5グリッド、セルサイズ40px */
    .board {
      padding: 10px;
      display: grid;
      grid-template-columns: repeat(5, 40px);
      gap: 6px;
      justify-content: center
    }

    /*  盤面のマス：40×40px、太字フォント、選択不可 */
    .cell {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: #ffffff;
      border-style: solid;
      border-color: #e9f3ff;
      border-width: var(--card-cell-stroke-width);
      display: grid;
      place-items: center;
      font-weight: 800;
      font-size: 14px;
      user-select: none;
    }

    /*  出目エリアの見出し：必ず改行、やや大きめ表示 */
    .deme-title {
      display: block;
      font-weight: bold;
      font-size: 1.2em;
    }

    /*  FREE（中央無条件）：薄いオレンジ背景 */
    .free {
      background: #fff7ed;
      border-color: #ffd7aa;
      color: #b45309
    }

    /*  マーク済み：淡い緑背景 */
    .marked {
      background: #dcfce7;
      border-color: #86efac;
      color: #065f46
    }

    /* リーチ=黄、ビンゴ=赤（斜めも含む） */
    .hit-row,
    .hit-col,
    .hit-diag {
      background: #fee2e2 !important;
      border-color: #fecaca !important;
      color: #991b1b !important;
      /* 赤優先 */
    }

    .reach-row,
    .reach-col,
    .reach-diag {
      background: #fef9c3;
      border-color: #fde68a;
      color: #7c5800;
      /* 従来の“黄塗り” */
    }

    /* 未マークのリーチは外枠だけ黄（塗りは白） */
    .reach-outline {
      background: #ffffff !important;
      /* 塗らない */
      border-color: #fde68a !important;
      /* 黄外枠 */
      box-shadow: inset 0 0 0 2px #fde68a;
      /* 視認性UP */
      color: inherit;
    }

    /* ★ モード説明パネル関連スタイル */

    /* パネルヘッダー */
    .mode-explanation-panel .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px;
      border-bottom: 1px solid #e2e8f0;
      background: #f8fafc;
      border-radius: 12px 12px 0 0;
    }

    .mode-explanation-panel .panel-header h2 {
      margin: 0;
      font-size: 20px;
      font-weight: 700;
      color: #1e293b;
    }

    /* クローズボタン */
    .mode-explanation-panel .close-btn {
      background: none;
      border: none;
      font-size: 24px;
      color: #64748b;
      cursor: pointer;
      padding: 0;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
    }

    .mode-explanation-panel .close-btn:hover {
      background: #e2e8f0;
      color: #1e293b;
    }

    /* パネルボディ */
    .mode-explanation-panel .panel-body {
      padding: 24px;
      flex: 1;
      overflow-y: auto;
    }

    /* ページ1：メニュー */
    .page-1-menu {
      display: block;
    }

    .page-1-buttons {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .page-1-buttons button {
      padding: 16px 20px;
      border: 1px solid #e2e8f0;
      background: white;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 600;
      color: #0080ff;
      transition: all 0.2s;
    }

    .page-1-buttons button:hover {
      background: #f0f4f8;
      border-color: #0080ff;
      transform: translateY(-2px);
    }

    /* ページ2：詳細 */
    .page-2-detail {
      display: block;
    }

    /* モードタブ */
    .mode-tabs {
      display: grid;
      grid-template-columns: repeat(3, auto);
      gap: 8px;
      margin-bottom: 20px;
      justify-content: start;
    }

    .mode-tabs .mode-tab {
      padding: 10px 12px;
      border: 1px solid #e2e8f0;
      background: white;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      transition: all 0.2s;
    }

    .mode-tabs .mode-tab.active {
      background: #0080ff;
      color: white;
      border-color: #0080ff;
    }

    .mode-tabs .mode-tab:hover {
      border-color: #0080ff;
    }

    /* モードアイテム */
    .mode-item {
      display: block;
    }

    .mode-item h3 {
      margin: 0 0 12px 0;
      font-size: 18px;
      font-weight: 700;
      color: #0080ff;
    }

    .mode-item p {
      margin: 0 0 12px 0;
      font-size: 14px;
      line-height: 1.6;
      color: #475569;
    }

    .mode-item ul {
      margin: 12px 0 0 0;
      padding-left: 20px;
      list-style: disc;
    }

    .mode-item li {
      margin-bottom: 6px;
      font-size: 14px;
      color: #64748b;
    }

    /* パネルフッター */
    .mode-explanation-panel .panel-footer {
      padding: 16px 24px;
      border-top: 1px solid #e2e8f0;
      display: flex;
      justify-content: space-between;
      background: #f8fafc;
      border-radius: 0 0 12px 12px;
      gap: 8px;
    }

    .mode-explanation-panel .panel-footer button {
      padding: 8px 16px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: white;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
    }

    .mode-explanation-panel .panel-footer button:hover {
      background: #f1f5f9;
    }

    .floating-hidden {
      display: none;
    }

    #floating-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 998;
    }

    #floating-window {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      border: 2px solid #003399;
      border-radius: 8px;
      padding: 20px;
      min-width: 300px;
      z-index: 999;
    }

    #floating-message {
      font-size: 16px;
      color: #222;
    }

    /* カード一覧コンテナ */
    .card-list-container {
      padding: 16px;
      background: #f8fdff;
      border-top: 2px solid var(--ring);
      margin-top: 16px;
    }

    .card-list-title {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 12px;
      color: #0369a1;
    }

    /* カード一覧グリッド */
    .card-list-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 12px;
    }

    /* 各カード */
    .card-list-item {
      background: #fff;
      border: 1.5px solid var(--ring);
      border-radius: 8px;
      padding: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .card-list-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 6px;
      font-size: 12px;
      font-weight: 700;
    }

    .card-list-name {
      color: #0369a1;
    }

    .card-list-index {
      color: var(--muted);
    }

    /* ミニカードテーブル */
    .mini-card-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 10px;
      text-align: center;
    }

    .mini-card-cell {
      width: 20%;
      aspect-ratio: 1;
      border: 0.5px solid #e0e7ff;
      padding: 2px;
      background: #f8fafc;
    }

    .mini-card-cell[data-free] {
      background: #fffacd;
      font-weight: 700;
    }

    /* レスポンシブ */
    @media screen and (max-width: 767px) {
      .card-list-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
      }

      .mini-card-table {
        font-size: 9px;
      }
    }

    /* ========= フローティング確認ウィンドウ ========= */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .28);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: var(--z-sticky);
    }

    .modal {
      width: min(92vw, 420px);
      background: white;
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
      border: 1px solid #e6f4ff;
      overflow: hidden;
      animation: pop .12s ease-out;
    }

    .modal .md-hd {
      padding: 14px 16px;
      font-weight: 800;
      background: #f6fbff;
      border-bottom: 1px solid #e6f4ff
    }

    .modal .md-bd {
      padding: 16px
    }

    .modal .md-ft {
      padding: 12px 16px 16px;
      display: flex;
      gap: 10px;
      justify-content: flex-end
    }

    .playcardarea {
      max-height: 400px;
      width: 100%;
      overflow-y: auto;
    }

    .mode-explanation-panel {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      max-width: 700px;
      max-height: 80vh;
      overflow-y: auto;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
      display: none;
      z-index: 1000;
      flex-direction: column;
      gap: 0;
    }

    .mode-explanation-panel.active {
      display: flex;
    }

    .mode-explanation-panel .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px;
      border-bottom: 1px solid #e2e8f0;
      background: #f8fafc;
      border-radius: 12px 12px 0 0;
    }

    .mode-explanation-panel .panel-header h2 {
      margin: 0;
      font-size: 20px;
      font-weight: 700;
      color: #1e293b;
    }

    .mode-explanation-panel .close-btn {
      background: none;
      border: none;
      font-size: 24px;
      color: #64748b;
      cursor: pointer;
      padding: 0;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
    }

    .mode-explanation-panel .close-btn:hover {
      background: #e2e8f0;
      color: #1e293b;
    }

    .mode-explanation-panel .panel-body {
      padding: 24px;
      flex: 1;
      overflow-y: auto;
    }

    .mode-explanation-panel .mode-item {
      margin-bottom: 24px;
      padding-bottom: 20px;
      border-bottom: 1px solid #e2e8f0;
    }

    .mode-explanation-panel .mode-item:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    .mode-explanation-panel .mode-item h3 {
      margin: 0 0 12px 0;
      font-size: 16px;
      font-weight: 700;
      color: #0080ff;
    }

    .mode-explanation-panel .mode-item p {
      margin: 0 0 12px 0;
      font-size: 14px;
      line-height: 1.6;
      color: #475569;
    }

    .mode-explanation-panel .mode-item ul {
      margin: 12px 0 0 0;
      padding-left: 20px;
      list-style: disc;
    }

    .mode-explanation-panel .mode-item li {
      margin-bottom: 6px;
      font-size: 14px;
      color: #64748b;
    }

    /* ========= ツールチップ（functooltip）========= */
    .floating-hidden {
      display: none;
    }

    #functooltip-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 998;
    }

    #functooltip-window {
      position: fixed;
      top: 0;
      left: 0;
      background: #FFFDD0;
      border: 1px solid #cccccc;
      border-radius: 5px;
      padding: 4px 8px;
      font-size: 12pt;
      color: #0033FF;
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      z-index: 1001;
    }

    #functooltip-message {
      font-size: 12pt;
      color: #0033FF;
    }

    @keyframes pop {
      from {
        transform: scale(.98);
        opacity: .8
      }

      to {
        transform: scale(1);
        opacity: 1
      }
    }

    /* ========= 追従（sticky）エリア ========= */
    /* 親カードの overflow:clip が sticky を殺すので、左カラムだけ可視にするためのフラグ */
    .card.sticky-host {
      overflow: visible;
    }

    /* 追従パネル：デフォルトは追従オフ（ゲーム開始前） */
    .sticky-panel {
      position: static;
      border: 1px solid #dbeafe;
      background: #f8fdff;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(56, 189, 248, .18);
      padding: 10px;
    }

    /* ゲーム開始後だけ追従オン */
    .sticky-on .sticky-panel {
      position: sticky;
      position: -webkit-sticky;
      /* iOS Safari */
      top: 8px;
      z-index: var(--z-demesticky);
    }

    .sticky-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      margin-top: 10px
    }

    .sticky-caption {
      font-size: 12px;
      color: #0369a1;
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap
    }

    .turn-indicator {
      font-size: 12px;
      color: #0f172a;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 999px;
      padding: 6px 10px;
    }

    table {
      border-collapse: collapse;
      width: 100%;
      font-size: 14px
    }

    th,
    td {
      padding: 8px 10px;
      border-bottom: 1px solid #eef6ff;
      text-align: right;
      white-space: nowrap
    }

    th:first-child,
    td:first-child {
      text-align: left
    }

    thead th {
      position: sticky;
      top: 0;
      background: #f6fbff;
      z-index: 1
    }

    /* ===== ここから今回仕様のための追加スタイル ===== */

    /* 履歴：既出指定／タイムアップ用の灰色バッジ */
    .badge-gray {
      background: #f1f5f9;
      /* slate-100 */
      border-color: #e2e8f0;
      /* slate-200 */
      color: #64748b;
      /* slate-500 */
    }

    /* 失格（DQ）カードの退色表示。winner よりも優先させるために .bcard.dq で指定 */
    .bcard.dq .btitle {
      background: #f3f4f6 !important;
      /* gray-100 */
      border-bottom-color: #e5e7eb !important;
      /* gray-200 */
      color: #6b7280;
      /* gray-500 */
      box-shadow: none !important;
    }

    .bcard.dq .btitle .wmark {
      display: none;
    }

    /* DQはWINNERバッジを出さない */

    /* 盤面セル（DQ時はリーチ/ビンゴ演出を殺して全体をグレーに） */
    .bcard.dq .cell {
      background: #f8fafc !important;
      /* slate-50 */
      border-color: #e5e7eb !important;
      /* gray-200 */
      color: #94a3b8 !important;
      /* slate-400 */
      box-shadow: none !important;
    }

    .bcard.dq .hit-row,
    .bcard.dq .reach-row,
    .bcard.dq .reach-outline {
      background: #f8fafc !important;
      border-color: #e5e7eb !important;
      color: #94a3b8 !important;
      box-shadow: none !important;
    }

    .bcard.dq .free,
    .bcard.dq .marked {
      background: #f8fafc !important;
      border-color: #e5e7eb !important;
      color: #94a3b8 !important;
    }

    #cardListArea {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 12px;
    }

    .card-box {
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background: #fff;
    }

    .card-grid {
      border-collapse: collapse;
      width: 100%;
    }

    .card-grid td {
      border: 1px solid #e5e7eb;
      padding: 6px;
      text-align: center;
      border-radius: 6px;
    }

    .card-head {
      background: #f6fbff;
      border-bottom: 1px solid #e6f4ff;
    }

    /* 親（現在の手番）を薄い緑で強調 */
    .is-dealer .card-head {
      background: #eafff0 !important;
    }

    /* 地味Winner（失格のみで終局し Winner 不在 → 最後の残りをWinner扱い） */
    .winner-dull .card-head {
      background: #ffffcc !important;
    }

    /* 薄い金色寄り */
    .winner-dull .card-head .badge-winner {
      color: #7a6200 !important;
    }

    .bcard.winner-dull .btitle {
      background: #f0fdf4;
      /* 薄い緑 */
      border-color: #bbf7d0;
      color: #065f46;
    }

    .bcard.winner-dull .wmark {
      color: #047857;
    }

    /* 親表示の小さなチップ */
    .dealer-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 2px 8px;
      border: 1px solid var(--ring);
      border-radius: 999px;
      background: #eafff0;
      font-weight: 700;
      font-size: 12px;
      margin-left: 8px;
    }

    /* 出目エリアのターン表示 */
    .turn-indicator {
      font-size: 12px;
      font-weight: 800;
      color: #14532d;
      background: #eafff0;
      border: 1px solid var(--ring);
      border-radius: 10px;
      padding: 2px 8px;
    }

    /* カードヘッダーの親強調 */
    .card-indicator {
      font-size: 15px;
      font-weight: 800;
      color: red;
      background: yellow;
      border: 3px solid var(--ring);
      border-radius: 10px;
      padding: 2px 8px;
    }

    .btitle.is-dealer {
      background: #d1fae5 !important;
      /* emerald-100 */
      border-bottom-color: #a7f3d0 !important;
    }

    .dealer-chip {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 999px;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      color: #065f46;
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
    }

    /* ==== 追従パネルを“最前面 left:20 / 縦センター固定”にするためのフローティング化 ==== */
    .floating-follow {
      position: fixed;
      /* ビューポート基準で固定 */
      left: 20px;
      /* 指定どおり */
      top: 70%;
      /* 縦方向の中央 */
      transform: translateY(-50%);
      z-index: var(--z-demesticky);
      /* 最前面に */
      width: 30%;
      /* パネル幅（必要に応じて調整可） */
      max-height: calc(100vh - 24px);
      /* 画面に収まる範囲で内部スクロール */
      overflow: auto;
      /* 中身が長い場合はパネル内スクロール */
    }

    /* ▼▲ で開閉する本体（ヘッダの直下だけをアコーディオン） */
    .sticky-body {
      overflow: hidden;
      max-height: 1200px;
      /* 十分大きめ：開状態の上限 */
      transition: max-height .25s ease;
      transform-origin: top;
      /* “下寄せ”＝上を固定して下側が伸縮 */
    }

    .sticky-body.is-collapsed {
      max-height: 0;
      /* 閉状態：中身は隠す */
    }

    /* ヘッダ部の▼▲ボタン */
    .follow-toggle {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 12px;
      border: 1px solid var(--ring);
      background: #ecfeff;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
      /* ▼ スマホでのタップ取りこぼし対策 */
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      /* ダブルタップ拡大/長押しメニューを抑止 */
      user-select: none;
      z-index: 2;
      /* ドラッグ面より前面に */
    }

    /* 見出し全体をドラッグ領域にする場合、内部ボタンは必ず有効化 */
    .deme-caption .deme-toggle {
      pointer-events: auto;
    }

    /* ========== 出目 追従（最前面・left:20・縦センター固定）専用 ========== */
    .deme-follow {
      position: fixed;
      /* ビューポート固定 */
      left: 20px;
      /* 指定どおり */
      top: 50%;
      /* 縦センター */
      right: auto;
      bottom: auto;
      transform: translateY(-50%);
      z-index: var(--z-demesticky);
      /* モーダル( --z-sticky ) より下なので重なり順OK */
      width: 360px;
      /* お好みで */
      max-height: calc(100vh - 24px);
      overflow: auto;
      /* 中身が長いときは内部スクロール */
      border: 1px solid #dbeafe;
      background: #f8fdff;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(56, 189, 248, .18);
      padding: 10px;
    }

    /* ヘッダ行（キャプション帯） */
    .deme-caption {
      font-size: 12px;
      color: #0369a1;
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      cursor: grab;
      /* 掴めることを示す */
      user-select: none;
      touch-action: none;
      /* ドラッグ中にページがスクロールしないように */
    }

    /* スマホ対策(1) */
    .deme-caption .sticky-actions {
      touch-action: auto;
    }

    /* スマホ対策(2) */
    .deme-caption .sticky-actions button {
      touch-action: manipulation;
    }

    /* ▼▲ トグルボタン（右端） */
    .deme-toggle {
      /* 既存 */
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 32px;
      border-radius: 12px;
      border: 1px solid var(--ring);
      background: #ecfeff;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;

      /* ▼ ここから追加・重要 */
      position: relative;
      /* 親の overlay と競合しないよう自前レイヤに */
      z-index: 20;
      /* 上に出す（sticky周りの透明レイヤより上） */
      pointer-events: auto;
      /* 親が none でもボタンは受け取れるように */
      -webkit-tap-highlight-color: transparent;
      /* モバイルの青ハイライト抑制 */
      touch-action: manipulation;
      /* タップをクリックとして処理（ダブルタップズーム抑制） */

      /* スマホでのヒット面積確保（44px推奨） */
      min-width: 44px;
      min-height: 44px;
    }

    /* もし sticky パネルや覆い被さる疑似要素があるなら、クリックを通す */
    .sticky-panel::before,
    .sticky-panel::after {
      pointer-events: none;
    }

    .deme-caption .deme-toggle {
      cursor: pointer;
      /* ▲/▼ボタン上では “move” を上書き */
    }

    .deme-follow.is-dragging {
      user-select: none;
      /* ドラッグ中のテキスト選択抑止（解除は自動） */
    }

    .deme-follow.is-dragging .deme-caption {
      cursor: grabbing;
      /* ドラッグ中の見た目 */
    }

    /* 下寄せで伸縮させる本体 */
    .deme-body {
      overflow: hidden;
      max-height: 1200px;
      /* 開状態の上限（必要に応じ調整） */
      transition: max-height .25s ease;
      transform-origin: top;
      /* 上を固定＝下側が伸縮（下寄せ） */
    }

    .deme-body.is-collapsed {
      max-height: 0;
      /* 閉状態 */
    }

    /* 画面が狭いときの保険 */
    @media (max-width: 480px) {
      .deme-follow {
        left: 12px;
        width: calc(100vw - 24px);
      }
    }

    @media screen and (max-width: 760px) {
      .controls {
        grid-template-columns: repeat(6, 1fr);
      }

      .span-3 {
        grid-column: span 6;
      }

      .span-6 {
        grid-column: span 6;
      }

      .span-2 {
        grid-column: span 3;
      }

      .span-4 {
        grid-column: span 6;
      }

      .span-5 {
        grid-column: span 6;
      }
    }

    /* ビンゴカードのマス（内部線も含めて太く） */
    .board .cell {
      border-width: var(--card-cell-stroke-width, 2px) !important;
    }

    /* ================= FINAL OVERRIDES — 枠線を確実に太くする ================= */

    /* 出目（0～59）パネル：borderを使わず inset の内枠で描く */
    .draw-cell {
      border: 0 !important;
      /* 競合を断つ */
      box-shadow: inset 0 0 0 3px var(--draw-border, #e9f3ff) !important;
    }

    .st-flash {
      box-shadow: inset 0 0 0 3px #fde68a !important;
    }

    .st-selected {
      box-shadow: inset 0 0 0 3px #fecaca !important;
    }

    .st-past {
      box-shadow: inset 0 0 0 3px #fbcfe8 !important;
    }

    /* ビンゴカードのマス：こちらも内枠で固定太さ */
    .board .cell {
      border: 0 !important;
      /* 競合を断つ */
      /* デフォルト色は既存と同じ #e9f3ff。太さは 3px（必要なら数値を変えてOK） */
      --cell-stroke-color: #e9f3ff;
      box-shadow: inset 0 0 0 3px var(--cell-stroke-color) !important;
    }

    /* 状態別は “色だけ” を差し替える（太さは 3px のまま） */
    .board .cell.free {
      --cell-stroke-color: #ffd7aa !important;
    }

    .board .cell.marked {
      --cell-stroke-color: #86efac !important;
    }

    .board .cell.hit-row,
    .board .cell.hit-col,
    .board .cell.hit-diag {
      --cell-stroke-color: #fecaca !important;
    }

    .board .cell.reach-row,
    .board .cell.reach-col,
    .board .cell.reach-diag {
      --cell-stroke-color: #fde68a !important;
    }

    /* 未マークのリーチ（外枠だけ黄）は元々 box-shadow を使っているので太さも揃える */
    .board .cell.reach-outline {
      background: #ffffff !important;
      --cell-stroke-color: #ffffff !important;
      /* 内枠は白で消す */
      box-shadow: inset 0 0 0 3px #fde68a !important;
      /* 外枠黄を3pxで表示 */
    }

    .name-inline {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: 8px;
    }

    .name-label {
      font-size: 12px;
      color: var(--muted);
    }

    .name-input {
      width: 140px;
      padding: 6px 8px;
      font-size: 14px;
      border-radius: 10px;
      border: 1.5px solid var(--ring);
      background: #f8fdff;
    }

    .name-input:disabled {
      background: #f8fafc;
      color: #94a3b8;
    }



    /* カード背景色選択用スタイル */
    .color-picker-wrap {
      /* インラインフレックスで色ピッカーを横並び配置 */
      display: inline-flex;
      align-items: center;
      gap: 8px;
      /* カード内での上下間隔を確保 */
      margin-top: 6px;
      margin-bottom: 6px;
    }

    .color-label {
      /* ラベル文字のサイズと太さ */
      font-size: 12px;
      font-weight: 500;
      color: #0f172a;
      /* テキスト折り返し防止 */
      white-space: nowrap;
    }

    .color-input {
      /* カラーピッカーのサイズ（幅×高さ） */
      width: 40px;
      height: 32px;
      /* 枠線スタイル */
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      /* 内部余白 */
      cursor: pointer;
      padding: 2px;
      /* 背景色はブラウザのデフォルトを使用 */
    }

    .color-input:hover {
      /* ホバー時に枠線色を濃くする */
      border-color: #94a3b8;
    }

    .color-input:focus {
      /* フォーカス時のスタイル */
      outline: 2px solid #3b82f6;
      outline-offset: 2px;
    }

    /* ☆ ===== チュートリアル関連スタイル ===== */

    /* 暗転背景 */
    .tutorial-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(128, 128, 128, 0.4);
      z-index: 998;
      display: none;
    }

    .tutorial-overlay.active {
      display: block;
    }

    /* チュートリアルパネル */
    .tutorial-panel {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #ffffff;
      border: 2px solid #0080ff;
      border-radius: 12px;
      padding: 30px;
      max-width: 600px;
      width: 80%;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      z-index: 999;
      display: none;
      max-height: 90vh;
      overflow-y: auto;
    }

    .tutorial-panel.active {
      display: block;
    }

    /* ステップコンテナ */
    .tutorial-step {
      overflow: hidden;
      min-height: 300px;
    }

    /* ステップ内容 */
    .step-content {
      transition: transform 0.5s linear, opacity 0.5s linear;
      opacity: 1;
      transform: translateX(0);
    }

    /* 次へ時：左にアウト */
    .step-content.slide-out-left {
      transform: translateX(-100%);
      opacity: 0;
    }

    /* 次へ時：右からイン */
    .step-content.slide-in-right {
      animation: slideInRight 0.5s linear forwards;
    }

    @keyframes slideInRight {
      from {
        transform: translateX(100%);
        opacity: 0;
      }

      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    /* 戻る時：右にアウト */
    .step-content.slide-out-right {
      transform: translateX(100%);
      opacity: 0;
    }

    /* 戻る時：左からイン */
    .step-content.slide-in-left {
      animation: slideInLeft 0.5s linear forwards;
    }

    @keyframes slideInLeft {
      from {
        transform: translateX(-100%);
        opacity: 0;
      }

      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    /* ステップタイトル */
    .step-title {
      font-size: 1.3rem;
      font-weight: bold;
      color: #2a3f5f;
      margin-bottom: 20px;
    }

    /* ステップ入力エリア */
    .step-input {
      margin-bottom: 20px;
    }

    .step-input label {
      display: block;
      margin-bottom: 10px;
      font-weight: 600;
      color: #333;
    }

    /* 数字入力グループ（±ボタン付き） */
    .number-input-group {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .number-input-group button {
      padding: 8px 12px;
      border: 1px solid #ccc;
      border-radius: 6px;
      background: #f0f0f0;
      cursor: pointer;
      font-weight: bold;
      transition: background 0.2s;
    }

    .number-input-group button:hover {
      background: #e0e0e0;
    }

    .number-input-group input {
      width: 80px;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 1rem;
      text-align: center;
    }

    /* ボタングループ（ステップ2） */
    .button-group {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .button-group button {
      flex: 1;
      min-width: 50px;
      padding: 12px 16px;
      border: 2px solid #ccc;
      border-radius: 8px;
      background: #f8f8f8;
      color: #333;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.2s;
    }

    .button-group button:hover {
      border-color: #0080ff;
    }

    .button-group button.active {
      background: #0080ff;
      color: #ffffff;
      border-color: #0080ff;
    }

    /* トグルグループ（ステップ3） */
    .toggle-group {
      display: inline-flex;
      border: 1.5px solid #007BFF;
      border-radius: 30px;
      overflow: hidden;
    }

    .toggle-group .toggle-label {
      flex: 1;
      text-align: center;
      padding: 6px 10px;
      font-size: 10px;
      cursor: pointer;
      user-select: none;
      transition: all 0.25s ease;
      background-color: #fff;
      color: #007BFF;
    }

    .toggle-group .toggle-label+.toggle-label {
      border-left: 1.5px solid #007BFF;
    }

    .toggle-group input[type="radio"]:checked+label {
      background-color: #007BFF;
      color: #fff;
    }

    .toggle-group input[type="radio"] {
      display: none;
    }

    .toggle-button {
      flex: 1;
      padding: 12px 20px;
      border: 2px solid #0080ff;
      border-radius: 8px;
      background: #f8f8f8;
      color: #0080ff;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.2s;
    }

    .toggle-button.active {
      background: #0080ff;
      color: #ffffff;
    }

    /* ラジオボタングループ（ステップ4） */
    .radio-group {
      display: flex;
      gap: 10px;
      margin-bottom: 15px;
    }

    .radio-button {
      flex: 1;
      padding: 12px 20px;
      border: 2px solid #ccc;
      border-radius: 8px;
      background: #f8f8f8;
      color: #333;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.2s;
    }

    .radio-button:hover {
      border-color: #0080ff;
    }

    .radio-button.active {
      background: #0080ff;
      color: #ffffff;
      border-color: #0080ff;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    /* サマリーボックス（ステップ5） */
    .summary-box {
      background: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 20px;
    }

    .summary-item {
      padding: 8px 0;
      color: #333;
    }

    /* ボタンエリア */
    .button-area {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid #eee;
    }

    .button-left {
      display: flex;
      gap: 10px;
    }

    .button-right {
      display: flex;
      gap: 10px;
    }

    .button-area button {
      padding: 10px 20px;
      border: 1px solid #ccc;
      border-radius: 8px;
      background: #ffffff;
      color: #333;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.2s;
    }

    .button-area button:hover {
      background: #f0f0f0;
    }

    .button-area button.btn-primary {
      background: #0080ff;
      color: #ffffff;
      border-color: #0080ff;
    }

    .button-area button.btn-primary:hover {
      background: #0066cc;
    }

    .button-area button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* 進捗表示 */
    .progress-display {
      text-align: center;
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid #eee;
      font-weight: bold;
      color: #666;
    }

    /* チュートリアルメッセージ点滅アニメーション */
    #tutorial-topmessage.blink {
      animation: blinkRed 21s 1;
    }

    @keyframes blinkRed {
      0% {
        color: #ff0000;
      }

      19% {
        color: #ff0000;
      }

      24% {
        color: #333333;
      }

      38% {
        color: #333333;
      }

      43% {
        color: #ff0000;
      }

      57% {
        color: #ff0000;
      }

      62% {
        color: #333333;
      }

      76% {
        color: #333333;
      }

      81% {
        color: #ff0000;
      }

      95% {
        color: #ff0000;
      }

      100% {
        color: #333333;
      }
    }

    /* ☆ カード個別編集フローティングウィンドウ */
    .card-edit-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 10000;
      display: block;
    }

    .card-edit-window {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      z-index: 10001;
      opacity: 0;
      transition: all 0.3s ease-in-out;
      pointer-events: none;
    }

    .card-edit-window.active {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
      pointer-events: auto;
    }

    .card-edit-panel {
      background: var(--card);
      border: 2px solid var(--accent);
      border-radius: var(--radius);
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: column;
      max-height: 90vh;
      width: 90%;
      max-width: 500px;
      overflow: hidden;
    }

    .card-edit-panel .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid #e5e7eb;
      background: #f9fafb;
    }

    .card-edit-panel .panel-header h3 {
      margin: 0;
      font-size: 18px;
      font-weight: bold;
      color: var(--fg);
    }

    .card-edit-panel .close-btn {
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: var(--muted);
      padding: 0;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      transition: background 0.2s;
    }

    .card-edit-panel .close-btn:hover {
      background: rgba(0, 0, 0, 0.1);
    }

    .card-edit-panel .panel-body {
      flex: 1;
      padding: 16px;
      overflow-y: auto;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }

    .card-edit-board {
      display: flex;
      justify-content: center;
      padding: 8px;
    }

    .card-edit-card {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .btitle-small {
      text-align: center;
      font-weight: bold;
      font-size: 14px;
      color: var(--fg);
    }

    .card-edit-board .board {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 4px;
      background: #fff;
      padding: 8px;
      border-radius: 8px;
      border: 2px solid #ccc;
    }

    .card-edit-cell {
      width: 60px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      border: none;
      border-radius: 4px;
      font-weight: bold;
      font-size: 14px;
      cursor: default;
      text-align: center;
      padding: 2px;
      box-sizing: border-box;
    }

    .card-edit-cell.marked {
      background: var(--gold);
      border-color: var(--gold-b);
      font-weight: bold;
    }

    .card-edit-cell.hit-row {
      background: var(--accent2);
      border-color: var(--accent);
      color: #fff;
    }

    .card-edit-cell.reach-outline {
      border-color: var(--accent2);
      border-width: 3px;
    }

    .card-edit-panel .panel-footer {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      padding: 12px 16px;
      border-top: 1px solid #e5e7eb;
      background: #f9fafb;
    }

    .card-edit-panel .panel-footer .btn {
      padding: 8px 16px;
      font-size: 14px;
    }

    /* カード編集フローティングウィンドウ内のテーブル */
    .card-edit-body {
      padding: 16px;
      display: flex;
      justify-content: center;
      overflow-y: auto;
    }


    .card-edit-table {
      width: 100%;
      /* ✅ 修正：親に合わせる */
      max-width: 320px;
      border-collapse: collapse;
      table-layout: fixed;
      margin: 0 auto;
    }

    .card-edit-table tr {
      display: table-row;
    }

    .card-edit-table td {
      display: table-cell;
      text-align: center;
      width: 64px;
      height: 64px;
      padding: 0;
      border: none;
    }

    .card-edit-select {
      width: 100%;
      height: auto;
      padding: 0;
      /* 枠線を消す */
      border: none !important;
      /* 外線を消す */
      outline: none !important;
      /* 影を消す */
      box-shadow: none !important;
      /* フォーカス時の青い枠線などを消す */
      background: #ecfeff !important;
      /* 背景色がある場合は背景を透明にする */
      border-radius: 4px;
      font-size: 20px;
      text-align: center;
      font-weight: bold;
      cursor: pointer;
      box-sizing: border-box;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
    }

    .card-edit-select::-ms-expand {
      display: none;
    }


    .btn-move {
      background: #e0f2fe;
      /* 薄い水色（Sky 100） */
      border: 1.5px solid #bae6fd;
      /* ring 色で枠線 */
      color: #0369a1;
      /* ring 色より濃い青 */
      font-weight: 700;
      font-size: 14px;
      padding: 6px 10px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .btn-move:hover {
      background: #bae6fd;
      /* ホバーで色濃くなる */
      box-shadow: 0 2px 8px rgba(14, 165, 233, 0.2);
    }

    .btn-move:active {
      transform: scale(0.95);
      /* クリック時に縮小 */
      box-shadow: 0 1px 4px rgba(14, 165, 233, 0.3);
    }

    .btn-move:active {
      transform: scale(0.95);
      /* クリック時に縮小 */
      box-shadow: 0 1px 4px rgba(14, 165, 233, 0.3);
    }

    /* 参加者カード一覧（コンパクト表示） */
    .card-list-compact {
      padding: 16px;
      background: #f8fdff;
      border-top: 2px solid var(--ring);
      margin-top: 16px;
    }

    /* カード切り替えナビゲーション（◀▶ボタン+位置表示） */
    .card-compact-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 10px;
    }

    .card-compact-position {
      font-size: 14px;
      font-weight: 700;
      color: #0369a1;
      min-width: 48px;
      text-align: center;
    }

    .card-compact-item {
      padding: 8px 0;
      border-bottom: 1px solid #e0e7ff;
    }

    .card-compact-item:last-child {
      border-bottom: none;
    }

    .card-compact-name {
      font-size: 14px;
      color: #0369a1;
      font-weight: 500;
      margin-bottom: 6px;
    }

    .card-compact-table {
      border-collapse: collapse;
      margin: 0 auto;
      width: 50%;
    }

    .card-compact-cell {
      width: 15px !important;
      height: 15px !important;
      padding: 0;
      text-align: center !important;
      font-size: 11px !important;
      font-weight: 500;
      border: 1px solid #e0e7ff;
      background: #fff;
      color: #0369a1;
    }

    .card-compact-cell.marked {
      background: #ff0000;
      color: #fff;
      font-weight: 700;
    }

    /* コード入力フローティングウィンドウ用スタイル */

    /* iframe のレスポンシブ対応 */
    #adVideoIframe {
      aspect-ratio: 16 / 9;
      width: 100% !important;
      max-width: 500px;
    }

    /* 「入力に移る」ボタン */
    #proceedToEntryButton {
      background: linear-gradient(135deg, #0369a1, #06b6d4);
      transition: all 0.2s ease;
    }

    #proceedToEntryButton:hover {
      box-shadow: 0 4px 12px rgba(3, 105, 161, 0.3);
      transform: translateY(-2px);
    }

    #proceedToEntryButton:active {
      transform: translateY(0);
    }




    /* ↓ 既存の .card-edit-cell 定義がここ */
    /* レスポンシブ調整 */
    @media screen and (max-width: 767px) {

      .card-list-compact {
        padding: 12px;
      }

      .card-compact-item {
        padding: 6px 0;
      }

      .card-compact-name {
        font-size: 13px;
      }

      .card-compact-cell {
        width: 30px;
        height: 30px;
        font-size: 11px;
      }

      .card-edit-panel {
        max-width: 95%;
        width: 95%;
      }

      .card-edit-cell {
        width: 50px;
        height: 50px;
        font-size: 12px;
      }

      .card-edit-board .board {
        gap: 2px;
        padding: 4px;
      }
    }