:root {
  --bg: #07090b;
  --panel: #14191d;
  --panel-edge: #232b31;
  --text: #ece7dc;
  --muted: #9a958a;
  --gold: #e9b949;
  --danger: #e2615a;
  --ok: #7fd18b;
}

* { box-sizing: border-box; }

/* 画面の高さにぴったり収め、ページ全体はスクロールさせない */
html, body { height: 100%; }
body {
  margin: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #1a1f24 0%, var(--bg) 70%);
  color: var(--text);
  font-family: system-ui, "Hiragino Sans", "Noto Sans JP", sans-serif;
}

header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--panel-edge);
}
#toggle-log { display: none; }
header h1 { margin: 0; font-size: 20px; letter-spacing: 0.35em; font-weight: 800; }
.new-game { display: flex; gap: 8px; align-items: center; }

button, select {
  font: inherit;
  color: var(--text);
  background: #222a30;
  border: 1px solid #36424a;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
button:hover:not(:disabled) { background: #2d373e; }
button:disabled { opacity: 0.4; cursor: default; }
button.primary { background: var(--gold); color: #1b1608; border-color: var(--gold); font-weight: 700; }

main {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 12px;
  padding: 10px 12px;
}
.board { display: flex; flex-direction: column; gap: 8px; min-height: 0; }

/* ------------------------------------------------------------ テーブル */

/* 残りの幅と高さの両方に収まる最大サイズで、16:11 のテーブルを置く */
.table-wrap {
  flex: 1;
  min-height: 0;
  container-type: size;
  display: grid;
  place-items: center;
}
#table {
  position: relative;
  width: min(100cqw, 100cqh * 16 / 11);
  aspect-ratio: 16 / 11;
  container-type: inline-size;
}

#center {
  position: absolute;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
#phase { font-size: 13px; color: var(--muted); letter-spacing: 0.1em; }
#bid {
  margin-top: 6px;
  font-size: clamp(16px, 2.6vw, 26px);
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 2px 10px #000;
}
#bid small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }

.seat {
  --c: #2a8a9e;
  --disc: clamp(18px, 5.6cqw, 58px); /* テーブル幅に比例 */
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: opacity 0.3s;
}
.seat.dead { opacity: 0.25; filter: grayscale(1); }

/* マット：プレイヤー色の四角い敷物 */
.mat {
  position: relative;
  width: calc(var(--disc) * 2.3);
  height: calc(var(--disc) * 1.75);
  border-radius: 6px;
  transform: rotate(var(--tilt, 0deg));
  background:
    radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--c) 35%, transparent) 0 12%, transparent 13%),
    linear-gradient(135deg, color-mix(in srgb, var(--c) 55%, #0b0b0b), color-mix(in srgb, var(--c) 25%, #050505));
  box-shadow: 0 10px 24px #000c, inset 0 0 0 2px color-mix(in srgb, var(--c) 70%, #fff 10%),
    inset 0 0 0 5px #0006, inset 0 0 0 6px color-mix(in srgb, var(--c) 40%, #fff 20%);
  transition: box-shadow 0.2s;
}
.seat.turn .mat { box-shadow: 0 0 0 3px var(--gold), 0 10px 24px #000c; }
.seat.flippable .mat {
  cursor: pointer;
  box-shadow: 0 0 0 3px var(--ok), 0 0 26px var(--ok);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 3px var(--ok), 0 0 8px var(--ok); } }

.pile { position: absolute; inset: 0; }
.pile .disc {
  position: absolute;
  left: calc(14% + var(--i) * var(--disc) * 0.2);
  top: calc(12% + var(--i) * var(--disc) * -0.06);
}

/* カード（コースター）。裏面は色の輪＋暗い中心、表面は中心に絵柄 */
.disc {
  --c2: color-mix(in srgb, var(--c) 55%, #000);
  position: relative;
  width: var(--disc);
  height: var(--disc);
  flex: none;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 57%, #fff9 58% 59.5%, transparent 60.5%),
    radial-gradient(circle, #141619 0 54%, transparent 55%),
    repeating-conic-gradient(var(--c) 0 7.5deg, var(--c2) 7.5deg 15deg);
  box-shadow: 0 0 0 1.5px #050505, 0 4px 8px #000b;
}
.disc.back::after {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--c) 70%, #fff 15%);
  box-shadow: 0 0 0 3px #141619, 0 0 0 4px color-mix(in srgb, var(--c) 50%, transparent);
}
.disc svg { position: absolute; inset: 14%; width: 72%; height: 72%; }
.disc.peek svg { inset: 30%; width: 40%; height: 40%; opacity: 0.55; }
.disc.peek::after { display: none; }

.disc.new { animation: drop 0.35s ease-out; }
@keyframes drop {
  from { transform: translateY(-40px) scale(1.25); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.disc.flip { animation: flip 0.5s ease-out; }
@keyframes flip {
  0% { transform: rotateY(90deg) scale(1.3); }
  100% { transform: none; }
}

.revealed { display: flex; gap: 3px; min-height: calc(var(--disc) * 0.62); }
.revealed .disc { --disc: clamp(12px, 3.4cqw, 34px); }

.plate {
  min-width: calc(var(--disc) * 2.3);
  padding: 2px 6px;
  border-radius: 8px;
  background: #0d1013e6;
  border: 1px solid color-mix(in srgb, var(--c) 50%, #222);
  text-align: center;
  font-size: clamp(10px, 1.5cqw, 12px);
  line-height: 1.3;
}
.plate .name { font-weight: 700; color: color-mix(in srgb, var(--c) 45%, #fff); }
.plate .info { color: var(--muted); font-size: 0.9em; }
.coin {
  display: inline-block;
  width: 10px; height: 10px;
  margin: 0 1px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  vertical-align: -1px;
}
.coin.on { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.badges { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
.badge { font-size: 10px; padding: 0 5px; border-radius: 6px; background: #2a3238; }
.badge.gold { background: var(--gold); color: #1b1608; font-weight: 700; }

/* ------------------------------------------------------------ 操作パネル */

/* 高さ固定（中身が変わってもテーブルの大きさがガタつかない）。左に手札、右に操作 */
#actions {
  flex: none;
  height: clamp(118px, 23dvh, 180px);
  overflow-y: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 24px;
  align-items: start;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
}
#actions .span { grid-column: 1 / -1; }
#actions h3 { margin: 0 0 6px; font-size: 14px; }
#actions .hint { color: var(--muted); font-size: 13px; margin: 0 0 6px; }
.row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }

.hand { --disc: clamp(36px, 7dvh, 60px); display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.hand .disc { cursor: default; transition: transform 0.15s; }
.hand .disc.playable { cursor: pointer; }
.hand .disc.playable:hover { transform: translateY(-8px); box-shadow: 0 0 0 2px var(--gold), 0 10px 16px #000b; }
.hand .disc.lost { opacity: 0.25; filter: grayscale(1); }
.hand-label { color: var(--muted); font-size: 12px; margin-bottom: 4px; }

.chip {
  min-width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  font-weight: 800;
  font-size: 15px;
  background: #2a2416;
  border: 2px solid var(--gold);
  color: var(--gold);
}
.chip:hover:not(:disabled) { background: var(--gold); color: #1b1608; }
.pass-btn { height: 38px; border-radius: 19px; padding: 0 18px; }
.pick { --disc: 52px; cursor: pointer; transition: transform 0.15s; }
.pick:hover { transform: translateY(-6px); }
.result { font-size: 22px; font-weight: 800; margin: 2px 0 10px; }
.result.win { color: var(--ok); }
.result.lose { color: var(--danger); }

/* ------------------------------------------------------------ ログ */

/* ログ欄は高さいっぱいに伸ばし、中だけスクロール */
aside {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 14px;
  padding: 12px;
}
aside h2 { margin: 0 0 8px; font-size: 14px; letter-spacing: 0.1em; }
#log {
  flex: 1;
  min-height: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  font-size: 13px;
}
#log li { padding: 3px 0; border-bottom: 1px solid #ffffff0d; }
#log li.round { color: var(--gold); font-weight: 700; padding-top: 10px; }
#log li.private { color: #c5b3ff; }
#log li.bad { color: var(--danger); }
#log li.good { color: var(--ok); }
#log .who { font-weight: 700; }
.rules { flex: none; margin-top: 10px; font-size: 13px; color: var(--muted); max-height: 40%; overflow-y: auto; }
.rules ul { padding-left: 18px; }

/* 幅が狭い画面：ログは「ログ」ボタンで開く重ね表示にする */
@media (max-width: 900px) {
  main { grid-template-columns: 1fr; padding: 6px; }
  #toggle-log { display: inline-block; }
  aside {
    position: fixed;
    top: 50px;
    right: 8px;
    bottom: 8px;
    width: min(320px, 85vw);
    z-index: 10;
    box-shadow: 0 10px 40px #000;
    display: none;
  }
  body.show-log aside { display: flex; }
  #actions { grid-template-columns: 1fr; padding: 8px 10px; }
}

/* ------------------------------------------------------------ オンライン対戦 */

.home-link { color: inherit; text-decoration: none; }
.header-right { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 13px; }
.seat.empty .mat { opacity: 0.35; box-shadow: inset 0 0 0 2px #fff3; background: none; }
.badge.warn { background: var(--danger); color: #fff; }
.badge.timer { background: #33404a; color: var(--gold); font-variant-numeric: tabular-nums; }
.your-turn { margin: 0 0 6px; color: var(--gold); font-weight: 800; }
.your-turn span { font-variant-numeric: tabular-nums; margin-left: 6px; }
.invite { word-break: break-all; font-size: 12px; }
.privacy-note { flex: none; margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.privacy-note a { color: var(--gold); }
#toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 20;
  max-width: 90vw;
  padding: 10px 16px;
  border-radius: 10px;
  background: #2b3238;
  border: 1px solid var(--gold);
  box-shadow: 0 8px 24px #000a;
}

/* ------------------------------------------------------------ 挑戦の結果 */

.challenge-result {
  position: absolute;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  z-index: 5;
  min-width: min(80%, 300px);
  padding: 14px 22px;
  border-radius: 16px;
  text-align: center;
  background: #0d1013f2;
  border: 2px solid var(--gold);
  box-shadow: 0 12px 40px #000c;
  cursor: pointer;
  animation: pop 0.3s ease-out;
}
.challenge-result.ng { border-color: var(--danger); }
.cr-title { font-size: clamp(18px, 3cqw, 26px); font-weight: 800; }
.challenge-result.ok .cr-title { color: var(--gold); }
.challenge-result.ng .cr-title { color: var(--danger); }
.cr-sub { margin: 4px 0 10px; font-size: 14px; }
.cr-cards { --disc: clamp(26px, 4.5cqw, 42px); display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.cr-cards .disc { animation: flip 0.5s ease-out both; }
.cr-cards .disc:nth-child(2) { animation-delay: 0.1s; }
.cr-cards .disc:nth-child(3) { animation-delay: 0.2s; }
.cr-cards .disc:nth-child(n+4) { animation-delay: 0.3s; }
@keyframes pop {
  from { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.coin.gain { animation: gain 1.2s ease-out 3; }
@keyframes gain {
  0% { box-shadow: 0 0 0 0 var(--gold); transform: scale(1.8); }
  100% { box-shadow: 0 0 6px var(--gold); transform: scale(1); }
}

/* ------------------------------------------------------------ 演出（めくり・吹き出し） */

#fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; }

/* めくり：山の上でカードが持ち上がり、裏から表へ返る（app.js の FLIP_MS と同じ 1.5s） */
.fx-flip {
  position: absolute;
  --disc: clamp(44px, 10cqw, 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  perspective: 700px;
  transform: translate(-50%, -50%);
  animation: fx-life 1.5s ease-out both;
}
@keyframes fx-life {
  0% { opacity: 0; transform: translate(-50%, -35%) scale(0.45); }
  14% { opacity: 1; transform: translate(-50%, -60%) scale(1); }
  82% { opacity: 1; transform: translate(-50%, -60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -20%) scale(0.5); }
}
.fx-card {
  position: relative;
  width: var(--disc);
  height: var(--disc);
  transform-style: preserve-3d;
  animation: fx-turn 1.5s ease-in-out both;
}
@keyframes fx-turn {
  0%, 22% { transform: rotateY(0deg); }
  52%, 100% { transform: rotateY(180deg); }
}
.fx-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fx-front { transform: rotateY(180deg); }
.fx-flip.flower .fx-front { box-shadow: 0 0 0 3px var(--gold), 0 0 30px var(--gold), 0 10px 20px #000c; }
.fx-flip.skull .fx-front { box-shadow: 0 0 0 3px var(--danger), 0 0 36px var(--danger), 0 10px 20px #000c; }
.fx-label {
  margin-top: 6px;
  padding: 1px 10px;
  border-radius: 10px;
  background: #0d1013e6;
  font-weight: 800;
  font-size: clamp(12px, 1.8cqw, 16px);
  animation: fx-label 1.5s ease-out both;
}
.fx-flip.flower .fx-label { color: var(--gold); }
.fx-flip.skull .fx-label { color: var(--danger); }
@keyframes fx-label {
  0%, 48% { opacity: 0; transform: translateY(6px); }
  58%, 85% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

/* 表になった瞬間、その席を光らせる（ドクロは揺らす） */
.seat.flash-flower .mat { box-shadow: 0 0 0 3px var(--gold), 0 0 28px var(--gold); }
.seat.flash-skull .mat {
  box-shadow: 0 0 0 3px var(--danger), 0 0 32px var(--danger);
  animation: fx-shake 0.3s ease-in-out 3;
}
@keyframes fx-shake {
  0%, 100% { transform: rotate(var(--tilt, 0deg)) translateX(0); }
  25% { transform: rotate(var(--tilt, 0deg)) translateX(-5px); }
  75% { transform: rotate(var(--tilt, 0deg)) translateX(5px); }
}

/* めくり演出のあとで「めくられたカード」の列に加わる */
.disc.landing { animation-fill-mode: both; }

/* 吹き出し：宣言・パス・挑戦など */
.fx-bubble {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 3px 12px;
  border-radius: 14px;
  background: #f1ece0;
  color: #1b1608;
  font-weight: 800;
  font-size: clamp(12px, 1.9cqw, 17px);
  white-space: nowrap;
  box-shadow: 0 6px 18px #000b;
  animation: fx-bubble 1.6s ease-out both;
}
.fx-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom: 0;
  border-top-color: #f1ece0;
}
.fx-bubble.bid { background: var(--gold); }
.fx-bubble.pass { background: #8d969c; color: #111; }
.fx-bubble.challenge { background: #ff8a3d; font-size: clamp(14px, 2.3cqw, 20px); }
.fx-bubble.bad { background: var(--danger); color: #fff; }
.fx-bubble.bid::after { border-top-color: var(--gold); }
.fx-bubble.pass::after { border-top-color: #8d969c; }
.fx-bubble.challenge::after { border-top-color: #ff8a3d; }
.fx-bubble.bad::after { border-top-color: var(--danger); }
@keyframes fx-bubble {
  0% { opacity: 0; transform: translate(-50%, -60%) scale(0.6); }
  12% { opacity: 1; transform: translate(-50%, -110%) scale(1.1); }
  22% { transform: translate(-50%, -100%) scale(1); }
  80% { opacity: 1; transform: translate(-50%, -100%); }
  100% { opacity: 0; transform: translate(-50%, -135%); }
}

/* めくりの進み具合 */
.pips { display: flex; gap: 4px; justify-content: center; margin-top: 6px; flex-wrap: wrap; max-width: 220px; }
.pip { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--gold); }
.pip.on { background: var(--gold); box-shadow: 0 0 6px var(--gold); }

/* 動きを減らす設定の人には、回転させずに表向きで見せる */
@media (prefers-reduced-motion: reduce) {
  .fx-card { animation: none; transform: rotateY(180deg); }
  .seat.flash-skull .mat { animation: none; }
  .disc.new, .disc.flip { animation: none; }
}

/* ------------------------------------------------------------ 操作の状態 */

/* 行動を送って結果を待っている間は押せない（二度押し防止） */
#actions.pending { pointer-events: none; opacity: 0.6; }
/* 再接続中はテーブルも操作パネルも押せない */
body.offline #table, body.offline #actions { pointer-events: none; filter: grayscale(0.6) opacity(0.7); }
#offline {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 18px;
  border-radius: 12px;
  background: #3a2a14;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-weight: 700;
  box-shadow: 0 8px 24px #000a;
}
#offline[hidden] { display: none; }
.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid #e9b94944;
  border-top-color: var(--gold);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 持ち時間が残り少ない */
[data-timer].low { color: var(--danger); animation: low-pulse 1s ease-in-out infinite; }
.badge.timer.low { background: #4a1f1f; }
@keyframes low-pulse { 50% { opacity: 0.45; } }

.badge.reach {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-weight: 700;
  animation: reach-glow 1.6s ease-in-out infinite;
}
@keyframes reach-glow { 50% { box-shadow: 0 0 8px var(--gold); } }

.hint.waiting { color: var(--text); opacity: 0.85; }

/* キーボードで選んだ位置を分かりやすく */
button:focus-visible, [role="button"]:focus-visible, select:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.mat[role="button"]:focus-visible { outline-offset: 5px; }

/* ------------------------------------------------------------ テーブル中央の表示 */

/* 自分が失ったカード（本人にだけ見える） */
.loss-notice {
  position: absolute;
  left: 50%;
  top: 74%;
  transform: translate(-50%, -50%);
  z-index: 7;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 18px;
  border-radius: 14px;
  background: #15121ef2;
  border: 2px solid #c5b3ff;
  box-shadow: 0 10px 30px #000c;
  cursor: pointer;
  animation: pop 0.3s ease-out;
  --disc: clamp(32px, 5cqw, 46px);
}
.loss-title { font-weight: 800; color: #d9ccff; }
.loss-sub { font-size: 12px; color: var(--muted); }
.loss-secret { margin-left: 6px; }

/* ラウンド開始 */
.round-banner {
  position: absolute;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  z-index: 7;
  padding: 10px 28px;
  border-radius: 999px;
  text-align: center;
  background: #0d1013ee;
  border: 1px solid #ffffff33;
  box-shadow: 0 10px 30px #000b;
  pointer-events: none;
  animation: banner 1.8s ease-in-out both;
}
.rb-title { font-size: clamp(18px, 3.2cqw, 28px); font-weight: 800; letter-spacing: 0.08em; }
.rb-sub { font-size: 13px; color: var(--muted); }
@keyframes banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  15%, 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}

/* 勝敗 */
.gameover {
  position: absolute;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  z-index: 8;
  padding: 18px 34px;
  border-radius: 18px;
  text-align: center;
  background: #0d1013f2;
  border: 2px solid #ffffff44;
  box-shadow: 0 14px 50px #000d;
  cursor: pointer;
  animation: pop 0.4s ease-out;
}
.gameover.win { border-color: var(--gold); box-shadow: 0 0 40px #e9b94966, 0 14px 50px #000d; }
.go-title { font-size: clamp(22px, 4.4cqw, 40px); font-weight: 900; }
.gameover.win .go-title { color: var(--gold); }
.go-sub { margin-top: 4px; font-size: 15px; color: var(--muted); }

.confetti { position: absolute; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute;
  top: -6%;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  animation-name: fall;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
@keyframes fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--drift, 0px), 110cqh) rotate(var(--spin, 360deg)); opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  .confetti { display: none; }
  .round-banner, .gameover, .loss-notice, [data-timer].low, .badge.reach, .spinner { animation: none; }
}