:root {
    --tile-w: 40px;
    --tile-h: 56px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "MS Pゴシック", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
    background: #cde6f7 url("data:image/gif;base64,R0lGODlhCAAIAIAAAMzMzP///yH5BAAAAAAALAAAAAAIAAgAAAINhI+py+0Po5y02otnAQA7") repeat;
    color: #000;
    min-height: 100vh;
    font-size: 14px;
}

.screen { max-width: 900px; margin: 16px auto; padding: 10px 14px; background: #fdfdf5; border: 2px solid #000; }
h1 {
    text-align: center; background: #6b4a2f; color: #fff; padding: 6px;
    margin: -10px -14px 10px -14px; border-bottom: 2px solid #000; font-size: 1.4em;
}
h2, h3 { text-align: center; }
.hint { text-align: center; color: #333; font-size: 0.9em; }
.error { color: #cc0000; text-align: center; min-height: 1.2em; font-weight: bold; }

label { display: block; max-width: 300px; margin: 16px auto; text-align: center; }
input { display: block; width: 100%; margin-top: 6px; padding: 4px; border: 1px solid #000; font-size: 1em; background: #fff; }

button {
    cursor: pointer; border: 2px outset #d8d8d8; padding: 6px 14px;
    font-size: 1em; background: #d8d8d8; color: #000;
}
button:hover { background: #e6e6e6; }
button:active { border-style: inset; }
button:disabled { background: #aaa; color: #666; cursor: not-allowed; border-style: solid; }

.lobby-actions { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 24px; }
.join-row { display: flex; gap: 8px; }
.join-row input { width: 140px; text-align: center; letter-spacing: 2px; }

#open-room-list { list-style: none; padding: 0; max-width: 340px; margin: 10px auto; }
.open-room-item {
    background: #fff;
    border: 1px solid #999;
    padding: 6px 10px;
    margin-bottom: 4px;
    cursor: pointer;
}
.open-room-item:hover { background: #eef; }

#player-list { list-style: none; padding: 0; max-width: 300px; margin: 16px auto; }
#player-list li { background: #fff; border: 1px solid #999; padding: 4px 8px; margin-bottom: 4px; display: flex; justify-content: space-between; }
#room-screen button { display: block; margin: 16px auto; }

#game-screen { max-width: 900px; }

/* 卓（テーブル）：自分を下に、他家をその席順どおり左・対面・右に配置する */
#game-table {
    display: grid;
    grid-template-columns: minmax(70px, 1fr) minmax(140px, 2.6fr) minmax(70px, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
        ".    top    ."
        "left center right"
        ".    bottom .";
    gap: 6px;
    margin-bottom: 10px;
}
#seat-top { grid-area: top; }
#seat-left { grid-area: left; }
#seat-right { grid-area: right; }
#seat-bottom { grid-area: bottom; }
#seat-center {
    grid-area: center;
    background: #dcefff;
    border: 1px solid #7aa;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 90px;
    text-align: center;
}
#dora-indicators { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; justify-content: center; }
.dora-label { font-size: 0.8em; margin-right: 2px; }
#dora-indicators .tile { width: 26px; height: 34px; font-size: 1.1em; }

.seat {
    background: #eef;
    border: 1px solid #99a;
    padding: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.seat.turn { border: 2px solid #cc0000; }
.seat-info { font-size: 0.8em; text-align: center; white-space: nowrap; }
.seat-info .riichi-tag { color: #a60000; font-weight: bold; }
.seat-info .disconnected { text-decoration: line-through; color: #888; }
.seat-info .disconnected-tag { color: #a60000; font-size: 0.9em; }
.seat-body { display: flex; align-items: center; gap: 1px; flex-wrap: wrap; justify-content: center; }
#seat-top .seat-body, #seat-bottom .seat-body { flex-direction: column; }
#seat-left .seat-body { flex-direction: row; }
#seat-right .seat-body { flex-direction: row-reverse; }

/* 山（壁）：捨て牌との境目がわかるよう、山の内側（捨て牌に接する辺）にだけ線を引く */
.seat-wall { display: flex; gap: 1px; flex-wrap: wrap; justify-content: center; padding-bottom: 2px; }
#seat-top .seat-wall { flex-direction: row; border-bottom: 2px solid #557; padding-bottom: 3px; }
#seat-bottom .seat-wall { flex-direction: row; border-top: 2px solid #557; padding-top: 3px; }
#seat-left .seat-wall { flex-direction: column; border-right: 2px solid #557; padding-right: 3px; }
#seat-right .seat-wall { flex-direction: column; border-left: 2px solid #557; padding-left: 3px; }
.seat-wall .tile { width: 16px; height: 22px; font-size: 0.9em; }
.seat-wall .tile.wall-dora { border: 2px solid #cc9900; box-shadow: 0 0 3px #cc9900; }

/* 捨て牌：山のすぐ向こう側（卓の中央寄り）に並べる */
.seat-discards { display: flex; gap: 1px; flex-wrap: wrap; justify-content: center; max-width: 200px; }
.seat-discards .tile { width: 22px; height: 30px; font-size: 1em; }
.seat-discards .tile.called { opacity: 0.5; }

#hand-area { margin-top: 14px; }
#hand-tiles { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; min-height: var(--tile-h); padding: 6px; }

.tile {
    width: var(--tile-w);
    height: var(--tile-h);
    background: #f5f1e6;
    color: #000;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    font-size: 1.8em;
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
}
/* スートごとに色分けして、より絵として見分けやすくする（自作の配色、外部画像は使わない） */
.tile.suit-m { background: #fdf1de; color: #8a4a12; }
.tile.suit-p { background: #e2f0fd; color: #0b5aa0; }
.tile.suit-s { background: #e3f7e6; color: #1a7a34; }
.tile.suit-z { background: #fdf6df; color: #5a5024; }
.tile.honor-green { color: #0d7a2e; }
.tile.honor-red { color: #b3121f; }
.tile.red { color: #cc0000; }

#round-info { text-align: center; font-weight: bold; margin-bottom: 8px; }

#call-actions { background: #fff3cc; border: 2px solid #cc9900; padding: 8px; margin: 10px 0; text-align: center; }
#call-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

#hand-controls { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 8px; flex-wrap: wrap; }
#riichi-label { background: #eee; border: 1px solid #999; padding: 4px 8px; }
.tile.selected { border: 2px solid #cc0000; }
.tile.selectable { cursor: pointer; }
#you-score { text-align: center; font-weight: bold; }

#result-overlay, #match-end-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; z-index: 90;
}
#result-inner { background: #fdfdf5; border: 2px solid #000; padding: 20px; max-width: 460px; max-height: 80vh; overflow-y: auto; text-align: center; }
#result-body { margin-bottom: 14px; line-height: 1.6; }
#final-ranking { text-align: left; max-width: 300px; margin: 16px auto; }

#cheat-panel {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; z-index: 100;
}
#cheat-panel-inner { background: #fdfdf5; border: 2px solid #000; padding: 16px; max-width: 500px; max-height: 80vh; overflow-y: auto; }
#cheat-panel h3 { margin: 10px 0 6px; font-size: 1em; }
#cheat-tile-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-bottom: 14px; }
#cheat-tile-grid .tile { width: 100%; height: 44px; font-size: 1.4em; }
#cheat-remove-grid { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; min-height: 40px; background: #fee; border: 1px solid #c99; padding: 6px; }
#cheat-remove-grid .tile { font-size: 1.4em; }
#cheat-panel button { display: block; margin: 0 auto; }

.tile-back {
    color: #cfe0ff;
    background: #3c5a8a;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.10) 0, rgba(255,255,255,0.10) 3px, transparent 3px, transparent 7px);
}

@media (max-width: 480px) {
    :root { --tile-w: 32px; --tile-h: 46px; }
    .tile { font-size: 0.75em; }
}