/* public/style.css */

/* 日本語フォント (Yuji Syuku推奨) */
@import url('https://fonts.googleapis.com/css2?family=Yuji+Syuku&display=swap');

:root {
    /* --- 設定変数 --- */
    --table-max-size: 650px;
    --player-area-length: 50px;
    --player-area-height-length: 50px;
    --hand-area-height: clamp(50px, 12vh, 90px);
    --grid-gap: 4px;
    
    /* --- テーマカラー (焦げ茶・金・白銀) --- */
    --theme-brown-dark: #2d1b15;   /* 深い焦げ茶 */
    --theme-brown-light: #5d4037;  /* 明るめの焦げ茶 */
    --theme-accent-gold: #ffd700;  /* 金 */
    --theme-accent-silver: #cebf97;/* 白銀 */
    
    /* ピンク系の変数を削除し、金色・茶色ベースに変更 */
    --border-glow: 1px solid rgba(255, 215, 0, 0.3); /* 金色の微かな発光 */
    
    /* 麻雀卓の色（既存維持） */
    --bg-color: #3a633a; 
    --table-bg: rgba(255, 255, 255, 0.1);
    --area-bg: rgba(249, 249, 249, 0.1);
}

body {
    font-family: 'Yuji Syuku', serif;
    
    /* --- 背景設定 (黒) --- */
    background-color: #000;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    
    color: #fff;
    margin: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    overflow-y: auto;
    
    display: flex;
    justify-content: center;
    align-items: center;
}


/* --- スタート画面・ロビー画面 (焦げ茶テーマ) --- */
#start-screen, #matching-screen {
    /* 変更点1: absolute を relative に変更し、絶対配置をやめる */
    position: relative;
    /* 変更点2: top, left, transform を削除 (ここではコメントアウトで表現) */
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    
    /* 変更点3: 上下に余白を持たせて配置 */
    margin: 2rem auto;
    
    /* 焦げ茶ベースの半透明背景 */
    background: rgba(30, 20, 15, 0.9);
    backdrop-filter: blur(5px);
    
    /* 金色の枠線をうっすら入れる */
    border: 1px solid rgba(139, 69, 19, 0.5);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.9), inset 0 0 10px rgba(255, 215, 0, 0.05);
    
    padding: 3rem 2rem;
    border-radius: 8px; /* 角を少し鋭角に */
    text-align: center;
    
    width: 85%;
    max-width: 420px;
    z-index: 1000;
    color: #fff;

    height: auto;
}

/* タイトルデザイン */
.title-container {
    margin-bottom: 2rem;
    position: relative;
}

.title-sub {
    font-size: 1rem;
    /* 白銀に変更 */
    color: var(--theme-accent-silver);
    /* ピンクのシャドウを削除し、白く光らせる */
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
    letter-spacing: 0.4em;
    font-weight: normal;
    margin-bottom: 0.5rem;
    animation: fadeInSlideDown 1s ease-out;
}

.title-main {
    font-size: 3.8rem;
    font-weight: normal;
    line-height: 1.1;
    
    /* 金色のグラデーション文字 */
    background: linear-gradient(to bottom, #fffbe6, #d4af37, #8a6e03);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    
    filter: drop-shadow(0 4px 5px rgba(0,0,0,1));
}

/* 入力フォームデザイン */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

input[type="text"], input[type="password"] {
    padding: 12px;
    font-size: 1.1rem;
    font-family: sans-serif;
    /* 背景を暗い茶色に */
    background: rgba(10, 5, 5, 0.6);
    border: none;
    border-bottom: 2px solid #5d4037;
    color: #e0e0e0;
    transition: all 0.3s;
    text-align: center;
}

input[type="text"]:focus, input[type="password"]:focus {
    outline: none;
    /* フォーカス時は金色に */
    border-bottom-color: var(--theme-accent-gold);
    background: rgba(20, 10, 10, 0.8);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* ボタンデザイン (共通) */
button {
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: bold;
    font-family: 'Yuji Syuku', serif;
    cursor: pointer;
    border: none;
    border-radius: 2px; /* 和風なので角丸を控えめに */
    color: #fff;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    margin-top: 10px;
    letter-spacing: 0.1em;
}

/* テーマボタン (焦げ茶グラデーション) */
.theme-btn, #register-btn, #create-room-btn, #join-room-btn, #random-match-btn {
    /* 赤みを消し、茶色～濃い茶色のグラデーションに変更 */
    background: linear-gradient(135deg, #5d4037, #2d1b15);
    border: 1px solid rgba(255, 215, 0, 0.2); /* 金色の枠線を薄く */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

.theme-btn:hover, #register-btn:hover, #create-room-btn:hover, #join-room-btn:hover, #random-match-btn:hover {
    /* ホバー時は少し明るく */
    background: linear-gradient(135deg, #795548, #3e2723);
    transform: translateY(-2px);
    /* ホバー時に金色の光を放つ */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
    border-color: rgba(255, 215, 0, 0.6);
}

.theme-btn:active {
    transform: translateY(1px);
}

/* CPU戦ボタン (深い緑で統一感を出す) */
#start-cpu-game-btn {
    background: linear-gradient(135deg, #2e5c31, #1b3a1d);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}
#start-cpu-game-btn:hover {
    background: linear-gradient(135deg, #3d7a40, #254d27);
    box-shadow: 0 0 15px rgba(46, 125, 50, 0.5);
}


/* ロビー画面の見出し調整 */
#matching-screen h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--theme-accent-silver); /* 白銀 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}
#matching-screen p {
    color: #aaa;
    font-size: 0.9rem;
}
.room-action h4 {
    margin: 15px 0 5px 0;
    color: var(--theme-accent-gold);
    font-size: 1.1rem;
}
#matching-screen hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 15px 0;
}


/* --- 金色の花びらアニメーション (赤み除去・リーフ型) --- */
.petal {
    position: absolute;
    /* 赤みを完全に排除し、純金～薄い金色のグラデーションに */
    background: linear-gradient(120deg, #ffd700, #f0e68c);
    box-shadow: 1px 1px 4px rgba(255, 215, 0, 0.6);
    
    border-radius: 100% 0 100% 0; /* リーフ型 */
    z-index: -1;
    animation: falling 10s infinite linear;
}

.p1 { 
    width: 12px; height: 20px; 
    top: -10%; left: 20%; 
    animation-duration: 9s; 
}
.p2 { 
    width: 8px; height: 14px; 
    top: -10%; left: 70%; 
    animation-duration: 13s; 
    animation-delay: 2s; 
    /* プラチナゴールド */
    background: linear-gradient(120deg, #fffacd, #eee8aa);
}
.p3 { 
    width: 16px; height: 26px; 
    top: -10%; left: 40%; 
    animation-duration: 11s; 
    animation-delay: 4s; 
}
.p4 { 
    width: 10px; height: 18px; 
    top: -10%; left: 90%; 
    animation-duration: 8s; 
    animation-delay: 1s; 
    /* 濃いめの金 */
    background: linear-gradient(120deg, #d4af37, #ffd700);
}

@keyframes falling {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(100px, 100vh) rotate(720deg); opacity: 0; }
}
@keyframes fadeInSlideDown {
    0% { transform: translateY(-20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
/* ------------------------------------------------ */

/* --- ゲーム画面レイアウト (Flex列配置) --- */
#game-screen {
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    
    /* iOSのセーフエリア対応 */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    position: relative;
}

/* 1. ヘッダー (上部固定・伸縮) */
.game-header {
    width: 100%;
    max-width: var(--table-max-size);
    height: 40px;
    flex-shrink: 0; /* 縮小させない */
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;

    /* --- 変更: 画像を指定 --- */
    background-image: url('/backgroundImage/wood-texture_dark.jpg');
    background-size: cover;   /* 枠に合わせて拡大縮小 */
    background-position: center;
    
    /* 暗い木目なら文字は白が見やすい */
    color: #fff; 
    /* 文字に影をつけて読みやすくする */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);

    border-bottom: 1px solid #ccc;
    border-radius: 0 0 4px 4px;
    margin-bottom: 5px;
}

.game-header h2 { font-size: 0.9rem; margin: 0; }
#game-info { font-size: 0.8rem; display: flex; align-items: center; gap: 5px; }
#game-info p { margin: 0; display: flex; align-items: center; }
#game-info img { height: 20px; vertical-align: middle; margin-left: 2px; }


/* 2. 麻雀卓エリア (レスポンシブ正方形) */
#mahjong-table {
    /* 幅の計算ロジックを変更:
       比率が 5:6 (縦長) になるため、高さ制限がより厳しくなります。
       高さの上限 = (100vh - 手牌高さ - ヘッダー高さ - 余白)
       幅の上限 = 高さの上限 × (5 / 6)
       これと、画面幅(96vw)の小さい方を採用します。
    */
    width: min(96vw, calc((100vh - var(--hand-area-height) - 60px) * (5 / 6)));
    max-width: var(--table-max-size);
    
    /* 横:縦 = 5:6 */
    aspect-ratio: 5 / 6;
    
    /* グリッドレイアウト定義 (変更) */
    display: grid;
    
    /* Columns (1~5): 4 : 4 : 1 : 1 */
    grid-template-columns: 4fr 4fr 1fr 1fr;
    
    /* Rows (1~7): 1 : 1 : 4 : 4 : 1 : 1 */
    grid-template-rows: 1fr 1fr 4fr 4fr 1fr 1fr;
    
    gap: var(--grid-gap);
    padding: 5px;
    box-sizing: border-box;
    
    background-color: var(--table-bg);

    /* 1. 内側の枠 (茶色) */
    border: 6px solid #8b5a2b; 
    
    /* 2. 外側の枠 (焦げ茶色) を box-shadow で表現 */
    /* 構文: xずれ yずれ ぼかし 広がり 色 */
    box-shadow: 
        0 0 0 6px #4a2c18,         /* 焦げ茶色の外枠 (ぼかし0、広がり6px) */
        0 10px 25px rgba(0,0,0,0.5); /* さらにその外側の影 (浮き上がり感) */

    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    
    flex-shrink: 0;
    margin: auto;
    position: relative;
}


/* --- プレイヤーエリア共通設定 --- */
.player-area {
    width: 100%;
    height: 100%;
    
    border: 1px solid #cccccc00;
    padding: 3px;
    border-radius: 4px;
    background: var(--area-bg);
    box-sizing: border-box;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 上詰め */
    overflow: hidden;
    position: relative;
}

/* --- プレイヤー情報エリア (h4等) の共通設定 --- */
.player-info-container {
    display: flex;
    justify-content: center;
    align-items: center;

    /* --- 変更: 画像を指定 --- */
    background-image: url('/backgroundImage/wood-texture_light.jpg');
    background-size: cover;
    background-position: center;
    
    /* 枠線と文字色 */
    border: 1px solid #5c3a21;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);

    border-radius: 4px;
    padding: 2px;
    overflow: hidden;
    z-index: 10; /* 捨て牌より手前に */
}
.player-info-container h4 {
    margin: 0;
    font-size: clamp(10px, 2.2vw, 14px);
    text-align: center;
    width: 100%;
}

/* --- 鳴き牌・華牌エリア (Wrapper) 共通設定 --- */
.extra-info-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20; /* 捨て牌より手前、情報より手前 */
    pointer-events: none; /* クリック透過 */
}
/* 内部のコンテナは描画JSで生成されるが、ここで方向などを強制してもよい */
.extra-info-wrapper .extra-info-container {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}


/* テキスト情報 */
.player-area h4 {
    font-size: clamp(10px, 2.5vw, 14px); /* 画面幅に応じて文字サイズ変動 */
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* --- 各プレイヤーの配置 (Grid & Transform) --- */

/* 1. Next Next Player (対面) */
/* Info: Col 1/3, Row 1/2 */
#info-area-next-next {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}
/* Discards: Col 1/2, Row 3/4 */
#opponent-area-of-next-next-player { 
    grid-column: 1 / 2; 
    grid-row: 3 / 4;
    transform: rotate(180deg);
}
/* Extra: Col 1/3, Row 2/3 */
#extra-info-next-next {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    transform: rotate(180deg);
}

/* 2. Next Player (右) */
/* Info: Col 4/5, Row 3/5 */
#info-area-next {
    grid-column: 4 / 5; 
    grid-row: 3 / 5;
    /* 縦長エリアなので縦書きレイアウトにする */
    writing-mode: vertical-rl; 
    text-orientation: upright;
}
/* Discards: Col 2/3, Row 3/5 */
#opponent-area-of-next-player { 
    grid-column: 2 / 3;    
    grid-row: 3 / 5;
    
    /* 高さを定義した変数に設定 */
    height: var(--player-area-length);
    width: var(--player-area-height-length);

    transform: rotate(-90deg);

    place-self: center;
}
/* Extra: Col 3/4, Row 3/5 */
#extra-info-next {
    grid-column: 3 / 4;
    grid-row: 3 / 5;
}
/* 右側のプレイヤーの鳴き牌エリア内の調整 --- */
/* コンテナ自体も縦並びにする */
#extra-info-next .extra-info-container {
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
/* 鳴き牌・華牌のブロックも縦並び対応 */
#extra-info-next .flower-area, 
#extra-info-next .melds-area {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: center;
    gap: 4px;
}
#extra-info-next .melds-area > div {
    display: flex;
    flex-direction: column; 
}
#extra-info-next img.tile {
    transform: none; 
    margin: 0;

    width: clamp(16px, 4vw, 26px);
    height: auto; /* 高さは自動 */
}


/* 牌自体のマージンを削除 */
#extra-info-next img.tile {
    margin: 0;
}

/* 3. My Player (自分) */
/* Info: Col 1/3, Row 6/7 */
#info-area-my {
    grid-column: 1 / 3;
    grid-row: 6 / 7;
}
/* Discards: Col 1/2, Row 4/5 */
#my-discards-container {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}
/* Extra: Col 1/3, Row 5/6 */
#extra-info-my {
    grid-column: 1 / 3;
    grid-row: 5 / 6;
}

/* (補足) player-areaからh4が消えるため、内部のpadding等を微調整 */
.player-area {
    padding: 2px;
    justify-content: space-between; /* 上下に要素を配置 */
}

/* --- 内部要素: 鳴き牌・華牌・捨て牌 --- */

/* 鳴き牌・華牌コンテナ */
.extra-info-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 2px;
    min-height: 16px;
    flex-shrink: 0;
}
.extra-info-container img.tile, .flower-area img.tile, .melds-area img.tile {
    /* エリア幅に対する相対サイズ、または固定最小値 */
    height: clamp(16px, 4vw, 26px);
    width: auto;
    border: 1px solid #aaa;
    background: #fff;
    border-radius: 2px;
}

/* 捨て牌プール (Gridレイアウト) */
.discard-pool {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 常に横6枚 */
    grid-auto-rows: auto; /* 高さは幅に合わせて自動 */
    gap: 1px;
    
    width: 100%;
    background: #eeeeee00;
    padding: 2px;
    box-sizing: border-box;
    border-radius: 3px;
    
    flex-grow: 1; /* 残りのスペースを埋める */
    align-content: start; /* 上詰め */
}

.discard-pool img.tile {
    width: 100%; /* セル幅いっぱい */
    height: auto; /* 比率維持 */
    margin: 0;
    border: none;
    vertical-align: bottom;
}


/* --- 3. 手牌エリア (画面下部固定) --- */
#tehai-area {
    width: 100%;
    height: var(--hand-area-height);
    
    background-color: #223e22; /* 少し濃い緑 */
    border-top: 3px solid #152915;
    box-sizing: border-box;
    flex-shrink: 0;
    
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
    
    /* 影をつけて浮き上がり感を出す */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.3);
}

/* 自分の手牌コンテナ */
#my-hand-area {
    width: 100%;
    height: 100%;
    max-width: 800px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1px;
}

/* 手牌の画像 */
#my-hand-area img.tile {
    /* ★変更: 横幅を (エリア幅 / 14) - 3px に設定 */
    width: calc((100% / 14) - 3px);
    
    /* ★変更: 高さは横幅に合わせて比率を維持 */
    height: auto;
    
    /* 以前の height: 85% や max-width 設定は削除/上書きされます */
    
    background-color: #fff;
    border-radius: 3px;
    border: 1px solid #000;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    
    cursor: pointer;
    transition: transform 0.1s;
    user-select: none;
}
/* ツモ牌（右端）の左に隙間を作る */
#my-hand-area img.tile.tsumo-tile {
    margin-left: 3px; /* 隙間の幅 */
}
/* リーチ時の捨て牌ハイライト */
.riichi-highlight {
    box-shadow: 0 0 6px 4px rgba(255, 255, 0, 0.8) !important; /* 黄色い発光 */
    border: 2px solid yellow !important;       /* 黄色い枠線 */
    z-index: 10;                               /* 他の牌より手前に表示 */
    transform: scale(1.1);                     /* 少し強調して大きく */
}
/* ★★★ 鳴き牌のハイライト (リーチより薄く) ★★★ */
.meld-highlight {
    box-shadow: 0 0 4px 1px rgba(255, 255, 200, 0.6) !important; /* 淡い光 */
    border: 2px solid #fffacd !important; /* レモン色の細枠 */
    z-index: 5;
    /* transform拡大はあえて行わず、控えめにする */
}
#my-hand-area img.tile:hover {
    transform: translateY(-8px); /* ホバーで浮く */
}
#my-hand-area img.tile.playable {
    cursor: pointer;
}


/* --- アクションボタン (フローティング) --- */
#my-turn-actions {
    position: absolute;
    /* 手牌エリアのすぐ上 */
    bottom: calc(var(--hand-area-height) + 20px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 90%;
    pointer-events: none; /* エリア自体はクリック透過 */
}

#my-turn-actions button {
    pointer-events: auto;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    font-size: 0.95rem;
    padding: 0.8em 1.2em;
    border: 2px solid white;
}

/* --- アクションボタン (Grid内配置に変更) --- */
#action-prompt {
    /* グリッド配置: 右側エリア (2/5) の 自分の鳴き牌列 (5/6) に配置 */
    grid-column: 2 / 5;
    grid-row: 5 / 6;
    
    /* 右寄せ・中央揃え */
    justify-self: end;
    align-self: center;

    /* 以前のモーダル風スタイル(背景や枠線)をリセット */
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    
    z-index: 100;
    text-align: right; 
    pointer-events: none; /* 余白クリックは透過 */

    /* ▼▼▼ ハイライトを追加 ▼▼▼ */
    /* 1. 薄い背景色をつけて領域をはっきりさせる */
    background-color: rgba(255, 255, 255, 0.9);

    /* 2. 黄色く光るような影をつけて目立たせる */
    box-shadow: 
        0 0 20px rgba(255, 223, 0, 0.7), /* 外側に広がる黄色い光 */
        0 4px 10px rgba(0,0,0,0.4);      /* 立体感を出す影 */

    /* 3. 見た目を整える */
    border-radius: 8px; /* 角丸 */
    border: 2px solid #fff; /* 白い枠線 */
    padding: 10px; /* 内側の余白 */
    /* ▲▲▲ ハイライト追加ここまで ▲▲▲ */
}
/* ボタンのスタイル調整 */
#action-prompt button { 
    margin: 0 0 0 5px; /* ボタン同士の左余白 */
    width: auto;       /* 幅を自動（文字数に合わせる） */
    display: inline-block;
    pointer-events: auto; /* ボタン自体はクリック可能にする */
    
    /* 邪魔にならないよう少し小さく */
    padding: 6px 12px;
    font-size: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
/* ロンボタン (赤) */
#action-ron-btn { 
    background-color: #dc3545; /* 赤 */
    border-color: #bd2130; 
}
#action-ron-btn:hover { 
    background-color: #c82333; 
}

/* ポン・カンボタン (青) */
#action-pon-btn, #action-kan-btn {
    background-color: #007bff; /* 青 */
    border-color: #0062cc;
}
#action-pon-btn:hover, #action-kan-btn:hover {
    background-color: #0069d9;
}

/* スキップボタン (灰色) */
#action-skip-btn { 
    background-color: #6c757d; /* 灰色 */
    border-color: #545b62;
}
#action-skip-btn:hover { 
    background-color: #5a6268; 
}


/* --- 余白エリア (今回は不要だがIDが残っている場合の保険) --- */
#margin-area { display: none; }
#center-info { display: none; }


/* --- リザルト・ゲームオーバー画面 (オーバーレイ) --- */
#result-overlay, #game-over-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    
    display: flex; 
    justify-content: center; 
    align-items: center;
    z-index: 2000;
    
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
#result-overlay.visible, #game-over-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

#result-modal, #game-over-modal {
    background: #fff; 
    padding: 20px; 
    border-radius: 10px;
    width: 90%; 
    max-width: 450px; 
    max-height: 85vh;
    overflow-y: auto; /* 縦スクロール */
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    color: #333;
}

/* リザルト内容の装飾 */
#result-yaku-list p { margin: 5px 0; font-size: 1rem; border-bottom: 1px dashed #eee; padding-bottom: 2px; }
#result-score-changes p { font-weight: bold; font-size: 1.1rem; margin: 5px 0; }
#result-score-changes p.positive { color: #28a745; }
#result-score-changes p.negative { color: #dc3545; }

/* --- リザルト画面の手牌表示 --- */
.result-hand-container {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* 下揃え */
    flex-wrap: wrap;
    gap: 2px;
    margin: 10px 0;
    padding: 10px;
    background: rgba(0, 0, 0, 0.05); /* 薄い背景 */
    border-radius: 6px;
    min-height: 40px;
}

/* 通常の手牌 */
.result-hand-container img.hand-tile {
    height: 40px; /* 少し大きめに */
    width: auto;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

/* 鳴き牌のグループ */
.result-hand-container .result-meld {
    display: flex;
    margin-left: 8px; /* 手牌との区切り */
    gap: 0;
}

.result-hand-container .result-meld img {
    height: 40px;
    width: auto;
    opacity: 0.9; /* 少し暗くして副露であることを表現 */
}

/* アニメーション用エリア */
#tulip-flipped-tiles, #dice-rolls-display { 
    display: flex; 
    gap: 5px; 
    flex-wrap: wrap; 
    justify-content: center;
    margin: 5px 0;
}
#tulip-flipped-tiles img { width: 30px; height: auto; }
.dice { 
    width: 30px; height: 30px; 
    font-size: 20px; 
    border: 1px solid #333; 
    border-radius: 4px;
    background: #fff;
    display: flex; justify-content: center; align-items: center; 
}

/* エフェクトテキスト */
#f7-effect-text { background-color: #e9f5e9; color: #28a745; padding: 5px; border-radius: 4px; }
#f4-effect-text { background-color: #fff8e1; color: #ffc107; padding: 5px; border-radius: 4px; }
#no-pon-effect-text { background-color: #e3f2fd; color: #007bff; padding: 5px; border-radius: 4px; text-align: center; }
#final-tip-total-text { background-color: #333; color: #fff; padding: 8px; border-radius: 4px; text-align: center; margin-top: 10px; }

#game-over-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}
#game-over-buttons button { flex: 1; }
/* 「もう一度遊ぶ」ボタン (オレンジ) */
#game-over-play-again-btn { 
    background-color: #fd7e14; /* 明るいオレンジ */
    border: 1px solid #e67e22;
}
#game-over-play-again-btn:hover { 
    background-color: #d35400; /* ホバー時は濃いオレンジ */
}

/* 「ロビーに戻る」ボタン (既存のまま灰色) */
#game-over-lobby-btn { 
    background-color: #6c757d; 
    border: 1px solid #545b62;
}
#game-over-lobby-btn:hover {
    background-color: #5a6268;
}