:root {
    --card-w: 52px;
    --card-h: 74px;
}

* { 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: 760px;
    margin: 16px auto;
    padding: 10px 14px;
    background: #fdfdf5;
    border: 2px solid #000;
}

h1 {
    text-align: center;
    background: #2f6f2f;
    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;
    font-weight: normal;
}
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, #result-screen button { display: block; margin: 16px auto; }

/* --- 対戦画面 --- */
#game-screen { max-width: 900px; }

#opponents { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.opponent { background: #eef; border: 1px solid #99a; padding: 6px 10px; text-align: center; min-width: 80px; }
.opponent.turn { border: 2px solid #cc0000; }
.opponent .name { font-weight: bold; }
.opponent .name.disconnected { text-decoration: line-through; color: #888; }
.opponent .disconnected-tag { color: #a60000; font-size: 0.75em; }
.opponent .count { font-size: 0.85em; margin-top: 4px; }
.opponent .finished-tag { color: #a60; font-size: 0.8em; }

.card-back-stack { display: flex; justify-content: center; height: 30px; margin-top: 4px; }
.card-back {
    width: 20px;
    height: 28px;
    background: #4466aa;
    border: 1px solid #000;
    background-image: repeating-linear-gradient(45deg, #5577bb 0, #5577bb 2px, #4466aa 2px, #4466aa 5px);
    margin-left: -12px;
}
.card-back:first-child { margin-left: 0; }

#table-area {
    background: #dff0d8;
    border: 1px solid #6a6;
    min-height: 110px;
    padding: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
/* 場に出された手を、流れるまでカードの山のように少しずつずらして積み重ねて表示する */
#trick-cards {
    position: relative;
    width: 100%;
    min-height: calc(var(--card-h) + 60px);
}
.trick-row {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.trick-row-name { font-size: 0.8em; margin-right: 2px; }
#turn-indicator { font-weight: bold; }

.badge {
    position: absolute;
    top: 6px;
    padding: 2px 8px;
    border: 1px solid #000;
    font-size: 0.8em;
    font-weight: bold;
    color: #000;
}
#revolution-badge { left: 6px; background: #ffb3b3; }
#shibari-badge { right: 6px; background: #b3e0ff; }

#game-log {
    background: #fff;
    border: 1px solid #999;
    margin-top: 10px;
    padding: 6px 10px;
    max-height: 100px;
    overflow-y: auto;
    font-size: 0.85em;
    line-height: 1.5;
}

#hand-area { margin-top: 14px; }
#hand-cards { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; min-height: var(--card-h); padding: 6px; }
.hand-controls { display: flex; justify-content: center; gap: 10px; margin-top: 8px; }

.card {
    position: relative;
    width: var(--card-w);
    height: var(--card-h);
    background: #fff;
    color: #000;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 3px;
    font-weight: bold;
    font-size: 1.05em;
    user-select: none;
    flex-shrink: 0;
}
.card.red { color: #cc0000; }
.card.joker { color: #7b3fbf; font-size: 0.8em; }
.card.selectable { cursor: pointer; }
.card.selected { border: 2px solid #cc0000; }

/* 同じ数字のカードをまとめて少し重ねて表示する。文字を左寄せにしているので、
   重なって隠れる右側ではなく見えている左端に数字・スートが表示され続ける。
   ホバー・選択中のカードは最前面に出して、埋もれて見えなくならないようにする。 */
.card-stack { display: flex; margin: 2px 6px 2px 0; }
.card-stack .card.stacked { margin-left: -20px; }
.card-stack .card:hover { z-index: 2; }
.card-stack .card.selected { z-index: 1; }

#ranking-list { max-width: 300px; margin: 16px auto; font-size: 1.1em; }
#ranking-list li { margin-bottom: 6px; }

/* --- チートパネル（隠しコマンドで開く） --- */
#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: 460px; max-height: 80vh; overflow-y: auto; }
#cheat-card-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 14px; }
#cheat-card-grid .card { width: 100%; height: 52px; font-size: 0.9em; }
#cheat-panel button { display: block; margin: 0 auto; }

@media (max-width: 480px) {
    :root { --card-w: 38px; --card-h: 56px; }
    .card { font-size: 0.8em; }
}