/* Salon Baccarat — Salon Privé デザインシステム(墨色・シャンパンゴールド・エメラルドフェルト) */
:root {
  --ink: #0d0b08; --ink-2: #14110c; --ink-3: #1c1812; --ink-4: #26201714;
  --gold: #d8bc7e; --gold-bright: #f0dca8; --gold-dim: #9a8354;
  --gold-line: rgba(216,188,126,0.34); --gold-faint: rgba(216,188,126,0.14);
  --ivory: #efe7d5; --ivory-dim: #c9bfa6; --ivory-faint: rgba(239,231,213,0.55);
  --felt: #0f3a2b; --felt-2: #0a2a1f; --felt-hi: #165140;
  --pl: #5b8fe0; --pl-deep: #23457f; --bk: #d0505d; --bk-deep: #7a2430; --tie: #4cb57c; --tie-deep: #1f6142;
  --wine-bright: #b4434f;
  --f-display: 'Cinzel', 'Shippori Mincho B1', serif;
  --f-num: 'Bodoni Moda', 'Cinzel', serif;
  --f-jp: 'Shippori Mincho B1', 'Cinzel', serif;
  --f-body: 'Zen Kaku Gothic New', sans-serif;
  /* 金属の金(横に流してつやを動かす)と、縦のつや */
  --metal: linear-gradient(100deg, #7d5f27 0%, #f6e3a8 18%, #c6a052 34%, #fff4d2 50%, #b48c3c 66%, #efd79a 82%, #7d5f27 100%);
  --metal-v: linear-gradient(180deg, #fff1c7 0%, #e6c77e 38%, #b38a3d 62%, #f1d99a 100%);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
.hide { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(216,188,126,0.07), transparent 60%),
    radial-gradient(ellipse 120% 90% at 50% 115%, rgba(12,46,34,0.55), transparent 62%),
    var(--ink);
  color: var(--ivory); font-family: var(--f-body); min-height: 100dvh;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--gold); }
.mar { font-family: var(--f-display); font-weight: 400; }
.num { font-variant-numeric: tabular-nums; }

.btn { border: 1px solid var(--gold); background: transparent; color: var(--gold); padding: 10px 18px; letter-spacing: .16em; font-size: 13px; text-decoration: none; display: inline-block; }
.btn.primary { background: linear-gradient(160deg, var(--gold-bright), var(--gold) 50%, var(--gold-dim)); color: var(--ink); font-weight: 700; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.sm { padding: 6px 12px; font-size: 12px; letter-spacing: .12em; }

#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--ink-3); z-index: 50;
  border: 1px solid var(--wine-bright); padding: 10px 18px; font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none;
}
#toast.show { opacity: 1; }
#toast.ok { border-color: var(--gold); }

/* ---------- road map(共用) ---------- */
.road { --cell: 18px; display: grid; grid-template-rows: repeat(6, var(--cell)); grid-template-columns: repeat(var(--cols, 20), var(--cell));
  background-color: rgba(239,231,213,0.035);
  background-image: linear-gradient(rgba(216,188,126,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(216,188,126,.10) 1px, transparent 1px);
  background-size: var(--cell) var(--cell); border: 1px solid var(--gold-faint); width: max-content; max-width: 100%; overflow: hidden; }
.rd-big, .rd-bead { position: relative; display: flex; align-items: center; justify-content: center; }
.rd-big::before { content: ''; position: absolute; inset: 2px; border-radius: 50%; border: 2.5px solid currentColor; }
.rd-big.wP { color: var(--pl); }
.rd-big.wB { color: var(--bk); }
.rd-tie { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 700; z-index: 1; }
.rd-tie::before { content: ''; position: absolute; width: 130%; height: 2px; background: var(--tie); transform: rotate(-45deg); z-index: -1; }
.rd-bead { margin: 1px; border-radius: 50%; color: #fff; font-size: calc(var(--cell) * .5); font-weight: 700; font-family: var(--f-display); }
.rd-bead.wP { background: var(--pl); }
.rd-bead.wB { background: var(--bk); }
.rd-bead.wT { background: var(--tie); }
.rd-bp, .rd-pp { position: absolute; width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--ink); }
.rd-bp { top: 0; left: 0; background: var(--bk); }
.rd-pp { bottom: 0; right: 0; background: var(--pl); }
.rstats { display: flex; gap: 10px; font-size: 12px; color: var(--ivory-dim); align-items: center; flex-wrap: wrap; }
.rstats .k { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; margin-right: 3px; font-family: var(--f-display); }
.rstats .kP { background: var(--pl); } .rstats .kB { background: var(--bk); } .rstats .kT { background: var(--tie); }

/* ---------- lobby ---------- */
.lobby .frame { position: fixed; inset: 12px; border: 1px solid var(--gold-line); pointer-events: none; }
.lobby .wrap { position: relative; max-width: 1080px; margin: 0 auto; padding: clamp(28px, 6vh, 56px) 16px 80px; }
.lobby .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; font-size: 13px; gap: 12px; }
.lobby .top > a { text-decoration: none; font-family: var(--f-display); letter-spacing: .14em; }
.lobby .mast { text-align: center; margin-bottom: 28px; }
.lobby .mast h1 {
  font-family: var(--f-display); font-weight: 400; font-size: clamp(36px, 8vw, 62px); letter-spacing: .26em; text-indent: .26em;
  background: linear-gradient(160deg, var(--gold-bright) 10%, var(--gold) 45%, var(--gold-dim) 85%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lobby .mast p { color: var(--ivory-dim); font-family: var(--f-jp); letter-spacing: .14em; margin-top: 6px; font-size: 14px; }
.wallet { display: flex; align-items: center; gap: 10px; color: var(--ivory-dim); }
.wallet b { color: var(--gold-bright); font-family: var(--f-display); font-size: 16px; letter-spacing: .04em; font-weight: 400; }
.tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.tcard { border: 1px solid var(--gold-line); background: var(--ink-2); padding: 16px 16px 14px; position: relative; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
.tcard::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(216,188,126,.10); pointer-events: none; }
.tcard:hover { border-color: var(--gold); transform: translateY(-2px); }
.tcard .th { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tcard h2 { font-family: var(--f-display); font-weight: 400; color: var(--gold); letter-spacing: .26em; font-size: 19px; }
.tcard .ph { font-size: 11px; letter-spacing: .14em; color: var(--ivory-dim); }
.tcard .ph.live { color: var(--gold-bright); }
.tcard .road { --cell: 15px; }
.tcard .foot { display: flex; justify-content: space-between; align-items: center; }
.rules { margin-top: 34px; border: 1px solid var(--gold-line); background: var(--ink-2); padding: 18px 20px; }
.rules summary { cursor: pointer; font-family: var(--f-display); color: var(--gold); letter-spacing: .24em; }
.rules table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.rules td, .rules th { border-bottom: 1px solid var(--gold-faint); padding: 8px 6px; text-align: left; vertical-align: top; }
.rules th { color: var(--gold-dim); font-weight: 400; letter-spacing: .12em; font-size: 12px; }
.rules td:nth-child(2) { color: var(--gold-bright); white-space: nowrap; font-family: var(--f-display); }
.rules p { color: var(--ivory-dim); font-size: 13px; line-height: 1.85; margin-top: 12px; }

/* ---------- table page ---------- */
body.tablepage { overflow-x: hidden; }
.tp { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr); min-height: 100dvh; }
.tp-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--gold-faint); background: rgba(13,11,8,.8); font-size: 13px; }
.tp-top .back { text-decoration: none; font-family: var(--f-display); letter-spacing: .14em; }
.tp-top .tname { font-family: var(--f-display); color: var(--gold); letter-spacing: .24em; font-size: 16px; }
.tp-top .meta { color: var(--ivory-dim); font-size: 12px; letter-spacing: .08em; }
.tp-top .sp { flex: 1; }
.tp-main { display: flex; flex-direction: column; min-width: 0; padding: 14px 16px 18px; gap: 12px; }
.tp-side { border-left: 1px solid var(--gold-faint); padding: 14px; display: flex; flex-direction: column; gap: 14px; background: rgba(20,17,12,.6); }
.tp-side h3 { font-family: var(--f-display); font-weight: 400; color: var(--gold-dim); letter-spacing: .26em; font-size: 12px; margin-bottom: 6px; }
.tp-side .road { --cell: 15.5px; }

/* felt(配札エリア + ベットレイアウト) */
.felt {
  position: relative; border-radius: 26px 26px 18px 18px; padding: 16px clamp(10px, 2.4vw, 26px) 18px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, var(--felt-hi), transparent 70%),
    radial-gradient(ellipse at 50% 50%, var(--felt), var(--felt-2));
  border: 1px solid var(--gold-line);
  box-shadow: inset 0 0 0 6px rgba(13,11,8,.35), inset 0 0 0 7px var(--gold-faint), 0 20px 60px rgba(0,0,0,.45);
}

/* 配札エリア */
.dealzone { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 3vw, 40px); position: relative; padding-bottom: 6px; }
.hand { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 6px 10px; border-radius: 14px; transition: background .4s, box-shadow .4s; }
.hand .hl { font-family: var(--f-display); letter-spacing: .3em; font-size: clamp(15px, 2.2vw, 22px); }
.hand.P .hl { color: #a9c4f0; }
.hand.B .hl { color: #f0b0b7; }
.hand .cards { --cw: clamp(48px, 7.2vw, 80px); display: flex; gap: 6px; height: calc(var(--cw) * 1.52); align-items: center; }
.hand.win { background: radial-gradient(ellipse at 50% 50%, rgba(216,188,126,.18), transparent 70%); box-shadow: 0 0 0 1px var(--gold-line); }
.total { min-width: 40px; height: 28px; padding: 0 10px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 17px; background: rgba(13,11,8,.6); border: 1px solid var(--gold-faint); opacity: 0; transition: opacity .25s; }
.total.on { opacity: 1; }
.hand.P .total { color: #cfe0ff; } .hand.B .total { color: #ffd2d7; }

/* カード(3D フリップ) */
.card { width: var(--cw); height: calc(var(--cw) * 1.52); perspective: 700px; flex: none; animation: deal .35s cubic-bezier(.2,.8,.2,1) both; }
.card.third { margin: 0 calc(var(--cw) * .2); transform: rotate(90deg); animation-name: deal3; }
.card .in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s ease; }
.card.up .in { transform: rotateY(180deg); }
.card .f, .card .b { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.45); }
.card .f { transform: rotateY(180deg); background: transparent; box-shadow: none; }
.card .f img { filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.card img { width: 100%; height: 100%; display: block; }
@keyframes deal { from { opacity: 0; transform: translate(40vw, -30px) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes deal3 { from { opacity: 0; transform: translate(30vw, -30px) rotate(60deg); } to { opacity: 1; transform: rotate(90deg); } }

.banner { position: absolute; left: 50%; bottom: 2px; transform: translate(-50%, 0) scale(.9); pointer-events: none; opacity: 0; transition: opacity .3s, transform .3s;
  padding: 10px 34px; background: rgba(13,11,8,.88); border: 1px solid var(--gold); text-align: center; white-space: nowrap; z-index: 3; }
.banner.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.banner .bw { font-family: var(--f-display); letter-spacing: .3em; font-size: clamp(18px, 3vw, 26px); color: var(--gold-bright); }
.banner .bx { font-size: 12px; color: var(--ivory-dim); letter-spacing: .1em; margin-top: 2px; }
.banner.wP .bw { color: #b9d0f7; } .banner.wB .bw { color: #f6bcc3; } .banner.wT .bw { color: #9fe0bc; }

/* 状態ライン(タイマー) */
.status { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .1em; color: var(--ivory-dim); margin: 6px 0 10px; }
.status .msg { min-width: 0; flex: none; }
.status .bar { flex: 1; height: 3px; background: rgba(239,231,213,.12); border-radius: 2px; overflow: hidden; }
.status .bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright)); transform-origin: left; }
.status .sec { font-family: var(--f-display); color: var(--gold-bright); font-size: 18px; min-width: 26px; text-align: right; }
.status.hurry .sec { color: #ff9aa4; }
.status.hurry .bar i { background: linear-gradient(90deg, var(--bk-deep), var(--bk)); }

/* ベットレイアウト */
.layout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.spot { position: relative; border: 1px solid rgba(216,188,126,.4); border-radius: 8px; background: rgba(13,11,8,.18); min-height: 58px; padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: background .2s, box-shadow .25s, border-color .2s; user-select: none; -webkit-tap-highlight-color: transparent; }
.spot:hover { background: rgba(216,188,126,.08); }
.spot .nm { font-size: clamp(11px, 1.4vw, 14px); letter-spacing: .06em; color: var(--ivory); line-height: 1.25; }
.spot .od { font-family: var(--f-display); font-size: clamp(10px, 1.2vw, 13px); color: var(--gold-dim); margin-top: 2px; }
.spot .tot { position: absolute; left: 6px; bottom: 4px; font-size: 10px; color: var(--ivory-faint); }
.spot.side { grid-column: span 1; }
.pairrow { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.layout.nc .pairrow { grid-template-columns: 1fr .8fr 1fr; }
.spot.super6 { display: none; border-color: rgba(208,80,93,.55); }
.layout.nc .spot.super6 { display: flex; }
.spot.super6 .nm { color: #f6c6cb; }
/* 赤い封筒(締切後に引かれ、該当スポットの配当が上がる) */
.spot.env { border-color: #e0525e; box-shadow: 0 0 0 1px #e0525e, 0 0 22px rgba(224,82,94,.45); }
.spot.env .od { color: #ffd0a0; font-weight: 700; }
.spot .envb { position: absolute; top: -9px; left: 8px; font-size: 10.5px; letter-spacing: .06em; color: #fff4e6; background: linear-gradient(160deg, #e0525e, #9c2431);
  border: 1px solid #f3c27a; padding: 1px 7px; border-radius: 4px; white-space: nowrap; z-index: 2; animation: rise .45s ease both; }
.spot.env.won { box-shadow: 0 0 0 2px #ffd0a0, 0 0 30px rgba(255,190,140,.65); }
.deep { color: #ffb1b8; }
.spot.main { min-height: clamp(88px, 13vw, 128px); }
.spot.main .nm { font-family: var(--f-jp); font-size: clamp(16px, 2.6vw, 28px); letter-spacing: .14em; }
.spot.main .od { font-size: clamp(12px, 1.6vw, 16px); }
.mainrow { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr .8fr 1fr; gap: 6px; }
.spot.player { border-color: rgba(91,143,224,.6); background: rgba(35,69,127,.22); }
.spot.player .nm { color: #c6d8f7; }
.spot.banker { border-color: rgba(208,80,93,.6); background: rgba(122,36,48,.22); }
.spot.banker .nm { color: #f6c6cb; }
.spot.tie { border-color: rgba(76,181,124,.6); background: rgba(31,97,66,.22); border-radius: 50% 50% 8px 8px / 36% 36% 8px 8px; }
.spot.tie .nm { color: #bfe9d0; }
.spot.closed { cursor: default; }
.spot.closed:hover { background: inherit; }
.spot.won { box-shadow: 0 0 0 2px var(--gold-bright), 0 0 26px rgba(240,220,168,.45); animation: pulse 1.1s ease-in-out infinite alternate; }
@keyframes pulse { from { box-shadow: 0 0 0 2px var(--gold-bright), 0 0 12px rgba(240,220,168,.3); } to { box-shadow: 0 0 0 2px var(--gold-bright), 0 0 30px rgba(240,220,168,.6); } }
.spot .stack { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: row-reverse; align-items: center; gap: 4px; pointer-events: none; }
.spot.main .stack { top: auto; bottom: 10px; right: 10px; transform: none; }
.spot .won-amt { position: absolute; top: 5px; right: 6px; font-family: var(--f-display); font-size: 13px; color: var(--gold-bright); background: var(--ink); border: 1px solid var(--gold); padding: 1px 8px; border-radius: 10px; white-space: nowrap; animation: rise .5s ease both; z-index: 2; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* チップ */
.chip { position: relative; width: var(--cs, 46px); height: var(--cs, 46px); border-radius: 50%; flex: none; border: 0; padding: 0;
  background: var(--chip-img) center / contain no-repeat; box-shadow: 0 3px 6px rgba(0,0,0,.55), 0 1px 0 rgba(0,0,0,.35);
  display: inline-flex; color: transparent; font-size: 0; }
/* 絵は public/chips.js(2D と 3D で共通)。額面ごとの画像は :root の --chip-<額面> */
.chip[data-v="100"] { --chip-img: var(--chip-100); }
.chip[data-v="500"] { --chip-img: var(--chip-500); }
.chip[data-v="1000"] { --chip-img: var(--chip-1000); }
.chip[data-v="5000"] { --chip-img: var(--chip-5000); }
.chip[data-v="25000"] { --chip-img: var(--chip-25000); }
.chip[data-v="100000"] { --chip-img: var(--chip-100000); }
.stack .chip { --cs: clamp(26px, 3.4vw, 34px); }
.stack .amt { font-size: 11.5px; color: var(--gold-bright); white-space: nowrap; text-shadow: 0 1px 2px #000; background: rgba(13,11,8,.55); padding: 0 5px; border-radius: 7px; }

/* チップトレイ + 操作 */
.tray { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1.4vw, 14px); flex-wrap: wrap; padding: 4px 0; }
.tray .chip { --cs: clamp(40px, 5.4vw, 54px); cursor: pointer; transition: transform .15s; }
.tray .chip:hover { transform: translateY(-3px); }
.tray .chip.sel { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--gold-bright), 0 0 18px rgba(240,220,168,.6), 0 3px 6px rgba(0,0,0,.5); }
.tray .chip.off { opacity: .3; }
.acts { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.act { min-width: 82px; padding: 8px 12px; border: 1px solid var(--gold-line); border-radius: 22px; font-size: 12.5px; letter-spacing: .08em; color: var(--ivory); background: rgba(13,11,8,.4); }
.act:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-bright); }
.act:disabled { opacity: .35; cursor: default; }

/* 下段のステータス */
.purse { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.pill { border: 1px solid var(--gold-faint); background: rgba(13,11,8,.55); padding: 6px 14px; border-radius: 10px; min-width: 120px; }
.pill .l { font-size: 10.5px; letter-spacing: .14em; color: var(--ivory-dim); }
.pill .v { font-family: var(--f-display); font-size: 18px; color: var(--gold-bright); }
.pill.win .v { color: #9fe0bc; }
.pill .v.flash { animation: flash .8s ease; }
@keyframes flash { 0% { color: #fff; text-shadow: 0 0 12px var(--gold-bright); } 100% { color: var(--gold-bright); } }
.purse .sp { flex: 1; }
.toggle { display: inline-flex; border: 1px solid var(--gold-line); border-radius: 20px; overflow: hidden; align-self: center; }
.toggle button { padding: 7px 14px; font-size: 12px; letter-spacing: .08em; color: var(--ivory-dim); }
.toggle button.on { background: var(--gold); color: var(--ink); font-weight: 700; }

.guest { text-align: center; color: var(--ivory-dim); font-size: 13px; padding: 6px; }

@media (max-width: 1080px) {
  .tp { grid-template-columns: 1fr; }
  .tp-side { border-left: 0; border-top: 1px solid var(--gold-faint); }
  .tp-side .roads { display: flex; gap: 14px; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .tp-top { padding: 8px 12px; gap: 10px; }
  .tp-top .meta { display: none; }
  .tp-main { padding: 10px 8px 14px; }
  .layout { gap: 4px; }
  .spot { min-height: 50px; }
  .purse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .purse .sp { display: none; }
  .purse .toggle, .purse #refillBtn { grid-column: 1 / -1; justify-self: center; }
  .pill { min-width: 0; padding: 5px 8px; }
  .pill .l { font-size: 9.5px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pill .v { font-size: 15px; }
  .act { min-width: 0; flex: 1; }
  .tables { grid-template-columns: 1fr; }
  .banner { padding: 6px 14px; }
  .banner .bx { font-size: 10.5px; }
  .banner { bottom: auto; top: 0; }
  .road { --cell: 14px; }
}

/* ---- 3D 表示(baccarat-3d.js が body.three を付ける)---- */
.stage3d { display: none; }
.vbtn { border: 1px solid var(--gold-line); background: transparent; color: var(--gold); font-size: 12px; letter-spacing: .14em; padding: 5px 12px; cursor: pointer; }
.vbtn:hover { border-color: var(--gold); }
.three .felt { padding: 0; background: none; border: none; box-shadow: none; }
.three .stage3d { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9.4; max-height: calc(100dvh - 300px); min-height: 300px; border-radius: 14px; overflow: hidden; border: 1px solid var(--gold-faint); background: var(--ink); }
.three .stage3d-canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; }
.three .dealzone { display: none; }
/* 3D ではベットは台(フェルト)の上に置く — 下の 2D のベットエリアは出さない */
.three .layout { display: none; }
.three .status { margin: 10px 4px 4px; }
.three .stage3d .banner { top: var(--banner-top, 30%); bottom: auto; } /* ディーラーの胸のあたり(位置は baccarat-3d.js の fitDealer が 3D から計算) */
@media (max-width: 640px) {
  .three .stage3d { aspect-ratio: 16 / 10.5; max-height: none; min-height: 0; border-radius: 10px; }
}

/* ---- 3D ロビー(baccarat-lobby3d.js)---- */
.lobby3d { position: relative; width: 100%; aspect-ratio: 16 / 8; max-height: 62vh; min-height: 260px; margin: 6px 0 22px; border: 1px solid var(--gold-line); overflow: hidden; background: #0a0806; }
.lobby3d-canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; }
@media (max-width: 640px) {
  .lobby3d { aspect-ratio: 4 / 3; max-height: none; margin-bottom: 16px; }
}

/* ---- 言語の選択(i18n.js の mountLangPicker)---- */
.lobby .top .sp { flex: 1; }
.langsel { appearance: none; -webkit-appearance: none; background: transparent; color: var(--gold); border: 1px solid var(--gold-line); padding: 5px 24px 5px 10px; font: inherit; font-size: 12px; letter-spacing: .06em; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; background-size: 5px 5px; background-repeat: no-repeat; max-width: 150px; }
.langsel:hover, .langsel:focus { border-color: var(--gold); outline: none; }
.langsel option { background: var(--ink-2); color: var(--ivory, #efe7d5); }
@media (max-width: 640px) { .langsel { max-width: 92px; padding-right: 20px; } }

/* スマホの上部バー: 折り返さないように詰める */
@media (max-width: 640px) {
  .tp-top { gap: 8px; padding: 8px 10px; }
  .tp-top .back, .tp-top .tname, .vbtn { white-space: nowrap; }
  .tp-top .tname { font-size: 13px; letter-spacing: .14em; }
  .vbtn { padding: 4px 8px; font-size: 11px; letter-spacing: .06em; }
  .tp-top .langsel { max-width: 84px; }
}


/* =====================================================================
   豪華版(2026-11-09): フォント・金属の金・アールデコの装飾・パネル・ボタン
   ===================================================================== */

/* 背景: 扇(アールデコ)の地紋 + 周辺減光 */
body {
  background:
    radial-gradient(ellipse 80% 60% at 50% -8%, rgba(216,188,126,0.10), transparent 62%),
    radial-gradient(ellipse 120% 90% at 50% 118%, rgba(12,46,34,0.6), transparent 62%),
    radial-gradient(ellipse 140% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48' viewBox='0 0 96 48'%3E%3Cg fill='none' stroke='%23d8bc7e' stroke-opacity='.055' stroke-width='1'%3E%3Cpath d='M0 48a48 48 0 0 1 96 0'/%3E%3Cpath d='M12 48a36 36 0 0 1 72 0'/%3E%3Cpath d='M24 48a24 24 0 0 1 48 0'/%3E%3Cpath d='M36 48a12 12 0 0 1 24 0'/%3E%3Cpath d='M48 0v48'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 96px 48px,
    var(--ink);
}

/* 金属の金の文字(ゆっくりつやが流れる) */
.gold-text, .lobby .mast h1, .tcard h2, .tp-top .tname, .banner .bw, .pill .v, .wallet b, .status .sec, .rules summary, .tp-side h3 {
  background: var(--metal); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: sheen 8s linear infinite;
}
@keyframes sheen { from { background-position: 0% 50%; } to { background-position: 220% 50%; } }
@media (prefers-reduced-motion: reduce) { .gold-text, .lobby .mast h1, .tcard h2, .tp-top .tname, .banner .bw, .pill .v, .wallet b, .status .sec, .rules summary, .tp-side h3 { animation: none; } }

/* 数字は Bodoni(ハイコントラストのディドーン) */
.wallet b, .pill .v, .status .sec, .total, .spot .won-amt, .rules td:nth-child(2), .stack .amt { font-family: var(--f-num); font-weight: 600; letter-spacing: .02em; }

/* 見出し */
.lobby .mast h1 { font-family: var(--f-display); font-weight: 600; letter-spacing: .32em; text-indent: .32em; filter: drop-shadow(0 4px 18px rgba(216,188,126,.22)); }
.lobby .mast p { font-family: var(--f-jp); font-weight: 500; letter-spacing: .22em; color: var(--ivory-dim); }
.ornament { display: block; width: min(320px, 70vw); height: 22px; margin: 10px auto 6px; color: var(--gold); opacity: .9; }
.tcard h2, .tp-top .tname { font-family: var(--f-display); font-weight: 600; }
.lobby .top > a, .tp-top .back { font-family: var(--f-display); font-weight: 500; letter-spacing: .18em; }
.wallet b { font-size: 19px; }

/* 金の角飾り(パネル・バナー・3D の額縁) */
.tcard::after, .rules::after, .pill::after, .banner::after, .stage3d::after, .lobby3d::after, .lobby .frame::after {
  content: ''; position: absolute; inset: 5px; pointer-events: none; z-index: 4; --c: var(--gold); --l: 16px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 1px, linear-gradient(var(--c), var(--c)) top left / 1px var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) 1px, linear-gradient(var(--c), var(--c)) top right / 1px var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 1px, linear-gradient(var(--c), var(--c)) bottom left / 1px var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 1px, linear-gradient(var(--c), var(--c)) bottom right / 1px var(--l);
  background-repeat: no-repeat;
}
.pill::after { inset: 3px; --l: 8px; opacity: .7; }
.lobby .frame { border: 1px solid var(--gold-line); box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 5px rgba(216,188,126,.16); }
.lobby .frame::after { inset: 10px; --l: 34px; opacity: .8; }
.stage3d, .lobby3d { position: relative; }
.three .stage3d, .lobby3d { border: 1px solid var(--gold-line); box-shadow: 0 0 0 4px var(--ink), 0 0 0 5px rgba(216,188,126,.18), 0 30px 80px rgba(0,0,0,.6); }

/* パネル */
.tcard, .rules { background: linear-gradient(180deg, rgba(30,25,18,.94), rgba(13,11,8,.96)); }
.tcard:hover { box-shadow: 0 0 0 1px var(--gold), 0 14px 40px rgba(0,0,0,.5), 0 0 30px rgba(216,188,126,.12); }
.tcard h2 { font-size: 20px; letter-spacing: .28em; }
.rules summary { font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: .3em; }
.rules th { font-family: var(--f-display); letter-spacing: .16em; }
.tp-side h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: .3em; }
.tp-top { background: linear-gradient(180deg, rgba(24,19,12,.96), rgba(13,11,8,.88)); border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-bright) 50%, var(--gold) 80%, transparent) 1; }
.pill { position: relative; background: linear-gradient(180deg, rgba(30,25,18,.9), rgba(13,11,8,.92)); border-color: var(--gold-line); }
.pill .l { font-family: var(--f-display); letter-spacing: .16em; }
.pill .v { font-size: 21px; }
.pill.win .v { background: linear-gradient(100deg, #4f9c76 0%, #d7f5e4 30%, #7fcaa3 50%, #effff6 70%, #4f9c76 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; }

/* 金縁のボタン */
.act, .vbtn, .btn:not(.primary), .toggle {
  border: 1px solid transparent;
  background: linear-gradient(180deg, #1d1811, #0d0b08) padding-box, var(--metal) border-box;
}
.act, .vbtn, .btn { font-family: var(--f-display); font-weight: 600; letter-spacing: .14em; }
.act { color: var(--gold-bright); transition: box-shadow .2s, transform .15s; }
.act:hover:not(:disabled) { box-shadow: 0 0 16px rgba(240,220,168,.28); transform: translateY(-1px); }
.btn.primary, .toggle button.on { background: var(--metal-v); color: #1a1208; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.toggle button { font-family: var(--f-display); font-weight: 600; }
.langsel { border-color: rgba(216,188,126,.55); font-family: var(--f-display); font-weight: 500; }

/* チップトレイ: 金の受け皿 */
.tray { position: relative; padding: 10px 14px 12px; margin: 2px auto 0; border-radius: 40px;
  background: radial-gradient(ellipse 70% 120% at 50% 100%, rgba(216,188,126,.14), transparent 70%), linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0)); }
.tray .chip.sel { box-shadow: 0 0 0 2px #fff1c7, 0 0 0 4px rgba(184,140,60,.9), 0 0 24px rgba(240,220,168,.75), 0 6px 10px rgba(0,0,0,.5); animation: chipGlow 1.6s ease-in-out infinite alternate; }
@keyframes chipGlow { from { filter: brightness(1); } to { filter: brightness(1.12); } }

/* 状態ライン */
.status .msg { font-family: var(--f-display); font-weight: 600; letter-spacing: .16em; }
.status .bar { height: 4px; background: rgba(0,0,0,.5); box-shadow: inset 0 0 0 1px rgba(216,188,126,.18); }
.status .bar i { background: var(--metal); box-shadow: 0 0 10px rgba(240,220,168,.6); }
.status .sec { font-size: 22px; }

/* 結果のバナー */
.banner { padding: 14px 44px 12px; background: radial-gradient(ellipse at 50% 0%, rgba(216,188,126,.18), transparent 70%), rgba(10,8,6,.92);
  border: 1px solid transparent; background-clip: padding-box; box-shadow: 0 0 0 1px var(--gold), 0 0 0 5px rgba(10,8,6,.9), 0 0 0 6px rgba(216,188,126,.45), 0 0 40px rgba(240,220,168,.25); }
.banner .bw { font-family: var(--f-display); font-weight: 700; letter-spacing: .3em; font-size: clamp(20px, 3.4vw, 32px); }
.banner.wP .bw { background-image: linear-gradient(100deg, #5a7fb8 0%, #e6f0ff 30%, #8fb2ea 50%, #ffffff 65%, #5a7fb8 100%); }
.banner.wB .bw { background-image: linear-gradient(100deg, #b05a66 0%, #ffe6ea 30%, #ea9aa5 50%, #fff7f8 65%, #b05a66 100%); }
.banner.wT .bw { background-image: linear-gradient(100deg, #3f8f66 0%, #e3fff0 30%, #7fcaa3 50%, #ffffff 65%, #3f8f66 100%); }
.banner .bx { font-family: var(--f-num); font-weight: 600; font-size: 14px; letter-spacing: .2em; }
.banner.on { animation: bannerIn .5s cubic-bezier(.2,.9,.25,1.2) both; }
@keyframes bannerIn { from { opacity: 0; transform: translate(-50%, 0) scale(.82); filter: blur(4px); } to { opacity: 1; transform: translate(-50%, 0) scale(1); filter: none; } }

/* 2D のベットエリア */
.spot { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.12)); }
.spot.main .nm { font-weight: 600; }
.spot .nm { font-family: var(--f-jp); font-weight: 600; }
.spot .od { font-family: var(--f-num); font-weight: 600; }

/* トースト */
#toast { background: rgba(18,14,9,.94); border: 1px solid transparent; background-clip: padding-box; box-shadow: 0 0 0 1px var(--wine-bright), 0 10px 30px rgba(0,0,0,.5); border-radius: 4px; letter-spacing: .06em; }
#toast.ok { box-shadow: 0 0 0 1px var(--gold), 0 0 24px rgba(216,188,126,.25), 0 10px 30px rgba(0,0,0,.5); }
.rules { position: relative; }
/* 上部バーは 1 行に(Cinzel は字幅が広い) */
.tp-top .back, .tp-top .tname, .vbtn, .tp-top .meta { white-space: nowrap; }
.tp-top .meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tp-top .tname { letter-spacing: .2em; }
.lobby .top > a { white-space: nowrap; }
@media (max-width: 640px) {
  .pill .v { font-size: 14.5px; letter-spacing: 0; }
  .wallet b { font-size: 16px; }
}

/* ---- ロゴ(ロビーの見出し。画像 public/img/logo.webp)---- */
.lobby .mast h1.logo {
  position: relative; display: inline-block; width: min(440px, 72vw); margin: 0 auto 4px; line-height: 0;
  font-size: 0; letter-spacing: 0; text-indent: 0; background: none; -webkit-text-fill-color: initial;
  filter: drop-shadow(0 6px 24px rgba(216,188,126,.35)) drop-shadow(0 0 2px rgba(0,0,0,.6));
  animation: logoIn 1.1s cubic-bezier(.2,.9,.25,1) both, logoGlow 5s ease-in-out 1.1s infinite;
}
.logo img { display: block; width: 100%; height: auto; }
/* つやの帯: ロゴの形(画像のアルファ)でマスクして、金の部分だけを光が横切る */
.logo-sheen {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(/img/logo.webp?v=1) center / 100% 100% no-repeat; mask: url(/img/logo.webp?v=1) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255,250,225,.85) 48%, rgba(255,255,255,.95) 50%, rgba(255,250,225,.85) 52%, transparent 62%);
  background-size: 300% 100%; background-position: 130% 0; mix-blend-mode: screen;
  animation: logoSheen 5.5s ease-in-out 1.2s infinite;
}
/* きらめき(4 方向の光) */
.logo .spark {
  position: absolute; left: var(--x); top: var(--y); width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none;
  background:
    radial-gradient(circle, #fff 0 2px, rgba(255,240,200,.9) 3px, transparent 9px),
    linear-gradient(90deg, transparent 0 46%, rgba(255,250,230,.95) 50%, transparent 54% 100%),
    linear-gradient(0deg, transparent 0 46%, rgba(255,250,230,.95) 50%, transparent 54% 100%);
  opacity: 0; transform: scale(.3) rotate(0deg); animation: twinkle 3.2s ease-in-out var(--d) infinite;
}
@keyframes logoIn { from { opacity: 0; transform: translateY(10px) scale(.94); filter: blur(6px) drop-shadow(0 6px 24px rgba(216,188,126,0)); } to { opacity: 1; transform: none; } }
@keyframes logoGlow { 0%, 100% { filter: drop-shadow(0 6px 24px rgba(216,188,126,.3)) drop-shadow(0 0 2px rgba(0,0,0,.6)); } 50% { filter: drop-shadow(0 6px 34px rgba(240,215,150,.55)) drop-shadow(0 0 2px rgba(0,0,0,.6)); } }
@keyframes logoSheen { 0% { background-position: 130% 0; } 45%, 100% { background-position: -30% 0; } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 12% { opacity: 1; transform: scale(1) rotate(45deg); } 26% { opacity: 0; transform: scale(.4) rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .lobby .mast h1.logo, .logo-sheen, .logo .spark { animation: none; } .logo .spark { display: none; } }

/* =====================================================================
   文字を全体に太く・大きく(2026-11-09)
   ===================================================================== */
body { font-weight: 500; }
.lobby .top { font-size: 14px; }
.lobby .top > a, .tp-top .back { font-size: 15px; font-weight: 700; }
.lobby .mast p { font-size: 17px; font-weight: 600; }
.wallet { font-size: 14px; font-weight: 600; }
.wallet b { font-size: 22px; font-weight: 700; }
.tcard h2 { font-size: 23px; font-weight: 700; }
.tcard .ph { font-size: 13.5px; font-weight: 600; letter-spacing: .1em; }
.rstats { font-size: 13.5px; font-weight: 600; }
.rstats .k { width: 19px; height: 19px; font-size: 11.5px; }
.btn { font-size: 14.5px; font-weight: 700; }
.btn.sm { font-size: 13.5px; }
.rules summary { font-size: 17px; font-weight: 700; }
.rules table { font-size: 14.5px; }
.rules th { font-size: 13.5px; font-weight: 700; }
.rules td { font-weight: 500; }
.rules td:first-child { font-weight: 700; }
.rules td:nth-child(2) { font-size: 16px; font-weight: 700; }
.rules p { font-size: 14.5px; font-weight: 500; }
.langsel { font-size: 14px; font-weight: 700; }

.tp-top { font-size: 14px; }
.tp-top .tname { font-size: 19px; font-weight: 700; }
.tp-top .meta { font-size: 13.5px; font-weight: 600; }
.vbtn { font-size: 13.5px; font-weight: 700; }
.tp-side h3 { font-size: 14px; font-weight: 700; }
.status { font-size: 15px; }
.status .msg { font-weight: 700; }
.status .sec { font-size: 26px; font-weight: 700; }
.spot .nm { font-size: clamp(13px, 1.6vw, 16px); font-weight: 700; }
.spot .od { font-size: clamp(12px, 1.4vw, 15px); font-weight: 700; color: var(--gold); }
.spot.main .nm { font-size: clamp(19px, 3vw, 32px); font-weight: 700; }
.spot.main .od { font-size: clamp(14px, 1.8vw, 18px); }
.spot .tot { font-size: 12px; font-weight: 600; }
.stack .amt { font-size: 13px; font-weight: 700; }
.spot .won-amt { font-size: 15px; }
.hand .hl { font-size: clamp(17px, 2.5vw, 25px); font-weight: 700; }
.total { font-size: 20px; font-weight: 700; height: 32px; }
.act { font-size: 14.5px; font-weight: 700; padding: 10px 14px; }
.pill .l { font-size: 12px; font-weight: 700; }
.pill .v { font-size: 24px; font-weight: 700; }
.toggle button { font-size: 14px; font-weight: 700; padding: 8px 16px; }
.guest { font-size: 15px; font-weight: 600; }
.banner .bw { font-size: clamp(22px, 3.8vw, 36px); }
.banner .bx { font-size: 16px; font-weight: 700; }
#toast { font-size: 15px; font-weight: 700; }

@media (max-width: 640px) {
  .tp-top .tname { font-size: 15px; }
  .vbtn { font-size: 12px; }
  .spot .nm { font-size: 12.5px; }
  .spot .od { font-size: 12px; }
  .spot.main .nm { font-size: 19px; }
  .pill .l { font-size: 10.5px; }
  .pill .v { font-size: 16.5px; }
  .act { font-size: 13px; padding: 9px 8px; }
  .wallet b { font-size: 18px; }
  .lobby .mast p { font-size: 15px; }
  .tcard h2 { font-size: 20px; }
  .rules table, .rules p { font-size: 13.5px; }
}
/* 上部バーが画面幅を押し広げないように */
.tp { grid-template-columns: minmax(0, 1fr) 300px; }
.tp-top { min-width: 0; overflow: hidden; }
@media (max-width: 1080px) { .tp { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .tp-top .meta { display: none; } }
.lobby .mast p { letter-spacing: .14em; }
/* 縦長(狭い画面)の 3D は札が下端に来るので、結果バナーはディーラーの胸のあたりに */
/* 3D の舞台を縦に高く — 札の幅でカメラの距離が決まるので、上の余白がそのままディーラーの大きさになる */
.three .stage3d { aspect-ratio: 16 / 10; max-height: calc(100dvh - 210px); } /* PC は少し横長に(部屋と台を広く) */
@media (max-width: 640px) { .three .stage3d { aspect-ratio: 1 / 0.96; max-height: 78dvh; } }

/* ---- 画面の切り替わり: 3D は絵がそろってからふわっと出す / ロビーから卓へは暗転でつなぐ ---- */
html { background: var(--ink); }
.stage3d-canvas, .lobby3d-canvas { opacity: 0; transition: opacity .45s ease; }
.stage3d.ready .stage3d-canvas, .lobby3d.ready .lobby3d-canvas { opacity: 1; }
.lobby3d.ready.leaving .lobby3d-canvas { opacity: 0; transition-duration: .3s; }
@media (prefers-reduced-motion: reduce) { .stage3d-canvas, .lobby3d-canvas { transition: none; } }

/* ---- 分岐ロード(ビッグアイ = 白抜きの丸 / スモール = 塗りの丸 / コックローチ = 斜線。赤 = 規則性あり、青 = 途切れ) ---- */
.rd-d { position: relative; display: block; }
.rd-d::before { content: ''; position: absolute; inset: 12%; border-radius: 50%; }
.rd-d.cR { color: var(--bk); } .rd-d.cB { color: var(--pl); }
.rd-eye::before { border: max(1.5px, calc(var(--cell, 8px) * .16)) solid currentColor; }
.rd-small::before { background: currentColor; }
.rd-roach::before { inset: 45% 0 auto; height: max(1.5px, calc(var(--cell, 8px) * .18)); border-radius: 1px; background: currentColor; transform: rotate(-50deg); }
.road.der { --cell: 8px; }
.tp-side .road.der { --cell: 7.75px; }
.side-der2 { display: flex; gap: 6px; }
.side-der h3 + .road { margin-bottom: 8px; }
@keyframes rdAsk { 50% { opacity: .15; } }
.road .ask { animation: rdAsk .7s steps(1) infinite; }

/* ---- 罫線パネル(3D の台の上の方に重ねる。ベット受付中だけ出す)---- */
.roadbtn { display: inline-flex; align-items: center; gap: 6px; position: absolute; top: 10px; right: 10px; z-index: 4;
  padding: 5px 11px 5px 9px; border: 1px solid var(--gold-line); border-radius: 999px; background: rgba(13,11,8,.72);
  color: var(--gold); font-family: var(--f-jp); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; backdrop-filter: blur(4px); }
.roadbtn .ico { width: 14px; height: 11px; background:
  linear-gradient(currentColor, currentColor) 0 0 / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) 0 50% / 100% 1.5px no-repeat,
  linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; opacity: .9; }
.roadbtn[aria-pressed="true"] { background: rgba(216,188,126,.18); border-color: var(--gold); color: var(--gold-bright, #f3dca6); }
.roadov { display: block; position: absolute; left: 10px; right: 10px; top: 10px; z-index: 3; padding: 6px 8px 8px;
  background: rgba(10,8,6,.8); border: 1px solid var(--gold-line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  backdrop-filter: blur(6px); opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
.roads-on .roadov { opacity: 1; transform: none; pointer-events: auto; }
.ro-head { display: flex; align-items: center; gap: 10px; min-height: 24px; margin-bottom: 5px; padding-right: 86px; }
.ro-stats { display: flex; gap: 9px; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--ivory); font-family: var(--f-num); }
.ro-stats .k { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; color: #fff; font-size: 10.5px; margin-right: 3px; font-family: var(--f-display); }
.ro-stats .kP { background: var(--pl); } .ro-stats .kB { background: var(--bk); } .ro-stats .kT { background: var(--tie); }
.ro-stats .n { color: var(--ivory-dim); font-weight: 600; }
.ro-asks { margin-left: auto; display: flex; gap: 6px; }
.ro-ask { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; border: 1px solid; font-family: var(--f-display); font-weight: 700; font-size: 12px; }
.ro-ask.P { border-color: var(--pl); color: #a9c6f5; } .ro-ask.B { border-color: var(--bk); color: #f0a3aa; }
.ro-ask.P.on { background: rgba(91,143,224,.3); } .ro-ask.B.on { background: rgba(208,80,93,.3); }
.ro-marks { display: inline-flex; gap: 2px; align-items: center; }
.ro-marks .rd-d { --cell: 10px; width: 10px; height: 10px; }
.ro-marks .rd-d.none::before { inset: 45% 25% auto; height: 1.5px; background: rgba(239,231,213,.3); border-radius: 0; }
.ro-body { --rc: 16px; display: grid; grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr); gap: 6px; align-items: start; }
.roadov .road { width: 100%; max-width: none; background-color: rgba(239,231,213,0.05); }
.roadov .ro-bead { width: max-content; }
.ro-der { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.ro-der2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.ro-der .road { border-top-width: 0; } .ro-der > .road:first-child { border-top-width: 1px; }
.ro-der2 .road + .road { border-left-width: 0; }
@media (max-width: 640px) {
  .roadbtn { top: 6px; right: 6px; padding: 4px 9px 4px 8px; font-size: 11.5px; }
  .roadov { left: 6px; right: 6px; top: 6px; padding: 5px 6px 6px; }
  .ro-head { padding-right: 70px; margin-bottom: 4px; }
  .ro-stats { gap: 6px; font-size: 11.5px; }
  .ro-stats .n { display: none; }
  .ro-ask { padding: 1px 5px; font-size: 11px; }
  .ro-marks .rd-d { width: 8px; height: 8px; }
  .ro-body { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .roadov { transition: none; } .road .ask { animation: none; outline: 1px dashed currentColor; } }

/* ---- 公平性ページ(/fair)---- */
.fair-mast { margin-bottom: 30px; }
.fair-eyebrow { font-family: var(--f-jp) !important; color: var(--gold) !important; letter-spacing: .4em !important; font-size: 13px !important; margin: 0 0 6px !important; }
.fair-h { font-family: var(--f-display); font-weight: 700; font-size: clamp(34px, 7vw, 64px); letter-spacing: .3em; text-indent: .3em; margin: 0;
  background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: sheen 7s linear infinite;
  filter: drop-shadow(0 4px 18px rgba(216,188,126,.22)); }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.pillar { position: relative; padding: 20px 18px 18px; border: 1px solid var(--gold-line); background: linear-gradient(180deg, rgba(30,25,18,.94), rgba(13,11,8,.96)); }
.pillar svg { width: 40px; height: 40px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; margin-bottom: 10px; }
.pillar svg circle { fill: var(--gold); stroke: none; }
.pillar h3 { font-family: var(--f-jp); font-weight: 700; font-size: 16px; color: var(--gold-bright, #f3dca6); margin: 0 0 8px; letter-spacing: .06em; }
.pillar p { color: var(--ivory-dim); font-size: 13.5px; line-height: 1.8; margin: 0; }
.fpanel { position: relative; margin-bottom: 22px; padding: 22px 22px 20px; border: 1px solid var(--gold-line); background: linear-gradient(180deg, rgba(30,25,18,.94), rgba(13,11,8,.96)); }
.fpanel h2 { font-family: var(--f-jp); font-weight: 700; font-size: 19px; color: var(--gold); letter-spacing: .1em; margin: 0 0 10px; }
.fpanel .lead, .fpanel .note { color: var(--ivory-dim); font-size: 13.5px; line-height: 1.85; margin: 0 0 14px; }
.fpanel .note { margin: 12px 0 0; font-size: 12.5px; }
.fsub { font-family: var(--f-jp); font-size: 15px; color: var(--gold-dim); letter-spacing: .1em; margin: 20px 0 10px; }
.ftabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ftabs button { padding: 7px 14px; border: 1px solid var(--gold-line); color: var(--ivory-dim); font-family: var(--f-display); font-weight: 600; letter-spacing: .14em; font-size: 12.5px; }
.ftabs button[aria-selected="true"] { border-color: var(--gold); color: var(--ink); background: var(--gold); }
.fshoe { position: relative; padding: 14px 16px; border: 1px solid var(--gold-faint); background: rgba(239,231,213,.03); margin-bottom: 10px; }
.fshoe.cur { border-color: var(--gold-line); background: rgba(216,188,126,.06); }
.fshoe .tag { display: inline-block; font-size: 11px; letter-spacing: .14em; color: var(--ink); background: var(--gold); padding: 2px 8px; margin-bottom: 8px; font-weight: 700; }
.sh-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.sh-head b { font-family: var(--f-display); letter-spacing: .16em; color: var(--gold-bright, #f3dca6); font-size: 15px; }
.sh-meta { color: var(--ivory-dim); font-size: 13px; margin-top: 6px; }
.fpanel dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 10px 0 0; font-size: 12.5px; }
.fpanel dt { color: var(--gold-dim); font-family: var(--f-display); letter-spacing: .1em; }
.fpanel dd { margin: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; color: var(--ivory); font-size: 12px; }
.dim { color: var(--ivory-dim); }
.sh-act { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; margin-top: 12px; }
.fres { font-size: 13px; line-height: 1.7; }
.fres .ok, .fpanel .ok { color: #7fd6a2; }
.fres .ng, .fpanel .ng { color: #f08a94; }
.fshoe details { margin-top: 10px; }
.fshoe summary { cursor: pointer; color: var(--gold); font-size: 13px; }
.frounds { max-height: 320px; overflow: auto; margin-top: 8px; padding-right: 4px; }
.fround { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 0; border-bottom: 1px solid var(--gold-faint); font-size: 13px; }
.fround .n { color: var(--gold-dim); font-family: var(--f-num); min-width: 46px; }
.fround .cs { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.fround.all { border: 0; margin-top: 6px; }
.fc { display: inline-block; min-width: 30px; padding: 1px 4px; text-align: center; background: #f5efe2; color: #16120c; border-radius: 3px; font-weight: 700; font-size: 12.5px; font-family: var(--f-num); }
.fc.red { color: #b3202e; }
.fenv { font-size: 11.5px; color: #ffd7a0; border: 1px solid #c0182e; background: rgba(192,24,46,.25); padding: 0 6px; border-radius: 8px; }
.fmanual { display: flex; gap: 8px; flex-wrap: wrap; }
.fmanual input { flex: 1 1 320px; min-width: 0; padding: 9px 12px; background: rgba(239,231,213,.05); border: 1px solid var(--gold-line); color: var(--ivory);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
#fmanualOut { margin-top: 10px; }
.frtp { width: 100%; border-collapse: collapse; font-size: 14px; }
.frtp th, .frtp td { border-bottom: 1px solid var(--gold-faint); padding: 9px 8px; text-align: left; }
.frtp th { color: var(--gold-dim); font-family: var(--f-display); letter-spacing: .14em; font-weight: 500; font-size: 12px; }
.frtp td:nth-child(2) { font-family: var(--f-num); color: var(--ivory); white-space: nowrap; }
.frtp td:nth-child(3) { font-family: var(--f-num); font-weight: 700; color: var(--gold-bright, #f3dca6); text-align: right; }
.frtp th:nth-child(3) { text-align: right; }
.fhow ol { margin: 0; padding-left: 1.4em; color: var(--ivory-dim); font-size: 13.5px; line-height: 1.9; }
.fhow code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--gold); }
.fair-link { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); text-decoration: none; font-size: 13px; letter-spacing: .08em; }
.fair-link::before { content: ''; width: 12px; height: 13px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 13'%3E%3Cpath d='M6 0l6 2.2v4C12 9.7 9.4 12 6 13 2.6 12 0 9.7 0 6.2v-4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 13'%3E%3Cpath d='M6 0l6 2.2v4C12 9.7 9.4 12 6 13 2.6 12 0 9.7 0 6.2v-4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.lobby-foot { text-align: center; margin-top: 22px; }
.fair-shoe { font-size: 12px; color: var(--ivory-dim); line-height: 1.6; }
.fair-shoe .mono { font-size: 11px; color: var(--ivory-dim); }
@media (max-width: 860px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .pillars { grid-template-columns: 1fr; }
  .fpanel { padding: 18px 14px 16px; }
  .fshoe { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .fair-h { animation: none; } }

/* ---- ベット履歴ページ(/history)---- */
.hfilters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.hseg { display: inline-flex; border: 1px solid var(--gold-line); }
.hseg button { padding: 8px 16px; color: var(--ivory-dim); font-family: var(--f-jp); font-weight: 700; font-size: 13px; letter-spacing: .06em; }
.hseg button + button { border-left: 1px solid var(--gold-line); }
.hseg button[aria-selected="true"] { background: var(--gold); color: var(--ink); }
#htable { padding: 8px 12px; background: var(--ink-2, #15120d); color: var(--ivory); border: 1px solid var(--gold-line); font-family: var(--f-display); letter-spacing: .1em; font-size: 13px; }
.hsum { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.hs { position: relative; padding: 12px 14px; border: 1px solid var(--gold-line); background: linear-gradient(180deg, rgba(30,25,18,.94), rgba(13,11,8,.96)); }
.hs .l { display: block; font-size: 11.5px; color: var(--gold-dim); letter-spacing: .1em; margin-bottom: 4px; font-family: var(--f-jp); font-weight: 700; }
.hs .v { font-family: var(--f-num); font-size: 21px; font-weight: 700; color: var(--ivory); white-space: nowrap; }
.hs .v small { font-size: 12px; color: var(--ivory-dim); font-weight: 600; }
.hs.pos .v, .h-net.pos { color: #7fd6a2; }
.hs.neg .v, .h-net.neg { color: #f08a94; }
.hlist { display: flex; flex-direction: column; gap: 6px; }
.hempty { text-align: center; padding: 30px 0; }
.hround { border: 1px solid var(--gold-faint); background: rgba(20,17,12,.75); }
.hround[open] { border-color: var(--gold-line); background: rgba(30,25,18,.9); }
.hround summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 92px minmax(0, 1fr) 150px 140px 110px; align-items: center; gap: 10px; padding: 11px 14px; }
.hround summary::-webkit-details-marker { display: none; }
.h-time { font-family: var(--f-num); color: var(--ivory-dim); font-size: 13.5px; }
.h-table { font-family: var(--f-display); letter-spacing: .12em; font-size: 13px; color: var(--gold); white-space: nowrap; }
.h-table i { font-style: normal; color: var(--ivory-dim); letter-spacing: 0; font-family: var(--f-num); }
.h-win { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; }
.h-win b { font-family: var(--f-display); letter-spacing: .12em; padding: 1px 7px; border-radius: 3px; color: #fff; font-size: 11.5px; }
.h-win.wP b { background: var(--pl); } .h-win.wB b { background: var(--bk); } .h-win.wT b { background: var(--tie); }
.h-win .sc { font-family: var(--f-num); font-weight: 700; color: var(--ivory); font-size: 14px; }
.h-bet { color: var(--ivory-dim); font-size: 13px; font-family: var(--f-num); }
.h-net { text-align: right; font-family: var(--f-num); font-weight: 700; font-size: 16px; color: var(--ivory-dim); }
.h-body { padding: 4px 14px 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 20px; }
.h-hands { display: flex; flex-direction: column; gap: 8px; }
.hh { display: flex; align-items: center; gap: 10px; }
.hh .hl { width: 92px; font-family: var(--f-display); letter-spacing: .12em; font-size: 12px; }
.hh.P .hl { color: #a9c6f5; } .hh.B .hl { color: #f0a3aa; }
.hh .hl b { font-family: var(--f-num); font-size: 17px; color: var(--ivory); margin-left: 4px; }
.hh .cs { display: inline-flex; gap: 4px; }
.hcard { width: 38px; height: 58px; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.h-spots { width: 100%; border-collapse: collapse; font-size: 13px; align-self: start; }
.h-spots th, .h-spots td { padding: 5px 6px; border-bottom: 1px solid var(--gold-faint); text-align: right; }
.h-spots th:first-child, .h-spots td:first-child { text-align: left; }
.h-spots th { color: var(--gold-dim); font-weight: 400; font-size: 11.5px; letter-spacing: .08em; }
.h-spots td { font-family: var(--f-num); }
.h-spots td:first-child { font-family: var(--f-body); }
.h-spots tr.won td:last-child { color: #7fd6a2; font-weight: 700; }
.h-spots tr.push td:last-child { color: var(--ivory); }
.h-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12.5px; color: var(--ivory-dim); }
.h-foot .fair-link { margin-left: auto; font-size: 12.5px; }
.hmore { text-align: center; margin-top: 14px; }
.hist-link { color: var(--gold); text-decoration: none; font-size: 12.5px; letter-spacing: .06em; margin-right: 6px; white-space: nowrap; }
.side-links { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 900px) { .hsum { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .hround summary { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "time table net" "win win bet"; row-gap: 6px; padding: 10px 12px; }
  .h-time { grid-area: time; font-size: 12.5px; } .h-table { grid-area: table; } .h-net { grid-area: net; }
  .h-win { grid-area: win; } .h-bet { grid-area: bet; text-align: right; }
  .h-body { grid-template-columns: 1fr; padding: 2px 12px 12px; }
  .hcard { width: 34px; height: 52px; }
  .hs { padding: 10px 11px; } .hs .v { font-size: 17px; }
  .hseg button { padding: 7px 11px; font-size: 12.5px; }
  .h-foot .fair-link { margin-left: 0; }
}
.h-win .sc i { font-style: normal; font-family: var(--f-display); font-size: 10.5px; color: var(--ivory-dim); margin: 0 4px; }

/* ---- ディーラーの読み上げ(オン / オフ)---- */
.voicebtn { display: inline-flex; align-items: center; justify-content: center; padding: 5px 9px; }
.voicebtn .ico { width: 18px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M1 5h3l5-4v14l-5-4H1z'/%3E%3Cpath d='M12 4.5a5 5 0 0 1 0 7M14.5 2a8.5 8.5 0 0 1 0 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M1 5h3l5-4v14l-5-4H1z'/%3E%3Cpath d='M12 4.5a5 5 0 0 1 0 7M14.5 2a8.5 8.5 0 0 1 0 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.voicebtn.off { color: var(--ivory-dim); opacity: .7; }
.voicebtn.off .ico {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M1 5h3l5-4v14l-5-4H1z'/%3E%3Cpath d='M12 5l5 6M17 5l-5 6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M1 5h3l5-4v14l-5-4H1z'/%3E%3Cpath d='M12 5l5 6M17 5l-5 6' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.bgmbtn { display: inline-flex; align-items: center; justify-content: center; padding: 5px 9px; }
.bgmbtn .ico { width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 2.5l8-1.8v10.3a2.4 2.4 0 1 1-1.6-2.3V4.2L7.6 5.3v7.5A2.4 2.4 0 1 1 6 10.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 2.5l8-1.8v10.3a2.4 2.4 0 1 1-1.6-2.3V4.2L7.6 5.3v7.5A2.4 2.4 0 1 1 6 10.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.bgmbtn.off { color: var(--ivory-dim); opacity: .6; }
.bgmbtn.off::after { content: ''; position: absolute; width: 20px; height: 1.6px; background: currentColor; transform: rotate(-45deg); }
.bgmbtn { position: relative; }
.lobby .top .bgmbtn { margin-right: 2px; }

/* ---- スマホの上部バー: ボタンが増えたので詰める(画面の外にはみ出さないように)---- */
@media (max-width: 480px) {
  .tp-top { gap: 6px; padding: 8px 8px; }
  .tp-top .back .lbl { display: none; }
  .tp-top .tname { font-size: 14px; letter-spacing: .1em; }
  .tp-top .langsel { max-width: 64px; }
  .tp-top .vbtn { padding: 5px 7px; letter-spacing: .06em; font-size: 11px; }
  .tp-top .voicebtn, .tp-top .bgmbtn { padding: 5px 7px; }
}

/* スマホの結果バナーは小さめ(台全体を映すので札の上に余白が少ない)*/
@media (max-width: 640px) {
  .three .stage3d .banner { padding: 7px 20px 6px; }
  .three .stage3d .banner .bw { font-size: 19px; letter-spacing: .22em; }
  .three .stage3d .banner .bx { font-size: 12px; margin-top: 0; }
}

/* ---- スマホのロビー上部: 残高の行を折り返して、画面の外にはみ出さないように ---- */
@media (max-width: 560px) {
  .lobby .top { flex-wrap: wrap; row-gap: 8px; gap: 8px; margin-bottom: 14px; }
  .lobby .top .wallet { order: 10; width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; }
  .lobby .top .wallet b { font-size: 17px; }
  .lobby .top .langsel { max-width: 92px; }
}
.wallet .wlabel { font-family: var(--f-display); letter-spacing: .12em; color: var(--gold); font-weight: 600; }

/* ---- ロビーの罫線一覧(3D ロビーの右に重ねるパネル)---- */
.lr-toggle { position: absolute; right: 12px; bottom: 12px; z-index: 6; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px solid var(--gold); background: rgba(13,11,8,.82); color: var(--gold-bright, #f3dca6);
  font-family: var(--f-jp); font-weight: 700; font-size: 13px; letter-spacing: .08em; backdrop-filter: blur(4px); box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.lr-toggle .ico { width: 18px; height: 14px; background:
  radial-gradient(circle at 3px 3px, var(--bk) 2.2px, transparent 2.6px), radial-gradient(circle at 9px 3px, var(--pl) 2.2px, transparent 2.6px),
  radial-gradient(circle at 15px 3px, var(--bk) 2.2px, transparent 2.6px), radial-gradient(circle at 3px 10px, var(--pl) 2.2px, transparent 2.6px),
  radial-gradient(circle at 9px 10px, var(--bk) 2.2px, transparent 2.6px); }
.lr-toggle[aria-pressed="true"] { background: var(--gold); color: var(--ink); }
.lroads { position: absolute; top: 12px; right: 12px; bottom: 58px; z-index: 5; width: min(360px, calc(100% - 24px)); display: flex; flex-direction: column;
  background: rgba(10,8,6,.86); border: 1px solid var(--gold-line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.55); backdrop-filter: blur(8px);
  opacity: 0; transform: translateX(14px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.lr-on .lroads { opacity: 1; transform: none; pointer-events: auto; }
.lr-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px; border-bottom: 1px solid var(--gold-faint); }
.lr-kind { flex: 1; min-width: 0; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--gold); background: rgba(13,11,8,.9); color: var(--gold-bright, #f3dca6);
  font-family: var(--f-display); font-weight: 600; letter-spacing: .12em; font-size: 12.5px; }
.lr-close { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold-line); color: var(--gold); font-size: 18px; line-height: 1; }
.lr-list { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.lr-row { display: block; padding: 8px 9px 9px; border: 1px solid var(--gold-faint); border-radius: 9px; background: rgba(30,25,18,.7); text-decoration: none; color: inherit; transition: border-color .2s, background .2s; }
.lr-row:hover { border-color: var(--gold); background: rgba(40,33,22,.85); }
.lr-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12.5px; }
.lr-id { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--ink);
  font-family: var(--f-display); font-weight: 700; font-size: 12.5px; }
.lr-n { font-family: var(--f-num); font-weight: 700; color: var(--ivory); }
.lr-top .rstats { gap: 7px; font-size: 12.5px; }
.lr-top .rstats .k { width: 16px; height: 16px; font-size: 10px; }
.lr-ph { margin-left: auto; font-size: 11px; color: var(--ivory-dim); white-space: nowrap; }
.lr-ph.live { color: #9fe0bc; }
.lr-sit { font-size: 11px; color: var(--gold); border: 1px solid var(--gold-line); padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.lr-row .road { width: 100%; max-width: none; }
@media (max-width: 640px) {
  .lroads { top: 8px; right: 8px; left: 8px; bottom: 50px; width: auto; }
  .lr-toggle { right: 8px; bottom: 8px; padding: 6px 12px 6px 9px; font-size: 12px; }
  .lr-top { gap: 6px; font-size: 12px; }
  .lr-ph { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lroads { transition: none; } }

.fmanual .fcut { flex: 0 0 130px; padding: 9px 10px; background: rgba(239,231,213,.05); border: 1px solid var(--gold-line); color: var(--ivory); font-family: var(--f-num); font-size: 13px; }

/* ---- シューのカット(新しいシューの前)---- */
.cutpanel { position: absolute; left: 50%; top: 50%; z-index: 8; width: min(520px, calc(100% - 24px)); transform: translate(-50%, -46%) scale(.97);
  padding: 16px 18px 14px; border: 1px solid var(--gold); border-radius: 14px; background: radial-gradient(ellipse at 50% 0%, rgba(216,188,126,.18), transparent 70%), rgba(10,8,6,.93);
  box-shadow: 0 20px 60px rgba(0,0,0,.6); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.cutpanel.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.cp-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.cp-title b { font-family: var(--f-display); font-weight: 700; letter-spacing: .3em; font-size: 20px; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: sheen 7s linear infinite; }
.cp-title span { font-family: var(--f-jp); color: var(--gold); font-weight: 700; letter-spacing: .1em; font-size: 14px; }
.cp-msg { margin: 0 0 12px; color: var(--ivory); font-size: 14px; line-height: 1.6; }
.cp-deck { position: relative; height: 54px; border-radius: 6px; outline: none; touch-action: none; }
.cp-stack { position: absolute; inset: 10px 0 8px; border-radius: 4px; border: 1px solid rgba(216,188,126,.45);
  background: repeating-linear-gradient(90deg, #f3ecdc 0 2px, #cfc4ab 2px 3px), #efe6d2; box-shadow: inset 0 -6px 10px rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.4); }
.cp-marker { position: absolute; top: 0; bottom: 0; width: 0; transform: translateX(-50%); transition: left .05s linear; }
.cp-card { position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; border-radius: 3px; background: linear-gradient(180deg, #ffd56b, #e8a92c); box-shadow: 0 0 0 1px #6b4a12, 0 0 14px rgba(255,200,90,.7); }
.cutpanel:not(.mine) .cp-marker { display: none; }
.cutpanel.mine .cp-deck { cursor: ew-resize; }
.cp-deck:focus-visible { box-shadow: 0 0 0 2px var(--gold); }
.cp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.cp-pos { font-family: var(--f-num); font-weight: 700; color: var(--gold-bright, #f3dca6); font-size: 16px; }
.cutpanel:not(.mine) .cp-row { display: none; }
.cp-timer { height: 3px; margin-top: 12px; background: rgba(216,188,126,.15); border-radius: 2px; overflow: hidden; }
.cp-timer i { display: block; height: 100%; background: var(--gold); transform-origin: left center; }
@media (max-width: 640px) { .cutpanel { padding: 12px 12px 10px; } .cp-msg { font-size: 13px; } .cp-title b { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .cutpanel { transition: none; } .cp-title b { animation: none; } }