:root { --cw: 34px; --cwb: 58px; --felt: #0f5d3a; --felt2: #0a4029; --gold: #f2c14e; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--page, #10161d); color: #eef; font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
button { font: inherit; border: 0; border-radius: 10px; padding: 10px 14px; background: #2d3a48; color: #fff; cursor: pointer; }
button.primary { background: #2f8f5b; } button.danger { background: #a33; } button:disabled { opacity: .4; }
input, select { font: inherit; padding: 8px; border-radius: 8px; border: 1px solid #456; background: #1b2530; color: #fff; width: 100%; }
input.tiny { width: 56px; display: inline-block; padding: 4px; }
label { display: block; margin: 8px 0; font-size: 14px; } label.row { display: flex; align-items: center; gap: 6px; } label.row input[type=checkbox] { width: auto; }
#lobby { max-width: 480px; margin: 0 auto; padding: 16px; }
#lobby h1 { font-size: 24px; margin: 8px 0; } #lobby h1 small { font-size: 12px; background: #c84; padding: 2px 6px; border-radius: 6px; vertical-align: middle; }
.sub { color: #9ab; font-size: 13px; }
.box { background: #18212b; border-radius: 12px; padding: 12px; margin: 12px 0; } .box h2 { font-size: 16px; margin: 0 0 6px; }
.box button { width: 100%; margin-top: 6px; }
.rules p, .rules li { font-size: 13px; line-height: 1.6; color: #cde; }

#table { display: flex; flex-direction: column; height: 100%; max-width: 760px; margin: 0 auto; }
header { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; gap: 6px; }
.hl, .hr { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chip { padding: 6px 10px; font-size: 13px; }
.game { font-weight: bold; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#handInfo { font-size: 12px; color: #9ab; white-space: nowrap; }
#ruleBar { font-size: 11px; color: #bcd; padding: 0 10px 4px; }
#felt { position: relative; flex: 1; min-height: 300px; margin: 4px 8px; }
#tablebg { position: absolute; inset: 0; pointer-events: none; } #tablebg svg { display: block; }
#seats, #center { z-index: 1; } #seats { position: absolute; inset: 0; }
body.light-felt #pot { text-shadow: none; } body.light-felt #street { color: var(--ink); } body.light-felt .card.slot { background: #0000000f; border-color: #0003; }
#center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
#pot { font-weight: bold; color: var(--gold); margin-top: 4px; font-size: 15px; }
#street { font-size: 12px; color: #cfe; }
.cards { display: flex; gap: 3px; justify-content: center; }
.card { width: var(--cw); aspect-ratio: 200/280; border-radius: 4px; background: #fff center/cover no-repeat; box-shadow: 0 1px 3px #0007; position: relative; transition: transform .12s; }
#board .card { --cw: 44px; }
.cards.big .card { width: var(--cwb); cursor: pointer; }
.card.sel { transform: translateY(-14px); outline: 3px solid #f55; }
.card.win { outline: 3px solid var(--gold); }
.card.slot { background: #ffffff14; box-shadow: none; border: 1px dashed #ffffff33; }
.seat { position: absolute; transform: translate(-50%, -50%); width: 108px; text-align: center; font-size: 12px; }
.seat .plate { background: #000a; border-radius: 10px; padding: 3px 4px; border: 2px solid transparent; }
.seat.turn .plate { border-color: var(--gold); box-shadow: 0 0 10px var(--gold); }
.seat.folded { opacity: .45; } .seat.out { opacity: .5; }
.seat .nm { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat .st { color: #9fd; } .seat .tag { font-size: 10px; color: #fc8; }
.seat .bet { color: var(--gold); font-weight: bold; min-height: 15px; }
.seat .cards .card { --cw: 20px; } .seat.showdown .cards .card { --cw: 24px; }
.btn-d { display: inline-block; background: #fff; color: #000; border-radius: 50%; width: 17px; height: 17px; line-height: 17px; font-size: 10px; font-weight: bold; margin-left: 2px; }
.seat.empty .plate { opacity: .5; border: 1px dashed #fff5; }
.seat.empty button { padding: 2px 8px; font-size: 11px; }
#me { text-align: center; padding: 4px; }
#myInfo { font-size: 13px; color: #cde; min-height: 18px; } #myEval { font-size: 12px; color: #fd8; min-height: 16px; margin-top: 4px; }
#actions { padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 54px; }
#actions button { flex: 1 1 28%; min-width: 90px; padding: 12px 6px; font-size: 15px; }
/* フォールド／コール／レイズ (shopさん 2026-11-01 15:53): 3色だけ = 縁の赤 #ff4d4d→#8e0f16・中のチャコール #3a3d42→#16181b・外の黒 #0d0e10。
   平らな塗りをやめて「やめる」ボタン風（細い赤の縁＋暗い地）に、グラデーション・上のハイライト・下の影・押すと沈む。 */
#actions .fold, #actions .call, #actions .raise { position: relative; font-weight: 700; letter-spacing: .02em; border-radius: 12px;
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease; }
#actions .fold { color: #ff4d4d; border: 1.5px solid #ff4d4d;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 48%), linear-gradient(180deg, #3a3d42 0%, #16181b 55%, #0d0e10 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -3px 6px rgba(0,0,0,.55), 0 3px 0 #000, 0 6px 12px rgba(0,0,0,.55);
  text-shadow: 0 1px 2px #000; }
#actions .call { color: #fff; border: 1px solid #ff4d4d66;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 50%), linear-gradient(180deg, #5b5f66 0%, #3a3d42 42%, #16181b 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -3px 6px rgba(0,0,0,.45), 0 3px 0 #0d0e10, 0 6px 12px rgba(0,0,0,.55);
  text-shadow: 0 1px 2px #0d0e10; }
#actions .raise { color: #fff; border: 1px solid #ff8a8a;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 50%), linear-gradient(180deg, #ff4d4d 0%, #c8202a 48%, #8e0f16 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.40), inset 0 -3px 6px rgba(60,0,6,.55), 0 3px 0 #4a060b, 0 6px 14px rgba(142,15,22,.45);
  text-shadow: 0 1px 2px #4a060b; }
#actions .fold:active, #actions .call:active, #actions .raise:active { transform: translateY(3px); filter: brightness(.88); }
#actions .fold:active { box-shadow: inset 0 2px 6px rgba(0,0,0,.7), 0 0 0 #000, 0 2px 4px rgba(0,0,0,.5); }
#actions .call:active { box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 0 0 #0d0e10, 0 2px 4px rgba(0,0,0,.5); }
#actions .raise:active { box-shadow: inset 0 2px 6px rgba(60,0,6,.7), 0 0 0 #4a060b, 0 2px 4px rgba(0,0,0,.5); }
@media (hover: hover) { #actions .fold:hover, #actions .call:hover, #actions .raise:hover { filter: brightness(1.1); } }
#actions .fold:focus-visible, #actions .call:focus-visible, #actions .raise:focus-visible { outline: 2px solid #ff8a8a; outline-offset: 2px; }
#actions .raiseRow { flex-basis: 100%; display: flex; gap: 4px; align-items: center; }
#actions .raiseRow input[type=range] { flex: 1; } #actions .raiseRow input[type=number] { width: 80px; }
#actions .raiseRow button { flex: 0 0 auto; min-width: 0; padding: 6px 8px; font-size: 12px; }
#actions .wait { color: #9ab; font-size: 13px; align-self: center; }
#result { margin: 0 8px; background: #000c; border: 1px solid var(--gold); border-radius: 10px; padding: 6px 10px; font-size: 12px; max-height: 30vh; overflow: auto; }
#result .pot { margin: 3px 0; } #result b { color: var(--gold); }
#menu { position: fixed; inset: 0; background: #000d; padding: 16px; overflow: auto; display: flex; flex-direction: column; gap: 8px; max-width: 520px; margin: 0 auto; z-index: 10; }
#menu .settings { background: #18212b; padding: 10px; border-radius: 10px; display: flex; flex-direction: column; gap: 6px; } #menu h3 { margin: 0; font-size: 14px; }
#log { background: #0b1016; border-radius: 8px; padding: 8px; font-size: 12px; max-height: 220px; overflow: auto; white-space: pre-wrap; color: #bcd; }
#toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: #c33; color: #fff; padding: 8px 14px; border-radius: 10px; z-index: 20; font-size: 14px; }
.timer { font-size: 11px; color: #fc8; }
@media (min-width: 600px) { :root { --cw: 40px; --cwb: 76px; } #board .card { --cw: 60px; } .seat { width: 140px; font-size: 13px; } .seat .cards .card { --cw: 28px; } }
.seat .cat { display: block; width: 40px; height: 40px; margin: -24px auto 1px; border-radius: 50%; object-fit: cover; background: #0006; }
.seat .cat-fb { font-size: 26px; line-height: 40px; }
.seat.turn .cat { box-shadow: 0 0 10px var(--gold); }
.mycat { width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; margin-right: 4px; object-fit: cover; }
/* mobile fit: overlap opponents' cards so 5 fit inside the seat; avatar below cards */
.seat { width: 96px; }
.seat .cards { gap: 0; margin-bottom: 2px; }
.seat .cards .card + .card { margin-left: -6px; }
.seat.showdown .cards .card + .card { margin-left: -4px; }
.seat .cat { margin: -16px auto 0; width: 36px; height: 36px; }
#codeBtn { white-space: nowrap; }
@media (min-width: 600px) { .seat { width: 140px; } .seat .cards .card + .card { margin-left: 0; } .seat .cards { gap: 3px; } .seat .cat { width: 44px; height: 44px; } }
.rot { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .rot.sub { padding-left: 28px; font-size: 13px; opacity: .85; }
/* 2026-11-01 03:02 settings screen: modes, game multi-select, 持ち点 / ブラインド (shared Node + Worker client) */
#lobby { padding-bottom: 32px; }
#lobby h1 small.ptag { font-size: 12px; background: #c84; padding: 2px 6px; border-radius: 6px; vertical-align: middle; font-weight: 700; }
body[data-mode="ai"] .pvpOnly, body[data-mode="pvp"] .aiOnly { display: none !important; }
.fieldHead { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 10px 0 6px; } .fieldHead small { color: #9ab; font-size: 11px; flex: 1; }
.box button.mini, button.mini { width: auto; margin: 0; padding: 4px 12px; font-size: 12px; border-radius: 99px; background: #3a3d42; border: 1px solid #ff4d4d88; }
.gpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gchk { margin: 0; position: relative; }
.gchk input { position: absolute; opacity: 0; pointer-events: none; }
.gchk span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 6px 4px; border-radius: 10px; font-size: 13px; font-weight: 700;
  background: #1b2530; border: 2px solid #34404d; color: #9ab; cursor: pointer; line-height: 1.2; }
.gchk input:checked + span { background: linear-gradient(135deg, #b8232e, #6e0f18); border-color: #ff6b6b; color: #fff; }
.gchk input:focus-visible + span { outline: 2px solid #fff; }
#rotNote { margin: 6px 0 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#lobby .box button.primary { background: #c22f3a; }
/* landscape phone (e.g. 844x390): felt on the left, my cards + action buttons on the right, so the buttons are never below the fold */
@media (orientation: landscape) and (max-height: 520px) {
  #table { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 40%); grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    column-gap: 6px; height: 100vh; height: 100dvh; overflow: hidden; }
  #table > header { grid-column: 1 / 3; grid-row: 1; padding: 3px 8px; }
  #ruleBar { grid-column: 2; grid-row: 2; font-size: 10.5px; line-height: 1.35; padding: 0 8px 2px 0; }
  #felt { grid-column: 1; grid-row: 2 / 6; min-height: 0; margin: 26px 4px 4px 8px; }
  #result { grid-column: 2; grid-row: 3; align-self: start; max-height: 26vh; margin: 0 6px 0 0; }
  #me { grid-column: 2; grid-row: 4; padding: 2px; }
  #actions { grid-column: 2; grid-row: 5; padding: 4px 8px calc(6px + env(safe-area-inset-bottom)); min-height: 0; align-content: flex-end; }
  #actions button { padding: 9px 4px; font-size: 14px; min-width: 70px; }
  :root { --cwb: 50px; } #board .card { --cw: 38px; }
  .seat { width: 92px; font-size: 11px; } .seat .cards .card { --cw: 18px; } .seat .cat { width: 28px; height: 28px; margin-top: -10px; }
  #myInfo { font-size: 12px; } #myEval { font-size: 11px; margin-top: 2px; }
}

/* wide screens: room above the felt so the top seat's cards don't cover the rule/rotation line */
@media (min-width: 700px) and (min-height: 521px) { #felt { margin-top: 26px; } }

/* 勝敗表示 (shopさん 2026-11-01 15:55): 大きな結果パネル（色は卓の3色＋勝ちの金） */
#result.sd { position: fixed; z-index: 25; left: 50%; top: 56px; transform: translateX(-50%); width: min(640px, calc(100% - 16px)); max-height: calc(100% - 230px);
  margin: 0; padding: 10px 12px 8px; font-size: 13px; background: linear-gradient(180deg, #2a2c30f2, #0d0e10f5); border: 1.5px solid #ff4d4d; border-radius: 16px;
  box-shadow: 0 10px 30px #000c, inset 0 1px 0 #ffffff22; animation: sdIn .28s ease-out; cursor: pointer; }
@keyframes sdIn { from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.97); } }
#result.sd .sdHead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
#result.sd .sdTtl { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: .04em; } #result.sd .sdX { font-size: 11px; color: #9a9da3; }
#result.sd .sdPot { margin: 0 0 6px; } #result.sd .sdPotL { font-size: 12px; color: #c9ccd1; margin-bottom: 3px; }
#result.sd .sdWins { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#result.sd .sdWin { border-radius: 12px; padding: 7px 8px; text-align: center; background: linear-gradient(180deg, #3a3d42, #16181b); border: 1px solid #ff4d4d66; box-shadow: inset 0 1px 0 #ffffff22; }
#result.sd .sdWin.sdH { background: linear-gradient(180deg, #c8202a, #8e0f16 70%, #5a0910); border-color: #ff8a8a; }
#result.sd .sdJudge { font-size: 12px; font-weight: 700; color: #e9eaec; display: flex; justify-content: center; gap: 6px; } #result.sd .sdJudge b { color: var(--gold); }
#result.sd .sdName { font-size: 15px; font-weight: 800; color: #fff; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#result.sd .sdHand { font-size: 20px; font-weight: 900; color: #ffe27a; text-shadow: 0 2px 4px #000; line-height: 1.25; }
#result.sd .sdOne .sdName { font-size: 20px; } #result.sd .sdAmt { font-size: 22px; font-weight: 900; color: #ffe27a; }
#result.sd .sdBoard { display: flex; align-items: center; justify-content: center; gap: 3px; margin: 4px 0 6px; }
#result.sd .sdLbl { font-size: 11px; color: #9a9da3; margin-right: 4px; }
#result.sd .sdc { display: inline-block; width: 30px; aspect-ratio: 200/280; border-radius: 3px; background: #fff center/cover no-repeat; box-shadow: 0 1px 3px #0009; }
#result.sd .sdc.dim { filter: brightness(.55); }
#result.sd .sdc.useB { outline: 2.5px solid #ffe27a; outline-offset: 1px; box-shadow: 0 0 10px #ffe27acc; transform: translateY(-3px); }
#result.sd .sdc.useH { outline: 2.5px solid #ff4d4d; outline-offset: 1px; box-shadow: 0 0 10px #ff4d4dcc; transform: translateY(-3px); }
#result.sd .sdc.useB.useH { outline-color: #ffe27a; box-shadow: 0 0 0 5px #ff4d4d, 0 0 12px #ff4d4d; }
#result.sd .sdRows { display: flex; flex-direction: column; gap: 4px; }
#result.sd .sdRow { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "who cards" "desc desc"; align-items: center; gap: 2px 8px; padding: 5px 8px 6px; border-radius: 10px; background: #16181bcc; border: 1px solid #ffffff14; }
#result.sd .sdRow.won { background: linear-gradient(90deg, #3a3d42, #16181b); border-color: #ffe27a99; }
#result.sd .sdWho { grid-area: who; display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; } #result.sd .sdWho b { color: #fff; }
#result.sd .sdWho small { color: #9a9da3; } #result.sd .sdPlus { color: #ffe27a; font-weight: 800; }
#result.sd .sdCat { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; }
#result.sd .sdCards { grid-area: cards; display: flex; gap: 3px; } #result.sd .sdRow .sdc { width: 34px; }
#result.sd .sdDesc { grid-area: desc; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #c9ccd1; }
#result.sd .sdDesc .w { color: #ffe27a; font-weight: 800; }
#result.sd .sdKey { margin-top: 6px; font-size: 11px; color: #9a9da3; text-align: center; }
#result.sd .sdKey .k { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 3px; border: 2px solid #ffe27a; } #result.sd .sdKey .k.useH { border-color: #ff4d4d; }
@media (min-width: 900px) { #result.sd { top: 80px; font-size: 14px; } #result.sd .sdHand { font-size: 24px; } #result.sd .sdName { font-size: 17px; } #result.sd .sdc { width: 40px; } #result.sd .sdRow .sdc { width: 44px; } }
@media (orientation: landscape) and (max-height: 520px) { #result.sd { top: 36px; max-height: calc(100% - 44px); width: min(560px, calc(100% - 16px)); } #result.sd .sdHand { font-size: 16px; } }
/* 勝敗表示: 6人でもスクロールなしで収まるよう、名前と役名を左・札を右に詰める */
#result.sd { max-height: calc(100% - 64px); overflow: auto; }
#result.sd .sdRow { grid-template-areas: "who cards" "desc cards"; padding: 4px 6px; gap: 1px 6px; }
#result.sd .sdDesc { flex-direction: column; gap: 0; font-size: 11.5px; line-height: 1.35; }
@media (max-width: 480px) { #result.sd { padding: 8px 8px 6px; } #result.sd .sdHand { font-size: 18px; } #result.sd .sdJudge { font-size: 11px; }
  #result.sd .sdName { font-size: 14px; } #result.sd .sdc { width: 26px; } #result.sd .sdRow .sdc { width: 30px; } #result.sd .sdWho { font-size: 13px; } }
#result.sd { z-index: 55; } /* フェーズ表示(50)より上・チップ演出(60〜)より下 */
body:has(#exitSheet:not(.hidden)) #result.sd, body:has(#menu:not(.hidden)) #result.sd { display: none; } /* メニュー／退出を開いたら隠す */

/* 2026-11-01 3-1: 結果パネルが出ている間は、チップの動き・配当ラベル・バナーをパネル(55)の下(54)へ回す。
   パネルの外（席のまわり）では見えたまま、パネルの上には重ならない。パネルの出るタイミング・4.2秒は変えない */
body.sdOpen .p32fly, body.sdOpen #dmFly, body.sdOpen .p2sf-chip, body.sdOpen .p2sf-lab, body.sdOpen .p2sf-ban { z-index: 54 !important; }
/* 2026-11-01 17:28-1: 高さが低い縦画面（iPhone SE 375x667・360x740 など）だけ、結果パネルを詰めて6人分が収まるように。
   ほかの画面サイズ（390x844 以上の縦・PC・横向き）は上のルールのまま変えない。 */
@media (orientation: portrait) and (max-height: 760px) and (max-width: 600px) {
  #result.sd { top: 44px; max-height: calc(100% - 52px); padding: 5px 7px 4px; }
  #result.sd .sdHead { margin-bottom: 3px; } #result.sd .sdTtl { font-size: 14px; } #result.sd .sdX { font-size: 10px; }
  #result.sd .sdPot { margin: 0 0 3px; } #result.sd .sdPotL { font-size: 11px; margin-bottom: 2px; }
  #result.sd .sdWins { gap: 4px; } #result.sd .sdWin { padding: 3px 6px 4px; border-radius: 9px; }
  #result.sd .sdJudge { font-size: 10px; gap: 4px; } #result.sd .sdName { font-size: 12.5px; margin-top: 0; line-height: 1.25; }
  #result.sd .sdHand { font-size: 14px; line-height: 1.2; }
  #result.sd .sdBoard { margin: 2px 0 3px; } #result.sd .sdc { width: 21px; } #result.sd .sdLbl { font-size: 10px; }
  #result.sd .sdRows { gap: 2px; }
  #result.sd .sdRow { padding: 2px 6px 3px; gap: 0 6px; border-radius: 8px; }
  #result.sd .sdRow .sdc { width: 22px; } #result.sd .sdCards { gap: 2px; }
  #result.sd .sdWho { font-size: 12px; line-height: 1.3; } #result.sd .sdCat { width: 16px; height: 16px; }
  #result.sd .sdDesc { font-size: 10.5px; line-height: 1.25; min-width: 0; }
  #result.sd .sdDesc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #result.sd .sdKey { margin-top: 3px; font-size: 10px; } #result.sd .sdKey .k { width: 8px; height: 8px; }
}
/* ===== 勝敗の拡大表示 (shopさん 2026-11-01 22:29): ショーダウンで勝った人と自分の手札を大きく。#result.sd.big ===== */
#result.sd.big { top: 8px; bottom: 8px; max-height: none; width: min(720px, calc(100% - 12px)); padding: 10px 12px 8px; background: #0b0c0ef2; border: 2px solid var(--gold); box-shadow: 0 10px 40px #000c; display: flex; flex-direction: column; gap: 6px; overflow: auto; }
#result.sd.big .sdHead { margin: 0; } #result.sd.big .sdTtl { font-size: 20px; color: #ffe27a; }
#result.sd.big .bgBar { height: 4px; border-radius: 2px; background: #ffffff1f; overflow: hidden; flex: 0 0 auto; }
#result.sd.big .bgBar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ffe27a, #ff4d4d); transform-origin: left; animation: bgBarRun linear forwards; }
@keyframes bgBarRun { from { transform: scaleX(1); } to { transform: scaleX(0); } }
#result.sd.big .bgWhy { display: flex; flex-direction: column; gap: 4px; }
#result.sd.big .bgWhyRow { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "j j a" "n d d"; align-items: baseline; gap: 0 8px; padding: 5px 10px; border-radius: 10px; background: linear-gradient(180deg, #3a3d42, #16181b); border: 1px solid #ffe27a88; }
#result.sd.big .bgWhyRow.h { background: linear-gradient(180deg, #c8202a, #6a0b12); border-color: #ff8a8a; }
#result.sd.big .bgWhyRow small { grid-area: j; justify-self: end; color: #c9ccd1; font-size: 11px; }
#result.sd.big .bgWhyRow .j { grid-area: j; font-size: 12px; font-weight: 700; color: #e9eaec; }
#result.sd.big .bgWhyRow b { grid-area: n; font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
#result.sd.big .bgWhyRow .d { grid-area: d; font-size: 20px; font-weight: 900; color: #ffe27a; text-shadow: 0 2px 4px #000; }
#result.sd.big .bgWhyRow .a { grid-area: a; font-weight: 800; color: #ffe27a; font-size: 13px; }
#result.sd.big .bgBoard { display: flex; align-items: center; justify-content: center; gap: 6px; }
#result.sd.big .bgLbl { font-size: 12px; color: #c9ccd1; writing-mode: vertical-rl; letter-spacing: .1em; }
#result.sd.big .bgCards { display: flex; gap: 5px; justify-content: center; }
#result.sd.big .bgc { display: inline-block; width: 52px; aspect-ratio: 200/280; border-radius: 5px; background: #fff center/cover no-repeat; box-shadow: 0 2px 5px #000a; transition: none; }
#result.sd.big .bgc.dim { filter: brightness(.5) saturate(.7); }
#result.sd.big .bgc.useB { outline: 3px solid #ffe27a; outline-offset: 1px; box-shadow: 0 0 14px #ffe27acc; transform: translateY(-4px); }
#result.sd.big .bgc.useH { outline: 3px solid #ff4d4d; outline-offset: 1px; box-shadow: 0 0 14px #ff4d4dcc; transform: translateY(-4px); }
#result.sd.big .bgc.useB.useH { outline-color: #ffe27a; box-shadow: 0 0 0 6px #ff4d4d, 0 0 14px #ff4d4d; }
#result.sd.big .bgRows { display: flex; flex-direction: column; gap: 6px; }
#result.sd.big .bgRow { padding: 6px 8px 7px; border-radius: 12px; background: #16181bcc; border: 1px solid #ffffff1f; display: flex; flex-direction: column; gap: 5px; }
#result.sd.big .bgRow.won { background: linear-gradient(180deg, #3a3326, #16181b); border: 2px solid #ffe27a; }
#result.sd.big .bgRow.me:not(.won) { border-color: #8fb8ff88; }
#result.sd.big .bgWho { display: flex; align-items: center; gap: 6px; font-size: 15px; white-space: nowrap; overflow: hidden; } #result.sd.big .bgWho b { color: #fff; }
#result.sd.big .bgWho small { color: #9a9da3; }
#result.sd.big .bgCat { width: 28px; height: 28px; margin: 0; flex: 0 0 auto; }
#result.sd.big .bgWon { margin-left: auto; background: #ffe27a; color: #1a1200; font-weight: 900; border-radius: 999px; padding: 1px 10px; font-size: 14px; }
#result.sd.big .bgLost { margin-left: auto; color: #9a9da3; font-size: 13px; border: 1px solid #ffffff33; border-radius: 999px; padding: 0 8px; }
#result.sd.big .bgRow .bgc { width: 62px; }
#result.sd.big .bgDesc { display: flex; justify-content: center; gap: 6px 14px; flex-wrap: wrap; font-size: 14px; color: #c9ccd1; }
#result.sd.big .bgDesc .w { color: #ffe27a; font-weight: 900; }
#result.sd.big .sdKey { margin-top: auto; }
@media (max-height: 700px) { #result.sd.big { gap: 4px; padding: 6px 8px; } #result.sd.big .sdTtl { font-size: 17px; } #result.sd.big .bgWhyRow { padding: 3px 8px; } #result.sd.big .bgWhyRow .d { font-size: 16px; }
  #result.sd.big .bgc { width: 40px; } #result.sd.big .bgRow .bgc { width: 50px; } #result.sd.big .bgRow { padding: 4px 6px; gap: 3px; } #result.sd.big .bgDesc { font-size: 12.5px; } #result.sd.big .bgRows.n3 .bgc { width: 44px; } }
@media (min-width: 900px) { #result.sd.big { top: 24px; bottom: 24px; padding: 14px 18px; } #result.sd.big .bgc { width: 64px; } #result.sd.big .bgRow .bgc { width: 80px; }
  #result.sd.big .bgWhyRow .d { font-size: 24px; } #result.sd.big .bgDesc { font-size: 16px; } #result.sd.big .bgWhy { display: grid; grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) and (max-height: 820px) { #result.sd.big .bgRow .bgc { width: 64px; } #result.sd.big .bgc { width: 52px; } }
@media (orientation: landscape) and (max-height: 520px) { #result.sd.big { top: 4px; bottom: 4px; } #result.sd.big .bgc, #result.sd.big .bgRow .bgc { width: 34px; } #result.sd.big .bgRows { flex-direction: row; } #result.sd.big .bgRow { flex: 1; } }
body.sdBig #actions { visibility: hidden; }
#lobby .aiOpt:disabled { color: #777; }
#result.sd.big .bgRows.n3 .bgRow .bgc { width: 54px; } /* 3人並ぶときは少し小さく（凡例まで収める） */
@media (max-height: 700px) { #result.sd.big .bgRows.n3 .bgRow .bgc { width: 42px; } }
@media (min-width: 900px) { #result.sd.big .bgRows.n3 .bgRow .bgc { width: 64px; } }
/* ===== ハンド履歴 (shopさん 2026-11-01 22:39) ===== */
#histSheet { position: fixed; inset: 0; z-index: 80; background: #0b0c0ef7; display: flex; flex-direction: column; padding: 8px 10px 10px; color: #e9eaec; }
#histSheet.hidden { display: none; }
#histSheet .hsHead { display: flex; align-items: center; gap: 8px; } #histSheet .hsHead b { font-size: 18px; color: #ffe27a; } #histSheet #hsCount { color: #9a9da3; font-size: 12px; margin-right: auto; }
#histSheet .hsHead button { padding: 6px 12px; border-radius: 999px; border: 1px solid #ffffff33; background: #2a2c30; color: #fff; font-size: 13px; }
#histSheet .hsNote { margin: 4px 0 6px; font-size: 11.5px; color: #9a9da3; line-height: 1.4; }
#hsList { overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; } .hsEmpty { color: #9a9da3; text-align: center; margin-top: 30px; }
.hsHand { border: 1px solid #ff4d4d66; border-radius: 14px; padding: 8px; background: linear-gradient(180deg, #23252a, #121316); display: flex; flex-direction: column; gap: 6px; }
.hsTop { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 12.5px; color: #c9ccd1; } .hsTop b { font-size: 15px; color: #fff; } .hsTop .hsTime { margin-left: auto; color: #9a9da3; }
.hsWhy { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; } .hsWhy small { color: #9a9da3; }
.hsWhy span { padding: 3px 8px; border-radius: 8px; background: #3a3d42; } .hsWhy span.h { background: #8e0f16; } .hsWhy span.u { background: #2a2c30; }
.hsWhy b { color: #fff; margin: 0 4px; } .hsWhy em { font-style: normal; color: #ffe27a; font-weight: 800; float: right; }
.hsBoard { display: flex; align-items: center; gap: 3px; font-size: 11px; color: #9a9da3; } .hsBoard > span { margin-right: 4px; } .hsBoard em { font-style: normal; }
.hsc { display: inline-block; width: 30px; aspect-ratio: 200/280; border-radius: 3px; background: #fff center/cover no-repeat; box-shadow: 0 1px 3px #0009; }
.hsc.dim { filter: brightness(.55); } .hsc.back { filter: brightness(.8); }
.hsc.useB { outline: 2px solid #ffe27a; outline-offset: 1px; } .hsc.useH { outline: 2px solid #ff4d4d; outline-offset: 1px; } .hsc.useB.useH { outline-color: #ffe27a; box-shadow: 0 0 0 4px #ff4d4d; }
.hsRow { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "who who" "cards desc"; gap: 3px 8px; align-items: center; padding: 5px 6px; border-radius: 10px; background: #16181bcc; border: 1px solid #ffffff14; }
.hsRow.won { border-color: #ffe27a99; background: linear-gradient(90deg, #3a3326, #16181b); } .hsRow.me:not(.won) { border-color: #8fb8ff66; }
.hsWho { grid-area: who; display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; overflow: hidden; } .hsWho b { color: #fff; } .hsWho small { color: #9a9da3; }
.hsCat { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; } .hsDrew { font-size: 11.5px; color: #c9ccd1; border: 1px solid #ffffff2a; border-radius: 999px; padding: 0 7px; }
.hsWon { margin-left: auto; background: #ffe27a; color: #1a1200; font-weight: 900; border-radius: 999px; padding: 0 8px; font-size: 12px; } .hsSt { margin-left: auto; color: #9a9da3; font-size: 12px; }
.hsCards { grid-area: cards; display: flex; gap: 3px; align-items: center; } .hsPriv { font-size: 11px; color: #9a9da3; margin-left: 4px; }
.hsDesc { grid-area: desc; display: flex; flex-direction: column; font-size: 11.5px; color: #c9ccd1; text-align: right; } .hsDesc .w { color: #ffe27a; font-weight: 800; }
@media (max-width: 420px) { .hsRow { grid-template-areas: "who who" "cards cards" "desc desc"; } .hsDesc { flex-direction: row; gap: 10px; text-align: left; flex-wrap: wrap; } }
@media (min-width: 900px) { #histSheet { padding: 16px max(16px, calc(50% - 460px)); } .hsc { width: 38px; } .hsWhy { flex-direction: row; } .hsWhy span { flex: 1; } }
#menu .histBtn { background: linear-gradient(180deg, #3a3d42, #16181b); border: 1px solid #ffe27a88; color: #ffe27a; }
/* 22:50 375px で「勝ち +6,924」が切れたので折り返す・背景の卓が透けないように不透明に */
#histSheet { background: #0b0c0e; }
.hsWho { flex-wrap: wrap; overflow: visible; white-space: normal; row-gap: 3px; } .hsWho b, .hsDrew, .hsWon { white-space: nowrap; }