* { box-sizing: border-box; }

:root {
  --felt: #1f6b3a;
  --felt-dark: #154d29;
  --panel: #ffffff;
  --ink: #222;
  --muted: #666;
  --accent: #d9534f;
  --accent-2: #f0ad4e;
  --card-w: 64px;
  --card-h: 92px;
}

html, body {
  margin: 0;
  height: 100%;
  font-family: "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  background: radial-gradient(circle at 50% 30%, var(--felt), var(--felt-dark));
  color: var(--ink);
}

.hidden { display: none !important; }

.screen { min-height: 100vh; }

/* ---------- タイトル / ロビー ---------- */
#screen-title, #screen-lobby {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.panel {
  background: var(--panel);
  border-radius: 16px;
  padding: 28px 32px;
  width: 100%;
  max-width: 640px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.panel h1 { margin: 0 0 20px; font-size: 26px; text-align: center; }
.panel h2 { margin: 0 0 12px; font-size: 22px; text-align: center; }

label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 16px; }
input[type="text"] {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
input.code { text-transform: uppercase; letter-spacing: 4px; font-weight: bold; margin-top: 0; }

.row { display: flex; gap: 10px; margin: 10px 0; align-items: center; }
.row > * { flex: 1; }

button {
  padding: 10px 14px;
  font-size: 15px;
  border: none;
  border-radius: 8px;
  background: #e9ecef;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.05s, filter 0.15s;
}
button:hover { filter: brightness(0.95); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.primary { background: var(--accent); color: #fff; }
button.subtle { background: transparent; color: var(--muted); }
button.tiny { padding: 2px 8px; font-size: 12px; flex: 0 0 auto; white-space: nowrap; }

.field-label { font-size: 14px; color: var(--muted); margin: 0 0 6px; }
.game-select { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.game-option {
  margin: 0;
  padding: 8px 10px;
  border: 2px solid #ddd;
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink);
}
.game-option input { display: none; }
.game-option:has(input:checked) { border-color: var(--accent); background: #fff5f5; }
.game-option .game-title { display: block; font-weight: bold; font-size: 14px; }
.game-option .game-desc { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
@media (max-width: 560px) { .game-select { grid-template-columns: 1fr 1fr; } }

.lobby-game { justify-content: center; margin-bottom: 8px; }
.lobby-game > * { flex: 0 0 auto; }
.lobby-game .field-label { margin: 0; }
select { padding: 6px 10px; font-size: 15px; border-radius: 8px; border: 1px solid #ccc; }

.divider { text-align: center; color: var(--muted); font-size: 13px; margin: 14px 0; }
.error { color: var(--accent); font-size: 14px; min-height: 1.2em; margin: 6px 0 0; }
.hint { color: var(--muted); font-size: 13px; text-align: center; margin: 8px 0; }

.room-code-label { font-size: 13px; color: var(--muted); text-align: center; margin: 0; }
.room-code {
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 10px;
  text-align: center;
  margin: 6px 0 16px;
  cursor: pointer;
  user-select: all;
}

.player-list { list-style: none; padding: 0; margin: 0 0 12px; }
.player-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
}
.player-list .badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-2);
  color: #fff;
}
.player-list .badge.cpu { background: #6c757d; }
.player-list .badge.me { background: #0d6efd; }
.player-list .spacer { flex: 1; }

/* ---------- ゲーム画面 ---------- */
#screen-game {
  display: grid;
  grid-template-columns: 1fr 260px;
  height: 100vh;
  overflow: hidden;
}

.table {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 12px;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}

#opponents {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.opponent {
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 8px 12px;
  min-width: 140px;
  text-align: center;
  color: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.opponent.current { border-color: var(--accent-2); box-shadow: 0 0 16px rgba(240, 173, 78, 0.6); }
.opponent.pickable { border-color: #fff; box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); }
.opponent.finished { opacity: 0.55; }
.opponent .name { font-weight: bold; }
.opponent .sub { font-size: 12px; opacity: 0.85; margin-bottom: 6px; }

.fan { display: flex; justify-content: center; min-height: calc(var(--card-h) * 0.65); }
.fan .card { margin-left: calc(var(--card-w) * -0.6); }
.fan .card:first-child { margin-left: 0; }
.fan.small { --card-w: 44px; --card-h: 62px; }
.pickable .fan .card { cursor: pointer; }
.pickable .fan .card:hover { transform: translateY(-12px); z-index: 2; }

/* 神経衰弱 */
#memory-area { display: none; }
.table.mode-memory #opponents, .table.mode-memory #me { display: none; }
.table.mode-memory { grid-template-rows: 1fr auto; }
.table.mode-memory #memory-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}
.table.mode-memory #center { justify-content: center; padding: 4px 0; min-height: 40px; flex: 0 0 auto; }

#scoreboard { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.score {
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 6px 14px;
  color: #fff;
  text-align: center;
  min-width: 110px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.score.current { border-color: var(--accent-2); box-shadow: 0 0 16px rgba(240, 173, 78, 0.6); }
.score .name { font-weight: bold; font-size: 14px; }
.score .pairs { font-size: 20px; font-weight: bold; }
.score .pairs small { font-size: 12px; font-weight: normal; opacity: 0.8; }

#board {
  /* 列数とカード幅は JS(fitMemoryBoard)が画面サイズから決める */
  display: grid;
  grid-template-columns: repeat(var(--cols, 13), var(--cw, 52px));
  grid-auto-rows: calc(var(--cw, 52px) * 1.4375);
  gap: var(--gap, 6px);
  justify-content: center;
  align-content: center;
  flex: 1;
  min-height: 0;
  width: 100%;
}
#board .slot { container-type: inline-size; width: 100%; height: 100%; }
#board .slot .card { width: 100%; height: 100%; }
#board .slot .card .rank { font-size: 40cqw; }
#board .slot .card .suit { font-size: 36cqw; }
#board .slot.taken .card { visibility: hidden; }
#board .slot.taken { border: 1px dashed rgba(255, 255, 255, 0.25); border-radius: 6px; }
#board .slot .card.pickable { cursor: pointer; }
#board .slot .card.pickable:hover { transform: translateY(-4px); box-shadow: 0 0 0 3px #fff, 0 4px 8px rgba(0, 0, 0, 0.4); }
#board .slot .card.flipping { animation: flip-in 0.3s ease-out; }
@keyframes flip-in { from { transform: rotateY(90deg); } to { transform: rotateY(0); } }

#center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  text-align: center;
}
#status { font-size: 20px; font-weight: bold; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
#status.my-turn { color: #ffe680; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: 0.6; } }

#toast {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  border-radius: 12px;
  padding: 8px 14px;
  font-weight: bold;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  animation: pop 0.25s ease-out;
}
#toast .card { --card-w: 40px; --card-h: 56px; }
@keyframes pop { from { transform: scale(0.7); opacity: 0; } }

#me {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  padding: 10px;
  color: #fff;
}
#my-info { font-weight: bold; margin-bottom: 8px; }
#my-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
#my-hand .card.new { animation: slide-in 0.4s ease-out; box-shadow: 0 0 0 3px var(--accent-2); }
@keyframes slide-in { from { transform: translateY(-40px); opacity: 0; } }

/* ポーカー */
#poker-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; }
#poker-hint { font-size: 13px; opacity: 0.9; }
#my-hand .card.selectable { cursor: pointer; }
#my-hand .card.selectable:hover { transform: translateY(-6px); }
#my-hand .card.selected { transform: translateY(-14px); box-shadow: 0 0 0 3px var(--accent-2), 0 6px 12px rgba(0, 0, 0, 0.4); }
#my-hand .card.selected::after { content: '捨てる'; position: absolute; bottom: -22px; left: 0; right: 0; font-size: 11px; color: var(--accent-2); text-align: center; }
#my-hand .card { position: relative; }
.table.mode-poker #my-hand { padding-bottom: 20px; }
.opponent .hand-name { font-size: 12px; color: #ffe680; font-weight: bold; min-height: 1.2em; }
.opponent .tag { display: inline-block; font-size: 11px; background: rgba(255, 255, 255, 0.2); border-radius: 4px; padding: 1px 6px; margin-left: 4px; }
.opponent.winner { border-color: #ffe680; box-shadow: 0 0 20px rgba(255, 230, 128, 0.7); }
.fan.reveal .card { margin-left: calc(var(--card-w) * -0.35); }
#show-result-btn {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* 大富豪 */
#daifugo-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; }
#daifugo-hint { font-size: 13px; opacity: 0.9; }
#pile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
#pile-label { font-size: 13px; opacity: 0.9; }
#pile-cards { display: flex; gap: 6px; min-height: var(--card-h); align-items: center; }
#pile-cards .empty { font-size: 14px; opacity: 0.6; }
#pile-cards .card { animation: pop 0.25s ease-out; }
.badge-rev {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-weight: bold;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 13px;
  margin-left: 8px;
  animation: pulse 1.2s infinite;
}
.table.mode-daifugo #my-hand .card.unplayable { opacity: 0.45; }
.table.mode-daifugo #my-hand .card.selectable { cursor: pointer; }
.table.mode-daifugo #my-hand .card.selectable:hover { transform: translateY(-6px); }
.table.mode-daifugo #my-hand .card.selected { transform: translateY(-14px); box-shadow: 0 0 0 3px var(--accent-2), 0 6px 12px rgba(0, 0, 0, 0.4); }
.table.mode-daifugo #my-hand .card.selected::after { content: none; }
.table.mode-daifugo #my-hand { padding-bottom: 16px; gap: 4px; }
.table.mode-daifugo #my-hand .card { --card-w: 52px; --card-h: 74px; }
.opponent .title-badge { display: inline-block; font-size: 11px; background: #ffe680; color: #333; border-radius: 4px; padding: 1px 6px; margin-left: 4px; }
.opponent.passed { opacity: 0.7; }
.opponent .count-big { font-size: 18px; font-weight: bold; }

/* 七並べ */
#sevens-board {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto 10px;
}
#sevens-board .slot { container-type: inline-size; aspect-ratio: 64 / 92; border-radius: 6px; }
#sevens-board .slot .card { width: 100%; height: 100%; }
#sevens-board .slot .card .rank { font-size: 40cqw; }
#sevens-board .slot .card .suit { font-size: 36cqw; }
#sevens-board .slot.empty { border: 1px dashed rgba(255, 255, 255, 0.25); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.35); font-size: 14px; }
#sevens-board .slot.next { border-color: rgba(255, 230, 128, 0.8); color: rgba(255, 230, 128, 0.8); }
#sevens-board .slot .card.placed { animation: pop 0.25s ease-out; }
#sevens-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; }
#sevens-hint { font-size: 13px; opacity: 0.9; }
.table.mode-sevens #my-hand .card { --card-w: 52px; --card-h: 74px; }
.table.mode-sevens #my-hand .card.unplayable { opacity: 0.45; }
.table.mode-sevens #my-hand .card.selectable { cursor: pointer; box-shadow: 0 0 0 2px var(--accent-2), 0 2px 4px rgba(0, 0, 0, 0.3); }
.table.mode-sevens #my-hand .card.selectable:hover { transform: translateY(-8px); }
.table.mode-sevens #center { justify-content: flex-start; padding-top: 6px; }
.opponent .tag.warn { background: rgba(217, 83, 79, 0.7); }

/* スピード */
.speed-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.speed-panel .stock { position: relative; }
.speed-panel .stock .count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.speed-panel .stock.empty .card { visibility: hidden; }
.speed-panel .stock.empty .count { display: none; }
.speed-panel .stock.empty::after { content: '山札なし'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: rgba(255,255,255,0.6); border: 1px dashed rgba(255,255,255,0.3); border-radius: 6px; }
.speed-panel .slots { display: flex; gap: 8px; }
.speed-panel .slot-empty { width: var(--card-w); height: var(--card-h); border: 1px dashed rgba(255, 255, 255, 0.3); border-radius: 6px; }
.speed-panel .card.selectable { cursor: pointer; box-shadow: 0 0 0 3px var(--accent-2), 0 2px 4px rgba(0, 0, 0, 0.3); }
.speed-panel .card.selectable:hover { transform: translateY(-8px); }
.speed-panel .card.flip-choice { cursor: pointer; box-shadow: 0 0 0 3px #7dd3fc; }
.speed-panel .card.unplayable { opacity: 0.6; }
.table.mode-speed .opponent { min-width: 0; padding: 10px 16px; }
.table.mode-speed .opponent .name { margin-bottom: 6px; }
#speed-center { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 6px 0 10px; }
.speed-pile { --card-w: 80px; --card-h: 115px; position: relative; }
.speed-pile .card.placed { animation: pop 0.2s ease-out; }
.speed-pile .card.target { box-shadow: 0 0 0 3px var(--accent-2), 0 4px 10px rgba(0, 0, 0, 0.5); }
.speed-pile .pile-count { position: absolute; right: -6px; top: -6px; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; border-radius: 10px; padding: 1px 6px; }
#speed-ready { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 130px; }
#ready-btn { font-size: 18px; padding: 12px 22px; animation: pulse 1s infinite; }
#speed-ready-hint { font-size: 12px; opacity: 0.9; text-align: center; }
.game-title small { font-size: 11px; color: var(--muted); font-weight: normal; margin-left: 4px; }

/* ぶたのしっぽ */
.table.mode-pigtail #opponents, .table.mode-pigtail #me { display: none; }
.table.mode-pigtail { grid-template-rows: auto 1fr; }
.table.mode-pigtail { grid-template-rows: 1fr auto; }
.table.mode-pigtail #memory-area { display: flex; flex-direction: column; gap: 8px; align-items: center; min-height: 0; overflow: hidden; }
.table.mode-pigtail #board { display: none; }
.table.mode-pigtail #center { justify-content: flex-start; padding-top: 12px; min-height: 56px; }
#ring-wrap {
  /* 大きさは JS(fitRing)が残りの高さと幅から決める */
  position: relative;
  width: var(--ring, 480px);
  height: var(--ring, 480px);
  margin: 0 auto;
  flex: 0 0 auto;
}
#ring { position: absolute; inset: 0; }
#ring .rslot {
  position: absolute;
  width: 7%;
  aspect-ratio: 64 / 92;
  transform: translate(-50%, -50%);
  border-radius: 4px;
}
#ring .rslot .card { width: 100%; height: 100%; }
#ring .rslot.gone { border: 1px dashed rgba(255, 255, 255, 0.18); }
#ring .rslot.gone .card { display: none; }
#ring .rslot .card.pickable { cursor: pointer; }
#ring .rslot .card.pickable:hover { transform: scale(1.25); z-index: 2; box-shadow: 0 0 0 3px #fff, 0 4px 8px rgba(0, 0, 0, 0.4); }
#ring-center {
  position: absolute;
  inset: 28%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  text-align: center;
}
#ring-pile { --card-w: 84px; --card-h: 120px; position: relative; }
#ring-pile .card.placed { animation: pop 0.25s ease-out; }
#ring-pile .empty { width: var(--card-w); height: var(--card-h); border: 2px dashed rgba(255, 255, 255, 0.35); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; opacity: 0.8; }
#ring-pile .pile-count { position: absolute; right: -8px; top: -8px; background: var(--accent); color: #fff; font-size: 12px; font-weight: bold; border-radius: 12px; padding: 2px 8px; }
#ring-label { font-size: 13px; opacity: 0.9; }
.score .pairs.bad { color: #ff9b9b; }
@media (max-width: 760px) {
  #ring-pile { --card-w: 56px; --card-h: 80px; }
}

/* ブラックジャック */
.table.mode-blackjack #opponents, .table.mode-blackjack #me { display: none; }
.table.mode-blackjack { grid-template-rows: auto 1fr; }
.table.mode-blackjack #bj-area { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.table.mode-blackjack #center { justify-content: flex-start; padding-top: 10px; }
#bj-area { display: none; }
#bj-players { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.bj-seat {
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 8px 14px;
  color: #fff;
  text-align: center;
  min-width: 150px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.bj-seat.dealer { min-width: 220px; }
.bj-seat.current { border-color: var(--accent-2); box-shadow: 0 0 16px rgba(240, 173, 78, 0.6); }
.bj-seat.me { border-color: rgba(255, 255, 255, 0.5); }
.bj-seat.out { opacity: 0.5; }
.bj-seat .name { font-weight: bold; }
.bj-seat .meta { font-size: 12px; opacity: 0.9; margin: 2px 0 6px; }
.bj-seat .cards { display: flex; justify-content: center; gap: 4px; min-height: var(--card-h); --card-w: 52px; --card-h: 74px; }
.bj-seat.dealer .cards { --card-w: 64px; --card-h: 92px; }

.bj-seat .cards .card.hole { background: repeating-linear-gradient(45deg, #2b5bd7 0 6px, #1e44a6 6px 12px); }
.bj-seat .total { font-size: 18px; font-weight: bold; margin-top: 4px; }
.bj-seat .total.bust { color: #ff9b9b; }
.bj-seat .total.bj { color: #ffe680; }
.bj-seat .verdict { font-size: 13px; font-weight: bold; margin-top: 2px; min-height: 1.2em; }
.bj-seat .verdict.win, .bj-seat .verdict.blackjack { color: #ffe680; }
.bj-seat .verdict.lose { color: #ff9b9b; }
.bj-seat .verdict.push { color: #cfe8ff; }
.chip { display: inline-block; background: #ffe680; color: #333; border-radius: 10px; padding: 0 8px; font-weight: bold; font-size: 12px; }
#bj-controls { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 8px; }
#bj-bet { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#bj-bet-buttons { display: flex; gap: 8px; }
#bj-bet-buttons button { min-width: 64px; background: #ffe680; font-weight: bold; }
#bj-actions { display: flex; gap: 10px; }
.bj-hint { font-size: 13px; color: #fff; opacity: 0.9; }
#bj-round { font-size: 13px; opacity: 0.85; }

/* ページワン */
#po-center { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 6px 0 10px; }
#po-deck, #po-top { --card-w: 80px; --card-h: 115px; position: relative; }
#po-deck .count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; font-size: 22px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); pointer-events: none; }
#po-deck .label { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font-size: 12px; color: #fff; opacity: 0.85; }
#po-deck .card.drawable { cursor: pointer; box-shadow: 0 0 0 3px var(--accent-2), 0 4px 10px rgba(0, 0, 0, 0.5); }
#po-deck .card.drawable:hover { transform: translateY(-6px); }
#po-top .card.placed { animation: pop 0.25s ease-out; }
#po-top .label { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font-size: 12px; color: #fff; opacity: 0.85; }
#po-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
#po-hint { font-size: 13px; opacity: 0.9; }
#po-declare-btn { font-size: 17px; padding: 10px 22px; animation: pulse 0.9s infinite; }
.table.mode-pageone #my-hand .card { --card-w: 56px; --card-h: 80px; }
.table.mode-pageone #my-hand .card.unplayable { opacity: 0.45; }
.table.mode-pageone #my-hand .card.selectable { cursor: pointer; box-shadow: 0 0 0 2px var(--accent-2), 0 2px 4px rgba(0, 0, 0, 0.3); }
.table.mode-pageone #my-hand .card.selectable:hover { transform: translateY(-8px); }
.table.mode-pageone #my-hand .card.drawn { box-shadow: 0 0 0 3px #7dd3fc; }
.table.mode-pageone #center { justify-content: flex-start; padding-top: 6px; }
.opponent .badge-po { display: inline-block; background: #ffe680; color: #333; font-weight: bold; border-radius: 6px; padding: 1px 8px; margin-left: 4px; font-size: 12px; }
.opponent .badge-po.alert { background: var(--accent); color: #fff; animation: pulse 0.9s infinite; }
.opponent button.accuse { margin-top: 4px; padding: 4px 10px; font-size: 12px; background: var(--accent); color: #fff; }

/* クレイジーエイト(色つきカード) */
.uno {
  --uno-color: #333;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 8px;
  background: var(--uno-color);
  border: 3px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  user-select: none;
  transition: transform 0.15s;
  flex-shrink: 0;
  overflow: hidden;
}
.uno.R { --uno-color: #d62828; }
.uno.Y { --uno-color: #e9b400; }
.uno.G { --uno-color: #2a9d3f; }
.uno.B { --uno-color: #1d63c4; }
.uno.W { --uno-color: #222; }
.uno::before {
  content: '';
  position: absolute;
  width: 70%;
  height: 80%;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  transform: rotate(-25deg);
}
.uno .face { position: relative; color: var(--uno-color); font-size: calc(var(--card-w) * 0.5); line-height: 1; text-shadow: 1px 1px 0 rgba(0,0,0,0.15); }
.uno .face.sym { font-size: calc(var(--card-w) * 0.42); }
.uno .corner { position: absolute; top: 3px; left: 5px; font-size: calc(var(--card-w) * 0.2); color: #fff; }
.uno.W::before { background: conic-gradient(#d62828 0 25%, #e9b400 0 50%, #2a9d3f 0 75%, #1d63c4 0); }
.uno.W .face { color: #fff; text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 0 2px #000; }
.uno.back { background: #222; }
.uno.back::before { background: #c8102e; }
.uno.back .face { color: #fff; font-size: calc(var(--card-w) * 0.28); font-style: italic; text-shadow: 0 0 3px #000; }
.table.mode-uno #my-hand .uno { --card-w: 56px; --card-h: 84px; }
.table.mode-uno #my-hand .uno.unplayable { opacity: 0.45; }
.table.mode-uno #my-hand .uno.selectable { cursor: pointer; box-shadow: 0 0 0 3px var(--accent-2), 0 2px 4px rgba(0, 0, 0, 0.3); }
.table.mode-uno #my-hand .uno.selectable:hover { transform: translateY(-8px); }
.table.mode-uno #my-hand .uno.drawn { box-shadow: 0 0 0 3px #7dd3fc; }
.table.mode-uno .fan.small .uno { --card-w: 40px; --card-h: 60px; margin-left: -22px; }
.table.mode-uno .fan.small .uno:first-child { margin-left: 0; }
.table.mode-uno #po-deck .uno.back .face { display: none; }
.table.mode-uno #po-deck .uno.drawable { cursor: pointer; box-shadow: 0 0 0 3px var(--accent-2), 0 4px 10px rgba(0, 0, 0, 0.5); }
.table.mode-uno #po-deck .uno.drawable:hover { transform: translateY(-6px); }
.table.mode-uno #po-top .uno.placed { animation: pop 0.25s ease-out; }
.table.mode-uno #center { justify-content: flex-start; padding-top: 6px; }
#uno-info { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font-size: 13px; min-width: 90px; }
#uno-info .dot { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
#uno-info .dot.R { background: #d62828; } #uno-info .dot.Y { background: #e9b400; } #uno-info .dot.G { background: #2a9d3f; } #uno-info .dot.B { background: #1d63c4; }
#uno-info .dir { font-size: 22px; }
#uno-colors {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  font-weight: bold;
  z-index: 12;
}
#uno-colors .swatches { display: flex; gap: 12px; }
#uno-colors .sw { width: 72px; height: 72px; border-radius: 50%; color: #fff; font-size: 18px; font-weight: bold; border: 4px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
#uno-colors .sw.R { background: #d62828; } #uno-colors .sw.Y { background: #e9b400; } #uno-colors .sw.G { background: #2a9d3f; } #uno-colors .sw.B { background: #1d63c4; }
#uno-colors .sw:hover { transform: scale(1.1); }
#uno-colors .subtle { color: #fff; }

/* 麻雀 */
.table.mode-mahjong #opponents, .table.mode-mahjong #me, .table.mode-mahjong #center { display: none; }
.table.mode-mahjong { grid-template-rows: 1fr; }
.table.mode-mahjong #mj-area { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; }
#mj-area { display: none; }
#mj-table {
  position: relative;
  width: min(100%, calc(100vh - 120px));
  aspect-ratio: 1;
  background: #2d6a3e;
  border: 6px solid #5a3d1e;
  border-radius: 10px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  overflow: hidden;
  --z: 24%;   /* 相手ゾーンの奥行き */
  --zb: 27%;  /* 自分ゾーンの奥行き */
}
.mj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--w, 30px);
  height: calc(var(--w, 30px) * 1.38);
  background: linear-gradient(#fffef8 0%, #f7f1df 70%, #e9d9a8 100%);
  border: 1px solid #b8a97a;
  border-bottom: calc(var(--w, 30px) * 0.16) solid #d8b45a;
  border-radius: calc(var(--w, 30px) * 0.12);
  user-select: none;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.mj svg { width: 100%; height: 100%; display: block; }
.mj.aka { background: linear-gradient(#fff7f7 0%, #fbe9e9 70%, #e9d9a8 100%); }
.mj.back { background: linear-gradient(#3b6fd8, #244aa6); border-color: #1d3a80; border-bottom-color: #16306b; }
.mj.side { transform: rotate(90deg); margin: 0 calc(var(--w, 30px) * 0.19); }
.mj.called { outline: 2px solid var(--accent-2); outline-offset: -1px; }
.mj.selectable { cursor: pointer; }
.mj.selectable:hover { transform: translateY(-6px); }
.mj.dim { opacity: 0.4; }
.mj.riichi-ok { box-shadow: 0 0 0 3px var(--accent-2); }
.mj.kan-ok { box-shadow: 0 0 0 3px #7dd3fc; }
.mj.drawn { margin-left: 12px; }
.mj.last { box-shadow: 0 0 0 3px #7dd3fc; }
.mj.win { margin-left: 10px; box-shadow: 0 0 0 3px #ffe680; }

/* 各家のゾーン(自分から見た配置にしてから回転) */
.mj-zone {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--z);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 2px 0;
}
.mj-zone[data-pos="bottom"] { bottom: 0; height: var(--zb); }
.mj-zone[data-pos="top"] { top: 0; transform: rotate(180deg); }
.mj-zone[data-pos="left"] { top: calc(50% - var(--z) / 2); left: calc(var(--z) / 2 - 50%); transform: rotate(90deg); }
.mj-zone[data-pos="right"] { top: calc(50% - var(--z) / 2); left: calc(50% - var(--z) / 2); transform: rotate(-90deg); }
.mj-zone .river { display: grid; grid-template-columns: repeat(6, var(--w)); gap: 2px; --w: 20px; min-height: calc(var(--w) * 1.38); justify-content: center; }
.mj-zone .river.wide { grid-template-columns: repeat(6, var(--w)); }
.mj-zone .outer { display: flex; align-items: flex-end; gap: 10px; }
.mj-zone .backs { display: flex; gap: 1px; --w: 17px; }
.mj-zone .melds { display: flex; gap: 6px; --w: 19px; }
.mj-zone .meld { display: flex; gap: 1px; align-items: flex-end; }
.mj-zone[data-pos="bottom"] .river { --w: 24px; }
.mj-zone[data-pos="bottom"] .melds { --w: 26px; }
.mj-zone[data-pos="bottom"] .hand { display: flex; gap: 3px; align-items: flex-end; --w: 38px; }

/* 中央 */
#mj-center {
  position: absolute;
  left: var(--z);
  top: var(--z);
  width: calc(100% - var(--z) * 2);
  height: calc(100% - var(--z) - var(--zb));
  background: rgba(0, 0, 0, 0.22);
  border-radius: 8px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
}
#mj-info { text-align: center; font-size: 12px; line-height: 1.3; }
#mj-info .round { font-size: 17px; font-weight: bold; }
#mj-dora { display: flex; align-items: center; gap: 3px; --w: 22px; font-size: 11px; }
.mj-side {
  position: absolute;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.mj-side .wind { font-weight: bold; font-size: 13px; }
.mj-side .wind.dealer { color: #ffe680; }
.mj-side .pts { font-size: 12px; }
.mj-side .riichi-stick { display: inline-block; width: 36px; height: 6px; background: #fff; border-radius: 3px; position: relative; vertical-align: middle; margin-left: 4px; }
.mj-side .riichi-stick::after { content: ''; position: absolute; left: 15px; top: 1px; width: 4px; height: 4px; border-radius: 50%; background: #e11d1d; }
.mj-side.current { border-color: var(--accent-2); box-shadow: 0 0 10px rgba(240, 173, 78, 0.6); }
.mj-side.s-bottom { bottom: 2px; left: 50%; transform: translateX(-50%); }
.mj-side.s-top { top: 2px; left: 50%; transform: translateX(-50%); }
.mj-side.s-left { left: 2px; top: 50%; transform: translateY(-50%); }
.mj-side.s-right { right: 2px; top: 50%; transform: translateY(-50%); }

#mj-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; min-height: 36px; }
#mj-actions button { font-weight: bold; }
#mj-actions .btn-ron, #mj-actions .btn-tsumo { background: var(--accent); color: #fff; animation: pulse 0.9s infinite; }
#mj-actions .btn-riichi { background: #ffe680; }
#mj-actions .btn-kan { background: #7dd3fc; }
#mj-hint { font-size: 13px; color: #fff; opacity: 0.9; min-height: 1.2em; text-align: center; }
#mj-result {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
#mj-result .panel { max-width: 560px; color: var(--ink); max-height: 95%; overflow: auto; }
#mj-result .tiles { display: flex; gap: 3px; flex-wrap: wrap; --w: 32px; margin: 8px 0; align-items: flex-end; }
#mj-result .tiles .meld { display: flex; gap: 1px; margin-left: 8px; }
#mj-result .yaku { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; font-size: 14px; margin: 8px 0; }
#mj-result .score { font-size: 18px; font-weight: bold; text-align: center; margin: 6px 0; }
#mj-result .dora-row { display: flex; gap: 12px; align-items: center; font-size: 12px; --w: 24px; margin: 4px 0; }
#mj-result .dora-row .tiles { margin: 0; gap: 2px; }
#mj-result .deltas { display: flex; justify-content: space-around; font-size: 13px; margin-top: 8px; }
#mj-result .deltas .plus { color: #1e7d3a; font-weight: bold; } #mj-result .deltas .minus { color: var(--accent); font-weight: bold; }
@media (max-width: 760px) {
  #mj-table { width: 100%; --z: 22%; --zb: 26%; }
  .mj-zone .river { --w: 16px; }
  .mj-zone .backs { --w: 12px; }
  .mj-zone .melds { --w: 14px; }
  .mj-zone[data-pos="bottom"] .river { --w: 18px; }
  .mj-zone[data-pos="bottom"] .hand { --w: 24px; }
  #mj-info { font-size: 10px; } #mj-info .round { font-size: 13px; }
  .mj-side { font-size: 9px; padding: 1px 3px; } .mj-side .wind { font-size: 10px; } .mj-side .pts { font-size: 10px; }
  #mj-dora { --w: 14px; }
}

/* 将棋 */
.table.mode-shogi #opponents, .table.mode-shogi #me, .table.mode-shogi #center { display: none; }
.table.mode-shogi { grid-template-rows: 1fr; }
.table.mode-shogi #sg-area { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; }
#sg-area { display: none; --cell: min(6.4vh, 52px); }
#sg-board {
  display: grid;
  grid-template-columns: auto repeat(9, var(--cell));
  grid-template-rows: auto repeat(9, var(--cell));
  background: #e8c97a;
  border: 3px solid #5a3d1e;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
#sg-board .lbl { display: flex; align-items: center; justify-content: center; font-size: 11px; color: #5a3d1e; background: #d9b86a; }
#sg-board .lbl.corner { width: 18px; }
#sg-board .cell {
  border: 1px solid #7a5a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  cursor: default;
}
#sg-board .cell.sel { background: #ffe680; }
#sg-board .cell.target { background: rgba(80, 200, 120, 0.55); cursor: pointer; }
#sg-board .cell.target::after { content: ''; width: 30%; height: 30%; border-radius: 50%; background: rgba(0, 90, 40, 0.5); position: absolute; }
#sg-board .cell.last { background: rgba(255, 200, 80, 0.45); }
#sg-board .cell.check { box-shadow: inset 0 0 0 3px var(--accent); }
#sg-board .cell.own { cursor: pointer; }
.koma {
  width: 84%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', 'MS Mincho', serif;
  font-weight: bold;
  font-size: calc(var(--cell) * 0.55);
  color: #111;
  background: linear-gradient(#f7e2b0, #e0bf7a);
  clip-path: polygon(50% 0%, 88% 18%, 100% 100%, 0% 100%, 12% 18%);
  user-select: none;
  line-height: 1;
}
.koma.gote { transform: rotate(180deg); }
.koma.promoted { color: #c8102e; }
.sg-hand { display: flex; align-items: center; gap: 6px; min-height: 40px; color: #fff; font-size: 13px; }
.sg-hand .hp { display: flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.25); }
.sg-hand .hp .koma { width: 30px; height: 34px; font-size: 18px; }
.sg-hand .hp.selectable { cursor: pointer; }
.sg-hand .hp.sel { background: #ffe680; color: #333; }
.sg-hand .cnt { font-size: 12px; }
.sg-hand .who { font-weight: bold; margin-right: 4px; }
.sg-hand .who.turn { color: #ffe680; }
#sg-actions { display: flex; gap: 8px; }
#sg-hint { font-size: 13px; color: #fff; min-height: 1.2em; }
#sg-promote { display: flex; gap: 8px; align-items: center; background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 10px; }
@media (max-width: 760px) { #sg-area { --cell: min(9.6vw, 44px); } }

/* リバーシ */
.table.mode-othello #opponents, .table.mode-othello #me, .table.mode-othello #center { display: none; }
.table.mode-othello { grid-template-rows: 1fr; }
.table.mode-othello #ot-area { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 0; }
#ot-area { display: none; --cell: min(7.5vh, 60px); }
#ot-board {
  display: grid;
  grid-template-columns: repeat(8, var(--cell));
  grid-template-rows: repeat(8, var(--cell));
  gap: 2px;
  background: #1a3d1a;
  padding: 6px;
  border: 4px solid #222;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
#ot-board .cell { background: #2f8f3f; display: flex; align-items: center; justify-content: center; position: relative; }
#ot-board .cell.legal { cursor: pointer; }
#ot-board .cell.legal::after { content: ''; width: 26%; height: 26%; border-radius: 50%; background: rgba(0, 0, 0, 0.28); }
#ot-board .cell.legal:hover::after { background: rgba(0, 0, 0, 0.5); }
#ot-board .cell.last { box-shadow: inset 0 0 0 3px #ffe680; }
.disc { width: 82%; height: 82%; border-radius: 50%; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); }
.disc.black { background: radial-gradient(circle at 35% 30%, #555, #000 70%); }
.disc.white { background: radial-gradient(circle at 35% 30%, #fff, #cfcfcf 75%); }
.disc.flipped { animation: flip 0.35s ease-out; }
@keyframes flip { from { transform: scaleX(0.1); } to { transform: scaleX(1); } }
#ot-score { display: flex; gap: 18px; align-items: center; color: #fff; font-size: 14px; }
#ot-score .side { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); border: 2px solid transparent; }
#ot-score .side.turn { border-color: var(--accent-2); }
#ot-score .side .disc { width: 22px; height: 22px; }
#ot-score .side b { font-size: 18px; }
#ot-actions { display: flex; gap: 8px; }
#ot-hint { font-size: 13px; color: #fff; min-height: 1.2em; }
@media (max-width: 760px) { #ot-area { --cell: min(10.5vw, 44px); } }

/* 五目並べ */
.table.mode-gomoku #opponents, .table.mode-gomoku #me, .table.mode-gomoku #center { display: none; }
.table.mode-gomoku { grid-template-rows: 1fr; }
.table.mode-gomoku #gm-area { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 0; }
#gm-area { display: none; --cell: min(4.4vh, 36px); }
#gm-board {
  display: grid;
  grid-template-columns: repeat(15, var(--cell));
  grid-template-rows: repeat(15, var(--cell));
  background: #e3b96a;
  padding: calc(var(--cell) * 0.3);
  border: 3px solid #7a5a2a;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
/* 各マスの中心を通る線で碁盤の目を描く。端のマスは中心から内側だけ */
#gm-board .cell {
  --h-pos: center; --h-size: 100% 1px; --v-pos: center; --v-size: 1px 100%;
  background:
    linear-gradient(#3a2a10, #3a2a10) var(--h-pos) / var(--h-size) no-repeat,
    linear-gradient(#3a2a10, #3a2a10) var(--v-pos) / var(--v-size) no-repeat;
  display: flex; align-items: center; justify-content: center; position: relative;
}
#gm-board .cell.c0 { --h-pos: right; --h-size: 50% 1px; }
#gm-board .cell.c14 { --h-pos: left; --h-size: 50% 1px; }
#gm-board .cell.r0 { --v-pos: bottom; --v-size: 1px 50%; }
#gm-board .cell.r14 { --v-pos: top; --v-size: 1px 50%; }
#gm-board .cell.star::before { content: ''; position: absolute; width: 18%; height: 18%; border-radius: 50%; background: #3a2a10; }
#gm-board .cell.free { cursor: pointer; }
#gm-board .cell.free:hover::after { content: ''; width: 60%; height: 60%; border-radius: 50%; background: rgba(0, 0, 0, 0.25); }
#gm-board .cell .disc { width: 88%; height: 88%; z-index: 1; }
#gm-board .cell.last .disc { box-shadow: 0 0 0 2px #ff5252, 0 2px 3px rgba(0, 0, 0, 0.5); }
#gm-board .cell.win .disc { box-shadow: 0 0 0 3px #ffe680, 0 2px 3px rgba(0, 0, 0, 0.5); }
#gm-board .disc.placed { animation: drop 0.2s ease-out; }
@keyframes drop { from { transform: scale(0.4); } to { transform: scale(1); } }
#gm-score { display: flex; gap: 18px; align-items: center; color: #fff; font-size: 14px; }
#gm-score .side { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); border: 2px solid transparent; }
#gm-score .side.turn { border-color: var(--accent-2); }
#gm-score .side .disc { width: 22px; height: 22px; }
#gm-actions { display: flex; gap: 8px; }
#gm-hint { font-size: 13px; color: #fff; min-height: 1.2em; }
@media (max-width: 760px) { #gm-area { --cell: min(6vw, 26px); } }

/* チェス */
.table.mode-chess #opponents, .table.mode-chess #me, .table.mode-chess #center { display: none; }
.table.mode-chess { grid-template-rows: 1fr; }
.table.mode-chess #ch-area { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; }
#ch-area { display: none; --cell: min(7vh, 58px); }
#ch-board {
  display: grid;
  grid-template-columns: auto repeat(8, var(--cell));
  grid-template-rows: repeat(8, var(--cell)) auto;
  border: 3px solid #4a3220;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  background: #b58863;
}
#ch-board .lbl { display: flex; align-items: center; justify-content: center; font-size: 11px; color: #f0d9b5; background: #4a3220; }
#ch-board .lbl.corner { width: 16px; }
#ch-board .cell { display: flex; align-items: center; justify-content: center; position: relative; box-sizing: border-box; cursor: default; }
#ch-board .cell.light { background: #f0d9b5; }
#ch-board .cell.dark { background: #b58863; }
#ch-board .cell.last { background: #f6e58d; }
#ch-board .cell.dark.last { background: #dbc34a; }
#ch-board .cell.sel { background: #ffe066; }
#ch-board .cell.target { cursor: pointer; }
#ch-board .cell.target::after { content: ''; width: 32%; height: 32%; border-radius: 50%; background: rgba(0, 90, 40, 0.45); position: absolute; }
#ch-board .cell.target.capture::after { width: 90%; height: 90%; background: none; border: 4px solid rgba(0, 90, 40, 0.45); box-sizing: border-box; }
#ch-board .cell.check { box-shadow: inset 0 0 0 4px var(--accent); }
#ch-board .cell.own { cursor: pointer; }
.chp {
  font-size: calc(var(--cell) * 0.78);
  line-height: 1;
  user-select: none;
  z-index: 1;
  font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'DejaVu Sans', 'Apple Symbols', serif;
}
.chp.white { color: #fff; -webkit-text-stroke: 1.5px #222; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.chp.black { color: #1a1a1a; -webkit-text-stroke: 1px #000; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.ch-side { display: flex; align-items: center; gap: 6px; min-height: 32px; color: #fff; font-size: 13px; }
.ch-side .who { font-weight: bold; margin-right: 4px; }
.ch-side .who.turn { color: #ffe680; }
.ch-side .cap { display: flex; gap: 0; }
.ch-side .cap .chp { font-size: 20px; }
#ch-actions { display: flex; gap: 8px; }
#ch-hint { font-size: 13px; color: #fff; min-height: 1.2em; }
#ch-promote { display: flex; gap: 8px; align-items: center; background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 10px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 760px) { #ch-area { --cell: min(10.5vw, 44px); } }

/* カード */
.card {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 6px;
  background: #fff;
  border: 1px solid #bbb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  user-select: none;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.card .rank { font-size: calc(var(--card-w) * 0.38); line-height: 1; }
.card .suit { font-size: calc(var(--card-w) * 0.34); line-height: 1.1; }
.card.red { color: #d0202a; }
.card.black { color: #111; }
.card.joker { color: #6f2dbd; }
.card.joker .joker-label { writing-mode: vertical-rl; font-size: calc(var(--card-w) * 0.22); letter-spacing: 2px; }
.card.back {
  background:
    repeating-linear-gradient(45deg, #2b5bd7 0 6px, #1e44a6 6px 12px);
  border-color: #fff;
  box-shadow: inset 0 0 0 3px #fff, 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ログ */
#log-panel {
  background: rgba(0, 0, 0, 0.45);
  color: #eee;
  padding: 12px;
  min-height: 0;
  overflow-y: auto;
  font-size: 13px;
}
#log-panel h3 { margin: 0 0 8px; font-size: 14px; opacity: 0.8; }
#game-toolbar { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 10px; }
#game-toolbar button { padding: 4px 10px; }
button.danger { background: var(--accent); color: #fff; }
#log { list-style: none; padding: 0; margin: 0; }
#log li { padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#log li.important { color: #ffe680; font-weight: bold; }

/* 結果モーダル */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
#result-reveal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px;
}
#result-reveal .card { --card-w: 44px; --card-h: 62px; }
#result-ranking { font-size: 17px; padding-left: 28px; }
#result-ranking li { padding: 4px 0; }
#result-ranking li.loser { color: var(--accent); font-weight: bold; }
#result-ranking li.winner { color: #b8860b; font-weight: bold; }
#result-ranking li.me { text-decoration: underline; }

#notice {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  z-index: 20;
  font-size: 14px;
}

@media (max-width: 760px) {
  #screen-game { grid-template-columns: 1fr; grid-template-rows: 1fr 140px; }
  .table.mode-daifugo #my-hand .card { --card-w: 40px; --card-h: 56px; }
  .table.mode-sevens #my-hand .card { --card-w: 40px; --card-h: 56px; }
  #sevens-board { gap: 2px; }
  .score { min-width: 80px; padding: 4px 10px; }
  .score .pairs { font-size: 16px; }
  :root { --card-w: 48px; --card-h: 68px; }
  .opponent { min-width: 110px; padding: 6px 8px; }
  #status { font-size: 16px; }
}

/* 花札(こいこい) */
.table.mode-hanafuda #opponents, .table.mode-hanafuda #me, .table.mode-hanafuda #center { display: none; }
.table.mode-hanafuda { grid-template-rows: 1fr; }
.table.mode-hanafuda #hf-area { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; overflow: auto; position: relative; }
#hf-area { display: none; --hw: 46px; --hh: 72px; color: #fff; }
.hf {
  position: relative;
  width: var(--hw);
  height: var(--hh);
  flex: 0 0 auto;
  border-radius: 5px;
  border: 1px solid #2b2b2b;
  background: #f3ecd8;
  color: #222;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
  user-select: none;
}
.hf::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--plant, #4a7c3f); }
.hf .mon { position: absolute; top: 7px; left: 3px; display: flex; flex-direction: column; line-height: 1; }
.hf .mon b { font-size: 11px; }
.hf .mon small { font-size: 8px; color: #666; }
.hf .nm { font-weight: bold; font-size: 12px; writing-mode: vertical-rl; margin-top: 8px; letter-spacing: 1px; }
.hf .kd { position: absolute; bottom: 2px; right: 3px; font-size: 8px; color: #666; }
.hf.hikari { background: linear-gradient(160deg, #fff6c2, #f0c84a); border-color: #a3781a; }
.hf.hikari .nm { color: #7a1f1f; }
.hf.tane { background: linear-gradient(160deg, #eef7e3, #c8e2b0); }
.hf.tane .nm { color: #2f5d2a; }
.hf.tan .ribbon { position: absolute; top: 9px; right: 6px; width: 12px; height: calc(var(--hh) - 22px); border-radius: 2px; background: #cfc4b0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.hf.tan.aka .ribbon { background: #c8352b; }
.hf.tan.ao .ribbon { background: #3b4fa8; }
.hf.tan .nm { font-size: 10px; margin-right: 12px; }
.hf.tan.aka .nm { color: #a52a22; }
.hf.tan.ao .nm { color: #2f3f8a; }
.hf.kasu { background: linear-gradient(160deg, #f5f0e4, #e6dfcb); }
.hf.kasu .nm { display: none; }
.hf.kasu::after { content: ''; position: absolute; inset: 22px 10px 14px; border-radius: 50% 50% 40% 40%; background: var(--plant, #4a7c3f); opacity: 0.35; }
.hf.back { background: repeating-linear-gradient(45deg, #7a1f1f 0 4px, #5e1414 4px 8px); border-color: #3a0c0c; }
/* 月ごとの植物の色 */
.hf.m1 { --plant: #2e6b3a; }  .hf.m2 { --plant: #d6607a; }  .hf.m3 { --plant: #ef9ab3; }  .hf.m4 { --plant: #8a63c9; }
.hf.m5 { --plant: #5a5fbf; }  .hf.m6 { --plant: #d9432f; }  .hf.m7 { --plant: #c04a8a; }  .hf.m8 { --plant: #6f6f6f; }
.hf.m9 { --plant: #e0b53a; }  .hf.m10 { --plant: #e06a2b; } .hf.m11 { --plant: #5f9e4b; } .hf.m12 { --plant: #7b4ea3; }

.hf-side { width: 100%; max-width: 920px; }
.hf-player { background: rgba(0, 0, 0, 0.25); border: 2px solid transparent; border-radius: 12px; padding: 6px 10px; transition: border-color 0.2s, box-shadow 0.2s; }
.hf-player.current { border-color: var(--accent-2); box-shadow: 0 0 16px rgba(240, 173, 78, 0.6); }
.hf-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 4px; }
.hf-head .name { font-weight: bold; }
.hf-head .tag { display: inline-block; font-size: 11px; background: rgba(255, 255, 255, 0.2); border-radius: 4px; padding: 1px 6px; }
.hf-head .badge-po { display: inline-block; background: #ffe680; color: #333; font-weight: bold; border-radius: 6px; padding: 1px 8px; font-size: 12px; }
.hf-head .hf-score { margin-left: auto; }
.hf-head .hf-score b { font-size: 16px; }
.hf-head .hf-yaku { width: 100%; font-size: 12px; color: #ffe680; }
.hf-captured { display: flex; gap: 10px; flex-wrap: wrap; --hw: 30px; --hh: 46px; }
.hf-captured .hf .mon b { font-size: 9px; }
.hf-captured .hf .mon small, .hf-captured .hf .kd { display: none; }
.hf-captured .hf .nm { font-size: 9px; margin-top: 10px; letter-spacing: 0; }
.hf-captured .hf.tan .ribbon { width: 8px; right: 3px; }
.hf-captured .hf.tan .nm { margin-right: 6px; }
.hf-group { display: flex; flex-direction: column; gap: 2px; min-width: 40px; }
.hf-group-label { font-size: 11px; opacity: 0.85; }
.hf-group-cards { display: flex; min-height: var(--hh); }
.hf-group-cards .hf { margin-left: -10px; }
.hf-group-cards .hf:first-child { margin-left: 0; }

#hf-center { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 920px; justify-content: center; }
#hf-deck, #hf-drawn { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: var(--hw); font-size: 11px; }
#hf-drawn:empty { display: none; }
#hf-field { display: grid; grid-template-columns: repeat(6, var(--hw)); grid-auto-rows: var(--hh); gap: 6px; justify-content: center; min-height: calc(var(--hh) * 2 + 6px); }
#hf-field .hf.placed { animation: slide-in 0.35s ease-out; }
#hf-field .hf.target { cursor: pointer; box-shadow: 0 0 0 3px var(--accent-2), 0 4px 10px rgba(0, 0, 0, 0.5); animation: pulse 1.2s infinite; }
#hf-field .hf.target:hover { transform: translateY(-4px); }
#hf-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px; background: rgba(0, 0, 0, 0.25); border-radius: 12px; width: 100%; max-width: 920px; min-height: calc(var(--hh) + 16px); }
#hf-hand .hf { opacity: 0.55; }
#hf-hand .hf.selectable { opacity: 1; cursor: pointer; }
#hf-hand .hf.can-take { box-shadow: 0 0 0 2px var(--accent-2), 0 2px 4px rgba(0, 0, 0, 0.3); }
#hf-hand .hf.selectable:hover { transform: translateY(-8px); }
#hf-hand .hf.selected { transform: translateY(-12px); box-shadow: 0 0 0 3px #fff, 0 6px 12px rgba(0, 0, 0, 0.4); }
#hf-actions { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.95); color: var(--ink); border-radius: 12px; padding: 8px 14px; font-weight: bold; animation: pop 0.25s ease-out; }
#hf-hint { font-size: 13px; min-height: 1.2em; text-align: center; }
#hf-hint.my-turn { color: #ffe680; font-weight: bold; }
#hf-result { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); z-index: 5; }
#hf-result .panel { max-width: 420px; color: var(--ink); }
#hf-result .yaku { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; font-size: 14px; margin: 8px 0; }
#hf-result p { text-align: center; margin: 6px 0; }
#hf-result .hf-total { font-size: 13px; color: var(--muted); }
@media (max-width: 760px) {
  #hf-area { --hw: 38px; --hh: 58px; }
  .hf-captured { --hw: 24px; --hh: 36px; gap: 6px; }
  #hf-field { grid-template-columns: repeat(5, var(--hw)); gap: 4px; }
  #hf-center { gap: 8px; }
}