/*
 * ダーツアプリ - ダーツライブホーム風 白基調デザイン
 *
 * デザイン方針:
 * - 白背景、清潔感のある見た目
 * - 影付きカードでゲーム選択
 * - 大きなボタン、タッチしやすい設計
 * - 緑（成功）赤（注意）でアクセント
 * - スマホ/PC両対応
 */

/* ========== リセット & ベース ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
    background: #f7f8fa;
    color: #2c3e50;
    min-height: 100vh;
    line-height: 1.6;
}

/* ========== ヘッダー ========== */
.app-header {
    background: #ffffff;
    border-bottom: 1px solid #e8eaed;
    padding: 16px 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.app-header-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-logo {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-logo-icon {
    font-size: 28px;
}

.app-nav {
    display: flex;
    gap: 24px;
}

.app-nav a {
    color: #5f6368;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.15s;
}

.app-nav a:hover,
.app-nav a.active {
    background: #e8f0fe;
    color: #1967d2;
}

/* ========== GranBoard Bluetooth 接続ボタン ========== */
.gb-connect-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
}
#gb-status-badge {
    font-size: 14px;
    line-height: 1;
    transition: transform 0.15s ease;
    user-select: none;
}
.gb-connect-btn {
    padding: 7px 14px;
    background: linear-gradient(135deg, #1e88e5, #1565c0);
    color: white;
    border: none;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.35);
    transition: all 0.18s ease;
}
.gb-connect-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.5);
}
.gb-connect-btn.is-connected {
    background: linear-gradient(135deg, #43a047, #2e7d32);
    box-shadow: 0 0 14px rgba(76, 175, 80, 0.5);
}
.gb-connect-btn.is-connected::before {
    content: '🟢 ';
}

/* ヘッダー非表示画面（戦闘画面等）の右下フロート版
   🛠 千葉さん指示 2026-05-07: bottom:12px だと 110px フッターの内側に入って
   「川崎 0」等のプレイヤー名と重なって "見切れた小さな黒要素" として見える。
   フッター上端より少し上（120px）に固定して、絶対重ならないようにする。 */
.gb-floating {
    position: fixed;
    bottom: 120px; right: 12px;
    z-index: 1000;
    display: flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    padding: 4px 6px 4px 10px;
    backdrop-filter: blur(10px);
}
/* play-mode 以外（ヘッダーのある通常画面）は元の右下に。 */
body:not(.play-mode) .gb-floating {
    bottom: 12px;
}
.gb-floating-btn {
    padding: 5px 10px;
    font-size: 11px;
}

/* ========== コンテナ ========== */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px;
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1a1a1a;
}

.page-subtitle {
    font-size: 15px;
    color: #5f6368;
    margin-bottom: 32px;
}

/* ========== セクションヘッダー ========== */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 32px 0 16px;
}

.section-title {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
}

/* ========== ゲームカードグリッド ========== */
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.game-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    overflow: hidden;
    border: 1px solid #f0f1f3;
    opacity: 0;
    transform: translateY(12px);
    animation: cardEnter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes cardEnter {
    to { opacity: 1; transform: translateY(0); }
}

.game-grid .game-card:nth-child(1) { animation-delay: 0.05s; }
.game-grid .game-card:nth-child(2) { animation-delay: 0.10s; }
.game-grid .game-card:nth-child(3) { animation-delay: 0.15s; }
.game-grid .game-card:nth-child(4) { animation-delay: 0.20s; }
.game-grid .game-card:nth-child(5) { animation-delay: 0.25s; }
.game-grid .game-card:nth-child(6) { animation-delay: 0.30s; }
.game-grid .game-card:nth-child(7) { animation-delay: 0.35s; }
.game-grid .game-card:nth-child(8) { animation-delay: 0.40s; }

.game-card.has-hero:hover::after {
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.25) 100%);
}

.game-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    border-color: #d2e3fc;
}

.game-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.game-card.has-hero {
    padding-top: 150px;
    position: relative;
    overflow: hidden;
}

.game-card .hero-thumb {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 140px;
    background-size: cover;
    background-position: center;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom: 1px solid #f0f1f3;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-card.has-hero:hover .hero-thumb {
    transform: scale(1.08);
}

.game-card.has-hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 140px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.15) 100%);
    pointer-events: none;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.game-card .game-card-icon {
    transition: transform 0.3s ease;
}

.game-card:hover .game-card-icon {
    transform: scale(1.15) rotate(-5deg);
}

.game-card .game-card-badge {
    backdrop-filter: blur(8px);
    background: rgba(230, 244, 234, 0.95);
}

.game-card .game-card-badge.coming {
    background: rgba(254, 247, 224, 0.95);
}

.game-card-icon {
    font-size: 40px;
    margin-bottom: 12px;
    display: block;
}

.game-card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #1a1a1a;
}

.game-card-desc {
    font-size: 13px;
    color: #5f6368;
    line-height: 1.5;
}

.game-card-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    background: #e6f4ea;
    color: #137333;
}

.game-card-badge.coming {
    background: #fef7e0;
    color: #b06000;
}

.game-card-tags {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    background: #f1f3f4;
    color: #5f6368;
}

.tag.team { background: #e8f0fe; color: #1967d2; }
.tag.solo { background: #fce8e6; color: #c5221f; }
.tag.party { background: #fef7e0; color: #b06000; }
.tag.strategy { background: #e6f4ea; color: #137333; }

/* ========== ボタン ========== */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    font-family: inherit;
}

.btn-primary {
    background: #1967d2;
    color: white;
}

.btn-primary:hover {
    background: #1557b0;
    box-shadow: 0 2px 6px rgba(25, 103, 210, 0.3);
}

.btn-secondary {
    background: #ffffff;
    color: #1967d2;
    border: 1px solid #dadce0;
}

.btn-secondary:hover {
    background: #f8f9fa;
}

.btn-large {
    padding: 16px 32px;
    font-size: 16px;
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* ========== フォーム ========== */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: #3c4043;
}

.form-input, .form-select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #dadce0;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    background: #ffffff;
    transition: border-color 0.15s;
}

.form-input:focus, .form-select:focus {
    outline: none;
    border-color: #1967d2;
    box-shadow: 0 0 0 3px rgba(25, 103, 210, 0.1);
}

/* ========== カード（汎用） ========== */
.card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    margin-bottom: 16px;
}

/* ========== クニトリ専用：盤面表示 ========== */
.board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin: 16px 0;
}

.area-cell {
    background: #f7f8fa;
    border: 2px solid #e8eaed;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    transition: all 0.2s;
}

.area-cell.owned-p1 { border-color: #1967d2; background: #e8f0fe; }
.area-cell.owned-p2 { border-color: #c5221f; background: #fce8e6; }
.area-cell.owned-p3 { border-color: #137333; background: #e6f4ea; }
.area-cell.owned-p4 { border-color: #b06000; background: #fef7e0; }

.area-id {
    font-size: 12px;
    color: #5f6368;
    margin-bottom: 4px;
}

.area-name {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
}

.area-owner {
    font-size: 11px;
    color: #5f6368;
}

/* ========== スコアボード ========== */
.scoreboard {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    margin-bottom: 16px;
}

.score-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f0f1f3;
}

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

.score-row.leader { background: #fef7e0; padding: 12px; border-radius: 8px; margin: -8px 0; }

.score-player {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.player-marker {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 13px;
}

.player-marker.p1 { background: #1967d2; }
.player-marker.p2 { background: #c5221f; }
.player-marker.p3 { background: #137333; }
.player-marker.p4 { background: #b06000; }

.score-value {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
}

.score-meta {
    font-size: 12px;
    color: #5f6368;
}

/* ========== ヒット入力ログ ========== */
.hit-log {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.hit-log-entry {
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 13px;
    background: #f7f8fa;
}

.hit-log-entry.acquired { background: #e6f4ea; color: #137333; }
.hit-log-entry.stolen { background: #fce8e6; color: #c5221f; }
.hit-log-entry.bonus { background: #fef7e0; color: #b06000; }
.hit-log-entry.outboard { color: #5f6368; }

/* ========== ヒット入力フォーム ========== */
.hit-input-area {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    margin-bottom: 16px;
    text-align: center;
}

.hit-input-area .form-input {
    font-size: 24px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.quick-hit-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 6px;
    margin-top: 12px;
}

.quick-hit-btn {
    padding: 10px 4px;
    border: 1px solid #dadce0;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
}

.quick-hit-btn:hover {
    background: #e8f0fe;
    border-color: #1967d2;
    color: #1967d2;
}

.quick-hit-btn.bull { background: #fff3e0; }
.quick-hit-btn.out { background: #fce8e6; color: #c5221f; }

/* ========== ステータスバー ========== */
.status-bar {
    background: #1a73e8;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
}

/* ========== 結果画面 ========== */
.result-hero {
    text-align: center;
    padding: 60px 24px;
    background: linear-gradient(135deg, #fff8e1 0%, #fff3e0 100%);
    border-radius: 16px;
    margin-bottom: 24px;
}

.result-trophy {
    font-size: 80px;
    margin-bottom: 16px;
}

.result-winner {
    font-size: 32px;
    font-weight: 700;
    color: #b06000;
    margin-bottom: 8px;
}

.result-subtitle {
    font-size: 16px;
    color: #5f6368;
}

/* ========== ユーティリティ ========== */
.center { text-align: center; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }

/* ========== プレイヤー数選択ボタン ========== */
.player-count-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.count-btn {
    padding: 14px 8px;
    border: 2px solid #dadce0;
    border-radius: 8px;
    background: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    font-size: 15px;
}

.count-btn:hover {
    border-color: #1967d2;
    background: #e8f0fe;
}

.count-btn.active {
    border-color: #1967d2;
    background: #1967d2;
    color: white;
}

/* ========== ダーツライブ風 対戦画面 ========== */
.play-hero {
    position: relative;
    height: 180px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.play-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.65) 100%);
}

.play-hero-content {
    position: relative;
    z-index: 1;
    padding: 24px 28px;
    color: white;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.play-hero-title {
    font-size: 32px;
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    letter-spacing: 0.05em;
}

.play-hero-subtitle {
    font-size: 13px;
    opacity: 0.9;
    margin-top: 4px;
}

.round-pill {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    align-self: flex-start;
}

/* 現在のプレイヤー大バナー */
.current-turn-banner {
    background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
    color: white;
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 20px rgba(26, 115, 232, 0.3);
    position: relative;
    overflow: hidden;
}

.current-turn-banner.p1 { background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%); }
.current-turn-banner.p2 { background: linear-gradient(135deg, #c5221f 0%, #ea4335 100%); }
.current-turn-banner.p3 { background: linear-gradient(135deg, #137333 0%, #34a853 100%); }
.current-turn-banner.p4 { background: linear-gradient(135deg, #b06000 0%, #f29900 100%); }

.current-turn-banner::after {
    content: "🎯";
    position: absolute;
    right: -20px;
    bottom: -30px;
    font-size: 200px;
    opacity: 0.1;
    transform: rotate(-15deg);
}

.current-player-label {
    font-size: 12px;
    opacity: 0.85;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.current-player-name {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.throw-counter {
    font-size: 14px;
    font-weight: 600;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    padding: 12px 18px;
    border-radius: 14px;
    text-align: center;
    min-width: 90px;
}

.throw-counter-num {
    font-size: 28px;
    line-height: 1;
    display: block;
    margin-bottom: 2px;
}

/* スコアカード派手化 */
.scoreboard-pro {
    background: white;
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    display: grid;
    gap: 10px;
}

.score-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f7f8fa;
    transition: all 0.2s;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.score-card.is-current {
    background: white;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: scale(1.02);
}

.score-card.is-current.p1 { border-color: #1a73e8; }
.score-card.is-current.p2 { border-color: #c5221f; }
.score-card.is-current.p3 { border-color: #137333; }
.score-card.is-current.p4 { border-color: #b06000; }

.score-card.is-leader::before {
    content: "👑";
    position: absolute;
    left: -8px;
    top: -8px;
    font-size: 24px;
    transform: rotate(-15deg);
}

.score-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    font-size: 18px;
    flex-shrink: 0;
}

.score-avatar.p1 { background: linear-gradient(135deg, #1a73e8, #4285f4); }
.score-avatar.p2 { background: linear-gradient(135deg, #c5221f, #ea4335); }
.score-avatar.p3 { background: linear-gradient(135deg, #137333, #34a853); }
.score-avatar.p4 { background: linear-gradient(135deg, #b06000, #f29900); }

.score-info {
    flex: 1;
    min-width: 0;
}

.score-name {
    font-weight: 700;
    font-size: 15px;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.score-meta {
    font-size: 12px;
    color: #5f6368;
    margin-top: 2px;
}

.score-value-big {
    font-size: 32px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* ヒット入力エリア派手化 */
.hit-input-pro {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.hit-input-pro h3 {
    font-size: 14px;
    color: #5f6368;
    margin-bottom: 16px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hit-input-pro .form-input {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.1em;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.dart-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.dart-btn {
    padding: 12px 4px;
    border: 2px solid #dadce0;
    border-radius: 10px;
    background: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.15s;
    font-family: inherit;
}

.dart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: #1967d2;
    color: #1967d2;
}

.dart-btn.bull {
    background: linear-gradient(135deg, #fef7e0, #fff8e1);
    border-color: #b06000;
    color: #b06000;
}

.dart-btn.bull-inner {
    background: linear-gradient(135deg, #c5221f, #ea4335);
    color: white;
    border-color: transparent;
}

.dart-btn.out {
    background: linear-gradient(135deg, #fce8e6, #fee);
    border-color: #c5221f;
    color: #c5221f;
}

.dart-btn.triple { color: #c5221f; font-weight: 800; }
.dart-btn.double { color: #137333; font-weight: 700; }

/* Bot ターン表示 */
.bot-thinking-pro {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: white;
    padding: 32px;
    border-radius: 16px;
    text-align: center;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.bot-thinking-pro h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.bot-thinking-dots {
    display: inline-block;
    font-size: 32px;
    animation: pulse 1.2s infinite ease-in-out;
}

@keyframes pulse {
    0%, 80%, 100% { opacity: 0.3; }
    40% { opacity: 1; }
}

.bot-action-btn {
    margin-top: 16px;
    background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.4);
    transition: transform 0.15s;
    font-family: inherit;
}

.bot-action-btn:hover {
    transform: translateY(-2px);
}

/* ヒットログ派手化 */
.hit-log-pro {
    background: white;
    border-radius: 16px;
    padding: 16px;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.hit-log-pro .hit-log-entry {
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 13px;
    background: #f7f8fa;
    border-left: 3px solid transparent;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

.hit-log-pro .hit-log-entry.acquired { background: #e6f4ea; color: #137333; border-left-color: #137333; font-weight: 600; }
.hit-log-pro .hit-log-entry.stolen { background: #fce8e6; color: #c5221f; border-left-color: #c5221f; font-weight: 600; }
.hit-log-pro .hit-log-entry.bonus { background: linear-gradient(90deg, #fef7e0, white); color: #b06000; border-left-color: #f29900; font-weight: 700; }

/* 結果画面ドラマチック化 */
.result-stage {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d1b4e 50%, #16213e 100%);
    border-radius: 24px;
    padding: 60px 24px;
    text-align: center;
    color: white;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.result-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 60%);
}

.result-stage::after {
    content: "✨🎯⭐";
    position: absolute;
    inset: 0;
    font-size: 40px;
    letter-spacing: 30vw;
    line-height: 100px;
    opacity: 0.05;
    pointer-events: none;
}

.result-trophy-big {
    font-size: 100px;
    margin-bottom: 16px;
    display: inline-block;
    animation: bounceIn 0.8s ease;
    filter: drop-shadow(0 8px 30px rgba(255, 200, 0, 0.4));
}

@keyframes bounceIn {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    50% { transform: scale(1.2) rotate(15deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.result-winner-name {
    font-size: 48px;
    font-weight: 900;
    background: linear-gradient(135deg, #fbbc04 0%, #f29900 50%, #ea8600 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.result-winner-stats {
    font-size: 18px;
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

.podium {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 12px;
    align-items: end;
    margin: 24px 0;
}

.podium-pos {
    background: white;
    border-radius: 12px;
    padding: 20px 12px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.podium-pos.first { background: linear-gradient(180deg, #fef7e0, white); padding-top: 30px; padding-bottom: 30px; }
.podium-pos.second { background: linear-gradient(180deg, #f1f3f4, white); }
.podium-pos.third { background: linear-gradient(180deg, #fce8e6, white); }

.podium-rank {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 8px;
}

.podium-name {
    font-weight: 700;
    margin-bottom: 4px;
}

.podium-score {
    font-size: 22px;
    font-weight: 800;
    color: #1a73e8;
    font-variant-numeric: tabular-nums;
}

/* ========== DARTSLIVE3 風 クリケット専用ステージ ========== */
.dl-stage {
    background: linear-gradient(180deg, #0a0e27 0%, #16213e 100%);
    border-radius: 18px;
    padding: 0;
    color: white;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    position: relative;
}

.dl-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(100, 150, 255, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.dl-stage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    position: relative;
}

.dl-game-tag {
    background: linear-gradient(135deg, #1a73e8, #4285f4);
    padding: 6px 14px;
    border-radius: 4px;
    font-weight: 800;
    color: white;
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.4);
}

.dl-round-info {
    color: rgba(255,255,255,0.7);
    font-weight: 600;
}

.dl-current-target {
    text-align: right;
}

.dl-current-target-label {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 2px;
}

.dl-current-target-value {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.dl-cricket-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 0;
    padding: 24px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.dl-team-side {
    text-align: center;
    padding: 20px;
}

.dl-team-side.is-active {
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
}

.dl-team-label {
    font-size: 12px;
    letter-spacing: 0.2em;
    margin-bottom: 8px;
    font-weight: 800;
}

.dl-team-side.team-red .dl-team-label { color: #ff5252; }
.dl-team-side.team-blue .dl-team-label { color: #40c4ff; }

.dl-team-score {
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    text-shadow: 0 0 24px currentColor;
}

.dl-team-side.team-red .dl-team-score { color: #ff5252; }
.dl-team-side.team-blue .dl-team-score { color: #40c4ff; }

.dl-cricket-board {
    display: grid;
    grid-template-rows: repeat(7, auto);
    gap: 6px;
}

.dl-cricket-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}

.dl-marks-cell {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

.dl-marks-cell.right {
    justify-content: flex-start;
}

.dl-mark {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    border-radius: 4px;
}

.dl-mark.team-red { color: #ff5252; }
.dl-mark.team-blue { color: #40c4ff; }
.dl-mark.closed { background: rgba(255,255,255,0.08); border: 1px solid currentColor; }
.dl-mark.empty { opacity: 0.15; }

.dl-cricket-num {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 6px 14px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 14px;
    text-align: center;
    min-width: 44px;
    letter-spacing: 0.05em;
}

.dl-cricket-num.bullish { background: linear-gradient(135deg, #fbbc04, #ea4335); border: none; }

/* 狙うべき場所ハイライト */
.dl-cricket-num.target-scoring {
    background: linear-gradient(135deg, #ffeb3b, #ffd54f);
    color: #1a1a1a;
    border: none;
    box-shadow: 0 0 16px rgba(255, 213, 79, 0.6);
    animation: targetPulse 1.6s infinite ease-in-out;
}

.dl-cricket-num.target-scoring.bullish {
    background: linear-gradient(135deg, #ffeb3b, #ff9800);
    box-shadow: 0 0 24px rgba(255, 152, 0, 0.7);
}

.dl-cricket-num.target-dead {
    opacity: 0.3;
    filter: grayscale(1);
}

@keyframes targetPulse {
    0%, 100% {
        box-shadow: 0 0 16px rgba(255, 213, 79, 0.6);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 28px rgba(255, 213, 79, 0.9);
        transform: scale(1.05);
    }
}

/* 01 チェックアウト表示 */
.checkout-banner {
    margin-top: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(255, 213, 79, 0.2), rgba(255, 152, 0, 0.15));
    border: 2px solid #ffd54f;
    border-radius: 12px;
    text-align: center;
    animation: checkoutGlow 1.4s infinite;
}

@keyframes checkoutGlow {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 213, 79, 0.5); }
    50% { box-shadow: 0 0 24px rgba(255, 213, 79, 0.9); }
}

.checkout-banner.bull-finish {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.3), rgba(244, 67, 54, 0.3));
    border-color: #ff5252;
    animation: bullCheckoutGlow 1s infinite;
}

@keyframes bullCheckoutGlow {
    0%, 100% { box-shadow: 0 0 16px rgba(255, 82, 82, 0.6); }
    50% { box-shadow: 0 0 36px rgba(255, 82, 82, 1); }
}

.checkout-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: #ffd54f;
    margin-bottom: 4px;
}

.checkout-banner.bull-finish .checkout-label {
    color: #ff8a80;
}

.checkout-options {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.checkout-pill {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255, 213, 79, 0.5);
    border-radius: 12px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 700;
    color: white;
}

/* BULL ヒット時の超派手フラッシュ */
.bull-mega-flash {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, rgba(255, 100, 0, 0.4) 40%, transparent 70%);
    pointer-events: none;
    animation: bullMegaFlash 1.2s ease-out forwards;
}

@keyframes bullMegaFlash {
    0% { opacity: 0; transform: scale(0.3); }
    20% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(2); }
}

.bull-mega-flash::before {
    content: '🎯';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 240px;
    animation: bullSpin 1.2s ease-out forwards;
    filter: drop-shadow(0 0 60px rgba(255, 215, 0, 1));
}

@keyframes bullSpin {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    30% { transform: scale(1.4) rotate(360deg); opacity: 1; }
    100% { transform: scale(0.8) rotate(720deg); opacity: 0; }
}

/* 花火パーティクル */
.firework {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
    animation: fireworkBurst 1.5s ease-out forwards;
}

@keyframes fireworkBurst {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}

/* TRIPLE ヒット派手フラッシュ */
.triple-mega-flash {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
    animation: tripleFlash 1.0s ease-out forwards;
}

.triple-mega-flash::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.5), rgba(244, 67, 54, 0.4));
}

.triple-mega-flash::after {
    content: 'TRIPLE!';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 200px;
    font-weight: 900;
    color: white;
    text-shadow: 0 0 60px #ff5722, 0 0 30px #ff9800;
    letter-spacing: -0.05em;
    animation: tripleZoom 1.0s ease-out forwards;
}

@keyframes tripleFlash {
    0% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes tripleZoom {
    0% { transform: scale(0.3) skewY(-10deg); }
    40% { transform: scale(1.2) skewY(2deg); }
    100% { transform: scale(0.95) skewY(0); }
}

/* LED風リングエフェクト */
.led-ring {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid var(--led-color, #ffd54f);
    transform: translate(-50%, -50%);
    z-index: 9998;
    pointer-events: none;
    animation: ledRingExpand 1.2s ease-out forwards;
}

@keyframes ledRingExpand {
    0% {
        width: 100px; height: 100px;
        border-width: 8px;
        opacity: 1;
    }
    100% {
        width: 800px; height: 800px;
        border-width: 1px;
        opacity: 0;
    }
}

.dl-players-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.dl-player-cell {
    padding: 10px 14px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.06);
    transition: all 0.3s;
}

.dl-player-cell:last-child { border-right: none; }

.dl-player-cell.is-active {
    background: rgba(255,255,255,0.08);
    box-shadow: inset 0 4px 0 var(--pc-color, #1a73e8);
}

.dl-player-cell.team-red .dl-player-name { color: #ff5252; }
.dl-player-cell.team-blue .dl-player-name { color: #40c4ff; }

.dl-player-cell.team-red.is-active { --pc-color: #ff5252; }
.dl-player-cell.team-blue.is-active { --pc-color: #40c4ff; }

.dl-player-avatar-mini {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    margin: 0 auto 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}

.dl-player-cell.team-red .dl-player-avatar-mini { background: rgba(255, 82, 82, 0.2); color: #ff5252; }
.dl-player-cell.team-blue .dl-player-avatar-mini { background: rgba(64, 196, 255, 0.2); color: #40c4ff; }

.dl-player-name {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.dl-player-score-mini {
    font-size: 22px;
    font-weight: 900;
    color: white;
    font-variant-numeric: tabular-nums;
}

/* ============================================
   フルスクリーンプレイ画面（DARTSLIVE3風 1画面完結）
   ============================================ */
body.play-mode {
    background: #000;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.play-fs {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows: 56px 36px 1fr 110px;
    /* 🛠 千葉さん指示 2026-05-05: 右パネル(side)を 320px → 200px に縮小し中央ビューを広く */
    grid-template-columns: 220px 1fr 200px;
    grid-template-areas:
        "header header header"
        "ticker ticker ticker"
        "leftside main side"
        "footer footer footer";
    overflow: hidden;
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* 右スペース: 視覚的中央を保つためのバランス用プレースホルダ。
   何も置かないけど widget は左220 + 中央 + 右220 になるので main は viewport center にいる */
.play-fs-rightspace {
    grid-area: rightspace;
    pointer-events: none;
}

/* デバッグ入力モード（?キーでトグル） — 右側プレースホルダの代わりに side */
body.debug-mode .play-fs {
    grid-template-columns: 220px 1fr 200px;
    grid-template-areas:
        "header header header"
        "ticker ticker ticker"
        "leftside main side"
        "footer footer footer";
}
body.debug-mode .play-fs-rightspace { display: none; }
body.debug-mode .play-fs-side { display: flex !important; grid-area: side; }

/* 左サイドパネル（ラウンド履歴 + スタッツ）— 透過、文字だけ浮く*/
.play-fs-leftside {
    grid-area: leftside;
    background: transparent;
    border-right: none;
    overflow-y: auto;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 5;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

.left-section-title {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.5);
    margin-bottom: 6px;
    padding: 0 4px;
}

.round-history-card {
    background: transparent;
    border-radius: 8px;
    padding: 8px 6px;
    border: none;
    border-left: 2px solid rgba(255,255,255,0.15);
}

.round-history-card.current {
    border-left-color: #ffd54f;
    box-shadow: -2px 0 12px rgba(255, 213, 79, 0.3);
}

.round-history-num {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}

.round-history-card.current .round-history-num { color: #ffd54f; }

.round-history-throws {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.rh-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    border: 1px solid transparent;
}
.rh-pill.bull { background: linear-gradient(135deg, #fbbc04, #ea4335); color: white; }
.rh-pill.triple { background: linear-gradient(135deg, #ff5722, #f29900); color: white; }
.rh-pill.out { background: rgba(244, 67, 54, 0.3); color: #ffcdd2; border-color: #ef5350; }

.stats-card {
    background: transparent;
    border-radius: 10px;
    padding: 8px 6px;
    border: none;
    border-left: 2px solid rgba(64,196,255,0.4);
}

.stats-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 4px 0;
}

.stats-row .lbl { color: rgba(255,255,255,0.5); letter-spacing: 0.05em; }
.stats-row .val { font-weight: 800; color: white; font-variant-numeric: tabular-nums; }
.stats-row .val.highlight { color: #ffd54f; }

/* デフォルトで手打ちモック入力欄を表示（PC上でテストプレイ可能に） */
/* 隠したい時は body に no-mock クラス付与 */
body.no-mock .play-fs-side {
    display: none !important;
}

/* ヒットログティッカー（横スクロール風）*/
.play-fs-ticker {
    grid-area: ticker;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
}

.tk-label {
    font-size: 10px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.2em;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
    padding: 4px 10px;
    border-radius: 4px;
}

.tk-stream {
    display: flex;
    gap: 14px;
    overflow: hidden;
    flex: 1;
    mask-image: linear-gradient(90deg, transparent 0, black 5%, black 95%, transparent 100%);
}

.tk-item {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.1);
}

.tk-item.acquired { background: rgba(76, 175, 80, 0.2); border-color: #66bb6a; color: #a5d6a7; }
.tk-item.stolen { background: rgba(244, 67, 54, 0.2); border-color: #ef5350; color: #ffcdd2; }
.tk-item.bonus { background: rgba(251, 188, 4, 0.2); border-color: #fbbc04; color: #fff59d; }
.tk-item.outboard { background: rgba(156, 39, 176, 0.15); border-color: #9c27b0; }

.tk-item .seg {
    font-weight: 900;
    color: white;
    background: rgba(255,255,255,0.15);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
}

/* 大きな NOW THROWING バナー（メイン上部）*/
.now-throwing-banner-big {
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border-radius: 18px;
    padding: 12px 20px;
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 760px;
    margin: 0 auto 8px;
    backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.av-big {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: white;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 0 24px var(--av-glow, transparent);
}

.av-big.p1 { background: linear-gradient(135deg, #1a73e8, #4285f4); --av-glow: rgba(66,133,244,0.5); }
.av-big.p2 { background: linear-gradient(135deg, #c5221f, #ea4335); --av-glow: rgba(244,67,53,0.5); }
.av-big.p3 { background: linear-gradient(135deg, #137333, #34a853); --av-glow: rgba(52,168,83,0.5); }
.av-big.p4 { background: linear-gradient(135deg, #b06000, #f29900); --av-glow: rgba(242,153,0,0.5); }

.ntb-throw {
    width: 60px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    color: rgba(255,255,255,0.4);
}

.ntb-throw.thrown {
    background: rgba(255,255,255,0.18);
    color: white;
    border-color: transparent;
    animation: throwPop 0.4s;
}
.ntb-throw.thrown.bull { background: linear-gradient(135deg, #fbbc04, #ea4335); }
.ntb-throw.thrown.triple { background: linear-gradient(135deg, #ff5722, #f29900); }
.ntb-throw.thrown.out { background: linear-gradient(135deg, #c5221f, #ef5350); }

/* 中央のメインスコア（残り点・スコア）を巨大化 */
.zo-mega-score {
    font-size: clamp(220px, 36vw, 480px) !important;
}

/* 現プレイヤー情報を中央上に大きく */
.now-throwing-banner {
    text-align: center;
    margin-bottom: 12px;
    padding: 14px 24px;
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    display: inline-flex;
    align-items: center;
    gap: 16px;
    align-self: center;
}

.ntb-label {
    font-size: 10px;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.5);
}

.ntb-name {
    font-size: 28px;
    font-weight: 900;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ntb-throws {
    display: flex;
    gap: 6px;
}

.ntb-throws .pfs-throw {
    width: 56px;
    height: 36px;
}

/* ボス画像をもっと大きく */
.boss-portrait-fs {
    width: clamp(160px, 22vh, 280px) !important;
    height: clamp(160px, 22vh, 280px) !important;
}

.play-fs-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* 🛠 千葉さん指示 2026-05-07: おすすめゲームすべてに専用背景画像（Gemini生成）。
   画像の上に暗色オーバーレイを乗せて UI 文字の視認性を確保。 */
.play-fs-bg.bg-cricket {
    /* 🛠 千葉さん指示 2026-05-09: クリケット背景がうるさくて 20/19/18 のマーク・数字が見にくい問題対応。
       linear-gradient オーバーレイ alpha を 0.55-0.7 → 0.82-0.85 に強化して背景を暗くし、
       segment table の数字とマークを浮かせる。 */
    background:
        linear-gradient(180deg, rgba(0, 20, 10, 0.84) 0%, rgba(0, 30, 15, 0.82) 50%, rgba(0, 15, 10, 0.85) 100%),
        url('/assets/images/bg_cricket.png') center/cover no-repeat,
        linear-gradient(180deg, #0a0e27 0%, #16213e 50%, #0a0e27 100%);
}

.play-fs-bg.bg-zero-one {
    /* 🛠 千葉さん指示 2026-05-10: 01 ゲームのみ背景を暗化。alpha 0.6/0.55/0.72 → 0.78/0.72/0.86 */
    background:
        linear-gradient(180deg, rgba(20, 10, 40, 0.78) 0%, rgba(15, 5, 35, 0.72) 50%, rgba(10, 5, 30, 0.86) 100%),
        url('/assets/images/bg_zero_one.png') center/cover no-repeat,
        linear-gradient(180deg, #1a0033 0%, #0d0019 100%);
}

.play-fs-bg.bg-kunitori {
    /* 🛠 千葉さん指示 2026-05-07: 浮世絵風日本マップ画像を背景に使用。 */
    background:
        linear-gradient(180deg, rgba(20, 10, 5, 0.55) 0%, rgba(40, 20, 10, 0.55) 50%, rgba(20, 10, 5, 0.7) 100%),
        url('/assets/images/bg_kunitori.png') center/cover no-repeat,
        linear-gradient(180deg, #2c1810 0%, #4a2818 50%, #2c1810 100%);
}

/* キックダウン: 蹴落とし系の派手な戦闘背景 */
.play-fs-bg.bg-kick-down {
    background:
        linear-gradient(180deg, rgba(30, 10, 0, 0.65) 0%, rgba(40, 15, 5, 0.6) 50%, rgba(20, 5, 0, 0.75) 100%),
        url('/assets/images/bg_kick_down.png') center/cover no-repeat,
        linear-gradient(180deg, #1a0805 0%, #3d1505 50%, #1a0805 100%);
}

/* フリーズ01: 氷結系の青寒色背景 */
.play-fs-bg.bg-freeze01 {
    background:
        linear-gradient(180deg, rgba(5, 20, 40, 0.55) 0%, rgba(0, 30, 50, 0.5) 50%, rgba(0, 15, 35, 0.7) 100%),
        url('/assets/images/bg_freeze01.png') center/cover no-repeat,
        linear-gradient(180deg, #00111a 0%, #001f33 50%, #00111a 100%);
}

/* ダーツダンジョン: ダンジョン回廊背景 */
.play-fs-bg.bg-dungeon {
    background:
        linear-gradient(180deg, rgba(10, 5, 20, 0.65) 0%, rgba(15, 5, 30, 0.6) 50%, rgba(5, 0, 15, 0.78) 100%),
        url('/assets/images/bg_dungeon.png') center/cover no-repeat,
        linear-gradient(180deg, #0d0420 0%, #1a0a30 50%, #0d0420 100%);
}

/* ダーツすごろく: 中央アートに集中させるため bg画像は使わず単色グラデのみ
   （千葉さん指示 2026-05-09: 中央アート(sugoroku_center.png)と外周マスが既に
    すごろくテーマなので、ホーム用のカラフル bg画像は対戦画面では不要） */
.play-fs[data-game="sugoroku"] .play-fs-bg.bg-sugoroku,
.play-fs-bg.bg-sugoroku {
    background:
        linear-gradient(180deg, #021a12 0%, #04382a 50%, #021a12 100%) !important;
}

/* 罰ゲームルーレット: ネオンルーレット+酒+派手なパーティ背景 */
.play-fs-bg.bg-punishment {
    background:
        linear-gradient(180deg, rgba(20, 5, 15, 0.65) 0%, rgba(30, 5, 25, 0.6) 50%, rgba(15, 0, 10, 0.78) 100%),
        url('/assets/images/bg_punishment.png') center/cover no-repeat,
        linear-gradient(180deg, #1a0510 0%, #3d0a25 50%, #1a0510 100%);
}

.play-fs-bg.bg-fantasy {
    background:
        radial-gradient(ellipse at top, rgba(120, 50, 100, 0.4) 0%, transparent 60%),
        linear-gradient(180deg, #1a0033 0%, #2d0a3e 50%, #1a0033 100%);
}

.play-fs-bg.bg-race {
    background:
        radial-gradient(ellipse at top, rgba(60, 200, 100, 0.25) 0%, transparent 60%),
        linear-gradient(180deg, #003322 0%, #006644 50%, #003322 100%);
}

.play-fs-bg.bg-party {
    background:
        radial-gradient(ellipse at top, rgba(255, 180, 60, 0.4) 0%, transparent 60%),
        linear-gradient(180deg, #3d1a00 0%, #5d2c08 50%, #3d1a00 100%);
}

.play-fs-bg.bg-rpg {
    background:
        radial-gradient(ellipse at top, rgba(80, 100, 180, 0.3) 0%, transparent 60%),
        linear-gradient(180deg, #001a3e 0%, #003366 50%, #001a3e 100%);
}

.play-fs-bg.bg-pokedex {
    background:
        radial-gradient(ellipse at top, rgba(180, 60, 90, 0.3) 0%, transparent 60%),
        linear-gradient(180deg, #1a0008 0%, #4a0a18 50%, #1a0008 100%);
}

.play-fs-bg.bg-territory {
    background:
        radial-gradient(ellipse at top, rgba(180, 60, 60, 0.3) 0%, transparent 60%),
        linear-gradient(180deg, #1a0a05 0%, #4a1a0a 50%, #1a0a05 100%);
}

.play-fs-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent 0, transparent 60px, rgba(255,255,255,0.015) 60px, rgba(255,255,255,0.015) 61px),
        repeating-linear-gradient(90deg, transparent 0, transparent 60px, rgba(255,255,255,0.015) 60px, rgba(255,255,255,0.015) 61px);
    pointer-events: none;
}

/* ヘッダー */
.play-fs-header {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 10;
}

.pfs-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: linear-gradient(135deg, #1a73e8, #4285f4);
    border-radius: 4px;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.2em;
}

.pfs-tag.kunitori { background: linear-gradient(135deg, #d4af37, #f9c545); color: #2c1810; }
.pfs-tag.cricket { background: linear-gradient(135deg, #1976d2, #42a5f5); }
.pfs-tag.zero-one { background: linear-gradient(135deg, #5e35b1, #7e57c2); }
.pfs-tag.boss { background: linear-gradient(135deg, #c62828, #ef5350); }
.pfs-tag.race { background: linear-gradient(135deg, #00897b, #26a69a); }
.pfs-tag.party { background: linear-gradient(135deg, #ff5722, #ff8a65); }

.pfs-round {
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.pfs-back {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    transition: all 0.2s;
}

.pfs-back:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}

/* メインエリア */
.play-fs-main {
    grid-area: main;
    overflow: hidden;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* サイドパネル */
.play-fs-side {
    grid-area: side;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 5;
}

/* 🛠 千葉さん指示 2026-05-05: 右パネル縮小に合わせて padding/AVサイズも詰める */
.pfs-current-card {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.pfs-current-label {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
}

.pfs-current-name {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pfs-current-name .av {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: white;
    flex-shrink: 0;
}

.pfs-current-name .av.p1 { background: linear-gradient(135deg, #1a73e8, #4285f4); }
.pfs-current-name .av.p2 { background: linear-gradient(135deg, #c5221f, #ea4335); }
.pfs-current-name .av.p3 { background: linear-gradient(135deg, #137333, #34a853); }
.pfs-current-name .av.p4 { background: linear-gradient(135deg, #b06000, #f29900); }

.pfs-throws {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.pfs-throw {
    flex: 1;
    height: 36px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pfs-throw.thrown { background: rgba(255, 255, 255, 0.18); color: white; border-color: transparent; animation: throwPop 0.4s; }
.pfs-throw.thrown.bull { background: linear-gradient(135deg, #fbbc04, #ea4335); }
.pfs-throw.thrown.triple { background: linear-gradient(135deg, #ff5722, #f29900); }
.pfs-throw.thrown.out { background: linear-gradient(135deg, #c5221f, #ef5350); }

/* ヒット入力（サイド版） */
.pfs-input-area {
    padding: 14px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pfs-input-area input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: white;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: inherit;
}

.pfs-input-area input:focus {
    outline: none;
    border-color: #4285f4;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.2);
}

.pfs-dart-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.pfs-dart-btn {
    padding: 9px 4px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    color: white;
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.pfs-dart-btn:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-1px);
}

.pfs-dart-btn.triple { background: linear-gradient(135deg, rgba(255, 87, 34, 0.3), rgba(244, 67, 54, 0.3)); border-color: #ff5722; }
.pfs-dart-btn.double { background: linear-gradient(135deg, rgba(76, 175, 80, 0.3), rgba(56, 142, 60, 0.3)); border-color: #66bb6a; }
.pfs-dart-btn.bull { background: linear-gradient(135deg, rgba(251, 188, 4, 0.3), rgba(234, 67, 53, 0.3)); border-color: #fbbc04; }
.pfs-dart-btn.dbull { background: linear-gradient(135deg, #ea4335, #fbbc04); color: white; }
.pfs-dart-btn.out { background: rgba(244, 67, 54, 0.2); border-color: #ef5350; color: #ef5350; }

.pfs-bot-thinking {
    text-align: center;
    padding: 20px;
}

.pfs-bot-thinking .dots {
    display: inline-block;
    font-size: 24px;
    animation: pulse 1.2s infinite ease-in-out;
}

.pfs-bot-action {
    margin-top: 12px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #4285f4, #34a853);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 800;
    cursor: pointer;
    width: 100%;
    font-family: inherit;
    font-size: 13px;
}

/* フッター（全プレイヤースコア） */
.play-fs-footer {
    grid-area: footer;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.1);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

.pfs-foot-cell {
    padding: 12px 14px;
    border-right: 1px solid rgba(255,255,255,0.06);
    transition: all 0.3s;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pfs-foot-cell:last-child { border-right: none; }

.pfs-foot-cell.is-active {
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
    transform: scale(1.04);
    z-index: 1;
}

.pfs-foot-cell.is-active .pfs-foot-score {
    font-size: 38px;
    color: var(--pfc-color, #ffd54f);
    text-shadow: 0 0 24px var(--pfc-color, rgba(255, 213, 79, 0.6));
}

.pfs-foot-cell.is-active .pfs-foot-name {
    color: white;
    font-size: 13px;
}

.pfs-foot-cell.is-active::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: var(--pfc-color, #4285f4);
    box-shadow: 0 0 16px var(--pfc-color, #4285f4);
}

.pfs-foot-cell.is-active::after {
    content: '▼ NOW';
    position: absolute;
    bottom: 4px;
    right: 8px;
    font-size: 9px;
    color: var(--pfc-color, #ffd54f);
    font-weight: 900;
    letter-spacing: 0.2em;
    animation: blinkLabel 1.4s infinite;
}

.pfs-foot-cell.p1 { --pfc-color: #4285f4; }
.pfs-foot-cell.p2 { --pfc-color: #ef5350; }
.pfs-foot-cell.p3 { --pfc-color: #66bb6a; }
.pfs-foot-cell.p4 { --pfc-color: #ffa726; }

.pfs-foot-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    font-weight: 700;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pfs-foot-name .mini-av {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    color: white;
    flex-shrink: 0;
}

.pfs-foot-cell.p1 .mini-av { background: linear-gradient(135deg, #1a73e8, #4285f4); }
.pfs-foot-cell.p2 .mini-av { background: linear-gradient(135deg, #c5221f, #ea4335); }
.pfs-foot-cell.p3 .mini-av { background: linear-gradient(135deg, #137333, #34a853); }
.pfs-foot-cell.p4 .mini-av { background: linear-gradient(135deg, #b06000, #f29900); }

.pfs-foot-score {
    font-size: 28px;
    font-weight: 900;
    color: white;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.pfs-foot-meta {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
    letter-spacing: 0.05em;
}

/* 中央メインビュー: 01ゲーム巨大スコア */
.zero-one-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
}

.zo-mega-score {
    font-size: clamp(180px, 28vw, 360px);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -0.06em;
    color: white;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 60px rgba(255,255,255,0.4);
    margin: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.zo-mega-score.bull-finish {
    background: linear-gradient(135deg, #fbbc04, #ff5722);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 80px rgba(251, 188, 4, 0.6);
    animation: bullishPulse 1.4s infinite ease-in-out;
}

.zo-mega-score.checkout {
    color: #ffd54f;
    text-shadow: 0 0 60px rgba(255, 213, 79, 0.6);
}

/* 🛠 軽量化 2026-05-05: filter:brightness は GPU layer 化が必要で重いので削除。
   transform:scale だけで十分目立つ。 */
@keyframes bullishPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.zo-checkout-options {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.zo-checkout-pill {
    background: linear-gradient(135deg, rgba(255, 213, 79, 0.2), rgba(255, 152, 0, 0.15));
    border: 2px solid #ffd54f;
    padding: 10px 20px;
    border-radius: 16px;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.05em;
    box-shadow: 0 0 20px rgba(255, 213, 79, 0.4);
    animation: shimmer 2s infinite ease-in-out;
}

@keyframes shimmer {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 213, 79, 0.4); }
    50% { box-shadow: 0 0 40px rgba(255, 213, 79, 0.8); }
}

/* クリケット中央表 */
.cricket-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
}

.cricket-table {
    /* 🛠 千葉さん指示 2026-05-09: 背景画像にマーク・数字が埋もれるので、segment table 周辺だけ
       半透明の暗色バックドロップを敷いて視認性を確保。 */
    display: grid;
    grid-template-rows: 28px repeat(7, 1fr);
    gap: 4px;
    max-width: 920px;
    width: 100%;
    height: 100%;
    max-height: 600px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.5);
}

/* ヘッダー行（プレイヤー名表示） */
.cricket-header {
    display: grid;
    grid-template-columns: 1fr 130px 1fr;
    gap: 8px;
    height: 28px;
    align-items: center;
    margin-bottom: 4px;
}
.crk-header-side {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
}
.crk-header-side.right { direction: ltr; }
.crk-header-num {
    text-align: center;
    font-size: 9px;
    letter-spacing: 0.25em;
    color: rgba(255,255,255,0.4);
    font-weight: 800;
}
.crk-name {
    background: rgba(255,255,255,0.05);
    border-radius: 6px 6px 0 0;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    border-bottom: 2px solid currentColor;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 🛠 千葉さん指示 2026-05-10: フッターの --pfc-color と同じ色に統一
   （p1=RED #ef5350 / p2=YELLOW #ffd54f / p3=GREEN #66bb6a / p4=PURPLE #ba68c8 等） */
.crk-name.team-red { color: #ef5350; }
.crk-name.team-yellow { color: #ffd54f; }
.crk-name.team-green { color: #66bb6a; }
.crk-name.team-purple { color: #ba68c8; }
.crk-name.team-pink { color: #ec407a; }
.crk-name.team-cyan { color: #26c6da; }
.crk-name.team-orange { color: #ff9800; }
.crk-name.team-blue { color: #42a5f5; }

/* 各行: 左サイド / 中央数字 / 右サイド */
.cricket-row {
    display: grid;
    grid-template-columns: 1fr 130px 1fr;
    align-items: stretch;
    gap: 8px;
}

.cricket-row.target-scoring {
    animation: scoringRow 1.6s infinite ease-in-out;
}

/* 🛠 軽量化 2026-05-05: filter:drop-shadow は GPU 重い → box-shadow に置換
   （対象が矩形 cell なので見た目はほぼ同じ） */
@keyframes scoringRow {
    0%, 100% { box-shadow: 0 0 0 rgba(255,213,79,0); }
    50% { box-shadow: 0 0 16px rgba(255,213,79,0.8); }
}

/* 左/右サイド: 中の各プレイヤーセルが横並びになる */
.crk-side {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
}
.crk-side.right { direction: ltr; }

/* 各プレイヤーのマーク表示セル: 明確な区切り
   🛠 千葉さん指示 2026-05-07: 「四角い枠とその中のマーク」が見えるよう、
   背景・枠線を強めに。透過 0.025/0.08 だとほぼ見えなかった。
   🛠 千葉さん指示 2026-05-10: マーク 32px → 48px 拡大に伴い、
   セル min-height 56px → 72px、padding を拡大。 */
.crk-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4px 14px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);   /* 0.025 → 0.06 */
    border: 2px solid rgba(255,255,255,0.22);  /* 1.5px / 0.08 → 2px / 0.22 */
    min-height: 72px;                         /* 56 → 72 */
    transition: all 0.2s;
}
/* 🛠 千葉さん指示 2026-05-10: cell 枠も crk-name と同じ統一カラー */
.crk-cell.team-red { border-color: rgba(239,83,80,0.35); background: rgba(239,83,80,0.05); }
.crk-cell.team-yellow { border-color: rgba(255,213,79,0.45); background: rgba(255,213,79,0.06); }
.crk-cell.team-green { border-color: rgba(102,187,106,0.35); background: rgba(102,187,106,0.05); }
.crk-cell.team-purple { border-color: rgba(186,104,200,0.35); background: rgba(186,104,200,0.05); }
.crk-cell.team-pink { border-color: rgba(236,64,122,0.35); background: rgba(236,64,122,0.05); }
.crk-cell.team-cyan { border-color: rgba(38,198,218,0.35); background: rgba(38,198,218,0.05); }
.crk-cell.team-orange { border-color: rgba(255,152,0,0.35); background: rgba(255,152,0,0.05); }
.crk-cell.team-blue { border-color: rgba(66,165,245,0.35); background: rgba(66,165,245,0.05); }

.crk-mark {
    /* 🛠 千葉さん指示 2026-05-09: 背景に埋もれないよう text-shadow を強化（黒の縁取り＋カラーグロー）。
       既存 32px サイズ（外側 !important）はそのまま。
       🛠 千葉さん指示 2026-05-10: マーク視認性向上のため、サイズを 48px に拡大、
       -webkit-text-stroke で黒縁取り（太字感）、letter-spacing/line-height/filter 強化。
       色も淡色系（赤→#ff7e84 等）に変えて背景に埋もれないように。 */
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    -webkit-text-stroke: 2px rgba(0,0,0,0.55);
    text-shadow: 0 2px 8px rgba(0,0,0,0.85), 0 0 16px rgba(255,255,255,0.25);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7));
    letter-spacing: -0.02em;
}

.crk-mark.team-red, .crk-mark.team-orange { color: #ff7e84 !important; }
.crk-mark.team-blue, .crk-mark.team-cyan { color: #82d6ff !important; }
.crk-mark.team-green { color: #90ee90 !important; }
.crk-mark.team-yellow { color: #ffe066 !important; }
.crk-mark.team-purple, .crk-mark.team-pink { color: #d49aff !important; }
.crk-mark.empty { color: rgba(255,255,255,0.25) !important; font-size: 36px !important; }
/* 🛠 千葉さん指示 2026-05-12: 3 マーク済 (クローズ済) はランダム絵文字。
   絵文字は色付き = team-* の色適用を抑えて、絵文字本来の色で見えるようにする。
   -webkit-text-stroke も 0 にして縁取りで潰れないように。 */
.crk-mark.crk-mark-closed {
    color: inherit !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.55) !important;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.55)) !important;
    font-size: 44px !important;
    animation: crkClosedPulse 2.4s ease-in-out infinite;
}
@keyframes crkClosedPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

/* 中央番号セル: BULL も他と同じサイズに統一 */
.crk-num-cell {
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.2);
    padding: 0;
    border-radius: 10px;
    font-weight: 900;
    font-size: 26px;
    text-align: center;
    color: white;
    transition: all 0.3s;
    width: 130px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    letter-spacing: 0.05em;
}

.crk-num-cell.bullish {
    background: linear-gradient(135deg, #fbbc04, #ea4335);
    border-color: #fbbc04;
    font-size: 22px;
}
.crk-num-cell.target-scoring {
    background: linear-gradient(135deg, #ffeb3b, #ffd54f);
    color: #1a1a1a;
    border-color: transparent;
    /* animation は animations.css の anim-pulse-glow-y で上書きされるので指定不要 */
}
.crk-num-cell.target-dead { opacity: 0.25; filter: grayscale(1); }

/* クニトリ中央マップ */
.kunitori-main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 12px 24px;
    overflow: hidden;
}

.kunitori-main-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ku-mini-banner {
    background: linear-gradient(135deg, #d4af37, #f9c545);
    color: #2c1810;
    padding: 6px 16px;
    border-radius: 4px;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.ku-subtitle-fs {
    color: #f9c545;
    font-size: 13px;
    margin-bottom: 16px;
    font-weight: 700;
}

/* PHOENIXクニトリ風 - 各セルは丸みのあるタイル、数字が大きく鮮明に */
/* 🛠 千葉さん指示 2026-05-05: マップを画面端から端まで広く使う + 数字さらに大きく */
.kunitori-map-fs {
    position: relative;
    width: clamp(720px, 88vh, 1200px);
    height: clamp(480px, 62vh, 820px);
    display: block !important;
    background: radial-gradient(ellipse at center, rgba(30,20,10,0.4) 0%, transparent 70%);
}
/* 🛠 千葉さん指示 2026-05-10: 右側 TOP PLAYER 列を削除 → 地図を全幅 + 左右に伸ばしてデカく */
.kunitori-map-fs.kunitori-map-fs-large {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
}
/* 🛠 千葉さん指示 2026-05-10 (再): leftside パネル復活、main を残り全幅に */
body.play-mode .play-fs[data-game="kunitori"] {
    grid-template-columns: 220px 1fr !important;
    grid-template-areas:
        "header header"
        "leftside main"
        "footer footer" !important;
}
body.play-mode .play-fs[data-game="kunitori"] .play-fs-leftside {
    display: flex !important;
    grid-area: leftside;
}
body.play-mode .play-fs[data-game="kunitori"] .play-fs-rightspace,
body.play-mode .play-fs[data-game="kunitori"] .play-fs-side {
    display: none !important;
}
body.play-mode .play-fs[data-game="kunitori"] .play-fs-main {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    grid-area: main;
}
/* 大型レイアウト時は全 Japan セルを左にシフトして overlay の右側に空きを作る */
/* 🛠 千葉さん指示 2026-05-11: 日本列島を全体的に左へシフト (-12%)。北海道は left:64% に。
   関東 (data-area="11") は東京/神奈川分割: width 縮小 + サブセル "11_kanagawa" 追加（同じ data-area） */
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="1"]   { left: 64% !important; width: 22% !important; }
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="2"]   { left: 66% !important; width: 18% !important; }
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="3"]   { left: 64% !important; width: 9% !important; }
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="4"]   { left: 74% !important; width: 10% !important; }
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="5"]   { left: 74% !important; width: 10% !important; }
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="6"]   { left: 64% !important; width: 9% !important; }
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="7"]   { left: 50% !important; width: 13% !important; }
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="8"]   { left: 64% !important; width: 9% !important; }
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="9"]   { left: 74% !important; width: 10% !important; }
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="10"]  { left: 74% !important; width: 10% !important; }
/* 関東 = 東京 (左半分) + 神奈川 (右半分) で 2 セル。両方 data-area="11" を共有 */
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="11"]:not([data-sub])  { left: 64% !important; width: 4.5% !important; }
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="11"][data-sub="kanagawa"] {
    top: 60% !important; left: 68.5% !important; width: 4.5% !important; height: 7% !important;
}
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="13"]  { left: 50% !important; width: 13% !important; }
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="14"]  { left: 38% !important; width: 14% !important; }
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="12"]  { left: 53% !important; width: 22% !important; }
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="15"]  { left: 38% !important; width: 14% !important; }
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="16"]  { left: 24% !important; width: 13% !important; }
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="17"]  { left: 10% !important; width: 13% !important; }
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="18"]  { left: 24% !important; width: 18% !important; }
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="19"]  { left: 8% !important; width: 12% !important; }
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="20"]  { left: 8% !important; width: 12% !important; }
/* 🛠 千葉さん指示 2026-05-11: BULL の位置をランダム化。インラインstyleで top/left を上書きする
   ため、CSS のデフォは形だけ定義（位置は HTML inline style で各ゲーム毎に違う） */
.kunitori-map-fs.kunitori-map-fs-large .ku-area-fs[data-area="BULL"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    /* top/left/width/height はテンプレ側 inline style でランダム指定 */
    border-radius: 50% !important;
    border: 3px solid #ffd54f !important;
    background: radial-gradient(circle, rgba(255,213,79,0.45) 0%, rgba(180,130,40,0.85) 70%) !important;
    box-shadow: 0 0 36px rgba(255,213,79,0.7) !important;
    animation: bullishGlow 2s infinite !important;
    z-index: 3;
}
/* 🛠 千葉さん指示 2026-05-11: NOW THROWING は北海道（地図シフト後 left:64%, width:22%, 右端=86%）に
   ギリ被らないよう right:38% で停止。空きを確保 */
.kunitori-map-fs .ku-now-throwing-overlay {
    position: absolute;
    top: 1%;
    left: 0;
    right: 38%;
    z-index: 5;
    background: linear-gradient(135deg, rgba(0,0,0,0.32), rgba(20,20,40,0.28));
    border: 2px solid rgba(255,213,79,0.6);
    border-radius: 16px;
    padding: 14px 24px;
    backdrop-filter: blur(4px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.kunitori-map-fs .ku-now-throwing-overlay .ntb-throw {
    width: 56px !important;
    height: 40px !important;
    font-size: 18px !important;
}
/* 🛠 千葉さん指示 2026-05-11: TOP PLAYER 大きく + 透かす + 中央セルと被らないよう左下寄りに */
.kunitori-map-fs .ku-top-player-overlay {
    position: absolute;
    top: 35%;
    left: 0;
    z-index: 5;
    background: linear-gradient(135deg, rgba(40,20,5,0.18), rgba(20,10,0,0.14));
    border: 3px solid rgba(249,197,69,0.85);
    border-radius: 18px;
    padding: 18px 22px;
    backdrop-filter: blur(2px);
    box-shadow: 0 10px 36px rgba(0,0,0,0.5);
    min-width: 220px;
    max-width: 24%;     /* 16 セル (left:24%) と被らない */
    text-align: center;
}
.kunitori-map-fs .ku-top-player-overlay .ku-top-player-score {
    font-size: clamp(80px, 10vw, 140px) !important;
    font-weight: 900;
    color: #f9c545;
    line-height: 0.95;
    text-shadow: 0 0 36px rgba(249,197,69,0.7), 0 4px 12px rgba(0,0,0,0.6);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}
.kunitori-map-fs .ku-top-player-overlay .ku-top-player-name {
    font-size: 32px !important;
    font-weight: 900;
    color: #fff;
    margin: 4px 0 8px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

.kunitori-map-fs .ku-area-fs {
    position: absolute;
    padding: 4px 6px;
    min-height: unset;
    font-size: 11px;
    box-sizing: border-box;
    border: 2px solid rgba(255,213,79,0.55);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(120, 85, 50, 0.95), rgba(70, 50, 30, 0.92)) !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.55), inset 0 1px 2px rgba(255,213,79,0.18);
    color: #fff5dc;
    z-index: 2;
    transition: transform 0.25s, box-shadow 0.25s;
    /* 🛠 地名削除に伴い、数字をセル中央に配置 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.kunitori-map-fs .ku-area-fs:hover {
    border-color: rgba(255,213,79,0.95);
    z-index: 5;
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(0,0,0,0.7), 0 0 22px rgba(255,213,79,0.5);
}
/* 数字をより大きく目立たせる */
.kunitori-map-fs .ku-area-num-fs {
    font-size: clamp(20px, 2.4vw, 30px);
    font-weight: 900;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}
/* 地名は HTML から削除済だが、互換のため display:none で残す */
.kunitori-map-fs .ku-area-name-fs {
    display: none !important;
}

/* PHOENIX クニトリ調 - 日本列島の地理に近づけて配置（北東→南西の階段状） */

/* === 北海道（独立した大きい島・右上） === */
.kunitori-map-fs .ku-area-fs[data-area="1"] {
    top: 2%; left: 70%; width: 26%; height: 17%;
    border-radius: 14px 22px 14px 14px;
}
/* === 青森（北海道の真下、東北最北端） === */
.kunitori-map-fs .ku-area-fs[data-area="2"] {
    top: 21%; left: 73%; width: 20%; height: 7%;
    border-radius: 12px 12px 8px 8px;
}
/* === 秋田（青森の左下、日本海側） === */
.kunitori-map-fs .ku-area-fs[data-area="3"] {
    top: 30%; left: 71%; width: 10%; height: 8%;
}
/* === 岩手（青森の右下、太平洋側） === */
.kunitori-map-fs .ku-area-fs[data-area="4"] {
    top: 30%; left: 82%; width: 11%; height: 8%;
}
/* === 山形・福島 === */
.kunitori-map-fs .ku-area-fs[data-area="6"] {
    top: 40%; left: 71%; width: 10%; height: 8%;
}
/* === 宮城 === */
.kunitori-map-fs .ku-area-fs[data-area="5"] {
    top: 40%; left: 82%; width: 11%; height: 8%;
}
/* === 新潟（中部・日本海側） === */
.kunitori-map-fs .ku-area-fs[data-area="7"] {
    top: 50%; left: 56%; width: 14%; height: 8%;
}
/* === 北関東（栃木・群馬） === */
.kunitori-map-fs .ku-area-fs[data-area="8"] {
    top: 50%; left: 71%; width: 10%; height: 8%;
}
/* === 茨城 === */
.kunitori-map-fs .ku-area-fs[data-area="9"] {
    top: 50%; left: 82%; width: 11%; height: 8%;
}
/* === 長野 === */
.kunitori-map-fs .ku-area-fs[data-area="13"] {
    top: 60%; left: 56%; width: 14%; height: 7%;
}
/* === 東京・神奈川 === */
.kunitori-map-fs .ku-area-fs[data-area="11"] {
    top: 60%; left: 71%; width: 10%; height: 7%;
}
/* === 千葉（半島） === */
.kunitori-map-fs .ku-area-fs[data-area="10"] {
    top: 60%; left: 82%; width: 11%; height: 9%;
    border-radius: 8px 8px 22px 14px;
}
/* === 愛知・岐阜 === */
.kunitori-map-fs .ku-area-fs[data-area="14"] {
    top: 69%; left: 41%; width: 15%; height: 7%;
}
/* === 山梨・静岡 === */
.kunitori-map-fs .ku-area-fs[data-area="12"] {
    top: 69%; left: 57%; width: 24%; height: 7%;
}
/* === 関西東（京都・滋賀） === */
.kunitori-map-fs .ku-area-fs[data-area="15"] {
    top: 77%; left: 41%; width: 15%; height: 7%;
}
/* === 関西西（大阪・兵庫） === */
.kunitori-map-fs .ku-area-fs[data-area="16"] {
    top: 77%; left: 25%; width: 15%; height: 7%;
}
/* === 中国地方 === */
.kunitori-map-fs .ku-area-fs[data-area="17"] {
    top: 77%; left: 7%; width: 17%; height: 7%;
}
/* === 四国 === */
.kunitori-map-fs .ku-area-fs[data-area="18"] {
    top: 85%; left: 25%; width: 22%; height: 7%;
}
/* === 九州北 === */
.kunitori-map-fs .ku-area-fs[data-area="19"] {
    top: 85%; left: 4%; width: 13%; height: 7%;
}
/* === 九州南 === */
.kunitori-map-fs .ku-area-fs[data-area="20"] {
    top: 92%; left: 4%; width: 13%; height: 8%;
}
/* === 沖縄（BULL） - 右下に独立した離島、特別感 === */
.kunitori-map-fs .ku-area-fs[data-area="BULL"] {
    top: 88%; left: 76%; width: 16%; height: 12%;
    border-radius: 50% !important;
    border-color: #ffd54f !important;
    background: radial-gradient(circle, rgba(255,213,79,0.35) 0%, rgba(180,130,40,0.7) 70%) !important;
    box-shadow: 0 0 32px rgba(255,213,79,0.6) !important;
}

.ku-area-fs {
    background: linear-gradient(135deg, rgba(60, 40, 25, 0.7), rgba(80, 55, 35, 0.5));
    border: 2px solid rgba(180, 120, 60, 0.3);
    border-radius: 6px;
    padding: 6px 4px;
    text-align: center;
    color: #f5e6d3;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ku-area-fs[data-area="1"] { grid-area: hokk; }
.ku-area-fs[data-area="2"] { grid-area: aomori; }
.ku-area-fs[data-area="3"] { grid-area: akita; }
.ku-area-fs[data-area="4"] { grid-area: iwate; }
.ku-area-fs[data-area="5"] { grid-area: miyagi; }
.ku-area-fs[data-area="6"] { grid-area: yamafuku; }
.ku-area-fs[data-area="7"] { grid-area: niigata; }
.ku-area-fs[data-area="8"] { grid-area: kanto; }
.ku-area-fs[data-area="9"] { grid-area: ibara; }
.ku-area-fs[data-area="10"] { grid-area: chiba; }
.ku-area-fs[data-area="11"] { grid-area: tokyo; }
.ku-area-fs[data-area="12"] { grid-area: yamashizu; }
.ku-area-fs[data-area="13"] { grid-area: nagano; }
.ku-area-fs[data-area="14"] { grid-area: aiichi; }
.ku-area-fs[data-area="15"] { grid-area: kansaihig; }
.ku-area-fs[data-area="16"] { grid-area: kansaiwest; }
.ku-area-fs[data-area="17"] { grid-area: chugoku; }
.ku-area-fs[data-area="18"] { grid-area: shikoku; }
.ku-area-fs[data-area="19"] { grid-area: kyushuN; }
.ku-area-fs[data-area="20"] { grid-area: kyushuS; }
.ku-area-fs[data-area="BULL"] { grid-area: bull; }

.ku-area-fs.owned-p1 { background: linear-gradient(135deg, #1565c0, #1976d2); border-color: #42a5f5; color: white; box-shadow: 0 2px 12px rgba(33,150,243,0.4); }
.ku-area-fs.owned-p2 { background: linear-gradient(135deg, #c62828, #d32f2f); border-color: #ef5350; color: white; box-shadow: 0 2px 12px rgba(244,67,54,0.4); }
.ku-area-fs.owned-p3 { background: linear-gradient(135deg, #2e7d32, #388e3c); border-color: #66bb6a; color: white; box-shadow: 0 2px 12px rgba(76,175,80,0.4); }
.ku-area-fs.owned-p4 { background: linear-gradient(135deg, #ef6c00, #f57c00); border-color: #ffa726; color: white; box-shadow: 0 2px 12px rgba(255,152,0,0.4); }

.ku-area-fs[data-area="BULL"] { background: radial-gradient(circle, #d4af37, #b8860b); border-color: #f9c545; box-shadow: 0 0 16px rgba(212, 175, 55, 0.6); animation: bullishGlow 2s infinite; }

.ku-area-num-fs {
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
}

.ku-area-name-fs {
    font-size: 8px;
    opacity: 0.85;
    line-height: 1.1;
    margin-top: 2px;
}

.kunitori-leader-card {
    text-align: center;
}

.kunitori-leader-label {
    font-size: 11px;
    color: rgba(255, 213, 79, 0.7);
    letter-spacing: 0.2em;
    margin-bottom: 4px;
}

.kunitori-leader-name {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
}

.kunitori-leader-score {
    font-size: 80px;
    font-weight: 900;
    color: #f9c545;
    line-height: 1;
    text-shadow: 0 0 40px rgba(249, 197, 69, 0.5);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.kunitori-leader-areas {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    margin-top: 8px;
}

/* ============================================
   共通ダークステージテーマ（全ゲーム共通の土台）
   ============================================ */
.fx-stage {
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    color: white;
}

.fx-stage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.35);
    position: relative;
    z-index: 1;
}

.fx-tag {
    padding: 6px 14px;
    border-radius: 4px;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 0.2em;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.fx-round {
    color: rgba(255,255,255,0.8);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.1em;
}

.fx-current {
    text-align: right;
}
.fx-current-label {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.1em;
}
.fx-current-name {
    font-weight: 800;
    font-size: 15px;
}

/* 各ゲーム背景テーマ */
.fx-bg-fantasy {
    background:
        radial-gradient(ellipse at top, rgba(120, 50, 100, 0.4) 0%, transparent 60%),
        linear-gradient(180deg, #1a0033 0%, #2d0a3e 50%, #1a0033 100%);
    border: 2px solid rgba(150, 80, 180, 0.3);
}

.fx-bg-race {
    background:
        radial-gradient(ellipse at top, rgba(60, 200, 100, 0.25) 0%, transparent 60%),
        linear-gradient(180deg, #003322 0%, #006644 50%, #003322 100%);
    border: 2px solid rgba(60, 200, 100, 0.3);
}

.fx-bg-pokedex {
    background:
        radial-gradient(ellipse at top, rgba(180, 60, 90, 0.3) 0%, transparent 60%),
        linear-gradient(180deg, #1a0008 0%, #4a0a18 50%, #1a0008 100%);
    border: 2px solid rgba(220, 80, 120, 0.3);
}

.fx-bg-party {
    background:
        radial-gradient(ellipse at top, rgba(255, 180, 60, 0.4) 0%, transparent 60%),
        linear-gradient(180deg, #3d1a00 0%, #5d2c08 50%, #3d1a00 100%);
    border: 2px solid rgba(255, 180, 60, 0.4);
}

.fx-bg-rpg {
    background:
        radial-gradient(ellipse at top, rgba(80, 100, 180, 0.3) 0%, transparent 60%),
        linear-gradient(180deg, #001a3e 0%, #003366 50%, #001a3e 100%);
    border: 2px solid rgba(100, 140, 220, 0.4);
}

.fx-bg-territory {
    background:
        radial-gradient(ellipse at top, rgba(180, 60, 60, 0.3) 0%, transparent 60%),
        linear-gradient(180deg, #1a0a05 0%, #4a1a0a 50%, #1a0a05 100%);
    border: 2px solid rgba(180, 60, 60, 0.3);
}

/* ボス戦UI */
.boss-stage-body {
    padding: 32px 24px;
    position: relative;
    z-index: 1;
}

.boss-portrait {
    width: 180px;
    height: 180px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 60px rgba(255, 50, 50, 0.5),
                inset 0 0 0 4px rgba(255,255,255,0.2);
    animation: bossBreathe 3s infinite ease-in-out;
}

/* @keyframes bossBreathe は animations.css で定義済み（このファイルより後に読まれて上書きされる）*/

.boss-name {
    text-align: center;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
    text-shadow: 0 2px 8px rgba(255, 50, 50, 0.6);
}

.boss-hp-meter {
    background: rgba(0,0,0,0.5);
    height: 32px;
    border-radius: 16px;
    overflow: hidden;
    margin: 0 auto 20px;
    max-width: 480px;
    position: relative;
    border: 2px solid rgba(255, 100, 100, 0.4);
}

.boss-hp-bar {
    height: 100%;
    background: linear-gradient(90deg, #ff1744, #ff5252, #ff8a80);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 20px rgba(255, 50, 50, 0.6);
    position: relative;
}

.boss-hp-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 50%);
}

.boss-hp-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    font-size: 16px;
    letter-spacing: 0.05em;
}

.party-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.party-member {
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    transition: all 0.3s;
}

.party-member.is-active {
    background: rgba(100, 180, 255, 0.15);
    box-shadow: 0 0 16px rgba(100, 180, 255, 0.4);
}

.party-member.is-down {
    opacity: 0.4;
    filter: grayscale(0.7);
}

.party-name {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.party-hp-bar {
    background: rgba(0,0,0,0.5);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}

.party-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #66bb6a, #43a047);
    transition: width 0.4s;
}

.party-hp-fill.low { background: linear-gradient(90deg, #ff5252, #ef5350); }

.party-hp-text {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
}

.boss-event-log {
    background: rgba(0,0,0,0.4);
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 16px;
    font-weight: 600;
    text-align: center;
    border-left: 3px solid #ff5252;
}

/* レーストラックUI（すごろく・マラソン）*/
.race-track-area {
    padding: 24px;
    position: relative;
    z-index: 1;
}

.race-lane {
    background: rgba(0,0,0,0.3);
    border-radius: 999px;
    margin-bottom: 14px;
    padding: 10px 16px;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.1);
}

.race-lane.is-active {
    border-color: #ffd54f;
    box-shadow: 0 0 16px rgba(255, 213, 79, 0.4);
}

.race-lane-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.race-name {
    font-weight: 700;
    font-size: 14px;
}

.race-distance {
    font-size: 18px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.race-progress {
    background: rgba(255,255,255,0.1);
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
}

.race-progress-fill {
    height: 100%;
    border-radius: 7px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.race-progress-fill.p1 { background: linear-gradient(90deg, #1976d2, #42a5f5); }
.race-progress-fill.p2 { background: linear-gradient(90deg, #d32f2f, #ef5350); }
.race-progress-fill.p3 { background: linear-gradient(90deg, #388e3c, #66bb6a); }
.race-progress-fill.p4 { background: linear-gradient(90deg, #f57c00, #ffa726); }

.race-progress-fill::after {
    content: '🎯';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

.race-goal-marker {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: #ffd54f;
    font-weight: 800;
    font-size: 14px;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* ポケモン風モンスター */
.pokedex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    padding: 24px;
    position: relative;
    z-index: 1;
}

.poke-cell {
    background: rgba(0,0,0,0.4);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    border: 2px solid rgba(255,255,255,0.1);
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
}

.poke-cell.captured.p1 { background: linear-gradient(135deg, rgba(25, 118, 210, 0.4), rgba(66, 165, 245, 0.4)); border-color: #42a5f5; }
.poke-cell.captured.p2 { background: linear-gradient(135deg, rgba(211, 47, 47, 0.4), rgba(239, 83, 80, 0.4)); border-color: #ef5350; }
.poke-cell.captured.p3 { background: linear-gradient(135deg, rgba(56, 142, 60, 0.4), rgba(102, 187, 106, 0.4)); border-color: #66bb6a; }
.poke-cell.captured.p4 { background: linear-gradient(135deg, rgba(245, 124, 0, 0.4), rgba(255, 167, 38, 0.4)); border-color: #ffa726; }

.poke-icon {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 4px;
}

.poke-num {
    font-size: 10px;
    color: rgba(255,255,255,0.6);
    font-weight: 700;
}

.poke-count {
    font-size: 11px;
    font-weight: 800;
    margin-top: 2px;
}

/* RPG冒険進行UI（桃太郎）*/
.rpg-progress-area {
    padding: 24px;
    position: relative;
    z-index: 1;
}

.rpg-route {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-bottom: 20px;
    position: relative;
}

.rpg-route::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 12.5%;
    right: 12.5%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    z-index: 0;
}

.rpg-stop {
    text-align: center;
    position: relative;
    z-index: 1;
}

.rpg-stop-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border: 3px solid rgba(255,255,255,0.3);
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.3s;
}

.rpg-stop.is-final .rpg-stop-icon {
    background: linear-gradient(135deg, #c62828, #ef5350);
    border-color: #ff8a80;
    box-shadow: 0 0 20px rgba(255, 50, 50, 0.5);
}

.rpg-stop-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
}

.rpg-player-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 16px;
}

.rpg-player {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    border-left: 4px solid;
}

.rpg-player.p1 { border-color: #42a5f5; }
.rpg-player.p2 { border-color: #ef5350; }
.rpg-player.p3 { border-color: #66bb6a; }
.rpg-player.p4 { border-color: #ffa726; }

.rpg-player.is-active {
    background: rgba(255,255,255,0.1);
}

.rpg-player-name {
    font-weight: 700;
    font-size: 14px;
    flex: 1;
}

.rpg-player-loc {
    font-size: 12px;
    background: rgba(255,255,255,0.15);
    padding: 4px 10px;
    border-radius: 12px;
    margin-right: 10px;
}

.rpg-player-companions {
    font-size: 14px;
}

/* パーティーUI（罰ゲーム/ドリンク/質問） */
.party-stage-body {
    padding: 32px 24px;
    position: relative;
    z-index: 1;
    text-align: center;
}

.party-target-display {
    background: rgba(0,0,0,0.4);
    border: 3px dashed #ffd54f;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
}

.party-target-label {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.15em;
    margin-bottom: 8px;
}

.party-target-value {
    font-size: 64px;
    font-weight: 900;
    color: #ffd54f;
    text-shadow: 0 0 30px rgba(255, 213, 79, 0.6);
    line-height: 1;
    letter-spacing: -0.04em;
}

.party-event {
    background: linear-gradient(135deg, rgba(255, 100, 100, 0.2), rgba(255, 50, 50, 0.3));
    border-radius: 12px;
    padding: 14px;
    margin-top: 16px;
    font-weight: 700;
    border: 2px solid rgba(255, 100, 100, 0.4);
    animation: pulseGlow 1.5s infinite;
}

/* @keyframes pulseGlow は animations.css 末尾で定義済み（後勝ち）*/

.drink-mug-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.drink-mug {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    border: 2px solid rgba(255, 213, 79, 0.3);
}

.drink-mug-icon {
    font-size: 40px;
    margin-bottom: 4px;
    filter: drop-shadow(0 4px 8px rgba(255, 152, 0, 0.4));
}

.drink-mug-name { font-size: 12px; font-weight: 700; }
.drink-mug-amount {
    font-size: 22px;
    font-weight: 900;
    color: #ffb74d;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.quiz-card {
    background: linear-gradient(135deg, rgba(64, 180, 255, 0.15), rgba(100, 200, 255, 0.1));
    border: 3px solid #40c4ff;
    border-radius: 20px;
    padding: 32px 24px;
    margin: 0 auto;
    max-width: 600px;
    box-shadow: 0 0 32px rgba(64, 196, 255, 0.3);
}

.quiz-category {
    font-size: 12px;
    color: #40c4ff;
    letter-spacing: 0.15em;
    margin-bottom: 8px;
}

.quiz-target {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 16px;
}

.quiz-question {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    color: white;
}

/* KUNITORI 国盗り 専用ステージ（フェニックス本物風）*/
.ku-stage {
    background:
        radial-gradient(ellipse at top, rgba(120, 80, 40, 0.4) 0%, transparent 60%),
        linear-gradient(180deg, #2c1810 0%, #4a2818 50%, #3d2415 100%);
    border-radius: 18px;
    padding: 0;
    color: #f5e6d3;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    position: relative;
    border: 2px solid rgba(180, 120, 60, 0.3);
}

.ku-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, transparent 0, transparent 2px, rgba(180,120,60,0.03) 2px, rgba(180,120,60,0.03) 4px),
        repeating-linear-gradient(-45deg, transparent 0, transparent 2px, rgba(120,80,40,0.04) 2px, rgba(120,80,40,0.04) 4px);
    pointer-events: none;
}

.ku-stage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    border-bottom: 2px solid rgba(180, 120, 60, 0.3);
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.1));
}

.ku-tag {
    background: linear-gradient(135deg, #d4af37, #f9c545);
    color: #2c1810;
    padding: 6px 16px;
    border-radius: 4px;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.2em;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

.ku-subtitle {
    font-size: 13px;
    color: #f9c545;
    font-weight: 700;
    flex: 1;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.ku-round {
    color: #f5e6d3;
    font-weight: 800;
    letter-spacing: 0.1em;
    font-size: 14px;
}

.ku-map-area {
    padding: 24px;
    position: relative;
    z-index: 1;
}

.ku-japan-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    max-width: 640px;
    margin: 0 auto;
    /* 日本列島風配置 */
    grid-template-areas:
        ".  .  .  hokk .  .  ."
        ".  .  aomori akita iwate . ."
        ".  .  yamafuku miyagi . . ."
        ".  niigata kanto ibara chiba . ."
        ".  .  yamashizu tokyo . . ."
        ".  .  nagano aiichi . . ."
        ".  .  kansaihig kansaiwest chugoku shikoku ."
        ".  .  .  .  kyushuN kyushuS bull";
}

.ku-area-cell {
    background: linear-gradient(135deg, rgba(60, 40, 25, 0.7), rgba(80, 55, 35, 0.5));
    border: 2px solid rgba(180, 120, 60, 0.3);
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
    color: #f5e6d3;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* グリッドエリア割り当て */
.ku-area-cell[data-area="1"] { grid-area: hokk; }
.ku-area-cell[data-area="2"] { grid-area: aomori; }
.ku-area-cell[data-area="3"] { grid-area: akita; }
.ku-area-cell[data-area="4"] { grid-area: iwate; }
.ku-area-cell[data-area="5"] { grid-area: miyagi; }
.ku-area-cell[data-area="6"] { grid-area: yamafuku; }
.ku-area-cell[data-area="7"] { grid-area: niigata; }
.ku-area-cell[data-area="8"] { grid-area: kanto; }
.ku-area-cell[data-area="9"] { grid-area: ibara; }
.ku-area-cell[data-area="10"] { grid-area: chiba; }
.ku-area-cell[data-area="11"] { grid-area: tokyo; }
.ku-area-cell[data-area="12"] { grid-area: yamashizu; }
.ku-area-cell[data-area="13"] { grid-area: nagano; }
.ku-area-cell[data-area="14"] { grid-area: aiichi; }
.ku-area-cell[data-area="15"] { grid-area: kansaihig; }
.ku-area-cell[data-area="16"] { grid-area: kansaiwest; }
.ku-area-cell[data-area="17"] { grid-area: chugoku; }
.ku-area-cell[data-area="18"] { grid-area: shikoku; }
.ku-area-cell[data-area="19"] { grid-area: kyushuN; }
.ku-area-cell[data-area="20"] { grid-area: kyushuS; }
.ku-area-cell[data-area="BULL"] { grid-area: bull; }

.ku-area-cell.owned-p1 {
    background: linear-gradient(135deg, #1565c0, #1976d2);
    border-color: #42a5f5;
    box-shadow: 0 4px 16px rgba(33, 150, 243, 0.4);
    color: white;
}
.ku-area-cell.owned-p2 {
    background: linear-gradient(135deg, #c62828, #d32f2f);
    border-color: #ef5350;
    box-shadow: 0 4px 16px rgba(244, 67, 54, 0.4);
    color: white;
}
.ku-area-cell.owned-p3 {
    background: linear-gradient(135deg, #2e7d32, #388e3c);
    border-color: #66bb6a;
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.4);
    color: white;
}
.ku-area-cell.owned-p4 {
    background: linear-gradient(135deg, #ef6c00, #f57c00);
    border-color: #ffa726;
    box-shadow: 0 4px 16px rgba(255, 152, 0, 0.4);
    color: white;
}

.ku-area-cell[data-area="BULL"] {
    background: radial-gradient(circle, #d4af37, #b8860b);
    border-color: #f9c545;
    box-shadow: 0 0 24px rgba(212, 175, 55, 0.6);
    animation: bullishGlow 2s infinite ease-in-out;
}

@keyframes bullishGlow {
    0%, 100% { box-shadow: 0 0 24px rgba(212, 175, 55, 0.6); }
    50% { box-shadow: 0 0 36px rgba(212, 175, 55, 0.9); }
}

.ku-area-num {
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.ku-area-name {
    font-size: 8px;
    opacity: 0.85;
    margin-top: 4px;
    letter-spacing: 0.05em;
    line-height: 1.1;
}

.ku-players-bar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7));
    border-top: 2px solid rgba(180, 120, 60, 0.3);
    position: relative;
    z-index: 1;
}

.ku-player-bar-cell {
    padding: 12px 14px;
    text-align: center;
    border-right: 1px solid rgba(180, 120, 60, 0.2);
    transition: all 0.3s;
    position: relative;
}

.ku-player-bar-cell:last-child { border-right: none; }

.ku-player-bar-cell.is-active {
    background: rgba(255, 255, 255, 0.06);
}

.ku-player-bar-cell.is-active::before {
    content: '▶';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: #fbbc04;
    font-size: 12px;
    animation: blinkLabel 1s infinite;
}

.ku-player-color-strip {
    height: 4px;
    border-radius: 2px;
    margin-bottom: 6px;
}

.ku-player-bar-cell.p1 .ku-player-color-strip { background: linear-gradient(90deg, #1976d2, #42a5f5); }
.ku-player-bar-cell.p2 .ku-player-color-strip { background: linear-gradient(90deg, #d32f2f, #ef5350); }
.ku-player-bar-cell.p3 .ku-player-color-strip { background: linear-gradient(90deg, #388e3c, #66bb6a); }
.ku-player-bar-cell.p4 .ku-player-color-strip { background: linear-gradient(90deg, #f57c00, #ffa726); }

.ku-player-bar-name {
    font-size: 11px;
    font-weight: 700;
    color: rgba(245, 230, 211, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ku-player-bar-score {
    font-size: 28px;
    font-weight: 900;
    color: white;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.ku-player-bar-areas {
    font-size: 10px;
    color: #f9c545;
    margin-top: 2px;
    letter-spacing: 0.05em;
}

@media (max-width: 700px) {
    .ku-japan-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
            ".  hokk .  ."
            "aomori akita iwate ."
            "yamafuku miyagi . ."
            "niigata kanto ibara chiba"
            "yamashizu tokyo . ."
            "nagano aiichi . ."
            "kansaihig kansaiwest chugoku shikoku"
            ".  kyushuN kyushuS bull";
    }
    .ku-area-num { font-size: 18px; }
    .ku-area-name { font-size: 7px; }
}

/* 01 ゲーム DARTSLIVE3風 */
.dl-zero-one-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 32px;
    gap: 32px;
    position: relative;
    z-index: 1;
}

.dl-zero-one-grid.players-3,
.dl-zero-one-grid.players-4 {
    grid-template-columns: 1fr 1fr;
}

.dl-player-zo {
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 2px solid transparent;
    transition: all 0.3s;
}

.dl-player-zo.is-active {
    background: rgba(255,255,255,0.08);
    border-color: var(--pc-color, #4285f4);
    box-shadow: 0 0 24px color-mix(in srgb, var(--pc-color, #4285f4) 30%, transparent);
}

.dl-player-zo.p1 { --pc-color: #4285f4; }
.dl-player-zo.p2 { --pc-color: #ff5252; }
.dl-player-zo.p3 { --pc-color: #66bb6a; }
.dl-player-zo.p4 { --pc-color: #ffb300; }

.dl-zo-name {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 8px;
    font-weight: 700;
}

.dl-zo-score {
    font-size: 96px;
    font-weight: 900;
    line-height: 1;
    color: white;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.05em;
    text-shadow: 0 0 32px var(--pc-color, transparent);
}

.dl-zo-throws {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
}

.dl-zo-throw-slot {
    width: 60px;
    height: 36px;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,0.08);
}

.dl-zo-throw-slot.thrown {
    background: var(--pc-color, #4285f4);
    color: white;
    border-color: transparent;
}

/* ========== ダーツライブ風 プレイヤーステージ ========== */
.players-stage {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}

.players-stage[data-count="1"] { grid-template-columns: 1fr; }
.players-stage[data-count="2"] { grid-template-columns: 1fr 1fr; }
.players-stage[data-count="3"] { grid-template-columns: 1fr 1fr 1fr; }
.players-stage[data-count="4"] { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 700px) {
    .players-stage[data-count="3"],
    .players-stage[data-count="4"] {
        grid-template-columns: 1fr 1fr;
    }
}

.player-pod {
    background: white;
    border-radius: 18px;
    padding: 18px;
    border: 3px solid transparent;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.player-pod::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: var(--pod-color, #1a73e8);
}

.player-pod.p1 { --pod-color: #1a73e8; --pod-grad: linear-gradient(135deg, #1a73e8, #4285f4); }
.player-pod.p2 { --pod-color: #c5221f; --pod-grad: linear-gradient(135deg, #c5221f, #ea4335); }
.player-pod.p3 { --pod-color: #137333; --pod-grad: linear-gradient(135deg, #137333, #34a853); }
.player-pod.p4 { --pod-color: #b06000; --pod-grad: linear-gradient(135deg, #b06000, #f29900); }

.player-pod.is-active {
    border-color: var(--pod-color);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pod-color) 25%, transparent),
                0 12px 32px rgba(0,0,0,0.12);
    background: linear-gradient(180deg, white 0%, color-mix(in srgb, var(--pod-color) 5%, white) 100%);
}

.player-pod.is-active::before { height: 8px; }

.player-pod.is-leader::after {
    content: "👑";
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 24px;
    transform: rotate(8deg);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.pod-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.pod-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--pod-grad);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--pod-color) 40%, transparent);
}

.pod-info { flex: 1; min-width: 0; }
.pod-name {
    font-size: 18px;
    font-weight: 800;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pod-meta {
    font-size: 11px;
    color: #5f6368;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pod-score-big {
    font-size: 56px;
    font-weight: 900;
    line-height: 1;
    color: #1a1a1a;
    text-align: center;
    margin: 12px 0 8px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    transition: color 0.3s;
}

.player-pod.is-active .pod-score-big {
    color: var(--pod-color);
}

.pod-stat-label {
    font-size: 10px;
    color: #5f6368;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2px;
}

.pod-throws {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0f1f3;
}

.throw-slot {
    background: #f7f8fa;
    border-radius: 8px;
    padding: 6px 4px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #5f6368;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
}

.throw-slot.thrown {
    background: var(--pod-grad);
    color: white;
    border-color: transparent;
    animation: throwPop 0.4s ease;
}

.throw-slot.out { background: linear-gradient(135deg, #fce8e6, #fee); color: #c5221f; }
.throw-slot.bull { background: linear-gradient(135deg, #fbbc04, #ea4335); color: white; }
.throw-slot.triple { background: linear-gradient(135deg, #ff5722, #f29900); color: white; }
.throw-slot.pending { background: #f0f1f3; color: #c0c0c0; }

@keyframes throwPop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

.pod-status-badge {
    text-align: center;
    margin-top: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--pod-color);
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.3s;
}

.player-pod.is-active .pod-status-badge {
    opacity: 1;
    animation: blinkLabel 1.4s infinite;
}

@keyframes blinkLabel {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* VS表示（2人プレイ用）*/
.vs-divider {
    text-align: center;
    font-size: 28px;
    font-weight: 900;
    color: #5f6368;
    margin: -8px 0;
    letter-spacing: 0.1em;
}

/* ========== ヒット時のフラッシュ演出 ========== */
.throw-flash-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: flashFade 1.4s ease forwards;
}

@keyframes flashFade {
    0% { opacity: 0; }
    15%, 70% { opacity: 1; }
    100% { opacity: 0; }
}

.throw-flash-text {
    font-size: 180px;
    font-weight: 900;
    color: white;
    text-shadow: 0 0 40px rgba(255,255,255,0.5),
                 0 0 80px rgba(255,200,0,0.5);
    letter-spacing: -0.05em;
    animation: zoomBounce 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    text-align: center;
}

@keyframes zoomBounce {
    0% { transform: scale(0.3) rotate(-15deg); opacity: 0; }
    25% { transform: scale(1.3) rotate(8deg); opacity: 1; }
    50% { transform: scale(1) rotate(-3deg); }
    75% { transform: scale(1.05) rotate(0); }
    100% { transform: scale(0.95) rotate(0); opacity: 0.7; }
}

.throw-flash-text.bullseye {
    background: linear-gradient(135deg, #fbbc04, #ea4335);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 60px rgba(255, 100, 100, 0.6);
}

.throw-flash-text.triple {
    background: linear-gradient(135deg, #ff5722, #f29900);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 60px rgba(255, 87, 34, 0.6);
}

.throw-flash-text.outboard {
    color: #ea4335;
    text-shadow: 0 0 40px rgba(234, 67, 53, 0.6);
    font-size: 140px;
}

.throw-flash-points {
    font-size: 50px;
    font-weight: 700;
    color: white;
    margin-top: 20px;
    opacity: 0.9;
}

.throw-flash-points.positive { color: #34a853; }
.throw-flash-points.negative { color: #ea4335; }

/* スコア +N 浮き上がり */
.score-popup {
    position: absolute;
    font-size: 32px;
    font-weight: 800;
    color: #34a853;
    pointer-events: none;
    animation: floatUp 1.5s ease-out forwards;
    text-shadow: 0 2px 8px rgba(255,255,255,0.8);
}

.score-popup.minus {
    color: #ea4335;
}

@keyframes floatUp {
    0% { transform: translateY(0); opacity: 0; }
    20% { transform: translateY(-10px); opacity: 1; }
    100% { transform: translateY(-80px); opacity: 0; }
}

/* 紙吹雪 confetti for victory */
.confetti-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 9998;
}

.confetti-piece {
    position: absolute;
    width: 12px;
    height: 12px;
    top: -20px;
    animation: confettiFall linear forwards;
}

@keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(105vh) rotate(720deg); opacity: 0.6; }
}

/* ゲーム別テーマカラー */
.theme-kunitori .play-hero { background-color: #1a4d8a; }
.theme-sugoroku .play-hero { background-color: #f29900; }
.theme-marathon .play-hero { background-color: #34a853; }
.theme-boss .play-hero { background-color: #1a1a2e; }
.theme-momotaro .play-hero { background-color: #ec407a; }
.theme-monster .play-hero { background-color: #7e57c2; }
.theme-punishment .play-hero { background-color: #ff7043; }
.theme-quiz .play-hero { background-color: #1a73e8; }
.theme-drink .play-hero { background-color: #ff9800; }
.theme-territory .play-hero { background-color: #c5221f; }
.theme-zero_one .play-hero { background-color: #5e35b1; }
.theme-cricket .play-hero { background-color: #00897b; }
.theme-kunitori_team .play-hero { background-color: #4527a0; }
.theme-relay_cricket .play-hero { background-color: #00695c; }

/* ========== レスポンシブ ========== */
@media (max-width: 600px) {
    .container { padding: 16px; }
    .page-title { font-size: 22px; }
    .game-grid { grid-template-columns: 1fr; }
    /* スマホでは横並びナビをコンパクト化（display:none を避け常時表示） */
    .app-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        font-size: 13px;
    }
    .app-nav a { padding: 6px 10px; }
    .app-header-inner {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 14px;
    }
    .play-hero-title { font-size: 24px; }
    .current-player-name { font-size: 24px; }
    .result-winner-name { font-size: 32px; }
    .dart-grid { grid-template-columns: repeat(4, 1fr); }
}

/* タブレット幅: ゲームカードを 2 列に */
@media (min-width: 601px) and (max-width: 900px) {
    .game-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ウルトラワイド: 中央寄せして暴れないように */
@media (min-width: 1921px) {
    .container { max-width: 1600px; margin-left: auto; margin-right: auto; }
}

/* キーボードフォーカスを必ず可視化（a11y） */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #ffd54f;
    outline-offset: 2px;
    border-radius: 4px;
}

/* prefers-reduced-motion: 動きを抑える設定の人にはアニメ短縮 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* 画面シェイク・閃光フラッシュ・紙吹雪は a11y 設定下では止める */
    .fx-screen-shake, .fx-flash-overlay, .firework, .strike-flash {
        animation: none !important;
        transform: none !important;
    }
}

/* スクリーンリーダー専用テキスト（視覚的には非表示） */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* スキップリンク（キーボード初動でメインへジャンプ） */
.skip-link {
    position: absolute;
    top: -40px; left: 0;
    background: #1a1a1a;
    color: #ffd54f;
    padding: 8px 16px;
    z-index: 9999;
    text-decoration: none;
    font-weight: 700;
    border-radius: 0 0 6px 0;
}
.skip-link:focus {
    top: 0;
}

/* ============================================================
   すごろく60マス周回盤面 (人生ゲーム風)
   ============================================================ */
.sugoroku-frame {
    display: grid;
    grid-template-columns: repeat(17, 1fr);
    grid-template-rows: repeat(15, 1fr);
    gap: 4px;
    padding: 10px;
    background: linear-gradient(135deg, rgba(15,30,60,0.7), rgba(30,15,45,0.7));
    border-radius: 18px;
    border: 2px solid rgba(255,213,79,0.4);
    width: 100%;
    aspect-ratio: 17/15;
    max-height: 60vh;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

/* 中央エリア: 街イラスト（Gemini生成画像）周辺マスとは余白でしっかり分離 */
.sg-center {
    grid-column: 3 / 16;
    grid-row: 3 / 14;
    background: radial-gradient(ellipse at center, rgba(40,80,140,0.5), rgba(20,30,60,0.7));
    border-radius: 14px;
    border: 2px solid rgba(255,213,79,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 60px rgba(0,0,0,0.5);
    margin: 4px;
}
.sg-center-inner {
    text-align: center;
    color: white;
    padding: 16px;
}

/* 旧 sugoroku-board セレクタ（互換のため残す） */
.sugoroku-board {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    gap: 3px;
    padding: 10px;
    background: linear-gradient(135deg, rgba(15,30,60,0.6), rgba(30,15,45,0.6));
    border-radius: 16px;
    border: 2px solid rgba(255,213,79,0.3);
}
.sg-tile {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    transition: transform 0.2s;
    min-height: 32px;
    aspect-ratio: 1 / 1;
}
.sg-tile:hover { transform: scale(1.08); z-index: 5; }
.sg-tile .sg-pos {
    position: absolute; top: 1px; left: 3px;
    font-size: 9px; color: rgba(255,255,255,0.4);
    font-weight: 700;
}
.sg-tile .sg-icon {
    font-size: 18px;
    line-height: 1;
}
.sg-tile-start { background: linear-gradient(135deg,#ffd54f,#ff9800); }
.sg-tile-start .sg-icon, .sg-tile-start .sg-pos { color: #1a1a1a; }
/* 注: 各タイル種別の animation 付与は animations.css 側で一元管理（goalPulse / firePulse は廃止） */
.sg-tile-goal { background: linear-gradient(135deg,#ffd700,#ff6f00); }
.sg-tile-river { background: linear-gradient(135deg,#1976d2,#0d47a1); }
.sg-tile-warp { background: linear-gradient(135deg,#7b1fa2,#4a148c); }
.sg-tile-bonus { background: linear-gradient(135deg,#ff9800,#e65100); }
.sg-tile-big_bonus { background: linear-gradient(135deg,#ffd700,#ff8f00); box-shadow: 0 0 12px rgba(255,215,0,0.5); }
.sg-tile-trap { background: linear-gradient(135deg,#d32f2f,#b71c1c); }
.sg-tile-fire { background: linear-gradient(135deg,#ff5722,#bf360c); }
.sg-tile-gate { background: linear-gradient(135deg,#5d4037,#3e2723); }

.sg-markers {
    position: absolute;
    bottom: 1px;
    display: flex;
    gap: 1px;
    flex-wrap: wrap;
    justify-content: center;
}
.sg-marker {
    display: inline-flex;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4285f4, #1e40af);
    color: white;
    font-size: 9px;
    font-weight: 900;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/* 🛠 千葉さん指示 2026-05-10: LED 統一カラー (RED/YELLOW/GREEN/PURPLE) */
.sg-marker.p1 { background: linear-gradient(135deg, #ef5350, #c5221f); }
.sg-marker.p2 { background: linear-gradient(135deg, #ffd54f, #f9a825); color: #1a1a1a; }
.sg-marker.p3 { background: linear-gradient(135deg, #66bb6a, #2e7d32); }
.sg-marker.p4 { background: linear-gradient(135deg, #ba68c8, #6a1b9a); }
.sg-marker.p5 { background: linear-gradient(135deg, #ec407a, #ad1457); }
.sg-marker.p6 { background: linear-gradient(135deg, #26c6da, #00838f); }
.sg-marker.p7 { background: linear-gradient(135deg, #ff9800, #e65100); }
.sg-marker.p8 { background: linear-gradient(135deg, #42a5f5, #1565c0); }

/* ============================================================
   🛠 千葉さん指示 2026-05-05 ダーツすごろくリニューアル（30マス・LED連動）
   - NOW THROWING バナー削除 / 左サイドパネル(leftside)非表示
   - 30マスのトラックを画面いっぱいに表示
   - LED 数字 3 つを赤・青・緑で表示
   ============================================================ */
/* 🛠 千葉さん指示 2026-05-06: すごろくは leftside / 右パネル両方なくして main 1列に。
   画面いっぱい+真ん中配置でゆとり持って表示する。 */
.play-fs[data-game="sugoroku"] .play-fs-leftside,
.play-fs[data-game="sugoroku"] .play-fs-rightspace,
.play-fs[data-game="sugoroku"] .play-fs-side,
/* 🛠 千葉さん指示 2026-05-10: sugoroku は NOW THROWING バナー内に全プレイヤー一覧を出すので
   下部の共通フッター（ぴったり N / 位置 N）は完全非表示にする */
.play-fs[data-game="sugoroku"] .play-fs-footer {
    display: none !important;
}
.play-fs[data-game="sugoroku"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: 56px 36px 1fr !important;
    grid-template-areas:
        "header"
        "ticker"
        "main" !important;
}
body.debug-mode .play-fs[data-game="sugoroku"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: 56px 36px 1fr !important;
    grid-template-areas:
        "header"
        "ticker"
        "main" !important;
}
.play-fs[data-game="sugoroku"] .play-fs-main {
    width: 100% !important;
    max-width: none !important;
    padding: 0 32px !important;
}

.sugoroku-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px 18px 8px;
    gap: 8px;
    box-sizing: border-box;
    overflow: hidden;
    /* 🛠 千葉さん指示 2026-05-10: 縦方向いっぱいに広げて、フッター直前まで埋める */
    height: 100%;
    min-height: 0;
}

/* 🛠 千葉さん指示 2026-05-10: 上部バナーをプレイヤー全員横並び + ROUND/投擲スロット表示に再構成 */
.sg-topbar {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 16px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(0,0,0,0.55), rgba(20,20,40,0.55));
    border: 2px solid rgba(255, 213, 79, 0.35);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.4);
}
.sg-topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.sg-topbar-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sg-topbar-round {
    font-size: 18px;
    font-weight: 900;
    color: white;
    letter-spacing: 0.06em;
}
.sg-topbar-throws {
    display: flex;
    gap: 6px;
    align-items: center;
}
.sg-topbar-throws .ntb-throw {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.6);
}
.sg-topbar-throws .ntb-throw.thrown {
    background: rgba(255,213,79,0.25);
    border-color: #ffd54f;
    color: white;
}
.sg-topbar-throws .ntb-throw.bull {
    background: linear-gradient(135deg, #fbbc04, #ea4335);
    color: white;
}
.sg-topbar-throws .ntb-throw.triple {
    background: linear-gradient(135deg, #ab47bc, #6a1b9a);
    color: white;
}
.sg-topbar-throws .ntb-throw.out {
    background: rgba(120,120,120,0.4);
    color: rgba(255,255,255,0.55);
}
.sg-throw-counter {
    margin-left: 4px;
    font-size: 11px;
    color: rgba(255,255,255,0.6);
}
.sg-throw-counter strong { font-size: 16px; color: white; }

/* プレイヤー全員横並び（右側） */
.sg-topbar-players {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-end;
    flex: 1;
}
.sg-tp-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.4);
    border: 2px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
    min-width: 140px;
}
.sg-tp-card.active {
    border-color: #ffd54f;
    background: rgba(40,30,0,0.6);
    box-shadow: 0 0 18px rgba(255,213,79,0.5);
    transform: scale(1.05);
    z-index: 2;
}
.sg-tp-av {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
    flex-shrink: 0;
}
.sg-tp-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.sg-tp-name {
    font-size: 14px;
    font-weight: 800;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}
.sg-tp-card.active .sg-tp-name { font-size: 16px; color: #ffd54f; }
.sg-tp-stats {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.85);
}
.sg-tp-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
}
.sg-tp-stat-label {
    font-size: 10px;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.05em;
}
.sg-tp-stat strong {
    font-size: 14px;
    font-weight: 900;
    color: #ffd54f;
}

.sg-topbar-leds {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.sg-leds-label {
    font-size: 10px;
    letter-spacing: 0.25em;
    color: rgba(255,255,255,0.55);
}
.sg-leds-row {
    display: flex;
    gap: 8px;
}
.sg-led-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 14px;
    border: 2px solid rgba(255,255,255,0.25);
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.sg-led-chip .sg-led-num {
    font-size: 18px;
    color: white;
    min-width: 22px;
    text-align: center;
}
.sg-led-chip .sg-led-step {
    font-size: 10px;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.85);
}
.sg-led-red {
    background: linear-gradient(135deg, #ef5350, #b71c1c);
    box-shadow: 0 0 18px rgba(239,83,80,0.6);
}
.sg-led-blue {
    background: linear-gradient(135deg, #42a5f5, #1565c0);
    box-shadow: 0 0 18px rgba(66,165,245,0.6);
}
.sg-led-green {
    background: linear-gradient(135deg, #66bb6a, #2e7d32);
    box-shadow: 0 0 18px rgba(102,187,106,0.6);
}
/* 🟣 千葉さん指示 2026-05-07: 紫 -1 凡例チップ */
.sg-led-purple {
    background: linear-gradient(135deg, #ab47bc, #6a1b9a);
    box-shadow: 0 0 18px rgba(186,104,200,0.6);
}
/* 凡例チップは数字を持たないシンプル版（+1 / +2 / +3 / -1 だけ） */
.sg-led-chip:not(:has(.sg-led-num)) {
    padding: 8px 18px;
}
.sg-led-chip:not(:has(.sg-led-num)) .sg-led-step {
    font-size: 18px !important;
    color: white !important;
    font-weight: 900;
    letter-spacing: 0.04em;
}

/* 直近イベント */
.sg-event-banner {
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(255,213,79,0.22), rgba(255,152,0,0.22));
    border: 2px solid #ffd54f;
    border-radius: 12px;
    font-weight: 800;
    font-size: 15px;
    text-align: center;
    color: white;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    animation: pulseGlow 1.4s infinite;
}

/* 30マストラック: 16列 × 2行 で折り返す。1列目は START、最終は GOAL */
.sg-track-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.sg-track {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 6px;
    width: 100%;
    max-width: 1500px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(15,30,60,0.7), rgba(30,15,45,0.7));
    border-radius: 18px;
    border: 2px solid rgba(255,213,79,0.4);
    box-shadow: 0 8px 32px rgba(0,0,0,0.55);
}
/* 🛠 千葉さん指示 2026-05-10: max-height を撤廃。フッター直前まで盤面を広げて
   画面の使えるスペース全体を使う。中央画像も「箱の中」に contain で収める（見切れ禁止）。
   注意: cells に aspect-ratio:1/1 が乗っているので、グリッドは width と height の
   両方が「13列×5行の正方セル」を作れる大きさじゃないとオーバーフロー or スカスカに
   なる。ここでは aspect-ratio を 13/5 に揃えて常に正方セルが収まるようにする。 */
.sg-track-perimeter {
    grid-template-columns: repeat(13, 1fr) !important;
    grid-template-rows: repeat(5, 1fr) !important;
    width: 100% !important;
    max-width: 1600px !important;
    /* 🛠 千葉さん指示 2026-05-10: aspect-ratio は緩めにして、画面の余りスペースを
       埋めるよう height: 100% を併用する。cells 側の aspect-ratio は別 rule で外す。 */
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    gap: 8px !important;
    padding: 12px !important;
    box-sizing: border-box;
}
/* 外周レイアウト時の wrap: フッターまでギリギリで埋まるよう max-height 撤廃 */
.play-fs[data-game="sugoroku"] .sg-track-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    /* max-height 撤廃。width にも上限を設けて、縦長画面でグリッドが画面高さに
       収まりきらない場合は width を縮めて高さを下げる。 */
    overflow: hidden;
    padding: 4px 0;
    align-items: center !important;
    justify-content: center !important;
}
/* 🛠 千葉さん指示 2026-05-10: cells の aspect-ratio:1/1 を track 配下では外す。
   外すことで、track が height:100% で広がっても cells がオーバーフローせず、
   セルが縦長にストレッチして空白を埋める。 */
.play-fs[data-game="sugoroku"] .sg-cell {
    aspect-ratio: auto !important;
    min-height: 0;
    min-width: 0;
}
/* 中央の背景アート: contain で「箱の中」に収める（見切れ防止）。
   背景は半透明の暗色で、画像が小さいときも違和感が出ないようにする。 */
.sg-center-art {
    background-image: url('/assets/images/sugoroku_center.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(20, 30, 50, 0.55);
    border-radius: 14px;
    box-shadow: inset 0 0 24px rgba(0,0,0,0.5);
    z-index: 0;
    /* 中央セル間の隙間にゴミが見えないよう、グリッド余白を埋める */
    margin: -2px;
}
.sg-cell {
    aspect-ratio: 1 / 1;
    /* 🛠 千葉さん指示 2026-05-09: 半透明だと背景が透けてカオスに見えるので
       濃紺寄りの不透明色＋金色寄りボーダーで境界をくっきりさせる */
    background: rgba(20,30,50,0.78);
    border: 2px solid rgba(255,213,79,0.55);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    color: rgba(255,255,255,0.95);
    font-weight: 800;
    font-size: 16px;
    transition: transform 0.18s, box-shadow 0.18s;
    min-height: 0;
    /* 🛠 千葉さん指示 2026-05-10: 中央背景（緑系）と同化しないよう、セル自体に drop-shadow を付ける */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.sg-cell:hover { transform: scale(1.06); z-index: 4; }
/* 🛠 千葉さん指示 2026-05-10: 数字のあるセル（START/GOAL以外）に半透明の暗色 backdrop を入れて
   背景の緑系と同化しないようにする */
.sg-cell:not(.sg-cell-start):not(.sg-cell-goal) {
    background: linear-gradient(135deg, rgba(15,22,40,0.88), rgba(28,18,50,0.85));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.5);
}
.sg-cell-num {
    font-size: clamp(13px, 2.2vw, 20px);
    font-weight: 900;
    color: white;
    /* 🛠 千葉さん指示 2026-05-10: 黒縁取り text-shadow + drop-shadow でどんな背景色でも浮かぶように */
    text-shadow:
        -2px -2px 0 #000,
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
         0    2px 6px rgba(0,0,0,0.95);
    letter-spacing: 0.02em;
    /* 上寄せにして、下に sg-cell-pieces の余地を残す */
    position: absolute;
    top: 4px;
    line-height: 1;
}
.sg-cell-start {
    background: linear-gradient(135deg,#ffd54f,#ff9800);
    border-color: #ffe082;
    box-shadow: 0 0 14px rgba(255,213,79,0.5);
}
.sg-cell-start .sg-cell-num { color: #1a1a1a; font-size: 22px; }
.sg-cell-goal {
    background: linear-gradient(135deg,#ffd700,#ff6f00);
    border-color: #fff176;
    box-shadow: 0 0 22px rgba(255,215,0,0.7);
    animation: goalGlow 1.6s ease-in-out infinite;
}
.sg-cell-goal .sg-cell-num { font-size: 24px; color: #1a1a1a; }
@keyframes goalGlow {
    0%, 100% { box-shadow: 0 0 18px rgba(255,215,0,0.55); }
    50%      { box-shadow: 0 0 30px rgba(255,215,0,0.95); }
}

.sg-cell-pieces {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    justify-content: center;
    /* 🛠 千葉さん指示 2026-05-10: ピースの背後に半透明黒の backdrop を入れて視認性アップ */
    padding: 1px 3px;
    border-radius: 999px;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    max-width: calc(100% - 6px);
}
.sg-piece {
    display: inline-flex;
    width: clamp(14px, 2.4vw, 22px);
    height: clamp(14px, 2.4vw, 22px);
    border-radius: 50%;
    color: white;
    font-size: clamp(9px, 1.4vw, 13px);
    font-weight: 900;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.5);
    /* 🛠 千葉さん指示 2026-05-10: 数字に黒縁＋drop-shadow でどんな背景でも浮かぶ */
    text-shadow:
        -1.5px -1.5px 0 #000,
         1.5px -1.5px 0 #000,
        -1.5px  1.5px 0 #000,
         1.5px  1.5px 0 #000;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.85));
}
/* プレイヤー色: P1=赤 / P2=黄 / P3=緑 / P4=紫（LED 風カラー指定） */
.sg-piece.p1 { background: linear-gradient(135deg, #ef5350, #b71c1c); }
.sg-piece.p2 { background: linear-gradient(135deg, #ffd54f, #f9a825); color: #1a1a1a; }
.sg-piece.p3 { background: linear-gradient(135deg, #66bb6a, #2e7d32); }
.sg-piece.p4 { background: linear-gradient(135deg, #ab47bc, #6a1b9a); }
.sg-piece.p5 { background: linear-gradient(135deg, #ec407a, #ad1457); }
.sg-piece.p6 { background: linear-gradient(135deg, #26c6da, #00838f); }
.sg-piece.p7 { background: linear-gradient(135deg, #ff9800, #e65100); }
.sg-piece.p8 { background: linear-gradient(135deg, #42a5f5, #1565c0); }

/* 下部プレイヤーカード */
.sg-players {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}
.sg-player-card {
    background: rgba(0,0,0,0.5);
    border: 2px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 10px 14px;
    transition: all 0.2s;
}
.sg-player-card.active {
    border-color: #ffd54f;
    box-shadow: 0 0 18px rgba(255,213,79,0.5);
    background: rgba(40,30,0,0.55);
}
.sg-player-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.sg-player-name {
    font-size: 14px;
    font-weight: 800;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sg-player-stats {
    display: flex;
    gap: 14px;
    align-items: baseline;
}
.sg-stat {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.sg-stat-label {
    font-size: 10px;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.55);
}
.sg-stat-val {
    font-size: 22px;
    font-weight: 900;
    color: #ffd54f;
}
.sg-stat-unit {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
}
@media (max-width: 1100px) {
    .sg-track {
        grid-template-columns: repeat(11, 1fr);
    }
    .sg-cell-num { font-size: 14px; }
}

/* BGM トグルボタン */
.bgm-btn {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
    border: 1.5px solid rgba(255, 213, 79, 0.5);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.18s;
    backdrop-filter: blur(6px);
}
.bgm-btn:hover {
    background: rgba(255, 213, 79, 0.2);
    border-color: #ffd54f;
    transform: translateY(-1px);
}
.bgm-btn.muted {
    background: rgba(80, 80, 80, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.5);
}

/* 🛠 千葉さん指示 2026-05-05: 取り消しボタンをヘッダー(BGM の左)に配置するための統一スタイル */
.play-fs-header .undo-btn {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.18s;
    backdrop-filter: blur(6px);
}
.play-fs-header .undo-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateY(-1px);
}

/* 🛠 千葉さん指示 2026-05-05: コーク（順番決め）ボタンを play 画面ヘッダーに配置するためのスタイル
   undo-btn / bgm-btn と同じ pill ボタン形式。teal カラーで cork アクセント */
.play-fs-header .cork-header-btn {
    background: rgba(0, 137, 123, 0.18);
    color: rgba(255, 255, 255, 0.95);
    border: 1.5px solid rgba(0, 200, 180, 0.6);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.18s;
    backdrop-filter: blur(6px);
}
.play-fs-header .cork-header-btn:hover {
    background: rgba(0, 200, 180, 0.32);
    border-color: rgba(0, 230, 200, 0.85);
    transform: translateY(-1px);
}
/* 狭い画面では cork ボタンのラベルを短くする */
@media (max-width: 540px) {
    .play-fs-header .cork-header-btn .cork-label-long { display: none; }
}
@media (min-width: 541px) {
    .play-fs-header .cork-header-btn .cork-label-short { display: none; }
}

/* ============================================================
   モバイル/タブレット UX 強化（2026-05-04 監査対応）
   - タッチターゲット 44x44 確保（HIG/WCAG）
   - iOS Safari ダイナミックビューポート（100dvh）対応
   - 横向き時のレイアウト崩れ防止
   - モバイルで3カラム play-fs を 1 列に折りたたみ
   - iOS タップ時のハイライト除去
   ============================================================ */

/* iOS Safari/Android で青いタップハイライトを抑える（誤タップ感を減らす） */
button, a, [role="button"], input, select, textarea {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* iOS Safari のアドレスバー伸縮対策: 100vh→100dvh
   svh をフォールバックではなく dvh を採用（最新 Safari/Chrome/Edge 対応済） */
@supports (height: 100dvh) {
    html, body { min-height: 100dvh; }
    /* .play-fs は position:fixed + inset:0 なので dvh 調整は不要（visible viewport 追従） */
    .dungeon-setup-wrap { min-height: 100dvh; }
}

/* タッチターゲット最小 44x44 確保（モバイル/タブレット幅） */
@media (max-width: 1024px) and (pointer: coarse) {
    .btn,
    .count-btn,
    .quick-hit-btn,
    .dart-btn,
    .pfs-dart-btn,
    .pfs-back,
    .bgm-btn,
    .gb-connect-btn,
    .gb-floating-btn,
    .equip-act,
    .equip-bag-item,
    .dungeon-back,
    .rules-modal-close,
    .setup-hero-rules {
        min-height: 44px;
        min-width: 44px;
    }
    /* ナビ a も 44 確保（タップ密集を回避） */
    .app-nav a { min-height: 44px; display: inline-flex; align-items: center; }
    /* dart-grid のセルも 44 担保（横スクロール防止のため幅は flexible） */
    .dart-btn { padding-top: 12px; padding-bottom: 12px; }
}

/* スマホ幅 (〜480px) — play-fs を縦積みに、ヘッダー＆フッターを薄く */
@media (max-width: 480px) {
    .play-fs {
        grid-template-rows: 52px 32px 1fr auto;
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "ticker"
            "main"
            "footer";
    }
    /* 左サイド（履歴/スタッツ）と右サイド（手打ち入力）はモバイルで隠す
       戦闘実機ではボード入力で進行するため、画面占有を避ける */
    .play-fs-leftside,
    .play-fs-side { display: none; }
    body.debug-mode .play-fs-leftside,
    body.debug-mode .play-fs-side { display: flex; }
    body.debug-mode .play-fs {
        grid-template-rows: 52px 32px 1fr auto auto;
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "ticker"
            "main"
            "side"
            "footer";
    }
    /* ヘッダー左右の文字を小さく、はみ出し防止 */
    .play-fs-header { padding: 0 10px; gap: 6px; }
    .pfs-back { font-size: 11px; padding: 8px 10px; }
    .pfs-tag { font-size: 11px; padding: 4px 10px; }
    .pfs-round { font-size: 11px; }
    /* ダンジョン敵カード: スマホ縦は 1 列、画像も縮める */
    .dgn-enemy-card { flex: 1 1 100%; max-width: 100%; padding: 12px; }
    .dgn-enemy-img { max-width: 200px; font-size: 80px; }
    .dgn-enemy-name { font-size: 18px; }
    .dgn-enemy-hp-big { font-size: 24px; }
    /* ボットターンバナーは画面幅に収める（min-width 380 を解除） */
    .dgn-bot-turn-banner { min-width: 0; max-width: calc(100vw - 24px); padding: 10px 14px; }
    /* ダンジョン setup ヒーローのルールボタンが右上で被るのを回避 */
    .setup-hero { padding-top: 56px; }
    .setup-hero-rules { top: 10px; right: 10px; }
}

/* タブレット縦 (481〜900px) — play-fs を 2 列（main + side のみ）に */
/* 🛠 千葉さん指示 2026-05-05: 右パネル縮小に合わせてタブレット版も詰める */
@media (min-width: 481px) and (max-width: 900px) {
    .play-fs {
        grid-template-columns: 1fr 200px;
        grid-template-areas:
            "header header"
            "ticker ticker"
            "main side"
            "footer footer";
    }
    /* 履歴サイドはタブレットで隠す（ティッカーで代替） */
    .play-fs-leftside { display: none; }
    body.debug-mode .play-fs-leftside { display: flex; grid-area: main; }
    /* 入力サイドは保つが横幅を削る */
    .play-fs-side { width: auto; }
}

/* 横向き（landscape）かつ低高さ（〜500px）— ヘッダー/ティッカー/フッター圧縮 */
@media (orientation: landscape) and (max-height: 500px) {
    .play-fs {
        grid-template-rows: 44px 28px 1fr 80px;
    }
    .play-fs-header { padding: 0 12px; }
    .pfs-back, .pfs-tag, .pfs-round, .bgm-btn { font-size: 11px; }
    .now-throwing-banner-big { padding: 8px 14px; margin-bottom: 4px; }
    /* ダンジョン敵カード画像縮小（HP バーを見切れさせない） */
    .dgn-enemy-img { max-width: 140px; font-size: 60px; }
    .dgn-enemy-card { padding: 10px; gap: 6px; }
    .dgn-enemy-hp-big { font-size: 22px; }
    /* フローティング BGM/ボード接続ボタンは右下のフットスペース上に */
    .gb-floating { bottom: 8px; right: 8px; }
}

/* キーボードフォーカスを暗背景でも確実に可視化 */
.play-fs a:focus-visible,
.play-fs button:focus-visible,
.dungeon-setup-wrap a:focus-visible,
.dungeon-setup-wrap button:focus-visible {
    outline: 3px solid #ffd54f;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(255, 213, 79, 0.35);
}

/* 横スクロール防止（モバイルで予期せぬはみ出しを抑える） */
@media (max-width: 700px) {
    html, body { overflow-x: hidden; }
}

/* ============================================================
   🛠 千葉さん指示 2026-05-05 フリーズ01 リニューアル
   - 公式 GranDarts ルール準拠（自分の残り > 相手チーム合計 でフリーズ）
   - 左サイドパネル / 平均ラウンド非表示（不要情報の削除）
   - 同チームをフッターで枠囲み
   - NOW THROWING の文字拡大を抑制（見切れ対策）
   ============================================================ */
.play-fs[data-game="freeze01"] .play-fs-leftside,
.play-fs[data-game="freeze01"] .play-fs-rightspace {
    display: none !important;
}
.play-fs[data-game="freeze01"] {
    grid-template-columns: 0 1fr 200px;
}
body.debug-mode .play-fs[data-game="freeze01"] {
    grid-template-columns: 0 1fr 200px;
}

/* freeze01 ステージ全体 */
.freeze01-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px 24px 12px;
    gap: 12px;
    box-sizing: border-box;
    overflow: hidden;
}

.freeze01-event {
    padding: 10px 22px;
    background: rgba(0,0,0,0.55);
    border: 2px solid #4fc3f7;
    border-radius: 12px;
    font-weight: 700;
    text-align: center;
    font-size: 15px;
    box-shadow: 0 0 24px rgba(79,195,247,0.25);
}

.freeze01-teams {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    min-height: 0;
}

.freeze01-team {
    border-radius: 18px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 0 32px rgba(0,0,0,0.3);
    border: 3px solid transparent;
    height: 100%;
    box-sizing: border-box;
}
.freeze01-team.team-a {
    background: linear-gradient(135deg, rgba(33,150,243,0.18), rgba(13,71,161,0.28));
    border-color: #4fc3f7;
}
.freeze01-team.team-b {
    background: linear-gradient(135deg, rgba(244,67,54,0.18), rgba(183,28,28,0.28));
    border-color: #ef5350;
}
.freeze01-team-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 6px;
    border-bottom: 1.5px solid rgba(255,255,255,0.18);
}
.freeze01-team-label {
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 0.08em;
}
.freeze01-team.team-a .freeze01-team-label { color: #4fc3f7; }
.freeze01-team.team-b .freeze01-team-label { color: #ef5350; }
.freeze01-team-total {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.08em;
}
.freeze01-team-total strong {
    font-size: 22px;
    color: white;
    font-variant-numeric: tabular-nums;
    margin-left: 6px;
}

.freeze01-team-players {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.freeze01-player {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(0,0,0,0.35);
    border: 2px solid rgba(255,255,255,0.08);
    transition: all 0.2s;
}
.freeze01-player.is-active {
    background: rgba(255,213,79,0.15);
    border-color: #ffd54f;
    box-shadow: 0 0 24px rgba(255,213,79,0.3);
}
.freeze01-player.is-frozen {
    background: rgba(129,212,250,0.15);
    border-color: #81d4fa;
    filter: brightness(1.2);
}
.freeze01-player-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    flex-wrap: wrap;
}
.freeze01-frozen-badge {
    background: #81d4fa;
    color: #01579b;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
}
.freeze01-active-badge {
    background: #ffd54f;
    color: #5d4037;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
}
.freeze01-player-score {
    font-size: clamp(48px, 8vw, 80px);
    font-weight: 900;
    color: white;
    line-height: 0.95;
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-shadow: 0 0 18px rgba(255,255,255,0.3);
}
.freeze01-team.team-a .freeze01-player-score { color: #4fc3f7; text-shadow: 0 0 18px rgba(79,195,247,0.45); }
.freeze01-team.team-b .freeze01-player-score { color: #ef5350; text-shadow: 0 0 18px rgba(244,67,53,0.45); }

.freeze01-rules-hint {
    padding: 8px 14px;
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    text-align: center;
}
.freeze01-turn-temp {
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
}
.freeze01-turn-temp strong {
    font-size: 18px;
    color: #ffd54f;
    margin-left: 4px;
}

/* === freeze01 専用フッター: 同チーム2人を枠で囲む === */
.play-fs-footer.freeze01-footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-flow: row !important;
    gap: 12px;
    padding: 8px 16px !important;
}
.freeze01-foot-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-radius: 14px;
    padding: 8px 10px;
    border: 3px solid transparent;
    background: rgba(0,0,0,0.3);
}
.freeze01-foot-group.team-a-group {
    border-color: rgba(79,195,247,0.6);
    box-shadow: inset 0 0 24px rgba(33,150,243,0.15), 0 0 16px rgba(79,195,247,0.2);
}
.freeze01-foot-group.team-b-group {
    border-color: rgba(239,83,80,0.6);
    box-shadow: inset 0 0 24px rgba(244,67,54,0.15), 0 0 16px rgba(239,83,80,0.2);
}
.freeze01-foot-group-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-align: center;
    padding: 4px 6px;
    border-radius: 8px;
    background: rgba(0,0,0,0.4);
}
.team-a-group .freeze01-foot-group-label { color: #4fc3f7; }
.team-b-group .freeze01-foot-group-label { color: #ef5350; }
.freeze01-foot-group-cells {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;
    gap: 4px;
    flex: 1;
}
.freeze01-foot-group-cells .pfs-foot-cell {
    border-right: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
}
.freeze01-foot-group-cells .pfs-foot-cell:last-child {
    border-right: none;
}

/* === NOW THROWING バナーの拡大率を抑制（千葉さん指示: 字が大きすぎて見切れる） === */
.play-fs[data-game="freeze01"] .now-throwing-banner-big {
    padding: 8px 14px !important;
    margin-bottom: 4px !important;
    max-width: 600px;
}
body.play-mode .play-fs[data-game="freeze01"] .now-throwing-banner-big div[style*="font-size:24px"],
body.play-mode .play-fs[data-game="freeze01"] .now-throwing-banner-big div[style*="font-size: 24px"] {
    font-size: 22px !important;
}
body.play-mode .play-fs[data-game="freeze01"] .now-throwing-banner-big div[style*="font-size:10px"],
body.play-mode .play-fs[data-game="freeze01"] .now-throwing-banner-big div[style*="font-size: 10px"] {
    font-size: 11px !important;
    letter-spacing: 0.2em !important;
}
.play-fs[data-game="freeze01"] .av-big {
    width: 40px;
    height: 40px;
    font-size: 18px;
}

/* ================================================================ */
/* 🔍 千葉さん指示 2026-05-05: ダーツを投げる位置から距離があるので、    */
/*    プレイ画面の文字・数字を大幅に拡大して視認性を上げる。              */
/*    「ホーム戻る/取り消し/ボード接続」の操作ボタンはそのまま小さくキープ */
/* ================================================================ */

/* === 左サイドパネル（履歴・スタッツ・領地状況など） === */
body.play-mode .left-section-title {
    font-size: 14px !important;        /* 10px → 14px */
    letter-spacing: 0.18em !important;
    color: rgba(255,255,255,0.75) !important;
    margin-bottom: 8px !important;
}
body.play-mode .round-history-num {
    font-size: 17px !important;        /* 11px → 17px */
    margin-bottom: 6px !important;
}
body.play-mode .round-history-num .av {
    width: 24px !important;            /* 18px → 24px */
    height: 24px !important;
    font-size: 13px !important;        /* 10px → 13px */
}
body.play-mode .rh-pill {
    font-size: 16px !important;        /* 11px → 16px */
    padding: 4px 10px !important;
    border-radius: 6px !important;
}
body.play-mode .stats-row {
    font-size: 17px !important;        /* 12px → 17px */
    padding: 6px 0 !important;
}
body.play-mode .stats-row .lbl {
    font-size: 15px !important;        /* 12px → 15px */
}
body.play-mode .stats-row .val {
    font-size: 19px !important;        /* 12px → 19px */
}

/* === ティッカー（HITS ログ） === */
body.play-mode .tk-label {
    font-size: 14px !important;        /* 10px → 14px */
    padding: 6px 14px !important;
}
body.play-mode .tk-item {
    font-size: 16px !important;        /* 11px → 16px */
    padding: 6px 16px !important;
}
body.play-mode .tk-item .seg {
    font-size: 14px !important;        /* 10px → 14px */
    padding: 3px 8px !important;
}

/* === ビッグバナー（NOW THROWING） === */
body.play-mode .now-throwing-banner-big > div > div > div:first-child,
body.play-mode .ntb-label {
    font-size: 15px !important;        /* 10px → 15px */
    letter-spacing: 0.3em !important;
}
/* NOW THROWING のサブラベル（インラインstyle 上書き） */
body.play-mode .now-throwing-banner-big div[style*="font-size:10px"],
body.play-mode .now-throwing-banner-big div[style*="font-size: 10px"] {
    font-size: 15px !important;
}
body.play-mode .ntb-name {
    font-size: 36px !important;        /* 28px → 36px */
}
/* NOW THROWING の名前（generic_play.html のインラインstyle 上書き） */
body.play-mode .now-throwing-banner-big div[style*="font-size:24px"],
body.play-mode .now-throwing-banner-big div[style*="font-size: 24px"] {
    font-size: 34px !important;
}
body.play-mode .ntb-throw {
    width: 72px !important;            /* 60px → 72px */
    height: 50px !important;           /* 40px → 50px */
    font-size: 20px !important;        /* 14px → 20px */
}
body.play-mode .av-big {
    width: 64px !important;            /* 56px → 64px */
    height: 64px !important;
    font-size: 28px !important;        /* 24px → 28px */
}
/* "1/3 投目" 等のターン進行表示 */
body.play-mode .now-throwing-banner-big div[style*="font-size:13px"] strong {
    font-size: 32px !important;
}
body.play-mode .now-throwing-banner-big div[style*="font-size:13px"] {
    font-size: 18px !important;
}

/* === ヘッダー（ROUND 数表示） === */
body.play-mode .pfs-round {
    font-size: 18px !important;        /* 旧 ~13px → 18px */
    padding: 8px 16px !important;
    font-weight: 900 !important;
}
body.play-mode .pfs-tag {
    font-size: 16px !important;        /* 旧 ~11px → 16px */
    padding: 6px 14px !important;
}
/* ヘッダー右の「領地3つ以上で…」サブテキスト */
body.play-mode .play-fs-header span[style*="font-size: 12px"],
body.play-mode .play-fs-header span[style*="font-size:12px"] {
    font-size: 16px !important;
}

/* === 右サイドパネル（現プレイヤー情報・接続状態） === */
body.play-mode .pfs-current-card .pfs-current-label,
body.play-mode .pfs-current-card .pfs-current-name {
    font-size: 17px !important;        /* 旧 10-12px → 17px */
}
body.play-mode .pfs-current-card div[style*="font-size: 18px"] {
    font-size: 22px !important;
}
body.play-mode .pfs-current-card div[style*="font-size: 10px"] {
    font-size: 14px !important;
}
/* 「ダーツを投げてください」「GranBoard 3s から…」の説明文 */
body.play-mode .pfs-input-area > div[style*="font-size: 13px"],
body.play-mode .pfs-input-area > div[style*="font-size: 11px"] {
    font-size: 16px !important;
}
/* "投擲待ち..." 等のサブステート */
body.play-mode span[style*="font-size:11px; color:rgba(255,255,255,0.3)"] {
    font-size: 15px !important;
}

/* === フッター（プレイヤー一覧） === */
body.play-mode .pfs-foot-cell {
    font-size: 16px !important;        /* 旧 ~11px → 16px */
}
body.play-mode .pfs-foot-cell > span:first-child {
    font-size: 18px !important;        /* 名前 */
}
/* 残り点・スコア大表示（フッター数字） */
body.play-mode .pfs-foot-cell > div:nth-child(2),
body.play-mode .pfs-foot-cell > div:nth-of-type(2) {
    font-size: 28px !important;        /* 旧 ~20px → 28px */
}

/* === ダンジョン: HP/EXP/敵カード === */
body.play-mode .dgn-enemy-name {
    font-size: 22px !important;        /* 旧 ~14px → 22px */
}
body.play-mode .dgn-enemy-hp-text {
    font-size: 17px !important;
}
body.play-mode .dgn-enemy-hp-big {
    font-size: 38px !important;        /* 巨大HP表示は更に大きく */
}
body.play-mode .dgn-stage-pill {
    font-size: 18px !important;
    padding: 8px 16px !important;
}
body.play-mode .dgn-skill-name { font-size: 18px !important; }
body.play-mode .dgn-skill-desc { font-size: 14px !important; }

/* === キックダウン: ガイドバッジ === */
body.play-mode span[style*="font-size: 14px"][style*="border-radius: 8px"] {
    /* 「あと10」のバッジ */
    font-size: 18px !important;
    min-width: 40px !important;
    padding: 4px 12px !important;
}

/* === ⛔ 例外: 操作ボタンは現状サイズをキープ（千葉さん指示） === */
/* HOME戻る・undo・BGM切替・GranBoard接続 など */
body.play-mode .pfs-back,
body.play-mode .undo-btn,
body.play-mode .bgm-btn,
body.play-mode .gb-floating button,
body.play-mode .gb-floating-btn,
body.play-mode #gb-connect-btn,
body.play-mode #bgm-toggle,
body.play-mode .pfs-bot-action,
body.play-mode .dgn-mock-btn,
body.play-mode .dgn-mock-numbtn {
    /* font-size を強制しない（既存のまま） */
    /* これらのボタンはラウンド中に操作しないので小さくてOK */
}
/* ↑ オーバーライド対象から外すための空ルール（無効化扱い） */

/* === input は既存通り === */
body.play-mode #hit-input {
    font-size: 18px !important;        /* 入力欄は中サイズで打ちやすく */
}

/* === 国取りマップの数字を大きく（千葉さん指示 2026-05-05）=== */
/* 🛠 地名は完全削除のため display:none を維持 */
body.play-mode .kunitori-map-fs .ku-area-num-fs {
    font-size: clamp(28px, 3.2vw, 44px) !important;   /* さらに大きく: 22-32 → 28-44 */
    text-shadow: 0 2px 8px rgba(0,0,0,0.85) !important;
}
body.play-mode .kunitori-map-fs .ku-area-name-fs {
    display: none !important;
}
/* ターン中履歴（メインビュー右の TOP PLAYER エリア）の補助テキスト */
body.play-mode div[style*="font-size:11px"][style*="TOP PLAYER"],
body.play-mode div[style*="font-size: 11px"][style*="letter-spacing"] {
    font-size: 16px !important;
}
/* 「🏴 N エリア所持」 */
body.play-mode div[style*="font-size:14px"][style*="🏴"],
body.play-mode div[style*="font-size: 14px"][style*="エリア"] {
    font-size: 18px !important;
}

/* ================================================================ */
/* 🔍 千葉さん指示 2026-05-05 第2弾: まだ小さいので文字をさらに大きく */
/* ================================================================ */
body.play-mode .left-section-title { font-size: 18px !important; letter-spacing: 0.15em !important; }
body.play-mode .round-history-num { font-size: 22px !important; }
body.play-mode .round-history-num .av { width: 32px !important; height: 32px !important; font-size: 16px !important; }
body.play-mode .rh-pill { font-size: 20px !important; padding: 6px 14px !important; }
body.play-mode .stats-row { font-size: 22px !important; padding: 8px 0 !important; }
body.play-mode .stats-row .lbl { font-size: 18px !important; }
body.play-mode .stats-row .val { font-size: 26px !important; }
body.play-mode .tk-label { font-size: 18px !important; padding: 8px 16px !important; }
body.play-mode .tk-item { font-size: 19px !important; padding: 8px 18px !important; }
body.play-mode .tk-item .seg { font-size: 17px !important; }

body.play-mode .ntb-label { font-size: 18px !important; }
body.play-mode .ntb-name { font-size: 44px !important; }
body.play-mode .now-throwing-banner-big div[style*="font-size:24px"],
body.play-mode .now-throwing-banner-big div[style*="font-size: 24px"] { font-size: 42px !important; }
body.play-mode .now-throwing-banner-big div[style*="font-size:10px"],
body.play-mode .now-throwing-banner-big div[style*="font-size: 10px"] { font-size: 18px !important; }
body.play-mode .ntb-throw { width: 84px !important; height: 60px !important; font-size: 24px !important; }
body.play-mode .av-big { width: 80px !important; height: 80px !important; font-size: 36px !important; }

body.play-mode .pfs-round { font-size: 22px !important; padding: 10px 20px !important; }
body.play-mode .pfs-tag { font-size: 20px !important; padding: 8px 18px !important; }

/* フッターのプレイヤー一覧（ホームに見られる名前+スコア）*/
body.play-mode .pfs-foot-cell { font-size: 20px !important; padding: 8px !important; }
body.play-mode .pfs-foot-cell > span:first-child { font-size: 22px !important; }
body.play-mode .pfs-foot-cell > div:nth-child(2),
body.play-mode .pfs-foot-cell > div:nth-of-type(2) { font-size: 36px !important; }

/* 国取りマップの数字をもっと大きく */
body.play-mode .kunitori-map-fs .ku-area-num-fs {
    font-size: clamp(28px, 3.4vw, 44px) !important;
}
/* TOP PLAYER 関連 */
body.play-mode div[style*="TOP PLAYER"] { font-size: 18px !important; }
body.play-mode div[style*="エリア所持"] { font-size: 22px !important; }

/* キックダウン: 「あと10」バッジ */
body.play-mode span[style*="border-radius: 8px"][style*="font-weight: 900"] {
    font-size: 22px !important;
    min-width: 48px !important;
}
/* キックダウン: TARGET / OVERペナルティ表示の説明文 */
body.play-mode div[style*="TARGET"] { font-size: 18px !important; }
body.play-mode div[style*="OVER"] { font-size: 18px !important; }

/* ================================================================ */
/* 🎨 千葉さん指示 2026-05-05: 画面と GranBoard LED でプレイヤー色を統一 */
/*    旧: 画面P1=青、LEDのP1=赤 → ズレてわかりにくい                    */
/*    新: 画面・LED 両方で P1=赤、P2=青、P3=緑、P4=橙                  */
/* ================================================================ */

/* === 国取り（kunitori）の領地色を LED と完全統一（千葉さん指示）=== */
/* LED マッピング: P1=RED, P2=YELLOW, P3=GREEN, P4=PURPLE */
.ku-area-fs.owned-p1 {
    background: linear-gradient(135deg, #c62828, #d32f2f) !important;
    border: 5px solid #ff5252 !important;
    color: white !important;
    box-shadow: 0 0 22px rgba(244,67,54,0.75) !important;
}
.ku-area-fs.owned-p2 {
    background: linear-gradient(135deg, #f9a825, #fbc02d) !important;
    border: 5px solid #ffeb3b !important;
    color: #1a1a1a !important;
    box-shadow: 0 0 22px rgba(255,235,59,0.75) !important;
}
.ku-area-fs.owned-p3 {
    background: linear-gradient(135deg, #2e7d32, #388e3c) !important;
    border: 5px solid #66bb6a !important;
    color: white !important;
    box-shadow: 0 0 22px rgba(76,175,80,0.75) !important;
}
.ku-area-fs.owned-p4 {
    background: linear-gradient(135deg, #6a1b9a, #7b1fa2) !important;
    border: 5px solid #ba68c8 !important;
    color: white !important;
    box-shadow: 0 0 22px rgba(156,39,176,0.75) !important;
}

/* 占領済み数字の白文字をはっきり影付きに */
.ku-area-fs.owned-p1 .ku-area-num-fs,
.ku-area-fs.owned-p2 .ku-area-num-fs,
.ku-area-fs.owned-p3 .ku-area-num-fs,
.ku-area-fs.owned-p4 .ku-area-num-fs {
    text-shadow: 0 2px 8px rgba(0,0,0,0.85), 0 0 16px rgba(255,255,255,0.3) !important;
}

/* === アバター（プレイヤー番号丸印）を LED 統一 === */
.av-big.p1, .pfs-current-name .av.p1, .av.p1 {
    background: linear-gradient(135deg, #c5221f, #ea4335) !important;
    --av-glow: rgba(244,67,53,0.5);
}
.av-big.p2, .pfs-current-name .av.p2, .av.p2 {
    background: linear-gradient(135deg, #f9a825, #fbc02d) !important;
    color: #1a1a1a !important;
    --av-glow: rgba(255,235,59,0.5);
}
.av-big.p3, .pfs-current-name .av.p3, .av.p3 {
    background: linear-gradient(135deg, #2e7d32, #388e3c) !important;
    --av-glow: rgba(76,175,80,0.5);
}
.av-big.p4, .pfs-current-name .av.p4, .av.p4 {
    background: linear-gradient(135deg, #6a1b9a, #7b1fa2) !important;
    --av-glow: rgba(156,39,176,0.5);
}
.av-big.p5, .pfs-current-name .av.p5, .av.p5 {
    background: linear-gradient(135deg, #ad1457, #ec407a) !important;
    --av-glow: rgba(236,64,122,0.5);
}
.av-big.p6, .pfs-current-name .av.p6, .av.p6 {
    background: linear-gradient(135deg, #00838f, #26c6da) !important;
    --av-glow: rgba(38,198,218,0.5);
}
.av-big.p7, .pfs-current-name .av.p7, .av.p7 {
    background: linear-gradient(135deg, #e65100, #ff9800) !important;
    --av-glow: rgba(255,152,0,0.5);
}
.av-big.p8, .pfs-current-name .av.p8, .av.p8 {
    background: linear-gradient(135deg, #1565c0, #42a5f5) !important;
    --av-glow: rgba(66,165,245,0.5);
}

/* === フッターのプレイヤー色も LED 統一 === */
.pfs-foot-cell.p1 { --pfc-color: #ef5350 !important; }
.pfs-foot-cell.p2 { --pfc-color: #ffd54f !important; }
.pfs-foot-cell.p3 { --pfc-color: #66bb6a !important; }
.pfs-foot-cell.p4 { --pfc-color: #ba68c8 !important; }
.pfs-foot-cell.p5 { --pfc-color: #ec407a !important; }
.pfs-foot-cell.p6 { --pfc-color: #26c6da !important; }
.pfs-foot-cell.p7 { --pfc-color: #ff9800 !important; }
.pfs-foot-cell.p8 { --pfc-color: #42a5f5 !important; }
.pfs-foot-cell.p1 .mini-av { background: linear-gradient(135deg, #c5221f, #ea4335) !important; }
.pfs-foot-cell.p2 .mini-av { background: linear-gradient(135deg, #f9a825, #fbc02d) !important; color: #1a1a1a !important; }
.pfs-foot-cell.p3 .mini-av { background: linear-gradient(135deg, #2e7d32, #388e3c) !important; }
.pfs-foot-cell.p4 .mini-av { background: linear-gradient(135deg, #6a1b9a, #7b1fa2) !important; }
.pfs-foot-cell.p5 .mini-av { background: linear-gradient(135deg, #ad1457, #ec407a) !important; }
.pfs-foot-cell.p6 .mini-av { background: linear-gradient(135deg, #00838f, #26c6da) !important; }
.pfs-foot-cell.p7 .mini-av { background: linear-gradient(135deg, #e65100, #ff9800) !important; }
.pfs-foot-cell.p8 .mini-av { background: linear-gradient(135deg, #1565c0, #42a5f5) !important; }

/* === area-cell（旧UI）も統一 === */
.area-cell.owned-p1 { border-color: #c5221f !important; background: #fce8e6 !important; }
.area-cell.owned-p2 { border-color: #f9a825 !important; background: #fff8e1 !important; }
.area-cell.owned-p3 { border-color: #2e7d32 !important; background: #e8f5e9 !important; }
.area-cell.owned-p4 { border-color: #6a1b9a !important; background: #f3e5f5 !important; }

/* === ku-area-cell（CLI 風表示）も統一 === */
.ku-area-cell.owned-p1 {
    background: linear-gradient(135deg, #c62828, #d32f2f) !important;
    border-color: #ff5252 !important;
}
.ku-area-cell.owned-p2 {
    background: linear-gradient(135deg, #f9a825, #fbc02d) !important;
    border-color: #ffeb3b !important;
    color: #1a1a1a !important;
}
.ku-area-cell.owned-p3 {
    background: linear-gradient(135deg, #2e7d32, #388e3c) !important;
    border-color: #66bb6a !important;
}
.ku-area-cell.owned-p4 {
    background: linear-gradient(135deg, #6a1b9a, #7b1fa2) !important;
    border-color: #ba68c8 !important;
}

/* ================================================================ */
/* 🎨 千葉さん指示 2026-05-10: プレイヤー色 LED 統一の総決算         */
/*    LED 実機の発色 (P1=RED, P2=YELLOW, P3=GREEN, P4=PURPLE) と    */
/*    UI 全体（フッター・スコアボード・枠など）が一致するよう、      */
/*    旧パレット（BLUE/RED/GREEN/ORANGE）を使っていた箇所を全て     */
/*    統一カラーに上書きする。                                       */
/* ================================================================ */

/* スコアカード枠線（旧 home/result 用） */
.score-card.is-current.p1 { border-color: #c5221f !important; }
.score-card.is-current.p2 { border-color: #f9a825 !important; }
.score-card.is-current.p3 { border-color: #2e7d32 !important; }
.score-card.is-current.p4 { border-color: #6a1b9a !important; }
.score-card.is-current.p5 { border-color: #ad1457 !important; }
.score-card.is-current.p6 { border-color: #00838f !important; }
.score-card.is-current.p7 { border-color: #e65100 !important; }
.score-card.is-current.p8 { border-color: #1565c0 !important; }

/* スコアアバター（背景グラデ） */
.score-avatar.p1 { background: linear-gradient(135deg, #c5221f, #ea4335) !important; }
.score-avatar.p2 { background: linear-gradient(135deg, #f9a825, #fbc02d) !important; color: #1a1a1a !important; }
.score-avatar.p3 { background: linear-gradient(135deg, #2e7d32, #388e3c) !important; }
.score-avatar.p4 { background: linear-gradient(135deg, #6a1b9a, #7b1fa2) !important; }
.score-avatar.p5 { background: linear-gradient(135deg, #ad1457, #ec407a) !important; }
.score-avatar.p6 { background: linear-gradient(135deg, #00838f, #26c6da) !important; }
.score-avatar.p7 { background: linear-gradient(135deg, #e65100, #ff9800) !important; }
.score-avatar.p8 { background: linear-gradient(135deg, #1565c0, #42a5f5) !important; }

/* プレイヤーマーカー（小さい丸印） */
.player-marker.p1 { background: #c5221f !important; }
.player-marker.p2 { background: #f9a825 !important; }
.player-marker.p3 { background: #2e7d32 !important; }
.player-marker.p4 { background: #6a1b9a !important; }
.player-marker.p5 { background: #ad1457 !important; }
.player-marker.p6 { background: #00838f !important; }
.player-marker.p7 { background: #e65100 !important; }
.player-marker.p8 { background: #1565c0 !important; }

/* カレントターン見出しバナー */
.current-turn-banner.p1 { background: linear-gradient(135deg, #c5221f 0%, #ea4335 100%) !important; }
.current-turn-banner.p2 { background: linear-gradient(135deg, #f9a825 0%, #fbc02d 100%) !important; color: #1a1a1a !important; }
.current-turn-banner.p3 { background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%) !important; }
.current-turn-banner.p4 { background: linear-gradient(135deg, #6a1b9a 0%, #7b1fa2 100%) !important; }
.current-turn-banner.p5 { background: linear-gradient(135deg, #ad1457 0%, #ec407a 100%) !important; }
.current-turn-banner.p6 { background: linear-gradient(135deg, #00838f 0%, #26c6da 100%) !important; }
.current-turn-banner.p7 { background: linear-gradient(135deg, #e65100 0%, #ff9800 100%) !important; }
.current-turn-banner.p8 { background: linear-gradient(135deg, #1565c0 0%, #42a5f5 100%) !important; }

/* クニトリ プレイヤーバーカード */
.ku-player-bar-cell.p1 .ku-player-color-strip { background: linear-gradient(90deg, #c5221f, #ef5350) !important; }
.ku-player-bar-cell.p2 .ku-player-color-strip { background: linear-gradient(90deg, #f9a825, #ffd54f) !important; }
.ku-player-bar-cell.p3 .ku-player-color-strip { background: linear-gradient(90deg, #2e7d32, #66bb6a) !important; }
.ku-player-bar-cell.p4 .ku-player-color-strip { background: linear-gradient(90deg, #6a1b9a, #ba68c8) !important; }
.ku-player-bar-cell.p5 .ku-player-color-strip { background: linear-gradient(90deg, #ad1457, #ec407a) !important; }
.ku-player-bar-cell.p6 .ku-player-color-strip { background: linear-gradient(90deg, #00838f, #26c6da) !important; }
.ku-player-bar-cell.p7 .ku-player-color-strip { background: linear-gradient(90deg, #e65100, #ff9800) !important; }
.ku-player-bar-cell.p8 .ku-player-color-strip { background: linear-gradient(90deg, #1565c0, #42a5f5) !important; }

/* マラソン進捗バー */
.race-progress-fill.p1 { background: linear-gradient(90deg, #c5221f, #ef5350) !important; }
.race-progress-fill.p2 { background: linear-gradient(90deg, #f9a825, #ffd54f) !important; }
.race-progress-fill.p3 { background: linear-gradient(90deg, #2e7d32, #66bb6a) !important; }
.race-progress-fill.p4 { background: linear-gradient(90deg, #6a1b9a, #ba68c8) !important; }
.race-progress-fill.p5 { background: linear-gradient(90deg, #ad1457, #ec407a) !important; }
.race-progress-fill.p6 { background: linear-gradient(90deg, #00838f, #26c6da) !important; }
.race-progress-fill.p7 { background: linear-gradient(90deg, #e65100, #ff9800) !important; }
.race-progress-fill.p8 { background: linear-gradient(90deg, #1565c0, #42a5f5) !important; }

/* ポケ占領セル（テリトリー） */
.poke-cell.captured.p1 { background: linear-gradient(135deg, rgba(197,34,31,0.4), rgba(239,83,80,0.4)) !important; border-color: #ef5350 !important; }
.poke-cell.captured.p2 { background: linear-gradient(135deg, rgba(249,168,37,0.4), rgba(255,213,79,0.4)) !important; border-color: #ffd54f !important; }
.poke-cell.captured.p3 { background: linear-gradient(135deg, rgba(46,125,50,0.4), rgba(102,187,106,0.4)) !important; border-color: #66bb6a !important; }
.poke-cell.captured.p4 { background: linear-gradient(135deg, rgba(106,27,154,0.4), rgba(186,104,200,0.4)) !important; border-color: #ba68c8 !important; }
.poke-cell.captured.p5 { background: linear-gradient(135deg, rgba(173,20,87,0.4), rgba(236,64,122,0.4)) !important; border-color: #ec407a !important; }
.poke-cell.captured.p6 { background: linear-gradient(135deg, rgba(0,131,143,0.4), rgba(38,198,218,0.4)) !important; border-color: #26c6da !important; }
.poke-cell.captured.p7 { background: linear-gradient(135deg, rgba(230,81,0,0.4), rgba(255,152,0,0.4)) !important; border-color: #ff9800 !important; }
.poke-cell.captured.p8 { background: linear-gradient(135deg, rgba(21,101,192,0.4), rgba(66,165,245,0.4)) !important; border-color: #42a5f5 !important; }

/* RPG プレイヤー枠 */
.rpg-player.p1 { border-color: #ef5350 !important; }
.rpg-player.p2 { border-color: #ffd54f !important; }
.rpg-player.p3 { border-color: #66bb6a !important; }
.rpg-player.p4 { border-color: #ba68c8 !important; }
.rpg-player.p5 { border-color: #ec407a !important; }
.rpg-player.p6 { border-color: #26c6da !important; }
.rpg-player.p7 { border-color: #ff9800 !important; }
.rpg-player.p8 { border-color: #42a5f5 !important; }

/* 01 用プレイヤー色変数 */
.dl-player-zo.p1 { --pc-color: #ef5350 !important; }
.dl-player-zo.p2 { --pc-color: #ffd54f !important; }
.dl-player-zo.p3 { --pc-color: #66bb6a !important; }
.dl-player-zo.p4 { --pc-color: #ba68c8 !important; }
.dl-player-zo.p5 { --pc-color: #ec407a !important; }
.dl-player-zo.p6 { --pc-color: #26c6da !important; }
.dl-player-zo.p7 { --pc-color: #ff9800 !important; }
.dl-player-zo.p8 { --pc-color: #42a5f5 !important; }

/* プレイヤーポッド（汎用） */
.player-pod.p1 { --pod-color: #c5221f !important; --pod-grad: linear-gradient(135deg, #c5221f, #ea4335) !important; }
.player-pod.p2 { --pod-color: #f9a825 !important; --pod-grad: linear-gradient(135deg, #f9a825, #fbc02d) !important; }
.player-pod.p3 { --pod-color: #2e7d32 !important; --pod-grad: linear-gradient(135deg, #2e7d32, #388e3c) !important; }
.player-pod.p4 { --pod-color: #6a1b9a !important; --pod-grad: linear-gradient(135deg, #6a1b9a, #7b1fa2) !important; }
.player-pod.p5 { --pod-color: #ad1457 !important; --pod-grad: linear-gradient(135deg, #ad1457, #ec407a) !important; }
.player-pod.p6 { --pod-color: #00838f !important; --pod-grad: linear-gradient(135deg, #00838f, #26c6da) !important; }
.player-pod.p7 { --pod-color: #e65100 !important; --pod-grad: linear-gradient(135deg, #e65100, #ff9800) !important; }
.player-pod.p8 { --pod-color: #1565c0 !important; --pod-grad: linear-gradient(135deg, #1565c0, #42a5f5) !important; }

/* クニトリ TOP PLAYER 帯ラベル */
.kunitori-leader-label.p1 { color: #ef5350 !important; }
.kunitori-leader-label.p2 { color: #ffd54f !important; }
.kunitori-leader-label.p3 { color: #66bb6a !important; }
.kunitori-leader-label.p4 { color: #ba68c8 !important; }
.kunitori-leader-label.p5 { color: #ec407a !important; }
.kunitori-leader-label.p6 { color: #26c6da !important; }
.kunitori-leader-label.p7 { color: #ff9800 !important; }
.kunitori-leader-label.p8 { color: #42a5f5 !important; }

/* ================================================================ */
/* 🎯 千葉さん指示 2026-05-05: クリケットのマークを見やすいサイズに    */
/* 🛠 千葉さん指示 2026-05-07: マークがそもそも見えない問題対応で再調整   */
/*    26px → 32px に拡大。空きマーク '·' も視認可能サイズに。           */
/* 🛠 千葉さん指示 2026-05-10: 32px → 48px へ更に拡大。row min-height    */
/*    56px → 80px、cell も 56 → 72px に拡大して大きいマークを収容。     */
/* ================================================================ */
.crk-mark { font-size: 48px !important; }   /* 34 → 26 → 32 → 48 */
.cricket-row { min-height: 80px; }          /* 44 → 56 → 80 (cell の min-height 72 + 余白) */

/* ================================================================ */
/* 🔍 千葉さん指示 2026-05-06: フッター数字をさらに大幅拡大           */
/* ================================================================ */
body.play-mode .play-fs-footer {
    min-height: 110px !important;        /* 70px → 110px */
}
body.play-mode .pfs-foot-cell {
    padding: 14px 16px !important;
}
body.play-mode .pfs-foot-cell .pfs-foot-name {
    font-size: 22px !important;          /* 旧 ~14px → 22px */
    margin-bottom: 4px !important;
    gap: 8px !important;
}
body.play-mode .pfs-foot-cell .pfs-foot-name .mini-av {
    width: 32px !important;
    height: 32px !important;
    font-size: 17px !important;
}
body.play-mode .pfs-foot-cell .pfs-foot-score {
    font-size: 60px !important;          /* 旧 28-36px → 60px */
    line-height: 1 !important;
    font-weight: 900 !important;
}
body.play-mode .pfs-foot-cell.is-active .pfs-foot-score {
    font-size: 72px !important;          /* 旧 38px → 72px */
}
body.play-mode .pfs-foot-cell .pfs-foot-meta {
    font-size: 20px !important;          /* 旧 10px → 20px */
    color: rgba(255,255,255,0.7) !important;
    margin-top: 4px !important;
    letter-spacing: 0.05em !important;
    font-weight: 700 !important;
}

/* === フッター: 名前と数字を中央揃えに（千葉さん指示 2026-05-06）=== */
body.play-mode .pfs-foot-cell {
    align-items: center !important;
    text-align: center !important;
}
body.play-mode .pfs-foot-cell .pfs-foot-name {
    justify-content: center !important;
    text-align: center !important;
}
body.play-mode .pfs-foot-cell .pfs-foot-score,
body.play-mode .pfs-foot-cell .pfs-foot-meta {
    text-align: center !important;
    width: 100% !important;
}

/* ================================================================ */
/* 🔍 千葉さん指示 2026-05-06: 右パネル & 上部 HITS ティッカーを完全削除  */
/*    画面を中央に集中させ、見切れも解消                              */
/* 🛠 千葉さん指示 2026-05-07: 左パネル(220px)があるとメインが右に寄って   */
/*    見える問題を修正。右側にも 220px のダミー列を置き、main を viewport */
/*    の真ん中に固定する（左パネル+右ダミーで対称な"額縁"を作る）。       */
/* ================================================================ */
body.play-mode .play-fs-side,
body.play-mode .play-fs-ticker {
    display: none !important;
}
/* rightspace は visibility:hidden で「見えないけれど場所は取る」状態にする。
   こうすると grid 列が確保されて main が viewport 中央に来る。
   sugoroku / freeze01 等のフルワイドゲームは別ルールで display:none に。 */
body.play-mode .play-fs:not([data-game="sugoroku"]):not([data-game="freeze01"]):not([data-game="kunitori"]) .play-fs-rightspace {
    display: block !important;
    visibility: hidden;
    pointer-events: none;
}

/* グリッドを再構成: 220px(左パネル) / 1fr(中央main) / 220px(右ダミー) で対称化。
   これで .play-fs-main の横方向中央が viewport 中央と一致する。
   sugoroku / freeze01 等のフルワイド派は除外（別 ruleset で 1fr を維持する）。 */
body.play-mode .play-fs:not([data-game="sugoroku"]):not([data-game="freeze01"]):not([data-game="kunitori"]) {
    /* 🛠 千葉さん指示 2026-05-07 (再): pt 単位など削除したのでフッターを 140px にスリム化。 */
    grid-template-rows: 56px 1fr 140px !important;
    grid-template-columns: 220px 1fr 220px !important;
    grid-template-areas:
        "header header header"
        "leftside main rightspace"
        "footer footer footer" !important;
    /* 🛠 千葉さん指示 2026-05-09: 中央 main の min-content がグリッドを viewport より広くしてしまい、
       フッター（特にクニトリの 2 セル目「川崎 / ベテラン」）が画面外にはみ出すバグの修正。
       overflow:hidden を play-fs に付けて、グリッドがどれだけ広がろうとも viewport で
       クリップされるようにする。これでフッターは必ず viewport 内に収まる。 */
    overflow: hidden !important;
}
/* 中央 main 列が中身（map / banner）の min-width で拡張するのを防ぐ。
   min-width:0 を入れることで grid 1fr が viewport に収まる範囲で動的に縮む。 */
body.play-mode .play-fs:not([data-game="sugoroku"]):not([data-game="freeze01"]):not([data-game="kunitori"]) .play-fs-main {
    min-width: 0 !important;
    overflow: hidden !important;
}
/* フッターは grid-area: footer footer footer なので必ず 3 列分の幅 = play-fs 全幅。
   min-width:0 を入れて中身の min-content で広がらないように。 */
body.play-mode .play-fs:not([data-game="sugoroku"]):not([data-game="freeze01"]):not([data-game="kunitori"]) .play-fs-footer {
    min-width: 0 !important;
    width: 100% !important;
}
/* debug-mode（モック入力）でも対称グリッドを維持。side は debug でも隠す。 */
body.play-mode.debug-mode .play-fs:not([data-game="sugoroku"]):not([data-game="freeze01"]):not([data-game="kunitori"]) {
    grid-template-columns: 220px 1fr 220px !important;
    grid-template-areas:
        "header header header"
        "leftside main rightspace"
        "footer footer footer" !important;
}
body.play-mode.debug-mode .play-fs-side { display: none !important; }

/* ================================================================ */
/* 🎯 千葉さん指示 2026-05-06: 国取り 隣接ボーナス候補をプレイヤー色で点滅 */
/*    未占領 + 誰かの隣接エリア → 「ここ取ればその人の隣接が伸びる」を示唆  */
/* ================================================================ */
@keyframes adjBlinkRed {
    0%, 100% { box-shadow: 0 0 0 rgba(244,67,54,0); border-color: rgba(255,255,255,0.18); }
    50%      { box-shadow: 0 0 24px rgba(244,67,54,0.85); border-color: #ff5252; }
}
@keyframes adjBlinkYellow {
    0%, 100% { box-shadow: 0 0 0 rgba(255,235,59,0); border-color: rgba(255,255,255,0.18); }
    50%      { box-shadow: 0 0 24px rgba(255,235,59,0.85); border-color: #ffeb3b; }
}
@keyframes adjBlinkGreen {
    0%, 100% { box-shadow: 0 0 0 rgba(76,175,80,0); border-color: rgba(255,255,255,0.18); }
    50%      { box-shadow: 0 0 24px rgba(76,175,80,0.85); border-color: #66bb6a; }
}
@keyframes adjBlinkPurple {
    0%, 100% { box-shadow: 0 0 0 rgba(156,39,176,0); border-color: rgba(255,255,255,0.18); }
    50%      { box-shadow: 0 0 24px rgba(156,39,176,0.85); border-color: #ba68c8; }
}
.ku-area-fs.adj-blink-p1 {
    animation: adjBlinkRed 1.4s ease-in-out infinite;
    border-width: 4px !important;
}
.ku-area-fs.adj-blink-p2 {
    animation: adjBlinkYellow 1.4s ease-in-out infinite;
    border-width: 4px !important;
}
.ku-area-fs.adj-blink-p3 {
    animation: adjBlinkGreen 1.4s ease-in-out infinite;
    border-width: 4px !important;
}
.ku-area-fs.adj-blink-p4 {
    animation: adjBlinkPurple 1.4s ease-in-out infinite;
    border-width: 4px !important;
}
/* 占領済みエリアの方が優先（owned-p1〜4 を持っている時は点滅しない） */
.ku-area-fs.owned-p1, .ku-area-fs.owned-p2,
.ku-area-fs.owned-p3, .ku-area-fs.owned-p4 {
    animation: none !important;
}

/* ================================================================ */
/* 🔍 千葉さん指示 2026-05-07 (旧): pt 単位削除に伴いフッター 140px に圧縮済み */
/*    （後段の規則で上書きされる）                                            */
/* ================================================================ */
body.play-mode .play-fs {
    grid-template-rows: 56px 1fr 140px !important;
}
body.play-mode .play-fs-footer {
    min-height: 140px !important;
}
body.play-mode .pfs-foot-cell {
    padding: 12px 14px !important;
}

/* 🛠 千葉さん指示 2026-05-05: freeze01 は leftside を使わないため main を画面いっぱい */
body.play-mode .play-fs[data-game="freeze01"] {
    grid-template-columns: 1fr !important;
    grid-template-areas:
        "header"
        "main"
        "footer" !important;
}
body.play-mode.debug-mode .play-fs[data-game="freeze01"] {
    grid-template-columns: 1fr !important;
    grid-template-areas:
        "header"
        "main"
        "footer" !important;
}
body.play-mode .play-fs[data-game="freeze01"] .play-fs-leftside {
    display: none !important;
}
body.play-mode .play-fs[data-game="freeze01"] .play-fs-main {
    width: 100% !important;
    max-width: none !important;
    padding: 0 24px !important;
}

/* ============================================================
   🎯 コーク（順番決め）モーダル
   ============================================================
   各プレイヤーが1投ずつ投げて、得点順に投擲順を並び替える機能。
   generic_setup.html / kunitori_setup.html の両方から使うので
   共通 CSS としてここに置く。
   ============================================================ */
.cork-btn {
    background: linear-gradient(135deg, #00897b 0%, #00695c 100%);
    color: white;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 12px;
    border-radius: 14px;
    width: 100%;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,137,123,0.35);
    transition: all 0.2s;
    margin-top: 6px;
}
.cork-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,137,123,0.45);
}

.cork-modal-bg {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.78);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
}
.cork-modal-bg.show { display: flex; }
.cork-modal {
    position: relative;
    background: linear-gradient(160deg, #ffffff 0%, #f5f7fa 100%);
    border-radius: 22px;
    padding: 24px 22px;
    max-width: 520px;
    width: 94%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
    border: 2px solid rgba(0,137,123,0.25);
}
.cork-modal h2 {
    margin: 0 0 8px;
    font-size: 22px;
    color: #00695c;
    text-align: center;
    letter-spacing: 0.05em;
}
.cork-modal-sub {
    text-align: center;
    color: #5f6368;
    font-size: 12px;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
}

/* 現在投擲中プレイヤーの大きな表示 */
.cork-current {
    background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%);
    border: 2.5px solid #00897b;
    border-radius: 16px;
    padding: 18px 14px;
    text-align: center;
    margin-bottom: 14px;
}
.cork-current-label {
    font-size: 11px;
    color: #00695c;
    letter-spacing: 0.2em;
    font-weight: 800;
    margin-bottom: 4px;
}
.cork-current-name {
    font-size: 26px;
    font-weight: 900;
    color: #1a237e;
    letter-spacing: 0.04em;
}
.cork-current-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: white;
    font-weight: 900;
    margin-right: 8px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    vertical-align: middle;
    font-size: 16px;
}
/* 1P=青 / 2P=赤 / 3P=緑 / 4P=黄 / 5P=紫 / 6P=シアン / 7P=ピンク / 8P=オレンジ */
.cork-current-marker.idx-1 { background: linear-gradient(135deg,#4285f4,#1e40af); }
.cork-current-marker.idx-2 { background: linear-gradient(135deg,#ea4335,#b91c1c); }
.cork-current-marker.idx-3 { background: linear-gradient(135deg,#34a853,#15803d); }
.cork-current-marker.idx-4 { background: linear-gradient(135deg,#fbbc04,#d97706); }
.cork-current-marker.idx-5 { background: linear-gradient(135deg,#9c27b0,#5e1981); }
.cork-current-marker.idx-6 { background: linear-gradient(135deg,#00acc1,#006064); }
.cork-current-marker.idx-7 { background: linear-gradient(135deg,#e91e63,#880e4f); }
.cork-current-marker.idx-8 { background: linear-gradient(135deg,#ff5722,#bf360c); }

.cork-progress {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin: 10px 0 14px;
    flex-wrap: wrap;
}
.cork-progress-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #cfd8dc;
    transition: all 0.2s;
}
.cork-progress-dot.done { background: #00897b; box-shadow: 0 0 8px rgba(0,137,123,0.5); }
.cork-progress-dot.current { background: #ff9800; transform: scale(1.3); animation: corkPulse 1s ease-in-out infinite; }
@keyframes corkPulse { 0%,100% { transform: scale(1.3); } 50% { transform: scale(1.55); } }

/* 直前の投擲スコア大表示 */
.cork-last-score {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border: 2px dashed #ff9800;
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    margin-bottom: 14px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.cork-last-score.empty { opacity: 0.5; }
.cork-last-score .seg-label { font-size: 13px; color: #5f6368; font-weight: 700; }
.cork-last-score .seg-value {
    font-size: 26px;
    font-weight: 900;
    color: #e65100;
    letter-spacing: 0.05em;
}

/* クイック入力ボタン */
.cork-quick-input { margin-bottom: 14px; }
.cork-quick-title {
    font-size: 11px;
    color: #5f6368;
    letter-spacing: 0.15em;
    font-weight: 700;
    margin-bottom: 6px;
}
.cork-quick-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}
.cork-quick-btn {
    border: 1.5px solid #cfd8dc;
    background: white;
    border-radius: 8px;
    padding: 8px 4px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.12s;
    color: #37474f;
}
.cork-quick-btn:hover {
    background: #e0f7fa;
    border-color: #00897b;
    transform: translateY(-1px);
}
.cork-quick-btn.special {
    background: linear-gradient(135deg, #fff8e1, #ffe082);
    border-color: #ffc107;
    color: #e65100;
}
.cork-quick-btn.bull {
    background: linear-gradient(135deg, #ffebee, #ef9a9a);
    border-color: #e53935;
    color: #b71c1c;
}
.cork-quick-btn.miss {
    background: linear-gradient(135deg, #eceff1, #cfd8dc);
    border-color: #607d8b;
    color: #37474f;
}

/* 結果テーブル */
.cork-result-list {
    margin: 8px 0 12px;
    padding: 0;
    list-style: none;
}
.cork-result-row {
    display: grid;
    grid-template-columns: 38px 36px 1fr 70px;
    align-items: center;
    gap: 10px;
    background: white;
    border: 2px solid #e8eaed;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 6px;
    font-weight: 700;
}
.cork-result-row.rank-1 { border-color: #ffc107; background: linear-gradient(135deg,#fffde7,#fff9c4); }
.cork-result-row.rank-2 { border-color: #b0bec5; background: linear-gradient(135deg,#fafafa,#eceff1); }
.cork-result-row.rank-3 { border-color: #ff8a65; background: linear-gradient(135deg,#fff3e0,#ffccbc); }
.cork-result-row .rank { font-size: 18px; font-weight: 900; text-align: center; }
.cork-result-row .marker {
    width: 32px; height: 32px; border-radius: 50%; color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.cork-result-row .marker.idx-1 { background: linear-gradient(135deg,#4285f4,#1e40af); }
.cork-result-row .marker.idx-2 { background: linear-gradient(135deg,#ea4335,#b91c1c); }
.cork-result-row .marker.idx-3 { background: linear-gradient(135deg,#34a853,#15803d); }
.cork-result-row .marker.idx-4 { background: linear-gradient(135deg,#fbbc04,#d97706); }
.cork-result-row .marker.idx-5 { background: linear-gradient(135deg,#9c27b0,#5e1981); }
.cork-result-row .marker.idx-6 { background: linear-gradient(135deg,#00acc1,#006064); }
.cork-result-row .marker.idx-7 { background: linear-gradient(135deg,#e91e63,#880e4f); }
.cork-result-row .marker.idx-8 { background: linear-gradient(135deg,#ff5722,#bf360c); }
.cork-result-row .pname { font-size: 14px; color: #1a237e; }
.cork-result-row .pseg {
    text-align: right;
    font-size: 16px; font-weight: 900; color: #00695c;
}

/* 結果アクションボタン */
.cork-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}
.cork-actions.three { grid-template-columns: 1.4fr 1fr 0.7fr; }
.cork-actions button {
    border: none;
    border-radius: 12px;
    padding: 12px 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: all 0.18s;
}
.cork-actions .btn-confirm {
    background: linear-gradient(135deg,#34a853,#15803d);
    color: white;
    box-shadow: 0 4px 12px rgba(52,168,83,0.35);
}
.cork-actions .btn-confirm:hover { transform: translateY(-2px); }
.cork-actions .btn-redo {
    background: linear-gradient(135deg,#fbbc04,#f57c00);
    color: white;
    box-shadow: 0 4px 12px rgba(251,188,4,0.35);
}
.cork-actions .btn-redo:hover { transform: translateY(-2px); }
.cork-actions .btn-cancel {
    background: #eceff1;
    color: #455a64;
}
.cork-actions .btn-cancel:hover { background: #cfd8dc; }

/* 接続バッジ表示（モーダル右上） */
.cork-conn-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 11px;
    color: #5f6368;
    background: rgba(255,255,255,0.85);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #cfd8dc;
}
.cork-conn-badge.connected {
    background: rgba(0,137,123,0.12);
    color: #00695c;
    border-color: #00897b;
}

/* ================================================================ */
/* 🛠 千葉さん指示 2026-05-07: 盤面マスの色背景は廃止。              */
/*    マスは中立色（白半透明）に統一し、ここに「1回休み」「+2マス進む」 */
/*    等のイベントテキストを後で書く。色は LED 配色チップ専用に。       */
/* ================================================================ */
/* (旧 sg-tile-red/blue/green/purple のセル背景塗りは削除済み) */

/* 外周レイアウト時はゲーム別 grid-template-columns 上書きを無効化 */
.play-fs[data-game="sugoroku"] .sg-track-perimeter {
    grid-template-columns: repeat(13, 1fr) !important;
    grid-template-rows: repeat(5, 1fr) !important;
    gap: 8px !important;
    padding: 16px !important;
}
.play-fs[data-game="sugoroku"] .sg-cell {
    aspect-ratio: 1 / 1 !important;
    min-height: auto !important;
}

/* 中央配置 + 画面いっぱい */
.play-fs[data-game="sugoroku"] .sg-track-wrap {
    width: 100% !important;
    max-width: 1700px !important;
    margin: 0 auto !important;
}

/* ================================================================ */
/* 🔍 千葉さん指示 2026-05-06: フッター見切れ完全解消 + 全体を上に詰める */
/* ================================================================ */
/* フッターの高さをさらに拡大 + is-active scale を抑制（見切れ原因） */
body.play-mode .play-fs {
    grid-template-rows: 56px 1fr 200px !important;  /* footer 160→200px */
}
body.play-mode .play-fs-footer {
    min-height: 200px !important;
    padding-bottom: 24px !important;
    align-items: stretch !important;
}
body.play-mode .pfs-foot-cell {
    padding: 22px 16px 32px !important;  /* 下の余白を更に増やす */
}
/* is-active の scale で上下が切れていたので scale を取り除く */
body.play-mode .pfs-foot-cell.is-active {
    transform: none !important;
}
body.play-mode .pfs-foot-cell.is-active .pfs-foot-score {
    font-size: 76px !important;  /* 拡大はサイズで表現（scale ではなく） */
}

/* main を上に詰める（中央揃えの代わりに上寄せ） */
body.play-mode .play-fs-main {
    justify-content: flex-start !important;
}

/* 各ゲームのインラインヘルプ説明文を非表示（千葉さん指示）*/
body.play-mode .freeze01-rules-hint,
body.play-mode .freeze01-turn-temp,
body.play-mode div[class*="rules-hint"],
body.play-mode div[class*="-help"]:not(.app-header *),
body.play-mode div[style*="💡"][style*="font-size: 12px"] {
    display: none !important;
}

/* 🟣 千葉さん指示 2026-05-06: 紫LEDチップを追加（タイル効果 -1 と統一） */
.sg-led-purple {
    background: linear-gradient(135deg, #7b1fa2, #4a148c);
    box-shadow: 0 0 18px rgba(156,39,176,0.6);
}
/* 🟣 千葉さん指示 2026-05-07: 紫は色だけで意味を伝える（テキストなし）*/
.sg-led-summary {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-block !important;
}
.sg-led-summary .sg-led-num,
.sg-led-summary .sg-led-step {
    display: none !important;
}

/* ================================================================ */
/* 🔍 千葉さん指示 2026-05-07 (再): フッターの pt 単位を削除したので       */
/*    高さを 140px までスリム化、フォントサイズも控えめに（普通のサイズ）  */
/* ================================================================ */
body.play-mode .play-fs {
    grid-template-rows: 56px 1fr 140px !important;
}
body.play-mode .play-fs-footer {
    min-height: 140px !important;
    padding-bottom: 8px !important;
    align-items: center !important;
}
body.play-mode .pfs-foot-cell {
    padding: 12px 14px !important;
}
body.play-mode .pfs-foot-cell .pfs-foot-score {
    font-size: 44px !important;
    line-height: 1.1 !important;
    padding-bottom: 0 !important;
}
body.play-mode .pfs-foot-cell.is-active .pfs-foot-score {
    font-size: 52px !important;
}
body.play-mode .pfs-foot-cell.is-active::after {
    bottom: 4px !important;
    font-size: 9px !important;
}
/* pfs-foot-meta が残っているテンプレで描画されないよう非表示 */
body.play-mode .pfs-foot-meta {
    display: none !important;
}

/* ================================================================ */
/* 🛠 千葉さん指示 2026-05-09: freeze01 フッター見切れ修正               */
/*    freeze01 はチーム枠(label+cells の2段構造)なので 140px だと       */
/*    下端のスコアが viewport を突き抜ける。220px に拡張＋余白調整。   */
/* ================================================================ */
body.play-mode .play-fs[data-game="freeze01"] {
    grid-template-rows: 56px 1fr 220px !important;
}
body.play-mode .play-fs[data-game="freeze01"] .play-fs-footer {
    min-height: 220px !important;
    padding-bottom: 12px !important;
    box-sizing: border-box !important;
}
body.play-mode .play-fs[data-game="freeze01"] .pfs-foot-cell .pfs-foot-score {
    /* 1セル内に名前＋スコアを収める。44px は 2チーム×2人で潰されると見切れる */
    font-size: 36px !important;
    line-height: 1 !important;
}
body.play-mode .play-fs[data-game="freeze01"] .pfs-foot-cell.is-active .pfs-foot-score {
    font-size: 42px !important;
}

/* ================================================================ */
/* 🛠 千葉さん指示 2026-05-09: ダンジョンフッター復活                  */
/*    .dgn-play-fs の 4 行 grid と 170px footer を維持。               */
/*    body.play-mode の generic 3行ルール (140px) で潰されていた。      */
/*    HP巨大表示・HPバー・EXPバーが収まるよう 200px に拡張。            */
/* ================================================================ */
body.play-mode .play-fs.dgn-play-fs:not([data-game="sugoroku"]):not([data-game="freeze01"]) {
    grid-template-rows: 56px 36px 1fr 200px !important;
    grid-template-columns: 220px 1fr 220px !important;
    grid-template-areas:
        "header header header"
        "ticker ticker ticker"
        "leftside main rightspace"
        "footer footer footer" !important;
}
body.play-mode .play-fs.dgn-play-fs:not([data-game="sugoroku"]):not([data-game="freeze01"]) .play-fs-footer {
    min-height: 200px !important;
    padding-bottom: 10px !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}
/* ダンジョンは pfs-foot-score を控えめにし、HP巨大表示と HPバー / EXPバーが
   全て見えるようにする（巨大スコアで footer 内が圧迫されないように） */
body.play-mode .play-fs.dgn-play-fs:not([data-game="sugoroku"]):not([data-game="freeze01"]) .pfs-foot-cell .pfs-foot-score {
    font-size: 11px !important;
    opacity: 0.55 !important;
    line-height: 1 !important;
}
body.play-mode .play-fs.dgn-play-fs:not([data-game="sugoroku"]):not([data-game="freeze01"]) .pfs-foot-cell.is-active .pfs-foot-score {
    font-size: 11px !important;
}
/* HP巨大表示と HPバー、EXPバーは確実に表示 */
body.play-mode .play-fs.dgn-play-fs:not([data-game="sugoroku"]):not([data-game="freeze01"]) .dgn-foot-hp-big,
body.play-mode .play-fs.dgn-play-fs:not([data-game="sugoroku"]):not([data-game="freeze01"]) .dgn-foot-hpbar-wrap,
body.play-mode .play-fs.dgn-play-fs:not([data-game="sugoroku"]):not([data-game="freeze01"]) .dgn-exp-bar-wrap {
    display: block !important;
}
body.play-mode .play-fs.dgn-play-fs:not([data-game="sugoroku"]):not([data-game="freeze01"]) .dgn-exp-bar-row {
    display: flex !important;
}
body.play-mode .play-fs.dgn-play-fs:not([data-game="sugoroku"]):not([data-game="freeze01"]) .pfs-foot-name {
    display: flex !important;
}