/* ===== 基本 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --felt: #204a86;
  --felt-dark: #12305c;
  --card-w: 66px;
  --card-h: 92px;
  --gold: #f5d76e;
}
html, body { height: 100%; font-family: "Segoe UI","Hiragino Kaku Gothic ProN","Meiryo",sans-serif; color: #fff; background: #0c1f3f; }

#game {
  display: grid;
  grid-template-columns: 230px 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: "side table" "side action";
  height: 100vh; height: 100dvh; gap: 10px; padding: 10px; /* dvh=モバイルのブラウザUIを除いた実高さ */
}

/* ===== サイドバー ===== */
#sidebar { grid-area: side; background: rgba(0,0,0,0.3); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
#sidebar h2 { font-size: 20px; color: var(--gold); }
/* サイドバー見出し行（右端に「前のトリック」ボタンを置ける） */
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* 「前のトリック」ボタン: PCはフローティング版を使うのでサイドバー版は非表示。スマホのみ表示（下のメディアクエリ）。 */
#sidebar-last-trick { display: none; white-space: nowrap; flex: 0 0 auto; } /* .mini の flex:1 を打ち消し、幅をテキストに合わせる */
#sidebar-last-trick.open { background: var(--gold); color: #222; border-color: var(--gold); }
#deal-info { font-size: 12px; color: #cfe0ff; line-height: 1.7; }
#score-table { width: 100%; border-collapse: collapse; font-size: 12px; }
#score-table th, #score-table td { padding: 5px 4px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.15); }
#score-table th { color: var(--gold); }
#score-table td:first-child, #score-table th:first-child { text-align: left; }
.score-row.is-turn td { background: rgba(245,215,110,0.18); }
.score-row.is-human td:first-child { font-weight: 700; }
.role-nap { color: #ff9a5a; font-weight: 700; }
.role-adj { color: #7fd0ff; font-weight: 700; }
.role-ally { color: #7bc79a; font-weight: 700; }
#face-info { font-size: 13px; line-height: 1.7; background: rgba(0,0,0,0.25); border-radius: 8px; padding: 8px 10px; }
#face-info .nap { color: #ff9a5a; } #face-info .allied { color: #7bc79a; }
#face-info .allied-hidden { color: #7f8a99; font-size: 11px; }
/* 残り絵札の常設ミニ表示 */
#face-remain:empty { display: none; }
#face-remain { background: rgba(0,0,0,0.25); border-radius: 8px; padding: 7px 9px; }
.fr-title { font-size: 12px; font-weight: 700; color: var(--gold); margin-bottom: 4px; }
.fr-count { color: #eaf1ff; font-weight: 800; }
.fr-table { border-collapse: collapse; width: 100%; }
.fr-table td { text-align: center; padding: 1px 2px; }
.fr-suit { font-size: 14px; font-weight: 800; width: 18px; }
.fr-table .fr-c { font-size: 12px; font-weight: 700; color: #dbe8ff; }
.fr-table .fr-c.used { opacity: 0.22; text-decoration: line-through; }
/* 手札同様の色分け: 副官札=金 / 役札・よろめき♥Q=赤 */
.fr-table .fr-c.fr-adj { background: rgba(245,215,110,0.34); color: #ffe6a0; font-weight: 800; border-radius: 3px; }
.fr-table .fr-c.fr-yaku { background: rgba(226,59,48,0.32); color: #ff9c92; font-weight: 800; border-radius: 3px; }
/* 言語切替トグル（タイトル画面・右寄せの控えめリンク） */
.lang-switch { text-align: right; margin: -4px 0 4px; }
/* 切り札のスート行を強調（スクロールしても行に紐づいて分かる）。帯＋スート記号セルに金の左ストライプ */
.fr-table tr.fr-trump td { background: rgba(120,180,255,0.20); }
.fr-table tr.fr-trump td.fr-suit { box-shadow: inset 3px 0 0 var(--gold); }

/* ===== テーブル ===== */
#table { grid-area: table; position: relative; background: radial-gradient(ellipse at center, var(--felt), var(--felt-dark)); border-radius: 18px; box-shadow: inset 0 0 60px rgba(0,0,0,0.45); overflow: hidden; }

.seat { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 5px; }
#seat-0 { bottom: 10px; left: 50%; transform: translateX(-50%); }
#seat-1 { right: 12px; bottom: 20%; }
#seat-2 { top: 12px; right: 16%; }
#seat-3 { top: 12px; left: 16%; }
#seat-4 { left: 12px; bottom: 20%; }

.seat-name { font-size: 12px; font-weight: 600; padding: 3px 10px; background: rgba(0,0,0,0.4); border-radius: 12px; white-space: nowrap; }
/* ss16: 名前・競り値をカードの上に（座席は stacking context を作らないので z-index が全体に効く） */
.seat-name, .seat-tag { position: relative; z-index: 6; }
.seat.active .seat-name { background: var(--gold); color: #222; box-shadow: 0 0 12px var(--gold); }
.seat.nap .seat-name { outline: 2px solid #ff9a5a; }
.seat.adj .seat-name { outline: 2px solid #7fd0ff; }
.seat.allied .seat-name { outline: 2px solid #7bc79a; }
.seat-badge { font-size: 11px; color: var(--gold); min-height: 14px; text-align: center; }

/* 名前下のタグ（競り宣言・役割） */
.seat-tag { font-size: 12px; font-weight: 700; min-height: 16px; text-align: center; padding: 1px 8px; border-radius: 10px; }
.seat-tag.bid { background: #fff; }
.seat-tag.bid.red { color: #c0392b; } .seat-tag.bid.black { color: #222; }
.seat-tag.bid.top-bid { outline: 2px solid var(--gold); box-shadow: 0 0 8px var(--gold); }
.seat-tag.bid-pass { color: #9fb0c8; }
.seat-tag.role-nap-tag { background: #ff9a5a; color: #3a1a00; box-shadow: 0 0 10px rgba(255,154,90,0.8); }
.seat-tag.role-adj-tag { background: #7fd0ff; color: #06283a; box-shadow: 0 0 10px rgba(127,208,255,0.8); }
.seat-tag.role-allied-tag { background: #7bc79a; color: #062a18; box-shadow: 0 0 8px rgba(123,199,154,0.7); }

.seat-hand { display: flex; }
.seat-hand .card { margin-left: -44px; }
.seat-hand .card:first-child { margin-left: 0; }
#seat-0 .seat-hand.human-hand .card { margin-left: -26px; }
#seat-0 .seat-hand.human-hand .card:first-child { margin-left: 0; }

/* ===== カード ===== */
.card { width: var(--card-w); height: var(--card-h); border-radius: 7px; background: #fff; color: #222; position: relative; flex: 0 0 auto; box-shadow: 0 2px 5px rgba(0,0,0,0.4); user-select: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.card .corner { position: absolute; font-weight: 700; line-height: 1; display: flex; flex-direction: column; align-items: center; }
.card .corner.tl { top: 4px; left: 5px; font-size: 14px; }
.card .corner.br { bottom: 4px; right: 5px; font-size: 14px; transform: rotate(180deg); }
.card .center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; }
/* 4色スート: ♠青 ♥赤 ♦橙 ♣緑（白いカードでも暗いサイドバーでも読める明度） */
.s-blue { color: #3d82e8; } .s-red { color: #e23b30; } .s-orange { color: #e88b1a; } .s-green { color: #2ba84c; } .s-joker { color: #b98bff; }
.s-nt { color: var(--gold); font-weight: 800; }
.card.s-blue { color: #3d82e8; } .card.s-red { color: #e23b30; } .card.s-orange { color: #e88b1a; } .card.s-green { color: #2ba84c; }
.card.joker { color: #7a2fb0; }
.card.joker .center { font-size: 20px; }
.card .corner .jk-s { display: none; } /* 既定(デスクトップ)は「JOKER」、スマホでは「Jo」に切替 */
.card.back { background: repeating-linear-gradient(45deg,#8a1f2c 0 6px,#701722 6px 12px); border: 2px solid #fff; }
.card.back .corner, .card.back .center { display: none; }

.human-hand .card.playable { cursor: pointer; }
.human-hand .card.playable:hover { transform: translateY(-14px); box-shadow: 0 8px 16px rgba(0,0,0,0.5); z-index: 5; }
.human-hand .card.disabled { filter: brightness(0.6) saturate(0.7); cursor: not-allowed; }
/* 手札の常時識別: 副官札=薄い金の背景 / 役札(＋よろめきON時♥Q)=薄い赤の背景 */
/* 副官札=薄い金 / 役札=薄い赤。自分の手札だけでなく、練習モードの公開手札(CPU席)・全手札一覧にも適用。 */
.card.own-adj  { background: #fbf1cc; }
.card.own-yaku { background: #fce0db; }
/* 副官札発表時の手札強調（点滅して浮き上がる）: 副官札=金色 / 役札=赤色 */
.human-hand .card.adj-hint { animation: adjHintPulse 0.85s ease-in-out infinite; z-index: 6; }
@keyframes adjHintPulse {
  0%, 100% { transform: translateY(-10px); box-shadow: 0 0 0 2px var(--gold), 0 6px 14px rgba(0,0,0,0.45); }
  50%      { transform: translateY(-20px); box-shadow: 0 0 20px 6px rgba(245,215,110,0.95), 0 0 0 3px var(--gold), 0 10px 18px rgba(0,0,0,0.5); }
}
/* 役札(＋よろめきON時の♥Q)は赤いグローのみ（浮き上がらない） */
.human-hand .card.yaku-hint { animation: yakuHintPulse 0.85s ease-in-out infinite; z-index: 6; }
@keyframes yakuHintPulse {
  0%, 100% { box-shadow: 0 0 0 2px #e23b30, 0 6px 14px rgba(0,0,0,0.45); }
  50%      { box-shadow: 0 0 20px 6px rgba(226,59,48,0.95), 0 0 0 3px #ff5a4d, 0 6px 14px rgba(0,0,0,0.45); }
}
/* 副官札発表エフェクト中のカードラベル */
.card-hint-label { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 8px; z-index: 8; pointer-events: none; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.card-hint-label.lbl-adj  { background: var(--gold); color: #3a2a00; }
.card-hint-label.lbl-yaku { background: #e23b30; color: #fff; }
.human-hand .card.selected { transform: translateY(-18px); box-shadow: 0 0 0 3px var(--gold), 0 8px 16px rgba(0,0,0,0.5); z-index: 5; }
/* 練習モード: 推奨手(CPUの一例)を緑グローで示す（プレイ可能な札の持ち上げは維持） */
/* 練習: 推奨手は緑グローのみ（z-index で前面化しない＝右隣のカードを隠さない） */
.human-hand .card.suggest-hint { box-shadow: 0 0 0 3px #55d98a, 0 0 16px 3px rgba(85,217,138,0.85), 0 6px 14px rgba(0,0,0,0.45); }
/* ホバー/クリックで浮かせても緑グローを維持（playable:hover の box-shadow 上書きに勝つよう詳細度を上げる。持ち上げの transform は既存ルールが担う） */
.human-hand .card.suggest-hint.playable:hover,
.human-hand .card.suggest-hint.playable:active { box-shadow: 0 0 0 3px #55d98a, 0 0 16px 3px rgba(85,217,138,0.85), 0 10px 18px rgba(0,0,0,0.5); }
/* 練習モードで公開した他家の手札（閲覧専用の目印としてわずかに沈める） */
.seat:not(#seat-0) .card.revealed { opacity: 0.92; box-shadow: 0 0 0 1px rgba(85,217,138,0.5); }

/* ===== 中央の伏せ札（配札後〜伏せ札交換まで） ===== */
/* アニメ(scale/opacity)は fill状態が固着してカードが縮む/消える不具合の原因になったため使わず、常に原寸・可視で表示 */
#widow-pile { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 4; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 5px; }
#widow-pile.hidden { display: none; }
#widow-pile .widow-label { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: rgba(245,215,110,0.9); text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
#widow-pile .widow-cards { display: flex; }
#widow-pile .widow-cards .card { margin-left: -26px; box-shadow: 0 4px 10px rgba(0,0,0,0.55); }
#widow-pile .widow-cards .card:first-child { margin-left: 0; }
/* ===== トリック場 ===== */
/* z-index:25 = 座席名(z6)＋モバイルの #seat-0.playwide(z15)/.discarding(z20) より前面に。
   場に出したカードが「あなた」ラベルや取得絵札(seat-0内)に隠れないようにする（ss31/ss36） */
/* pointer-events:none = 前面(z25)でもタップを素通しし、下の手札(捨て札の2段目等)を隠さず操作可に。
   場の札/メッセージは非操作なので不要。 */
#trick-area { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 260px; height: 240px; z-index: 25; pointer-events: none; }
.trick-slot { position: absolute; width: var(--card-w); height: var(--card-h); }
.trick-slot[data-seat="0"] { bottom: 0; left: 50%; transform: translateX(-50%); }
.trick-slot[data-seat="1"] { right: 0; top: 50%; transform: translateY(-50%); }
.trick-slot[data-seat="2"] { top: 0; right: 22%; }
.trick-slot[data-seat="3"] { top: 0; left: 22%; }
.trick-slot[data-seat="4"] { left: 0; top: 50%; transform: translateY(-50%); }
/* ===== 前のトリック ピーク ===== */
/* #table 基準で配置（従来のトリック場右下と同じ見た目: 中央+130-6, 中央+120+8） */
#last-trick-btn { position: absolute; left: calc(50% + 124px); top: calc(50% + 128px); white-space: nowrap; font-size: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(20,40,30,0.85); color: var(--gold); border: 1px solid rgba(245,215,110,0.6); cursor: pointer; z-index: 30; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
#last-trick-btn:hover { background: rgba(40,70,55,0.95); }
#last-trick-btn.open { background: var(--gold); color: #222; border-color: var(--gold); box-shadow: 0 0 10px rgba(245,215,110,0.7); }
#last-trick-pop { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(12,22,18,0.96); border: 1px solid rgba(245,215,110,0.5); border-radius: 12px; padding: 10px 12px; z-index: 45; box-shadow: 0 8px 24px rgba(0,0,0,0.55); }
.lt-head { color: var(--gold); font-size: 13px; font-weight: 700; text-align: center; margin-bottom: 8px; white-space: nowrap; }
.lt-row { display: flex; gap: 8px; }
.lt-card { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lt-name { font-size: 11px; color: #eaf1ff; white-space: nowrap; }
.card.mini { width: 46px; height: 64px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.4); }
.card.mini .corner.tl { top: 3px; left: 3px; font-size: 10px; }
.card.mini .corner.br { bottom: 3px; right: 3px; font-size: 10px; }
.card.mini .center { font-size: 21px; }
.card.mini.joker .center { font-size: 13px; }
.card.mini.lt-win { box-shadow: 0 0 0 3px var(--gold), 0 0 12px rgba(245,215,110,0.7); }
/* ===== 「あなたの番」表示 ===== */
.your-turn-flag { display: none; }
#seat-0.your-turn .your-turn-flag { display: block; background: var(--gold); color: #1a1a1a; font-weight: 800; font-size: 13px; padding: 4px 14px; border-radius: 999px; box-shadow: 0 0 12px rgba(245,215,110,0.85); animation: yourTurnPulse 1.3s ease-in-out infinite; }
@keyframes yourTurnPulse { 0%,100% { box-shadow: 0 0 10px rgba(245,215,110,0.6); } 50% { box-shadow: 0 0 18px rgba(245,215,110,1); } }
#seat-0.your-turn .seat-hand { box-shadow: 0 0 0 2px rgba(245,215,110,0.7), 0 0 16px rgba(245,215,110,0.5); border-radius: 10px; }
/* 出したプレイヤーの方向からスライド入場 */
.trick-slot .card { animation: playIn 0.24s ease; }
.trick-slot .card.pf-0 { animation-name: pf0; }
.trick-slot .card.pf-1 { animation-name: pf1; }
.trick-slot .card.pf-2 { animation-name: pf2; }
.trick-slot .card.pf-3 { animation-name: pf3; }
.trick-slot .card.pf-4 { animation-name: pf4; }
@keyframes playIn { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pf0 { from { transform: translateY(80px)  scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pf1 { from { transform: translateX(110px) scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pf2 { from { transform: translate(80px,-80px) scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pf3 { from { transform: translate(-80px,-80px) scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pf4 { from { transform: translateX(-110px) scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* 現時点で最強のカード（そのトリックを取っている札）を強調 */
.trick-slot .card.leading::after {
  content: ""; position: absolute; inset: -3px; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--gold), 0 0 18px 5px rgba(245,215,110,0.85);
  animation: leadPulse 1s ease-in-out infinite;
}
/* 勝因ラベル（台札／切り札／セイム2／正ジャック／裏ジャック／ジョーカー／オールマイティ） */
.trick-slot .card.leading::before {
  content: attr(data-lead); position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #1a1a1a; font-size: 9px; font-weight: 800;
  padding: 1px 6px; border-radius: 8px; white-space: nowrap; z-index: 4; pointer-events: none;
}
@keyframes leadPulse { 0%,100% { opacity: 0.65; } 50% { opacity: 1; } }

/* セイム2の可能性があるカード（その2）を別色で強調 */
.trick-slot .card.seim2-maybe::after {
  content: ""; position: absolute; inset: -3px; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 3px #3fd0a8, 0 0 16px 4px rgba(63,208,168,0.85);
  animation: leadPulse 1.1s ease-in-out infinite;
}
.trick-slot .card.seim2-maybe::before {
  content: attr(data-lead); position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: #3fd0a8; color: #072a22; font-size: 9px; font-weight: 800;
  padding: 1px 6px; border-radius: 8px; white-space: nowrap; z-index: 4; pointer-events: none;
}

/* ジョーカー請求札（リードされた♣3/♠3）の専用エフェクト＋ラベル（最強カードのゴールドとは別色・赤） */
.trick-slot .card.jkreq::after {
  content: ""; position: absolute; inset: -3px; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 3px #e23b30, 0 0 16px 4px rgba(226,59,48,0.8);
  animation: leadPulse 1s ease-in-out infinite;
}
.trick-slot .card.jkreq::before {
  content: "ジョーカー請求"; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: #e23b30; color: #fff; font-size: 9px; font-weight: 800;
  padding: 1px 6px; border-radius: 8px; white-space: nowrap; z-index: 4; pointer-events: none;
}

/* トリック獲得: 勝者方向へ飛んで消える */
.trick-slot .card[class*="fly-"] { transition: transform 0.55s cubic-bezier(0.5,0,0.7,1), opacity 0.55s ease-in; opacity: 0; }
.trick-slot .card.fly-0 { transform: translateY(230px)  scale(0.45); }
.trick-slot .card.fly-1 { transform: translateX(280px)  scale(0.45); }
.trick-slot .card.fly-2 { transform: translate(190px,-210px) scale(0.45); }
.trick-slot .card.fly-3 { transform: translate(-190px,-210px) scale(0.45); }
.trick-slot .card.fly-4 { transform: translateX(-280px) scale(0.45); }
#trick-msg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; font-size: 22px; font-weight: 800; color: var(--gold); white-space: nowrap; pointer-events: none; text-shadow: 0 2px 8px rgba(0,0,0,0.7); }
/* 文字があるときだけ背景を付け、伏せ札の上でも読みやすく（空のときは箱を出さない） */
#trick-msg:not(:empty) { background: rgba(8,18,38,0.82); border: 1px solid rgba(245,215,110,0.5); border-radius: 999px; padding: 6px 22px; box-shadow: 0 4px 16px rgba(0,0,0,0.55); }

/* 取得した絵札の縮小表示 */
.face-pile { display: flex; flex-wrap: wrap; gap: 2px 3px; justify-content: center; max-width: 154px; }
.face-count { font-size: 15px; font-weight: 800; color: var(--gold); text-align: center; min-height: 17px; margin-top: 2px; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.face-chip { width: 28px; box-sizing: border-box; text-align: center; font-size: 10px; font-weight: 700; line-height: 1; background: #fff; border-radius: 3px; padding: 2px 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.35); animation: chipIn 0.25s ease; }
.face-chip.red { color: #c0392b; } .face-chip.black { color: #222; }
@keyframes chipIn { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ===== アクションパネル ===== */
#action-panel { grid-area: action; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 6px; }
#action-panel.phase-hidden { display: none; } /* スマホ通常戦のプレイ中はメッセージエリアを畳んで盤面を広く（JSが付与） */
.panel-hint { font-size: 14px; color: #dbe8ff; text-align: center; }
/* 競りの目安ヒント（初心者向け） */
.bid-hint-line { font-size: 13px; color: #ffeeb8; text-align: center; background: rgba(245,215,110,0.12); border: 1px solid rgba(245,215,110,0.35); border-radius: 8px; padding: 6px 10px; margin: 6px auto 2px; max-width: 460px; line-height: 1.5; }
.bid-hint-line b { color: var(--gold); }
/* 目安ヒントの【】内はスート色を優先（.bid-hint-line b の金色より詳細度を上げて勝たせる） */
.bid-hint-line b.s-blue { color: #3d82e8; } .bid-hint-line b.s-red { color: #e23b30; }
.bid-hint-line b.s-orange { color: #e88b1a; } .bid-hint-line b.s-green { color: #2ba84c; }
.bid-hint-line b.s-nt { color: var(--gold); }
.bid-hint-line .ph-ctx { color: #ccd8ee; font-size: 12px; }
/* 初心者向けヒントの場面別トグル */
.hint-rows { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.hint-row { display: flex; align-items: center; gap: 6px; justify-content: center; }
.hint-name { font-size: 13px; color: #eaf1ff; min-width: 116px; text-align: right; }
.rounds-btn.mini-toggle { min-width: 40px; font-size: 13px; padding: 5px 12px; }
.panel-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
button { font-family: inherit; font-size: 14px; font-weight: 600; padding: 8px 18px; border: none; border-radius: 8px; background: var(--gold); color: #1a1a1a; cursor: pointer; transition: filter 0.15s; }
button:hover { filter: brightness(1.08); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
/* 「この3枚を捨てる」ボタンは無効時でも見つけやすく（明るめ＋金の縁取りで存在を示す） */
button.discard-btn:disabled { opacity: 0.72; box-shadow: 0 0 0 2px rgba(245,215,110,0.7); }
.secondary-btn { background: rgba(255,255,255,0.16); color: #eaf1ff; border: 1px solid rgba(245,215,110,0.5); }
/* ダイアログ表示中のサイドバーボタンを黄色で点灯 */
.secondary-btn.active-dialog { background: var(--gold); color: #222; border-color: var(--gold); box-shadow: 0 0 10px rgba(245,215,110,0.7); }
.suit-btn { min-width: 44px; font-size: 18px; background: #fff; }
.suit-btn.red { color: #c0392b; } .suit-btn.black { color: #222; }
.suit-btn.selected { background: var(--gold); box-shadow: 0 0 0 2px #a6791f, 0 0 12px rgba(245,215,110,0.85); font-weight: 800; }
.suit-btn.s-nt.selected { color: #5c4300; } /* 金色背景で読みやすいよう濃色に */
.suit-btn.joker-btn { color: #7a2fb0; }
.suit-btn.s-nt { color: #b8860b; font-size: 15px; font-weight: 800; min-width: 48px; }
.suit-btn.disabled { opacity: 0.3; filter: grayscale(1); cursor: not-allowed; }
select { font-family: inherit; font-size: 15px; padding: 7px 10px; border-radius: 8px; border: none; }

/* ===== CPU 吹き出し ===== */
.speech-bubble {
  position: absolute; z-index: 55;
  width: max-content; max-width: 180px; min-width: 64px;
  background: var(--bubble-bg, #fff); color: var(--bubble-fg, #222);
  border-radius: 12px; padding: 7px 11px; font-size: 12px; line-height: 1.5;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.speech-bubble.show { opacity: 1; transform: translateY(0); }
.speech-name { display: block; font-weight: 700; font-size: 11px; margin-bottom: 3px; color: var(--bubble-name, #777); }

/* 座席ごとの位置としっぽ（しっぽ色は背景に追従） */
.speech-bubble::before { content: ""; position: absolute; border: 7px solid transparent; }
#seat-1 .speech-bubble { right: calc(100% + 10px); top: 30px; }
#seat-1 .speech-bubble::before { left: 100%; top: 14px; border-left-color: var(--bubble-bg, #fff); }
#seat-4 .speech-bubble { left: calc(100% + 10px); top: 30px; }
#seat-4 .speech-bubble::before { right: 100%; top: 14px; border-right-color: var(--bubble-bg, #fff); }
#seat-2 .speech-bubble, #seat-3 .speech-bubble { top: calc(100% + 10px); left: 50%; }
#seat-2 .speech-bubble::before, #seat-3 .speech-bubble::before { bottom: 100%; left: 20px; border-bottom-color: var(--bubble-bg, #fff); }

/* 性格ごとの色 */
.bubble-tsundere  { --bubble-bg: #fff0f3; --bubble-name: #e75a7c; }
.bubble-cool      { --bubble-bg: #eef4ff; --bubble-name: #3d6fb4; }
.bubble-genki     { --bubble-bg: #fff6e6; --bubble-name: #e08a1e; }
.bubble-kansai    { --bubble-bg: #eefbef; --bubble-name: #2e9e5b; }
.bubble-devil     { --bubble-bg: #f6eeff; --bubble-name: #9b59b6; }
.bubble-ojou      { --bubble-bg: #fdf6e3; --bubble-name: #c9a227; }
.bubble-tennen    { --bubble-bg: #fff2ec; --bubble-name: #e08a72; }
.bubble-chuuni    { --bubble-bg: #2a2036; --bubble-name: #c9a0ff; --bubble-fg: #e8dcff; }
.bubble-samurai   { --bubble-bg: #eef1f5; --bubble-name: #4a6785; }
.bubble-downer    { --bubble-bg: #eef0f2; --bubble-name: #7a8a99; }
.bubble-robot     { --bubble-bg: #e9f2f4; --bubble-name: #3b8a99; }
.bubble-gal       { --bubble-bg: #fdeef7; --bubble-name: #e0559b; }
.bubble-dokuzetsu { --bubble-bg: #e9f3f2; --bubble-name: #2f8a80; }
.bubble-neko      { --bubble-bg: #f6efe6; --bubble-name: #b07a45; }
.bubble-shy       { --bubble-bg: #f0f0f7; --bubble-name: #7a7ab0; }
.bubble-onee      { --bubble-bg: #f7eef4; --bubble-name: #b06a9a; }
.bubble-netsu     { --bubble-bg: #fff0ea; --bubble-name: #e0502a; }
.bubble-scientist { --bubble-bg: #eafaf1; --bubble-name: #16a06a; }
.bubble-kyou      { --bubble-bg: #fdf0f6; --bubble-name: #c85f92; }
.bubble-maid      { --bubble-bg: #f5f0fa; --bubble-name: #9a7ab5; }
.bubble-gamer     { --bubble-bg: #ecedff; --bubble-name: #5b5bd6; }
.bubble-yankee    { --bubble-bg: #fdeaea; --bubble-name: #cc3b3b; }
.bubble-fortune   { --bubble-bg: #ecebfa; --bubble-name: #6d51c6; }
.bubble-miko      { --bubble-bg: #fdf1ec; --bubble-name: #d2543a; }
.bubble-kikoku    { --bubble-bg: #e6f7fb; --bubble-name: #1f9bc0; }
.bubble-chibiyan  { --bubble-bg: #fff0e6; --bubble-name: #e07b2e; }
.bubble-tantei    { --bubble-bg: #edeef5; --bubble-name: #414a70; }

/* ===== タイトル画面 ===== */
#title-screen {
  position: fixed; inset: 0; z-index: 80;
  background: radial-gradient(ellipse at center, #244a86 0%, #08132b 100%);
  display: flex; align-items: center; justify-content: center; overflow: auto;
}
.title-box { text-align: center; padding: 32px; max-width: 92vw; width: 480px; margin: auto; } /* margin:auto=overflow時も上端までスクロール可（flex中央寄せの上切れ対策） */
.title-logo { font-size: 46px; color: var(--gold); margin-bottom: 8px; text-shadow: 0 4px 14px rgba(0,0,0,0.55); }
.title-suits { display: flex; gap: .38em; justify-content: center; font-size: .58em; line-height: 1; margin-bottom: 8px; }
.title-suits .sp { color: #3d82e8; } .title-suits .sh { color: #e23b30; } .title-suits .sd { color: #e88b1a; } .title-suits .sc { color: #2ba84c; }
.title-word { display: block; letter-spacing: .12em; font-weight: 800; }
.title-sub { font-size: 15px; margin-bottom: 20px; color: #dbe8ff; }
#persona-selectors { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.persona-row {
  display: grid; grid-template-columns: 92px 1fr; grid-template-areas: "label select" "label desc";
  gap: 4px 12px; align-items: center; background: rgba(0,0,0,0.3); padding: 12px 16px; border-radius: 12px; text-align: left;
}
.persona-seat { grid-area: label; font-weight: 700; color: var(--gold); font-size: 13px; }
.persona-select { grid-area: select; font-size: 14px; padding: 7px 9px; border-radius: 8px; border: none; cursor: pointer; min-width: 0; width: 100%; max-width: 100%; } /* min-width:0=長い英語名でもグリッドセルからはみ出さない */
.persona-desc { grid-area: desc; font-size: 12px; color: #bfe8d0; line-height: 1.5; }
#rounds-selector { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.rounds-label { font-size: 13px; color: var(--gold); font-weight: 700; margin-right: 4px; }
.rounds-btn { min-width: 46px; font-size: 15px; padding: 7px 14px; background: rgba(255,255,255,0.16); color: #eaf1ff; border: 1px solid rgba(245,215,110,0.4); }
.rounds-btn.selected { background: var(--gold); color: #1a1a1a; }
/* オプションダイアログ */
#options-dialog { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; }
.options-box { background: #12315e; border: 2px solid var(--gold); border-radius: 16px; padding: 26px 32px; width: 500px; max-width: 92vw; max-height: 90vh; overflow-y: auto; text-align: center; display: flex; flex-direction: column; gap: 16px; }
.options-title { color: var(--gold); font-size: 22px; margin-bottom: 4px; }
/* オプションのタブ */
.options-tabs { display: flex; gap: 6px; justify-content: center; border-bottom: 1px solid rgba(245,215,110,0.3); padding-bottom: 10px; }
.opt-tab { font-size: 14px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,0.1); color: #cfe0ff; border: 1px solid rgba(245,215,110,0.35); cursor: pointer; }
.opt-tab:hover { background: rgba(255,255,255,0.18); }
.opt-tab.selected { background: var(--gold); color: #1a1a1a; font-weight: 800; border-color: var(--gold); }
.opt-panel { display: flex; flex-direction: column; gap: 16px; }
.opt-panel.hidden { display: none; }
#options-close-btn { align-self: center; margin-top: 6px; padding: 10px 34px; }
#minbid-selector { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
#scoring-selector, #difficulty-selector { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.scoring-btns { display: flex; gap: 8px; }
.scoring-btn { min-width: 78px; }
.scoring-desc { font-size: 12px; color: #bfe8d0; max-width: 380px; text-align: center; line-height: 1.5; }
#revolution-selector { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.revolution-btns { display: flex; flex-direction: column; gap: 6px; width: 100%; align-items: center; }
.revolution-btn { min-width: 240px; font-size: 13px; }
#yoromeki-selector { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
#nt-selector { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
#jokercount-selector { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
#speed-selector { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
#sound-selector { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
#facelist-selector { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
#keyboard-selector { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
#chatter-selector { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
/* 全オプション共通: ラベルを必ず1行占有させ、項目はその下に折り返す（縦積みの得点方式等と統一）。
   以前はオプションが少なくスクロール回避のため横1行だったが、項目が増えどのみちスクロールするため統一。 */
#rounds-selector .rounds-label, #minbid-selector .rounds-label, #nt-selector .rounds-label, #yoromeki-selector .rounds-label, #jokercount-selector .rounds-label,
#speed-selector .rounds-label, #sound-selector .rounds-label, #facelist-selector .rounds-label, #keyboard-selector .rounds-label, #chatter-selector .rounds-label { flex-basis: 100%; margin: 0 0 4px; text-align: center; }
.title-buttons { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#start-game-btn { font-size: 18px; padding: 12px 42px; }
#resume-btn { background: #2ba84c; color: #fff; font-size: 16px; padding: 11px 34px; box-shadow: 0 0 14px rgba(43,168,76,0.5); } /* 続きから=緑で区別 */
#resume-btn:hover { filter: brightness(1.08); }
.title-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 14px; } /* PCは1行（間隔を詰めて収める）／スマホは狭ければボタン単位で折り返す */
.link-btn { background: none; border: none; color: #cfe0ff; font-size: 13px; text-decoration: underline; padding: 4px; white-space: nowrap; } /* ラベルは各ボタン内で改行しない */
.link-btn:hover { color: var(--gold); }
.title-note { margin-top: 12px; font-size: 12px; color: #9fc7d8; }

/* サイドバーの補助ボタン */
#sidebar-buttons { display: flex; gap: 6px; }
.secondary-btn.mini { flex: 1; font-size: 12px; padding: 6px 4px; }
.secondary-btn.mini.on { background: #2ba84c; color: #fff; border-color: #6fe6a0; } /* 練習: 手札公開ON */
/* 練習モードのサイドバー操作群 */
#practice-bar { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; padding: 8px; border: 1px dashed rgba(111,230,160,0.6); border-radius: 10px; background: rgba(85,217,138,0.08); }
.practice-badge { font-size: 12px; font-weight: 800; color: #8ff0bb; text-align: center; letter-spacing: 0.04em; }
#practice-bar .secondary-btn.mini:disabled { opacity: 0.45; cursor: default; }

/* 遊び方・統計・履歴などのドキュメント系ダイアログ */
#help-dialog, #stats-dialog, #ach-dialog, #practice-intro-dialog, #history-dialog, #faces-dialog, #credits-dialog { position: fixed; inset: 0; z-index: 92; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; overflow-y: auto; }
/* 練習モード: 全手札一覧オーバーレイ */
#allhands { position: fixed; inset: 0; z-index: 93; background: rgba(0,0,0,0.72); display: flex; align-items: center; justify-content: center; overflow-y: auto; }
#allhands-card { background: #12211b; border: 1px solid rgba(245,215,110,0.5); border-radius: 14px; padding: 12px 14px; width: min(560px, 94vw); max-height: 92vh; overflow-y: auto; margin: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.6); }
#allhands-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; position: sticky; top: -12px; background: #12211b; padding: 6px 0; }
#allhands-head h2 { font-size: 17px; margin: 0; color: var(--gold); }
#allhands-close { flex: 0 0 auto; } /* .mini の flex:1 を打ち消し、閉じるボタン幅をテキストに合わせる */
.ah-seat { padding: 9px 0; border-top: 1px solid rgba(255,255,255,0.09); }
.ah-seat:first-child { border-top: none; }
.ah-name { font-size: 13px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ah-role { font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 8px; }
.ah-role.nap { background: #b3402f; color: #fff; }
.ah-role.adj { background: #2f6db3; color: #fff; }
.ah-cards { display: flex; flex-wrap: wrap; gap: 4px; }
.ah-cards .card { width: 46px; height: 64px; margin: 0; flex: 0 0 auto; }
.ah-none { font-size: 12px; color: #9fc7d8; }
/* 練習モード説明ダイアログの箇条書き */
.practice-intro-list { list-style: none; padding-left: 0 !important; margin: 10px 0; text-align: left; }
.practice-intro-list li { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; line-height: 1.6; }
.practice-intro-list .pi-ic { flex: none; font-size: 18px; line-height: 1.4; }
.practice-intro-list .pi-txt { flex: 1; min-width: 0; }
.practice-intro-list b { color: #fff; }
.pi-hl { color: #8ff0bb; font-weight: 700; }
.pi-note { font-size: 12px; color: #9fc7d8; margin-top: 6px; }
.doc-box { background: #12315e; border: 2px solid var(--gold); border-radius: 16px; padding: 24px 28px; width: 560px; max-width: 94vw; max-height: 88vh; overflow: auto; margin: auto; text-align: left; } /* margin:auto=overflow時も上端まで表示（flex中央寄せの上切れ対策・ss13） */
.doc-box .options-title { text-align: center; }
.doc-body { font-size: 13px; line-height: 1.7; color: #e6eeff; }
.doc-body a { color: #8fc4ff; } /* 濃紺ダイアログ上で読みやすいリンク色 */
.doc-body a:hover { color: var(--gold); }
.doc-body p, .doc-body ol, .doc-body ul { margin: 6px 0 10px; }
.doc-body ol, .doc-body ul { padding-left: 20px; }
.doc-body li { margin-bottom: 4px; }
.doc-body b { color: #fff; }
.sub-h { color: var(--gold); font-size: 15px; margin: 14px 0 4px; border-bottom: 1px solid rgba(245,215,110,0.3); padding-bottom: 2px; }
.doc-box button { display: block; margin: 16px auto 0; padding: 10px 34px; }
.doc-buttons { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.doc-buttons button { margin: 0; }
.doc-body table { width: 100%; border-collapse: collapse; }
.doc-body td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.14); }
.legend { list-style: none; padding-left: 0 !important; }
.legend li { margin-bottom: 6px; }
.lg-badge { display: inline-block; font-weight: 800; padding: 1px 8px; border-radius: 8px; margin-right: 4px; font-size: 12px; }
.lg-mighty { background: #f5d76e; color: #3a2a00; }
.lg-joker { background: #b98bff; color: #1a0033; }
.lg-seiJ { background: #ff9a5a; color: #331400; }
.lg-uraJ { background: #7fd0ff; color: #06283a; }
.lg-seim2 { background: #7bc79a; color: #062a18; }
.lg-trump { background: #e35b5b; color: #fff; }
.lg-lead { background: rgba(255,255,255,0.6); color: #222; }

/* 実績ダイアログ */
.ach-summary { font-size: 14px; color: #cfe0ff; text-align: center; margin: 2px 0 10px; }
.ach-summary b { color: var(--gold); font-size: 18px; }
.ach-famhead { font-size: 13px; color: #9fb6e0; font-weight: 700; margin: 14px 0 7px; padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,0.14); letter-spacing: 0.06em; }
.ach-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.ach-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); opacity: 0.62; }
.ach-card.got { opacity: 1; background: linear-gradient(135deg, rgba(60,48,18,0.55), rgba(40,34,58,0.55)); border-color: rgba(245,215,110,0.55); }
.ach-icon { font-size: 26px; line-height: 1.1; filter: grayscale(1); flex: none; }
.ach-card.got .ach-icon { filter: none; }
.ach-main { min-width: 0; flex: 1; }
.ach-name { font-size: 14px; font-weight: 800; color: #dfe8ff; }
.ach-card.got .ach-name { color: var(--gold); }
.ach-check { color: #7bd69a; font-weight: 900; }
.ach-desc { font-size: 11.5px; color: #a8b6d4; line-height: 1.45; margin-top: 2px; }
.ach-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,0.14); overflow: hidden; margin-top: 6px; }
.ach-bar span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #f0c860, #f5d76e); }
.ach-prog { font-size: 10.5px; color: #9fc7d8; text-align: right; margin-top: 2px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .ach-grid { grid-template-columns: 1fr; } }

/* スコア推移（ゲーム終了画面） */
.score-history { max-height: 200px; overflow: auto; margin-top: 6px; }
.score-history table { width: 100%; border-collapse: collapse; font-size: 12px; }
.score-history th, .score-history td { padding: 3px 6px; border-bottom: 1px solid rgba(255,255,255,0.12); text-align: right; white-space: nowrap; }
.score-history th:first-child, .score-history td:first-child { text-align: center; }
.score-history .delta { color: #9fc7d8; font-size: 10px; margin-left: 2px; }
.hist-note { font-size: 11px; color: #9fc7d8; margin-top: 4px; }

/* トリック履歴 */
.hist-summary { background: rgba(255,255,255,0.06); border: 1px solid rgba(245,215,110,0.3); border-radius: 10px; padding: 9px 11px; margin-bottom: 14px; }
.hist-summary-h { font-size: 12px; color: var(--gold); font-weight: 700; margin-bottom: 7px; }
.hist-tally { display: flex; flex-wrap: wrap; gap: 6px; }
.hist-tally-item { font-size: 12px; background: rgba(255,255,255,0.1); border-radius: 6px; padding: 3px 8px; color: #eaf1ff; }
.hist-tally-item.r-nap { color: #ffcf70; } .hist-tally-item.r-adj { color: #ffd0a0; } .hist-tally-item.r-ally { color: #bfe8d0; }
.hist-tally-item b { color: #fff; font-size: 13px; }
.hist-tally-note { font-size: 11px; color: #bfe8d0; margin-top: 7px; }
.hist-trick { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 13px; }
.hist-cards { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.hist-card { background: #fff; border-radius: 4px; padding: 2px 6px; font-size: 11px; font-weight: 700; }
.hist-card.hist-win { outline: 3px solid var(--gold); outline-offset: 1px; box-shadow: 0 0 7px rgba(245,215,110,0.85); }

/* 絵札トラッカー */
.face-track { border-collapse: separate; border-spacing: 4px; margin: 4px auto 8px; }
.face-track th { font-size: 11px; color: #9fc7d8; font-weight: 700; padding: 2px 4px; }
.face-track td { text-align: center; }
.face-track .ft-suit { font-size: 18px; font-weight: 800; }
.ft-card { display: inline-block; position: relative; min-width: 22px; background: #fff; border-radius: 5px; padding: 3px 7px; font-size: 14px; font-weight: 800; box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.ft-card.used { opacity: 0.25; text-decoration: line-through; box-shadow: none; }
.ft-card.mine { outline: 2px solid var(--gold); }
.ft-yaku { position: absolute; top: -7px; right: -7px; font-size: 8px; font-weight: 800; background: #e35b5b; color: #fff; border-radius: 6px; padding: 0 3px; line-height: 1.5; }
.ft-joker { text-align: center; margin-top: 6px; font-size: 13px; color: #cfe0ff; }
.ft-joker .ft-card { color: #7a2fb0; }

/* ===== オーバーレイ ===== */
#overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; overflow-y: auto; z-index: 50; }
#overlay-card { background: #14315e; border: 2px solid var(--gold); border-radius: 16px; padding: 26px 34px; min-width: 340px; max-width: 92vw; max-height: 92vh; overflow-y: auto; margin: auto; text-align: center; } /* margin:auto=overflow時も上端まで見える（flex中央寄せの上切れ対策） */
.overlay-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
#overlay-title { color: var(--gold); margin-bottom: 14px; font-size: 24px; }
#overlay-body { margin-bottom: 20px; font-size: 15px; line-height: 1.9; }
#overlay-body table { width: 100%; border-collapse: collapse; }
#overlay-body td, #overlay-body th { padding: 5px 10px; border-bottom: 1px solid rgba(255,255,255,0.15); }
#overlay-body td:first-child, #overlay-body th:first-child { text-align: left; }
.winner-row { color: var(--gold); font-weight: 700; }
/* 結果ダイアログ内のCPU一言（吹き出し風） */
.overlay-cpu { position: relative; margin: 8px auto 18px; max-width: 340px; background: var(--bubble-bg, rgba(255,255,255,0.12)); color: var(--bubble-fg, #222); border-radius: 12px; padding: 9px 13px; font-size: 13px; line-height: 1.5; text-align: left; box-shadow: 0 3px 10px rgba(0,0,0,0.35); }
.overlay-cpu .overlay-cpu-name { display: block; font-weight: 700; font-size: 11px; color: var(--bubble-name, #cfe0ff); margin-bottom: 3px; }
/* 吹き出しのしっぽ（下向き・左寄り） */
.overlay-cpu::after { content: ""; position: absolute; top: 100%; left: 24px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid var(--bubble-bg, rgba(255,255,255,0.12)); }

/* ===== 中央バナー演出 ===== */
/* 埋め札取得／3枚捨てのカードアニメーション */
#anim-layer { position: fixed; inset: 0; z-index: 65; pointer-events: none; }
.anim-card { position: absolute; }
.deal-card { box-shadow: 0 6px 16px rgba(0,0,0,0.55); will-change: transform, opacity; }
.widow-in  { animation: widowIn 0.85s ease both; }
.widow-out { animation: widowOut 0.85s ease both; }
@keyframes widowIn  { 0% { transform: translateY(140px) scale(0.55); opacity: 0; } 55% { transform: translateY(0) scale(1.06); opacity: 1; } 100% { transform: translateY(-6px) scale(1); opacity: 0.95; } }
@keyframes widowOut { 0% { transform: translateY(-6px) scale(1); opacity: 1; } 100% { transform: translateY(150px) scale(0.5) rotate(10deg); opacity: 0; } }
.anim-label { position: absolute; top: calc(50% - 92px); left: 50%; transform: translateX(-50%); color: var(--gold); font-size: 16px; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,0.7); white-space: nowrap; }

#banner-layer { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; pointer-events: none; }

/* ---------- 対話的チュートリアル（案内付き初回対局） ---------- */
#tutorial-layer { position: fixed; inset: 0; z-index: 100; pointer-events: none; } /* 既定は素通し（対象を操作できる） */
#tutorial-block { position: absolute; inset: 0; background: rgba(0,0,0,0.62); pointer-events: auto; } /* 説明ステップ: クリックを塞ぐ全面ディム */
#tutorial-spotlight { position: fixed; border-radius: 12px; border: 2px solid var(--gold); box-shadow: 0 0 0 9999px rgba(0,0,0,0.55), 0 0 18px rgba(245,215,110,0.7); pointer-events: none; transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease; }
#tutorial-coach {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 28px); max-width: 480px;
  background: #14315e; color: #eaf2ff; border: 2px solid var(--gold); border-radius: 14px;
  padding: 14px 16px 12px; box-shadow: 0 10px 34px rgba(0,0,0,0.55); pointer-events: auto;
}
#tutorial-coach .tut-collapse { display: block; margin: 0 0 8px auto; background: rgba(255,255,255,0.16); color: #eaf1ff; border: 1px solid rgba(245,215,110,0.55); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
/* 畳んだ状態: ボタンだけの小さなピルにして手札に被らない */
#tutorial-coach.collapsed { width: auto; max-width: none; padding: 6px; }
#tutorial-coach.collapsed .tut-step,
#tutorial-coach.collapsed .tut-text,
#tutorial-coach.collapsed .tut-cue,
#tutorial-coach.collapsed .tut-btns { display: none; }
#tutorial-coach.collapsed .tut-collapse { margin: 0; }
#tutorial-coach .tut-step { font-size: 12px; color: var(--gold); font-weight: 800; margin-bottom: 5px; }
#tutorial-coach .tut-text { font-size: 14px; line-height: 1.65; }
#tutorial-coach .tut-text b { color: #ffe08a; }
#tutorial-coach .tut-note { display: block; margin-top: 7px; font-size: 12px; line-height: 1.5; color: #bfe8d0; }
#tutorial-coach .tut-note b { color: #d7f5e2; }
#tutorial-coach .tut-cue { margin-top: 9px; font-size: 12.5px; font-weight: 700; color: #ffd97a; }
#tutorial-coach .tut-btns { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 12px; }
#tutorial-coach .tut-skip { margin-right: auto; background: none; border: none; padding: 4px 2px; color: #9fb6d8; font-size: 12px; text-decoration: underline; font-weight: 600; cursor: pointer; }
#tutorial-coach .tut-primary { padding: 8px 18px; }
#tutorial-coach .tut-secondary { padding: 8px 16px; background: rgba(255,255,255,0.16); color: #eaf1ff; border: 1px solid rgba(245,215,110,0.5); }
@media (max-width: 640px) {
  #tutorial-coach { top: 8px; width: calc(100% - 16px); padding: 12px 13px 10px; }
  #tutorial-coach .tut-text { font-size: 13px; line-height: 1.6; }
  #tutorial-coach .tut-btns { flex-wrap: wrap; }
}
.banner {
  position: absolute; padding: 22px 40px; border-radius: 16px; text-align: center;
  font-size: 26px; font-weight: 800; color: #fff; background: rgba(0,0,0,0.6);
  text-shadow: 0 2px 8px rgba(0,0,0,0.7); animation: bannerPop 1.8s ease forwards;
}
.banner .banner-sub { display: block; font-size: 15px; font-weight: 600; margin-top: 10px; color: #e8f0ff; }
.banner .banner-role { display: block; font-size: 18px; font-weight: 800; margin-top: 8px; color: var(--gold); letter-spacing: 1px; }
.banner .banner-trump { display: block; font-size: 23px; font-weight: 800; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.25); color: #e8f0ff; }
.banner .banner-trump span { font-size: 28px; }
.banner .banner-trump .banner-decl { display: block; margin-top: 5px; font-size: 18px; color: var(--gold); }
.banner .banner-card {
  display: inline-block; background: #fff; border-radius: 8px; padding: 6px 16px;
  font-size: 34px; font-weight: 800; margin-top: 10px; box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.banner .banner-card.red { color: #c0392b; } .banner .banner-card.black { color: #222; } .banner .banner-card.joker { color: #7a2fb0; }
.banner-adj { color: var(--gold); border: 2px solid var(--gold); box-shadow: 0 0 50px rgba(245,215,110,0.6); margin-bottom: 96px; } /* 中央より少し上に（marginBottom分の半分だけ上へ寄る） */
.banner-reveal { color: #7fd0ff; border: 2px solid #7fd0ff; box-shadow: 0 0 50px rgba(127,208,255,0.7); }
.banner-solo { color: #ffcf70; border: 2px solid #ff9a5a; background: linear-gradient(135deg, rgba(60,30,0,0.92), rgba(90,50,10,0.92)); box-shadow: 0 0 55px rgba(255,154,90,0.8); }
.banner-ach { color: var(--gold); border: 2px solid var(--gold); background: linear-gradient(135deg, rgba(40,30,60,0.94), rgba(60,40,15,0.94)); box-shadow: 0 0 55px rgba(245,215,110,0.75); }

/* トリック勝因エフェクト */
.banner-win { font-size: 18px; padding: 14px 28px; background: rgba(0,0,0,0.72); }
.banner-win .win-reason { display: block; font-size: 30px; font-weight: 800; letter-spacing: 1px; }
.banner-win .banner-card { font-size: 24px; padding: 4px 12px; margin-top: 6px; }
.reason-mighty { color: #f5d76e; border: 2px solid #f5d76e; background: linear-gradient(135deg, rgba(30,15,0,0.93), rgba(70,45,0,0.93)); box-shadow: 0 0 55px rgba(245,215,110,0.85); }
.reason-joker  { color: #c9a0ff; border: 2px solid #a56bff; box-shadow: 0 0 48px rgba(165,107,255,0.75); }
.reason-seim2  { color: #6fe6c8; border: 2px solid #3fd0a8; box-shadow: 0 0 48px rgba(63,208,168,0.75); }
.reason-seiJ   { color: #ffb168; border: 2px solid #ff9a5a; box-shadow: 0 0 44px rgba(255,154,90,0.75); }
.reason-uraJ   { color: #8fd0ff; border: 2px solid #5fb8ff; box-shadow: 0 0 44px rgba(95,184,255,0.75); }
.reason-trump  { color: #ff9a9a; border: 2px solid #e35b5b; box-shadow: 0 0 30px rgba(227,91,91,0.5); }
.reason-lead   { color: #e6edff; border: 2px solid rgba(255,255,255,0.45); }
@keyframes bannerPop {
  0% { transform: scale(0.4); opacity: 0; }
  12% { transform: scale(1.08); opacity: 1; }
  22% { transform: scale(1); opacity: 1; }
  82% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.05); opacity: 0; }
}

.hidden { display: none !important; }

/* ===== タッチ操作の最適化 ===== */
button, .card, select, .opt-tab, .persona-select, .rounds-btn { touch-action: manipulation; } /* 300msタップ遅延/ダブルタップズームを抑制 */
button, .card, .opt-tab, .link-btn, .secondary-btn, .suit-btn { -webkit-tap-highlight-color: transparent; }
.card { -webkit-touch-callout: none; }
/* タッチ端末では hover が無いので、タップ中(:active)に浮かせて手応えを出す */
.human-hand .card.playable:active { transform: translateY(-10px); box-shadow: 0 8px 16px rgba(0,0,0,0.5); z-index: 5; }

/* ===== アクセシビリティ ===== */
/* キーボードフォーカスを明示（マウス/タッチ時は出さない） */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* フォーカスは前面化(z-index)せず上へ持ち上げるだけ。自然な重なり順を保つので右隣カードの数字が隠れない。 */
.card:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 3px var(--gold), 0 8px 16px rgba(0,0,0,0.55); transform: translateY(-16px); }
/* スクリーンリーダー専用（視覚的に隠す） */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===== レスポンシブ ===== */
/* タブレット・小型ノート（横）: サイドバーは残しつつ全体を縮小 */
@media (max-width: 900px) and (min-width: 641px) {
  :root { --card-w: 54px; --card-h: 76px; }
  #game { grid-template-columns: 188px 1fr; }
  #sidebar { padding: 10px; gap: 8px; }
  #sidebar h2 { font-size: 17px; }
  #trick-area { width: 224px; height: 212px; }
  #last-trick-btn { left: calc(50% + 106px); top: calc(50% + 114px); } /* トリック場縮小に合わせ従来位置を維持 */
}

/* スマホ縦（1カラム: テーブル→操作→情報） */
@media (max-width: 640px) {
  :root { --card-w: 44px; --card-h: 62px; }
  #widow-pile .widow-label { font-size: 11px; } /* 中央「伏せ札」ラベルはスマホでは従来サイズ（拡大はPCのみ） */
  /* スマホでは席内のCPU手札が重なり「手札公開」の効果が薄いため非表示（代わりに「全手札を見る」を使う） */
  #practice-reveal-btn { display: none; }
  #game {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0,1fr) auto auto;
    grid-template-areas: "table" "action" "side";
    gap: 6px; padding: 6px;
  }
  #sidebar { flex-direction: column; max-height: 24vh; padding: 8px 10px; gap: 7px; }
  #sidebar h2 { font-size: 15px; }
  #sidebar-last-trick { display: inline-block; font-size: 11px; padding: 4px 9px; } /* スマホは「前のトリック」をサイドバー右上に */
  #deal-info { font-size: 11px; line-height: 1.5; }
  #trick-area { width: 196px; height: 196px; }
  /* スマホは手札が2段になりテーブル内に置き場が無いため、フローティングボタンは隠しサイドバー右上の #sidebar-last-trick に置換 */
  #last-trick-btn { display: none; }
  #seat-0 { bottom: 4px; }
  #seat-0 .seat-hand.human-hand .card { margin-left: -12px; } /* 重なりを減らしてタップ域を確保（露出 約32px） */
  /* 捨て札フェーズ(手札13枚)は端が見切れるため2段に折り返す。
     #seat-0 は position:absolute + left:50% + translateX(-50%) で幅が「テーブル右半分」の
     shrink-to-fit に潰れ、折り返すと4段化する。left/right を両指定して座席を全幅にし、
     実テーブル幅で折り返させる（→ 2段）。重なりも解消してタップ域を独立させる。 */
  #seat-0.discarding { left: 6px; right: 6px; transform: none; width: auto; z-index: 20; } /* 全幅時に端の札が左右の席札に隠れないよう前面へ */
  #seat-0.discarding .seat-hand.human-hand { flex-wrap: wrap; justify-content: center; row-gap: 6px; column-gap: 3px; }
  #seat-0.discarding .seat-hand.human-hand .card, #seat-0.discarding .seat-hand.human-hand .card:first-child { margin-left: 0; }
  #seat-0.discarding .seat-hand.human-hand .card.selected { transform: translateY(-6px); } /* 段被り防止に持ち上げ控えめ（選択は金枠で表示） */
  /* プレイ時の手札もスマホでは全幅・2段折返しで重なりを解消し、タップ域(=カード幅)を確保する */
  #seat-0.playwide { left: 6px; right: 6px; transform: none; width: auto; z-index: 15; }
  #seat-0.playwide .seat-hand.human-hand { flex-wrap: wrap; justify-content: center; row-gap: 8px; column-gap: 5px; }
  #seat-0.playwide .seat-hand.human-hand .card, #seat-0.playwide .seat-hand.human-hand .card:first-child { margin-left: 0; }
  #seat-1 { right: 4px; bottom: 27%; }
  #seat-4 { left: 4px; bottom: 27%; }
  #seat-2 { top: 6px; right: 9%; }
  #seat-3 { top: 6px; left: 9%; }
  #trick-msg { font-size: 17px; }
  .face-pile { max-width: 118px; }
  .seat-name { font-size: 11px; padding: 2px 8px; }
  .seat-tag { font-size: 11px; padding: 1px 6px; min-height: 14px; }
  #action-panel { padding: 4px; gap: 6px; min-height: 46px; }
  .banner { font-size: 20px; padding: 16px 26px; }
  .banner-win .win-reason { font-size: 22px; }
  /* バナーを画面中央でなくゲームエリア上部へ（手札やサイドバーに被らないように） */
  #banner-layer { align-items: flex-start; padding-top: 13vh; }
  .banner-win, .banner-reveal, .banner-solo { top: 26vh; } /* 勝因・副官発覚・一人ナポ発覚は中央寄りに */
  /* 副官札発表は背が高いので画面上部へ（アドレスバーで縦が狭くても手札と被らないように）。
     最上部だと窮屈なので少しだけ下げる。desktop の margin-bottom はここで打ち消す。 */
  .banner-adj { top: 48px; margin-bottom: 0; }
  .bid-hint-line { max-width: 94vw; }
  /* 吹き出し: 狭いテーブルで画面外に出ないよう内向きに開き、小さめに */
  .speech-bubble { max-width: min(58vw, 150px); font-size: 11px; padding: 5px 8px; }
  #seat-2 .speech-bubble { left: auto; right: 0; }               /* 右上→左へ開く */
  #seat-2 .speech-bubble::before { left: auto; right: 18px; }
  #seat-3 .speech-bubble { left: 0; }                            /* 左上→右へ開く */
  #seat-3 .speech-bubble::before { left: 18px; }
  /* タイトル: 性格選択を1カラムに積み、セレクトを全幅にしてはみ出し防止 */
  .persona-row { grid-template-columns: 1fr; grid-template-areas: "label" "select" "desc"; gap: 5px 0; padding: 10px 12px; }
  .persona-seat { font-size: 12px; }
  .persona-select { width: 100%; max-width: 100%; }
  /* 結果オーバーレイをスマホ幅に収める */
  #overlay-card { min-width: 0; padding: 18px 16px; }
  #overlay-title { font-size: 20px; }
  /* ss11: タイトルロゴが改行しないよう縮小＆折り返し禁止 */
  .title-logo { font-size: 34px; white-space: nowrap; }
  /* ラベル1行占有＋折り返しは基本ルール（#..-selector .rounds-label）へ統一済み。ここでの再指定は不要。 */
  /* ss12: 小さいカードでは隅の小スートを消し、ランクのみ表示（中央の大スート＋色で判別） */
  .card:not(.joker) .corner span { display: none; }
  /* ジョーカーはスマホでは「Jo」表示（デスクトップは JOKER） */
  .card .corner .jk-l { display: none; }
  .card .corner .jk-s { display: inline; }
}

/* 極小端末（〜380px） */
@media (max-width: 380px) {
  :root { --card-w: 40px; --card-h: 56px; }
  #trick-area { width: 176px; height: 182px; }
  #seat-0 .seat-hand.human-hand .card { margin-left: -12px; } /* 露出 約28px */
  #sidebar h2 { font-size: 14px; }
  .title-logo { font-size: 30px; }
}

/* 横向き（画面が低い）: 縦を詰めてサイド2カラムに戻す */
@media (max-height: 480px) and (orientation: landscape) {
  :root { --card-w: 46px; --card-h: 64px; }
  #game {
    grid-template-columns: 168px 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: "side table" "side action";
    gap: 6px; padding: 6px;
  }
  #sidebar { flex-direction: column; max-height: none; padding: 8px; gap: 6px; }
  #sidebar-last-trick { display: inline-block; font-size: 11px; padding: 4px 9px; } /* 横向きスマホでもサイドバー右上に */
  #trick-area { width: 188px; height: 176px; }
  #action-panel { min-height: 38px; padding: 3px; gap: 5px; }
  /* 横向きでも狭いテーブルにフローティングボタンの置き場が無いため隠す（サイドバー右上の #sidebar-last-trick に置換） */
  #last-trick-btn { display: none; }
  #seat-0 .seat-hand.human-hand .card { margin-left: -12px; } /* 縦持ち同様、手札の露出を確保（ss9） */
  /* 吹き出し: 横向きでも画面外に出ないよう小さめ＆内向きに（ss8） */
  .speech-bubble { max-width: min(38vw, 160px); font-size: 11px; padding: 5px 8px; }
  #seat-2 .speech-bubble { left: auto; right: 0; }
  #seat-2 .speech-bubble::before { left: auto; right: 18px; }
  #seat-3 .speech-bubble { left: 0; }
  #seat-3 .speech-bubble::before { left: 18px; }
  .card:not(.joker) .corner span { display: none; } /* ss12: 横向きスマホでも隅の小スートを消す */
  .card .corner .jk-l { display: none; }
  .card .corner .jk-s { display: inline; } /* 横向きスマホもジョーカーは Jo */
}

/* タイトル画面: 低い画面（横向きスマホ等）は横幅を活かして縦を圧縮し、1画面に収める */
@media (max-height: 540px) {
  .title-box { padding: 14px 22px; width: min(780px, 94vw); }
  .title-logo { font-size: 26px; margin-bottom: 2px; }
  .title-sub { font-size: 12px; margin-bottom: 8px; }
  #persona-selectors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; } /* 4人を2×2に */
  .persona-row { padding: 8px 12px; }
  .persona-desc { font-size: 11px; }
  .title-buttons { flex-direction: row; flex-wrap: wrap; gap: 8px; } /* 下部ボタンを横並びに */
  #start-game-btn { font-size: 15px; padding: 10px 22px; }
  .title-links { margin-top: 8px; }
  .title-note { display: none; }
}

/* ===== 動き軽減（OS設定「視差効果を減らす／アニメーションを減らす」に対応） =====
   点滅・拡縮・スライドを止める。animation:none はアニメ前の基準状態に留まるため、
   バナー等のフェードアウト終端(opacity:0)へ飛ばず、表示は保たれる（JSのタイマーで消える）。
   transition は即時化（ホバー/フォーカスの持ち上げ位置は保つが、スライドしない）。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto !important; }
  /* 点滅を止めても副官札/役札ヒントが消えないよう、静止した強調を付与 */
  .human-hand .card.adj-hint { transform: translateY(-10px); box-shadow: 0 0 0 3px var(--gold), 0 0 14px 3px rgba(245,215,110,0.7); }
  .human-hand .card.yaku-hint { box-shadow: 0 0 0 3px #ff5a4d, 0 0 14px 3px rgba(226,59,48,0.7); }
}