/* ===== リセット & 基本設定 ===== */
html.i18n-loading #app { visibility: hidden; }
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* Androidでviewportが揺れた瞬間に html 背景(既定:白)が見えて白フラッシュするのを防ぐ */
    background: #000;
    height: 100%;
    overscroll-behavior: none;
}

:root {
    /* 全体の文字を大きく（rem指定が多いので基準を上げる） */
    font-size: 20px;

    /* ===== デザイントークン（モノトーン + ゴールド + ビビッド差し色） ===== */
    --mono-0: #000000; /* 完全な黒 */
    --mono-1: #111111; /* 濃いグレー */
    --mono-2: #1a1a1a;
    --mono-3: #222222;
    
    /* モンドリアン・パレット（高彩度） */
    --mondrian-red: #ff0000;
    --mondrian-blue: #0000ff;
    --mondrian-yellow: #ffff00;
    --mondrian-white: #ffffff;
    --mondrian-grey: #f0f0f0;

    /* ハイセンス・カラーパレット */
    --bg-deep: #000000;
    --bg-table: #000000;
    --board-bg: var(--mondrian-white);
    --board-border: #000;
    
    /* アクセント */
    --accent-gold: #d4af37;
    --accent-gold-2: #f5d77a;
    --accent-gold-glow: rgba(212, 175, 55, 0.55);
    --accent-red: var(--mondrian-red);
    --accent-blue: var(--mondrian-blue);
    --accent-yellow: var(--mondrian-yellow);
    
    --text-primary: #ffffff;
    --text-dark: #000000;
    --text-muted: #aaaaaa;

    /* UI共通トークン - スクエア化 */
    --ui-glass: #111;
    --ui-glass-border: rgba(255, 255, 255, 0.2);
    --ui-shadow-lg: 10px 10px 0 rgba(20, 20, 20, 1);
    --ui-shadow-md: 6px 6px 0 rgba(20, 20, 20, 1);
    --ui-shadow-sm: 4px 4px 0 rgba(20, 20, 20, 1);
    --ui-border-soft: rgba(255,255,255,0.2);
    --ui-border-hard: #000;
    --ui-focus: 0 0 0 2px #fff, 0 0 0 4px var(--mondrian-yellow);
    
    /* プロパティカラー（フラット） */
    /* 高彩度（モンドリアン寄せ） */
    --color-brown: #b35a2a;      /* burnt orange/brown */
    --color-lightblue: #00b8ff;  /* vivid cyan */
    --color-pink: #ff2d8d;       /* neon magenta */
    --color-orange: #ff7a00;     /* vivid orange */
    --color-red: #ff2a2a;        /* vivid red */
    --color-yellow: #ffe600;     /* vivid yellow */
    --color-green: #00c853;      /* vivid green */
    --color-blue: #0057ff;       /* vivid blue */
    --color-railroad: #000000;   /* railroadは黒で締める */
    --color-utility: #b0b7c3;    /* utilityはクールグレー（見分け用） */

    /* レイアウト基準 */
    --base-w: 1920px;
    --base-h: 1080px;
    --header-h: 92px;
    /* ボードサイズを維持したまま、左右の余白を最大限パネルに割り当て */
    --panel-w: 420px;

    /* 余白を詰めて“画面全体に”寄せる */
    --layout-max: var(--base-w);
    --layout-gutter: 24px;
    --layout-gap: 24px;
}

/* アクセシビリティ */
*:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus);
}

/* ===== 🎮 Gamepad仮想カーソル ===== */
#gp-cursor {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 20000;
    opacity: 0;
    transition: opacity 180ms ease;
    background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.35) 30%, rgba(255,255,255,0) 60%),
        radial-gradient(circle, rgba(212,175,55,0.95) 0%, rgba(212,175,55,0.65) 35%, rgba(212,175,55,0.25) 65%, rgba(212,175,55,0.0) 100%);
    box-shadow:
        0 0 0 2px rgba(0,0,0,0.45),
        0 0 18px rgba(212,175,55,0.55);
}
#gp-cursor.visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* 例外：所持金の増減は視認性のため最低限アニメを残す */
    .player-money.money-up,
    .player-money.money-down {
        animation-duration: 700ms !important;
    }
    .player-money.money-up::after,
    .player-money.money-down::after {
        animation-duration: 900ms !important;
    }
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    background: #000;
    background-image: none; /* グラデーションも削除して完全な黒に */
    color: var(--text-primary);
    /* 絵文字を“テキスト(モノクロ)”表現に寄せる */
    font-variant-emoji: text;
    min-height: 100vh;
    /* 新しいviewport単位に対応している端末では、URLバー伸縮による“下だけ白”を避ける */
    min-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior: none;
    height: 100%;
}

/* iOS Safariは絵文字のテキスト化(FE0E/font-variant-emoji)が効かないケースがあるため、UIの絵文字はフィルタでシルエット寄せ */
.emoji-sil {
    display: inline-block;
    line-height: 1;
    /* iOS Safariでfilterが更新されない/遅延するケース対策 */
    transform: translateZ(0);
    will-change: filter;
    -webkit-filter: grayscale(1) saturate(0) brightness(0.12) contrast(2.4);
    filter: grayscale(1) saturate(0) brightness(0.12) contrast(2.4);
}
/* 銀行ステータス内の絵文字は白シルエット（基本スタイルを上書き） - 最高優先度 */
#bank-status.emoji-sil,
#bank-status .emoji-sil,
#bank-status span.emoji-sil,
.bank-status.emoji-sil,
.bank-status .emoji-sil,
.bank-status span.emoji-sil,
.left-panel #bank-status .emoji-sil,
.left-panel #bank-status span.emoji-sil,
.left-panel .bank-status .emoji-sil,
.left-panel .bank-status span.emoji-sil,
.left-panel-body #bank-status .emoji-sil,
.left-panel-body #bank-status span.emoji-sil,
.left-panel-body .bank-status .emoji-sil,
.left-panel-body .bank-status span.emoji-sil {
    -webkit-filter: grayscale(1) saturate(0) invert(1) brightness(1.35) contrast(1.2) !important;
    filter: grayscale(1) saturate(0) invert(1) brightness(1.35) contrast(1.2) !important;
    display: inline-block !important;
    line-height: 1 !important;
    transform: translateZ(0) !important;
    will-change: filter !important;
}
/* パネルヘッダー内の .emoji-sil は白シルエット（基本スタイルより先に定義して、後から上書きされるようにする） */
.panel-header .emoji-sil {
    -webkit-filter: grayscale(1) saturate(0) invert(1) brightness(1.35) contrast(1.2) !important;
    filter: grayscale(1) saturate(0) invert(1) brightness(1.35) contrast(1.2) !important;
}

/* ヘッダーは黒背景が基本なので、未選択時でも見えるよう「白シルエット」にする */
.header .emoji-sil {
    /* stickyヘッダー内でベースfilterが残ることがあるため強制 */
    -webkit-filter: grayscale(1) saturate(0) invert(1) brightness(1.35) contrast(1.15) !important;
    filter: grayscale(1) saturate(0) invert(1) brightness(1.35) contrast(1.15) !important;
}
/* ヘッダーボタン:hover は白背景/黒文字になるので、絵文字は黒シルエットに戻してコントラストを維持 */
.header .reset-btn:hover .emoji-sil,
.header .reset-btn:active .emoji-sil,
.header .reset-btn:focus-visible .emoji-sil {
    -webkit-filter: grayscale(1) saturate(0) brightness(0.12) contrast(2.4) !important;
    filter: grayscale(1) saturate(0) brightness(0.12) contrast(2.4) !important;
}

/* 左右パネルのヘッダー（🗣️ 実況 / 🏆 プレイヤー）は黒背景なので、絵文字を白シルエットにする
   .emoji-sil クラスが付いている場合を確実に白にする（特異性を最大限に上げる）
   すべてのパネルヘッダー内の .emoji-sil を対象にする */
.panel-header .emoji-sil,
.panel-header span .emoji-sil,
.panel-header .panel-title .emoji-sil,
.left-panel .panel-header .emoji-sil,
.left-panel .panel-header span .emoji-sil,
.side-panel .panel-header .emoji-sil,
.side-panel .panel-header .panel-title .emoji-sil,
.panel-header > span .emoji-sil,
.left-panel .panel-header > span .emoji-sil,
.side-panel .panel-header .panel-title .emoji-sil {
    /* 基本スタイルの黒シルエット設定を確実に上書きして白シルエットにする */
    -webkit-filter: grayscale(1) saturate(0) invert(1) brightness(1.35) contrast(1.2) !important;
    filter: grayscale(1) saturate(0) invert(1) brightness(1.35) contrast(1.2) !important;
    display: inline-block !important;
    line-height: 1 !important;
    transform: translateZ(0) !important; /* GPU合成を強制 */
    will-change: filter !important;
}
/* パネルヘッダーはテキストを反転させない（絵文字だけ .emoji-sil で白シルエット化する） */
.panel-header .panel-text {
    color: #fff !important;
}

/* ヘッダーのボタンは「未選択でも選択時でも白地に黒い絵文字」で固定する
   - 背景/文字色は常に白背景＋黒文字に固定
   - 選択(hover/focus/active)は“移動/影”だけで表現（色は変えない）
   - 絵文字は常に黒シルエット固定 */
.header-controls .reset-btn,
.header-controls .reset-btn:hover,
.header-controls .reset-btn:active,
.header-controls .reset-btn:focus-visible {
    background: #fff !important;
    color: #000 !important;
    border-color: #000 !important;
}
.header-controls .reset-btn .emoji-sil {
    -webkit-filter: grayscale(1) saturate(0) brightness(0.12) contrast(2.4) !important;
    filter: grayscale(1) saturate(0) brightness(0.12) contrast(2.4) !important;
}

/* ===== スマホ: デスクトップ固定レイアウトを維持しつつ最大表示（自動スケール） ===== */
body.auto-scale {
    /* 1920x1080の固定レイアウトを画面中央に表示 */
    align-items: center;
}

body.auto-scale #app {
    /* 基準解像度（デザイン解像度） */
    width: var(--base-w);
    height: var(--base-h);

    /* レイアウトは固定し、見た目だけ等比スケールして中央に配置 */
    position: fixed;
    left: 50%;
    top: 50%;
    transform-origin: center center;
    /* 念のため「縦横別スケール」を使わず、等比スケールをGPU合成で固定 */
    transform: translate3d(-50%, -50%, 0) scale3d(var(--ui-scale, 1), var(--ui-scale, 1), 1);

    overflow: hidden;
    will-change: transform;
    backface-visibility: hidden;

    display: flex;
    flex-direction: column;
}

/* ===== ヘッダー ===== */
.header {
    background: #000;
    backdrop-filter: none;
    height: var(--header-h);
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid var(--mondrian-yellow); /* 黄色のラインで区切る */
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: none;
    width: 100%;
    margin: 0;
}

.header::after {
    display: none;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ヘッダー上では少しだけコンパクトに */
.header-controls .reset-btn {
    padding: 0.45rem 0.8rem;
    font-size: 0.9rem;
}

.header-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(135deg, #d4af37 0%, #f5d77a 50%, #d4af37 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

.logo-icon {
    font-size: 2rem;
    filter: drop-shadow(0 0 15px var(--accent-gold-glow));
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.turn-indicator {
    background: #000;
    padding: 0.5rem 1.5rem;
    border-radius: 0; /* 角丸なし */
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border: 2px solid var(--mondrian-white);
    box-shadow: 4px 4px 0 var(--mondrian-grey);
}

.turn-name {
    font-weight: 700;
    color: var(--accent-gold);
    text-shadow: 0 0 10px var(--accent-gold-glow);
}

/* ===== ゲームコンテナ ===== */
.game-container {
    flex: 1;
    display: flex;
    padding: var(--layout-gutter);
    gap: var(--layout-gap);
    max-width: var(--layout-max);
    margin: 0 auto;
    width: 100%;
    min-height: 0;
    align-items: flex-start;
    justify-content: center;

    /* #app(1080h)内で、下の余白が出ないよう高さを固定 */
    height: calc(var(--base-h) - var(--header-h));

    /* ボードと左右パネルを“詰めて”最大化（1080p枠内で計算） */
    --board-size: min(
        calc(var(--base-h) - var(--header-h) - (var(--layout-gutter) * 2)),
        calc(var(--base-w) - (var(--panel-w) * 2) - (var(--layout-gutter) * 2) - (var(--layout-gap) * 2))
    );
}

/* ===== 左パネル（実況解説） ===== */
.left-panel {
    width: var(--panel-w);
    background: #000;
    border: 4px solid var(--accent-gold);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: none;
    height: var(--board-size);
}

.left-panel-body {
    padding: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    flex: 1;              /* 下端合わせのため残り高さを占有 */
    min-height: 0;        /* flex内スクロールのため */
}

/* 左パネル内は横幅いっぱいに */
.left-panel .guide-message,
.left-panel .bank-status,
.left-panel .game-log {
    max-width: 100%;
}

/* 実況パネル（黒背景）内の絵文字は白シルエット */
.left-panel .emoji-sil,
.left-panel .guide-message .emoji-sil,
.left-panel .bank-status .emoji-sil,
.left-panel .bank-status span.emoji-sil,
.left-panel .game-log .emoji-sil,
.left-panel .log-entry .emoji-sil,
.left-panel-body .emoji-sil,
.left-panel-body .guide-message .emoji-sil,
.left-panel-body .bank-status .emoji-sil,
.left-panel-body .bank-status span.emoji-sil,
.left-panel-body .game-log .emoji-sil,
.left-panel-body .log-entry .emoji-sil,
.guide-message .emoji-sil,
.bank-status .emoji-sil,
.bank-status span.emoji-sil,
#bank-status .emoji-sil,
#bank-status span.emoji-sil,
.game-log .emoji-sil,
.log-entry .emoji-sil {
    -webkit-filter: grayscale(1) saturate(0) invert(1) brightness(1.35) contrast(1.2) !important;
    filter: grayscale(1) saturate(0) invert(1) brightness(1.35) contrast(1.2) !important;
    display: inline-block !important;
    line-height: 1 !important;
    transform: translateZ(0) !important;
    will-change: filter !important;
}

/* 実況は読みやすさ重視で少し左寄せ */
.left-panel .guide-message {
    text-align: left;
    margin-bottom: 0;
}

/* ログは左に移した分、少し大きく表示 */
.left-panel .game-log {
    height: auto;
    flex: 1;              /* 余った高さをログに割り当て */
    min-height: 0;
    margin-bottom: 0;
}

/* 色グループ凡例（削除済み） */

/* ===== ボードエリア ===== */
.board-area {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* ボードサイズと外形を一致させ、左右パネルと底辺合わせを簡単に */
    width: var(--board-size);
    height: var(--board-size);
    /* Android系での再描画ちらつき対策：背面が見えて黒フラッシュしないよう下地を明示 */
    background-color: #fafafa;
    isolation: isolate;
    contain: paint;
}

/* ===== ボード ===== */
.board {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-template-rows: repeat(11, 1fr);
    width: var(--board-size);
    aspect-ratio: 1;
    background-color: #fafafa;
    border: 8px solid #000;
    outline: 2px solid var(--accent-gold);
    border-radius: 4px;
    box-shadow: 
        0 40px 80px rgba(0,0,0,0.7),
        0 0 0 1px #000,
        0 0 0 12px #111;
    position: relative;
    transition: transform 0.3s ease;
    /* Xperia/Androidで悪化するケースがあるため、強制レイヤー化は“Android以外”で活かす */
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

.board:hover {
    transform: translateZ(0) scale(1.005);
}

/* Android（特に一部Xperia）: 強制レイヤー化/過剰な影で黒フラッシュが悪化することがあるため緩める */
body.android .board {
    transform: none;
    will-change: auto;
    backface-visibility: visible;
    /* 影を軽くして巨大オフスクリーン合成を避ける */
    box-shadow:
        0 18px 40px rgba(0,0,0,0.55),
        0 0 0 1px #000,
        0 0 0 10px #111;
}
body.android .board:hover {
    transform: none;
}
body.android .board.shake {
    animation: none;
}

body.android .tokens-container {
    transform: none;
    will-change: auto;
}

/* 駒の影/合成コストを下げる（Androidのみ） */
body.android .token,
body.android .player-token {
    box-shadow:
        0 14px 22px rgba(0,0,0,0.55),
        0 6px 10px rgba(0,0,0,0.35),
        0 0 0 2px rgba(255,255,255,0.08);
}
body.android .token::after,
body.android .player-token::after {
    opacity: 0.45;
}

/* Android：駒の擬似3D（多重グラデ・blend・疑似反射）が合成を不安定にすることがあるため、よりフラットに */
body.android .token,
body.android .player-token {
    background: var(--token-color, #999) !important;
    outline: none;
    /* filter/transitionは再ラスタライズを誘発しやすい */
    filter: none !important;
    transition: none !important;
}
body.android .token::before,
body.android .player-token::before,
body.android .token::after,
body.android .player-token::after {
    content: none !important;
    background: none !important;
    box-shadow: none !important;
}
body.android .token.active-turn,
body.android .player-token.active-turn {
    animation: none !important;
    box-shadow: 0 0 0 2px var(--accent-gold) !important;
}

/* Android：中央の疑似3D小物（札束/山札）の回転や影も合成負荷が高いので弱める */
body.android .table-objects,
body.android .cash-stack-3d,
body.android .card-deck-3d {
    filter: none !important;
    box-shadow: none !important;
}
body.android .cash-stack-3d,
body.android .card-deck-3d,
body.android .card-deck-3d.chance,
body.android .card-deck-3d.chest,
body.android .card-deck-3d.deed {
    transform: none !important;
}

/* 画面シェイクアニメーション */
@keyframes shake {
    0%, 100% { transform: translate3d(0, 0, 0); }
    10% { transform: translate3d(-8px, 0, 0) rotate(-0.5deg); }
    20% { transform: translate3d(8px, 0, 0) rotate(0.5deg); }
    30% { transform: translate3d(-6px, 0, 0) rotate(-0.3deg); }
    40% { transform: translate3d(6px, 0, 0) rotate(0.3deg); }
    50% { transform: translate3d(-4px, 0, 0); }
    60% { transform: translate3d(4px, 0, 0); }
    70% { transform: translate3d(-2px, 0, 0); }
    80% { transform: translate3d(2px, 0, 0); }
    90% { transform: translate3d(-1px, 0, 0); }
}

.board.shake {
    animation: shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* ===== マス（グリッド配置） ===== */
.cell {
    background: #fff;
    border: 2px solid #000;
    /* 隣り合うボーダーが重ならないようにマージンを調整するか、grid-gapを使うかだが、
       ここではborder-widthでモンドリアン風の太さを出す */
    margin: -1px; /* 重ねて太く見せる */
    display: flex;
    flex-direction: column;
    position: relative;
    font-size: 0.55rem;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 1;
}

/* ===== 駅名以外のマスをカラフルに（判別しやすく） =====
   駅名（PROPERTY / RAILROAD）は基本トーン維持。
   非駅マス（CHANCE/CHEST/TAX/JAIL/PARKING/GO/GO_TO_JAIL/UTILITY）を色分け。 */
.cell.cell-type-chance {
    background: #fff;
}

.cell.cell-type-chest {
    background: #fff;
}

.cell.cell-type-tax {
    background: #fff;
}

.cell.cell-type-go {
    background: #fff;
}

.cell.cell-type-parking {
    background: #fff;
}

.cell.cell-type-jail,
.cell.cell-type-go_to_jail {
    background: #eee;
}

.cell.cell-type-utility {
    background: #fff;
}

/* アイコンを強調（特殊マスのみ表示される） */
.cell-icon {
    font-size: min(1.6rem, 32px);
    margin-bottom: 2px;
    color: #111;
    -webkit-filter: grayscale(1) saturate(0) brightness(0.12) contrast(2.4);
    filter: grayscale(1) saturate(0) brightness(0.12) contrast(2.4);
    line-height: 1;
}

/* 角マスはさらに強調 */
.cell.corner {
    background: #fff;
    border: 3px solid #000;
    z-index: 2;
}

.cell.corner.cell-type-go,
.cell.corner.cell-type-jail,
.cell.corner.cell-type-parking,
.cell.corner.cell-type-go_to_jail {
    background: #fff;
}

.cell::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.03);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.cell:hover {
    transform: scale(1.05);
    z-index: 50;
    border-color: var(--accent-gold);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.cell:hover::before {
    opacity: 1;
}

/* マスの配置 */
.cell[data-pos="0"] { grid-column: 11; grid-row: 11; }
.cell[data-pos="1"] { grid-column: 10; grid-row: 11; }
.cell[data-pos="2"] { grid-column: 9; grid-row: 11; }
.cell[data-pos="3"] { grid-column: 8; grid-row: 11; }
.cell[data-pos="4"] { grid-column: 7; grid-row: 11; }
.cell[data-pos="5"] { grid-column: 6; grid-row: 11; }
.cell[data-pos="6"] { grid-column: 5; grid-row: 11; }
.cell[data-pos="7"] { grid-column: 4; grid-row: 11; }
.cell[data-pos="8"] { grid-column: 3; grid-row: 11; }
.cell[data-pos="9"] { grid-column: 2; grid-row: 11; }
.cell[data-pos="10"] { grid-column: 1; grid-row: 11; }
.cell[data-pos="11"] { grid-column: 1; grid-row: 10; }
.cell[data-pos="12"] { grid-column: 1; grid-row: 9; }
.cell[data-pos="13"] { grid-column: 1; grid-row: 8; }
.cell[data-pos="14"] { grid-column: 1; grid-row: 7; }
.cell[data-pos="15"] { grid-column: 1; grid-row: 6; }
.cell[data-pos="16"] { grid-column: 1; grid-row: 5; }
.cell[data-pos="17"] { grid-column: 1; grid-row: 4; }
.cell[data-pos="18"] { grid-column: 1; grid-row: 3; }
.cell[data-pos="19"] { grid-column: 1; grid-row: 2; }
.cell[data-pos="20"] { grid-column: 1; grid-row: 1; }
.cell[data-pos="21"] { grid-column: 2; grid-row: 1; }
.cell[data-pos="22"] { grid-column: 3; grid-row: 1; }
.cell[data-pos="23"] { grid-column: 4; grid-row: 1; }
.cell[data-pos="24"] { grid-column: 5; grid-row: 1; }
.cell[data-pos="25"] { grid-column: 6; grid-row: 1; }
.cell[data-pos="26"] { grid-column: 7; grid-row: 1; }
.cell[data-pos="27"] { grid-column: 8; grid-row: 1; }
.cell[data-pos="28"] { grid-column: 9; grid-row: 1; }
.cell[data-pos="29"] { grid-column: 10; grid-row: 1; }
.cell[data-pos="30"] { grid-column: 11; grid-row: 1; }
.cell[data-pos="31"] { grid-column: 11; grid-row: 2; }
.cell[data-pos="32"] { grid-column: 11; grid-row: 3; }
.cell[data-pos="33"] { grid-column: 11; grid-row: 4; }
.cell[data-pos="34"] { grid-column: 11; grid-row: 5; }
.cell[data-pos="35"] { grid-column: 11; grid-row: 6; }
.cell[data-pos="36"] { grid-column: 11; grid-row: 7; }
.cell[data-pos="37"] { grid-column: 11; grid-row: 8; }
.cell[data-pos="38"] { grid-column: 11; grid-row: 9; }
.cell[data-pos="39"] { grid-column: 11; grid-row: 10; }

/* 角マス */
.cell.corner {
    background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(240,240,230,0.98) 100%);
}

.cell.corner .cell-content {
    transform: rotate(-45deg);
}

/* 斜め表示の角マスでも、拡大した名前が枠に収まるようにする。 */
.cell.corner .cell-icon {
    font-size: min(1.4rem, 28px);
}

.cell.corner .cell-name {
    font-size: min(0.75rem, 15px);
    max-width: 3.2em;
}

/* プロパティカラーバー */
.cell-color-bar {
    height: 22%;
    width: 100%;
    border-bottom: 2px solid #000;
    position: relative;
    overflow: hidden;
}


/* 家/ホテルが「建つ」アニメーション */
.cell-color-bar.build-pop {
    animation: buildPop 650ms cubic-bezier(0.2, 0.9, 0.2, 1.15);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.4);
}

.cell-color-bar.hotel-pop {
    animation: hotelPop 850ms cubic-bezier(0.15, 1.0, 0.2, 1.2);
    box-shadow: inset 0 0 0 2px rgba(255,215,0,0.6);
    filter: drop-shadow(0 10px 16px rgba(212, 175, 55, 0.35));
}

.cell-color-bar.build-pop .house-icon,
.cell-color-bar.hotel-pop .house-icon {
    display: inline-block;
    transform-origin: center;
    animation: houseIconPop 650ms cubic-bezier(0.2, 0.9, 0.2, 1.15);
}

@keyframes buildPop {
    0% { transform: scale(1); filter: brightness(1); }
    35% { transform: scale(1.05); filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes hotelPop {
    0% { transform: scale(1); filter: brightness(1); }
    25% { transform: scale(1.05); filter: brightness(1.2); }
    55% { transform: scale(0.98); filter: brightness(1.1); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes houseIconPop {
    0% { transform: translateY(8px) scale(0.85); opacity: 0; }
    35% { transform: translateY(-2px) scale(1.15); opacity: 1; }
    100% { transform: translateY(0px) scale(1); opacity: 1; }
}

.cell-color-bar::after {
    /* グラデーション削除してフラットに */
    display: none;
}

/* 色グループ（色バーの塗り） - ビビッドな原色系へ調整 */
.cell-color-bar.brown { background: var(--color-brown); }
.cell-color-bar.lightblue { background: var(--color-lightblue); }
.cell-color-bar.pink { background: var(--color-pink); }
.cell-color-bar.orange { background: var(--color-orange); }
.cell-color-bar.red { background: var(--color-red); }
.cell-color-bar.yellow { background: var(--color-yellow); }
.cell-color-bar.green { background: var(--color-green); }
.cell-color-bar.blue { background: var(--color-blue); }
.cell-color-bar.railroad { background: var(--color-railroad); } /* 鉄道は黒 */
.cell-color-bar.utility { background: var(--color-utility); }

/* 同色グループのハイライト（凡例削除に伴い無効化） */
/* マス内容 */
.cell-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px;
    text-align: center;
    color: var(--text-dark);
    position: relative;
}

/* 鉄道・公共事業のセル内容の背景に薄いアイコンを表示 */
.cell-content.has-icon-bg::before {
    content: attr(data-icon);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    opacity: 0.25;
    z-index: 0;
    pointer-events: none;
    line-height: 1;
    -webkit-filter: grayscale(1) saturate(0) brightness(0.12) contrast(2.4);
    filter: grayscale(1) saturate(0) brightness(0.12) contrast(2.4);
}

/* 抵当中：盤面のマスでも判別できるように（斜線＋バッジ＋アニメ） */
.cell.mortgaged .cell-color-bar {
    filter: grayscale(0.9) brightness(0.85);
}

/* 縦マスは .cell-content を回転しているため、斜線は回転しないセル本体に描画する */
.cell.mortgaged::after {
    content: '';
    position: absolute;
    inset: -2px;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(0,0,0,0.22) 0px,
            rgba(0,0,0,0.22) 4px,
            rgba(255,255,255,0.10) 4px,
            rgba(255,255,255,0.10) 9px
        );
    mix-blend-mode: multiply;
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
}

.cell.mortgaged .cell-content::after {
    content: '抵';
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(231, 76, 60, 0.92);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 10px 18px rgba(0,0,0,0.25);
    pointer-events: none;
}

.cell-content {
    z-index: 1;
}

.cell.mortgaged .cell-content > * {
    position: relative;
    z-index: 1;
}

.cell.mortgaged .cell-name,
.cell.mortgaged .cell-price {
    opacity: 0.72;
}

.cell-owner.owner-mortgaged {
    opacity: 0.75;
    filter: grayscale(0.7);
}

/* 抵当に入れた/解除した瞬間のパルス */
.cell.mortgage-pop {
    animation: mortgagePop 900ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
.cell.unmortgage-pop {
    animation: unmortgagePop 900ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

@keyframes mortgagePop {
    0% { box-shadow: 0 0 0 rgba(231, 76, 60, 0), 0 0 0 rgba(0,0,0,0.0); }
    35% { box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.45), 0 18px 40px rgba(0,0,0,0.22); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0), 0 0 0 rgba(0,0,0,0.0); }
}

@keyframes unmortgagePop {
    0% { box-shadow: 0 0 0 rgba(46, 204, 113, 0), 0 0 0 rgba(0,0,0,0.0); }
    35% { box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.45), 0 18px 40px rgba(0,0,0,0.22); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0), 0 0 0 rgba(0,0,0,0.0); }
}

.cell-name {
    font-weight: 800;
    /* 設定で文字を拡大しても、固定サイズのマスからはみ出さない。 */
    font-size: min(0.75rem, 17px);
    line-height: 1.2;
    max-width: 100%;
    text-wrap: balance;
    margin-bottom: 2px;
    letter-spacing: 0.02em;
    position: relative;
    z-index: 1;
}

.cell-price {
    font-size: min(0.7rem, 16px);
    color: #333;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

/* 家・ホテル */
.building {
    width: 9px;
    height: 9px;
    border: 1px solid rgba(0,0,0,0.3);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
    transition: transform 0.2s;
}

.building:hover {
    transform: scale(1.3);
}

.building.house {
    background: linear-gradient(135deg, #66bb6a 0%, #43a047 100%);
    border-radius: 1px;
}

.building.hotel {
    background: linear-gradient(135deg, #ef5350 0%, #c62828 100%);
    border-radius: 2px;
    width: 11px;
    height: 11px;
}

/* トークン（コマ） */
.tokens-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 80; /* 盤面上で確実に最前面に */
    /* 1マス最大4つ：人数（最大4）を前提に、1〜4個で綺麗に整列 */
    --token-size: 30px;
    /* 重なり防止：中心からの配置オフセットを“半径寄り”にして確実に離す */
    /* 少しだけ詰める（重ならない範囲） */
    --slot: calc(var(--token-size) * 0.66);
    /* アクティブ強調の最大拡大（人数で下げる） */
    --active-scale: 1.12;
    padding: 3px;
    position: absolute;
    /* 合成レイヤーを分離して、駒移動時にボード全体が再描画されにくくする */
    transform: translateZ(0);
    will-change: transform;
}

/* 角マスは余裕があるので少し大きく */
.cell.corner .tokens-container {
    --token-size: 36px;
    --slot: calc(var(--token-size) * 0.66);
}

.token,
.player-token {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--token-size);
    height: var(--token-size);
    border-radius: 50%;
    /* “異質に目立つ”ため、黒い盤面/白い盤面どちらでも沈まない輪郭を持たせる */
    border: 1px solid rgba(0,0,0,0.65);
    outline: 1px solid rgba(255,255,255,0.55);
    /* 物質感：接地影（深く・長く）＋リムライト＋内部の深い陰影 */
    box-shadow:
        0 28px 46px rgba(0, 0, 0, 0.72),
        0 12px 18px rgba(0,0,0,0.52),
        0 0 0 2px rgba(255,255,255,0.10),
        /* 色の識別：外周のカラーハローを少し強める */
        0 0 28px color-mix(in srgb, var(--token-color, #999) 70%, transparent 30%),
        inset 0 2px 10px rgba(255,255,255,0.35),
        inset 0 -10px 18px rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: box-shadow 0.25s ease, filter 0.25s ease, opacity 0.25s ease, scale 0.2s ease;
    /* 樹脂/ラッカー塗装っぽい：プレイヤーカラーを“素材”として使う */
    background:
        /* ベース色を明確化（メタ感は残しつつ色が読めるように） */
        radial-gradient(circle at 55% 60%, color-mix(in srgb, var(--token-color, #999) 88%, #000 12%) 0%, color-mix(in srgb, var(--token-color, #999) 68%, #000 32%) 55%, rgba(0,0,0,0) 100%),
        radial-gradient(circle at 28% 22%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.0) 34%),
        radial-gradient(circle at 70% 82%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.0) 55%),
        conic-gradient(from 210deg,
            color-mix(in srgb, var(--token-color, #999) 85%, #000 15%) 0%,
            color-mix(in srgb, var(--token-color, #999) 55%, #fff 45%) 22%,
            color-mix(in srgb, var(--token-color, #999) 78%, #000 22%) 55%,
            color-mix(in srgb, var(--token-color, #999) 60%, #000 40%) 78%,
            color-mix(in srgb, var(--token-color, #999) 85%, #000 15%) 100%);
    color: white;
    z-index: 10;
    --tx: 0px;
    --ty: 0px;
    --scale: 1;
    /* 配置は translate/scale で、移動演出は transform で扱う（干渉させない） */
    translate: calc(-50% + var(--tx)) calc(-50% + var(--ty));
    scale: var(--scale);
    will-change: transform;
}

.token::before,
.player-token::before {
    /* クロームの立体リム（“コイン縁”） */
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.05) 45%, rgba(0,0,0,0.0) 70%),
        conic-gradient(from 180deg,
            rgba(255,255,255,0.95) 0%,
            rgba(255,255,255,0.15) 18%,
            rgba(0,0,0,0.35) 40%,
            rgba(255,255,255,0.25) 62%,
            rgba(0,0,0,0.45) 78%,
            rgba(255,255,255,0.85) 100%);
    border: 2px solid rgba(0,0,0,0.35);
    box-shadow:
        inset 0 2px 6px rgba(255,255,255,0.35),
        inset 0 -4px 10px rgba(0,0,0,0.55),
        /* 色の識別リング（コイン縁の内側に色を差す） */
        0 0 0 2px color-mix(in srgb, var(--token-color, #999) 72%, transparent 28%);
    opacity: 0.95;
}

.token::after,
.player-token::after {
    /* 反射ハイライト（強め） */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0.12) 26%, rgba(255,255,255,0.0) 52%),
        linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 28%, rgba(255,255,255,0) 60%);
    mix-blend-mode: screen;
    opacity: 0.85;
    pointer-events: none;
}

/* モバイル（特にAndroid）で blend-mode が合成を不安定にすることがあるため無効化 */
@media (hover: none) and (pointer: coarse) {
    .token::after,
    .player-token::after {
        mix-blend-mode: normal;
    }
}

/* token-icon は削除（中央記号を表示しない） */

.token.active-turn {
    --scale: var(--active-scale, 1.12);
    z-index: 30;
    box-shadow: 
        0 0 20px var(--accent-gold-glow),
        0 0 40px var(--accent-gold-glow),
        0 6px 20px rgba(0,0,0,0.5);
    border-color: var(--accent-gold);
    animation: tokenPulse 1.5s ease-in-out infinite;
}

.token.active-turn::before {
    border-color: var(--accent-gold);
}

@keyframes tokenPulse {
    0%, 100% { box-shadow: 0 0 20px var(--accent-gold-glow), 0 0 40px var(--accent-gold-glow), 0 6px 20px rgba(0,0,0,0.5); }
    50% { box-shadow: 0 0 30px var(--accent-gold-glow), 0 0 60px var(--accent-gold-glow), 0 6px 20px rgba(0,0,0,0.5); }
}

/* トークン出現アニメーション */
@keyframes tokenPop {
    0% { transform: translateY(10px) scale(0.6); opacity: 0; filter: blur(1px); }
    60% { transform: translateY(-2px) scale(1.12); opacity: 1; filter: blur(0); }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.player-token.pop-animation {
    animation: tokenPop 0.45s cubic-bezier(0.2, 0.9, 0.2, 1.2);
}

/* トークン移動（洗練）：JS側のFLIPで移動、CSSは着地の艶だけ */
.token.moving {
    filter: brightness(1.08) saturate(1.05);
}

/* ===== 1マス内の配置（最大4） ===== */
/* 1個：中央（デフォルト） */
.tokens-container > .player-token:only-child { --tx: 0px; --ty: 0px; }

/* 2個：左右 */
.tokens-container > .player-token:first-child:nth-last-child(2) { --tx: calc(var(--slot) * -1); --ty: 0px; }
.tokens-container > .player-token:first-child:nth-last-child(2) ~ .player-token { --tx: var(--slot); --ty: 0px; }
.tokens-container > .player-token:first-child:nth-last-child(2),
.tokens-container > .player-token:first-child:nth-last-child(2) ~ .player-token { --active-scale: 1.08; }

/* 3個：上＋下左右 */
.tokens-container > .player-token:first-child:nth-last-child(3) { --tx: 0px; --ty: calc(var(--slot) * -1); }
.tokens-container > .player-token:first-child:nth-last-child(3) ~ .player-token:nth-child(2) { --tx: calc(var(--slot) * -1); --ty: var(--slot); }
.tokens-container > .player-token:first-child:nth-last-child(3) ~ .player-token:nth-child(3) { --tx: var(--slot); --ty: var(--slot); }
.tokens-container > .player-token:first-child:nth-last-child(3),
.tokens-container > .player-token:first-child:nth-last-child(3) ~ .player-token { --scale: 0.96; --active-scale: 1.05; }

/* 4個：2×2 */
.tokens-container > .player-token:first-child:nth-last-child(4) { --tx: calc(var(--slot) * -1); --ty: calc(var(--slot) * -1); }
.tokens-container > .player-token:first-child:nth-last-child(4) ~ .player-token:nth-child(2) { --tx: var(--slot); --ty: calc(var(--slot) * -1); }
.tokens-container > .player-token:first-child:nth-last-child(4) ~ .player-token:nth-child(3) { --tx: calc(var(--slot) * -1); --ty: var(--slot); }
.tokens-container > .player-token:first-child:nth-last-child(4) ~ .player-token:nth-child(4) { --tx: var(--slot); --ty: var(--slot); }
.tokens-container > .player-token:first-child:nth-last-child(4),
.tokens-container > .player-token:first-child:nth-last-child(4) ~ .player-token { --scale: 0.93; --active-scale: 1.03; }

/* ===== 中央パネル ===== */
.center-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    pointer-events: none;
    z-index: 5;
    isolation: isolate; /* ウォーターマークの重なり制御を安定させる */
}

.table-objects {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    z-index: 4; /* center-panelの下 */
    pointer-events: none;
}

.table-object {
    position: absolute;
    /* “大人っぽい”比率：細長い長方形 */
    width: 140px;
    height: 62px;
    /* 中央の札束/山札は端末差が出やすいので3D表現は使わない（常に2D） */
    transform-style: flat;
    /* ここは“置き物”なので少しリアルな影を戻す（UIの二重影とは別物） */
    filter: drop-shadow(0 18px 22px rgba(0,0,0,0.55));
    box-shadow: none;
}

/* ===== 3D非対応端末フォールバック（SO-01E等） ===== */
body.no-3d .table-object,
body.no-3d .fly-3d {
    transform-style: flat;
    filter: none;
}

body.no-3d .cash-stack-3d {
    transform: rotate(45deg);
}
body.no-3d .cash-stack-3d::after { display: none; }
body.no-3d .cash-stack-3d .cash-top { transform: none; }

body.no-3d .card-deck-3d { transform: rotate(-45deg); }
body.no-3d .card-deck-3d.chest { transform: rotate(-45deg); }
body.no-3d .card-deck-3d.deed { transform: none; }
body.no-3d .card-deck-3d::after { display: none; }
body.no-3d .card-deck-3d .deck-top,
body.no-3d .card-deck-3d .deck-count { transform: none; }

.table-label {
    position: absolute;
    left: 50%;
    bottom: -20px;
    transform: translateX(-50%);
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    color: rgba(255,255,255,0.88);
    text-shadow: 0 6px 14px rgba(0,0,0,0.55);
}

/* 札束（BANK） */
.cash-stack-3d {
    /* 実物寄せ：右上に斜め45度 */
    /* MONOPOLYの文字（中央）に重ならないよう、中央エリアの外側へ逃がす */
    right: -6%;
    top: -4%;
    left: auto;
    bottom: auto;
    transform: rotate(45deg);
}

/* 左下：銀行在庫（家・ホテル） */
.bank-buildings-3d {
    left: -6%;
    bottom: -4%;
    right: auto;
    top: auto;
    transform: rotate(45deg);
}

.bank-buildings {
    position: absolute;
    inset: 10px;
    display: grid;
    grid-template-rows: auto auto;
    gap: 8px;
    align-content: end;
}

/* 在庫は“シルエット絵文字”で全数表示 */
.bank-buildings-3d {
    width: 178px;
    height: 98px;
}

.bank-inv-row {
    display: grid;
    align-content: start;
    justify-content: start;
    gap: 2px 3px;
    color: #111;
    text-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

.bank-inv-houses {
    grid-template-columns: repeat(8, 1fr); /* 32 = 8x4 */
}

.bank-inv-hotels {
    grid-template-columns: repeat(6, 1fr); /* 12 = 6x2 */
}

.bank-inv-icon {
    font-size: 12px;
    line-height: 1;
    transform: translateZ(0);
}

.cash-stack-3d::before,
.cash-stack-3d::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 3px;
    /* 札束：深いグリーン＋紙っぽいストライプ */
    background:
        linear-gradient(145deg, rgba(46, 204, 113, 0.98) 0%, rgba(22, 160, 93, 0.98) 55%, rgba(19, 141, 79, 0.98) 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 6px, rgba(0,0,0,0.05) 6px 12px);
    border: 1px solid rgba(0,0,0,0.55);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 -10px 18px rgba(0,0,0,0.22);
}

.cash-stack-3d::after {
    /* “束の厚み” */
    display: block;
    transform: translate(7px, 7px);
    z-index: -1;
    filter: saturate(0.95) brightness(0.85);
}

.cash-stack-3d .cash-top {
    position: absolute;
    inset: 7px;
    border-radius: 2px;
    background:
        /* 紙帯（ストラップ） */
        linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 56%, rgba(240,240,240,0.92) 56%, rgba(240,240,240,0.92) 70%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.0) 45%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 8px, rgba(0,0,0,0.05) 8px 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    font-size: 1.6rem;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 10px 18px rgba(0,0,0,0.28);
    transform: none;
}

/* 山札（CHANCE / CHEST） */
.card-deck-3d {
    width: 132px;
    height: 58px;
    transform: rotate(-45deg);
}

.card-deck-3d.chance {
    /* 実物寄せ：右下にCHANCE */
    right: 0%;
    bottom: 10%;
    top: auto;
    left: auto;
}
.card-deck-3d.chest {
    /* 実物寄せ：左上にCHEST */
    left: 0%;
    top: 10%;
    bottom: auto;
    right: auto;
    transform: rotate(-45deg);
}

.card-deck-3d.deed {
    /* ボード下部：権利書（DEED） */
    left: 50%;
    bottom: -8%;
    top: auto;
    right: auto;
    transform: translateX(-50%) rotate(0deg);
}

.card-deck-3d::before,
.card-deck-3d::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    /* カード紙（微細テクスチャ＋ほんのり黄ばみ） */
    background:
        linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(245,245,245,0.98) 70%, rgba(235,235,235,0.98) 100%),
        repeating-linear-gradient(0deg, rgba(0,0,0,0.015) 0 2px, rgba(255,255,255,0.0) 2px 6px);
    border: 1px solid rgba(0,0,0,0.25);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.85),
        inset 0 -6px 12px rgba(0,0,0,0.08);
}
.card-deck-3d::after {
    /* “束の厚み” */
    display: block;
    transform: translate(7px, 7px);
    z-index: -1;
    filter: brightness(0.92) saturate(0.95);
}

.card-deck-3d .deck-top {
    position: absolute;
    inset: 7px;
    border-radius: 3px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 45%),
        repeating-linear-gradient(90deg, rgba(0,0,0,0.02) 0 10px, rgba(255,255,255,0.0) 10px 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* CHANCE / CHEST は色面で役割を明確化 */
.card-deck-3d.chance .deck-top {
    background:
        linear-gradient(90deg, rgba(255,230,0,1) 0%, rgba(255,230,0,1) 36%, rgba(255,255,255,0.0) 36%, rgba(255,255,255,0.0) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 45%),
        repeating-linear-gradient(90deg, rgba(0,0,0,0.02) 0 10px, rgba(255,255,255,0.0) 10px 20px);
    color: #111;
}
.card-deck-3d.chest .deck-top {
    background:
        linear-gradient(90deg, rgba(0,184,255,1) 0%, rgba(0,184,255,1) 36%, rgba(255,255,255,0.0) 36%, rgba(255,255,255,0.0) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 45%),
        repeating-linear-gradient(90deg, rgba(0,0,0,0.02) 0 10px, rgba(255,255,255,0.0) 10px 20px);
    color: #111;
}

.card-deck-3d.deed .deck-top {
    background:
        linear-gradient(90deg, rgba(212,175,55,1) 0%, rgba(212,175,55,1) 36%, rgba(255,255,255,0.0) 36%, rgba(255,255,255,0.0) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 45%),
        repeating-linear-gradient(90deg, rgba(0,0,0,0.02) 0 10px, rgba(255,255,255,0.0) 10px 20px);
    color: #111;
}

.card-deck-3d.chance::before { border-color: var(--mondrian-yellow); }
.card-deck-3d.chest::before { border-color: var(--mondrian-blue); }
.card-deck-3d.deed::before { border-color: var(--accent-gold); }

.card-deck-3d .deck-count {
    position: absolute;
    top: -14px;
    right: -12px;
    background: rgba(0,0,0,0.92);
    border: 2px solid #fff;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 900;
    color: rgba(255,255,255,0.92);
    transform: none;
    box-shadow: 0 10px 18px rgba(0,0,0,0.25);
}

.card-deck-3d.chance .deck-count { border-color: var(--mondrian-yellow); }
.card-deck-3d.chest .deck-count { border-color: var(--mondrian-blue); }
.card-deck-3d.deed .deck-count { border-color: var(--accent-gold); }

/* 飛ぶ3Dオブジェクト（お金/カード） */
.fly-3d {
    position: absolute;
    width: 84px;
    height: 54px;
    transform-style: preserve-3d;
    pointer-events: none;
    z-index: 9998;
    filter: drop-shadow(0 16px 16px rgba(0,0,0,0.35));
}

.fly-3d.fly-card {
    border-radius: 10px;
    background: linear-gradient(135deg, #ffffff 0%, #f3f3f3 100%);
    border: 1px solid rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
}

.fly-3d.fly-money {
    border-radius: 10px;
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.fly-3d.fly-money::before {
    content: '$';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    font-size: 1.6rem;
    color: rgba(255,255,255,0.85);
    text-shadow: 0 10px 18px rgba(0,0,0,0.28);
}

.center-panel > * {
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.monopoly-watermark {
    position: absolute;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(3.8rem, 7.2vw, 6.4rem);
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-22deg);
    pointer-events: none;
    white-space: nowrap;
    z-index: 0;
    color: rgba(0,0,0,0.08);
    /* 存在感：輪郭＋彫り（UIを邪魔しない濃度） */
    -webkit-text-stroke: 3px rgba(212,175,55,0.22);
    text-shadow:
        0 2px 0 rgba(255,255,255,0.55),
        0 -2px 0 rgba(0,0,0,0.06),
        6px 6px 0 rgba(0,0,0,0.05),
        10px 10px 0 rgba(212,175,55,0.06);
    mix-blend-mode: multiply;
    /* BANK/STOCKに重ならないよう、外側へ行くほどフェード（端の文字は消さない） */
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,1) 0 74%, rgba(0,0,0,0.35) 86%, rgba(0,0,0,0) 96%);
    mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,1) 0 74%, rgba(0,0,0,0.35) 86%, rgba(0,0,0,0) 96%);
}

/* ガイドメッセージ */
.guide-message {
    background: #000;
    border: 2px solid #fff;
    border-radius: 0;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 700;
    color: #fff;
    box-shadow: 4px 4px 0 rgba(255,255,255,0.1);
    border-left: 8px solid var(--mondrian-yellow);
    max-width: 95%;
    animation: messageIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-size: 0.95rem;
    line-height: 1.5;
}

@keyframes messageIn {
    from { transform: scale(0.9) translateY(10px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

/* サイコロ */
.dice-container {
    display: flex;
    gap: 34px;
    margin-bottom: 1.5rem;
    perspective: 1000px;
}

.dice {
    /* 主要UIとして少し大きく */
    --dice-size: 86px;
    --pip-size: clamp(10px, calc(var(--dice-size) * 0.16), 14px);
    width: var(--dice-size);
    height: var(--dice-size);
    background: transparent;
    border-radius: clamp(12px, calc(var(--dice-size) * 0.2), 18px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 800px; /* 3Dキューブ用 */
    filter: drop-shadow(0 15px 35px rgba(0,0,0,0.35));
}

/* 3Dキューブ本体 */
.dice-cube {
    width: var(--dice-size);
    height: var(--dice-size);
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.75s cubic-bezier(0.2, 0.9, 0.2, 1.2);
    will-change: transform;
}

/* 3D面 */
.dice-face {
    position: absolute;
    inset: 0;
    border-radius: clamp(12px, calc(var(--dice-size) * 0.2), 18px);
    /* 全体の高コントラストに合わせて“白×黒”を強調 */
    background: linear-gradient(145deg, #ffffff 0%, #f0f0f0 100%);
    border: 2px solid #000;
    box-shadow: 
        inset 0 -4px 8px rgba(0,0,0,0.08),
        inset 0 3px 6px rgba(255,255,255,1);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: calc(var(--dice-size) * 0.2);
    backface-visibility: hidden;
}

/* 少し面ごとに陰影 */
.dice-face.face-6 { filter: brightness(0.96); }
.dice-face.face-2 { filter: brightness(0.98); }
.dice-face.face-5 { filter: brightness(0.98); }

/* 面の配置（半分の奥行き） */
.dice-face.face-1 { transform: rotateY(0deg) translateZ(calc(var(--dice-size) / 2)); }
.dice-face.face-6 { transform: rotateY(180deg) translateZ(calc(var(--dice-size) / 2)); }
.dice-face.face-2 { transform: rotateY(90deg) translateZ(calc(var(--dice-size) / 2)); }
.dice-face.face-5 { transform: rotateY(-90deg) translateZ(calc(var(--dice-size) / 2)); }
.dice-face.face-3 { transform: rotateX(90deg) translateZ(calc(var(--dice-size) / 2)); }
.dice-face.face-4 { transform: rotateX(-90deg) translateZ(calc(var(--dice-size) / 2)); }

/* ピップ */
.pip {
    width: var(--pip-size);
    height: var(--pip-size);
    border-radius: 50%;
    justify-self: center;
    align-self: center;
    background: #000;
    box-shadow: none;
}

/* 1の目のピップ：赤色 */
.face-1 .pip {
    background: #ff0000;
}

/* 3x3の配置（1〜9） */
.pos-1 { grid-row: 1; grid-column: 1; }
.pos-2 { grid-row: 1; grid-column: 2; }
.pos-3 { grid-row: 1; grid-column: 3; }
.pos-4 { grid-row: 2; grid-column: 1; }
.pos-5 { grid-row: 2; grid-column: 2; }
.pos-6 { grid-row: 2; grid-column: 3; }
.pos-7 { grid-row: 3; grid-column: 1; }
.pos-8 { grid-row: 3; grid-column: 2; }
.pos-9 { grid-row: 3; grid-column: 3; }

.dice.rolling .dice-cube {
    animation: diceSpin 0.25s linear infinite;
}

@keyframes diceSpin {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* ゾロ目エフェクト */
.dice.doubles {
    animation: doublesGlow 0.8s ease-in-out;
    box-shadow: 
        0 15px 35px rgba(0,0,0,0.35),
        0 0 0 4px var(--mondrian-yellow),
        0 0 30px var(--mondrian-yellow);
}

@keyframes doublesGlow {
    0%, 100% { box-shadow: 0 15px 35px rgba(0,0,0,0.35); }
    50% { box-shadow: 0 15px 35px rgba(0,0,0,0.35), 0 0 0 8px var(--mondrian-yellow), 0 0 50px var(--mondrian-yellow); }
}

.dice-total {
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: #000;
    margin-bottom: 1rem;
    min-height: 2rem;
    text-shadow: none;
    letter-spacing: 0.1em;
}

/* 銀行ステータス */
.bank-status {
    width: 100%;
    /* パネル幅拡張に合わせて広げる */
    max-width: 100%;
    background: #000;
    backdrop-filter: none;
    border: 2px solid #fff;
    border-radius: 0;
    padding: 0.7rem 1rem;
    font-size: 0.75rem;
    color: #fff;
    box-shadow: 4px 4px 0 rgba(255,255,255,0.1);
    margin-bottom: 1rem;
    border-left: 8px solid var(--mondrian-red);
}
/* 銀行ステータス内の絵文字は白シルエット（黒背景のため） - 最高優先度で適用 */
#bank-status.emoji-sil,
#bank-status .emoji-sil,
#bank-status span.emoji-sil,
.bank-status.emoji-sil,
.bank-status .emoji-sil,
.bank-status span.emoji-sil,
.bank-status > .emoji-sil,
.bank-status > span.emoji-sil,
.left-panel #bank-status .emoji-sil,
.left-panel #bank-status span.emoji-sil,
.left-panel .bank-status .emoji-sil,
.left-panel .bank-status span.emoji-sil,
.left-panel-body #bank-status .emoji-sil,
.left-panel-body #bank-status span.emoji-sil,
.left-panel-body .bank-status .emoji-sil,
.left-panel-body .bank-status span.emoji-sil,
#left-panel #bank-status .emoji-sil,
#left-panel #bank-status span.emoji-sil,
#left-panel .bank-status .emoji-sil,
#left-panel .bank-status span.emoji-sil {
    -webkit-filter: grayscale(1) saturate(0) invert(1) brightness(1.35) contrast(1.2) !important;
    filter: grayscale(1) saturate(0) invert(1) brightness(1.35) contrast(1.2) !important;
    display: inline-block !important;
    line-height: 1 !important;
    transform: translateZ(0) !important;
    will-change: filter !important;
}
.bank-status strong { 
    font-family: 'Oswald', sans-serif; 
    color: #fff;
    border-bottom: 2px solid var(--mondrian-red);
}

/* ゲームログ */
.game-log {
    width: 100%;
    /* パネル幅拡張に合わせて広げる */
    max-width: 100%;
    height: 120px;
    background: #000;
    border: 2px solid #fff;
    border-radius: 0;
    padding: 0.65rem 0.7rem 0.75rem;
    overflow-y: auto;
    font-size: 0.72rem;
    color: #ccc;
    border-left: 8px solid var(--mondrian-blue);
    margin-bottom: 1rem;
    box-shadow: 4px 4px 0 rgba(255,255,255,0.1);
    position: relative;
    overscroll-behavior: contain;
    scrollbar-color: rgba(255,255,255,0.55) #000;
    scrollbar-width: thin;
}

.game-log::before {
    content: 'LOG';
    position: sticky;
    top: -0.65rem;
    display: block;
    z-index: 2;
    margin: -0.65rem -0.7rem 0.65rem -0.7rem;
    padding: 0.55rem 0.75rem;
    background: #000;
    border-bottom: 2px solid #fff;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.game-log::-webkit-scrollbar { width: 10px; }
.game-log::-webkit-scrollbar-track { background: #000; }
.game-log::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.35);
    border: 2px solid #000;
}
.game-log::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.55); }

.log-entry {
    padding: 0.5rem 0.45rem;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    line-height: 1.4;
    animation: logIn 0.18s ease-out;
    white-space: pre-wrap;
    word-break: break-word;
}

.log-entry:nth-child(even) {
    background: rgba(255,255,255,0.03);
}

.log-entry:hover {
    background: rgba(255,255,255,0.06);
}

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

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

.log-entry.highlight {
    background: linear-gradient(90deg, rgba(255, 235, 59, 0.18) 0%, rgba(0,0,0,0) 70%);
    padding: 0.5rem 0.45rem;
    border-radius: 0;
    border-left: 4px solid var(--mondrian-yellow);
}

/* アクションボタン */
.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
    width: 100%;
}

/* ボタンにのみズーム禁止を適用 */
button,
.btn,
[role="button"],
input[type="button"],
input[type="submit"] {
    /* モバイルのダブルタップ拡大を抑制 */
    touch-action: manipulation;
}

.btn {
    padding: 0.8rem 1.6rem;
    border: 2px solid transparent;
    border-radius: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.9rem;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.1s;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: 0.05em;
    user-select: none;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
}

.btn::before {
    display: none;
}

.btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 #fff;
}

.btn:active {
    transform: translate(0, 0);
    box-shadow: none;
}

.btn-primary {
    background: var(--mondrian-blue);
    color: #fff;
    border: 2px solid var(--mondrian-blue);
    box-shadow: none;
}
.btn-primary:hover {
    background: var(--mondrian-blue);
    border-color: #fff;
    box-shadow: 4px 4px 0 #fff;
}

.btn-secondary {
    background: #000;
    color: #fff;
    border: 2px solid #fff;
    box-shadow: none;
}
.btn-secondary:hover {
    background: #fff;
    color: #000;
    box-shadow: 4px 4px 0 var(--mondrian-red);
}

.btn-danger {
    background: var(--mondrian-red);
    color: white;
    border: 2px solid var(--mondrian-red);
    box-shadow: none;
}
.btn-danger:hover {
    border-color: #fff;
    box-shadow: 4px 4px 0 #fff;
}

.btn-warning {
    background: var(--mondrian-yellow);
    color: #000;
    border: 2px solid var(--mondrian-yellow);
    box-shadow: none;
}
.btn-warning:hover {
    border-color: #fff;
    box-shadow: 4px 4px 0 #fff;
}

.btn-outline {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    box-shadow: none;
}
.btn-outline:hover {
    background: #fff;
    color: #000;
}

/* 中央（白背景）に置かれるアウトラインボタンは非ホバー時も読めるように */
.center-panel .btn-outline,
.action-buttons .btn-outline {
    background: transparent;
    color: #000;
    border-color: #000;
}
.center-panel .btn-outline:hover,
.action-buttons .btn-outline:hover {
    background: #fff;
    color: #000;
    box-shadow: 4px 4px 0 var(--mondrian-yellow);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn:disabled::before {
    display: none;
}

/* ===== サイドパネル ===== */
.side-panel {
    width: var(--panel-w);
    background: #000;
    border: 4px solid var(--accent-gold);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: none;
    height: var(--board-size);
}

.panel-header {
    background: #000;
    color: #fff;
    padding: 1.2rem 1.5rem;
    font-weight: 900;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 4px solid #fff;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.05em;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.panel-header .panel-title {
    flex: 0 0 auto;
    white-space: nowrap; /* 「プレイヤー情報」を改行させない */
}

/* ===== ネットワーク状態（プレイヤー情報ヘッダー右側） ===== */
.net-indicator {
    flex: 1 1 0;
    min-width: 0; /* 省略表示のため */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    text-align: right;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.92);
    max-width: 72%;
    line-height: 1.15;
}

.net-indicator .net-mode {
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
}
.net-indicator .net-mode.offline { color: rgba(255, 255, 255, 0.75); }
.net-indicator .net-mode.online { color: var(--mondrian-yellow); }

.net-indicator .net-details {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.62rem; /* ホスト/参加者/ゲストの詳細はさらに小さく */
    /* 2行まで表示して省略（長い名前が並んでも崩れない） */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.panel-header::after {
    display: none;
}

.reset-btn {
    background: #000;
    border: 2px solid #fff;
    color: #fff;
    padding: 0.5rem 0.8rem;
    border-radius: 0;
    font-size: 0.8rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s, background-color 0.1s, color 0.1s, border-color 0.1s;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.reset-btn:hover {
    background: #fff;
    color: #000;
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--mondrian-yellow);
}

.reset-btn:active {
    transform: translate(0, 0);
    box-shadow: none;
}

/* アイコンボタンは正方形寄りに（リセットは文字があるので除外） */
.header-controls .reset-btn:not(#reset-btn) {
    min-width: 44px;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
}

#sound-btn.muted {
    opacity: 0.4;
    text-decoration: line-through;
}

/* プレイヤーパネル */
.players-panel {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    min-height: 0;        /* flex内スクロールのため */
}

.player-card {
    background: #000;
    border-radius: 0;
    padding: 1.2rem;
    margin-bottom: 1rem;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    border: 2px solid var(--mondrian-white);
    position: relative;
    overflow: hidden;
    box-shadow: 4px 4px 0 rgba(255,255,255,0.1);
    color: #fff;
}

.player-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
    background: var(--token-color, #444);
    opacity: 1;
    transition: all 0.3s;
}

.player-card.active {
    background: #111;
    border: 2px solid var(--mondrian-yellow);
    box-shadow: 6px 6px 0 var(--mondrian-yellow);
    transform: translate(-4px, -4px);
}

.player-card.active::before {
    /* アクティブ時は左バーをさらに太く */
    width: 12px;
}

.player-card.bankrupt {
    opacity: 0.5;
    filter: grayscale(1);
    background: #000;
    border-color: #333;
}

.player-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.player-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.player-token-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--token-color, #999);
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 0 8px var(--token-color);
    flex: 0 0 16px;
}

.player-avatar {
    width: 48px;
    height: 48px;
    border-radius: 0; /* 角丸なし */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: #000;
    color: #fff;
    border: 2px solid #fff;
    box-shadow: none;
}

.player-name {
    font-weight: 900;
    font-size: 1.2rem;
    color: #fff;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-shadow: none;
}

.player-money {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    /* ゴールドグラデーション復活 */
    background: linear-gradient(135deg, #d4af37 0%, #f9e29a 50%, #d4af37 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 視認性確保のためのドロップシャドウ */
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
    position: relative;
    display: inline-block;
    will-change: transform, filter;
    margin-left: auto; /* 右寄せ */
}

/* 所持金の増減アニメーション */
.player-money.money-up {
    animation: moneyUpPulse 700ms cubic-bezier(0.2, 0.9, 0.2, 1.1);
    filter: drop-shadow(0 0 10px rgba(46, 204, 113, 0.55));
}

.player-money.money-down {
    animation: moneyDownPulse 700ms cubic-bezier(0.2, 0.9, 0.2, 1.1);
    filter: drop-shadow(0 0 10px rgba(231, 76, 60, 0.55));
}

.player-money.money-up::after,
.player-money.money-down::after {
    content: attr(data-delta);
    position: absolute;
    right: 0;
    top: -12px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    -webkit-text-fill-color: initial; /* 親の透明文字設定の影響を避ける */
    text-shadow: 0 6px 18px rgba(0,0,0,0.15);
    pointer-events: none;
    opacity: 0;
}

.player-money.money-up::after {
    color: #2ecc71;
    animation: moneyDeltaFloat 900ms ease-out;
}

.player-money.money-down::after {
    color: #e74c3c;
    animation: moneyDeltaFloat 900ms ease-out;
}

@keyframes moneyUpPulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(46, 204, 113, 0)); }
    35% { transform: scale(1.12); filter: drop-shadow(0 0 14px rgba(46, 204, 113, 0.65)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(46, 204, 113, 0)); }
}

@keyframes moneyDownPulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(231, 76, 60, 0)); }
    35% { transform: scale(1.10); filter: drop-shadow(0 0 14px rgba(231, 76, 60, 0.65)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(231, 76, 60, 0)); }
}

@keyframes moneyDeltaFloat {
    0% { opacity: 0; transform: translateY(6px) scale(0.98); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-18px) scale(1.02); }
}

.player-properties {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 0.8rem;
}

.property-chip {
    width: 22px;
    height: 26px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    color: white;
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

/* プレイヤーパネルの鉄道チップ：真っ黒で同化しないよう少し明るい黒＋ストライプ＋枠 */
.property-chip.railroad {
    background:
        repeating-linear-gradient(
            45deg,
            #2a2a2a 0px,
            #2a2a2a 5px,
            #141414 5px,
            #141414 10px
        ) !important;
    border: 1px solid rgba(255,255,255,0.75);
    box-shadow:
        0 2px 5px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.10);
}

.property-chip:hover {
    transform: scale(1.15) translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* 抵当中チップ：斜線＋バッジで一目で分かるように */
.property-chip.mortgaged {
    filter: grayscale(0.7) brightness(0.8);
    outline: 2px solid rgba(231, 76, 60, 0.75);
    outline-offset: -1px;
}

.property-chip.mortgaged::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(0,0,0,0.28) 0px,
            rgba(0,0,0,0.28) 3px,
            rgba(255,255,255,0.12) 3px,
            rgba(255,255,255,0.12) 6px
        );
    mix-blend-mode: multiply;
    opacity: 0.9;
    pointer-events: none;
}

.property-chip.mortgaged::after {
    content: '抵';
    position: absolute;
    right: 1px;
    top: 1px;
    font-size: 0.55rem;
    line-height: 1;
    padding: 1px 2px;
    border-radius: 3px;
    background: rgba(231, 76, 60, 0.92);
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.35);
    pointer-events: none;
}

.status-badge {
    font-size: 0.65rem;
    background: rgba(255,255,255,0.1);
    padding: 3px 8px;
    border-radius: 20px;
    color: #ccc;
}

.status-badge.jail {
    background: linear-gradient(135deg, rgba(211, 47, 47, 0.3), rgba(211, 47, 47, 0.15));
    color: #ffcdd2;
    border: 1px solid rgba(211,47,47,0.4);
    animation: jailPulse 2s ease-in-out infinite;
}

@keyframes jailPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ===== モーダル ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: overlayIn 0.3s ease-out;
}

@keyframes overlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-overlay.hidden { display: none; }

.modal {
    /* ダーク・モンドリアンに合わせて：スクエア＋太枠＋紙面 */
    background: #fff;
    border: 4px solid #000;
    border-radius: 0;
    padding: 0; /* 子要素にpaddingを配分して、ヘッダー/本文/フッターを綺麗にする */
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 14px 14px 0 rgba(255,255,255,0.10);
    animation: modalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #111;
    position: relative;
    display: flex;
    flex-direction: column;
}

.modal::before {
    display: none;
}

/* 上部に細いアクセントライン（差し色） */
.modal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent-gold);
    pointer-events: none;
    opacity: 0.9;
}

/* ===== ルールブック（ヘルプ内） ===== */
.modal.rulebook-modal,
.rulebook-modal {
    max-width: 980px;
}

.rulebook-modal.modal {
    max-width: 980px;
}

.rulebook {
    text-align: left;
    color: #2b2b2b;
}

.rb-hero {
    margin-bottom: 1.25rem;
}

.rb-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.rb-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #1a1a1a;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.35), rgba(212, 175, 55, 0.15));
    border: 1px solid rgba(212, 175, 55, 0.35);
}

.rb-meta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.88rem;
    color: #444;
}

.rb-lead {
    margin: 0.5rem 0 0.75rem 0;
    font-size: 0.98rem;
    line-height: 1.75;
    color: #333;
}

.rb-quick {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 0.9rem;
}

.rb-card {
    background: linear-gradient(135deg, #fafafa 0%, #f3f3f3 100%);
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    padding: 1rem 1.05rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.rb-card h4 {
    margin: 0 0 0.65rem 0;
    font-size: 1.05rem;
    font-weight: 900;
    color: #1f1f1f;
}

.rb-callout {
    border-left: 5px solid var(--accent-gold);
}

.rb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.rb-table th,
.rb-table td {
    padding: 0.55rem 0.4rem;
    border-bottom: 1px solid #e6e6e6;
    vertical-align: top;
}

.rb-table th {
    width: 120px;
    color: #333;
    text-align: left;
    font-weight: 900;
    white-space: nowrap;
}

.rb-list {
    margin: 0.4rem 0 0 1.05rem;
}

.rb-list li {
    margin: 0.35rem 0;
}

.rb-toc {
    margin: 1rem 0 0.9rem 0;
}

.rb-toc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
}

.rb-link {
    display: block;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: white;
    border: 1px solid #e8e8e8;
    color: #2b2b2b;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.15s ease;
}

.rb-link:hover {
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

.rb-details {
    margin-top: 0.65rem;
    border-radius: 14px;
    border: 1px solid #e8e8e8;
    background: #fff;
    overflow: hidden;
}

.rb-details > summary {
    cursor: pointer;
    padding: 0.9rem 1.05rem;
    font-weight: 900;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.22), rgba(255,255,255,0.0));
    list-style: none;
}

.rb-details > summary::-webkit-details-marker {
    display: none;
}

.rb-details > summary::after {
    content: '▾';
    float: right;
    color: rgba(0,0,0,0.55);
    transition: transform 0.15s ease;
}

.rb-details[open] > summary::after {
    transform: rotate(180deg);
}

.rb-body {
    padding: 0.95rem 1.05rem 1.05rem 1.05rem;
    border-top: 1px solid #f0f0f0;
}

.rb-body h5 {
    margin: 0.75rem 0 0.25rem 0;
    font-size: 0.98rem;
    font-weight: 900;
}

.rb-steps {
    margin: 0.4rem 0 0 1.15rem;
}

.rb-steps li {
    margin: 0.35rem 0;
}

.rb-note {
    margin-top: 0.8rem;
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.03), rgba(212, 175, 55, 0.10));
    border: 1px solid rgba(212, 175, 55, 0.25);
    color: #2b2b2b;
}

.rb-footer {
    margin-top: 1rem;
}

@media (max-width: 780px) {
    .rb-quick { grid-template-columns: 1fr; }
    .rb-toc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rb-table th { width: 95px; }
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.35rem;
    font-weight: 900;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #fff;
    background: #000;
    border-bottom: 4px solid var(--accent-gold);
    padding: 1.05rem 1.2rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ===== モーダル内ボタン：モノトーン+差し色に統一（外のUIは変えない） ===== */
.modal .btn {
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}
.modal .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(0,0,0,0.16);
}
.modal .btn:active {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.14);
}

.modal .btn-primary {
    background: linear-gradient(135deg, #111 0%, #1e1e1e 100%);
    color: #fff;
    border: 2px solid rgba(212,175,55,0.85);
    box-shadow: 0 14px 28px rgba(0,0,0,0.22), 0 0 0 4px rgba(212,175,55,0.16);
}
.modal .btn-primary:hover {
    box-shadow: 0 18px 34px rgba(0,0,0,0.26), 0 0 0 4px rgba(212,175,55,0.22);
}

.modal .btn-outline {
    background: rgba(255,255,255,0.92);
    color: #111;
    border: 2px solid rgba(0,0,0,0.14);
    box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}
.modal .btn-outline:hover {
    border-color: rgba(212,175,55,0.55);
}

.modal .btn-secondary {
    background: linear-gradient(135deg, #2b2b2b 0%, #4a4a4a 100%);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.10);
}

.modal .btn-warning {
    background: linear-gradient(135deg, #ffcc00 0%, #ffb300 100%);
    color: #1a1a1a;
    border: 2px solid rgba(0,0,0,0.10);
    box-shadow: 0 14px 28px rgba(255,179,0,0.20);
}

.modal .btn-danger {
    background: linear-gradient(135deg, #b71c1c 0%, #e53935 100%);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.10);
}

.modal-content {
    margin: 0;
    line-height: 1.8;
    font-size: 1rem;
    color: #111;
    padding: 1.1rem 1.2rem 1.2rem;
    overflow: auto;
    flex: 1;
}

.modal-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    padding: 0.9rem 1.2rem 1.1rem;
    border-top: 2px solid #000;
    background: #fff;
}

/* モーダル本文のタイポグラフィ統一 */
.modal-content p { margin: 0.55rem 0; }

/* ===== モーダル内の初心者向け説明 ===== */
.modal-help {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.03) 0%, rgba(212, 175, 55, 0.10) 100%);
    border: 1px solid rgba(0,0,0,0.08);
    border-left: 5px solid rgba(212, 175, 55, 0.85);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    margin: 0.75rem 0 0.9rem 0;
    color: #333;
}
.modal-help p { margin: 0 0 0.45rem 0; }
.modal-help ul {
    margin: 0;
    padding-left: 1.2rem;
    color: #444;
}
.modal-help li { margin: 0.25rem 0; }
.modal-subtle { color: #555; font-size: 0.95rem; }
.modal-content ul, .modal-content ol { margin: 0.55rem 0 0.55rem 1.2rem; }
.modal-content li { margin: 0.25rem 0; }
.modal-content h4, .modal-content h5 { margin: 0.9rem 0 0.45rem; }
.modal-content hr {
    margin: 0.9rem 0;
    border: 0;
    border-top: 1px solid rgba(0,0,0,0.12);
}

/* モーダル内の入力欄を統一（オンライン/取引/競売等） */
.modal-content input[type="text"],
.modal-content input[type="number"],
.modal-content input[type="password"],
.modal-content input[type="search"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(255,255,255,0.95);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
    font-size: 1rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.modal-content input[type="text"]:focus,
.modal-content input[type="number"]:focus,
.modal-content input[type="password"]:focus,
.modal-content input[type="search"]:focus {
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.28);
    outline: none;
}

.modal-content input[type="checkbox"] {
    accent-color: #2e7d32;
}

/* スクロールバー（Webkit系） */
.modal-content::-webkit-scrollbar { width: 10px; }
.modal-content::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.75);
}
.modal-content::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.26); }

/* 取引モーダル */
.trade-modal { max-width: 750px; }
.trade-content { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.trade-column {
    background: white;
    border-radius: 12px;
    padding: 1.1rem 1.1rem;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.trade-column h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: none;
    padding-bottom: 0;
}
.trade-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0.8rem;
    background: white;
    border-radius: 12px;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
    border: 1px solid #dee2e6;
    transition: all 0.2s;
    cursor: pointer;
    gap: 0.6rem;
}
.trade-item:hover {
    border-color: rgba(212, 175, 55, 0.55);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.trade-item input[type="checkbox"] { margin: 0; }
.trade-item-name { flex: 1; }

.trade-color-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.12);
    flex: 0 0 auto;
}
.trade-color-swatch.none {
    background: repeating-linear-gradient(45deg, rgba(0,0,0,0.12) 0 3px, rgba(0,0,0,0.05) 3px 6px);
}

/* ===== 競売モーダル：色チップ ===== */
.auction-property-title {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.auction-color-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.12);
    flex: 0 0 auto;
}
.auction-color-swatch.none {
    background: repeating-linear-gradient(45deg, rgba(0,0,0,0.12) 0 3px, rgba(0,0,0,0.05) 3px 6px);
}
/* 旧: .trade-item:hover は上で統一済み（重複定義を避ける） */

/* 取引/抵当：統一モーダル幅 */
.modal.trade-mode { max-width: 1100px; width: 95%; }
.modal.mortgage-mode { max-width: 900px; width: 95%; }

.trade-target-btn {
    width: 100%;
    margin-bottom: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.75rem 0.9rem;
}
.trade-target-name {
    flex: 1;
    text-align: left;
    font-weight: 700;
}
.trade-target-money {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: #495057;
}

.mortgage-list {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 2px;
}
.mortgage-tag {
    color: #6c757d;
    font-size: 0.85em;
    font-weight: 600;
}
.mortgage-note {
    color: #adb5bd;
    font-size: 0.8rem;
    font-weight: 700;
}

/* 物件詳細モーダル - リッチデザイン */
.property-modal { max-width: 880px; width: 95%; }

/* 購入/競売 選択モーダル（統一デザイン） */
.modal.purchase-mode {
    max-width: 980px;
}
.purchase-unified .payment-balance {
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
}

/* ===== 固定解像度(1920x1080)モード: モーダル表示域を広げる ===== */
body.auto-scale .modal-overlay {
    /* #app が transform されているため、fixed だとスケールの影響を受けやすい。
       #app 内基準で全面に広げる */
    position: absolute;
    padding: 12px;
}

body.auto-scale .modal {
    /* 560px だと横画面スマホで狭いので拡大 */
    max-width: 1320px;
    max-height: calc(100% - 24px);
}

body.auto-scale .trade-modal { max-width: 1500px; }
body.auto-scale .property-modal { max-width: 1100px; }
body.auto-scale .rulebook-modal { max-width: 1700px; }

/* PCブラウザ版（マウス操作が主）のときは、横に間延びしないようモーダル幅を控えめに */
body.auto-scale.desktop-ui .modal { max-width: 980px; }
body.auto-scale.desktop-ui .trade-modal { max-width: 1100px; }
body.auto-scale.desktop-ui .property-modal { max-width: 900px; }
body.auto-scale.desktop-ui .rulebook-modal { max-width: 1200px; }

/* 物件詳細：競売モーダル寄せ（統一感） */
.property-owner-badge {
    justify-content: center;
}
.property-unified .rent-table td {
    padding: 0.55rem 0.6rem;
}
.property-unified .rent-table td:last-child {
    text-align: right;
    font-weight: 800;
}

/* プロパティカード風コンテナ */
.property-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.8);
    border: 1px solid rgba(0,0,0,0.08);
    margin-bottom: 1rem;
}

/* カラーヘッダー */
.property-card-header {
    padding: 1.2rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.property-card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 50%);
    pointer-events: none;
}

.property-card-header .property-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

.property-card-header .property-name {
    font-family: 'Oswald', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: inherit;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin: 0;
}

.property-card-header .property-type {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.8;
    margin-top: 0.3rem;
}

/* カード本体 */
.property-card-body {
    padding: 1.2rem 1.5rem;
}

/* プロパティ詳細（従来互換） */
.property-details {
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    margin-bottom: 1rem;
    border: 1px solid #e8e8e8;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}

.property-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 0.95rem;
}

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

.property-detail-row span:first-child {
    color: #666;
    font-weight: 500;
}

.property-detail-row span:last-child {
    font-weight: 700;
    color: #1a1a1a;
}

/* 価格バッジ */
.price-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

/* 家賃テーブル - リッチ版 */
.rent-table {
    width: 100%;
    font-size: 0.9rem;
    margin-top: 0.8rem;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.rent-table td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid #f0f0f0;
}

.rent-table tr:last-child td {
    border-bottom: none;
}

.rent-table td:first-child {
    color: #666;
    font-weight: 500;
    width: 55%;
}

.rent-table td:last-child {
    font-weight: 700;
    color: #1a1a1a;
    text-align: right;
}

.rent-table tr:nth-child(even) {
    background: #fafafa;
}

.rent-table .current {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.08) 100%) !important;
    font-weight: 700;
}

.rent-table .current td {
    color: #8d6e35;
}

.rent-table .current td:last-child {
    color: #6b5a2e;
}

/* 所有者バッジ */
.owner-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    margin-top: 0.8rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.owner-badge .owner-label {
    opacity: 0.9;
    font-size: 0.85rem;
}

.owner-badge .owner-name {
    font-size: 1rem;
}

/* 抵当中バッジ */
.mortgaged-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    border-radius: 8px;
    margin-top: 0.6rem;
    font-weight: 600;
    font-size: 0.9rem;
}

/* 建物表示 */
.building-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    border-radius: 8px;
    margin-top: 0.6rem;
    font-weight: 600;
}

/* 競売モーダル - リデザイン */
.modal.auction-mode {
    max-width: 800px;
    width: 95%;
}

.auction-modal-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
    align-items: start;
    text-align: left;
    padding: 0.5rem;
}

@media (max-width: 768px) {
    .auction-modal-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.auction-left-col {
    display: flex;
    justify-content: center;
    width: 100%;
}

.auction-right-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

/* 権利書カードデザイン (Property Deed Card Style) */
.auction-deed-card {
    width: 100%;
    max-width: 280px;
    background: white;
    border: 1px solid #333;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    padding: 10px;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    background: #fff;
    margin: 0 auto;
}

.auction-deed-header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #333;
    margin-bottom: 8px;
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    position: relative;
}

.auction-deed-header-text {
    z-index: 1;
    padding: 0 10px;
    line-height: 1.2;
}

.auction-deed-body {
    border: 2px solid #333;
    padding: 1.5rem 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 120px;
}

.auction-deed-name {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #111;
    font-family: 'Noto Sans JP', sans-serif;
}

.auction-deed-sub {
    font-size: 0.8rem;
    color: #666;
    font-family: 'Noto Sans JP', sans-serif;
    margin-top: 5px;
}

/* 右側のパネル */
.auction-status-box {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid #e9ecef;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.auction-status-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #adb5bd;
    letter-spacing: 1px;
    margin-bottom: 0.2rem;
    font-weight: 700;
}

.auction-current-price {
    font-size: 3rem;
    font-weight: 800;
    color: #2c3e50;
    font-family: 'Oswald', sans-serif;
    display: inline-block;
    padding: 0.08rem 0.6rem;
    border-radius: 14px;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.auction-leader-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #f8f9fa;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    font-size: 0.9rem;
    color: #495057;
    font-weight: 600;
    border: 1px solid #dee2e6;
}

.auction-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.auction-info-card {
    background: white;
    border-radius: 10px;
    padding: 0.8rem;
    text-align: center;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.auction-info-value {
    font-size: 1.6rem;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
    color: #333;
}

.auction-timer-value.urgent {
    color: #e74c3c;
    animation: urgentPulse 1s infinite;
}

@keyframes urgentPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* コントロールエリア */
.auction-controls-area {
    background: #f1f3f5;
    border-radius: 12px;
    padding: 1.2rem;
    border: 1px solid #dee2e6;
}

.auction-input-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.auction-bid-input {
    width: 140px;
    height: 50px;
    font-size: 2rem;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    border: 2px solid #ced4da;
    border-radius: 8px;
    outline: none;
    transition: all 0.2s;
    background: white;
    color: #333;
}

.auction-bid-input:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.auction-currency-symbol {
    font-size: 2rem;
    color: #495057;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
}

.auction-bid-hint {
    text-align: center;
    font-size: 0.8rem;
    color: #6c757d;
}

/* 参加者状況 */
.auction-participants-area {
    margin-top: 0.5rem;
    background: #f8f9fa;
    padding: 0.8rem;
    border-radius: 10px;
    border: 1px solid #e9ecef;
}

.auction-participants-label {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.auction-participants-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.auction-participant-chip {
    font-size: 0.85rem;
    padding: 6px 12px;
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 20px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    font-weight: 500;
}

.auction-participant-chip.active {
    background: white;
    color: #2c3e50;
    border-color: #adb5bd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.auction-participant-chip.passed {
    background: #f1f3f5;
    color: #adb5bd;
    border-color: #e9ecef;
    opacity: 0.8;
}

.auction-participant-chip.leader {
    background: #ffcc00;
    color: #1a1a1a;
    border-color: #ffb300;
    font-weight: 700;
    box-shadow:
        0 6px 16px rgba(255, 179, 0, 0.28),
        0 0 0 4px rgba(255, 204, 0, 0.22);
}

.auction-player-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
    flex: 0 0 10px;
}

/* 終了画面用 */
.auction-result-layout {
    text-align: center;
    padding: 2rem 1rem;
}

.auction-result-box {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.auction-result-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #155724;
    margin-bottom: 0.5rem;
}

.auction-result-winner {
    font-size: 2.2rem;
    font-weight: 800;
    color: #0b2e13;
    margin-bottom: 0.5rem;
}

.auction-result-price {
    font-size: 1.5rem;
    color: #155724;
    font-family: 'Oswald', sans-serif;
}

.auction-result-empty {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
}

/* 独占達成モーダル */
.monopoly-celebration {
    text-align: center;
    padding: 1rem 0;
}

.monopoly-celebration .celebration-icon {
    font-size: 4rem;
    margin-bottom: 0.5rem;
    animation: celebrateBounce 0.6s ease-out;
}

@keyframes celebrateBounce {
    0% { transform: scale(0) rotate(-10deg); }
    50% { transform: scale(1.2) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.monopoly-celebration .celebration-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0.5rem 0;
}

.monopoly-celebration .celebration-desc {
    font-size: 1rem;
    color: #555;
    line-height: 1.7;
}

.monopoly-celebration .celebration-benefits {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.monopoly-celebration .benefit-item {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 0.8rem 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ヒントボックス */
.hint-box {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
    border: 1px solid #ffeaa7;
    border-radius: 10px;
    margin-top: 1rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #856404;
}

.hint-box .hint-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* 支払いモーダル */
.payment-display {
    text-align: center;
    padding: 0.5rem 0;
}

.payment-amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: #e74c3c;
    font-family: 'Oswald', sans-serif;
    margin: 0.5rem 0;
}

.payment-to {
    font-size: 1rem;
    color: #666;
    margin-bottom: 1rem;
}

.payment-balance {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: #f8f9fa;
    border-radius: 50px;
    font-size: 0.95rem;
}

.payment-balance.insufficient {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    color: #c0392b;
}

/* 盤面の回転 */
.cell[data-pos="11"] .cell-content, .cell[data-pos="12"] .cell-content, .cell[data-pos="13"] .cell-content,
.cell[data-pos="14"] .cell-content, .cell[data-pos="15"] .cell-content, .cell[data-pos="16"] .cell-content,
.cell[data-pos="17"] .cell-content, .cell[data-pos="18"] .cell-content, .cell[data-pos="19"] .cell-content { transform: rotate(90deg); }

.cell[data-pos="21"] .cell-content, .cell[data-pos="22"] .cell-content, .cell[data-pos="23"] .cell-content,
.cell[data-pos="24"] .cell-content, .cell[data-pos="25"] .cell-content, .cell[data-pos="26"] .cell-content,
.cell[data-pos="27"] .cell-content, .cell[data-pos="28"] .cell-content, .cell[data-pos="29"] .cell-content { transform: rotate(180deg); }

.cell[data-pos="31"] .cell-content, .cell[data-pos="32"] .cell-content, .cell[data-pos="33"] .cell-content,
.cell[data-pos="34"] .cell-content, .cell[data-pos="35"] .cell-content, .cell[data-pos="36"] .cell-content,
.cell[data-pos="37"] .cell-content, .cell[data-pos="38"] .cell-content, .cell[data-pos="39"] .cell-content { transform: rotate(-90deg); }

/* ===== パーティクル/紙吹雪コンテナ ===== */
#effects-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

/* 紙吹雪 */
.confetti {
    position: absolute;
    width: 12px;
    height: 12px;
    opacity: 0;
    animation: confettiFall 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes confettiFall {
    0% { opacity: 1; transform: translateY(-20px) rotate(0deg) scale(1); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: translateY(100vh) rotate(1080deg) scale(0.5); }
}

/* スパーク */
.spark {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-gold) 0%, transparent 70%);
    box-shadow: 0 0 10px var(--accent-gold), 0 0 20px var(--accent-gold-glow);
}

/* お金が降るエフェクト */
.money-particle {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0;
    animation: moneyFall 2s ease-out forwards;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

@keyframes moneyFall {
    0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1.2); }
    100% { opacity: 0; transform: translateY(200px) rotate(360deg) scale(0.5); }
}

/* フローティングテキスト */
.floating-text {
    position: absolute;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--accent-gold);
    text-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 0 30px var(--accent-gold-glow);
    animation: floatUp 1.5s ease-out forwards;
    white-space: nowrap;
}

@keyframes floatUp {
    0% { opacity: 1; transform: translateY(0) scale(0.8); }
    50% { opacity: 1; transform: translateY(-30px) scale(1.1); }
    100% { opacity: 0; transform: translateY(-60px) scale(0.9); }
}

/* 負のお金（支払い）用 */
.floating-text.negative {
    color: #e53935;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 0 30px rgba(229, 57, 53, 0.5);
}

/* 勝利エフェクト用のスターバースト */
.starburst {
    position: absolute;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.8) 0%, transparent 70%);
    border-radius: 50%;
    animation: starburstPulse 0.8s ease-out forwards;
}

@keyframes starburstPulse {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(3); opacity: 0; }
}

/* リング波紋 */
.ripple {
    position: absolute;
    border: 3px solid var(--accent-gold);
    border-radius: 50%;
    animation: rippleExpand 1s ease-out forwards;
}

@keyframes rippleExpand {
    0% { width: 0; height: 0; opacity: 1; }
    100% { width: 200px; height: 200px; opacity: 0; margin-left: -100px; margin-top: -100px; }
}

/* 画面フラッシュ */
.screen-flash {
    position: fixed;
    inset: 0;
    background: white;
    animation: flashFade 0.3s ease-out forwards;
    pointer-events: none;
}

@keyframes flashFade {
    0% { opacity: 0.5; }
    100% { opacity: 0; }
}

/* ゲーム開始テキスト */
.game-start-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--ui-scale, 1));
    transform-origin: center center;
    font-family: 'Oswald', sans-serif;
    font-size: 6rem;
    font-weight: 900;
    color: var(--accent-gold);
    text-shadow: 
        0 0 20px var(--accent-gold-glow),
        0 0 40px var(--accent-gold-glow),
        0 4px 10px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.2em;
    z-index: 10000;
    pointer-events: none;
    animation: gameStartSlide 2s ease-out forwards;
    white-space: nowrap;
}

@keyframes gameStartSlide {
    0% {
        transform: translate(-150%, -50%) scale(calc(0.8 * var(--ui-scale, 1)));
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(var(--ui-scale, 1));
        opacity: 1;
    }
    80% {
        transform: translate(-50%, -50%) scale(var(--ui-scale, 1));
        opacity: 1;
    }
    100% {
        transform: translate(50%, -50%) scale(calc(0.8 * var(--ui-scale, 1)));
        opacity: 0;
    }
}

/* 破産時の暗転 */
.screen-darken {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    animation: darkenPulse 1.5s ease-in-out forwards;
    pointer-events: none;
}

@keyframes darkenPulse {
    0% { opacity: 0; }
    30% { opacity: 0.8; }
    100% { opacity: 0; }
}

/* 勝利時のレインボー枠 */
.victory-border {
    position: fixed;
    inset: 0;
    border: 8px solid;
    border-image: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000) 1;
    animation: victoryBorderAnim 2s linear infinite, victoryBorderFade 5s ease-out forwards;
    pointer-events: none;
}

@keyframes victoryBorderAnim {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes victoryBorderFade {
    0%, 80% { opacity: 1; }
    100% { opacity: 0; }
}

/* レスポンシブ（スマホは auto-scale で“PC固定レイアウト”を維持するため無効化） */
@media (max-width: 1100px) {
    body:not(.auto-scale) .game-container { flex-direction: column; align-items: center; }
    body:not(.auto-scale) .left-panel { width: 100%; max-width: 650px; height: auto; max-height: 280px; }
    body:not(.auto-scale) .board-area { order: 1; }
    body:not(.auto-scale) .left-panel { order: 2; }
    body:not(.auto-scale) .side-panel { order: 3; width: 100%; max-width: 650px; height: auto; max-height: 320px; }
    body:not(.auto-scale) .board { width: min(65vh, 100%); }
}

@media (max-width: 600px) {
    body:not(.auto-scale) .header { padding: 0.6rem 1rem; }
    body:not(.auto-scale) .header-title { font-size: 1.2rem; }
    body:not(.auto-scale) .board-area { padding: 0.5rem; }
    body:not(.auto-scale) .board { border-width: 8px; }
    body:not(.auto-scale) .cell-name { font-size: 0.46rem; }
    body:not(.auto-scale) .cell-price { font-size: 0.42rem; }
    body:not(.auto-scale) .dice { --dice-size: 64px; }
}

/* スクロールバー */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }

/* ===== スマホ：縦画面の表示領域内に盤面と操作を配置 ===== */
.mobile-toolbar, .mobile-actions, .mobile-current-space, .mobile-player-details,
.mobile-pager, .mobile-extra-action { display: none; }

html.mobile-root {
    font-size: var(--mobile-font-size, 16px) !important;
}

body.mobile-ui {
    position: fixed;
    inset: 0;
    min-height: 0;
    overflow: hidden;
}

body.mobile-ui #app {
    left: var(--viewport-left, 0px);
    top: var(--viewport-top, 0px);
    width: var(--viewport-width, 100vw);
    height: var(--viewport-height, 100vh);
    transform: none;
    transform-origin: initial;
    will-change: auto;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
        env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

body.mobile-ui .header {
    height: 42px;
    min-height: 42px;
    padding: 0 8px;
    border-bottom-width: 2px;
    position: relative;
}
body.mobile-ui .header-title {
    font-size: 16px;
    gap: 5px;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
body.mobile-ui .logo-icon { font-size: 17px; animation: none; }
body.mobile-ui .header-controls { display: none; }
body.mobile-ui .header-right { min-width: 0; max-width: 48%; }
body.mobile-ui .turn-indicator {
    min-width: 0;
    padding: 3px 5px;
    gap: 4px;
    border: 0;
    box-shadow: none;
    font-size: 11px;
    white-space: nowrap;
}
body.mobile-ui .turn-name { display: inline-flex; gap: 3px; align-items: center; min-width: 0; }
body.mobile-ui .turn-player-label { overflow: hidden; text-overflow: ellipsis; }
body.mobile-ui .turn-color { width: 7px; height: 7px; flex-shrink: 0; }

body.mobile-ui .game-container {
    --board-size: var(--mobile-board-size, 300px);
    height: auto;
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 6px 6px 4px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 70px minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
}
body.mobile-ui .left-panel { display: none; }
body.mobile-ui .side-panel {
    grid-row: 1;
    width: 100%;
    height: 70px;
    min-width: 0;
    border: 0;
    background: none;
}
body.mobile-ui .side-panel > .panel-header { display: none; }
body.mobile-ui .players-panel {
    padding: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
}
body.mobile-ui .player-card {
    padding: 4px 3px;
    margin: 0;
    min-width: 0;
    height: 70px;
    border-width: 1px;
    border-bottom: 3px solid var(--token-color, #555);
    box-shadow: none;
    transform: none;
}
body.mobile-ui .player-card::before { display: none; }
body.mobile-ui .player-card-header {
    height: 30px;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    margin: 0;
    gap: 1px;
}
body.mobile-ui .player-info { gap: 3px; min-width: 0; }
body.mobile-ui .player-avatar { display: none; }
body.mobile-ui .player-token-swatch { width: 7px; height: 7px; flex-basis: 7px; box-shadow: none; }
body.mobile-ui .player-name {
    font-size: 10px;
    min-width: 0;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.mobile-ui .player-money { font-size: 17px; line-height: 1.15; margin: 0 0 0 10px; }
body.mobile-ui .player-properties, body.mobile-ui .player-status { display: none; }
.mobile-property-cards { display: none; }
body.mobile-ui .mobile-property-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: 13px;
    gap: 3px 2px;
    margin-top: 2px;
}
body.mobile-ui .mobile-property-card {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 2px;
    background: var(--property-color);
    box-shadow: 0 1px 1px #000;
}
body.mobile-ui .mobile-property-card > span {
    color: var(--property-ink);
    font: 700 8px/8px Arial, sans-serif;
}
body.mobile-ui .mobile-property-card.mortgaged {
    background: repeating-linear-gradient(135deg, transparent 0 3px, #fff9 3px 4px), var(--property-color);
}
body.mobile-ui .mobile-no-properties { grid-column: 1 / -1; font-size: 9px; color: #aaa; }
body.mobile-ui .player-card.jailed .player-name::before { content: '刑 '; color: #ffb300; }
body.mobile-ui .player-card.bankrupt .player-name::before { content: '× '; }
body.mobile-ui .mobile-player-details {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 2;
}

body.mobile-ui .board-area {
    grid-row: 2;
    width: var(--board-size);
    height: var(--board-size);
    justify-self: center;
    overflow: hidden;
    border: 1px solid var(--accent-gold);
}
body.mobile-ui .board {
    height: var(--board-size);
    border: 2px solid #000;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    transform: none;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    grid-template-rows: repeat(11, minmax(0, 1fr));
}
body.mobile-ui .board:hover { transform: none; }
body.mobile-ui .cell, body.mobile-ui .cell.corner {
    border-width: 1px;
    margin: 0;
    min-width: 0;
    min-height: 0;
}
body.mobile-ui .cell:hover { transform: none; box-shadow: none; }
body.mobile-ui .cell .cell-content {
    transform: none;
    padding: 1px;
    min-height: 0;
    min-width: 0;
}
body.mobile-ui .cell .cell-name {
    font-size: clamp(6.5px, calc(var(--board-size) / 40), 11px);
    line-height: 1.05;
    letter-spacing: 0;
    margin: 0;
    max-width: 100%;
    text-wrap: balance;
}
body.mobile-ui .cell-type-chest .cell-name {
    font-size: clamp(6px, calc(var(--board-size) / 46), 10px);
}
body.mobile-ui .cell-price, body.mobile-ui .cell-icon { display: none; }
body.mobile-ui .cell-color-bar { height: 16%; flex-shrink: 0; border-bottom-width: 1px; }
body.mobile-ui .house-icon { font-size: 5px; }
body.mobile-ui .cell-content.has-icon-bg::before { font-size: 17px; opacity: 0.12; }
body.mobile-ui .cell-owner {
    position: absolute;
    bottom: 1px;
    left: 1px;
    width: 6px;
    height: 6px;
    border: 1px solid white;
    border-radius: 50%;
    font-size: 0;
    z-index: 2;
}
body.mobile-ui .cell-owner.my-property-owner::after {
    content: '✓';
    position: absolute;
    inset: -1px;
    color: #fff;
    font: 700 6px/6px Arial, sans-serif;
    text-align: center;
    text-shadow: 0 1px 1px #000;
}
body.mobile-ui .cell.my-property { box-shadow: inset 0 0 0 1px #ffffff80; }
body.mobile-ui .cell.mortgaged .cell-content::after { top: 0; right: 0; padding: 1px; font-size: 6px; box-shadow: none; }
body.mobile-ui .tokens-container, body.mobile-ui .cell.corner .tokens-container {
    --token-size: clamp(7px, calc(var(--board-size) / 30), 13px);
    --slot: calc(var(--token-size) * 0.55);
    --active-scale: 1.06;
    padding: 1px;
}
body.mobile-ui .player-token {
    font-size: 6px;
    outline: 0;
    background: radial-gradient(circle at 30% 24%, #ffffffaa, transparent 55%), var(--token-color, #999);
    box-shadow: 0 1px 3px #0008, inset 0 1px 2px #fff8;
}
body.mobile-ui .player-token::before { inset: 1px; border: 0; box-shadow: none; }
body.mobile-ui .table-objects, body.mobile-ui .monopoly-watermark { display: none; }
body.mobile-ui .center-panel {
    width: 68%;
    height: 68%;
    padding: 5px;
    gap: 5px;
    justify-content: center;
}
body.mobile-ui .mobile-current-space {
    display: block;
    max-width: 100%;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    color: #333;
}
body.mobile-ui .dice-container { gap: 14px; margin: 2px 0; }
body.mobile-ui .dice { --dice-size: 40px; --pip-size: 6px; filter: drop-shadow(0 2px 5px #0003); }
body.mobile-ui .dice-total { min-height: 16px; margin: 0; font-size: 14px; line-height: 1.2; letter-spacing: 0; }
body.mobile-ui .guide-message {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 5px;
    font-size: 12px;
    line-height: 1.35;
    border: 0;
    border-left: 3px solid var(--mondrian-yellow);
    box-shadow: none;
    color: #111;
    background: #f0f0f0;
    text-align: center;
}
body.mobile-ui .mobile-actions { grid-row: 3; display: block; min-height: 44px; }
body.mobile-ui .action-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
body.mobile-ui .action-buttons > :only-child { grid-column: 1 / -1; }
body.mobile-ui .action-buttons .mobile-secondary-action { display: none; }
body.mobile-ui .action-buttons .mobile-extra-action { display: flex; }
body.mobile-ui .action-buttons .btn {
    min-height: 44px;
    justify-content: center;
    padding: 4px 5px;
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: 0;
    gap: 3px;
}
body.mobile-ui .action-buttons .btn-outline { color: #fff; border-color: #fff; }
body.mobile-ui .btn:hover { transform: none; box-shadow: none; }
body.mobile-ui .mobile-toolbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex-shrink: 0;
    gap: 3px;
    padding: 0 6px 3px;
    height: 47px;
}
body.mobile-ui .mobile-toolbar button {
    min-height: 44px;
    padding: 0 2px;
    border: 1px solid #555;
    color: #f5d77a;
    background: #151515;
    font: 700 11px 'Noto Sans JP', sans-serif;
}

/* 長い一覧は前へ・次へで切り替え、指でスクロールせずに操作する。 */
body.mobile-ui .modal-overlay {
    position: absolute;
    padding: max(6px, env(safe-area-inset-top, 0px)) max(6px, env(safe-area-inset-right, 0px))
        max(6px, env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
    backdrop-filter: none;
    animation: none;
}
body.mobile-ui .modal {
    width: 100%;
    max-width: 560px;
    max-height: 100%;
    min-height: 0;
    border-width: 2px;
    box-shadow: none;
    animation: none;
}
body.mobile-ui .modal-title { flex-shrink: 0; padding: 10px; font-size: 16px; line-height: 1.25; }
body.mobile-ui .modal-title:empty { display: none; }
body.mobile-ui .modal-content {
    padding: 10px;
    min-height: 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.5;
    scroll-behavior: auto;
}
body.mobile-ui .modal-buttons {
    flex-shrink: 0;
    padding: 6px;
    gap: 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.mobile-ui .modal-buttons:empty { display: none; }
body.mobile-ui .modal-buttons > :only-child { grid-column: 1 / -1; }
body.mobile-ui .modal button { min-height: 44px; }
body.mobile-ui .modal .btn { min-height: 44px; padding: 6px 8px; font-size: 13px; line-height: 1.3; justify-content: center; letter-spacing: 0; white-space: normal !important; }
body.mobile-ui .modal input:not([type="checkbox"]):not([type="range"]),
body.mobile-ui .modal select, body.mobile-ui .modal textarea { font-size: 16px !important; min-height: 40px; max-width: 100%; }
body.mobile-ui .modal input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; }
body.mobile-ui .modal-help { padding: 7px; margin: 6px 0; border-radius: 4px; font-size: 12px; }
body.mobile-ui .modal-subtle { font-size: 12px; }
body.mobile-ui .modal-content h4, body.mobile-ui .modal-content h5 { margin: 8px 0 4px; }
body.mobile-ui .modal-content p { margin: 5px 0; }
body.mobile-ui .mobile-unfold { max-height: none !important; height: auto !important; overflow: visible !important; }
body.mobile-ui .mobile-pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    padding: 4px 6px;
    border-top: 1px solid #ddd;
    background: #f4f4f4;
    font-size: 12px;
    color: #111;
    text-align: center;
}
body.mobile-ui .mobile-pager[hidden] { display: none; }
body.mobile-ui .mobile-pager button { min-height: 44px; border: 1px solid #bbb; background: #fff; color: #111; font: 700 13px 'Noto Sans JP', sans-serif; }
body.mobile-ui .mobile-pager button:disabled { opacity: 0.35; }
body.mobile-ui .auction-modal-layout { display: flex; flex-direction: column; gap: 8px; padding: 0; align-items: stretch; }
body.mobile-ui .auction-deed-card { max-width: none; padding: 4px; box-shadow: none !important; }
body.mobile-ui .auction-deed-header { display: none; }
body.mobile-ui .auction-deed-body { min-height: 0; padding: 5px; }
body.mobile-ui .auction-deed-name { font-size: 17px; margin: 0; }
body.mobile-ui .auction-deed-sub { font-size: 11px; margin-top: 2px; color: #444; }
body.mobile-ui .auction-right-col { gap: 8px; }
body.mobile-ui .auction-mode .auction-left-col { display: none; }
body.mobile-ui .auction-mode .auction-right-col { gap: 5px; }
body.mobile-ui .auction-status-box { padding: 7px; border-radius: 4px; box-shadow: none; }
body.mobile-ui .auction-status-label { font-size: 11px; margin: 0; color: #555; }
body.mobile-ui .auction-current-price { font-size: 30px; margin-bottom: 4px; }
body.mobile-ui .auction-leader-badge { font-size: 12px; padding: 3px 6px; color: #222; max-width: 100%; flex-wrap: wrap; justify-content: center; }
body.mobile-ui .auction-leader-badge strong { min-width: 0; overflow-wrap: anywhere; }
body.mobile-ui .auction-info-grid { gap: 6px; }
body.mobile-ui .auction-info-card { padding: 5px; border-radius: 4px; box-shadow: none; }
body.mobile-ui .auction-info-value { font-size: 20px; }
body.mobile-ui .auction-controls-area { padding: 8px; border-radius: 4px; }
body.mobile-ui .auction-bid-input { width: 100px; height: 44px; }
body.mobile-ui .auction-bid-hint, body.mobile-ui .mortgage-note { color: #444; }
body.mobile-ui .auction-participants-area { padding: 6px; }
body.mobile-ui .auction-participants-list { gap: 4px; }
body.mobile-ui .auction-participant-chip { padding: 4px 6px; font-size: 10px; }
body.mobile-ui .auction-mode .auction-participants-area { padding: 4px; }
body.mobile-ui .auction-mode .auction-participants-label { font-size: 10px; line-height: 1.2; margin-bottom: 3px; }
body.mobile-ui .auction-mode .auction-participants-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
body.mobile-ui .auction-mode .auction-participant-chip { display: block; min-width: 0; padding: 2px 4px; border-width: 1px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mobile-ui .rent-table td, body.mobile-ui .rent-table th { padding: 4px 5px; font-size: 12px; }
body.mobile-ui .trade-content { grid-template-columns: minmax(0, 1fr); gap: 8px; }
body.mobile-ui .trade-column { padding: 8px; border-radius: 4px; }
body.mobile-ui .trade-item { min-height: 44px; padding: 6px; margin-bottom: 4px; font-size: 13px; border-radius: 4px; }
body.mobile-ui .trade-item > span { min-width: 0; }
body.mobile-ui .mortgage-item { display: grid; grid-template-columns: 14px minmax(0, 1fr); }
body.mobile-ui .mortgage-item > .btn, body.mobile-ui .mortgage-item > div { grid-column: 1 / -1; }
body.mobile-ui .payment-amount { font-size: 32px; margin: 3px 0; }
body.mobile-ui .payment-to, body.mobile-ui .payment-balance { font-size: 13px; }
body.mobile-ui .property-detail-row { padding: 5px 0; font-size: 13px; flex-wrap: wrap; gap: 4px; }
body.mobile-ui .setting-control { min-width: 0 !important; width: 100%; display: flex; align-items: center; gap: 6px; }
body.mobile-ui .setting-control input { flex: 1; min-width: 0; width: 100%; height: 44px; }
body.mobile-ui .setting-control > span { white-space: nowrap; margin-left: 0 !important; }
body.mobile-ui #profile-icon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
body.mobile-ui #profile-preview { max-width: 100%; flex-wrap: wrap; }
body.mobile-ui #profile-preview-name { max-width: 100%; overflow-wrap: anywhere; }
body.mobile-ui .hint-box { padding: 6px; font-size: 12px; }
body.mobile-ui .rb-quick, body.mobile-ui .rb-toc-grid { grid-template-columns: minmax(0, 1fr); }
body.mobile-ui .rb-card { padding: 8px; }
body.mobile-ui .game-start-text { font-size: 32px; letter-spacing: 0.04em; }
body.mobile-ui .mobile-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
body.mobile-ui .mobile-list-item { min-height: 44px; width: 100%; margin-bottom: 4px; text-align: left; }
.net-menu { text-align: left; line-height: 1.5; }
.net-help { margin: 0 0 14px; }
.net-room-label { display: block; font-weight: 700; margin-bottom: 5px; }
.net-room-input { width: 100%; padding: 10px; border: 1px solid #aaa; border-radius: 8px; font-size: 16px; }
.net-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0 8px; }
.net-list-heading .btn { min-height: 36px; padding: 6px 12px; }
.net-room-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; margin-bottom: 8px; border: 1px solid #ddd; border-radius: 10px; background: #f6f7f9; color: #222; }
.net-room-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.net-room-info > span, .net-room-info > small { font-size: 0.85em; color: #555; }
.net-room-actions { display: flex; gap: 6px; flex-shrink: 0; }
.net-room-actions .btn { padding: 8px 12px; min-height: 44px; }
.net-room-heading { display: flex; gap: 12px; justify-content: space-between; overflow-wrap: anywhere; }
.net-roster-player { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid #ddd; padding: 8px 0; }
.net-connecting { text-align: center; font-weight: 700; }
body.mobile-ui .net-room-card { align-items: flex-start; gap: 6px; padding: 8px; }
body.mobile-ui .net-room-actions { flex-direction: column; }
body.mobile-ui .mobile-property-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
body.mobile-ui .mobile-property-color { width: 18px; height: 28px; flex: 0 0 18px; border: 1px solid #888; border-radius: 3px; }
body.mobile-ui .mobile-property-info { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
body.mobile-ui .mobile-property-info > strong { font-size: 14px; overflow-wrap: anywhere; }
body.mobile-ui .mobile-property-info > small { font-size: 11px; font-weight: 400; }

body.mobile-ui.mobile-landscape .game-container {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 0.85fr);
    grid-template-rows: 144px minmax(0, 1fr);
}
body.mobile-ui.mobile-landscape .board-area { grid-column: 1; grid-row: 1 / -1; }
body.mobile-ui.mobile-landscape .side-panel { grid-column: 2; grid-row: 1; height: 144px; }
body.mobile-ui.mobile-landscape .players-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.mobile-ui.mobile-landscape .mobile-actions { grid-column: 2; grid-row: 2; width: 100%; }

@media (max-height: 500px) {
    body.mobile-ui .center-panel { gap: 3px; padding: 3px; }
    body.mobile-ui .dice { --dice-size: 32px; --pip-size: 5px; }
    body.mobile-ui .guide-message { padding: 3px; font-size: 11px; }
    body.mobile-ui .mobile-current-space { font-size: 11px; }
}

/* English labels need room for longer words, including on an iPhone SE. */
html[lang="en"] .cell .cell-name {
    font-size: var(--board-label-fit-size, min(0.72rem, calc(var(--board-size) / 66))) !important;
    line-height: 1.08;
    overflow-wrap: anywhere;
    word-break: normal;
    letter-spacing: 0;
}
html[lang="en"] .cell .cell-content { transform: none; min-width: 0; min-height: 0; }
html[lang="en"] .cell.corner .cell-name { max-width: 100%; }
html[lang="en"] .cell-price { font-size: min(0.65rem, calc(var(--board-size) / 80)); line-height: 1.1; }
html[lang="en"] body:not(.mobile-ui) .cell-owner { flex-shrink: 0; font-size: min(0.5rem, 10px); line-height: 1.1; }
html[lang="en"] body:not(.mobile-ui) .player-card-header { gap: 8px; flex-wrap: wrap; }
html[lang="en"] body:not(.mobile-ui) .player-info { flex: 1 1 180px; min-width: 0; gap: 8px; }
html[lang="en"] body:not(.mobile-ui) .player-avatar { flex-shrink: 0; }
html[lang="en"] body:not(.mobile-ui) .player-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: min(1rem, 22px);
    line-height: 1.2;
    letter-spacing: 0;
}
html[lang="en"] body:not(.mobile-ui) .player-money { flex-shrink: 0; font-size: min(1.5rem, 32px); }
html[lang="en"] body.mobile-ui .cell .cell-name {
    font-size: var(--board-label-fit-size, clamp(6px, calc(var(--board-size) / 44), 10px)) !important;
    line-height: 1.03;
}
html[lang="en"] .cell.mortgaged .cell-content::after,
html[lang="en"] .property-chip.mortgaged::after { content: 'M'; }
html[lang="en"] body:not(.mobile-ui) .cell.mortgaged .cell-content::after {
    top: calc(-1 * min(0.6rem, 16px));
    right: 2px;
    padding: 1px 3px;
    font-size: min(0.45rem, 10px);
    box-shadow: none;
}
html[lang="en"] body.mobile-ui .player-card.jailed .player-name::before { content: 'J '; }
.language-toggle { font-family: 'Oswald', sans-serif; font-weight: 700; }
.modal { position: relative; }
.modal-language-toggle {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--accent-gold);
    background: #111;
    color: var(--accent-gold);
    cursor: pointer;
}
.modal-language-toggle ~ .modal-title { padding-right: 60px; min-height: 52px; }
body.mobile-ui .modal-language-toggle ~ .modal-title { min-height: 44px; }
body.mobile-ui .modal-language-toggle { top: 0; }
html[lang="en"] body.mobile-ui .auction-mode .auction-status-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 4px;
    padding: 6px;
}
html[lang="en"] body.mobile-ui .auction-mode .auction-status-label { grid-column: 1 / -1; }
html[lang="en"] body.mobile-ui .auction-mode .auction-current-price {
    align-self: center;
    margin: 0;
    padding: 0 2px;
    font-size: 28px;
}
html[lang="en"] body.mobile-ui .auction-mode .auction-leader-badge {
    align-self: center;
    gap: 4px;
    padding: 2px 4px;
    font-size: 11px;
}
.language-settings { display: grid; gap: 12px; text-align: left; }
.net-mode.paused { color: #ffc76b; font-size: 0.8rem; white-space: normal; }
.player-card.disconnected { border-style: dashed; border-color: #d89d43; }
.player-card.disconnected .player-avatar::after {
    content: 'Ⅱ'; position: absolute; right: -3px; bottom: -3px;
    background: #1a1a1a; color: #ffc76b; border: 1px solid #ffc76b;
    border-radius: 4px; padding: 0 3px; font: bold 11px/15px sans-serif;
}
.player-card.disconnected .player-avatar { position: relative; }
.auction-paused { color: #7a4b00; font-size: 0.85rem; line-height: 1.4; }
.language-settings label { font-weight: 700; }
.language-settings select { width: 100%; min-height: 44px; padding: 8px; font: inherit; background: #fff; color: #111; border: 1px solid #999; border-radius: 4px; }
html[lang="en"] body.mobile-ui .action-buttons .btn { overflow-wrap: anywhere; font-size: 12px; }
html[lang="en"] body.mobile-ui .mobile-toolbar button { font-size: 10px; }