body {
    font-family: sans-serif;
    background-color: #f0f0f0;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    
    /* ★ 縦画面でのオーバーフローを厳密に管理 */
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#start-screen, #matching-screen {
    background-color: white;
    padding: 2em;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: center;
}

input[type="text"], input[type="password"] {
    padding: 0.5em;
    margin: 0.5em 0;
    width: 200px;
}

button {
    padding: 0.6em 1.2em;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}
button:hover { background-color: #0056b3; }

/* ★★★ ここから game-screen のレイアウト変更 ★★★ */

#game-screen {
    width: 100%; 
    height: 100vh; /* ★ 画面全体の高さ */
    max-width: none;
    background-color: #e9f5e9;
    border: none;
    border-radius: 0;
    padding: 0; /* ★ パディングをリセット */
    display: flex;
    flex-direction: column;
    box-sizing: border-box; 
    
    /* ★ iOSのノッチや下部バー(セーフエリア)を考慮 */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* ★★★ (修正) ヘッダーエリア ★★★ */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding: 2px 5px; /* ★ 左右に少しパディング */
    margin-bottom: 2px; 
    flex-shrink: 0; 
}
.game-header h2 {
    font-size: 0.9em;
    margin: 0;
}
#game-info {
    text-align: right;
    font-size: 0.8em; 
}
#game-info p {
    margin: 0; 
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#game-info img {
    margin-left: 4px;
}
/* ★★★ (修正ここまで) ★★★ */


/* ★★★ 新規: スマホ縦持ち用グリッドレイアウト ★★★ */
#mahjong-table {
    display: grid;
    /* ★ 縦持ちスマホ用にレイアウト変更 (1列x4行構成) */
    grid-template-columns: 1fr; /* ★ 1列のみ */
    grid-template-rows: auto auto auto 1fr; /* ★ 上から順に自動、最後(自分)が残り全部 */
    
    flex-grow: 1; /* ★ テーブルが残りの高さをすべて使う */
    gap: 2px; /* ★ ギャップをさらに縮小 */
    padding: 2px;
    box-sizing: border-box;
    min-height: 0; /* Flexbox/Grid の縮みバグ対策 */
}

/* --- プレイヤーエリアの共通スタイル --- */
.player-area {
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* --- プレイヤーエリアの配置 (★ 全て変更) --- */
#opponent-area-top {
    grid-column: 1 / 2; /* ★ 1列目 */
    grid-row: 1 / 2;    /* ★ 1行目 (対面) */
}

#opponent-area-left {
    grid-column: 1 / 2; /* ★ 1列目 */
    grid-row: 2 / 3;    /* ★ 2行目 (上家) */
}

/* --- 中央情報エリア --- */
#center-info {
    grid-column: 1 / 2; /* ★ 1列目 */
    grid-row: 3 / 4;    /* ★ 3行目 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.9em; 
    padding: 2px 0; /* ★ 縦の余白を縮小 */
}
#info-area .my-turn {
    color: #d32f2f;
    font-weight: bold;
}


/* --- 自分のエリア --- */
#my-area {
    grid-column: 1 / 2; /* ★ 1列目 */
    grid-row: 4 / 5;    /* ★ 4行目 (残り全部) */
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    
    /* ★ 自分のエリアは捨て牌と手牌で構成 */
    display: flex;
    flex-direction: column; 
    min-height: 0;
}

/* ★ opponent-area-left の内部レイアウト (変更なし) */
#opponent-area-left {
    flex-direction: column-reverse;
}


/* --- 相手コンテナのスタイル --- */
#opponent-area-top, #opponent-area-left {
    border: 1px solid #ccc;
    padding: 3px; /* ★ 縮小 */
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
}
#opponent-area-top.active-turn, 
#opponent-area-left.active-turn {
    border: 2px solid #ffc107;
}

/* --- 捨て牌エリアのレイアウト --- */
.discard-pool {
    background: #eee;
    padding: 3px; 
    min-height: 28px; /* ★ 縮小 */
    border-radius: 4px;
    display: grid;
    grid-template-columns: repeat(6, auto);
    justify-content: start;
    gap: 1px;
}

/* ★★★ (新規) 華牌と鳴き牌をまとめるコンテナ ★★★ */
.extra-info-container {
    display: flex;
    justify-content: space-between; /* ★ 両端に寄せる */
    align-items: flex-start; /* 上揃え */
    min-height: 20px;
    margin-top: 2px;
    padding-top: 2px;
}

.melds-area {
    /* ★ 既存のスタイルからマージンとボーダーを削除 */
    margin-top: 0; 
    padding-top: 0;
    border-top: none;
    flex-shrink: 0; /* ★ 鳴き牌は縮まない (右端寄せのため) */
}
.melds-area div {
    display: inline-block;
    margin-right: 3px; 
    margin-bottom: 1px;
}
.melds-area hr { display: none; }

.flower-area {
    /* ★ 既存のスタイルからマージンとボーダーを削除 */
    margin-top: 0; 
    padding-top: 0;
    border-top: none;
    min-height: 0; /* 高さはコンテナ側で管理 */
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    flex-grow: 1; /* ★ 華牌は左側で幅を取る */
}


/* --- 自分のエリアの内部 (変更) --- */
#my-discards-container {
    border: 1px solid #007bff;
    padding: 3px; /* ★ 縮小 */
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    flex-shrink: 0; /* ★ 自分の捨て牌エリアは縮まない */
}
#my-discards-container.active-turn {
    border: 2px solid #ffc107;
}

#my-hand-area {
    background: #c8e6c9;
    padding: 5px; 
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap; /* ★ 手牌が万が一収まらない場合は折り返す (保険) */
    margin-top: 3px; /* ★ 縮小 */
    
    flex-grow: 1; /* ★ 残りの高さをすべて取る */
    min-height: 10vh; /* ★ 最小高さを画面比率で指定 */
    
    /* ★ 手牌が中央下に集まるように */
    align-content: center;
    justify-content: center;
}

/* 自分の華牌エリア */
.my-flower-display {
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 3px; 
    margin-bottom: 3px; /* ★ 縮小 */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 25px; 
    gap: 1px;
    flex-shrink: 0; /* ★ 華牌エリアは縮まない */
}


/* --- 牌のサイズと回転 --- */
/* ★★★ (修正) 牌サイズを vw (画面幅) 基準に変更 ★★★ */
.tile {
    /* ★ 画面幅(vw)を基準にサイズを決定 */
    width: 6.9vw;    /* ★ 14枚並べられる幅 (100/14 = 7.14) */
    height: auto;    /* ★ 縦横比を維持 */
    margin: 0.1vw;   /* ★ マージンもvwに */
    
    /* ★ ただし、PCやタブレットで大きくなりすぎないように上限を設定 */
    max-width: 32px; 
    max-height: 48px;

    /* (既存のスタイル) */
    border: 1px solid #333;
    border-radius: 4px;
    background-color: #f7f7f7;
    vertical-align: middle;
    user-select: none;
    object-fit: contain;
}

.tile.small {
    /* ★ 小さい牌もvw基準に */
    width: 4.5vw;    /* ★ */
    height: auto;    /* ★ */
    
    /* ★ 上限 */
    max-width: 22px;
    max-height: 33px;
    
    margin: 1px;
}

/* ★ 対面 (Top) の牌は180度回転 (変更なし) */
#opponent-area-top .discard-pool .tile,
#opponent-area-top .melds-area .tile,
#opponent-area-top .flower-area .tile {
    transform: rotate(180deg);
}

/* ★ 上家 (Left) の牌 (★ 変更) */
/* ★ 新レイアウトではLeftも横向きに表示するため、回転を解除 */
#opponent-area-left .discard-pool .tile,
#opponent-area-left .melds-area .tile,
#opponent-area-left .flower-area .tile {
    transform: none; /* ★ 回転を解除 */
}
/* ★★★ (ここまで) ★★★ */


.tile.playable {
    cursor: pointer;
    border-color: #007bff;
    box-shadow: 0 0 8px #007bff;
}
.tile.playable:hover {
    opacity: 0.8;
}


/* --- アクションボタンの配置 (画面固定) --- */
/* ★★★ (修正) vh (画面高さ) 基準に変更 ★★★ */
#my-turn-actions {
    position: fixed; 
    /* ★ 画面下部から、手牌エリア(約10vh)の「上」に配置 */
    /* (10vh(手牌エリア) + env(safe-area-inset-bottom)(iOSバー) の上) */
    bottom: calc(10vh + env(safe-area-inset-bottom) + 5px); /* ★ 5pxはマージン */
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    min-height: 30px; 
    padding: 2px;
    text-align: center;
}
#my-turn-actions button {
    background-color: #28a745;
    margin: 2px;
    padding: 0.4em 0.8em; 
    font-size: 0.9em;
}
#my-turn-actions button:hover {
    background-color: #218838;
}
#my-turn-actions button#action-tsumo-btn {
    background-color: #dc3545;
}
#my-turn-actions button#action-tsumo-btn:hover {
    background-color: #c82333;
}


#action-prompt {
    position: fixed;
    /* ★ 画面の真ん中より少し下に */
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 150, 0.9);
    border: 2px solid #333;
    padding: 10px; 
    border-radius: 8px;
    z-index: 100;
    text-align: center;
}
#action-prompt button {
    margin: 3px; 
    padding: 8px 15px; 
    font-size: 0.9em;
}
#action-prompt button#action-ron-btn {
    background-color: #dc3545;
}
#action-prompt button#action-ron-btn:hover {
    background-color: #c82333;
}

/* --- スコアとチップ表示 (★ フォントサイズ調整) --- */
/* ★ セレクタをID指定に変更し、マージンを0に */
#opponent-area-top h4, #opponent-area-left h4, #my-discards-container h4 {
    font-size: 0.8em; 
    margin: 0; /* ★ 間の空白を削除 */
}
#opponent-area-top p, #opponent-area-left p, #my-discards-container p {
    margin: 0; /* ★ 間の空白を削除 */
    font-size: 0.75em; 
    color: #333;
    font-weight: bold;
}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★ (以下、モーダル関連のスタイルは変更なし) ★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* --- ラウンド結果オーバーレイ --- */
#result-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#result-modal {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}
#result-overlay.visible {
    opacity: 1;
}
#result-overlay.visible #result-modal {
    transform: scale(1);
}
#result-yaku-list p, #result-score-changes p,
#game-over-yaku-list p, #game-over-score-changes p {
    margin: 4px 0;
    font-size: 1.1em;
}
#result-score-changes p.positive,
#game-over-score-changes p.positive {
    color: #28a745;
    font-weight: bold;
}
#result-score-changes p.negative,
#game-over-score-changes p.negative {
    color: #dc3545;
}
#result-tip-details h3 {
    margin-bottom: 10px;
}
#tulip-animation-area {
    margin-bottom: 15px;
    padding-top: 10px;
    border-top: 1px dashed #ccc;
}
#tulip-flipped-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 40px;
}
.flipped-tile-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ddd;
    opacity: 0; 
    transform: translateY(10px);
    animation: fadeInTile 0.5s ease forwards;
}
@keyframes fadeInTile {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.flipped-tile-container span {
    font-size: 0.8em;
    font-weight: bold;
}
.flipped-tile-container span.hit { color: #dc3545; }
.flipped-tile-container span.miss { color: #aaa; }
.flipped-tile-container span.skip { color: #007bff; }
#dice-animation-area {
    margin-bottom: 15px;
    padding-top: 10px;
    border-top: 1px dashed #ccc;
}
#dice-rolls-display {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.dice-roll-container {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    opacity: 0;
    transform: scale(0.8);
    animation: fadeInDice 0.5s ease forwards;
}
@keyframes fadeInDice {
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.dice {
    width: 30px;
    height: 30px;
    border: 1px solid #333;
    border-radius: 4px;
    background-color: #f7f7f7;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #333;
}
.dice-roll-container span {
    font-size: 1.2em;
    font-weight: bold;
}
.dice-roll-container span.pinzoro {
    color: #dc3545;
    font-weight: bold;
}
#f7-effect-text, #f4-effect-text, #final-tip-total-text,
#no-pon-effect-text {
    font-weight: bold;
    font-size: 1.1em;
    margin: 5px 0;
    padding: 5px;
    border-radius: 4px;
}
#f7-effect-text { background-color: #e9f5e9; color: #28a745; }
#f4-effect-text { background-color: #fff8e1; color: #ffc107; }
#no-pon-effect-text { background-color: #e3f2fd; color: #007bff; }
#final-tip-total-text { background-color: #f0f0f0; color: #333; }
#result-next-round-timer {
    text-align: right;
    font-style: italic;
    color: #777;
    margin-top: 20px;
}

/* --- ゲームオーバーモーダル --- */
#game-over-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#game-over-modal {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    width: 90%;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
    max-height: 90vh;
    overflow-y: auto;
}
#game-over-overlay.visible {
    opacity: 1;
}
#game-over-overlay.visible #game-over-modal {
    transform: scale(1);
}
#game-over-scores p, #game-over-tips p {
    font-size: 1.1em;
    margin: 5px 0;
}
#game-over-scores p.negative {
    color: #dc3545;
    font-weight: bold;
}
#game-over-last-round {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}
#game-over-last-round h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.2em;
}
#game-over-last-round h4 {
    margin: 5px 0;
    font-size: 1.1em;
}
#game-over-yaku-list p, #game-over-score-changes p {
    font-size: 1.0em; 
    margin: 2px 0;
}
#game-over-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
}
#game-over-buttons button {
    padding: 10px 20px;
    font-size: 1em;
}
#game-over-buttons button#game-over-lobby-btn {
    background-color: #6c757d;
}
#game-over-buttons button#game-over-lobby-btn:hover {
    background-color: #5a6268;
}
#game-over-buttons button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}