:root {
  --felt: #0f3a26;
  --felt-dark: #0a2619;
  --felt-light: #16523a;
  --gold-1: #fff3c4;
  --gold-2: #e7c46a;
  --gold-3: #b8872b;
  --gold: linear-gradient(135deg, #7a5310 0%, #e7c46a 22%, #fff3c4 38%, #b8872b 55%, #e7c46a 75%, #7a5310 100%);
  --ink: #f4ecd6;
  --muted: #a9b9ad;
  --red: #d8333f;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 40%, var(--felt-light) 0%, var(--felt) 45%, var(--felt-dark) 100%) fixed;
  color: var(--ink);
  font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  overscroll-behavior: none;
}
body.in-game { overflow: hidden; background: #06140d; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }

/* ---------- ホーム・ロビー ---------- */
.title {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 800;
  font-size: 34px;
  letter-spacing: 4px;
  text-align: center;
  margin: 0;
  background: var(--gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sub { text-align: center; color: var(--muted); font-size: 13px; margin: 6px 0 0; letter-spacing: 2px; }
.screen { max-width: 440px; margin: 0 auto; padding: 32px 16px; display: flex; flex-direction: column; gap: 18px; }
.panel {
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(231, 196, 106, .35);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.panel h2 { margin: 0; font-size: 15px; color: var(--gold-2); font-weight: 700; letter-spacing: 1px; }
input {
  font: inherit;
  font-size: 16px;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid rgba(231, 196, 106, .4);
  background: rgba(0, 0, 0, .35);
  color: var(--ink);
  width: 100%;
}
.btn {
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(231, 196, 106, .5);
}
.btn.gold { background: var(--gold); color: #3a2604; border: 0; }
.btn.small { padding: 7px 10px; font-size: 13px; }
.btn:disabled { opacity: .4; cursor: default; }
.row { display: flex; gap: 8px; }
.row > * { flex: 1; }
.room-code { font-family: "Shippori Mincho B1", serif; font-size: 44px; text-align: center; letter-spacing: 10px; color: var(--gold-1); }
.qr { display: flex; justify-content: center; }
.qr svg { background: #fff; padding: 8px; border-radius: 8px; width: 168px; height: 168px; }
.url { text-align: center; font-size: 12px; color: var(--muted); word-break: break-all; }
.seat { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, .25); }
.seat .wind { color: var(--gold-2); font-weight: 700; margin-right: 10px; }
.seat.empty { color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #6c6; display: inline-block; margin-left: 6px; }
.dot.off { background: #888; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: rgba(30, 10, 10, .92); border: 1px solid var(--red);
  padding: 10px 16px; border-radius: 8px; z-index: 50; font-size: 14px; max-width: calc(100vw - 32px);
}

/* ---------- 牌 ---------- */
.sz-hand { --w: 58px; }
.sz-meld { --w: 40px; }
.sz-river { --w: 34px; }
.sz-opp { --w: 26px; }
.sz-dora { --w: 30px; }
.sz-res { --w: 30px; }
/* 牌の立体感：白い本体の下に、象牙色の厚み → 緑の背 → 影 を重ねる */
.tile {
  --t: calc(var(--w) * .1);
  width: var(--w);
  height: calc(var(--w) * 1.34);
  border-radius: calc(var(--w) * .11);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(180deg, #ffffff 0%, #f6f8fa 50%, #e4e9ef 100%);
  border-bottom: var(--t) solid #e2e7ed;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 1px 0 0 rgba(255, 255, 255, .9),
    inset -2px 0 2px rgba(70, 85, 110, .18),
    0 calc(var(--t) * .9) 0 #2f9062,
    0 calc(var(--t) * 1.3) 0 #1b5a3c,
    calc(var(--w) * .04) calc(var(--t) * 2.4) calc(var(--w) * .16) rgba(0, 0, 0, .55);
  flex: 0 0 auto;
  position: relative;
  user-select: none;
}
.tile .face { display: block; width: 100%; height: 100%; padding: 7% 6% 5%; }
.sz-hand.tile { --t: calc(var(--w) * .16); }
.tile.back {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(180deg, #44b07e 0%, #2a8458 60%, #1f6a46 100%);
  border-bottom-color: #f1ead7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 calc(var(--t) * .9) 0 #d9cfb5,
    calc(var(--w) * .04) calc(var(--t) * 2) calc(var(--w) * .14) rgba(0, 0, 0, .5);
}
.tile.called { opacity: 1; }
.tile.tsumogiri { filter: brightness(.88); }
.tile.nuki { box-shadow: 0 0 0 2px rgba(231, 196, 106, .8); }
.side {
  width: calc(var(--w) * 1.34 + var(--w) * .13);
  height: var(--w);
  position: relative;
  flex: 0 0 auto;
}
.side > .tile { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); }

/* ---------- 卓（1280×720 を拡大縮小） ---------- */
.stage {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 1280px;
  height: 720px;
  transform: translate(-50%, -50%) scale(var(--s, 1));
  /* フェルトの質感（細かい織り目＋中央が明るい照明）と、木の縁＋金の縁取り */
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 55%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 2px, rgba(0, 0, 0, .018) 2px 4px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .012) 0 2px, rgba(0, 0, 0, .012) 2px 4px),
    radial-gradient(ellipse at 50% 42%, #1f7550 0%, #145a3e 45%, #0a3826 100%);
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 4px #2a1a0a,
    inset 0 0 0 12px #6b4423,
    inset 0 0 0 13px #9a6a3a,
    inset 0 0 0 15px #c9a24a,
    inset 0 0 0 17px #3b2410,
    inset 0 0 90px rgba(0, 0, 0, .65);
}
.rot { position: absolute; inset: 0; transform-origin: 640px 300px; pointer-events: none; }
.rot * { pointer-events: auto; }

.centerbox {
  position: absolute;
  left: 530px; top: 190px; width: 220px; height: 220px;
  border-radius: 16px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle at 50% 40%, #29443a, #0c1913);
  box-shadow:
    0 0 0 3px #c9a24a,
    0 0 0 5px #3b2a12,
    inset 0 2px 0 rgba(255, 255, 255, .18),
    inset 0 -8px 14px rgba(0, 0, 0, .55),
    0 16px 26px rgba(0, 0, 0, .6);
}
.centerbox .mid { position: absolute; inset: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.centerbox .rd { font-family: "Shippori Mincho B1", serif; font-weight: 800; font-size: 26px; color: var(--gold-1); }
.centerbox .sm { font-size: 13px; color: var(--muted); }
.centerbox .rest { font-size: 15px; color: var(--gold-2); font-weight: 700; margin-top: 4px; }
.seatlab {
  position: absolute;
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums;
  padding: 2px 10px; border-radius: 6px;
  white-space: nowrap;
}
.seatlab.bottom { left: 50%; bottom: 6px; transform: translateX(-50%); }
.seatlab.right { right: 6px; top: 50%; transform: translate(50%, -50%) rotate(-90deg) translateY(-50%); transform-origin: center; }
.seatlab.left { left: 6px; top: 50%; transform: translate(-50%, -50%) rotate(90deg) translateY(-50%); transform-origin: center; }
.seatlab.active { background: rgba(231, 196, 106, .22); box-shadow: 0 0 10px rgba(231, 196, 106, .6); }
.seatlab .w, .plate .w {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .14); font-size: 14px;
}
.seatlab .w.dealer, .plate .w.dealer { background: var(--gold); color: #3a2604; }
.seatlab .stick { width: 46px; height: 6px; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1px #999; position: relative; }
.seatlab .stick::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--red); transform: translate(-50%, -50%); }

.pond {
  position: absolute;
  left: 532px; top: 422px; width: 220px;
  display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-end; gap: 2px;
}
.opprow {
  position: absolute;
  left: 0; right: 0; top: 708px;
  display: flex; justify-content: center; align-items: flex-end; gap: 10px;
}
.opphand { display: flex; gap: 2px; align-items: flex-end; }
.meld, .mymelds { display: flex; align-items: flex-end; gap: 1px; }
.mymelds { gap: 10px; }
.stack { display: flex; flex-direction: column; }

.topinfo {
  position: absolute; left: 340px; right: 340px; top: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.dora {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 10px; border-radius: 10px;
  background: rgba(0, 0, 0, .35); font-size: 12px; color: var(--muted);
}
.dorarow {
  display: flex; gap: 2px; align-items: flex-end;
  padding: 3px 5px 7px; border-radius: 6px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 66%, #6b4423 66%, #3b2410 100%);
}
.dorarow.extra { box-shadow: 0 0 0 1px rgba(231, 196, 106, .6); }
.riichiwaits {
  position: absolute; left: 50%; top: 512px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px 12px; border-radius: 12px; white-space: nowrap;
  background: rgba(0, 0, 0, .7); box-shadow: 0 0 0 2px #d8333f, 0 6px 16px rgba(0, 0, 0, .5);
  font-size: 17px; font-weight: 800; color: var(--gold-1);
}
.riichiwaits .sub2 { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.fxitem { text-align: left; font: inherit; color: inherit; cursor: pointer; }
.fxitem .fxhint { font-size: 10px; color: rgba(231, 196, 106, .7); margin-top: 2px; }
.effects { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.effects span { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: rgba(231, 196, 106, .18); border: 1px solid rgba(231, 196, 106, .5); color: var(--gold-1); }
.events { font-size: 13px; color: var(--muted); min-height: 16px; }
.chainbar { font-size: 13px; text-align: center; padding: 6px 10px; border-radius: 8px; background: rgba(120, 10, 20, .6); border: 1px solid #b0242f; }

.plate {
  position: absolute; top: 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  max-width: 230px; padding: 8px 12px; border-radius: 10px;
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(231, 196, 106, .25); font-size: 15px;
}
.plate.left { left: 22px; }
.plate.right { right: 22px; justify-content: flex-end; }
.plate.active { border-color: var(--gold-2); box-shadow: 0 0 12px rgba(231, 196, 106, .45); }
.plate .nm { font-weight: 700; }
.plate .tags { display: flex; gap: 4px; width: 100%; }
.plate.right .tags { justify-content: flex-end; }
.badge { font-size: 11px; padding: 1px 6px; border-radius: 3px; background: var(--red); font-weight: 700; }
.badge.nuki { background: #355; }
.badge.cards { background: #6b4f12; }

/* 横幅いっぱいの列は、空いている所でタップを受け止めないようにする（下のボタンが押せなくなるため） */
.myrow, .opprow { pointer-events: none; }
.myrow > *, .opprow > * { pointer-events: auto; }
.myrow {
  position: absolute; left: 0; right: 0; top: 600px;
  display: flex; justify-content: center; align-items: flex-end; gap: 22px;
}
/* 手牌は木の牌立ての上に並べる */
.hand {
  display: flex; gap: 2px; align-items: flex-end;
  padding: 6px 12px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%, #6b4423 70%, #3b2410 100%);
}
.opphand {
  padding: 2px 6px 6px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 68%, #6b4423 68%, #3b2410 100%);
}
.hand .tile { cursor: pointer; transition: transform .08s; }
.hand .tile.drawn { margin-left: 14px; }
.hand .tile.sel { transform: translateY(-14px); box-shadow: 0 8px 12px rgba(0, 0, 0, .5), 0 0 0 3px var(--gold-2); }
.hand .tile.dim { filter: brightness(.6); }
.hand .tile.can { box-shadow: 0 0 0 3px #ff6b6b; }

/* ---------- 左のカード列・右の継続中の効果 ---------- */
.cardcol { position: absolute; left: 22px; top: 92px; display: flex; flex-direction: column; gap: 8px; }
.buy { font-size: 13px; padding: 8px; border-radius: 7px; border: 1px dashed var(--gold-2); color: var(--gold-1); background: rgba(0, 0, 0, .35); }
.fxpanel {
  position: absolute; right: 16px; top: 100px; width: 172px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(10, 20, 14, .7), rgba(10, 20, 14, .45));
  box-shadow: 0 0 0 1px rgba(231, 196, 106, .4), 0 8px 18px rgba(0, 0, 0, .45);
}
.fxpanel-title { font-size: 13px; font-weight: 800; letter-spacing: 2px; color: var(--gold-2); text-align: center; }
.fxpanel-none { font-size: 12px; color: var(--muted); text-align: center; }
.fxitem { padding: 6px 8px; border-radius: 7px; background: rgba(255, 255, 255, .06); border-left: 4px solid; }
.fxitem.action { border-color: #4fae36; }
.fxitem.counter { border-color: #d0343f; }
.fxitem .fxname { font-family: "Shippori Mincho B1", serif; font-weight: 800; font-size: 15px; color: var(--gold-1); }
.fxitem .fxowner { font-size: 11px; color: var(--muted); }

/* ---------- 高級デザインのカード（--cw で大きさが決まる） ---------- */
.jcard {
  --base: #145c32; --base-dark: #0a3018; --base-light: #1f8a4c; --panel: #f5f0dc; --ink: #1d2a16;
  width: var(--cw);
  height: calc(var(--cw) * 86 / 59);
  border-radius: calc(var(--cw) * .047);
  padding: calc(var(--cw) * .017);
  background: var(--gold);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .55);
  flex: none;
  cursor: pointer;
  font-family: "Shippori Mincho B1", serif;
}
.jcard.counter { --base: #8c1420; --base-dark: #4a0710; --base-light: #c22a35; --panel: #f7efe0; --ink: #3a0b10; }
.jcard.usable { box-shadow: 0 0 0 3px #fff, 0 0 18px rgba(255, 255, 255, .75), 0 6px 14px rgba(0, 0, 0, .55); }
.jcard.empty {
  background: none; box-shadow: none; cursor: default;
  border: 2px dashed rgba(231, 196, 106, .35);
  display: flex; align-items: center; justify-content: center;
  color: rgba(231, 196, 106, .45); font-size: 14px;
}
.jc-body {
  height: 100%;
  border-radius: calc(var(--cw) * .033);
  padding: calc(var(--cw) * .03);
  display: flex; flex-direction: column; gap: calc(var(--cw) * .02);
  background: radial-gradient(ellipse at 30% 0%, var(--base-light) 0%, var(--base) 45%, var(--base-dark) 100%);
  box-shadow: inset 0 0 0 1px rgba(231, 196, 106, .6);
}
.jc-gold { padding: calc(var(--cw) * .008); background: var(--gold); border-radius: calc(var(--cw) * .02); box-shadow: 0 2px 4px rgba(0, 0, 0, .45); }
.jc-name {
  height: calc(var(--cw) * .13);
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 0 calc(var(--cw) * .02) 0 calc(var(--cw) * .04);
  border-radius: calc(var(--cw) * .013);
  background: linear-gradient(180deg, #fffaf0 0%, var(--panel) 60%, #e3d8b8 100%);
}
.jc-name span { font-weight: 800; font-size: calc(var(--cw) * .075); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 1px; }
.jc-emblem {
  flex: none;
  width: calc(var(--cw) * .09); height: calc(var(--cw) * .09); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, var(--base-light), var(--base-dark));
  box-shadow: 0 0 0 calc(var(--cw) * .008) #e7c46a;
}
.jc-emblem svg { width: 62%; height: 62%; }
.jc-type { text-align: right; font-size: calc(var(--cw) * .042); font-weight: 700; color: #f3dc9a; letter-spacing: 1px; }
.jc-artwrap { flex: 1; display: flex; }
.jc-art { flex: 1; border-radius: calc(var(--cw) * .013); background: #000; box-shadow: inset 0 0 calc(var(--cw) * .06) rgba(255, 255, 255, .08); }
.jc-text {
  height: calc(var(--cw) * .36); overflow: hidden;
  padding: calc(var(--cw) * .025) calc(var(--cw) * .03);
  border-radius: calc(var(--cw) * .013);
  background: linear-gradient(180deg, #fffdf6 0%, var(--panel) 100%);
  color: var(--ink); font-weight: 600; font-size: calc(var(--cw) * .043); line-height: 1.45;
}
/* 拡大表示：カードの大きさはそのまま。効果文の枠を広くし、入りきらない時は字を小さくする（fitText） */
.jcard.zoom { cursor: default; }
.jcard.zoom .jc-artwrap { min-height: 0; }
.jcard.zoom .jc-text { height: calc(var(--cw) * .46); font-size: calc(var(--cw) * .055); }

/* ---------- 演出の層 ---------- */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.fx-discard { position: fixed; left: 0; top: 0; }
.fx-handwrap { position: absolute; left: 50%; top: 30%; width: 66px; transform: translate(-50%, 0); }
.fx-hand { display: block; width: 100%; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .45)); }
.fx-cardplay { position: fixed; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fx-caption {
  font-family: "Shippori Mincho B1", serif; font-weight: 800; font-size: 22px; letter-spacing: 3px;
  color: var(--gold-1); text-shadow: 0 2px 8px #000;
  padding: 6px 20px; border-radius: 999px; background: rgba(0, 0, 0, .7);
}
.fx-cardplay.action .fx-caption { box-shadow: 0 0 0 2px #4fae36, 0 0 18px rgba(79, 174, 54, .7); }
.fx-cardplay.counter .fx-caption { box-shadow: 0 0 0 2px #d0343f, 0 0 18px rgba(208, 52, 63, .7); }
.fx-cardplay .jcard { box-shadow: 0 0 0 3px rgba(255, 243, 196, .9), 0 0 40px rgba(255, 220, 140, .7), 0 20px 40px rgba(0, 0, 0, .7); }

.waits { position: absolute; left: 180px; top: 560px; display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--gold-2); }
.actions { position: absolute; right: 26px; top: 540px; display: flex; gap: 10px; align-items: center; }
.act {
  padding: 12px 20px; border-radius: 10px;
  font-weight: 800; font-size: 19px; letter-spacing: 2px;
  background: var(--gold); color: #3a2604;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
}
.act.win { background: linear-gradient(180deg, #ff5a5a, #b0151f); color: #fff; }
.act.call { background: linear-gradient(180deg, #4aa3ff, #1d5fb3); color: #fff; }
.act.skip { background: rgba(255, 255, 255, .16); color: var(--ink); box-shadow: none; }
.act.on { outline: 3px solid #fff; }
.act.withtile { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; }
.tile.down { filter: brightness(.55) sepia(.4); }
.hint { font-size: 14px; color: var(--gold-1); }
.claimbar {
  position: absolute; left: 50%; top: 520px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(0, 0, 0, .6); border: 1px solid var(--gold-3);
}

.excessbar {
  position: absolute; left: 50%; top: 556px; transform: translateX(-50%);
  padding: 10px 22px; border-radius: 12px;
  font-size: 20px; font-weight: 800; letter-spacing: 1px; white-space: nowrap;
  color: #3a2604; background: var(--gold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
/* ---------- ドラ牌の光 ---------- */
.tile.isdora::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: calc(var(--w) * .13);
  box-shadow: 0 0 0 2px rgba(255, 214, 102, .95), 0 0 calc(var(--w) * .35) rgba(255, 200, 60, .85);
  animation: doraGlow 1.6s ease-in-out infinite;
  pointer-events: none;
}
.tile.isdora::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: calc(var(--w) * .11);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 245, 200, .75) 45%, transparent 60%);
  background-size: 250% 100%;
  animation: doraShine 2.4s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes doraGlow { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes doraShine { 0% { background-position: 130% 0; } 60%, 100% { background-position: -40% 0; } }

/* ---------- カードを使った人の強調 ---------- */
.seatlab.flash, .plate.flash { animation: seatFlash .75s ease-in-out infinite; }
@keyframes seatFlash {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 220, 120, .9), 0 0 16px rgba(255, 200, 80, .7); }
  50% { box-shadow: 0 0 0 4px rgba(255, 240, 180, 1), 0 0 34px rgba(255, 210, 90, 1); }
}

/* ---------- 点数のリール ---------- */
.reel { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; line-height: 1.15em; }
.reel .cell { display: inline-block; height: 1.15em; width: .62em; overflow: hidden; text-align: center; }
.reel .strip { display: block; will-change: transform; }
.reel .strip span { display: block; height: 1.15em; line-height: 1.15em; }
.reel .comma { width: .3em; text-align: center; }
.reel.spinning { color: #ffe9a8; text-shadow: 0 0 8px rgba(255, 210, 100, .8); }

/* ---------- 局の始めのカード購入ボタン ---------- */
.buypanel {
  position: absolute; left: 50%; top: 428px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 5;
}
.buybtn {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 26px 12px 14px; border-radius: 16px;
  background: linear-gradient(180deg, #4a2f0c, #1e1205);
  color: var(--gold-1);
  box-shadow: 0 0 0 3px #e7c46a, 0 0 0 5px #6b4a12, 0 0 26px rgba(255, 210, 100, .7), 0 10px 22px rgba(0, 0, 0, .6);
  animation: buyPulse 1.6s ease-in-out infinite;
}
.buybtn .cardback {
  width: 40px; height: 58px; border-radius: 5px;
  background:
    radial-gradient(circle at 50% 50%, #e7c46a 0 6px, transparent 7px),
    repeating-linear-gradient(45deg, #7a1a22 0 4px, #5a1018 4px 8px);
  box-shadow: 0 0 0 2px #e7c46a, 0 4px 8px rgba(0, 0, 0, .6);
  transform: rotate(-8deg);
}
.buybtn .txt { display: flex; flex-direction: column; align-items: flex-start; }
.buybtn b { font-family: "Shippori Mincho B1", serif; font-size: 26px; letter-spacing: 4px; background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.buybtn small { font-size: 13px; color: #f3dc9a; }
@keyframes buyPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.buyskip { font-size: 12px; color: var(--muted); background: rgba(0, 0, 0, .45); padding: 4px 12px; border-radius: 999px; }

/* ---------- カード発動の演出 ---------- */
.fx-cardscene { position: fixed; inset: 0; pointer-events: auto; }
.fx-dim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .35), rgba(0, 0, 0, .8)); }
.fx-rays {
  position: absolute; left: 50%; top: 50%; width: 160vmax; height: 160vmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 140, .16) 0deg 7deg, transparent 7deg 20deg);
  animation: raysSpin 9s linear infinite;
  mask-image: radial-gradient(circle, #000 0%, transparent 55%);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 55%);
}
.fx-cardscene.counter .fx-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 90, 90, .2) 0deg 7deg, transparent 7deg 20deg); }
@keyframes raysSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.fx-spark {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%;
  background: #fff3c4; box-shadow: 0 0 10px #ffd36a;
  animation: spark 1.4s ease-out infinite;
}
@keyframes spark {
  0% { transform: rotate(var(--a)) translateX(30px) scale(1); opacity: 1; }
  100% { transform: rotate(var(--a)) translateX(var(--d)) scale(.2); opacity: 0; }
}
.fx-cardplay { position: fixed; left: 50%; top: 50%; display: flex; flex-direction: row; align-items: center; gap: 22px; }
.fx-side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 300px; }
.fx-who { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 12px; background: rgba(0, 0, 0, .75); box-shadow: 0 0 0 2px #e7c46a; }
.fx-who .w { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--gold); color: #3a2604; font-weight: 800; font-size: 18px; }
.fx-who .n { font-weight: 800; font-size: 22px; color: #fff; }
.fx-who .pos { font-size: 13px; color: var(--gold-2); }
.fx-skip { font-size: 12px; color: var(--muted); }

/* ---------- 点数を払う・受け取る演出 ---------- */
.fx-pay { position: fixed; width: 0; height: 0; }
.fx-paytext {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  font-weight: 900; font-size: 26px; white-space: nowrap; letter-spacing: 1px;
  text-shadow: 0 2px 6px #000, 0 0 14px currentColor;
  animation: payText 1.8s ease-out forwards;
}
.fx-pay.minus .fx-paytext { color: #ff7a7a; }
.fx-pay.plus .fx-paytext { color: #8dff9c; }
@keyframes payText {
  0% { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
  15% { transform: translate(-50%, -90%) scale(1.15); opacity: 1; }
  70% { transform: translate(-50%, -130%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -170%) scale(.95); opacity: 0; }
}
.fx-coin {
  position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3c4, #e7c46a 45%, #9a6a1a);
  box-shadow: 0 0 6px rgba(255, 210, 100, .9);
}
.fx-pay.minus .fx-coin { animation: coinOut 1.2s ease-out forwards; }
.fx-pay.plus .fx-coin { animation: coinIn 1.2s ease-in forwards; }
@keyframes coinOut {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(.3) rotate(240deg); opacity: 0; filter: brightness(2); }
}
@keyframes coinIn {
  0% { transform: translate(var(--x), var(--y)) scale(.4); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(0, 0) scale(1); opacity: 0; }
}

/* ---------- 結果を1つずつ出す ---------- */
.result.stepped [data-step].pending { visibility: hidden; }
.result.stepped .pop { animation: stepPop .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes stepPop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.reshead { display: flex; align-items: center; justify-content: center; position: relative; }
.voicebtn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 11px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--muted); }
.result .yaku { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.result .yakurow { display: flex; justify-content: space-between; padding: 2px 4px; border-bottom: 1px solid rgba(231, 196, 106, .15); }
.totalline { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.total.big { font-size: 24px; }
.total.limit { background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: "Shippori Mincho B1", serif; letter-spacing: 2px; }
.gain { font-size: 20px; font-weight: 900; color: #8dff9c; text-shadow: 0 0 10px rgba(141, 255, 156, .5); }
.respts { text-align: right; font-weight: 700; }
.tapskip { font-size: 11px; }

/* ---------- 結果・カード ---------- */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .62);
  display: flex; align-items: center; justify-content: center;
  padding: 12px; z-index: 20;
}
.result {
  width: 100%; max-width: 460px; max-height: calc(100dvh - 24px); overflow: auto;
  background: linear-gradient(180deg, #17402c, #0b241a);
  border: 2px solid var(--gold-3); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.result h2 { margin: 0; text-align: center; font-family: "Shippori Mincho B1", serif; font-size: 26px; letter-spacing: 4px; color: var(--gold-1); }
.whand { display: flex; flex-wrap: wrap; gap: 1px; justify-content: center; align-items: flex-end; }
.whand .gap { width: 8px; }
.whand .tile.win { margin-left: 8px; box-shadow: 0 0 0 2px var(--red); }
.yaku { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; font-size: 14px; }
.yaku .h { text-align: right; color: var(--gold-2); }
.total { text-align: center; font-size: 18px; font-weight: 800; color: var(--gold-1); }
.deltas { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; font-size: 14px; font-variant-numeric: tabular-nums; }
.plus { color: #7fe08a; text-align: right; }
.minus { color: #ff8b8b; text-align: right; }
.zero { color: var(--muted); text-align: right; }
.wait-note { text-align: center; color: var(--muted); font-size: 13px; }
.notes { font-size: 13px; color: #ffd38a; display: flex; flex-direction: column; gap: 2px; text-align: center; }
.cardview { display: flex; justify-content: center; }

/* =====================================================================
   明るいゲーム風テーマ（ここから下が上の設定を上書きする）
   ===================================================================== */
:root {
  --pop-pink: #ff4f8b;
  --pop-purple: #7b4dff;
  --pop-orange: #ff9a3c;
  --pop-ink: #2b2140;
  --pop-sub: #7a6f8f;
}
body {
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic UI", system-ui, sans-serif;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .25) 0 2px, transparent 3px) 0 0 / 46px 46px,
    linear-gradient(160deg, #ffb347 0%, #ff5e8a 42%, #7b4dff 100%) fixed;
  color: var(--pop-ink);
}
body.in-game {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, #ffb347 0%, #ff5e8a 42%, #7b4dff 100%) fixed;
}

/* ---- ホーム・ロビー ---- */
.title {
  background: linear-gradient(180deg, #fff 0%, #fff6c9 55%, #ffd36a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #c2185b) drop-shadow(0 6px 10px rgba(80, 0, 60, .35));
  font-size: 44px;
}
.sub { color: #fff; text-shadow: 0 1px 3px rgba(80, 0, 60, .5); }
.panel { background: rgba(255, 255, 255, .92); border: 3px solid #fff; box-shadow: 0 8px 22px rgba(80, 20, 120, .25); }
.panel h2 { color: var(--pop-pink); }
input { background: #f6f1ff; color: var(--pop-ink); border: 2px solid #e2d6ff; }
.btn { background: #fff; color: var(--pop-purple); border: 2px solid #e2d6ff; border-radius: 999px; }
.btn.gold {
  background: linear-gradient(180deg, #ffd54a, #ff9f1a); color: #5a2a00; border: 0;
  box-shadow: 0 4px 0 #c76a00, 0 8px 14px rgba(0, 0, 0, .2);
}
.room-code { color: var(--pop-purple); }
.url { color: var(--pop-sub); }
.seat { background: #f6f1ff; }
.seat .wind { color: var(--pop-pink); }
.seat.empty { color: #b4a9c9; }

/* ---- 卓（少し奥に傾ける） ---- */
.stage { background: none; box-shadow: none; overflow: visible; }
.scene { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 15%; pointer-events: none; }
.plane { position: absolute; inset: 0; transform-origin: 50% 100%; transform: rotateX(17deg); pointer-events: none; }
.plane > * { pointer-events: auto; }
.felt {
  position: absolute; left: 150px; right: 150px; top: 0; bottom: -40px;
  border-radius: 44px;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 55%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 2px, rgba(0, 0, 0, .03) 2px 4px),
    radial-gradient(ellipse at 50% 42%, #3fdc8c 0%, #1fb56d 45%, #12884f 100%);
  box-shadow:
    0 0 0 12px #f7f4ec,
    0 0 0 15px #d8d2c4,
    0 0 0 18px #a9a296,
    0 34px 60px rgba(60, 0, 80, .45),
    inset 0 0 70px rgba(0, 60, 30, .45);
}
.pond { left: 530px; top: 434px; }

/* ---- 全自動卓の中央パネル ---- */
.console {
  position: absolute; left: 520px; top: 180px; width: 240px; height: 240px;
  border-radius: 28px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(145deg, #2c2c36 0%, #0b0b12 100%);
  box-shadow:
    0 0 0 4px #e6e6ec, 0 0 0 7px #8d8d98,
    inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -10px 20px rgba(0, 0, 0, .6),
    0 16px 28px rgba(0, 0, 0, .45);
}
.console .mid { position: absolute; inset: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.console .rd { font-size: 26px; font-weight: 800; color: #fff; text-shadow: 0 0 10px rgba(120, 220, 255, .8); }
.console .sm { font-size: 11px; color: #9fd9ff; white-space: nowrap; }
.console .rest { font-family: "Orbitron", sans-serif; font-size: 15px; color: #ffb020; text-shadow: 0 0 6px rgba(255, 160, 0, .8); }
.console .dice {
  position: absolute; left: 50%; top: 16px; width: 44px; height: 20px; transform: translateX(-50%);
  background:
    radial-gradient(circle at 25% 50%, #e0202a 0 3px, transparent 3.5px),
    radial-gradient(circle at 75% 30%, #222 0 2px, transparent 2.5px),
    radial-gradient(circle at 85% 70%, #222 0 2px, transparent 2.5px),
    linear-gradient(90deg, #fff 0 44%, transparent 44% 56%, #fff 56%);
  border-radius: 4px; opacity: .9;
}
.seatlab.led {
  font-family: "Orbitron", sans-serif; font-weight: 700; font-size: 19px;
  color: #ffb020; text-shadow: 0 0 6px rgba(255, 160, 0, .9);
  background: #140d05; border-radius: 9px; padding: 3px 10px;
  box-shadow: inset 0 0 0 2px #3a2a12, inset 0 0 14px rgba(255, 140, 0, .25);
}
.seatlab.led .w { background: #3a2a12; color: #ffd27a; font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; }
.seatlab.led .w.dealer { background: #ff4f4f; color: #fff; }
.seatlab.led.active { box-shadow: inset 0 0 0 2px #4dff88, 0 0 16px rgba(77, 255, 136, .8); }
.seatlab.bottom { bottom: 10px; }
.reel.spinning { color: #fff36a; text-shadow: 0 0 10px rgba(255, 240, 100, 1); }

/* ---- 名札と、相手のカード（裏向き） ---- */
.plate {
  background: rgba(255, 255, 255, .94); color: var(--pop-ink);
  border: 3px solid #fff; box-shadow: 0 6px 16px rgba(60, 20, 120, .3);
  max-width: 250px;
}
.plate .w { background: var(--pop-purple); color: #fff; }
.plate .w.dealer { background: #ff4f4f; color: #fff; }
.plate.active { border-color: #ffb347; box-shadow: 0 0 0 3px #ffb347, 0 0 18px rgba(255, 179, 71, .8); }
.platecards { display: flex; align-items: center; gap: 10px; width: 100%; }
.plate.right .platecards { flex-direction: row-reverse; }
.cardfan { position: relative; width: 70px; height: 40px; }
.cardbackmini {
  position: absolute; left: calc(50% + var(--i) * 13px - 12px); top: 2px;
  width: 24px; height: 34px; border-radius: 4px;
  transform: rotate(calc(var(--i) * 9deg)); transform-origin: 50% 120%;
  background:
    radial-gradient(circle at 50% 50%, #e7c46a 0 4px, transparent 5px),
    repeating-linear-gradient(45deg, #b3202c 0 3px, #861520 3px 6px);
  box-shadow: 0 0 0 2px #e7c46a, 0 3px 5px rgba(0, 0, 0, .35);
}
.cnum { font-size: 12px; font-weight: 800; color: var(--pop-purple); }

/* ---- 上の情報・右のパネル ---- */
.toprow { display: flex; align-items: center; gap: 10px; }
.topinfo .dora { background: rgba(255, 255, 255, .9); color: var(--pop-sub); border: 2px solid #fff; box-shadow: 0 4px 12px rgba(60, 20, 120, .25); }
.dora .dlabel { font-weight: 800; color: var(--pop-pink); }
.events { color: #fff; background: rgba(43, 33, 64, .55); padding: 3px 14px; border-radius: 999px; }
.soundbtn { font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--pop-purple); box-shadow: 0 3px 0 #d7c8ff; }
.fxpanel { background: rgba(255, 255, 255, .92); border: 3px solid #fff; box-shadow: 0 6px 16px rgba(60, 20, 120, .3); }
.fxpanel-title { color: var(--pop-pink); }
.fxpanel-none { color: #b4a9c9; }
.fxitem { background: #f6f1ff; }
.fxitem .fxname { font-family: "M PLUS Rounded 1c", sans-serif; color: var(--pop-ink); }
.fxitem .fxowner, .fxitem .fxhint { color: var(--pop-sub); }
.jcard.empty { border-color: rgba(255, 255, 255, .7); color: rgba(255, 255, 255, .9); }

/* ---- 手牌の台・ボタン ---- */
.hand { background: linear-gradient(180deg, transparent 0%, transparent 70%, #e0a35c 70%, #a3642c 100%); }
.act {
  font-family: "M PLUS Rounded 1c", sans-serif; border-radius: 999px;
  background: linear-gradient(180deg, #ffe066, #ffa51f); color: #5a2a00;
  box-shadow: 0 5px 0 #c76a00, 0 9px 16px rgba(0, 0, 0, .25);
}
.act:active { transform: translateY(3px); box-shadow: 0 2px 0 #c76a00; }
.act.win { background: linear-gradient(180deg, #ff7a9b, #ff2d55); color: #fff; box-shadow: 0 5px 0 #b0123a, 0 9px 16px rgba(0, 0, 0, .25); }
.act.call { background: linear-gradient(180deg, #6fd2ff, #1e7bff); color: #fff; box-shadow: 0 5px 0 #0d4fb3, 0 9px 16px rgba(0, 0, 0, .25); }
.act.skip { background: #fff; color: var(--pop-sub); box-shadow: 0 5px 0 #d7c8ff; }
.hint { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.claimbar { background: rgba(255, 255, 255, .92); border: 3px solid #fff; box-shadow: 0 8px 20px rgba(60, 20, 120, .35); }
.waits { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.riichiwaits { background: rgba(255, 255, 255, .95); color: var(--pop-ink); box-shadow: 0 0 0 3px var(--pop-pink), 0 8px 18px rgba(0, 0, 0, .3); }
.riichiwaits .sub2 { color: var(--pop-sub); }
.excessbar { background: linear-gradient(180deg, #ffe066, #ffa51f); color: #5a2a00; box-shadow: 0 5px 0 #c76a00; }

/* ---- 結果・各種画面 ---- */
/* 今の画面（カードログ・結果の画面）と同じ、黒紫の漆に金の縁 */
.overlay { background: rgba(8, 4, 16, .55); }
.result {
  background: linear-gradient(160deg, #2a1230, #160a22 60%, #0e0818);
  border: 2px solid #c99a3e; border-radius: 18px; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 235, 180, .3), 0 20px 50px rgba(0, 0, 0, .6);
}
.result h2 { color: #fff3c4; text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 14px rgba(231, 196, 106, .35); font: 800 26px/1.3 "Shippori Mincho B1", serif; letter-spacing: 3px; }
.counterask .ca-lock { padding: 8px 16px; border-radius: 10px; border: 1px solid rgba(201, 154, 62, .7); background: rgba(80, 30, 110, .45);
  color: #ffd98a; font: 800 16px/1.4 "Shippori Mincho B1", serif; text-align: center; }
.result .total { color: #fff; }
.result .yaku .h { color: #ffe27a; }
.result .yakurow { border-bottom-color: rgba(255, 255, 255, .2); }
.result .wait-note { color: rgba(255, 255, 255, .85); }
.result .gain { color: #8dffad; }
.result .minus { color: #ffc2d0; }

/* ---- カード発動：全員の OK 待ち ---- */
.fx-ok { min-height: 54px; display: flex; align-items: center; }
.fx-okbtn {
  font-family: "M PLUS Rounded 1c", sans-serif; font-size: 26px; font-weight: 800; letter-spacing: 4px;
  padding: 10px 48px; border-radius: 999px;
  background: linear-gradient(180deg, #ffe066, #ffa51f); color: #5a2a00;
  box-shadow: 0 6px 0 #c76a00, 0 10px 20px rgba(0, 0, 0, .35);
  animation: buyPulse 1.2s ease-in-out infinite;
}
.fx-okbtn:disabled { animation: none; opacity: .7; }
.fx-waiting { font-size: 14px; color: #fff; background: rgba(0, 0, 0, .55); padding: 8px 16px; border-radius: 999px; }

/* ---- 点棒 ---- */
.tenbou {
  position: absolute; left: -34px; top: -4px; width: 68px; height: 9px; border-radius: 5px;
  background: #fbfaf6;
  box-shadow: 0 0 0 1px #b9b4a8, 0 3px 5px rgba(0, 0, 0, .45);
}
.tenbou.t1000 { background: radial-gradient(circle at 50% 50%, #e0202a 0 2.6px, transparent 3.2px), #fbfaf6; }
.tenbou.t5000 {
  background:
    radial-gradient(circle at 50% 50%, #e0202a 0 2.6px, transparent 3.2px),
    radial-gradient(circle at 22% 50%, #222 0 1.6px, transparent 2px),
    radial-gradient(circle at 78% 50%, #222 0 1.6px, transparent 2px), #fbfaf6;
}
.tenbou.t10000 {
  background:
    radial-gradient(circle at 50% 50%, #e0202a 0 2.6px, transparent 3.2px),
    radial-gradient(circle at 38% 30%, #e0202a 0 1.4px, transparent 1.8px),
    radial-gradient(circle at 62% 30%, #e0202a 0 1.4px, transparent 1.8px),
    radial-gradient(circle at 38% 70%, #e0202a 0 1.4px, transparent 1.8px),
    radial-gradient(circle at 62% 70%, #e0202a 0 1.4px, transparent 1.8px),
    radial-gradient(circle at 20% 50%, #222 0 1.4px, transparent 1.8px),
    radial-gradient(circle at 80% 50%, #222 0 1.4px, transparent 1.8px), #fbfaf6;
}
.tenbou.t100 { background: radial-gradient(circle, #222 0 1.3px, transparent 1.7px) 4px 0 / 7.5px 9px repeat-x, #fbfaf6; }
.fx-pay.minus .tenbou { animation: tenbouOut 1.3s cubic-bezier(.4, .1, .4, 1) forwards; }
.fx-pay.plus .tenbou { animation: tenbouIn 1.3s cubic-bezier(.4, .1, .4, 1) forwards; }
@keyframes tenbouOut {
  0% { transform: translate(0, 0) rotate(0) scale(1.15); opacity: 0; }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.75); opacity: 0; }
}
@keyframes tenbouIn {
  0% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.75); opacity: 0; }
  20% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(0, 0) rotate(0) scale(1.1); opacity: 0; }
}
.seatlab.led .reel .cell { width: .8em; }
.seatlab.led .reel .comma { width: .32em; }
.cardcol { top: 108px; }
.fxpanel { top: 124px; }

/* ---------- ツモ・ロン・ポン・カンの発声 ---------- */
.fx-shout { position: fixed; width: 0; height: 0; z-index: 35; }
.fx-shout .burst {
  position: absolute; left: 0; top: 0; width: 380px; height: 380px; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 240, 160, .55) 0deg 8deg, transparent 8deg 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%); mask-image: radial-gradient(circle, #000 0%, transparent 62%);
  animation: burstIn .5s ease-out forwards, raysSpin 6s linear infinite;
}
.fx-shout.ron .burst { background: repeating-conic-gradient(from 0deg, rgba(255, 120, 140, .6) 0deg 8deg, transparent 8deg 22deg); }
.fx-shout.call .burst { width: 220px; height: 220px; background: repeating-conic-gradient(from 0deg, rgba(140, 220, 255, .55) 0deg 8deg, transparent 8deg 22deg); }
.fx-shout.kan .burst { background: repeating-conic-gradient(from 0deg, rgba(200, 150, 255, .6) 0deg 8deg, transparent 8deg 22deg); }
.fx-shout.nuki .burst { background: repeating-conic-gradient(from 0deg, rgba(150, 255, 170, .55) 0deg 8deg, transparent 8deg 22deg); }
@keyframes burstIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.2); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.fx-shout .word {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; font-size: 96px; letter-spacing: 6px; white-space: nowrap;
  color: #fff; -webkit-text-stroke: 4px #c2185b; paint-order: stroke fill;
  text-shadow: 0 6px 0 #7a0c3a, 0 0 30px rgba(255, 220, 120, .9);
  animation: wordPop .55s cubic-bezier(.2, 1.6, .4, 1) forwards;
}
.fx-shout.win:not(.ron) .word { -webkit-text-stroke-color: #e07800; text-shadow: 0 6px 0 #8a4400, 0 0 30px rgba(255, 220, 120, 1); }
.fx-shout.call .word { font-size: 64px; -webkit-text-stroke: 3px #1e5fd6; text-shadow: 0 5px 0 #0d3a8a, 0 0 22px rgba(140, 220, 255, .9); }
.fx-shout.kan .word { -webkit-text-stroke-color: #6a2bd9; text-shadow: 0 5px 0 #3b1180, 0 0 22px rgba(200, 150, 255, .9); }
.fx-shout.nuki .word { font-size: 52px; -webkit-text-stroke-color: #1a8a3a; text-shadow: 0 5px 0 #0d4a1f, 0 0 22px rgba(150, 255, 170, .9); }
@keyframes wordPop {
  0% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(.9); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.fx-wintile { position: absolute; left: 0; top: 70px; transform: translate(-50%, 0); animation: winTile .8s ease-out .3s both; }
.fx-wintile::before { box-shadow: 0 0 0 3px #fff36a, 0 0 26px #ffd36a !important; }
@keyframes winTile { from { transform: translate(-50%, 30px) scale(.4); opacity: 0; } to { transform: translate(-50%, 0) scale(1.2); opacity: 1; } }
.fx-flytile { position: fixed; z-index: 36; box-shadow: 0 0 0 3px #fff36a, 0 0 22px #ffd36a, 0 10px 18px rgba(0, 0, 0, .5) !important; }

/* ---------- カンドラ ---------- */
.tile.flipin { animation: doraFlipIn .9s ease-out both; }
@keyframes doraFlipIn {
  0% { transform: rotateY(180deg) scale(1.2); filter: brightness(.3); }
  50% { transform: rotateY(90deg) scale(1.5); }
  80% { transform: rotateY(0deg) scale(1.3); box-shadow: 0 0 0 3px #fff36a, 0 0 24px #ffd36a; }
  100% { transform: rotateY(0deg) scale(1); }
}
.fx-doratag {
  position: fixed; transform: translate(-50%, 0); z-index: 35;
  font-weight: 800; font-size: 22px; color: #fff; letter-spacing: 2px;
  background: linear-gradient(180deg, #b26bff, #6a2bd9); padding: 6px 18px; border-radius: 999px;
  box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(60, 0, 120, .5);
  animation: wordPop .5s cubic-bezier(.2, 1.6, .4, 1) both;
}

/* ---------- サイコロ ---------- */
.fx-dice { position: fixed; transform: translate(-50%, -50%); z-index: 35; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fx-dice .row { display: flex; gap: 22px; }
.fx-die {
  width: 70px; height: 70px; border-radius: 14px; padding: 9px;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); place-items: center;
  background: linear-gradient(145deg, #ffffff, #e9e4da);
  box-shadow: inset 0 -4px 0 #cfc8b8, 0 10px 18px rgba(0, 0, 0, .45);
}
.fx-die i { width: 12px; height: 12px; border-radius: 50%; }
.fx-die i.on { background: radial-gradient(circle at 35% 35%, #555, #111); }
.fx-die i.on.red { width: 18px; height: 18px; background: radial-gradient(circle at 35% 35%, #ff6b6b, #c0121f); }
.fx-dice.stop .fx-die { animation: dieStop .35s ease-out; }
@keyframes dieStop { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
.fx-dice .label { min-height: 40px; font-weight: 800; font-size: 26px; color: #fff; padding: 4px 20px; border-radius: 999px; }
.fx-dice .label.hit { background: linear-gradient(180deg, #ffe066, #ff7a1f); color: #5a2a00; box-shadow: 0 0 0 3px #fff, 0 0 30px rgba(255, 220, 100, 1); animation: wordPop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.fx-dice .label.miss { background: rgba(43, 33, 64, .75); }

/* ---------- カードを引く ---------- */
.fx-carddraw { position: fixed; transform: translate(-50%, -50%); z-index: 35; display: flex; flex-direction: column; align-items: center; gap: 12px; perspective: 900px; }
.fx-carddraw .rays {
  position: absolute; left: 50%; top: 45%; width: 520px; height: 520px; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 230, 150, .5) 0deg 7deg, transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 60%); mask-image: radial-gradient(circle, #000 0%, transparent 60%);
  animation: raysSpin 7s linear infinite; z-index: -1;
}
.fx-carddraw .flipper { position: relative; width: var(--cw); height: calc(var(--cw) * 86 / 59); transform-style: preserve-3d; }
.fx-carddraw .cardface { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fx-carddraw .cardface.front { transform: rotateY(180deg); height: auto; }
.fx-carddraw .cardface.back {
  border-radius: 12px;
  background: radial-gradient(circle at 50% 50%, #e7c46a 0 18px, transparent 20px), repeating-linear-gradient(45deg, #b3202c 0 8px, #861520 8px 16px);
  box-shadow: 0 0 0 4px #e7c46a, 0 12px 24px rgba(0, 0, 0, .5);
}
.fx-carddraw .tag { font-weight: 800; font-size: 24px; color: #fff; background: linear-gradient(180deg, #ff7a9b, #ff2d55); padding: 6px 22px; border-radius: 999px; box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(0, 0, 0, .4); animation: wordPop .5s cubic-bezier(.2, 1.6, .4, 1) .9s both; }
.fx-cardback {
  position: fixed; left: 0; top: 0; width: 40px; height: 58px; border-radius: 6px; z-index: 35;
  background: radial-gradient(circle at 50% 50%, #e7c46a 0 6px, transparent 7px), repeating-linear-gradient(45deg, #b3202c 0 4px, #861520 4px 8px);
  box-shadow: 0 0 0 2px #e7c46a, 0 0 20px rgba(255, 220, 120, .9);
}

/* ---------- 和了れなかった当たり牌の印 ---------- */
.tile.noted { cursor: pointer; }
.tile.noted::after {
  content: "!"; position: absolute; right: -6px; top: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: #ff2d55; color: #fff; font: 800 11px/16px "M PLUS Rounded 1c", sans-serif; text-align: center;
  box-shadow: 0 0 0 2px #fff, 0 0 10px #ff2d55; animation: notePulse 1.2s ease-in-out infinite; z-index: 2;
}
.tile.noted { box-shadow: 0 0 0 2px #ff2d55, 0 0 12px rgba(255, 45, 85, .8) !important; }
@keyframes notePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.noteview .notetile { display: flex; justify-content: center; }
.noteview .noteline { background: rgba(255, 255, 255, .15); border-radius: 10px; padding: 8px 12px; font-size: 14px; line-height: 1.5; }

/* ---------- 1万点を切ったら赤く点滅 ---------- */
.seatlab.led.danger { color: #ff4d4d; text-shadow: 0 0 8px rgba(255, 40, 40, 1); animation: dangerBlink .8s steps(2, jump-none) infinite; }
.seatlab.led.danger .reel.spinning { color: #ff8080; }
.plate.danger { animation: dangerPlate .8s ease-in-out infinite; }
@keyframes dangerBlink {
  0%, 100% { box-shadow: inset 0 0 0 2px #ff3030, 0 0 18px rgba(255, 40, 40, .9); background: #3a0606; }
  50% { box-shadow: inset 0 0 0 2px #5a1010, 0 0 0 rgba(255, 40, 40, 0); background: #140505; }
}
@keyframes dangerPlate {
  0%, 100% { box-shadow: 0 0 0 3px #ff3030, 0 0 22px rgba(255, 40, 40, .9); }
  50% { box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(60, 20, 120, .3); }
}
/* 位置をずらさずに飛び出すアニメーション（ラベル用） */
@keyframes popIn {
  0% { transform: scale(2.4); opacity: 0; }
  60% { transform: scale(.92); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes popInX {
  0% { transform: translate(-50%, 0) scale(2.4); opacity: 0; }
  60% { transform: translate(-50%, 0) scale(.92); opacity: 1; }
  100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}
.fx-dice .label.hit { animation: popIn .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.fx-carddraw .tag { animation: popIn .5s cubic-bezier(.2, 1.6, .4, 1) .9s both; }
.fx-doratag { animation: popInX .5s cubic-bezier(.2, 1.6, .4, 1) both; }

/* ---------- 中央のツモ・ロンボタン ---------- */
.bigwin { position: absolute; left: 50%; top: 452px; transform: translateX(-50%); z-index: 8; display: flex; justify-content: center; }
.bigrays {
  position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 240, 150, .6) 0deg 8deg, transparent 8deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 60%); mask-image: radial-gradient(circle, #000 0%, transparent 60%);
  animation: raysSpin 5s linear infinite; pointer-events: none;
}
.bigbtns { position: relative; display: flex; gap: 18px; animation: bigIn .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes bigIn { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bigbtn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; font-size: 44px; letter-spacing: 8px;
  padding: 14px 40px; border-radius: 999px; color: #fff;
  -webkit-text-stroke: 2px rgba(0, 0, 0, .25);
  animation: bigPulse 1s ease-in-out infinite;
}
.bigbtn.tsumo { background: linear-gradient(180deg, #ffe066 0%, #ff9f1a 55%, #e06a00 100%); box-shadow: 0 0 0 5px #fff, 0 7px 0 #a84e00, 0 0 40px rgba(255, 200, 60, 1); }
.bigbtn.ron { background: linear-gradient(180deg, #ff8fae 0%, #ff2d55 55%, #c0103a 100%); box-shadow: 0 0 0 5px #fff, 0 7px 0 #8a0a2a, 0 0 40px rgba(255, 60, 100, 1); }
@keyframes bigPulse { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.07); filter: brightness(1.15); } }
.riichiwaits.plain { box-shadow: 0 0 0 3px var(--pop-purple), 0 8px 18px rgba(0, 0, 0, .3); }

/* ---------- 雷・強打・リーチ ---------- */
.fx-bolt { position: fixed; width: 0; height: 0; z-index: 37; }
.fx-bolt svg { position: absolute; left: -60px; bottom: -20px; width: 120px; overflow: visible; animation: boltFlicker .55s steps(4) forwards; }
.fx-bolt .glow { fill: none; stroke: rgba(160, 200, 255, .9); stroke-width: 14; stroke-linejoin: round; filter: blur(4px); }
.fx-bolt .core { fill: none; stroke: #fff; stroke-width: 4; stroke-linejoin: round; }
@keyframes boltFlicker { 0% { opacity: 1; } 30% { opacity: .3; } 45% { opacity: 1; } 100% { opacity: 0; } }
.fx-bolt .impact {
  position: absolute; left: -50px; top: -50px; width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(160, 200, 255, .9) 30%, transparent 70%);
  animation: impactBoom .6s ease-out forwards;
}
@keyframes impactBoom { from { transform: scale(.2); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.fx-flash { position: fixed; inset: 0; background: #fff; z-index: 36; animation: flash .45s ease-out forwards; pointer-events: none; }
@keyframes flash { 0% { opacity: .8; } 100% { opacity: 0; } }
.fx-impact {
  position: fixed; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; z-index: 34;
  border: 6px solid rgba(255, 240, 160, .95); box-shadow: 0 0 24px rgba(255, 220, 120, .9);
  animation: impactRing .55s ease-out forwards;
}
@keyframes impactRing { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.fx-shout.riichi .burst { width: 300px; height: 300px; background: repeating-conic-gradient(from 0deg, rgba(255, 90, 90, .55) 0deg 8deg, transparent 8deg 22deg); }
.fx-shout.riichi .word { font-size: 80px; -webkit-text-stroke: 4px #d0103a; text-shadow: 0 6px 0 #7a0020, 0 0 30px rgba(255, 120, 120, 1); }

/* ---------- カンドラをめくる指 ---------- */
.fx-flipfinger { position: fixed; width: 54px; z-index: 36; transform-origin: 50% 100%; }
.fx-flipfinger svg { width: 100%; display: block; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .45)); }

/* ---------- 遊戯王風のドロー ---------- */
.fx-deck { position: fixed; width: 92px; height: 134px; transform: translate(-50%, -50%); z-index: 34; }
.fx-deck i {
  position: absolute; inset: 0; border-radius: 8px;
  transform: translate(calc(var(--k) * -2px), calc(var(--k) * -2px));
  background: radial-gradient(circle at 50% 50%, #e7c46a 0 12px, transparent 14px), repeating-linear-gradient(45deg, #b3202c 0 6px, #861520 6px 12px);
  box-shadow: 0 0 0 3px #e7c46a, 2px 3px 4px rgba(0, 0, 0, .45);
}
.fx-deck.small { width: 46px; height: 67px; }
.fx-drawword {
  position: fixed; transform: translate(-50%, -50%) skewX(-12deg); z-index: 36;
  font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; font-size: 84px; letter-spacing: 6px; white-space: nowrap;
  color: #fff; -webkit-text-stroke: 4px #1e3fd6; paint-order: stroke fill;
  text-shadow: 0 6px 0 #0d1f80, 0 0 34px rgba(120, 200, 255, 1);
  animation: drawWord .5s cubic-bezier(.2, 1.6, .4, 1) both;
}
.fx-drawword::before {
  content: ""; position: absolute; left: -120px; right: -120px; top: 50%; height: 70%; transform: translateY(-50%); z-index: -1;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .7) 0 30px, transparent 30px 46px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  animation: speedLines .4s linear infinite;
}
.fx-drawword.small { font-size: 30px; -webkit-text-stroke-width: 2px; }
@keyframes drawWord { from { transform: translate(-50%, -50%) skewX(-12deg) translateX(-200px); opacity: 0; } to { transform: translate(-50%, -50%) skewX(-12deg); opacity: 1; } }
@keyframes speedLines { from { background-position: 0 0; } to { background-position: -46px 0; } }

/* ---------- この局のカードログ ---------- */
.logbtn { margin-top: 2px; font-size: 12px; font-weight: 800; padding: 7px 8px; border-radius: 999px; background: linear-gradient(180deg, #8f6bff, #6a3fe0); color: #fff; box-shadow: 0 3px 0 #4a2aa8; }
.cardlog { max-width: 520px; gap: 6px; }
.logrow { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .15); color: #fff; text-align: left; }
.logrow .num { width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--pop-purple); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.logrow .w { font-weight: 800; color: #ffe27a; }
.logrow .who { flex: 1; font-weight: 800; }
.logrow .cname { padding: 2px 10px; border-radius: 999px; font-weight: 800; font-size: 13px; }
.logrow .cname.action { background: #2f9a3a; }
.logrow .cname.counter { background: #c41f30; }
.logrow .status { font-size: 12px; color: #8dffad; }
.logrow .status.off { color: #ffc2d0; text-decoration: line-through; }
.logtext { font-size: 13px; line-height: 1.6; background: rgba(255, 255, 255, .92); color: var(--pop-ink); padding: 8px 12px; border-radius: 10px; }

/* ---------- 供託の点棒 ---------- */
.kyosticks { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.kyosticks .tenbou { position: static; width: 54px; height: 7px; }
.bigwin { top: 428px; }
.riichiwaits { top: 548px; padding: 6px 14px 9px; }

/* ---------- iPhone 向け ---------- */
#safeprobe {
  position: fixed; left: 0; top: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; }
input { -webkit-user-select: text; user-select: text; }
.screen { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }

/* ---------- カードのイラスト ---------- */
.jc-art.has-art { background-color: #000; background-size: cover; background-position: center; }

/* 苦渋の選択：5枚から1枚選ぶ */
.peekrow { display: flex; gap: 14px; justify-content: center; margin: 18px 0 6px; }
.peektile { cursor: pointer; transition: transform .15s; }
.peektile:hover { transform: translateY(-10px); filter: drop-shadow(0 0 10px #ffd84a); }

/* 風神の一吹き：入れ替える牌を選ぶ */
.swapbar { top: 470px; display: flex; align-items: center; gap: 16px; pointer-events: auto; z-index: 5; }
.swapbar .btn { font-size: 18px; padding: 6px 18px; }

/* 狐の品定め：山に戻す順番 */
.foxslot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.foxlabel { font-size: 14px; font-weight: 800; color: #fff3c4; }
.swapbar .tile { pointer-events: none; }

/* アクション兼カウンターのカード（月隠れの書）：緑と赤の2色 */
.jcard.dual .jc-body { background: linear-gradient(to bottom right, #1f8a4c 0%, #145c32 49.7%, #8c1420 50.3%, #c22a35 100%); }
.jcard.dual .jc-emblem { background: linear-gradient(135deg, #1f8a4c 0%, #145c32 49%, #8c1420 51%, #c22a35 100%); }
.jc-type .tl-action { color: #9ff0b8; }
.jc-type .tl-counter { color: #ffb3b8; }

/* 反魂の術：河の牌を選ぶ */
.reborn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0; max-width: 560px; }
.reborn-owner { font-weight: 800; color: #fff3c4; min-width: 70px; }

/* 神隠し：鳴いた牌の組 */
.evac-meld { display: inline-flex; gap: 1px; padding: 2px 4px; margin-left: 6px; border-radius: 6px; cursor: pointer; background: rgba(255, 255, 255, .15); }
.evac-meld:hover { background: rgba(255, 216, 74, .45); }
.peekrow .tile.sz-hand { --w: 46px; }
/* 御用改め：13枚並ぶので折り返して全部見せる */
.peekbox { max-width: min(860px, 92%); }
.peekrow { flex-wrap: wrap; gap: 8px; }

/* 禁止令・宝印：牌の種類を選ぶ */
.kindgrid { max-width: 520px; gap: 6px; }
.row.wrap { flex-wrap: wrap; justify-content: center; max-width: 600px; }
/* 自分にだけ見えるメモ（拷問の答え） */
.fxsecret { font-size: 12px; font-weight: 700; color: #5a2a00; background: #fff3c4; border-radius: 8px; padding: 4px 6px; margin: 4px 0; }

/* サルベージ：選んだ捨て牌 */
.peektile.picked { transform: translateY(-8px); filter: drop-shadow(0 0 8px #ffd84a); }

/* ---------- 自分の手札のカード：自分の前に重ねて扇形に並べる（シャドウバースの手札のような形） ---------- */
.myhandcards { position: absolute; left: 22px; top: 452px; display: flex; align-items: flex-end; z-index: 4; padding-top: 18px; }
.handslot { transform: translateY(var(--drop)) rotate(var(--rot)); transform-origin: 50% 130%; transition: transform .15s ease-out; }
.handslot + .handslot { margin-left: calc(var(--cw, 84px) * -.42); }
.handslot .jcard { --cw: 84px; box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.handslot:hover { transform: translateY(calc(var(--drop) - 16px)) rotate(var(--rot)); z-index: 2; }
.handslot.opened { visibility: hidden; }
/* 手札から開いたカード：盤面が透けて見えるように、背景は薄くし、枠は付けない */
.overlay.cardpop { background: rgba(0, 0, 0, .38); }
.overlay.cardpop .result { background: none; border: none; box-shadow: none; overflow: visible; }
.overlay.cardpop .result .wait-note { text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }

/* 手札：1回押すと少し大きくなる */
.handslot.lifted { transform: translateY(-34px) scale(1.75); transform-origin: 0 100%; z-index: 10; }
.handslot.lifted .jcard { box-shadow: 0 0 0 3px #fff, 0 10px 26px rgba(0, 0, 0, .55); }
.liftbar { position: absolute; left: 210px; top: 500px; z-index: 11; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.liftbar .btn { font-size: 18px; padding: 8px 26px; }
.liftnote, .lifthint { font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.lifthint { font-size: 12px; opacity: .85; }
/* 画面いっぱいのカード：どこを押しても戻る */
.overlay.cardzoom { background: rgba(0, 0, 0, .78); flex-direction: column; gap: 10px; cursor: zoom-out; z-index: 40; }
.overlay.cardzoom .jcard { cursor: zoom-out; }
.zoomcap { color: #fff; font-weight: 800; font-size: 16px; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
/* 発動中のカード：左＝上家、右＝下家、右下＝自分 */
.activecol { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 4px; }
.activecol.left { left: 16px; top: 128px; align-items: flex-start; }
.activecol.right { right: 16px; top: 128px; align-items: flex-end; }
.activecol.mine { right: 16px; top: 604px; align-items: flex-end; }
.activetitle { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: #fff; background: rgba(0, 0, 0, .45); border-radius: 999px; padding: 1px 10px; }
.activecards { display: flex; flex-direction: column; }
.activecol.mine .activecards { flex-direction: row; gap: 4px; }
.activecol.left .activecard + .activecard, .activecol.right .activecard + .activecard { margin-top: -46px; }
.activecard { position: relative; }
.activecard .jcard { box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.activecard:hover { z-index: 2; }
.activedetail { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); white-space: nowrap; font-size: 10px; font-weight: 800; color: #fff; background: rgba(140, 20, 32, .92); border-radius: 999px; padding: 0 6px; }
.logbtn.mini { font-size: 12px; padding: 4px 10px; }

/* 手札：引いている途中のカードは届くまで隠す */
.handslot.incoming { visibility: hidden; }
/* 画面いっぱいのカードの下の「使う」 */
.zoombar { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.zoombar .btn.big, .resfoot .btn.big { font-size: 22px; padding: 10px 46px; }
/* 山から引く牌 */
.fx-drawtile { position: fixed; left: 0; top: 0; z-index: 32; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .4)); }
/* 手の大きさ（リアルな手） */
.fx-handwrap { width: 78px; top: 22%; }
/* 向聴数 */
.shanten {
  position: absolute; left: 206px; top: 562px; z-index: 3;
  font-weight: 800; font-size: 15px; letter-spacing: 1px; padding: 3px 14px; border-radius: 999px;
  color: #fff; background: rgba(20, 30, 60, .78); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7), 0 4px 10px rgba(0, 0, 0, .3);
}
.shanten.ready { background: linear-gradient(180deg, #ff6b8a, #e8204b); box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(255, 80, 120, .7); }
.waits { left: 340px; top: 564px; }

/* ---------- 和了・流局の結果（画面いっぱい、よくある麻雀アプリの形） ---------- */
.overlay.fullres { padding: 0; background: radial-gradient(ellipse at 50% 0%, #1d2f63 0%, #0c1636 55%, #060b1e 100%); }
.result.fullres {
  width: 100%; max-width: none; height: 100%; max-height: none; border: none; border-radius: 0; box-shadow: none;
  background:
    repeating-linear-gradient(45deg, rgba(231, 196, 106, .035) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg, rgba(231, 196, 106, .035) 0 2px, transparent 2px 22px);
  color: #f4ecd6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: max(18px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  overflow: auto;
}
.fullres .reshead { display: flex; align-items: baseline; gap: 18px; }
.fullres .restitle {
  font-family: "Shippori Mincho B1", serif; font-weight: 800; font-size: 64px; letter-spacing: 12px; line-height: 1;
  background: linear-gradient(180deg, #fff6d0 0%, #f2cf6d 45%, #b8862b 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6));
}
.fullres .restitle.ron { background: linear-gradient(180deg, #ffe0e6 0%, #ff6b86 50%, #c4163a 100%); -webkit-background-clip: text; background-clip: text; }
.fullres .restitle.draw { background: linear-gradient(180deg, #e9f1ff, #8fb0e8); -webkit-background-clip: text; background-clip: text; }
.fullres .resfrom { font-size: 15px; color: #c8d3ee; }
.fullres .winhead { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fullres .winname { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 800; }
.fullres .wwind { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #fff6d0, #d9a93e); color: #3a2604; font-family: "Shippori Mincho B1", serif; }
.fullres .wdealer { font-size: 14px; padding: 2px 10px; border-radius: 6px; background: #c4163a; color: #fff; }
.fullres .whand { padding: 14px 18px 10px; border-radius: 14px; background: linear-gradient(180deg, #0f6b45, #0a4a30);
  box-shadow: inset 0 0 0 2px rgba(231, 196, 106, .55), 0 10px 26px rgba(0, 0, 0, .5); }
.sz-big { --w: 44px; }
.fullres .whand .gap { width: 14px; }
.fullres .whand .tile.win { margin-left: 14px; box-shadow: 0 0 0 3px #ff4d6d, 0 0 16px rgba(255, 77, 109, .8); }
.fullres .resmid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 300px); gap: 28px; align-items: center; width: min(760px, 100%); }
.fullres .yaku { display: flex; flex-direction: column; gap: 6px; }
.fullres .yakurow { display: flex; align-items: baseline; gap: 8px; font-size: 20px; font-weight: 700; border: none; padding: 0; }
.fullres .yakurow .dots { flex: 1; border-bottom: 2px dotted rgba(231, 196, 106, .45); transform: translateY(-5px); }
.fullres .yakurow .h { color: #f2cf6d; font-variant-numeric: tabular-nums; }
.fullres .totalline { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px; border-radius: 14px;
  background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 2px rgba(231, 196, 106, .4); }
.fullres .fuhan { font-size: 18px; color: #c8d3ee; font-weight: 700; }
.fullres .limitname { font-family: "Shippori Mincho B1", serif; font-size: 34px; font-weight: 800; letter-spacing: 6px;
  background: linear-gradient(180deg, #fff6d0, #f2cf6d 50%, #b8862b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fullres .gain { font-family: "Orbitron", sans-serif; font-weight: 900; font-size: 52px; line-height: 1.1; color: #fff3c4;
  text-shadow: 0 0 18px rgba(242, 207, 109, .6); font-variant-numeric: tabular-nums; }
.fullres .gainunit { font-size: 16px; color: #f2cf6d; font-weight: 800; }
.fullres .drawnote { font-size: 26px; font-weight: 800; color: #e9f1ff; }
.fullres .deltas { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 14px; font-size: 16px; }
.fullres .dcell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 10px; border-radius: 12px;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.fullres .dcell.me { box-shadow: inset 0 0 0 2px #f2cf6d; }
.fullres .dname { font-weight: 700; color: #dfe6f7; }
.fullres .dval { font-family: "Orbitron", sans-serif; font-weight: 900; font-size: 24px; }
.fullres .dval.plus { color: #4fe39a; }
.fullres .dval.minus { color: #ff6b86; }
.fullres .dval.zero { color: #9aa6c2; }
.fullres .respts { font-family: "Orbitron", sans-serif; font-size: 18px; color: #fff; }
.fullres .resfoot { min-height: 54px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 760px), (max-height: 520px) {
  .fullres .restitle { font-size: 44px; }
  .sz-big { --w: 30px; }
  .fullres .resmid { grid-template-columns: 1fr; gap: 12px; }
  .fullres .gain { font-size: 38px; }
  .fullres .result, .result.fullres { gap: 10px; justify-content: flex-start; }
}

/* ---------- 卓：立体的な全自動卓（紺のマットと木の縁、奥に傾けて見下ろす角度） ---------- */
body.in-game { background: radial-gradient(ellipse at 50% 30%, #22305a 0%, #0d1530 58%, #05080f 100%); }
.scene { perspective: 1050px; perspective-origin: 50% -10%; }
.plane { transform: rotateX(30deg); transform-origin: 50% 100%; }
.felt {
  border-radius: 26px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 980 760' preserveAspectRatio='none'><g stroke='rgba(190,215,255,.22)' stroke-width='2' fill='none'><line x1='0' y1='0' x2='252' y2='100'/><line x1='980' y1='0' x2='728' y2='100'/><line x1='0' y1='760' x2='252' y2='500'/><line x1='980' y1='760' x2='728' y2='500'/><rect x='252' y='100' width='476' height='400' rx='4' stroke-opacity='.6'/><rect x='60' y='40' width='860' height='680' rx='18'/></g></svg>") 0 0 / 100% 100% no-repeat,
    radial-gradient(ellipse at 50% 42%, rgba(130, 170, 255, .22) 0%, rgba(130, 170, 255, 0) 58%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 2px, rgba(0, 0, 0, .035) 2px 4px),
    linear-gradient(180deg, #284a8c 0%, #1a3770 55%, #112757 100%);
  box-shadow:
    0 0 0 12px #4a2c17,
    0 0 0 16px #7a4c2a,
    0 0 0 19px #2a170a,
    0 46px 80px rgba(0, 0, 0, .75),
    inset 0 0 0 2px rgba(255, 255, 255, .06),
    inset 0 0 140px rgba(0, 0, 20, .6);
}
.console {
  border-radius: 22px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(145deg, #3a3f4c 0%, #1a1d26 55%, #0c0e14 100%);
  box-shadow:
    0 0 0 3px #9aa0ad, 0 0 0 6px #4b505c,
    inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -12px 22px rgba(0, 0, 0, .65),
    0 22px 34px rgba(0, 0, 0, .6);
}
/* 牌の背（全自動卓でよくある山吹色） */
.tile.back {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, #ffb24f 0%, #2a6fc8 58%, #cf6f17 100%);
}

/* ---------- カード発動の前触れ ---------- */
.fx-intro {
  position: absolute; top: 42%; display: flex; align-items: center; gap: 12px;
  padding: 12px 34px; font-weight: 800; color: #fff; white-space: nowrap;
  background: linear-gradient(90deg, rgba(20, 120, 70, 0), rgba(20, 120, 70, .95) 18%, rgba(20, 120, 70, .95) 82%, rgba(20, 120, 70, 0));
  text-shadow: 0 2px 6px rgba(0, 0, 0, .7);
}
.fx-intro.counter { background: linear-gradient(90deg, rgba(150, 20, 40, 0), rgba(150, 20, 40, .95) 18%, rgba(150, 20, 40, .95) 82%, rgba(150, 20, 40, 0)); }
.fx-intro .w { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #fff6d0, #d9a93e); color: #3a2604; font-size: 20px; }
.fx-intro .n { font-size: 22px; }
.fx-intro .t { font-size: 30px; letter-spacing: 4px; color: #fff3c4; }
.fx-intro.from2 { left: 0; animation: introLeft .9s cubic-bezier(.2, .8, .2, 1) both; }
.fx-intro.from1 { right: 0; animation: introRight .9s cubic-bezier(.2, .8, .2, 1) both; }
.fx-intro.from0 { left: 50%; top: auto; bottom: 18%; animation: introBottom .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes introLeft { 0% { transform: translateX(-100%); opacity: 0; } 35% { transform: translateX(8%); opacity: 1; } 100% { transform: translateX(10%); opacity: 1; } }
@keyframes introRight { 0% { transform: translateX(100%); opacity: 0; } 35% { transform: translateX(-8%); opacity: 1; } 100% { transform: translateX(-10%); opacity: 1; } }
@keyframes introBottom { 0% { transform: translate(-50%, 120%); opacity: 0; } 35% { transform: translate(-50%, 0); opacity: 1; } 100% { transform: translate(-50%, 0); opacity: 1; } }
/* 発動する人の側から光が差す */
.fx-beam { position: absolute; inset: 0; pointer-events: none; animation: beamIn 1.2s ease-out both; }
.fx-cardscene.from2 .fx-beam { background: linear-gradient(90deg, rgba(255, 230, 150, .55), rgba(255, 230, 150, 0) 55%); }
.fx-cardscene.from1 .fx-beam { background: linear-gradient(270deg, rgba(255, 230, 150, .55), rgba(255, 230, 150, 0) 55%); }
.fx-cardscene.from0 .fx-beam { background: linear-gradient(0deg, rgba(255, 230, 150, .55), rgba(255, 230, 150, 0) 55%); }
.fx-cardscene.counter .fx-beam { filter: hue-rotate(-40deg) saturate(1.6); }
@keyframes beamIn { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: .35; } }
.fx-cardscene .fx-rays { animation-delay: .9s; }
.fx-cardscene .fx-dim { animation: dimIn .5s ease-out both; }
@keyframes dimIn { from { opacity: 0; } to { opacity: 1; } }
.fx-landring { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; border-radius: 50%; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px rgba(255, 243, 196, .9), 0 0 40px rgba(255, 220, 140, .9); animation: landRing .65s ease-out forwards; pointer-events: none; }
@keyframes landRing { from { transform: translate(-50%, -50%) scale(.4); opacity: 1; } to { transform: translate(-50%, -50%) scale(5); opacity: 0; } }

/* 牌を持つ手：本物の手の写真。指先で牌の下の方をつまむ位置に置く */
.fx-handwrap { width: 112px; top: 38%; transform: translate(-30%, 0); }
.fx-hand { filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .45)); user-select: none; }
.fx-flipfinger .fx-hand { width: 100%; }

/* ---------- 角度をもう少しつける ---------- */
.scene { perspective: 950px; perspective-origin: 50% -20%; }
.plane { transform: rotateX(40deg); }

/* ---------- 牌の立体感：象牙色の本体＋厚み＋山吹色の背、角の丸みと陰影 ---------- */
.tile {
  --t: calc(var(--w) * .12);
  --tile3d:
    inset 0 0 0 1px rgba(70, 85, 110, .2),
    inset 2px 2px 3px rgba(255, 255, 255, .95),
    inset -3px -3px 6px rgba(80, 95, 120, .3),
    0 calc(var(--t) * .95) 0 #2f78d0,
    0 calc(var(--t) * 1.6) 0 #17468f,
    calc(var(--w) * .05) calc(var(--t) * 2.8) calc(var(--w) * .22) rgba(0, 0, 0, .6);
  border-radius: calc(var(--w) * .12);
  background:
    radial-gradient(ellipse at 28% 16%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #ffffff 0%, #f5f7fa 55%, #e3e8ee 100%);
  border-bottom: var(--t) solid #dfe5ec;
  box-shadow: var(--tile3d);
}
/* 手牌は立っている牌：上の面（象牙色→山吹色の背）が見える */
.hand .tile {
  border-bottom-width: calc(var(--w) * .05);
  --tile3d:
    inset 0 0 0 1px rgba(70, 85, 110, .22),
    inset 3px 3px 4px rgba(255, 255, 255, .95),
    inset -4px -4px 7px rgba(80, 95, 120, .32),
    0 calc(var(--w) * -.1) 0 #eef2f6,
    0 calc(var(--w) * -.17) 0 #2f78d0,
    0 calc(var(--w) * -.19) 0 #123a76,
    0 calc(var(--w) * .07) 0 #17468f,
    calc(var(--w) * .06) calc(var(--w) * .16) calc(var(--w) * .2) rgba(0, 0, 0, .55);
  box-shadow: var(--tile3d);
}
.hand .tile.sel { box-shadow: var(--tile3d), 0 0 0 3px var(--gold-2), 0 10px 16px rgba(0, 0, 0, .5); }
.hand .tile.can { box-shadow: var(--tile3d), 0 0 0 3px #ff6b6b; }
/* 牌の背（伏せた牌・相手の手牌） */
.tile.back {
  background:
    radial-gradient(ellipse at 28% 14%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, #5a9be8 0%, #2a6fc8 58%, #174a94 100%);
  border-bottom-color: #f4f6f9;
  box-shadow:
    inset 0 0 0 1px rgba(10, 30, 70, .35),
    inset 2px 2px 3px rgba(200, 225, 255, .6),
    inset -3px -3px 6px rgba(5, 20, 60, .4),
    0 calc(var(--t) * .9) 0 #e0d3b5,
    calc(var(--w) * .05) calc(var(--t) * 2.4) calc(var(--w) * .2) rgba(0, 0, 0, .55);
}

/* ---------- 手で運ぶ牌・手 ---------- */
.fx-carrytile { position: fixed; left: 0; top: 0; z-index: 31; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .45)); }
.fx-carryhand { position: fixed; left: 0; top: 0; z-index: 33; pointer-events: none; }
.fx-carryhand .fx-hand { width: 100%; display: block; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .5)); }
.fx-vanish { position: fixed; z-index: 31; pointer-events: none; animation: vanishUp .9s ease-in forwards; }
@keyframes vanishUp {
  0% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); opacity: 1; }
  35% { transform: translate(-50%, -80%) scale(1.25); filter: brightness(1.8) drop-shadow(0 0 12px #c9a6ff); opacity: 1; }
  100% { transform: translate(-50%, -160%) scale(.4); filter: brightness(2.5) drop-shadow(0 0 20px #c9a6ff); opacity: 0; }
}

/* ---------- ツモ切りの牌：暗くして印を付ける ---------- */
.pond .tile.tsumogiri { filter: brightness(.68) saturate(.55); }
.tgmark {
  position: absolute; right: -2px; bottom: -2px; z-index: 2;
  font-style: normal; font-size: 9px; font-weight: 800; line-height: 1; padding: 2px 3px; border-radius: 4px;
  color: #fff; background: #3b4a6b; box-shadow: 0 0 0 1px #fff;
}

/* ---------- 相手の手牌：卓の上に立っている牌（箱の形） ---------- */
.plane, .rot, .opprow, .opphand { transform-style: preserve-3d; }
.felt { transform: translateZ(-2px); }
.st3d { --H: calc(var(--w) * 1.34); position: relative; width: var(--w); height: calc(var(--w) * .74); transform-style: preserve-3d; }
.st3d .st-shadow { position: absolute; inset: 0; border-radius: 3px; background: rgba(0, 0, 0, .35); transform: translate(3px, -4px); }
.st3d .st-face {
  position: absolute; left: 0; top: 0; width: 100%; height: var(--H); transform-origin: 50% 0; transform: rotateX(90deg);
  border-radius: calc(var(--w) * .1);
  background:
    radial-gradient(ellipse at 28% 14%, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, #5a9be8 0%, #2a6fc8 60%, #174a94 100%);
  box-shadow: inset 0 0 0 1px rgba(5, 20, 60, .4), inset -2px -2px 4px rgba(5, 20, 60, .4);
}
.st3d .st-top {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translateZ(var(--H));
  border-radius: calc(var(--w) * .08);
  background: linear-gradient(180deg, #2a6fc8 0%, #3a82d8 42%, #f4f6f9 46%, #e4e9ef 100%);
  box-shadow: inset 0 0 0 1px rgba(110, 70, 20, .3);
}

/* ---------- 背景：宇宙 ---------- */
body.in-game {
  background:
    radial-gradient(1.5px 1.5px at 40px 60px, rgba(255, 255, 255, .95) 50%, transparent 51%) 0 0 / 180px 180px,
    radial-gradient(1px 1px at 120px 20px, rgba(255, 255, 255, .8) 50%, transparent 51%) 0 0 / 240px 240px,
    radial-gradient(1px 1px at 70px 150px, rgba(200, 220, 255, .85) 50%, transparent 51%) 0 0 / 300px 300px,
    radial-gradient(2px 2px at 160px 110px, rgba(255, 250, 230, 1) 50%, transparent 51%) 0 0 / 420px 420px,
    radial-gradient(1px 1px at 10px 200px, rgba(255, 210, 230, .8) 50%, transparent 51%) 0 0 / 360px 360px,
    radial-gradient(ellipse at 18% 25%, rgba(140, 70, 220, .38) 0%, rgba(140, 70, 220, 0) 45%),
    radial-gradient(ellipse at 82% 75%, rgba(40, 120, 230, .32) 0%, rgba(40, 120, 230, 0) 50%),
    radial-gradient(ellipse at 60% 10%, rgba(230, 80, 160, .18) 0%, rgba(230, 80, 160, 0) 40%),
    radial-gradient(ellipse at 50% 50%, #0b1030 0%, #050716 60%, #010208 100%);
}
body.in-game::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(2px 2px at 90px 40px, rgba(255, 255, 255, 1) 50%, transparent 51%) 0 0 / 260px 260px,
    radial-gradient(1.5px 1.5px at 200px 170px, rgba(190, 220, 255, 1) 50%, transparent 51%) 0 0 / 330px 330px;
  animation: twinkle 3.5s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .25; } to { opacity: 1; } }
.st3d.sz-opp { --w: 31px; }

/* ---------- 蟻地獄：全自動卓の真ん中が開いて穴になる ---------- */
.console .pit, .console .lid { display: none; }
.console.holeopen .mid { opacity: 0; }
.console.holeopen .pit {
  display: block; position: absolute; inset: 46px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #000 0%, #020205 45%, #0d0f16 75%, #262a35 100%);
  box-shadow: inset 0 22px 34px rgba(0, 0, 0, .95), inset 0 -8px 14px rgba(255, 255, 255, .06), 0 0 0 3px #555b68;
}
.console .pit .swirl {
  position: absolute; inset: -30%;
  background: repeating-conic-gradient(from 0deg, rgba(120, 90, 200, .18) 0deg 12deg, transparent 12deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 65%); mask-image: radial-gradient(circle, #000 0%, transparent 65%);
  animation: pitSwirl 6s linear infinite;
}
@keyframes pitSwirl { to { transform: rotate(360deg); } }
/* 開く時：真ん中の板が左右に割れてスライドする */
.console.holeopen .lid {
  display: block; position: absolute; top: 46px; bottom: 46px; width: calc(50% - 46px);
  background: linear-gradient(145deg, #3a3f4c, #1a1d26); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  opacity: 0; pointer-events: none;
}
.console.holeopen .lid.l { left: 46px; border-radius: 16px 0 0 16px; }
.console.holeopen .lid.r { right: 46px; border-radius: 0 16px 16px 0; }
.console.holeopen.opening .lid.l { animation: lidL 1.1s ease-in-out forwards; }
.console.holeopen.opening .lid.r { animation: lidR 1.1s ease-in-out forwards; }
.console.holeopen.opening .pit { animation: pitOpen 1.1s ease-out both; }
@keyframes lidL { 0% { opacity: 1; transform: translateX(0); } 70% { opacity: 1; transform: translateX(-70%); } 100% { opacity: 0; transform: translateX(-90%); } }
@keyframes lidR { 0% { opacity: 1; transform: translateX(0); } 70% { opacity: 1; transform: translateX(70%); } 100% { opacity: 0; transform: translateX(90%); } }
@keyframes pitOpen { 0% { transform: scaleX(.05); } 100% { transform: scaleX(1); } }

/* ---------- 蟻地獄の穴：奥の壁と左右の壁が見える、深い四角い穴 ---------- */
.console.holeopen .dice { opacity: 0; }
.console.holeopen .pit {
  inset: 30px 34px 40px;
  border-radius: 6px;
  border-style: solid;
  border-width: 34px 16px 4px 16px;                      /* 奥の壁が一番よく見える（卓を手前から見下ろしているので） */
  border-color: #4a505e #262a33 #0b0c10 #262a33;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(110, 70, 200, .28) 0%, rgba(110, 70, 200, 0) 60%),
    linear-gradient(180deg, #000 0%, #050508 100%);
  box-shadow:
    0 0 0 3px #9aa0ad, 0 0 0 6px #2b2f38, 0 0 0 7px #000,      /* 穴のふちの金属の枠 */
    inset 0 18px 24px rgba(0, 0, 0, .95),
    inset 0 0 40px rgba(0, 0, 0, .9);
}
.console.holeopen .pit .swirl { inset: -40%; opacity: .9; }
.console.holeopen .lid { top: 30px; bottom: 40px; width: calc(50% - 34px); }
.console.holeopen .lid.l { left: 34px; }
.console.holeopen .lid.r { right: 34px; }
/* 真ん中のパネル全体が開いて、そのまま大きな穴になる */
.console.holeopen { background: #000; }
.console.holeopen .pit {
  inset: 6px; border-radius: 20px;
  border-width: 52px 26px 8px 26px;
  border-color: #545b6b #2a2e38 #0b0c10 #2a2e38;
}
.console.holeopen .seatlab.led { z-index: 2; }
/* 開く時：パネルが持ち上がって、奥へ滑っていく */
.console.holeopen .lid { top: 6px; bottom: 6px; width: calc(50% - 6px); }
.console.holeopen .lid.l { left: 6px; border-radius: 20px 0 0 20px; }
.console.holeopen .lid.r { right: 6px; border-radius: 0 20px 20px 0; }

/* ---------- 蟻地獄：真ん中の装置が持ち上がり、周りが漏斗のように開く（本物の全自動卓と同じ） ---------- */
.funnel { position: absolute; left: 402px; top: 100px; width: 476px; height: 400px; pointer-events: none; }
.funnel .gap { position: absolute; inset: 40px; border-radius: 6px;
  background: radial-gradient(ellipse at 50% 55%, #000 0%, #000 55%, #07090f 80%, #121621 100%);
  box-shadow: inset 0 10px 18px rgba(0, 0, 0, .9); }
.funnel .flap { position: absolute; inset: 0; }
/* 奥の板（手前に向かって下がる面なので、いちばんよく見えて明るい） */
.funnel .flap.far { clip-path: polygon(0 0, 100% 0, 91.6% 10.0%, 8.4% 10.0%);
  background: linear-gradient(180deg, #2c4f95 0%, #1b3570 60%, #0e1d40 100%); }
.funnel .flap.left { clip-path: polygon(0 0, 8.4% 10.0%, 8.4% 90.0%, 0 100%);
  background: linear-gradient(90deg, #1f3c7c 0%, #12275a 70%, #0a1532 100%); }
.funnel .flap.right { clip-path: polygon(100% 0, 100% 100%, 91.6% 90.0%, 91.6% 10.0%);
  background: linear-gradient(270deg, #1f3c7c 0%, #12275a 70%, #0a1532 100%); }
/* 手前の板（向こうへ下がる面なので、ほとんど見えず暗い） */
.funnel .flap.near { clip-path: polygon(0 100%, 8.4% 90.0%, 91.6% 90.0%, 100% 100%);
  background: linear-gradient(0deg, #102452 0%, #070f26 100%); }
.funnel::after { content: ""; position: absolute; inset: 0; border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(190, 215, 255, .25); }
/* 開く時：周りの板がゆっくり下へ傾き、すき間が広がる */
.funnel.opening .flap, .funnel.opening .gap { animation: funnelOpen 1.4s ease-in-out both; }
@keyframes funnelOpen { 0% { opacity: 0; filter: brightness(1.6); } 60% { opacity: 1; } 100% { opacity: 1; filter: brightness(1); } }
/* 真ん中の装置は持ち上がる（影を長くして浮いているように） */
.console.raised { transform: translateZ(26px); box-shadow:
    0 0 0 3px #9aa0ad, 0 0 0 6px #4b505c,
    inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -12px 22px rgba(0, 0, 0, .65),
    0 14px 0 2px #1a1d26, 0 26px 30px rgba(0, 0, 0, .9); }

/* ツモ切りの牌：文字は出さず、手出しより少しだけ暗く（色の強弱で見分ける） */
.pond .tile.tsumogiri { filter: brightness(.8) saturate(.75); }
.tgmark { display: none; }

/* 北抜き：手で運んでいる途中の北は、置かれるまで隠す */
.tile.nuki.pending { visibility: hidden; }
/* カード購入の帯 */
.fx-buy {
  position: fixed; left: 50%; top: 38%; z-index: 36; display: flex; align-items: center; gap: 14px;
  padding: 14px 40px; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  background: linear-gradient(90deg, rgba(120, 60, 0, 0), rgba(150, 90, 10, .95) 15%, rgba(150, 90, 10, .95) 85%, rgba(120, 60, 0, 0));
  color: #fff; font-weight: 800; text-shadow: 0 2px 6px rgba(0, 0, 0, .7);
  animation: buyIn .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.fx-buy .w { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #fff6d0, #d9a93e); color: #3a2604; font-size: 20px; }
.fx-buy .n { font-size: 22px; }
.fx-buy .t { font-size: 32px; letter-spacing: 4px; color: #fff3c4; }
.fx-buy .c { font-family: "Orbitron", sans-serif; font-size: 26px; color: #ffd0d8; }
@keyframes buyIn { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* 引いた牌（ツモ牌）は、牌1個分くらい離して一番右に置く */
.hand .tile.drawn { margin-left: calc(var(--w) * .8); }

/* 相手が引いた牌も、少し離して一番右に置く */
.opphand > .drawn { margin-left: calc(var(--w) * .8); }

/* 引いた牌の場所の空き（見えないが、場所だけとる） */
.ghost { visibility: hidden; pointer-events: none; }

.soundbox { display: flex; gap: 6px; }

/* カードの絵から飛び出す主役 */
.fx-pop { position: fixed; z-index: 5; background-size: 100% 100%; pointer-events: none; transform-origin: 50% 50%; will-change: transform;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 14px var(--c)) drop-shadow(0 30px 30px rgba(0, 0, 0, .55)); }
.fx-popcanvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 4; pointer-events: none; }
.fx-poptint { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .25) 30%, color-mix(in srgb, var(--c) 40%, rgba(0, 0, 0, .6)) 100%); }
.fx-popflash { position: fixed; inset: 0; z-index: 6; pointer-events: none; mix-blend-mode: screen; }
.fx-cardscene.frozen .fx-dim { background: radial-gradient(circle at 50% 50%, rgba(120, 200, 255, .25), rgba(10, 30, 70, .85)); transition: background .3s; }

/* カードの主役の「しぐさ」 */
.fx-carrychar { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; background-size: 100% 100%;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 12px 14px rgba(0, 0, 0, .5)); }
.fx-target { position: fixed; z-index: 4; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px #ff5a5a, 0 0 30px rgba(255, 60, 60, .8); }
.fx-piece { position: fixed; z-index: 4; pointer-events: none; }
.fx-tshout { position: fixed; z-index: 4; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 14px;
  padding: 14px 28px; border-radius: 999px; background: radial-gradient(circle at 50% 40%, #fff7e0, #ffcf6a); color: #a3121a;
  font-weight: 900; font-size: 44px; letter-spacing: 4px; box-shadow: 0 0 0 4px #fff, 0 0 30px rgba(255, 120, 60, .9); white-space: nowrap; }
.fx-tshout.swapped { color: #1a6a2a; box-shadow: 0 0 0 4px #fff, 0 0 30px rgba(120, 255, 140, .9); }
.fx-tshout.iced, .fx-target.iced { box-shadow: 0 0 0 4px #e8fbff, 0 0 30px rgba(140, 220, 255, 1); }
.fx-seal { position: fixed; z-index: 4; width: 230px; height: 230px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 900 150px/1 "Shippori Mincho", serif; color: #fff; pointer-events: none;
  background: radial-gradient(circle, rgba(200, 20, 20, .92) 55%, rgba(140, 0, 0, .95) 70%);
  border: 8px double #fff3c4; box-shadow: 0 0 40px var(--c), 0 0 0 6px rgba(200, 20, 20, .6); text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.fx-shield { position: fixed; z-index: 4; border-radius: 50% 50% 18px 18px / 80% 80% 18px 18px; pointer-events: none;
  border: 3px solid color-mix(in srgb, var(--c) 80%, #fff); box-shadow: 0 0 40px var(--c), inset 0 0 50px var(--c);
  background: repeating-linear-gradient(60deg, transparent 0 18px, color-mix(in srgb, var(--c) 18%, transparent) 18px 20px),
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--c) 35%, transparent), transparent 70%); }
.fx-shield.fire { border-color: #ffb050; box-shadow: 0 0 50px #ff6a2a, inset 0 0 60px #ff4a1a; }
.fx-beam2 { position: fixed; z-index: 4; height: 16px; margin-top: -8px; transform-origin: 0 50%; pointer-events: none; border-radius: 8px;
  background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--c) 70%, #fff) 30%, transparent); box-shadow: 0 0 24px var(--c); }
.fx-handglow { position: fixed; z-index: 3; border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 3px #fff, 0 0 40px 10px var(--c);
  background: color-mix(in srgb, var(--c) 18%, transparent); }
.fx-backtile { position: fixed; z-index: 6; width: 34px; height: 46px; border-radius: 5px; pointer-events: none;
  background: linear-gradient(180deg, #f5a640, #d27a10); box-shadow: inset 0 -5px 0 #fbf6ea, 0 4px 8px rgba(0, 0, 0, .5); }
.fx-backcard { position: fixed; z-index: 6; width: 52px; height: 76px; border-radius: 6px; pointer-events: none;
  background: linear-gradient(135deg, #1f6a32, #0f3a1a); border: 3px solid #d9a93e; box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.fx-backcard.glow { box-shadow: 0 0 0 2px #fff, 0 0 30px var(--c); }
.fx-veil { position: fixed; z-index: 3; border-radius: 30px; pointer-events: none; transform-origin: 50% 50%;
  background: radial-gradient(ellipse, rgba(20, 10, 50, .95) 40%, rgba(40, 20, 90, .7) 75%, transparent),
    repeating-linear-gradient(90deg, rgba(120, 100, 255, .15) 0 6px, transparent 6px 22px);
  box-shadow: 0 0 40px rgba(90, 60, 200, .8); }
.fx-slash { position: fixed; z-index: 6; width: 420px; height: 10px; pointer-events: none; border-radius: 6px;
  background: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent); box-shadow: 0 0 20px #fff, 0 0 40px #ff6b6b; }

/* 演出テスト（/?fxtest=1 の時だけ） */
.fxg-btn { position: fixed; right: 12px; bottom: 12px; z-index: 200; padding: 8px 14px; border-radius: 999px; border: 0;
  background: #2b1d5c; color: #fff3c4; font-weight: 800; box-shadow: 0 0 0 2px #d9a93e; cursor: pointer; }
.fxg-panel { position: fixed; right: 12px; bottom: 56px; z-index: 200; width: min(760px, calc(100vw - 24px)); max-height: 70vh; overflow: auto;
  background: rgba(20, 14, 40, .96); color: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 0 0 2px #d9a93e, 0 10px 30px rgba(0, 0, 0, .6); }
.fxg-panel.min { max-height: 44px; overflow: hidden; opacity: .85; }
.fxg-panel.min .fxg-head, .fxg-panel.min .fxg-grid { display: none; }
.fxg-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.fxg-head b { font-size: 16px; color: #fff3c4; }
.fxg-note { font-size: 12px; opacity: .7; margin-right: auto; }
.fxg-head button, .fxg-head select { padding: 6px 10px; border-radius: 8px; border: 1px solid #d9a93e; background: #3a2a70; color: #fff; font-weight: 700; cursor: pointer; }
.fxg-close { margin-left: 4px; }
.fxg-now { font-size: 13px; color: #ffe08a; min-height: 20px; margin-bottom: 6px; }
.fxg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.fxg-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 9px; border-radius: 8px; border: 0; cursor: pointer;
  text-align: left; color: #fff; background: #1f6a32; }
.fxg-card.counter { background: #8a1f2a; }
.fxg-card .n { font-weight: 800; font-size: 13px; }
.fxg-card .a { font-size: 11px; opacity: .85; }
.fxg-card.on { box-shadow: 0 0 0 3px #ffe08a; }

/* ---- 対戦相手の名札（作り直し）：漆塗りの板に金の縁、妖怪のアイコン ---- */
.plate {
  top: 14px; display: flex; flex-wrap: nowrap; align-items: center; gap: 12px;
  width: 300px; max-width: none; padding: 10px 14px 10px 10px; border-radius: 16px;
  color: #fff; font-size: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 220, 140, .18), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #3a1420, #1c0a18 55%, #12081e);
  border: 2px solid #c99a3e;
  box-shadow: inset 0 0 0 1px rgba(255, 235, 180, .35), inset 0 0 0 5px rgba(0, 0, 0, .35), inset 0 0 0 6px rgba(201, 154, 62, .55),
    0 10px 24px rgba(0, 0, 0, .55);
}
.plate::before, .plate::after {
  /* 四隅の金具 */
  content: ""; position: absolute; width: 18px; height: 18px; border: 3px solid #e7c46a; pointer-events: none;
}
.plate::before { left: 4px; top: 4px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.plate::after { right: 4px; bottom: 4px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.plate.right { flex-direction: row-reverse; padding: 10px 10px 10px 14px; justify-content: flex-start; }
.plate.right .pl-body { align-items: flex-end; text-align: right; }
.plate.right .pl-chips, .plate.right .pl-top { justify-content: flex-end; }

.pl-face { position: relative; flex: none; width: 78px; height: 78px; }
.pl-avatar {
  width: 100%; height: 100%; border-radius: 50%; background: #2a1d4a center/cover no-repeat;
  box-shadow: 0 0 0 3px #e7c46a, 0 0 0 5px #6b4a12, 0 0 0 6px rgba(255, 230, 160, .6), 0 6px 12px rgba(0, 0, 0, .6);
}
.pl-wind {
  position: absolute; left: -6px; bottom: -4px; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font: 900 16px/1 "Shippori Mincho", serif;
  color: #3a2604; background: radial-gradient(circle at 35% 30%, #fff8dc, #e7c46a 60%, #a8771e);
  box-shadow: 0 0 0 2px #fff3c4, 0 3px 6px rgba(0, 0, 0, .6);
}
.plate.right .pl-wind { left: auto; right: -6px; }
.pl-wind.dealer { color: #fff; background: radial-gradient(circle at 35% 30%, #ff9a8a, #e0262f 60%, #8a0d14); }
.pl-oya {
  position: absolute; right: -8px; top: -6px; padding: 1px 6px; border-radius: 6px; font: 900 12px/1.4 "Shippori Mincho", serif;
  color: #fff; background: #e0262f; box-shadow: 0 0 0 2px #fff3c4; transform: rotate(8deg);
}
.plate.right .pl-oya { right: auto; left: -8px; transform: rotate(-8deg); }

.pl-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pl-top { display: flex; align-items: center; gap: 6px; }
.pl-name { font: 700 16px/1.2 "Shippori Mincho", serif; color: #fff3c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.pl-turn { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; color: #3a2604; background: #ffd34d;
  box-shadow: 0 0 10px rgba(255, 211, 77, .9); animation: plTurn 1.1s ease-in-out infinite; }
@keyframes plTurn { 50% { transform: scale(1.1); box-shadow: 0 0 18px rgba(255, 211, 77, 1); } }
.pl-points { display: flex; align-items: baseline; gap: 3px; line-height: 1; }
.pl-points b { font: 800 24px/1 "Orbitron", sans-serif; letter-spacing: 1px;
  background: linear-gradient(180deg, #fff8d0, #f0c040 55%, #b8801c); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .8)); }
.pl-points small { font-size: 11px; color: #e7c46a; }
.plate.danger .pl-points b { background: linear-gradient(180deg, #ffd0d0, #ff4a4a); -webkit-background-clip: text; background-clip: text; }

.pl-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pl-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(231, 196, 106, .45); }
.pl-chip.riichi { background: linear-gradient(180deg, #ff5a5a, #b0141c); border-color: #ffd0d0; animation: plRiichi 1.4s ease-in-out infinite; }
@keyframes plRiichi { 50% { box-shadow: 0 0 10px rgba(255, 80, 80, .9); } }
.pl-chip.cards { background: rgba(31, 106, 50, .55); }
.pl-chip.nuki { background: rgba(40, 90, 110, .7); }
.pl-chip.fx { background: rgba(120, 60, 180, .6); }
.pl-chip .stick { width: 18px; height: 5px; border-radius: 3px; background: #fff; position: relative; }
.pl-chip .stick::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #e0262f; transform: translate(-50%, -50%); }
.pl-chip .ico-tile { width: 10px; height: 13px; border-radius: 2px; background: #fbf6ea; box-shadow: inset 0 -3px 0 #f0a030; }
.pl-chip .ico-card { width: 10px; height: 14px; border-radius: 2px; background: linear-gradient(135deg, #1f6a32, #0f3a1a); box-shadow: 0 0 0 1px #d9a93e; }

/* 手番：金の光が縁を回る */
.plate.active { border-color: #ffd34d; box-shadow: inset 0 0 0 1px rgba(255, 235, 180, .5), 0 0 0 3px rgba(255, 211, 77, .9), 0 0 26px rgba(255, 200, 60, .8), 0 10px 24px rgba(0, 0, 0, .55); }
.plate.active .pl-avatar { box-shadow: 0 0 0 3px #ffd34d, 0 0 0 5px #6b4a12, 0 0 18px 4px rgba(255, 211, 77, .9); }
.plate.riichi .pl-avatar { box-shadow: 0 0 0 3px #ff6a6a, 0 0 0 5px #6b1212, 0 0 16px 3px rgba(255, 80, 80, .8); }

/* 牌を運ぶ 3D の手：牌（.fx-carrytile）より手前に描く */
.hand3d { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 33; }

/* ---------- 河の牌：卓に寝かせた立体の牌（上が絵柄、四方に厚み）。卓が斜めなので手前や横の側面が見える ---------- */
.pond, .pond .side { transform-style: preserve-3d; }
.tile.lay {
  --T: calc(var(--w) * .58);             /* 牌の厚み */
  transform-style: preserve-3d;
  transform: translateZ(var(--T));
  border-bottom: 0; height: calc(var(--w) * 1.34);
  box-shadow: inset 0 0 0 1px rgba(70, 85, 110, .25), inset 2px 2px 3px rgba(255, 255, 255, .9), inset -2px -2px 4px rgba(80, 95, 120, .25);
  filter: none;
}
.tile.lay .sd { position: absolute; pointer-events: none; }
/* 側面：上（絵柄の面）に近い方が象牙色、卓に近い方が山吹色の背 */
.tile.lay .sd.s { left: 4%; width: 92%; top: 100%; height: var(--T); transform-origin: 50% 0; transform: rotateX(-90deg);
  background: linear-gradient(180deg, #eef2f6 0%, #dfe5ec 52%, #2f78d0 56%, #17468f 100%); border-radius: 0 0 4px 4px; }
.tile.lay .sd.n { left: 4%; width: 92%; bottom: 100%; height: var(--T); transform-origin: 50% 100%; transform: rotateX(90deg);
  background: linear-gradient(0deg, #f6f8fb 0%, #e6ebf1 52%, #3a82d8 56%, #1b4f9c 100%); border-radius: 4px 4px 0 0; }
.tile.lay .sd.e { top: 4%; height: 92%; left: 100%; width: var(--T); transform-origin: 0 50%; transform: rotateY(90deg);
  background: linear-gradient(90deg, #e8edf2 0%, #d8dfe8 52%, #2a70c6 56%, #143f80 100%); border-radius: 0 4px 4px 0; }
.tile.lay .sd.w { top: 4%; height: 92%; right: 100%; width: var(--T); transform-origin: 100% 50%; transform: rotateY(-90deg);
  background: linear-gradient(270deg, #f1f4f8 0%, #e1e7ee 52%, #2f78d0 56%, #17468f 100%); border-radius: 4px 0 0 4px; }
/* 卓に落ちる影 */
.tile.lay .sd-shadow { position: absolute; inset: 2px; border-radius: 6px; pointer-events: none;
  transform: translateZ(calc(var(--T) * -1 + 1px)) translate(3px, 4px); background: rgba(0, 0, 0, .45); filter: blur(3px); }
/* 裏向きの牌：上が山吹色の背、側面は逆（上が山吹色、下が象牙色） */
.tile.lay.back .sd.s { background: linear-gradient(180deg, #17468f 0%, #2f78d0 40%, #dfe5ec 46%, #eef2f6 100%); }
.tile.lay.back .sd.n { background: linear-gradient(0deg, #1b4f9c 0%, #3a82d8 40%, #e6ebf1 46%, #f6f8fb 100%); }
.tile.lay.back .sd.e { background: linear-gradient(90deg, #143f80 0%, #2a70c6 40%, #d8dfe8 46%, #e8edf2 100%); }
.tile.lay.back .sd.w { background: linear-gradient(270deg, #17468f 0%, #2f78d0 40%, #e1e7ee 46%, #f1f4f8 100%); }
/* ツモ切り：色を少しだけ落とす（filter は立体が平らになるので、上に薄い影を重ねる） */
.tile.lay.tsumogiri { filter: none; }
.tile.lay.tsumogiri::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(70, 50, 20, .2); pointer-events: none; }
.tile.lay.tsumogiri .sd { filter: brightness(.82); }

/* 北抜きの牌：金の縁取りで厚みの影が消えないように（自分の北は、手牌と同じ厚みの影） */
.tile.nuki { box-shadow: var(--tile3d); }
.tile.nuki.lay { box-shadow: inset 0 0 0 1px rgba(70, 85, 110, .25), inset 2px 2px 3px rgba(255, 255, 255, .9), inset -2px -2px 4px rgba(80, 95, 120, .25); }
/* 選んだ牌は飛び出さず、金の枠で示す（捨てる時は、その場所から持ち上げる） */
.hand .tile.sel { transform: translateY(-12px); transition: transform .06s ease-out; }   /* 選んだ牌は少し浮かせる（捨てる時はこの高さから持ち上げる） */

/* ---------- サイコロ：全自動卓の真ん中のガラスのドーム。ボタンを押すと振動でサイコロが跳ねて転がる ---------- */
.fx-dome { position: fixed; z-index: 35; width: 340px; height: 340px; transform: translate(-50%, -50%); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; }
.fx-dome .base { position: relative; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #2a3b63 0%, #16213d 62%, #0b1124 70%, #3a3f4c 71%, #9aa0ad 76%, #4b505c 82%, #1a1d26 86%, transparent 87%);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .7); perspective: 700px; }
.fx-dome .felt { position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #3a5ba8, #1d3570 70%); box-shadow: inset 0 6px 18px rgba(0, 0, 0, .7); transform-style: preserve-3d; }
.fx-dome .glass { position: absolute; inset: 12%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .08) 22%, rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle at 70% 78%, rgba(160, 200, 255, .25) 0%, rgba(160, 200, 255, 0) 40%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), inset 0 -10px 30px rgba(120, 170, 255, .25); }
.fx-dome .btn { position: absolute; right: 4px; bottom: 26px; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ff8a8a, #d01f2a 60%, #7a0d14); box-shadow: 0 6px 0 #4a0a0e, 0 8px 14px rgba(0, 0, 0, .6);
  color: #fff; font: 800 15px/54px "M PLUS Rounded 1c", sans-serif; text-align: center; letter-spacing: 0; white-space: nowrap; }
.fx-dome .btn.press { animation: domeBtn .35s ease-out; }
@keyframes domeBtn { 30% { transform: translateY(5px); box-shadow: 0 1px 0 #4a0a0e, 0 3px 6px rgba(0, 0, 0, .6); filter: brightness(1.3); } }
.fx-dome .label { margin-top: 6px; min-height: 40px; font-weight: 800; font-size: 26px; color: #fff; padding: 4px 20px; border-radius: 999px; }
.fx-dome .label.hit { background: linear-gradient(180deg, #ffe066, #ff7a1f); color: #5a2a00; box-shadow: 0 0 0 3px #fff, 0 0 30px rgba(255, 220, 100, 1); animation: popIn .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.fx-dome .label.miss { background: rgba(43, 33, 64, .85); }
/* 立体のサイコロ（6面） */
.cube { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; transform-style: preserve-3d; }
.cube .f { position: absolute; inset: 0; border-radius: 9px; background: radial-gradient(circle at 35% 30%, #ffffff, #ece6da 70%, #d6ccb8);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), inset -3px -3px 6px rgba(0, 0, 0, .12);
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 6px; backface-visibility: hidden; }
.cube .f i { width: 9px; height: 9px; border-radius: 50%; background: #1a1a1a; place-self: center; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .3); }
.cube .f.v1 i { width: 16px; height: 16px; background: #d01f2a; }
.cube .shadow { position: absolute; inset: 4px; border-radius: 50%; background: rgba(0, 0, 0, .45); filter: blur(5px); }

/* ---------- カードログ（作り直し）：新しい順に、絵・名前・種類・使った人・狙い・効果・結果 ---------- */
.result.cardlog2 { width: min(760px, 94vw); max-height: 88vh; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 14px;
  background: linear-gradient(160deg, #2a1230, #160a22 60%, #0e0818); color: #fff; border: 2px solid #c99a3e;
  box-shadow: inset 0 0 0 1px rgba(255, 235, 180, .3), 0 20px 50px rgba(0, 0, 0, .6); }
.cl-head { display: flex; align-items: baseline; gap: 10px; }
.cl-head h2 { margin: 0; font: 800 24px/1.2 "Shippori Mincho B1", serif; color: #fff3c4; }
.cl-count { font-size: 14px; color: #e7c46a; }
.cl-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-tab { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(231, 196, 106, .5); background: rgba(255, 255, 255, .06);
  color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.cl-tab.on { background: linear-gradient(180deg, #ffe08a, #e7a83a); color: #3a2604; border-color: #fff3c4; }
.cl-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; min-height: 120px; }
.cl-empty { text-align: center; color: rgba(255, 255, 255, .6); padding: 30px 0; }
.cl-item { display: flex; align-items: stretch; gap: 12px; width: 100%; text-align: left; padding: 8px; border-radius: 12px; cursor: pointer;
  color: #fff; font: inherit; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-left: 5px solid #4fae36; }
.cl-item.counter { border-left-color: #d0343f; }
.cl-item:hover { background: rgba(255, 255, 255, .1); }
.cl-item.off { opacity: .78; }
.cl-art { position: relative; flex: none; width: 92px; height: 64px; border-radius: 8px; background: #000 center/cover no-repeat;
  box-shadow: 0 0 0 2px #d9a93e, 0 4px 10px rgba(0, 0, 0, .5); }
.cl-item.off .cl-art { filter: grayscale(.8) brightness(.7); }
.cl-num { position: absolute; left: -6px; top: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #fff3c4; color: #3a2604;
  font: 800 12px/22px "Orbitron", sans-serif; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.cl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cl-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cl-name { font: 800 17px/1.2 "Shippori Mincho B1", serif; color: #fff3c4; }
.cl-item.off .cl-name { text-decoration: line-through; text-decoration-color: #ff6a6a; text-decoration-thickness: 2px; color: rgba(255, 243, 196, .7); }
.cl-kind { font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: #2f7a2a; }
.cl-kind.counter { background: #9a1f2a; }
.cl-live { font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: #6a3ab0; box-shadow: 0 0 8px rgba(160, 110, 255, .8); }
.cl-who { display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: wrap; color: rgba(255, 255, 255, .9); }
.cl-av { width: 22px; height: 22px; border-radius: 50%; background: #2a1d4a center/cover; box-shadow: 0 0 0 1.5px #e7c46a; }
.cl-wind { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font: 900 11px/1 "Shippori Mincho B1", serif; color: #3a2604; background: #e7c46a; }
.cl-aim { color: #ffcf6a; font-weight: 700; }
.cl-text { font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .82); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-text.open { display: block; -webkit-line-clamp: unset; }
.cl-status { flex: none; width: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 10px; text-align: center; }
.cl-status b { font-size: 15px; padding: 3px 12px; border-radius: 999px; }
.cl-status.on b { background: linear-gradient(180deg, #6fe08b, #2f9a4a); color: #0d2a14; }
.cl-status.off b { background: linear-gradient(180deg, #ff8a8a, #c0242f); color: #fff; }
.cl-status small { font-size: 10.5px; color: #ffb0b0; line-height: 1.3; }
.cl-hint { font-size: 11px; color: rgba(255, 255, 255, .5); text-align: center; }
@media (max-width: 560px) {
  .cl-art { width: 64px; height: 46px; }
  .cl-status { width: 56px; }
  .cl-name { font-size: 15px; }
}
.result.cardlog2 { max-width: none; overflow: hidden; border-radius: 18px; }
.result.cardlog2 h2 { text-shadow: none; letter-spacing: 2px; text-align: left; }

/* ---------- 軽くする：ずっと続く動き（全体を毎回描き直させるもの）を止める ---------- */
/* 星空のまたたき：止めて、静かな星空に（画面全体を毎回描き直してしまうので） */
body.in-game::before { animation: none; opacity: .75; }
/* ドラの光：点滅と光の帯をやめ、金の光は付けたままにする */
.tile.isdora::before { animation: none; opacity: 1; }
.tile.isdora::after { animation: none; display: none; }
/* 名札の「手番」：大きさだけ動かす（影の動きは描き直しが重い） */
@keyframes plTurn { 50% { transform: scale(1.1); } }
.pl-chip.riichi { animation: none; box-shadow: 0 0 8px rgba(255, 80, 80, .85); }
/* 点数が少ない時：点滅をやめ、赤く光らせたままにする */
.seatlab.led.danger { animation: none; box-shadow: inset 0 0 0 2px #ff3030, 0 0 14px rgba(255, 40, 40, .8); background: #2a0505; }
.plate.danger { animation: none; outline: 3px solid #ff3030; outline-offset: 2px; }

/* ---------- カードの裏：深紅の漆に金の青海波、真ん中に「雀」の紋（cardback.svg）。山札・引く時・購入ボタン・飛ぶカード全部 ---------- */
.buybtn .cardback, .cardbackmini, .fx-cardback, .fx-deck i, .fx-backcard, .fx-carddraw .cardface.back {
  background: url("/static/cardback.svg") center / 100% 100% no-repeat, #5e0a16;
}
.buybtn .cardback { border-radius: 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, .6); }
.fx-cardback { border-radius: 4px; box-shadow: 0 0 20px rgba(255, 220, 120, .9); }
.fx-deck i { border-radius: 7px; box-shadow: 2px 3px 4px rgba(0, 0, 0, .45); }
.fx-backcard { border: 0; border-radius: 5px; }
.fx-carddraw .cardface.back { border-radius: 12px; box-shadow: 0 12px 24px rgba(0, 0, 0, .5); }
.cardbackmini { box-shadow: 0 3px 5px rgba(0, 0, 0, .35); }

/* カード発動の後ろ：回る集中線はやめ、カードの後ろからやわらかい光が広がるだけにする */
.fx-rays {
  width: 120vmax; height: 120vmax; animation: raysGlow .8s ease-out .9s both; mask-image: none; -webkit-mask-image: none;
  background: radial-gradient(circle, rgba(255, 226, 150, .34) 0%, rgba(255, 210, 120, .12) 28%, rgba(255, 210, 120, 0) 55%);
}
.fx-cardscene.counter .fx-rays { background: radial-gradient(circle, rgba(255, 120, 120, .34) 0%, rgba(255, 80, 80, .12) 28%, rgba(255, 80, 80, 0) 55%); }
@keyframes raysGlow { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* ---------- 上の道具ボタンとドラ表示：漆の地に金の縁（名札とそろえる） ---------- */
.toprow { gap: 8px; }
.soundbox { gap: 8px; }
.toolbtn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: 10px; cursor: pointer;
  font: 700 13px/1 "Shippori Mincho B1", serif; color: #fff3c4; letter-spacing: 1px; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255, 230, 170, .12), transparent 45%), linear-gradient(160deg, #3a1420, #1c0a18 60%, #12081e);
  border: 1.5px solid #c99a3e;
  box-shadow: inset 0 0 0 1px rgba(255, 235, 180, .25), inset 0 -3px 6px rgba(0, 0, 0, .45), 0 4px 10px rgba(0, 0, 0, .5);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.toolbtn:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255, 235, 180, .45), 0 0 12px rgba(231, 196, 106, .55), 0 6px 12px rgba(0, 0, 0, .5); }
.toolbtn:active { transform: translateY(1px); }
.toolbtn .ti { width: 20px; height: 20px; display: inline-flex; color: #f0cc62; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
.toolbtn .ti svg { width: 100%; height: 100%; }
.toolbtn .tc { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  font: 800 11px/1 "Orbitron", sans-serif; color: #3a2604; background: linear-gradient(180deg, #fff3c4, #e7c46a 60%, #b8801c); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
/* 切っている時：アイコンに斜線、全体を少し暗く */
.toolbtn.off { filter: saturate(.4) brightness(.8); }
.toolbtn.off .ti { position: relative; color: #b8a27a; }
.toolbtn.off .ti::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2.5px; border-radius: 2px; background: #ff6a6a;
  transform: rotate(-40deg); box-shadow: 0 0 0 1.5px #1c0a18; }

/* ドラ表示 */
.topinfo .dora {
  color: #fff3c4; border: 1.5px solid #c99a3e; border-radius: 12px; padding: 6px 12px 9px;
  background: linear-gradient(180deg, rgba(255, 230, 170, .12), transparent 45%), linear-gradient(160deg, #3a1420, #1c0a18 60%, #12081e);
  box-shadow: inset 0 0 0 1px rgba(255, 235, 180, .25), 0 6px 14px rgba(0, 0, 0, .5);
}
.topinfo .dora .dlabel { font: 800 13px/1.1 "Shippori Mincho B1", serif; color: #f0cc62; letter-spacing: 2px; writing-mode: horizontal-tb; }
.topinfo .dora .dorarow { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 66%, #5a1a10 66%, #2a0a06 100%); }
.topinfo .dora .dlabel { white-space: nowrap; }

/* 右下：自動ツモ切り（ON は金に光る、OFF は暗く斜線） */
.autobtn { position: absolute; right: 14px; bottom: 10px; z-index: 6; height: 38px; }
.autobtn .sw { margin-left: 4px; min-width: 38px; height: 22px; padding: 0 8px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  font: 800 11px/1 "Orbitron", sans-serif; letter-spacing: 1px; color: #c9b9a0; background: #2a1a20; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7); }
.autobtn .sw.on { color: #3a2604; background: linear-gradient(180deg, #fff3c4, #e7c46a 60%, #b8801c); box-shadow: 0 0 10px rgba(255, 211, 77, .8); }
.autobtn:not(.off) { border-color: #ffd34d; box-shadow: inset 0 0 0 1px rgba(255, 235, 180, .4), 0 0 14px rgba(255, 200, 60, .45), 0 4px 10px rgba(0, 0, 0, .5); }
.activecol.mine { bottom: 56px; top: auto; }

/* ---------- 立直宣言牌：横向きのまま、卓に寝かせた立体の牌にする ---------- */
.side > .tile.lay { transform: translate(-50%, -50%) rotate(90deg) translateZ(var(--T)); }

/* ---------- 抜いた北：隙間なくひとまとめ ---------- */
.nukirow { display: flex; align-items: flex-end; gap: 1px; transform-style: preserve-3d; }

/* ---------- カードを選ぶ一覧 ---------- */
.result.wide { max-width: min(680px, 94vw); }
.pick-head { font: 800 14px/1.4 "Shippori Mincho B1", serif; color: #fff3c4; margin-top: 4px; }
.pickcards { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; padding-right: 4px; }
.pick-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px; border-radius: 12px; cursor: pointer; color: #fff; font: inherit;
  background: rgba(0, 0, 0, .28); border: 1.5px solid rgba(255, 255, 255, .15); border-left: 5px solid #4fae36; }
.pick-item.counter { border-left-color: #d0343f; }
.pick-item:hover { background: rgba(255, 255, 255, .08); }
.pick-item.on { border-color: #ffd34d; background: linear-gradient(90deg, rgba(255, 211, 77, .22), rgba(255, 211, 77, .06)); box-shadow: 0 0 14px rgba(255, 211, 77, .5); }
.pk-art { flex: none; width: 84px; height: 58px; border-radius: 8px; background: #000 center/cover no-repeat; box-shadow: 0 0 0 2px #d9a93e; }
.pk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pk-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pk-name { font: 800 16px/1.2 "Shippori Mincho B1", serif; color: #fff3c4; }
.pk-kind { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: #2f7a2a; }
.pk-kind.counter { background: #9a1f2a; }
.pk-extra { font-size: 11px; color: #ffcf6a; font-weight: 700; }
.pk-text { font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.pk-check { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900;
  color: #3a2604; background: rgba(255, 255, 255, .12); }
.pick-item.on .pk-check { background: linear-gradient(180deg, #fff3c4, #e7c46a); box-shadow: 0 0 8px rgba(255, 211, 77, .9); }

/* ---------- あがりの結果画面（作り直し） ---------- */
.overlay.res2 { background: radial-gradient(ellipse at 30% 50%, rgba(60, 10, 30, .92), rgba(8, 4, 16, .97) 70%); overflow: hidden; }
.overlay.res2.draw { background: radial-gradient(ellipse at 50% 40%, rgba(20, 30, 70, .94), rgba(4, 6, 16, .98) 70%); }
.res2 .rs-bg { position: absolute; inset: 0; pointer-events: none; }
.res2 .rs-glow { position: absolute; left: -10%; top: 0; bottom: 0; width: 70%;
  background: radial-gradient(ellipse at 40% 55%, rgba(255, 200, 90, .45), rgba(255, 150, 60, .12) 40%, transparent 70%); }
.overlay.res2.other .rs-glow { background: radial-gradient(ellipse at 40% 55%, rgba(150, 180, 255, .4), rgba(90, 120, 255, .1) 40%, transparent 70%); }
.res2 .rs-art { position: absolute; left: -2%; bottom: -4%; width: 48%; height: 92%; background: left bottom / contain no-repeat;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 30px rgba(255, 210, 120, .7)); opacity: .95; animation: rsArtIn .9s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes rsArtIn { from { transform: translateX(-60px) scale(.92); opacity: 0; } to { transform: none; opacity: .95; } }
.result.res2 { position: relative; z-index: 1; width: min(720px, 94vw); max-width: none; margin-left: auto; margin-right: 4vw; max-height: 94vh; overflow-y: auto;
  gap: 10px; padding: 18px 20px; color: #fff; border: 2px solid #c99a3e; border-radius: 18px;
  background: linear-gradient(160deg, rgba(42, 18, 48, .92), rgba(20, 10, 34, .94) 60%, rgba(14, 8, 24, .96));
  box-shadow: inset 0 0 0 1px rgba(255, 235, 180, .3), 0 20px 60px rgba(0, 0, 0, .7); }
.overlay.res2.draw .result.res2 { margin: auto; }
.rs-banner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rs-title { font: 900 64px/1 "Shippori Mincho B1", serif; letter-spacing: 12px;
  background: linear-gradient(180deg, #fffbe0, #f0cc62 45%, #a8761a 70%, #ffe08a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #3a1a04) drop-shadow(0 0 20px rgba(255, 200, 80, .7)); }
.rs-title.ron { background: linear-gradient(180deg, #ffe0e0, #ff6a6a 45%, #a8141e 70%, #ffb0b0); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 0 #3a0404) drop-shadow(0 0 20px rgba(255, 80, 80, .7)); }
.rs-banner.draw .rs-title { background: linear-gradient(180deg, #e8f0ff, #9fb8ff 55%, #4a6ac0); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 16px rgba(120, 160, 255, .7)); }
.rs-who { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.rs-person { display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1.5px solid #c99a3e; }
.rs-person.lose { border-color: rgba(255, 120, 120, .6); padding: 5px 5px 5px 14px; }
.rs-av { width: 40px; height: 40px; border-radius: 50%; background: #2a1d4a center/cover; box-shadow: 0 0 0 2px #e7c46a; flex: none; }
.rs-person.lose .rs-av { box-shadow: 0 0 0 2px #ff8a8a; filter: grayscale(.4); }
.rs-wind { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 900 13px/1 "Shippori Mincho B1", serif; color: #3a2604; background: #e7c46a; }
.rs-name { font: 800 18px/1.2 "Shippori Mincho B1", serif; color: #fff3c4; }
.rs-oya { font-size: 11px; font-weight: 900; padding: 1px 6px; border-radius: 6px; color: #fff; background: #e0262f; }
.rs-label { font-size: 13px; color: rgba(255, 255, 255, .8); font-weight: 700; }
.rs-person.lose .rs-label { color: #ff9a9a; }
.rs-hand { display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap; gap: 2px; padding: 10px 8px 12px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(107, 68, 35, .7) 60%, rgba(59, 36, 16, .8)); }
.rs-hand .gap { width: 12px; }
.rs-hand .tile.win { box-shadow: var(--tile3d), 0 0 0 3px #ffd34d, 0 0 18px rgba(255, 211, 77, .9); }
.rs-hand .tile.hit-dora { box-shadow: var(--tile3d), 0 0 0 2px #ffd34d, 0 0 12px rgba(255, 211, 77, .8); }
.rs-hand .tile.hit-ura { box-shadow: var(--tile3d), 0 0 0 3px #c08cff, 0 0 18px rgba(170, 110, 255, 1); animation: uraHit .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes uraHit { from { transform: translateY(0) scale(1); } 50% { transform: translateY(-14px) scale(1.12); } to { transform: translateY(-4px); } }
.rs-dora { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(231, 196, 106, .35); }
.rs-drow { display: flex; align-items: center; gap: 4px; }
.rs-dlabel { width: 64px; font: 800 14px/1 "Shippori Mincho B1", serif; color: #f0cc62; }
.rs-drow.ura .rs-dlabel { color: #d0a8ff; }
.rs-dcount { margin-left: 10px; min-width: 120px; font: 800 18px/1 "Shippori Mincho B1", serif; color: #ffd34d; }
.rs-dcount.ura { color: #d9b8ff; }
.rs-dcount.ura.show { animation: popIn .5s cubic-bezier(.2, 1.6, .4, 1) both; text-shadow: 0 0 12px rgba(190, 140, 255, 1); }
.rs-drow .tile.flipin { animation: uraFlip .45s ease-out both; }
@keyframes uraFlip { from { transform: rotateY(90deg) scale(1.2); filter: brightness(2); } to { transform: none; filter: none; } }
.rs-yaku { display: flex; flex-direction: column; gap: 3px; padding: 0 6px; }
.rs-yrow { display: flex; align-items: baseline; gap: 8px; font: 700 18px/1.5 "Shippori Mincho B1", serif; }
.rs-yrow .dots { flex: 1; border-bottom: 1px dotted rgba(255, 255, 255, .35); }
.rs-yrow .hh { color: #ffd34d; font-weight: 800; }
.rs-yrow.isdorayaku .yn { color: #ffe08a; }
.rs-total { display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px; border-top: 1px solid rgba(231, 196, 106, .4); }
.rs-total .fuhan { font: 700 18px/1 "Shippori Mincho B1", serif; color: #fff3c4; }
.rs-total .limitname { font: 900 26px/1 "Shippori Mincho B1", serif; color: #ff9a6a; text-shadow: 0 0 14px rgba(255, 120, 60, .9); }
.rs-total.yakuman .limitname { font-size: 38px; color: #ffd34d; text-shadow: 0 0 20px rgba(255, 211, 77, 1); }
.rs-total .gain { font: 900 44px/1 "Orbitron", sans-serif; background: linear-gradient(180deg, #fffbe0, #f0cc62 50%, #b8801c); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #3a1a04); }
.rs-total .gainunit { font-size: 16px; color: #e7c46a; }
.rs-effects { padding: 8px 10px; border-radius: 12px; background: rgba(90, 40, 140, .22); border: 1px solid rgba(180, 130, 255, .4); }
.rs-ehead { font: 800 13px/1.4 "Shippori Mincho B1", serif; color: #d9b8ff; margin-bottom: 6px; }
.rs-elist { display: flex; gap: 8px; flex-wrap: wrap; }
.rs-ecard { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 10px; cursor: pointer; color: #fff; font: inherit;
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .15); border-left: 4px solid #4fae36; }
.rs-ecard.counter { border-left-color: #d0343f; }
.rs-eart { width: 54px; height: 38px; border-radius: 6px; background: #000 center/cover; box-shadow: 0 0 0 1.5px #d9a93e; }
.rs-ename { font: 800 14px/1.2 "Shippori Mincho B1", serif; color: #fff3c4; text-align: left; }
.rs-eowner { font-size: 11px; color: rgba(255, 255, 255, .7); text-align: left; }
.rs-deltas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rs-dcell { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .12); }
.rs-dcell.me { border-color: #ffd34d; }
.rs-dtx { flex: 1; min-width: 0; }
.rs-dname { font-size: 12px; color: rgba(255, 255, 255, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-pts { font: 800 18px/1.2 "Orbitron", sans-serif; color: #fff3c4; }
.rs-dval { font: 800 15px/1 "Orbitron", sans-serif; }
.rs-dcell.plus .rs-dval { color: #7dff9a; }
.rs-dcell.minus .rs-dval { color: #ff7a7a; }
.rs-tenpai { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rs-tp { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .15); }
.rs-tp .rs-av { width: 64px; height: 64px; }
.rs-tp.on { border-color: #7dd0ff; box-shadow: 0 0 16px rgba(120, 200, 255, .5); }
.rs-tpname { font: 800 15px/1.2 "Shippori Mincho B1", serif; color: #fff3c4; }
.rs-tpst { font-size: 13px; font-weight: 800; color: rgba(255, 255, 255, .6); }
.rs-tp.on .rs-tpst { color: #7dd0ff; }
.rs-note { text-align: center; color: rgba(255, 255, 255, .7); }
@media (max-width: 760px) {
  .res2 .rs-art { width: 70%; opacity: .35; }
  .result.res2 { margin: auto; }
  .rs-title { font-size: 46px; }
}
/* カードを選ぶ画面：卓が透けると読みにくいので、選ぶ一覧の時は漆の板を敷く */
.overlay.cardpop .result.wide {
  background: linear-gradient(160deg, rgba(42, 18, 48, .97), rgba(20, 10, 34, .98) 60%, rgba(14, 8, 24, .98));
  border: 2px solid #c99a3e; border-radius: 18px; padding: 14px 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 235, 180, .3), 0 20px 60px rgba(0, 0, 0, .7);
}
.overlay.cardpop .result.wide .pick-item { background: #1f1024; }
.overlay.cardpop .result.wide .pick-item.on { background: linear-gradient(90deg, #4a3410, #241428); }

/* ---------- 王牌：2段に積んだ山。上の段がドラ表示牌（めくった所だけ表）、下の段に裏ドラ ---------- */
.deadwall { display: flex; align-items: flex-end; gap: 1px; padding: 0 2px; }
.dwstack { position: relative; width: var(--sw, 30px); height: calc(var(--sw, 30px) * 1.34 + var(--sw, 30px) * .32); }
.dwstack .dwlow, .dwstack .dwup { position: absolute; left: 0; transition: transform .45s cubic-bezier(.3, .7, .3, 1); }
.dwstack .dwlow { top: calc(var(--sw, 30px) * .32); z-index: 1; filter: brightness(.82); }   /* 下の段：上の牌の下から少しのぞく */
.dwstack .dwup { top: 0; z-index: 2; }
.dwstack.ind .dwup .tile:not(.back) { box-shadow: var(--tile3d), 0 0 0 1.5px rgba(255, 214, 102, .9); }
/* 裏ドラをめくった列：上の牌（ドラ表示牌）を持ち上げてずらし、下の牌が表向きで見える */
.dwstack.lift .dwup { transform: translate(calc(var(--sw, 30px) * .5), calc(var(--sw, 30px) * -1.05)) rotate(8deg); z-index: 3; }
.dwstack.lift .dwlow { filter: none; }
.dwstack.lift .dwlow .tile { box-shadow: var(--tile3d), 0 0 0 2px #c08cff, 0 0 12px rgba(170, 110, 255, .9); }
.dwstack .tile.flipin { animation: uraFlip .5s ease-out both; }
.topinfo .deadwall { --sw: 30px; }
.rs-wall .deadwall { --sw: 34px; padding-top: 40px; }
.rs-dora { flex-direction: row; justify-content: center; gap: 18px; align-items: flex-end; }
.rs-wall { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rs-wlabel { font: 800 12px/1 "Shippori Mincho B1", serif; color: #e7c46a; letter-spacing: 3px; }
.rs-dcounts { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.rs-dcounts .rs-dcount { margin-left: 0; }
.rs-wall .deadwall { padding-top: 58px; }

/* ---------- ツモ・ロンのボタン：漆と金の豪華な札。後ろはやわらかい光、表面に光が流れる ---------- */
.bigrays { background: radial-gradient(circle, rgba(255, 220, 120, .55) 0%, rgba(255, 190, 80, .18) 35%, transparent 62%); animation: none; -webkit-mask-image: none; mask-image: none; }
.bigbtn {
  position: relative; overflow: hidden; padding: 16px 54px 18px; border-radius: 16px; gap: 14px;
  font: 900 50px/1 "Shippori Mincho B1", serif; letter-spacing: 12px; color: #fff8dc; -webkit-text-stroke: 0;
  text-shadow: 0 2px 0 rgba(60, 20, 0, .9), 0 0 18px rgba(255, 230, 150, .9);
  animation: bigGlow 1.4s ease-in-out infinite;
}
.bigbtn.tsumo {
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 250, 220, .55), transparent 55%), linear-gradient(180deg, #f6c94a 0%, #c9861c 45%, #7a4208 100%);
  box-shadow: inset 0 0 0 2px #fff3c4, inset 0 -6px 12px rgba(80, 30, 0, .55), 0 0 0 4px #5a3606, 0 0 0 7px #f0cc62, 0 0 0 9px #3a2204, 0 10px 18px rgba(0, 0, 0, .6), 0 0 46px rgba(255, 200, 70, .95);
}
.bigbtn.ron {
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 220, 220, .45), transparent 55%), linear-gradient(180deg, #e8394a 0%, #9a0d1c 50%, #4a0008 100%);
  box-shadow: inset 0 0 0 2px #ffd0d0, inset 0 -6px 12px rgba(40, 0, 0, .6), 0 0 0 4px #5a0610, 0 0 0 7px #f0cc62, 0 0 0 9px #3a0408, 0 10px 18px rgba(0, 0, 0, .6), 0 0 46px rgba(255, 70, 90, .95);
}
/* 表面を流れる光（ボタンの中だけを動かすので軽い） */
.bigbtn::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; transform: skewX(-20deg) translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: bigShine 2.2s ease-in-out infinite; pointer-events: none; }
.bigbtn::after { content: ""; position: absolute; inset: 5px; border-radius: 11px; border: 1.5px solid rgba(255, 243, 196, .7); pointer-events: none; }
@keyframes bigShine { 0% { transform: skewX(-20deg) translateX(-120%); } 55%, 100% { transform: skewX(-20deg) translateX(560%); } }
@keyframes bigGlow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.bigbtn .tile { box-shadow: var(--tile3d), 0 0 0 2px #fff3c4; }

/* ---------- あがった人のカットイン ---------- */
.fx-cutin { position: fixed; inset: 0; z-index: 38; pointer-events: none; overflow: hidden; }
.fx-cutin .ci-band { position: absolute; left: -10%; right: -10%; top: 50%; height: 260px; margin-top: -130px;
  background: linear-gradient(90deg, rgba(40, 10, 4, .0), rgba(70, 24, 6, .94) 12%, rgba(120, 60, 10, .96) 50%, rgba(70, 24, 6, .94) 88%, rgba(40, 10, 4, 0));
  border-top: 4px solid #f0cc62; border-bottom: 4px solid #f0cc62; box-shadow: 0 0 40px rgba(255, 200, 80, .7), inset 0 0 60px rgba(0, 0, 0, .6); overflow: hidden; }
.fx-cutin.ron .ci-band { background: linear-gradient(90deg, rgba(40, 0, 6, 0), rgba(90, 4, 16, .95) 12%, rgba(150, 16, 32, .96) 50%, rgba(90, 4, 16, .95) 88%, rgba(40, 0, 6, 0));
  box-shadow: 0 0 40px rgba(255, 60, 80, .7), inset 0 0 60px rgba(0, 0, 0, .6); }
.fx-cutin .ci-sheen { position: absolute; inset: 0; background: repeating-linear-gradient(100deg, rgba(255, 230, 160, .07) 0 2px, transparent 2px 26px); }
.fx-cutin .ci-art { position: absolute; top: 50%; height: 520px; width: 46%; margin-top: -300px; background: center bottom / contain no-repeat;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 26px rgba(255, 220, 140, .85)); }
.fx-cutin.from0 .ci-art, .fx-cutin.from2 .ci-art { left: 4%; }
.fx-cutin.from1 .ci-art { right: 4%; }
.fx-cutin .ci-plate { position: absolute; top: 50%; display: flex; align-items: center; gap: 12px; margin-top: -116px;
  padding: 8px 20px 8px 8px; border-radius: 999px; background: rgba(0, 0, 0, .55); border: 2px solid #f0cc62; }
.fx-cutin.from0 .ci-plate, .fx-cutin.from2 .ci-plate { left: 50%; }
.fx-cutin.from1 .ci-plate { right: 50%; }
.fx-cutin .ci-av { width: 64px; height: 64px; border-radius: 50%; background: #2a1d4a center/cover; box-shadow: 0 0 0 3px #f0cc62, 0 0 16px rgba(255, 210, 120, .9); }
.fx-cutin .ci-tx { display: flex; align-items: center; gap: 10px; }
.fx-cutin .ci-wind { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font: 900 18px/1 "Shippori Mincho B1", serif; color: #3a2604; background: radial-gradient(circle at 35% 30%, #fff8dc, #e7c46a 60%, #a8771e); }
.fx-cutin .ci-name { font: 800 30px/1 "Shippori Mincho B1", serif; color: #fff3c4; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
.fx-cutin .ci-word { position: absolute; top: 50%; margin-top: -40px; font: 900 150px/1 "Shippori Mincho B1", serif; letter-spacing: 24px;
  background: linear-gradient(180deg, #fffbe0, #f6d77a 40%, #b8801c 70%, #fff0b0); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 #3a1a04) drop-shadow(0 0 24px rgba(255, 210, 100, .95)); }
.fx-cutin.ron .ci-word { background: linear-gradient(180deg, #fff0f0, #ff8080 40%, #b8101e 70%, #ffc0c0); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 4px 0 #3a0404) drop-shadow(0 0 24px rgba(255, 90, 90, .95)); }
.fx-cutin.from0 .ci-word, .fx-cutin.from2 .ci-word { left: 50%; }
.fx-cutin.from1 .ci-word { right: 50%; }

/* ---------- 宇宙の背景：星がゆっくり流れる。描き直しを少なくするため、少しずつ（10回/秒）動かす ---------- */
body.in-game::before { animation: none; }
body.in-game::after {
  content: ""; position: fixed; left: -50%; top: -50%; width: 200%; height: 200%; z-index: -1; pointer-events: none; will-change: transform;
  background:
    radial-gradient(1.6px 1.6px at 30px 40px, rgba(255, 255, 255, .95) 50%, transparent 51%) 0 0 / 210px 210px,
    radial-gradient(1.1px 1.1px at 140px 90px, rgba(200, 220, 255, .85) 50%, transparent 51%) 0 0 / 260px 260px,
    radial-gradient(2.2px 2.2px at 90px 170px, rgba(255, 245, 220, .9) 50%, transparent 51%) 0 0 / 390px 390px,
    radial-gradient(ellipse at 30% 40%, rgba(150, 80, 230, .16), transparent 40%),
    radial-gradient(ellipse at 70% 65%, rgba(60, 130, 240, .14), transparent 42%);
  animation: spaceDrift 240s steps(2400) infinite;
  opacity: .9;
}
@keyframes spaceDrift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-12%, 6%) rotate(6deg); } }
/* 流れ星（ときどき1本） */
.shooting-star { position: fixed; z-index: -1; width: 160px; height: 2px; pointer-events: none; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95)); box-shadow: 0 0 8px rgba(200, 220, 255, .9); }

/* ---------- 結果画面の点数：くっきり読める数字 ---------- */
.rs-deltas { gap: 10px; }
.rs-dcell { padding: 10px 12px; gap: 10px; }
.rs-dcell .rs-av { width: 46px; height: 46px; }
.rs-dname { font: 700 13px/1.3 "Shippori Mincho B1", serif; color: #fff3c4; }
.rs-pline { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.rs-before { font: 700 14px/1 "M PLUS Rounded 1c", sans-serif; color: rgba(255, 255, 255, .55); }
.rs-arrow { font-size: 13px; color: rgba(255, 255, 255, .5); }
.rs-now { font: 800 24px/1 "M PLUS Rounded 1c", sans-serif; color: #ffffff; letter-spacing: .5px; text-shadow: 0 2px 4px rgba(0, 0, 0, .7); font-variant-numeric: tabular-nums; }
.rs-ten { font-size: 12px; color: #e7c46a; }
.rs-dval { font: 900 22px/1 "M PLUS Rounded 1c", sans-serif; padding: 6px 10px; border-radius: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rs-dcell.plus .rs-dval { color: #0d3a16; background: linear-gradient(180deg, #a8ffb8, #3fcf6a); box-shadow: 0 0 12px rgba(80, 230, 120, .6); }
.rs-dcell.minus .rs-dval { color: #fff; background: linear-gradient(180deg, #ff8a8a, #c0242f); box-shadow: 0 0 12px rgba(255, 80, 80, .5); }
.rs-dcell:not(.plus):not(.minus) .rs-dval { color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .1); }
.rs-total .gain { font: 900 52px/1 "M PLUS Rounded 1c", sans-serif; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.rs-total .gainunit { font: 800 20px/1 "Shippori Mincho B1", serif; }
@media (max-width: 760px) { .rs-deltas { grid-template-columns: 1fr; } }

/* 結果画面：点数の枠は幅に合わせて折り返す（はみ出さない）。裏ドラがない時は王牌の上を空けない */
.rs-deltas { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.rs-dcell { min-width: 0; }
.rs-pline { flex-wrap: nowrap; }
.rs-dval { font-size: 18px; padding: 5px 8px; }
.rs-wall .deadwall { padding-top: 8px; }
.rs-wall.hasura .deadwall { padding-top: 58px; }
.rs-dname, .rs-dtx { text-align: left; }
/* 自動ツモ切り：抜いた北や鳴いた牌と重ならないよう、手牌の右上の空いている所に置く */
.autobtn { right: 14px; bottom: auto; top: 490px; }

/* ---------- 終局の画面：漆と金、順位ごとにアイコン ---------- */
.overlay.final2 { background: radial-gradient(ellipse at 50% 40%, rgba(60, 20, 40, .9), rgba(6, 4, 14, .96) 70%); }
.result.final2 { width: min(620px, 94vw); max-width: none; gap: 12px; padding: 20px 22px; color: #fff; border: 2px solid #c99a3e; border-radius: 18px;
  background: linear-gradient(160deg, rgba(42, 18, 48, .96), rgba(20, 10, 34, .97) 60%, rgba(14, 8, 24, .98));
  box-shadow: inset 0 0 0 1px rgba(255, 235, 180, .3), 0 20px 60px rgba(0, 0, 0, .7); }
.fn-title { text-align: center; font: 900 52px/1 "Shippori Mincho B1", serif; letter-spacing: 14px;
  background: linear-gradient(180deg, #fffbe0, #f0cc62 45%, #a8761a 70%, #ffe08a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #3a1a04) drop-shadow(0 0 18px rgba(255, 200, 80, .6)); }
.fn-list { display: flex; flex-direction: column; gap: 8px; }
.fn-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .12); }
.fn-row.rank1 { background: linear-gradient(90deg, rgba(255, 200, 80, .28), rgba(255, 200, 80, .06)); border-color: #f0cc62; box-shadow: 0 0 20px rgba(255, 200, 80, .35); }
.fn-row.me { outline: 2px solid rgba(255, 243, 196, .55); outline-offset: 2px; }
.fn-rank { width: 34px; font: 900 30px/1 "Shippori Mincho B1", serif; color: #e7c46a; text-align: center; }
.fn-row.rank1 .fn-rank { color: #ffd34d; text-shadow: 0 0 12px rgba(255, 211, 77, .9); }
.fn-av { position: relative; width: 54px; height: 54px; border-radius: 50%; background: #2a1d4a center/cover; box-shadow: 0 0 0 2px #e7c46a; flex: none; }
.fn-crown { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); font-size: 24px; color: #ffd34d; text-shadow: 0 0 10px rgba(255, 211, 77, 1); }
.fn-who { flex: 1; min-width: 0; }
.fn-name { font: 800 18px/1.2 "Shippori Mincho B1", serif; color: #fff3c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-bust { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 6px; background: #c0242f; }
.fn-pts { text-align: right; }
.fn-pts b { font: 800 24px/1 "M PLUS Rounded 1c", sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.fn-pts small { font-size: 12px; color: #e7c46a; margin-left: 2px; }
.fn-score { min-width: 76px; text-align: center; font: 900 20px/1 "M PLUS Rounded 1c", sans-serif; padding: 7px 10px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.fn-score.plus { color: #0d3a16; background: linear-gradient(180deg, #a8ffb8, #3fcf6a); }
.fn-score.minus { color: #fff; background: linear-gradient(180deg, #ff8a8a, #c0242f); }
.fn-note { text-align: center; font-size: 12px; color: rgba(255, 255, 255, .55); }

/* ---------------------------------------------------------------- クレジット */
.credit-btn { opacity: .75; margin-top: 6px; }
.overlay.credits .result { max-width: 560px; text-align: center; }
.cr-sec { margin: 14px 0; }
.cr-head { color: #f3d27a; font-weight: 700; letter-spacing: .2em; font-size: 14px; margin-bottom: 4px; }
.cr-names { font-size: 13px; line-height: 1.9; color: #f4ecd8; }
.cr-names span { display: inline-block; white-space: nowrap; margin: 0 .6em; }

/* ---------------------------------------------------------------- GSAP のカットイン */
.fx-cutin .ci-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #fff, rgba(255, 240, 200, .85) 40%, rgba(255, 220, 140, .4)); pointer-events: none; }
.fx-cutin.ron .ci-flash { background: radial-gradient(circle at 50% 50%, #fff, rgba(255, 210, 210, .85) 40%, rgba(255, 80, 80, .4)); }
.fx-cutin .ci-bar { position: absolute; left: 0; right: 0; height: 13vh; background: linear-gradient(180deg, #000, #0a0612); z-index: 0; }
.fx-cutin .ci-bar.top { top: 0; border-bottom: 2px solid rgba(240, 204, 98, .7); }
.fx-cutin .ci-bar.bottom { bottom: 0; border-top: 2px solid rgba(240, 204, 98, .7); }
.fx-cutin .ci-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------------------------------------------------------------- ステージ（背景）：宇宙・夜桜の和・夏祭り */
body.in-game[data-stage="space"] { background: #04040f url("/static/stage/space.webp") center / cover no-repeat fixed; }
body.in-game[data-stage="wa"] { background: #0b0f2e url("/static/stage/wa.webp") center / cover no-repeat fixed; }
body.in-game[data-stage="matsuri"] { background: #070a26 url("/static/stage/matsuri.webp") center / cover no-repeat fixed; }
/* 宇宙：絵の上に、ゆっくり流れる星の層を重ねる（星雲は絵にあるので、ここは星だけ） */
body.in-game[data-stage="space"]::after {
  background:
    radial-gradient(1.6px 1.6px at 30px 40px, rgba(255, 255, 255, .95) 50%, transparent 51%) 0 0 / 210px 210px,
    radial-gradient(1.1px 1.1px at 140px 90px, rgba(200, 220, 255, .85) 50%, transparent 51%) 0 0 / 260px 260px,
    radial-gradient(2.2px 2.2px at 90px 170px, rgba(255, 245, 220, .9) 50%, transparent 51%) 0 0 / 390px 390px;
  opacity: .7;
}
body.in-game:not([data-stage="space"])::after { display: none; }
.stage-petal { position: fixed; top: 0; z-index: -1; pointer-events: none; border-radius: 80% 0 80% 0;
  background: radial-gradient(circle at 30% 30%, #fff0f6, #ffb8d4 60%, #f08cb4); box-shadow: 0 0 6px rgba(255, 190, 220, .6); }
.stage-fw { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------------------------------------------------------------- 集中線をやめて、金の菊の紋様の光に（ツモ・ロン・鳴き・リーチの発声、カードを引く、ツモボタン） */
.fx-shout .burst, .fx-carddraw .rays, .bigrays {
  --k1: #fff6c8; --k2: #ffd25a; --k3: #d9901c;
  background: radial-gradient(circle, var(--k1) 0%, var(--k2) 38%, var(--k3) 62%, transparent 74%);
  -webkit-mask: url("/static/fx/kiku.svg") center / contain no-repeat; mask: url("/static/fx/kiku.svg") center / contain no-repeat;
}
.fx-shout .burst { animation: kikuIn .55s cubic-bezier(.2, 1.4, .4, 1) forwards, kikuSpin 16s linear infinite; }
.fx-carddraw .rays { animation: kikuSpin 18s linear infinite; opacity: .85; }
.bigrays { animation: kikuSpin 20s linear infinite; opacity: .55; width: 380px; height: 380px; }
/* 菊の後ろのやわらかい光と、反対に回る小さな菊 */
.fx-shout::before, .fx-shout::after { content: ""; position: absolute; left: 0; top: 0; pointer-events: none; transform: translate(-50%, -50%); }
.fx-shout::before { width: 460px; height: 460px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--glow, #ffd25a) 55%, transparent) 0%, color-mix(in srgb, var(--glow, #ffd25a) 18%, transparent) 40%, transparent 68%);
  animation: kikuGlow .6s ease-out forwards; }
.fx-shout::after { width: 200px; height: 200px; opacity: .9;
  background: radial-gradient(circle, #fff 0%, var(--glow, #ffd25a) 55%, transparent 75%);
  -webkit-mask: url("/static/fx/kiku.svg") center / contain no-repeat; mask: url("/static/fx/kiku.svg") center / contain no-repeat;
  animation: kikuIn .7s .08s cubic-bezier(.2, 1.4, .4, 1) both, kikuSpinRev 10s linear infinite; }
.fx-shout.call::before { width: 300px; height: 300px; }
.fx-shout.call::after { width: 130px; height: 130px; }
.fx-shout.ron .burst { --k1: #fff0f2; --k2: #ff7a90; --k3: #c8102e; }
.fx-shout.ron { --glow: #ff6a80; }
.fx-shout.call .burst { --k1: #f0fbff; --k2: #8adcff; --k3: #2a8ad8; }
.fx-shout.call { --glow: #8adcff; }
.fx-shout.kan .burst { --k1: #fbf0ff; --k2: #c8a0ff; --k3: #7a3ad8; }
.fx-shout.kan { --glow: #c8a0ff; }
.fx-shout.nuki .burst { --k1: #f0fff2; --k2: #8af0a0; --k3: #2aa04a; }
.fx-shout.nuki { --glow: #8af0a0; }
.fx-shout.riichi .burst { --k1: #fff0f0; --k2: #ff8a6a; --k3: #d0203a; }
.fx-shout.riichi { --glow: #ff8a6a; }
@keyframes kikuIn { from { opacity: 0; transform: scale(.2) rotate(-60deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } }
/* 回転（rotate）と中央寄せがずれないよう、中央寄せは translate で行う */
.fx-shout .burst, .fx-shout::before, .fx-shout::after, .fx-carddraw .rays, .bigrays { transform: none; translate: -50% -50%; }
@keyframes kikuSpin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes kikuSpinRev { from { rotate: 0deg; } to { rotate: -360deg; } }
@keyframes kikuGlow { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }

/* カットインの帯：線の模様をやめて、金箔が散った帯に、光がひと筋すべる */
.fx-cutin .ci-sheen {
  background:
    radial-gradient(2px 2px at 20px 30px, rgba(255, 230, 150, .9) 50%, transparent 51%) 0 0 / 90px 70px,
    radial-gradient(3px 2px at 60px 50px, rgba(255, 245, 200, .75) 50%, transparent 51%) 0 0 / 130px 90px,
    radial-gradient(1.5px 1.5px at 40px 10px, rgba(255, 210, 120, .8) 50%, transparent 51%) 0 0 / 70px 110px,
    radial-gradient(ellipse at 50% 50%, rgba(255, 220, 140, .18), transparent 70%);
}
.fx-cutin .ci-sheen::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -40%;
  background: linear-gradient(100deg, transparent, rgba(255, 250, 220, .55), transparent);
  animation: ciSweep 1.1s .35s ease-in-out forwards; }
@keyframes ciSweep { to { left: 120%; } }

/* カットインの出どころ：あがった人の名札が光り、そこから光の道がまん中へ伸びる */
.fx-cutin .ci-origin { position: absolute; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle, #fff 0%, rgba(255, 230, 150, .9) 25%, rgba(255, 190, 80, .45) 50%, transparent 70%); }
.fx-cutin.ron .ci-origin { background: radial-gradient(circle, #fff 0%, rgba(255, 190, 200, .9) 25%, rgba(255, 80, 100, .45) 50%, transparent 70%); }
.fx-cutin .ci-beam { position: absolute; height: 26px; margin-top: -13px; transform-origin: 0 50%; z-index: 3; border-radius: 13px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(255, 220, 120, .7) 60%, rgba(255, 200, 80, 0));
  box-shadow: 0 0 24px rgba(255, 210, 110, .9); }
.fx-cutin.ron .ci-beam { background: linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(255, 120, 140, .7) 60%, rgba(255, 60, 90, 0)); box-shadow: 0 0 24px rgba(255, 90, 110, .9); }
.fx-cutin .ci-flash { opacity: 0; }

/* ---------------------------------------------------------------- 操作ボタンを統一：黒漆に金の縁。種類ごとに漆の色だけ変える */
.act {
  --lq1: #3a2a1c; --lq2: #120a05; --rim: #f0cc62;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 10px 22px 11px; border: 0; border-radius: 10px; cursor: pointer;
  font: 700 18px/1 "Shippori Mincho B1", serif; letter-spacing: .1em; color: #fff3c4;
  text-shadow: 0 1px 0 #000, 0 0 10px rgba(255, 210, 120, .45);
  background: radial-gradient(ellipse at 50% -10%, rgba(255, 240, 200, .22), transparent 60%), linear-gradient(180deg, var(--lq1), var(--lq2));
  box-shadow: inset 0 0 0 1.5px var(--rim), inset 0 0 0 3.5px rgba(0, 0, 0, .55), inset 0 0 0 4.5px rgba(240, 204, 98, .35),
    0 0 0 1px #000, 0 6px 14px rgba(0, 0, 0, .6);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.act:hover { filter: brightness(1.15); box-shadow: inset 0 0 0 1.5px var(--rim), inset 0 0 0 3.5px rgba(0, 0, 0, .55), inset 0 0 0 4.5px rgba(240, 204, 98, .5),
  0 0 0 1px #000, 0 0 16px rgba(255, 210, 110, .55), 0 6px 14px rgba(0, 0, 0, .6); }
.act:active { transform: translateY(2px); filter: brightness(.95); }
.act.win { --lq1: #b3182c; --lq2: #4a0008; }
.act.call { --lq1: #1d4f9c; --lq2: #071a3a; }
.act.kan { --lq1: #5a2a9c; --lq2: #1c0838; }
.act.riichi { --lq1: #a8142a; --lq2: #3a0008; }
.act.nuki { --lq1: #1d6a4e; --lq2: #052419; padding: 7px 18px 7px 9px; }
.act.nuki.cardpick { --lq1: #6a1a3a; --lq2: #24050f; }
.act.skip { --lq1: #34343c; --lq2: #121216; --rim: #b8b0a0; color: #e8e2d4; }
.act.on { --rim: #fff3c4; box-shadow: inset 0 0 0 2px #fff3c4, inset 0 0 0 4px rgba(0, 0, 0, .5), 0 0 0 1px #000, 0 0 20px rgba(255, 220, 130, .9), 0 6px 14px rgba(0, 0, 0, .6); }
.act.withtile { padding: 6px 18px 6px 8px; }
.act .act-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.act .act-tx b { font-size: 18px; letter-spacing: .14em; }
.act .act-tx small { font: 600 12px/1 "Shippori Mincho B1", serif; letter-spacing: .08em; color: #f3dc9a; }
.act .tile { box-shadow: var(--tile3d), 0 0 0 1.5px #f0cc62; }
.act .act-card { display: inline-block; width: 26px; height: 36px; border-radius: 3px; box-shadow: 0 0 0 1.5px #f0cc62, 0 2px 4px rgba(0, 0, 0, .6); }
.actions { gap: 12px; }
/* 「今回は引かない」なども同じ作りに（小さめ） */
.buyskip { font: 600 12px/1 "Shippori Mincho B1", serif; letter-spacing: .08em; color: #e8e2d4; padding: 7px 14px; border-radius: 8px;
  background: linear-gradient(180deg, #34343c, #121216); box-shadow: inset 0 0 0 1px #b8b0a0, 0 0 0 1px #000, 0 3px 8px rgba(0, 0, 0, .5); }
/* 対局中の画面に出るふつうのボタン（選ぶ画面・結果画面など）も漆と金に */
body.in-game .btn { font: 700 16px/1 "Shippori Mincho B1", serif; letter-spacing: .1em; color: #fff3c4; border: 0; border-radius: 10px; padding: 11px 22px;
  background: radial-gradient(ellipse at 50% -10%, rgba(255, 240, 200, .2), transparent 60%), linear-gradient(180deg, #3a2a1c, #120a05);
  box-shadow: inset 0 0 0 1.5px #f0cc62, inset 0 0 0 3.5px rgba(0, 0, 0, .55), 0 0 0 1px #000, 0 5px 12px rgba(0, 0, 0, .55); text-shadow: 0 1px 0 #000; }
body.in-game .btn.gold { color: #3a2204; text-shadow: 0 1px 0 rgba(255, 250, 220, .7);
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 250, 220, .6), transparent 55%), linear-gradient(180deg, #f6d36a, #c9861c 55%, #8a5208);
  box-shadow: inset 0 0 0 1.5px #fff3c4, inset 0 -4px 8px rgba(80, 30, 0, .4), 0 0 0 1px #3a2204, 0 0 0 3px #f0cc62, 0 0 0 4px #3a2204, 0 6px 14px rgba(0, 0, 0, .55); }
body.in-game .btn:hover { filter: brightness(1.12); }
body.in-game .btn.small { font-size: 13px; padding: 8px 14px; }
.act .act-card { position: static; flex: none; transform: none; margin: 0; }

/* ---------------------------------------------------------------- 牌を運ぶ妖怪のしもべ（式神・狐火・折り鶴） */
.fx-servant { position: fixed; left: 0; top: 0; z-index: 31; pointer-events: none; will-change: transform; }
.fx-servant .sv-body { position: relative; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .45)) drop-shadow(0 0 10px rgba(255, 240, 200, .55)); }
.fx-servant .sv-body svg { display: block; overflow: visible; }
/* 吊り糸（朱色）：しもべの下から牌まで */
.fx-servant .sv-thread { position: absolute; left: 50%; top: 50%; width: 2px; height: 70px; margin-left: -1px; opacity: 0;
  background: linear-gradient(180deg, #ff5a4a, #c8202c); box-shadow: 0 0 4px rgba(255, 90, 70, .8); }
/* 式神：ひらひら揺れる */
.fx-servant.shiki .sv-body { animation: svFlutter .5s ease-in-out infinite alternate; transform-origin: 50% 20%; }
@keyframes svFlutter { from { transform: rotate(-6deg) skewX(4deg); } to { transform: rotate(6deg) skewX(-4deg); } }
/* 折り鶴：羽ばたく */
.fx-servant.tsuru .sv-thread { height: 62px; left: 52%; }
.fx-servant.tsuru .sv-wing { transform-box: fill-box; transform-origin: 30% 100%; animation: svFlap .26s ease-in-out infinite alternate; }
.fx-servant.tsuru .sv-wing.back { animation-delay: -.05s; }
@keyframes svFlap { from { transform: scaleY(1); } to { transform: scaleY(.3); } }
.fx-servant.tsuru .sv-body { animation: svBob .52s ease-in-out infinite alternate; }
@keyframes svBob { from { transform: translateY(-3px); } to { transform: translateY(4px); } }
/* 狐火：青白い炎が3つ、牌のまわりを回る */
.fx-servant.flames, .fx-servant.hotaru { width: 120px; height: 120px; }
.fx-servant.flames .sv-ring { position: absolute; inset: 0; animation: svOrbit 1.1s linear infinite; }
.fx-servant.flames .sv-fire { position: absolute; left: 50%; top: 50%; width: 26px; height: 36px; margin: -18px 0 0 -13px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 70%, #ffffff 0%, #bff0ff 25%, #5ab8ff 55%, rgba(60, 120, 255, 0) 75%);
  filter: blur(.5px) drop-shadow(0 0 10px #6ac8ff);
  transform: rotate(calc(var(--i) * 120deg)) translateY(-50px) rotate(calc(var(--i) * -120deg)); animation: svFlicker .18s ease-in-out infinite alternate; }
.fx-servant.flames .sv-glow, .fx-servant.hotaru .sv-glow { position: absolute; inset: 10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 210, 255, .45), rgba(90, 160, 255, .12) 50%, transparent 70%); }
@keyframes svOrbit { to { transform: rotate(360deg); } }
@keyframes svFlicker { from { scale: 1 1; opacity: .85; } to { scale: .9 1.12; opacity: 1; } }
/* 通った跡の光の粒 */
.fx-sv-spark { position: fixed; width: 8px; height: 8px; border-radius: 50%; z-index: 30; pointer-events: none;
  background: radial-gradient(circle, #fff, rgba(255, 230, 160, .9) 40%, transparent 70%); }
.fx-sv-spark.kitsune { background: radial-gradient(circle, #fff, rgba(130, 200, 255, .9) 40%, transparent 70%); }
.fx-sv-spark.tsuru { background: radial-gradient(circle, #fff, rgba(255, 150, 140, .9) 40%, transparent 70%); }

/* ---------------------------------------------------------------- 向聴の札（漆に金の字） */
.shanten { display: flex; align-items: baseline; gap: 8px; padding: 6px 16px 7px; border-radius: 8px; top: 552px;
  font: 700 18px/1 "Shippori Mincho B1", serif; letter-spacing: .12em; color: #f6e2a6;
  background: radial-gradient(ellipse at 50% -20%, rgba(255, 240, 200, .18), transparent 60%), linear-gradient(180deg, #2a1d14, #0e0805);
  box-shadow: inset 0 0 0 1.5px #c9a24a, inset 0 0 0 3.5px rgba(0, 0, 0, .55), 0 0 0 1px #000, 0 4px 10px rgba(0, 0, 0, .55);
  text-shadow: 0 1px 0 #000; }
.shanten b { font-weight: 800; }
.shanten small { font: 600 11px/1 "Shippori Mincho B1", serif; letter-spacing: .06em; color: #c8b07a; }
.shanten.ready { color: #3a2204; text-shadow: 0 1px 0 rgba(255, 250, 220, .7);
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 250, 220, .7), transparent 55%), linear-gradient(180deg, #f6d36a, #c9861c 60%, #8a5208);
  box-shadow: inset 0 0 0 1.5px #fff3c4, 0 0 0 1px #3a2204, 0 0 0 3px #f0cc62, 0 0 18px rgba(255, 210, 100, .8); animation: tpGlow 1.6s ease-in-out infinite; }
.shanten.ready small { color: #5a3a08; }
@keyframes tpGlow { 50% { box-shadow: inset 0 0 0 1.5px #fff3c4, 0 0 0 1px #3a2204, 0 0 0 3px #f0cc62, 0 0 30px rgba(255, 220, 120, 1); } }

/* ---------------------------------------------------------------- テンパイになる捨て牌の「聴」と、待ちの板 */
.hand .tile.tenpai { box-shadow: var(--tile3d), 0 0 0 2px #f0cc62, 0 0 14px rgba(255, 210, 100, .85); }
.hand .tile .tp-mark { position: absolute; left: 50%; top: -15px; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font: 900 13px/1 "Shippori Mincho B1", serif; font-style: normal; color: #3a2204;
  background: radial-gradient(circle at 35% 30%, #fff8dc, #f0cc62 60%, #a8771e); box-shadow: 0 0 0 1.5px #3a2204, 0 0 10px rgba(255, 210, 100, .9); pointer-events: none; z-index: 2; }
.hand .tile.sel .tp-mark { top: -17px; }
.waitpanel { position: absolute; left: 340px; top: 548px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 8px; border-radius: 10px;
  font: 700 14px/1 "Shippori Mincho B1", serif; color: #f6e2a6; letter-spacing: .08em;
  background: linear-gradient(180deg, rgba(42, 29, 20, .92), rgba(14, 8, 5, .92)); box-shadow: inset 0 0 0 1.5px #c9a24a, 0 0 0 1px #000, 0 4px 10px rgba(0, 0, 0, .5); pointer-events: none; }
.waitpanel .wp-hint { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #3a2204;
  background: radial-gradient(circle at 35% 30%, #fff8dc, #f0cc62 60%, #a8771e); }
.waitpanel .wp-guide { font-size: 13px; }
.waitpanel.on { box-shadow: inset 0 0 0 1.5px #f0cc62, 0 0 0 1px #000, 0 0 16px rgba(255, 210, 100, .7); }
.waitpanel .wp-title { padding: 0 4px; color: #ffe9a8; }
.waitpanel .wp-tile { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.waitpanel .wp-tile small { font-size: 11px; color: #e8d7a8; }
.waitpanel .wp-total { margin-left: 4px; color: #fff3c4; }

/* ---------------------------------------------------------------- 局の始めのカード購入：卓を暗くして、真ん中で大きく聞く */
.buyshade { position: absolute; inset: 0; z-index: 7; background: radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, .35), rgba(0, 0, 0, .7)); animation: shadeIn .3s ease-out both; }
@keyframes shadeIn { from { opacity: 0; } }
.buypanel { top: 300px; z-index: 9; gap: 12px; padding: 20px 30px 16px; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 230, 160, .16), transparent 60%), linear-gradient(180deg, rgba(42, 29, 20, .96), rgba(14, 8, 5, .96));
  box-shadow: inset 0 0 0 1.5px #f0cc62, inset 0 0 0 4px rgba(0, 0, 0, .5), inset 0 0 0 5px rgba(240, 204, 98, .35), 0 0 0 1px #000, 0 0 40px rgba(255, 200, 90, .35), 0 16px 34px rgba(0, 0, 0, .7);
  animation: buyIn .4s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes buyIn { from { opacity: 0; transform: translateX(-50%) scale(.8); } }
.buyq { font: 800 22px/1.2 "Shippori Mincho B1", serif; letter-spacing: .1em; color: #fff3c4; text-shadow: 0 2px 0 #000, 0 0 14px rgba(255, 210, 120, .6); }
.buyrow { display: flex; align-items: center; gap: 16px; }
.buyrow .buyskip2 { min-height: 70px; padding: 0 26px; font-size: 20px; }
.buynote { font: 600 12px/1 "Shippori Mincho B1", serif; color: #c8b07a; letter-spacing: .06em; }
.buypanel .buyskip { display: none; }

/* 立直のカットイン：赤い帯、文字は少し小さめ */
.fx-cutin.riichi .ci-word { font-size: 118px; letter-spacing: 14px; }
/* 鬼火：紫と赤の炎 */
.fx-servant.onibi .sv-fire { background: radial-gradient(ellipse at 50% 70%, #ffffff 0%, #ffc0f0 22%, #c050ff 52%, rgba(160, 30, 200, 0) 75%); filter: blur(.5px) drop-shadow(0 0 10px #d060ff); }
.fx-servant.onibi .sv-glow { background: radial-gradient(circle, rgba(220, 120, 255, .45), rgba(180, 60, 255, .12) 50%, transparent 70%); }
/* 蛍：黄緑の光の粒が飛び回る */
.fx-servant.hotaru .sv-fly { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: radial-gradient(circle, #ffffe0, #d8ff6a 45%, rgba(170, 255, 80, 0) 75%); box-shadow: 0 0 10px #c8ff5a;
  animation: svFly var(--d) linear infinite, svBlink .7s ease-in-out infinite alternate; animation-delay: var(--dl), var(--dl); }
@keyframes svFly { from { transform: rotate(var(--a)) translateX(var(--r)) translateY(-4px); } 50% { transform: rotate(calc(var(--a) + 180deg)) translateX(calc(var(--r) * .8)) translateY(5px); }
  to { transform: rotate(calc(var(--a) + 360deg)) translateX(var(--r)) translateY(-4px); } }
@keyframes svBlink { from { opacity: .45; } to { opacity: 1; } }
.fx-servant.hotaru .sv-glow { background: radial-gradient(circle, rgba(220, 255, 140, .35), rgba(180, 255, 80, .1) 50%, transparent 70%); }
/* 紙の蝶：左右の羽がはばたく */
.fx-servant.chou .sv-thread { height: 56px; }
.fx-servant.chou .sv-bwing { transform-box: view-box; animation: svBut .3s ease-in-out infinite alternate; }
.fx-servant.chou .sv-bwing.left { transform-origin: 60px 46px; }
.fx-servant.chou .sv-bwing.right { transform-origin: 60px 46px; }
@keyframes svBut { from { transform: scaleX(1); } to { transform: scaleX(.25); } }
.fx-servant.chou .sv-body { animation: svBob .6s ease-in-out infinite alternate; }
.fx-sv-spark.onibi { background: radial-gradient(circle, #fff, rgba(210, 110, 255, .9) 40%, transparent 70%); }
.fx-sv-spark.hotaru { background: radial-gradient(circle, #fff, rgba(200, 255, 100, .9) 40%, transparent 70%); }
.fx-sv-spark.chou { background: radial-gradient(circle, #fff, rgba(255, 190, 220, .9) 40%, transparent 70%); }

/* ---------------------------------------------------------------- しもべを選ぶ画面 */
.overlay.svpick .result { max-width: 760px; text-align: center; }
.svp-note { font-size: 13px; color: #e8d7a8; margin: 4px 0 14px; }
.svp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.svp-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 10px 12px; border: 0; border-radius: 12px; cursor: pointer; color: #fff3c4;
  background: linear-gradient(180deg, #2a1d14, #0e0805); box-shadow: inset 0 0 0 1.5px rgba(201, 162, 74, .6), 0 4px 10px rgba(0, 0, 0, .5); }
.svp-item.on { box-shadow: inset 0 0 0 2px #f0cc62, 0 0 0 2px #f0cc62, 0 0 18px rgba(255, 210, 100, .7); }
.svp-item b { font: 800 17px/1 "Shippori Mincho B1", serif; letter-spacing: .1em; }
.svp-item small { font-size: 11px; color: #d8c69a; line-height: 1.4; }
.svp-stage { position: relative; width: 100%; height: 150px; border-radius: 8px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 80%, #1e3a6a, #0a1530 70%); }
.svp-stage .svp-tile { position: absolute; left: 50%; top: 100px; transform: translate(-50%, -50%); }
.svp-stage .fx-servant.demo { position: absolute; left: 50%; top: 100px; transform: translate(-50%, -50%); animation: svDemo 2.4s ease-in-out infinite; }
.svp-stage .fx-servant.demo:not(.flames):not(.hotaru) { top: 46px; }
.svp-stage .fx-servant.demo .sv-thread { opacity: 1; }
@keyframes svDemo { 50% { translate: 0 -6px; } }

/* ---------------------------------------------------------------- 相手のカード：名札の下に裏向きで扇に並べる */
.plate { overflow: visible; }
.pl-fan { position: absolute; top: calc(100% + 6px); display: flex; align-items: flex-end; height: 44px; pointer-events: none; }
.plate.left .pl-fan { left: 18px; }
.plate.right .pl-fan { right: 18px; flex-direction: row-reverse; }
.pl-cb { width: 28px; height: 40px; margin-right: -12px; border-radius: 3px; transform-origin: 50% 120%; transform: rotate(calc(var(--i) * 6deg));
  background: url("/static/cardback.svg") center / 100% 100% no-repeat, #5e0a16; box-shadow: 0 0 0 1px #f0cc62, 0 3px 6px rgba(0, 0, 0, .6); }
.plate.right .pl-cb { margin-right: 0; margin-left: -12px; }
.pl-fanc { align-self: center; margin: 0 0 0 20px; font: 700 13px/1 "Shippori Mincho B1", serif; color: #f6e2a6; text-shadow: 0 1px 2px #000; }
.plate.right .pl-fanc { margin: 0 20px 0 0; }

/* 発動中のカード：相手の分は大きく、名札とカードの下に。自分の分は左下（ボタンと重ならない所） */
.activecol.left, .activecol.right { top: 180px; }
.activecol.left .activecard + .activecard, .activecol.right .activecard + .activecard { margin-top: -70px; }
.activecol.mine { left: 14px; right: auto; top: auto; bottom: 8px; align-items: flex-start; }
.svbtn { position: absolute; right: 14px; top: 446px; z-index: 6; }
/* 古い .act.skip などの白い背景に負けないよう、漆の地を強く指定 */
.act.act { color: #fff3c4; background: radial-gradient(ellipse at 50% -10%, rgba(255, 240, 200, .22), transparent 60%), linear-gradient(180deg, var(--lq1), var(--lq2));
  box-shadow: inset 0 0 0 1.5px var(--rim), inset 0 0 0 3.5px rgba(0, 0, 0, .55), inset 0 0 0 4.5px rgba(240, 204, 98, .35), 0 0 0 1px #000, 0 6px 14px rgba(0, 0, 0, .6); }
.act.act.skip { color: #e8e2d4; }
.act.act.on { box-shadow: inset 0 0 0 2px #fff3c4, inset 0 0 0 4px rgba(0, 0, 0, .5), 0 0 0 1px #000, 0 0 20px rgba(255, 220, 130, .9), 0 6px 14px rgba(0, 0, 0, .6); }
/* 「聴」の印が隠れないよう、向聴の札と待ちの板は少し上に */
.shanten { top: 522px; }
.waitpanel { top: 518px; }
.hand .tile .tp-mark { z-index: 5; }
.ackbar { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); z-index: 60; display: flex; gap: 14px; align-items: center; }

/* ---------------------------------------------------------------- 演出を軽く：動く物は自分の層に乗せ、光の効果は一度だけ描いて使い回す */
.fx-cutin { will-change: translate; }
.fx-cutin .ci-band, .fx-cutin .ci-art, .fx-cutin .ci-plate, .fx-cutin .ci-word, .fx-cutin .ci-origin, .fx-cutin .ci-beam, .fx-cutin .ci-bar, .fx-cutin .ci-flash { will-change: transform, opacity; }
.fx-cutin .ci-art { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 18px rgba(255, 220, 140, .8)); }
/* しもべ：光の効果は揺れない中身（svg）に付け、揺れる外側は層として動かすだけにする */
.fx-servant .sv-body { filter: none; will-change: transform; }
.fx-servant .sv-body svg { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .45)) drop-shadow(0 0 8px rgba(255, 240, 200, .5)); }
.fx-servant .sv-fire, .fx-servant .sv-fly { will-change: transform, opacity; }
.fx-shout .burst, .fx-shout::before, .fx-shout::after { will-change: transform, opacity, rotate; }
.act.mulbtn { --lq1: #2a3f7a; --lq2: #0a1430; min-height: 70px; padding: 8px 20px 8px 12px; }
.act.mulbtn .act-card { width: 30px; height: 42px; }
.buybtn:disabled { opacity: .45; filter: grayscale(.6); animation: none; cursor: default; }
.buyrow > * { white-space: nowrap; flex: none; } .buypanel { width: max-content; }

/* 結果画面：手の値段の言い方（「6,000オール」など） */
.rs-total .valuetext { width: 100%; text-align: center; font: 700 16px/1 "Shippori Mincho B1", serif; color: #f3dc9a; letter-spacing: .08em; margin-top: 4px; }
/* カード演出のあり・なし（右の列：しもべ・カード演出・自動ツモ切り） */
.autobtn.cfxbtn { top: 446px; }
.svbtn { top: 402px; }
/* 配牌：配られた牌が上から手元に入る */
.hand .tile.dealin { animation: dealIn .35s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes dealIn { from { opacity: 0; transform: translateY(-40px) scale(.85); } }

/* 自分の手番の案内 */
.yourturn { position: absolute; left: 50%; top: 470px; transform: translateX(-50%); z-index: 6; pointer-events: none; white-space: nowrap;
  padding: 7px 26px 8px; border-radius: 999px; font: 800 18px/1 "Shippori Mincho B1", serif; letter-spacing: .16em; color: #fff3c4;
  background: linear-gradient(180deg, rgba(42, 29, 20, .92), rgba(14, 8, 5, .92));
  box-shadow: inset 0 0 0 1.5px #f0cc62, 0 0 0 1px #000, 0 0 18px rgba(255, 210, 100, .55); text-shadow: 0 1px 0 #000;
  animation: yourTurn 1.6s ease-in-out infinite; }
@keyframes yourTurn { 50% { opacity: .72; } }

/* 結果画面：入り切らない時は中身を縮めて全部見せる（スクロールさせない） */
.result.res2 { overflow: hidden; justify-content: flex-start; }
.result.res2 > .rs-fit { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; flex: none; transform-origin: 50% 0; }
.result.res2 > .rs-fit > * { max-width: 100%; }

/* ---------------------------------------------------------------- ドラ：枠はやめて、牌の面がほんのり金色に光り、小さな星がきらめく */
.tile.isdora::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: none; animation: none; opacity: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 236, 160, .38), rgba(255, 214, 110, .12) 55%, transparent 75%),
    linear-gradient(115deg, transparent 35%, rgba(255, 250, 225, .55) 48%, transparent 60%); }
.tile.isdora::after { content: ""; display: block; position: absolute; inset: -6%; pointer-events: none; mix-blend-mode: normal;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cg fill='%23fff6c8'%3E%3Cpath d='M10 12 L11.2 15.8 L15 17 L11.2 18.2 L10 22 L8.8 18.2 L5 17 L8.8 15.8Z'/%3E%3Cpath d='M50 58 L50.9 61.1 L54 62 L50.9 62.9 L50 66 L49.1 62.9 L46 62 L49.1 61.1Z'/%3E%3Cpath d='M47 9 L47.6 11.4 L50 12 L47.6 12.6 L47 15 L46.4 12.6 L44 12 L46.4 11.4Z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 2px rgba(255, 220, 120, .9));
  animation: doraTwinkle 2.2s ease-in-out infinite; will-change: opacity; }
@keyframes doraTwinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
/* 手牌で選んだ時の金の縁と重ならないよう、手牌のドラは影だけ少し金色に */
.hand .tile.isdora { box-shadow: var(--tile3d), 0 0 10px rgba(255, 210, 100, .45); }
/* ドラの光の調整：絵柄はかすませず、ふちだけほんのり金色。星は金色ではっきり */
.tile.isdora::before { background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(255, 214, 110, .28) 85%, rgba(255, 200, 80, .4) 100%),
  linear-gradient(115deg, transparent 40%, rgba(255, 250, 225, .22) 50%, transparent 58%); }
.tile.isdora::after { inset: -10%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cg fill='%23ffd84a'%3E%3Cpath d='M9 8 L10.6 13.4 L16 15 L10.6 16.6 L9 22 L7.4 16.6 L2 15 L7.4 13.4Z'/%3E%3Cpath d='M52 60 L53.2 63.8 L57 65 L53.2 66.2 L52 70 L50.8 66.2 L47 65 L50.8 63.8Z'/%3E%3Cpath d='M50 6 L50.8 8.7 L53.5 9.5 L50.8 10.3 L50 13 L49.2 10.3 L46.5 9.5 L49.2 8.7Z'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='9' cy='15' r='1.2'/%3E%3Ccircle cx='52' cy='65' r='1'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 2.5px rgba(255, 200, 60, 1)); }

/* ---------- 四人麻雀：対面の席（上）と、チーのボタン ---------- */
.fx-cutin.from3 .ci-art { left: 4%; }
.fx-cutin.from3 .ci-plate, .fx-cutin.from3 .ci-word { left: 50%; }
.fx-intro.from3 { left: 50%; top: 14%; animation: introTop .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes introTop { 0% { transform: translate(-50%, -120%); opacity: 0; } 35% { transform: translate(-50%, 0); opacity: 1; } 100% { transform: translate(-50%, 0); opacity: 1; } }
.fx-cardscene.from3 .fx-beam { background: linear-gradient(180deg, rgba(255, 230, 150, .55), rgba(255, 230, 150, 0) 55%); }
.seatlab.top { left: 50%; top: 6px; transform: translateX(-50%) rotate(180deg); }
.chishape { display: inline-flex; gap: 1px; margin-right: 6px; }
.chishape .tile.chicalled { box-shadow: 0 0 0 2px #ffd34d, 0 0 10px rgba(255, 211, 77, .9); border-radius: 3px; }
/* 四麻の席の配置：対面は左上、上家・下家は左右の真ん中あたり */
.rot.across .opprow { top: 566px; }
.rot.across .pond { top: 420px; }
/* 対面の名札：真ん中の一番上に、ほかの人と同じ大きさで。卓は少し下げて、名札の下に対面の手牌が見えるようにする */
.stage.four .plate.top { left: 50%; top: 6px; transform: translateX(-50%); }
.stage.four .plate.top .pl-fan { display: none; }
.stage.four .scene { transform: translateY(56px); }
.stage.four .plate.left { top: 150px; }
.stage.four .plate.right { top: 150px; }
/* ドラと道具ボタンは右上にまとめて、真ん中の上を対面の手牌に空ける */
.stage.four .topinfo { left: auto; right: 14px; width: 560px; align-items: flex-end; }
.stage.four .toprow { flex-wrap: wrap; justify-content: flex-end; }
.claimbar { z-index: 12; }

/* ---------- ホーム画面（横画面）：夕焼けの天守閣と朱塗りの闘技場。右に漆塗りのメニュー板 ---------- */
/* ロビーなど対局の外は、同じ絵を暗くぼかして敷く */
body:not(.in-game) {
  background: linear-gradient(rgba(30, 10, 40, .55), rgba(30, 10, 40, .7)), url("/static/stage/home_bg.webp") center / cover fixed #2a1238;
  min-height: 100vh;
}
body.home-on { overflow: hidden; background: #2a1238; }

.home-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.hb-art { position: absolute; inset: -2%; background: center 35% / cover no-repeat; }
.hb-art { background-image: url("/static/stage/home_bg.webp"); animation: hbZoom 40s ease-in-out infinite alternate; }
@keyframes hbZoom { from { transform: scale(1); } to { transform: scale(1.06) translateY(-1%); } }
@keyframes hbSway { from { transform: translateX(-.4%) rotate(-.25deg); } to { transform: translateX(.4%) rotate(.25deg); } }
/* 月の光の筋がゆっくり回る */
.hb-rays {
  position: absolute; left: 60%; top: 15%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(200, 210, 255, .10) 0deg 3deg, rgba(200, 210, 255, 0) 3deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .6) 18%, transparent 45%); mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .6) 18%, transparent 45%);
  mix-blend-mode: screen; animation: hbRays 60s linear infinite;
}
@keyframes hbRays { to { transform: rotate(360deg); } }
.hb-dust { position: absolute; inset: 0; width: 100%; height: 100%; }

.stage.home { overflow: visible; }

/* 題字 */
.home-logo { position: absolute; left: 40px; top: 18px; text-align: left; }
.home-title {
  margin: 0; font: 900 132px/1 "Shippori Mincho B1", "Shippori Mincho", serif; letter-spacing: 6px;
  background: linear-gradient(180deg, #fffdf0 0%, #ffe68e 30%, #e9a82a 55%, #b8741a 62%, #ffe9a0 80%, #fff6d0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #fff4c8) drop-shadow(0 5px 0 #5a1608) drop-shadow(0 8px 0 #2a0804) drop-shadow(0 0 26px rgba(255, 190, 80, .8));
  animation: logoIn 1s cubic-bezier(.2, .9, .2, 1.2) both;
}
@keyframes logoIn { from { opacity: 0; transform: translateY(-20px) scale(1.15); } }
.home-kana { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-left: 6px; }
.home-kana span { font: 800 17px/1 "Shippori Mincho B1", serif; letter-spacing: 4px; color: #fff3c4; text-shadow: 0 2px 4px rgba(40, 0, 20, .9), 0 0 10px rgba(80, 0, 40, .6); }
.home-kana span:first-child { color: #ffd76a; letter-spacing: 8px; }
.home-kana i { width: 7px; height: 7px; transform: rotate(45deg); background: #ffd76a; box-shadow: 0 0 6px #ffb040; }

/* 右のメニュー板（漆と金） */
.home-panel {
  position: absolute; right: 34px; top: 34px; bottom: 34px; width: 420px; padding: 20px 20px 20px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 14px; border-radius: 22px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 210, 120, .16), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 9px),
    linear-gradient(170deg, rgba(64, 16, 34, .94), rgba(26, 8, 28, .95) 60%, rgba(18, 10, 40, .95));
  border: 2px solid #d4a64a;
  box-shadow: inset 0 0 0 1px rgba(255, 235, 180, .35), inset 0 0 0 7px rgba(0, 0, 0, .25), inset 0 0 0 8px rgba(212, 166, 74, .5),
    0 18px 40px rgba(20, 0, 20, .6), 0 0 40px rgba(255, 170, 80, .25);
  animation: panelIn .7s .15s cubic-bezier(.2, .9, .2, 1) both;
}
@keyframes panelIn { from { opacity: 0; transform: translateX(40px); } }
.home-panel::before, .home-panel::after { content: ""; position: absolute; width: 26px; height: 26px; border: 3px solid #f0cc62; pointer-events: none; }
.home-panel::before { left: 6px; top: 6px; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.home-panel::after { right: 6px; bottom: 6px; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }

.home-name { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 12px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(240, 204, 98, .4); }
.home-name span { flex: none; font: 700 13px/1 "Shippori Mincho B1", serif; color: #f0cc62; letter-spacing: 2px; }
.home-name input { flex: 1; min-width: 0; background: rgba(255, 250, 238, .96); border: 0; border-radius: 9px; padding: 8px 12px; font-size: 16px; color: #2b2140; }

.home-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.home-mode {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 6px; border-radius: 12px; cursor: pointer;
  color: #fff3c4; background: rgba(0, 0, 0, .3); border: 2px solid rgba(240, 204, 98, .3); transition: transform .12s, box-shadow .2s;
}
.home-mode b { font: 800 18px/1.1 "Shippori Mincho B1", serif; letter-spacing: 2px; }
.home-mode small { font-size: 11px; color: rgba(255, 243, 196, .7); }
.home-mode.on { color: #3a2604; background: linear-gradient(180deg, #fffbe0, #f6d77a 55%, #d9a43a); border-color: #fff3c4; box-shadow: 0 0 0 2px #8a5a10, 0 0 18px rgba(255, 210, 100, .7); }
.home-mode.on small { color: #5a3c08; }
.home-mode:active { transform: scale(.97); }

.home-item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 10px; border-radius: 14px;
  text-align: left; cursor: pointer; color: #fff; overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); border: 1.5px solid rgba(212, 166, 74, .7);
  transition: transform .12s, background .2s;
}
.home-item:hover { background: linear-gradient(160deg, rgba(255, 220, 140, .18), rgba(255, 255, 255, .04)); }
.home-item:active { transform: scale(.98); }
.home-item .hi-face { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #2a1d4a center/cover no-repeat;
  box-shadow: 0 0 0 2px #e7c46a, 0 0 0 4px #6b4a12, 0 3px 8px rgba(0, 0, 0, .6); }
.home-item .hi-tx { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.home-item .hi-tx b { font: 800 18px/1.15 "Shippori Mincho B1", serif; color: #fff3c4; letter-spacing: 1px; white-space: nowrap; }
.home-item .hi-tx small { font-size: 11px; color: rgba(255, 243, 196, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-item .hi-arrow { flex: none; font: 900 26px/1 serif; color: #f0cc62; }

/* 一番大きい「ひとりで対局」：金の札 */
.home-item.solo {
  flex: 1; min-height: 120px; padding: 14px 18px 14px 16px; border: 2px solid #fff6d0;
  background: radial-gradient(120% 160% at 0% 0%, rgba(255, 255, 255, .6), transparent 50%), linear-gradient(180deg, #fff3c0, #f5c84e 50%, #d4901e);
  box-shadow: 0 0 0 2px #8a5a10, 0 0 24px rgba(255, 200, 80, .7), 0 8px 18px rgba(40, 0, 20, .5);
  animation: soloGlow 2.4s ease-in-out infinite;
}
.home-item.solo .hi-face { width: 84px; height: 84px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #8a5a10, 0 4px 10px rgba(0, 0, 0, .4); }
.home-item.solo .hi-tx b { font-size: 34px; color: #4a1a04; letter-spacing: 3px; text-shadow: 0 1px 0 #fff6d0; }
.home-item.solo .hi-tx small { font-size: 13px; color: #6b3a08; font-weight: 700; }
.home-item.solo .hi-arrow { font-size: 40px; color: #8a3a08; }
.home-item.solo::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); animation: soloShine 3.2s ease-in-out infinite;
}
@keyframes soloShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes soloGlow { 50% { box-shadow: 0 0 0 2px #8a5a10, 0 0 40px rgba(255, 210, 100, 1), 0 8px 18px rgba(40, 0, 20, .5); } }
.home-subs { display: flex; flex-direction: column; gap: 8px; }

.home-foot { position: absolute; left: 40px; bottom: 26px; display: flex; gap: 10px; }
.home-link {
  padding: 8px 16px; border-radius: 999px; font-size: 13px; cursor: pointer; color: #fff3c4;
  background: rgba(30, 6, 24, .7); border: 1px solid rgba(240, 204, 98, .6); box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
}

/* 小窓（友だちと対局・ルール・設定）：ホームの板の上（ステージの中）に開く */
.stage.home .overlay { position: absolute; inset: 0; border-radius: 0; z-index: 50; }
.homesheet { align-items: center; justify-content: center; padding: 24px; background: rgba(20, 4, 20, .55); }
.hs-box {
  width: 520px; max-height: 660px; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
  color: #2b2140; background: linear-gradient(180deg, #fffaf0, #fbefd8);
  border: 3px solid #c99a3e; box-shadow: 0 0 0 2px #fff3c4, 0 20px 50px rgba(0, 0, 0, .6);
  animation: sheetIn .25s cubic-bezier(.2, .9, .2, 1.1) both;
}
@keyframes sheetIn { from { opacity: 0; transform: scale(.92); } }
.homesheet.wide .hs-box { width: 1080px; height: 660px; }
.hs-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 12px 20px;
  background: linear-gradient(160deg, #4a1626, #200a1c); border-bottom: 2px solid #c99a3e; }
.hs-head h2 { margin: 0; font: 800 20px/1.2 "Shippori Mincho B1", serif; color: #fff3c4; letter-spacing: 2px; }
.hs-close { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(240, 204, 98, .6); background: rgba(255, 255, 255, .08); color: #fff3c4; font-size: 20px; cursor: pointer; }
.hs-box > .hs-sec { padding: 16px 22px 4px; }
.hs-box > .hs-sec:last-child { padding-bottom: 22px; }
.hs-sec h3 { margin: 0 0 6px; font: 800 16px/1.3 "Shippori Mincho B1", serif; color: #8a1a2a; }
.hs-sec p { margin: 0 0 6px; font-size: 14px; line-height: 1.7; }
.hs-sec .btn { width: 100%; margin-top: 4px; }
.hs-sec .row input { flex: 1; min-width: 0; }
.hs-note { font-size: 12px !important; color: #7a6a5a; line-height: 1.6; }
.hs-body { flex: 1; overflow-y: auto; padding: 8px 22px 20px; -webkit-overflow-scrolling: touch; }
.hs-body .hs-sec { padding: 10px 0; border-bottom: 1px dashed rgba(201, 154, 62, .5); }
.hs-body .hs-sec:last-child { border-bottom: 0; }
.homesheet.wide .hs-body.rulecols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-content: start; }
.homesheet.wide .hs-body.rulecols .hs-sec:nth-last-child(2) { border-bottom: 0; }
.hs-tabs { flex: none; display: flex; gap: 6px; padding: 12px 22px 0; }
.hs-tab { flex: 1; padding: 9px; border-radius: 10px 10px 0 0; border: 2px solid #e6d2a4; border-bottom: 0; background: #f3e6c8; color: #7a5a2a; font-weight: 800; cursor: pointer; }
.hs-tab.on { background: linear-gradient(180deg, #fff6d0, #f0c860); color: #3a2604; border-color: #c99a3e; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; justify-items: center; padding-top: 6px; }
.book-grid .jcard { cursor: pointer; transition: transform .12s; }
.book-grid .jcard:active { transform: scale(.96); }
.bookzoom { align-items: center; justify-content: center; z-index: 120; }

.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed rgba(201, 154, 62, .5); }
.set-row:last-child { border-bottom: 0; }
.set-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-tx b { font-size: 15px; }
.set-tx small { font-size: 11px; color: #7a6a5a; }
.set-input { width: 170px; padding: 8px 10px; border-radius: 10px; border: 2px solid #e6d2a4; background: #fff; font-size: 15px; }
.set-sw { flex: none; position: relative; width: 56px; height: 30px; border-radius: 999px; border: 0; cursor: pointer; background: #d8cdb8; transition: background .2s; }
.set-sw i { position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); transition: left .2s; }
.set-sw.on { background: linear-gradient(180deg, #f6d77a, #d9a43a); }
.set-sw.on i { left: 29px; }

/* スマホを縦に持っている時は、横向きにするよう案内する */
.rotate-hint { display: none; }
/* body に allow-portrait が付いている間は、縦向きでもそのまま見られる（一時的） */
@media (orientation: portrait) and (max-width: 900px) {
  body:not(.allow-portrait) .rotate-hint {
    display: flex; position: fixed; inset: 0; z-index: 9999; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: linear-gradient(rgba(30, 6, 30, .82), rgba(30, 6, 30, .92)), url("/static/stage/home_bg.webp") center / cover;
    color: #fff3c4; font: 800 18px/1.6 "Shippori Mincho B1", serif; text-align: center; letter-spacing: 2px;
  }
  body:not(.allow-portrait) .rotate-hint i { width: 64px; height: 104px; border: 4px solid #f0cc62; border-radius: 12px; animation: rotHint 2s ease-in-out infinite; }
}
@keyframes rotHint { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* 四麻の結果画面：テンパイは4列、点数の移動は2列×2段 */
.rs-tenpai.four { grid-template-columns: repeat(4, 1fr); }
.rs-deltas.four { grid-template-columns: repeat(2, 1fr); }

/* ---------- ホーム：右上の名前札、右の浮かぶカードと牌、下のメニュー列、右下の丸い対局ボタン ---------- */
.home-namechip {
  position: absolute; right: 30px; top: 24px; display: flex; align-items: center; gap: 10px; padding: 5px 18px 5px 5px; border-radius: 999px; cursor: pointer;
  color: #fff3c4; font: 800 16px/1 "Shippori Mincho B1", serif; letter-spacing: 1px;
  background: linear-gradient(160deg, rgba(64, 16, 34, .92), rgba(20, 8, 30, .92)); border: 2px solid #d4a64a; box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
}
.home-namechip .hn-face { width: 40px; height: 40px; border-radius: 50%; background: #2a1d4a center/cover; box-shadow: 0 0 0 2px #f0cc62; }

.home-show { position: absolute; inset: 0; pointer-events: none; }
/* カードの絵の人物（左）：ふわっと浮かび、月明かりのふち取り */
.hs-chara {
  position: absolute; left: -30px; bottom: -40px; width: 620px; height: 556px;
  background: url("/static/stage/home_chara.webp") left bottom / contain no-repeat;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .9)) drop-shadow(0 0 18px rgba(170, 200, 255, .7)) drop-shadow(0 12px 24px rgba(0, 0, 0, .6));
  animation: charaIn 1s .2s cubic-bezier(.2, .9, .2, 1) both, charaFloat 6s 1.2s ease-in-out infinite;
}
@keyframes charaIn { from { opacity: 0; transform: translateX(-60px); } }
@keyframes charaFloat { 50% { transform: translateY(-10px); } }
.hs-tile { position: absolute; --w: 46px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55)); animation: hsSpin 7s ease-in-out infinite; }
.hs-tile.t0 { left: 820px; top: 120px; --r: -18deg; animation-delay: 0s; }
.hs-tile.t1 { left: 1020px; top: 200px; --r: 16deg; animation-delay: -1.2s; --w: 54px; }
.hs-tile.t2 { left: 880px; top: 330px; --r: 22deg; animation-delay: -2.4s; --w: 40px; }
.hs-tile.t3 { left: 1150px; top: 330px; --r: -12deg; animation-delay: -3.6s; }
.hs-tile.t4 { left: 940px; top: 40px; --r: 8deg; animation-delay: -4.8s; --w: 36px; }
.hs-tile.t5 { left: 790px; top: 470px; --r: -24deg; animation-delay: -6s; --w: 38px; }
@keyframes hsSpin { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-16px) rotate(calc(var(--r) * -1)); } }

/* 下のメニュー列 */
.home-bar { position: absolute; left: 30px; bottom: 22px; display: flex; gap: 10px; }
.hb-btn {
  position: relative; width: 98px; height: 82px; padding: 8px 4px 6px; border-radius: 16px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  color: #f6d77a; font: 800 13px/1.1 "Shippori Mincho B1", serif; letter-spacing: 1px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 210, 120, .18), transparent 60%),
    linear-gradient(170deg, rgba(64, 16, 34, .94), rgba(20, 8, 30, .95));
  border: 2px solid #c99a3e;
  box-shadow: inset 0 0 0 1px rgba(255, 235, 180, .3), inset 0 0 0 5px rgba(0, 0, 0, .25), 0 8px 16px rgba(0, 0, 0, .55);
  transition: transform .12s, box-shadow .2s;
}
.hb-btn svg { width: 32px; height: 32px; filter: drop-shadow(0 0 6px rgba(255, 200, 90, .55)); }
.hb-btn span { color: #fff3c4; white-space: nowrap; }
.hb-btn:hover { box-shadow: inset 0 0 0 1px rgba(255, 235, 180, .5), inset 0 0 0 5px rgba(0, 0, 0, .25), 0 0 18px rgba(255, 200, 90, .55), 0 8px 16px rgba(0, 0, 0, .55); }
.hb-btn:active { transform: translateY(2px) scale(.97); }

/* 右下の丸い対局ボタン */
.home-play {
  position: absolute; right: 44px; bottom: 26px; width: 200px; height: 200px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 28%, #fffbe0 0%, #ffe07a 30%, #e9a428 62%, #9a5a10 100%);
  box-shadow: 0 0 0 4px #fff3c4, 0 0 0 9px #8a5410, 0 0 0 11px #f0cc62, 0 0 40px 8px rgba(255, 190, 70, .75), 0 16px 30px rgba(0, 0, 0, .6);
  animation: hpBreath 2.6s ease-in-out infinite; transition: transform .12s;
}
.home-play:active { transform: scale(.95); }
@keyframes hpBreath { 50% { box-shadow: 0 0 0 4px #fff3c4, 0 0 0 9px #8a5410, 0 0 0 11px #f0cc62, 0 0 64px 16px rgba(255, 200, 80, .95), 0 16px 30px rgba(0, 0, 0, .6); } }
.home-play .hp-ring { position: absolute; inset: -12px; border-radius: 50%; border: 3px solid rgba(255, 224, 140, .9); animation: hpRing 2.6s ease-out infinite; pointer-events: none; }
.home-play .hp-ring.r2 { animation-delay: 1.3s; }
@keyframes hpRing { from { transform: scale(1); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.home-play .hp-face { position: absolute; inset: 14px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 2px dashed rgba(138, 84, 16, .55); }
.home-play .hp-tile { --w: 30px; transform: rotate(-8deg); margin: -6px 0 10px; filter: drop-shadow(0 4px 4px rgba(90, 40, 0, .5)); }
.home-play b { font: 900 46px/1 "Shippori Mincho B1", serif; letter-spacing: 6px; padding-left: 6px; color: #4a1a04; text-shadow: 0 2px 0 #fff6d0; }
.home-play small { font: 800 12px/1.2 "M PLUS Rounded 1c", sans-serif; color: #6b3a08; letter-spacing: 1px; }

/* 対局スタイルの小窓 */
.homesheet.play .hs-box { width: 860px; }
.ps-body { padding: 16px 26px 22px; display: flex; flex-direction: column; gap: 10px; }
.ps-name { display: flex; align-items: center; gap: 12px; }
.ps-name span { font: 800 14px/1 "Shippori Mincho B1", serif; color: #8a1a2a; letter-spacing: 2px; }
.ps-name input { width: 260px; padding: 8px 12px; border-radius: 10px; border: 2px solid #e6d2a4; background: #fff; font-size: 16px; }
.ps-step { margin-top: 4px; font: 800 15px/1 "Shippori Mincho B1", serif; color: #8a1a2a; letter-spacing: 2px; }
.ps-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ps-mode {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; cursor: pointer; text-align: left;
  background: #f3e6c8; border: 2px solid #e0cc9c; color: #5a3c10; transition: transform .12s;
}
.ps-mode .ps-tiles { display: flex; gap: 2px; }
.ps-mode .ps-tiles .tile { --w: 28px; }
.ps-mode .ps-tx { display: flex; flex-direction: column; gap: 4px; }
.ps-mode b { font: 800 20px/1.1 "Shippori Mincho B1", serif; letter-spacing: 2px; }
.ps-mode small { font-size: 12px; opacity: .8; }
.ps-mode.on { background: linear-gradient(180deg, #fffbe0, #f6d77a 55%, #e0ad48); border-color: #a8741c; color: #3a2604; box-shadow: 0 0 0 2px #fff3c4, 0 0 16px rgba(230, 170, 60, .6); }
.ps-mode:active { transform: scale(.98); }
.ps-opps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ps-opp {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px 14px; border-radius: 16px; cursor: pointer;
  color: #fff3c4; background: linear-gradient(170deg, #5a1a2c, #22091e); border: 2px solid #c99a3e;
  box-shadow: inset 0 0 0 1px rgba(255, 235, 180, .3), 0 6px 14px rgba(60, 20, 0, .35); transition: transform .12s, box-shadow .2s;
}
.ps-opp:hover { box-shadow: inset 0 0 0 1px rgba(255, 235, 180, .5), 0 0 18px rgba(230, 170, 60, .6); }
.ps-opp:active { transform: scale(.97); }
.ps-opp .po-face { width: 72px; height: 72px; border-radius: 50%; background: #2a1d4a center/cover; box-shadow: 0 0 0 3px #f0cc62, 0 0 0 5px #6b4a12; }
.ps-opp b { font: 800 22px/1.1 "Shippori Mincho B1", serif; letter-spacing: 2px; }
.ps-opp small { font-size: 12px; color: rgba(255, 243, 196, .75); }
.ps-opp.solo { background: radial-gradient(120% 120% at 30% 0%, rgba(255, 255, 255, .55), transparent 55%), linear-gradient(180deg, #fff0b0, #f2c04a 55%, #c98a1c); color: #4a1a04; border-color: #fff6d0; }
.ps-opp.solo small { color: #6b3a08; font-weight: 700; }
.ps-opp .po-code { width: 120px; margin-top: 2px; padding: 6px 8px; border-radius: 8px; border: 2px solid #c99a3e; background: #fffaf0; text-align: center; font: 800 20px/1 "Orbitron", monospace; letter-spacing: 6px; color: #3a2604; }
.ps-note { margin: 0; text-align: center; }

/* ホームで開くしもべ選びは、ホームの上に重ねる */
.overlay.home-pick { z-index: 200; }

/* 対局スタイル：相手は2つの大きな札 */
.ps-opps.two { grid-template-columns: 1fr 1fr; }
.ps-opps.two .ps-opp { padding: 22px 12px 18px; }
.ps-opps.two .ps-opp .po-face { width: 88px; height: 88px; }
.ps-back { align-self: flex-start; padding: 6px 14px; border-radius: 999px; border: 2px solid #c99a3e; background: #fff6dc; color: #6b3a08; font-weight: 800; cursor: pointer; }

/* カード発動の名前の帯：途中で改行しない */
.fx-caption { white-space: nowrap; }
.fx-side { max-width: none; }

/* ---------- ツモ和了：ツモ牌を叩きつけて、手牌を開く ---------- */
.fx-reveal { position: fixed; inset: 0; z-index: 46; pointer-events: none; }
.fx-reveal .rv-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(40, 20, 0, .45), rgba(0, 0, 0, .78)); opacity: 0; }
.fx-reveal .rv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-reveal .rv-slam { position: absolute; transform-origin: 50% 50%; z-index: 3;
  filter: drop-shadow(0 0 12px rgba(255, 220, 120, .9)) drop-shadow(0 10px 14px rgba(0, 0, 0, .6)); }
.fx-reveal .rv-slam.rv-landed { filter: drop-shadow(0 0 10px rgba(255, 210, 90, 1)); }
.fx-reveal .rv-glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; opacity: 0; z-index: 2;
  background: radial-gradient(circle, rgba(255, 240, 180, .95) 0%, rgba(255, 190, 60, .55) 30%, rgba(255, 150, 30, 0) 70%); }
.fx-reveal .rv-row { position: absolute; display: flex; align-items: flex-end; gap: 2px; transform-origin: 50% 0; opacity: 0; }
.fx-reveal .rv-cell { position: relative; perspective: 500px; }
.fx-reveal .rv-cell .tile { backface-visibility: hidden; transition: transform .28s cubic-bezier(.3, .8, .3, 1.2); }
.fx-reveal .rv-cell .rv-face { position: absolute; left: 0; top: 0; transform: rotateY(-180deg); }
.fx-reveal .rv-cell.open .rv-back { transform: rotateY(180deg); }
.fx-reveal .rv-cell.open .rv-face { transform: rotateY(0); }
.fx-reveal .rv-meld { display: flex; gap: 1px; margin-left: 14px; }
.fx-reveal .rv-slot { width: 58px; height: 80px; margin-left: 14px; }

/* 四麻：相手の発動中のカードは、名札のそばに小さく横に並べる（押すと大きく見られる） */
.stage.four .activecol.small { gap: 0; }
.stage.four .activecol.small .activecards { flex-direction: row; gap: 4px; }
.stage.four .activecol.small .activecard + .activecard { margin: 0; }
.stage.four .activecol.small .activedetail { display: none; }
.stage.four .activecol.small .jcard { box-shadow: 0 0 0 2px rgba(180, 120, 255, .8), 0 0 10px rgba(180, 120, 255, .6); cursor: pointer; }
.stage.four .activecol.left.small { left: 165px; top: 258px; align-items: flex-start; }
.stage.four .activecol.right.small { right: 165px; left: auto; top: 258px; align-items: flex-end; }
.stage.four .activecol.right.small .activecards { flex-direction: row-reverse; }
.stage.four .activecol.top.small { left: auto; right: calc(50% + 178px); top: 6px; align-items: flex-end; }
.stage.four .activecol.top.small .activecards { flex-direction: row-reverse; }

/* 立直などのボタン：手牌の右寄りの真上（ツモ牌の近く）に出す */
.actions { right: 300px; top: 528px; }

/* 条件が整っていないので使えない手札のカード */
.handslot.blocked .jcard { filter: grayscale(.55) brightness(.8); }
.handslot .blockbadge {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) rotate(-12deg); z-index: 3; pointer-events: none;
  padding: 3px 10px; border-radius: 6px; white-space: nowrap; font: 800 13px/1.2 "M PLUS Rounded 1c", sans-serif; letter-spacing: 1px;
  color: #fff; background: rgba(120, 20, 30, .92); border: 2px solid #ffb0b0; box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.liftnote, .zoombar .liftnote { max-width: 360px; }
.handslot { position: relative; }

/* 待ちの表示に出すフリテンの札 */
.wp-furiten, .rw-furiten {
  display: inline-flex; align-items: center; padding: 3px 10px; margin-left: 8px; border-radius: 6px; white-space: nowrap;
  font: 800 14px/1.2 "M PLUS Rounded 1c", sans-serif; letter-spacing: 1px; color: #fff;
  background: linear-gradient(180deg, #ff5a5a, #b0141c); box-shadow: 0 0 0 2px #ffd0d0, 0 0 10px rgba(255, 60, 60, .7);
}

/* ---------------------------------------------------------------- カード名のフリガナ・用語の説明 */
.jcard.has-ruby .jc-name span { line-height: 1; padding-top: calc(var(--cw) * .022); overflow: visible; }
.jc-name rt { font-size: calc(var(--cw) * .03); font-weight: 700; letter-spacing: 0; color: var(--ink); opacity: .8; }
.pk-name rt, .cl-name rt { font-size: 9px; font-weight: 700; color: #f3dc9a; opacity: .85; letter-spacing: 0; }
.gl-term { text-decoration: underline dotted rgba(120, 90, 30, .75); text-underline-offset: 2px; cursor: help; }
.pk-text .gl-term, .cl-text .gl-term { text-decoration-color: rgba(255, 220, 140, .7); }
.gl-term:active { background: rgba(255, 210, 90, .35); border-radius: 3px; }
.gloss-tip {
  position: fixed; z-index: 9999; max-width: min(320px, 86vw); padding: 10px 13px 11px;
  border-radius: 12px; background: rgba(20, 12, 40, .96); color: #fff; font-size: 13px; line-height: 1.55;
  box-shadow: 0 0 0 1.5px #e7c46a, 0 8px 24px rgba(0, 0, 0, .55); pointer-events: none;
  animation: glossIn .14s ease-out;
}
.gloss-tip b { display: block; margin-bottom: 3px; font: 800 15px/1.3 "Shippori Mincho B1", serif; color: #ffd76a; }
@keyframes glossIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- 墓地 */
.logbtn.gravebtn { background: linear-gradient(180deg, #6b6b7e, #45455a); box-shadow: 0 3px 0 #2c2c3a; margin-top: 6px; }
.grave-note { font-size: 12px; color: rgba(255, 255, 255, .7); margin: -4px 0 8px; }
.graveview .pick-item { cursor: default; }
.graveview .pk-extra { font-weight: 800; color: #ffd76a; }

/* ---------------------------------------------------------------- オーラス */
.allast-tag {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 6px; vertical-align: middle;
  font: 800 13px/1.3 "Shippori Mincho B1", serif; letter-spacing: 1px; color: #3a0b10;
  background: linear-gradient(180deg, #fff3b0, #ffb53d); box-shadow: 0 0 10px rgba(255, 170, 60, .9);
  text-shadow: none; pointer-events: auto; cursor: help; animation: allastPulse 1.6s ease-in-out infinite;
}
@keyframes allastPulse { 50% { box-shadow: 0 0 18px rgba(255, 120, 40, 1); } }
.console .rd .allast-tag { display: block; width: max-content; margin: 2px auto 0; font-size: 12px; }
.console.allast {
  box-shadow:
    0 0 0 4px #ffd27a, 0 0 0 7px #c9822a, 0 0 30px rgba(255, 150, 50, .7),
    inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -10px 20px rgba(0, 0, 0, .6),
    0 16px 28px rgba(0, 0, 0, .45);
}
.allast-banner {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 40; text-align: center;
  padding: 18px 46px 16px; border-radius: 16px; background: linear-gradient(180deg, rgba(60, 10, 20, .92), rgba(25, 5, 12, .92));
  box-shadow: 0 0 0 2px #e7c46a, 0 0 40px rgba(255, 150, 50, .6); pointer-events: none;
  animation: allastBanner 3.6s ease-in-out forwards;
}
.allast-banner b { display: block; font: 900 54px/1.1 "Shippori Mincho B1", serif; letter-spacing: 10px;
  background: linear-gradient(180deg, #fffdf0, #ffe68e 40%, #e9a82a 60%, #fff0b8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.allast-banner span { display: block; margin-top: 6px; font: 800 16px/1.4 "Shippori Mincho B1", serif; color: #fff; }
.allast-banner small { display: block; margin-top: 4px; font-size: 13px; color: #ffd76a; }
@keyframes allastBanner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } 10%, 82% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.04); } }
.gvbtn { position: absolute; right: 14px; top: 358px; z-index: 6; }
/* カード図鑑：三麻・四麻の効果文の切り替え */
.book-modes { display: flex; gap: 6px; justify-content: center; margin: 2px 0 8px; }
.book-mode { padding: 6px 18px; border-radius: 999px; border: 2px solid #e6d2a4; background: #f3e6c8; color: #7a5a2a; font-weight: 800; cursor: pointer; }
.book-mode.on { background: linear-gradient(180deg, #fff6d0, #f0c860); color: #3a2604; border-color: #c99a3e; }
.hmbtn { position: absolute; right: 14px; top: 314px; z-index: 6; }
.fn-btns { justify-content: center; gap: 12px; }
/* 体験版の札（ホームの題字の下） */
.home-trial { display: table; margin: 14px 0 0 6px; padding: 4px 18px; border-radius: 999px; font: 800 20px/1.4 "Shippori Mincho B1", serif; letter-spacing: 4px;
  color: #3a2604; background: linear-gradient(180deg, #fff3c4, #e7c46a 60%, #b8801c); box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
/* カード発動画面：宣言して使うカードで選んだもの */
.fx-choice { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 10px 16px; border-radius: 14px;
  background: rgba(20, 8, 30, .88); box-shadow: 0 0 0 2px #e7c46a, 0 6px 16px rgba(0, 0, 0, .5);
  color: #fff3c4; font: 800 19px/1.4 "Shippori Mincho B1", serif; max-width: 420px; }
.fx-choice .tile { flex: none; }
.cl-aim .tile { display: inline-block; vertical-align: middle; margin-left: 4px; --w: 22px; }
.activedetail { font-size: 12px; font-weight: 800; }
/* 牌を選んだ時の待ちの板：右の操作ボタン（リーチ取消など）と重ならないよう、ボタン列より上に出す */
.riichiwaits { top: 452px; }
/* 局の結果：点数の欄は「名前と増減」「前の点数→今の点数」の2段。後ろの絵が透けないよう背景を濃くする */
.result.res2 { background: linear-gradient(160deg, #2a1230 0%, #170a26 60%, #0e0818 100%); }
.rs-dcell { align-items: center; background: rgba(255, 255, 255, .07); border: 1px solid rgba(231, 196, 106, .35); }
.rs-dhead { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.rs-dhead .rs-dname { flex: 1; min-width: 0; }
.rs-dhead .rs-dval { flex: none; font-size: 16px; padding: 4px 8px; }
.rs-pline { margin-top: 6px; }
.rs-now { font-size: 22px; }
/* 対局中のメニュー */
.gamemenu { width: min(560px, 92vw); }
.gm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 14px; }
.gm-grid .gm-item { position: static; width: 100%; height: 52px; justify-content: flex-start; padding: 0 14px; font-size: 16px; }
.gm-grid .gm-item .sw { margin-left: auto; }
.gm-grid .gm-item .tc { margin-left: auto; }

.gm-item .sw { margin-left: 4px; min-width: 38px; height: 22px; padding: 0 8px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  font: 800 11px/1 "Orbitron", sans-serif; letter-spacing: 1px; color: #c9b9a0; background: #2a1a20; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7); }
.gm-item .sw.on { color: #3a2604; background: linear-gradient(180deg, #fff3c4, #e7c46a 60%, #b8801c); box-shadow: 0 0 10px rgba(255, 211, 77, .8); }
/* あがった人の手牌：席で倒して見せる。あがり牌は右端に少し離して光らせる */
.opphand.laid, .hand.laid { align-items: flex-end; }
.opphand.laid .tile, .hand.laid .tile { box-shadow: var(--tile3d), 0 3px 0 #0f6b45; }
.opphand.laid .wintile, .hand.laid .wintile { margin-left: 10px; box-shadow: var(--tile3d), 0 0 0 3px #ffd34d, 0 0 16px rgba(255, 211, 77, .9); }
.hand.laid .tile { cursor: default; }
/* 手牌を一気にバタッと倒す：立っている手牌が全部まとめて手前へ倒れ、卓に当たって小さく弾む */
.laid.tipping { animation: slamDown .42s cubic-bezier(.55, 0, .85, .35) both; transform-origin: 50% 100%; }
@keyframes slamDown {
  0% { transform: perspective(500px) rotateX(-70deg); filter: brightness(.7); }
  70% { transform: perspective(500px) rotateX(4deg); filter: brightness(1.15); }
  85% { transform: perspective(500px) rotateX(-6deg); }
  100% { transform: none; filter: none; }
}
.riichiwaits.low { top: 124px; z-index: 9; }   /* ツモ・ロンのボタンが出ている時は、卓の上の方に出す */
.rs-dcell .rs-av { position: relative; }
.rs-avwind { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 900 11px/1 "Shippori Mincho B1", serif; color: #3a2604; background: #e7c46a; box-shadow: 0 0 0 2px #170a26; }
.rs-dhead .rs-dval { font-size: 14px; padding: 3px 7px; }
.rs-dhead { gap: 4px; }
/* 右の人の手札：左の人と同じ並び（重ね方・傾き）にして、枚数の字だけ左に置く */
.plate.right .pl-fan { flex-direction: row; }
.plate.right .pl-cb { margin-right: -12px; margin-left: 0; }
.plate.right .pl-cb:last-of-type { margin-right: 0; }
.plate.right .pl-fanc { order: -1; margin: 0 20px 0 0; }
/* 真ん中の装置：局・本場・残りの字を大きく */
.console .mid { inset: 58px 50px 50px; gap: 3px; }
.console .rd { font-size: 36px; line-height: 1.05; letter-spacing: 1px; }
.console .sm { font-size: 13px; }
.console .rest { font-size: 20px; }
/* サイコロ：透明なドーム型の蓋の中に入っている（全自動卓のサイコロ） */
.console .dice {
  top: 6px; width: 74px; height: 44px; opacity: 1; border-radius: 37px 37px 8px 8px;
  background:
    radial-gradient(circle at 38% 72%, #e0202a 0 2.6px, transparent 3px),
    radial-gradient(circle at 58% 62%, #222 0 1.8px, transparent 2.2px),
    radial-gradient(circle at 66% 80%, #222 0 1.8px, transparent 2.2px),
    linear-gradient(#fff, #fff) 28% 86% / 15px 15px no-repeat,
    linear-gradient(#fff, #fff) 64% 82% / 15px 15px no-repeat,
    radial-gradient(ellipse at 50% 100%, #1d4d2e 0 60%, #123320 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 3px 6px rgba(0, 0, 0, .6);
  overflow: hidden;
}
/* ガラスの蓋：ふちの光と、斜めのハイライト */
.console .dice::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 32% 22%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse at 50% 100%, rgba(170, 220, 255, 0) 55%, rgba(170, 220, 255, .35) 85%, rgba(255, 255, 255, .55) 100%);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .35);
}
.console .dice::after {
  content: ""; position: absolute; left: -3px; right: -3px; bottom: -2px; height: 7px; border-radius: 4px;
  background: linear-gradient(180deg, #d6d6de, #8d8d98);
}
/* アイコンを選ぶ小窓 */
.avpick { width: min(640px, 94vw); }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 8px 0 14px; max-height: 60vh; overflow-y: auto; }
.av-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 12px; border: 2px solid transparent;
  background: rgba(0, 0, 0, .25); color: #fff; cursor: pointer; font: 700 13px/1.2 "Shippori Mincho B1", serif; }
.av-item.on { border-color: #ffd34d; background: rgba(255, 211, 77, .18); }
.av-face { width: 64px; height: 64px; border-radius: 50%; background: #2a1d4a center / cover; box-shadow: 0 0 0 2px #e7c46a; }
.av-face.mini { display: inline-block; width: 24px; height: 24px; margin-right: 6px; vertical-align: middle; }
/* ---------------------------------------------------------------- 局の結果を豪華に */
.result.res2 {
  border: none; border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 200, 90, .18), transparent 55%),
    repeating-linear-gradient(45deg, rgba(231, 196, 106, .05) 0 2px, transparent 2px 18px),
    linear-gradient(160deg, #3a1530 0%, #1d0b2a 55%, #10081c 100%);
  box-shadow:
    0 0 0 2px #fff0b8, 0 0 0 5px #c99a3e, 0 0 0 7px #6a4612, 0 0 0 9px #e7c46a,
    inset 0 0 0 1px rgba(255, 235, 180, .35), inset 0 0 40px rgba(255, 190, 80, .12),
    0 0 50px rgba(255, 180, 60, .35), 0 24px 70px rgba(0, 0, 0, .75);
}
.rs-corner { position: absolute; width: 46px; height: 46px; pointer-events: none; z-index: 2;
  background:
    radial-gradient(circle at 30% 30%, #fff6d0 0 3px, transparent 3.5px),
    conic-gradient(from 0deg at 0 0, #ffe9a0 0 25%, transparent 0);
  -webkit-mask: radial-gradient(circle at 100% 100%, transparent 26px, #000 27px);
  mask: radial-gradient(circle at 100% 100%, transparent 26px, #000 27px);
  filter: drop-shadow(0 0 6px rgba(255, 200, 80, .8)); }
.rs-corner.tl { left: 6px; top: 6px; }
.rs-corner.tr { right: 6px; top: 6px; transform: scaleX(-1); }
.rs-corner.bl { left: 6px; bottom: 6px; transform: scaleY(-1); }
.rs-corner.br { right: 6px; bottom: 6px; transform: scale(-1, -1); }
.res2 .rs-rays { position: absolute; left: 70%; top: 40%; width: 160vmax; height: 160vmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(255, 210, 110, .14) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0 10%, transparent 55%); mask: radial-gradient(circle, #000 0 10%, transparent 55%);
  animation: rsRays 40s linear infinite; }
.overlay.res2.other .rs-rays { opacity: .5; }
@keyframes rsRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.res2 .rs-sparks { position: absolute; inset: 0; overflow: hidden; }
.res2 .rs-sparks i { position: absolute; left: var(--x); top: -20px; animation: rsFall var(--t) linear var(--d) infinite; }
.res2 .rs-sparks .spark { width: 6px; height: 6px; border-radius: 50%; background: #ffe08a; box-shadow: 0 0 10px 3px rgba(255, 210, 90, .8); }
.res2 .rs-sparks .confetti { width: 9px; height: 14px; border-radius: 2px; background: hsl(var(--h) 85% 62%); }
@keyframes rsFall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(110vh) rotate(540deg); opacity: .2; } }
/* 見出し（ツモ・ロン）に光が走る */
.res2 .rs-title { position: relative; font-size: 76px; letter-spacing: 18px;
  background: linear-gradient(110deg, #fff6c8 0%, #ffd54a 30%, #b8741a 45%, #fffbe6 50%, #ffd54a 55%, #c88a20 75%, #fff0b8 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rsShine 3.2s ease-in-out infinite; }
.res2 .rs-title.ron { background-image: linear-gradient(110deg, #ffe0e0 0%, #ff6a6a 30%, #8a0e18 45%, #fff0f0 50%, #ff6a6a 55%, #a8141e 75%, #ffc0c0 100%); }
@keyframes rsShine { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }
/* 点数は金の大きな数字。満貫などの名前は赤い判子 */
.res2 .rs-total .gain { font-size: 58px; filter: drop-shadow(0 0 16px rgba(255, 200, 80, .8)); }
.res2 .rs-total .limitname { padding: 4px 14px; border-radius: 8px; color: #fff; background: linear-gradient(180deg, #e2343e, #8a0e18);
  box-shadow: 0 0 0 2px #ffd34d, 0 0 18px rgba(255, 80, 60, .7); text-shadow: 0 2px 0 #4a0408; transform: rotate(-4deg); }
.res2 .rs-hand { background: linear-gradient(180deg, rgba(15, 107, 69, .55), rgba(10, 74, 48, .55)); box-shadow: inset 0 0 0 1px rgba(231, 196, 106, .5); }
@media (prefers-reduced-motion: reduce) { .res2 .rs-rays, .res2 .rs-sparks i, .res2 .rs-title { animation: none; } }
/* 向聴の札：手牌のすぐ下（牌立ての上）に小さく。向聴数で色を変える */
.shanten { left: 50%; top: 694px; transform: translateX(-50%); padding: 3px 14px 4px; font-size: 15px; z-index: 4; animation: none; }
.shanten small { font-size: 10px; }
.shanten.sh3 { color: #e6e1d6; background: linear-gradient(180deg, #4a4a52, #26262c); }
.shanten.sh2 { color: #d6ecff; background: linear-gradient(180deg, #2f5fae, #173468); }
.shanten.sh1 { color: #dcffe4; background: linear-gradient(180deg, #2f9b56, #155e30); }
.shanten.sh-1 { color: #fff; background: linear-gradient(180deg, #ff5a6a, #b0101e); box-shadow: 0 0 0 2px #fff0b8, 0 0 16px rgba(255, 80, 90, .8); }
.shanten.sh2 small, .shanten.sh1 small, .shanten.sh3 small, .shanten.sh-1 small { color: inherit; opacity: .75; }
/* カード発動の画面：その場でカウンターを返すか聞く */
.fx-ok { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.fx-counterq { font: 800 18px/1.3 "Shippori Mincho B1", serif; color: #ffb3b8; text-shadow: 0 2px 6px #000; }
.fx-counterbtn { padding: 12px 22px; border-radius: 14px; border: none; cursor: pointer; font: 800 18px/1.2 "Shippori Mincho B1", serif; color: #fff;
  background: linear-gradient(180deg, #e2343e, #8a0e18); box-shadow: 0 0 0 2px #ffd34d, 0 6px 14px rgba(0, 0, 0, .5); }
.fx-okbtn.small { font-size: 18px; padding: 10px 22px; }
.autobtn.nakibtn { top: 446px; }
.av-item.own { cursor: pointer; }
.av-plus { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 30px; color: #ffd34d; }
/* ---------------------------------------------------------------- 真ん中の装置のサイコロのドーム（立体） */
.console .dice { display: none; }
.console .dome3d { position: absolute; left: 50%; top: 0; width: 104px; height: 64px; transform: translateX(-50%); pointer-events: none; }
.console.holeopen .dome3d { opacity: 0; }
/* 土台：金属の輪（楕円）と、内側の緑の布 */
.dome3d .dm-ring { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #f4f4f8 0%, #b9bcc6 35%, #6d7180 62%, #2c2f38 100%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, .7), inset 0 -2px 3px rgba(0, 0, 0, .5), inset 0 2px 2px rgba(255, 255, 255, .7); }
.dome3d .dm-felt { position: absolute; left: 9px; right: 9px; bottom: 5px; height: 21px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #2f7a4a 0%, #18502e 60%, #0b2a18 100%);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .8); }
/* サイコロ：布の上に置く。少し上から見下ろした立体の箱 */
.dome3d .dm-stage { position: absolute; left: 0; right: 0; bottom: 12px; height: 30px; perspective: 260px; }
.dome3d .dm-die { position: absolute; bottom: 0; width: 0; height: 0; transform-style: preserve-3d; }
.dome3d .dm-die .cube { left: 0; top: -14px; }
.dome3d .dm-die .cube .f { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), inset -6px -6px 10px rgba(0, 0, 0, .12); }
.dome3d .dm-shadow { position: absolute; left: -11px; top: -4px; width: 22px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, .55); filter: blur(2px); }
/* ガラスのドーム：半球。ふちが青白く光り、左上に強い映り込み、右下に淡い反射 */
.dome3d .dm-glass { position: absolute; left: 7px; right: 7px; bottom: 11px; height: 54px;
  border-radius: 50% 50% 46% 46% / 92% 92% 18% 18%;
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(180, 220, 255, 0) 55%, rgba(180, 220, 255, .22) 80%, rgba(220, 240, 255, .5) 100%),
    radial-gradient(ellipse 40% 30% at 70% 70%, rgba(170, 210, 255, .18), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02) 60%, rgba(120, 170, 220, .12));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 -3px 6px rgba(140, 190, 255, .35), inset 0 6px 10px rgba(255, 255, 255, .25); }
.dome3d .dm-shine { position: absolute; left: 22px; top: 8px; width: 30px; height: 14px; border-radius: 50%; transform: rotate(-24deg);
  background: radial-gradient(ellipse at 40% 40%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, 0) 72%); }
.dome3d .dm-shine::after { content: ""; position: absolute; left: 44px; top: 18px; width: 6px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .8); }
/* あがり報酬：金色の札 */
.fx-buy.reward { background: linear-gradient(180deg, rgba(120, 70, 8, .95), rgba(60, 30, 4, .95)); box-shadow: 0 0 0 2px #ffe08a, 0 0 0 5px #b8801c, 0 0 40px rgba(255, 200, 80, .8); }
.fx-buy.reward .t { color: #ffe08a; text-shadow: 0 0 14px rgba(255, 210, 90, .9); }
.fx-buy.reward .c { color: #fff; }
.fx-ok { margin-top: 10px; }
.fx-counterq { margin-top: 4px; }
/* 手牌の左上：向聴の札と待ちの板（手牌と一緒に動く） */
.hand { position: relative; }
.handinfo { position: absolute; left: 8px; bottom: 100%; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; pointer-events: none; white-space: nowrap; }
.handinfo > * { pointer-events: auto; }
.handinfo .shanten, .handinfo .waitpanel { position: static; left: auto; top: auto; transform: none; }
.actions { right: 150px; }   /* 手牌の左上の札・待ちの板と重ならないよう、右へ寄せる（右端の鳴き・自動ツモ切りのボタンより下） */
/* 手前に寝かせた表向きの牌（自分の北・鳴いた牌・あがって倒した手牌）：
   絵柄の面の手前に、象牙色の本体と青い背の厚みを見せて、紙のように見えないようにする */
.tile.flat3d, .mymelds .tile, .mymelds .tile.nuki, .hand.laid .tile {
  border-bottom: 0;
  margin-bottom: calc(var(--w) * .3);
  --tile3d:
    inset 0 0 0 1px rgba(70, 85, 110, .22),
    inset 2px 2px 3px rgba(255, 255, 255, .95),
    inset -3px -3px 5px rgba(80, 95, 120, .28),
    0 calc(var(--w) * .07) 0 #f3f5f8,
    0 calc(var(--w) * .14) 0 #d9dfe7,
    0 calc(var(--w) * .17) 0 #3a82d8,
    0 calc(var(--w) * .24) 0 #1b4f9c,
    0 calc(var(--w) * .26) 0 #0e2f63,
    calc(var(--w) * .04) calc(var(--w) * .36) calc(var(--w) * .22) rgba(0, 0, 0, .55);
  box-shadow: var(--tile3d);
}
.hand.laid .tile.wintile { box-shadow: var(--tile3d), 0 0 0 3px #ffd34d, 0 0 16px rgba(255, 211, 77, .9); }
.mymelds .side .tile { margin-bottom: 0; }
.opphand.laid .tile.lay { box-shadow: inset 0 0 0 1px rgba(70, 85, 110, .25), inset 2px 2px 3px rgba(255, 255, 255, .9), inset -2px -2px 4px rgba(80, 95, 120, .25); }
.opphand.laid .tile.lay.wintile { box-shadow: 0 0 0 2px #ffd34d, 0 0 12px rgba(255, 211, 77, .9); }
/* 自分の鳴き牌・北：縦の牌と横向きの牌の高さをそろえる（厚みの分の余白は、牌ではなく並びの下に取る） */
.mymelds .tile, .mymelds .tile.nuki { margin-bottom: 0; }
.mymelds { padding-bottom: 12px; align-items: flex-end; }
.mymelds .meld { align-items: flex-end; }
/* パソコン：手札のカードにカーソルを重ねた時に出す大きなカード（左下の手札の上に出す。カーソルの邪魔をしない） */
.cardpeek { position: fixed; left: 230px; bottom: 120px; z-index: 60; pointer-events: none;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .65)); animation: peekIn .12s ease-out; }
@keyframes peekIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
/* 河：6枚ごとに段を変える。横向きのリーチ牌があっても6枚入る幅にする */
.pond { width: 236px; }
.pond > .pond-br { flex-basis: 100%; height: 0; }
/* ホームの「CPUの強さ」 */
.ps-levels { display: flex; align-items: center; gap: 8px; }
.ps-lvlab { font: 800 14px/1 "Shippori Mincho B1", serif; color: #8a1a2a; letter-spacing: 2px; margin-right: 6px; }
.ps-lv { padding: 7px 18px; border-radius: 999px; cursor: pointer; font: 800 15px/1 "Shippori Mincho B1", serif; letter-spacing: 2px;
  background: #f3e6c8; border: 2px solid #e0cc9c; color: #5a3c10; }
.ps-lv.on { background: linear-gradient(180deg, #fffbe0, #f6d77a 55%, #e0ad48); border-color: #a8741c; color: #3a2604; box-shadow: 0 0 10px rgba(230, 170, 60, .5); }
/* 立直と一緒に使うカードを聞く画面 */
.riichiask { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.riichiask .ra-cards { display: flex; gap: 18px; justify-content: center; }
.riichiask .ra-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* ---------------------------------------------------------------- 菊の紋様の光をやめて、やわらかい光の輪に
   （ツモ・ロン・鳴き・北抜き・リーチの発声、カードを引く、ツモボタン）。色は今まで通り --k1〜--k3 と --glow で変える */
.fx-shout .burst, .fx-carddraw .rays, .bigrays {
  -webkit-mask: none; mask: none; border-radius: 50%;
  background:
    radial-gradient(circle, var(--k1) 0%, color-mix(in srgb, var(--k2) 75%, transparent) 16%, color-mix(in srgb, var(--k3) 30%, transparent) 38%, transparent 62%);
  filter: blur(1px);
}
.fx-shout .burst { animation: haloIn .5s cubic-bezier(.2, 1.3, .4, 1) forwards, haloPulse 2.2s .5s ease-in-out infinite; }
.fx-carddraw .rays { animation: haloPulse 2.4s ease-in-out infinite; opacity: .9; }
.bigrays { animation: haloPulse 2.6s ease-in-out infinite; opacity: .6; }
/* 広がっていく光の輪（2重） */
.fx-shout::after, .fx-carddraw .rays::before, .fx-carddraw .rays::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; border-radius: 50%;
  -webkit-mask: none; mask: none; background: none; opacity: 0;
  border: 2px solid color-mix(in srgb, var(--k1, #fff6c8) 85%, transparent);
  box-shadow: 0 0 16px var(--glow, #ffd25a), inset 0 0 12px color-mix(in srgb, var(--glow, #ffd25a) 60%, transparent);
  transform: translate(-50%, -50%) scale(.4);
  animation: ringOut 1.6s ease-out infinite;
}
.fx-shout::after { left: 0; top: 0; animation: ringOut 1.4s .1s ease-out 2; }
.fx-carddraw .rays::after { animation-delay: .8s; }
.fx-carddraw .rays { --k1: #fff6d8; --k2: #ffd76a; --k3: #e09a2a; --glow: #ffcf5a; }
@keyframes haloIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes haloPulse { 0%, 100% { scale: 1; opacity: .9; } 50% { scale: 1.06; opacity: 1; } }
@keyframes ringOut { 0% { opacity: .95; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.8); } }
/* 宝船などで山から集めてくる牌：手牌の裏と同じ青い裏面にする */
.fx-backtile {
  background:
    radial-gradient(ellipse at 28% 14%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, #5a9be8 0%, #2a6fc8 58%, #174a94 100%);
  box-shadow: inset 0 0 0 1px rgba(10, 30, 70, .35), inset 0 -6px 0 #f4f6f9, 0 4px 8px rgba(0, 0, 0, .5);
}
/* 禁止令：宣言した牌を大きく出して、斜めに「禁止」の判を押す */
.fx-seal.tileban { width: auto; height: auto; border-radius: 0; background: none; border: 0; box-shadow: none; }
.fx-seal.tileban .fx-bantile { --w: 110px; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .6)); }
.fx-seal.tileban .fx-banmark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-14deg);
  padding: 6px 18px; border: 5px solid #e0182c; border-radius: 10px; color: #e0182c; background: rgba(255, 255, 255, .78);
  font: 900 46px/1 "Shippori Mincho B1", serif; letter-spacing: 6px; white-space: nowrap;
  box-shadow: 0 0 18px rgba(224, 24, 44, .55); animation: banStamp .32s .18s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes banStamp { from { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(2.2); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); } }
/* カードログ：結界門で見せた手牌 */
.cl-reveal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.cl-rvname { font-size: 12px; color: #ffd98a; }
.cl-rvtiles { display: flex; gap: 1px; }
.cl-rvtiles .tile { --w: 20px; }
/* 牌の字は印の白い文字色を受けない。「禁止」の判は牌の下の方に押して、牌の字が見えるようにする */
.fx-seal.tileban { color: initial; text-shadow: none; font: initial; }
.fx-seal.tileban .fx-banmark { top: 108%; font-size: 38px; padding: 4px 14px; }
.riichiask .row .btn { white-space: nowrap; }
/* CPUごとの強さ */
.ps-levels-box { display: flex; align-items: flex-start; gap: 14px; }
.ps-levels-box > .ps-lvlab { padding-top: 9px; }
.ps-lvlist { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ps-lvname { font: 800 13px/1 "Shippori Mincho B1", serif; color: #5a3c10; min-width: 52px; }
.lv-tag { margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; background: #6a8a4a; color: #fff; }
.lv-tag.normal { background: #8a6a2a; }
.lv-tag.hard { background: #a8202e; }
.ps-levels-box > .ps-lvlab { white-space: nowrap; }
/* 体験版：製品版で遊べるものを鍵付きで見せる */
.ps-mode.locked { background: #ece3cc; border-style: dashed; color: #8a7a5a; filter: saturate(.6); cursor: default; }
.ps-mode.locked .ps-tiles { opacity: .55; }
.lock-badge { display: inline-block; margin-top: 2px; padding: 2px 8px; border-radius: 999px; background: #5a1a2c; color: #ffe9b0; font-size: 11px; font-weight: 800; width: fit-content; }
.book-locked { width: 132px; aspect-ratio: 59 / 86; border-radius: 10px; border: 2px dashed rgba(201, 154, 62, .7);
  background: repeating-linear-gradient(45deg, rgba(90, 26, 44, .55) 0 10px, rgba(60, 14, 30, .55) 10px 20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #ffe9b0; cursor: default; }
.book-locked .bl-icon { font-size: 26px; }
.book-locked b { font: 900 20px/1 "Shippori Mincho B1", serif; letter-spacing: 3px; }
.book-locked small { font-size: 11px; opacity: .85; }
.fn-teaser { margin: 10px auto 4px; padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(232, 196, 110, .55);
  background: rgba(90, 26, 44, .45); display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 560px; }
.fn-teaser b { color: #ffe9b0; font: 800 16px/1.2 "Shippori Mincho B1", serif; letter-spacing: 2px; }
.fn-tz-items { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.fn-tz-item { padding: 4px 12px; border-radius: 999px; background: rgba(255, 233, 176, .14); color: #fff3d0; font-size: 13px; }
.fn-tz-x { color: #8fd0ff; font-size: 13px; text-decoration: underline; }
/* 体験版：オンライン対戦は鍵付き */
.ps-opp.locked { filter: grayscale(.55) brightness(.82); cursor: default; border-style: dashed; }
.ps-opp.locked .lock-badge { margin-top: 2px; }
/* 体験版の東風戦：局名の横の小さな札 */
.tonpu-tag { margin-left: 6px; padding: 2px 7px; border-radius: 6px; font-size: 12px; font-weight: 800; letter-spacing: 1px;
  background: #2a6fc8; color: #fff; vertical-align: middle; }
.console .tonpu-tag { display: inline-block; margin: 2px auto 0; white-space: nowrap; font-size: 11px; padding: 1px 8px; }
/* 対局スタイルの画面：体験版は東風戦のお知らせ */
.ps-trialnote { padding: 7px 14px; border-radius: 10px; background: #fff3d6; border: 1px solid #e0b860; color: #5a3c10; font-size: 13px; }
.ps-trialnote b { color: #2a6fc8; font-weight: 900; margin-right: 2px; }
/* 三人麻雀のボタンの中：体験版は東風戦 */
.tonpu-badge { display: inline-block; width: fit-content; margin-top: 3px; padding: 3px 10px; border-radius: 999px;
  background: #2a6fc8; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.tonpu-badge { white-space: nowrap; }
/* 体験版の図鑑：製品版で使えるカード（絵を暗くして鍵） */
.book-lockedcard { position: relative; width: fit-content; cursor: pointer; }
.book-lockedcard .jcard { filter: grayscale(.85) brightness(.55); }
.book-lockedcard .blc-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: #ffe9b0; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); pointer-events: none; }
.book-lockedcard .blc-cover .bl-icon { font-size: 30px; }
.book-lockedcard .blc-cover small { font-size: 12px; font-weight: 800; background: rgba(60, 14, 30, .8); padding: 3px 10px; border-radius: 999px; }
/* 宣言の表示：牌を左に、説明は一行で */
.fx-choice { max-width: none; width: fit-content; }
.fx-choice-tx { white-space: nowrap; }
.fx-choice .tile { --w: 40px; }

/* ---------------------------------------------------------------- ドラ：金の縁取りと、ときどき面を走る光の帯で、ひと目でわかる高級な輝きに */
.tile.isdora::before {
  inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 calc(var(--w) * .045) rgba(212, 160, 40, .95), inset 0 0 0 calc(var(--w) * .075) rgba(255, 238, 170, .85),
    inset 0 0 calc(var(--w) * .28) rgba(255, 200, 70, .55), 0 0 calc(var(--w) * .32) rgba(255, 196, 60, .75);
  background: linear-gradient(115deg, transparent 38%, rgba(255, 252, 230, .0) 42%, rgba(255, 250, 220, .85) 50%, rgba(255, 252, 230, 0) 58%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0;
  animation: doraSheen 3.2s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes doraSheen { 0%, 55% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.tile.isdora::after { filter: drop-shadow(0 0 3px rgba(255, 210, 70, 1)) drop-shadow(0 0 6px rgba(255, 190, 40, .7)); }
.hand .tile.isdora { box-shadow: var(--tile3d), 0 0 14px rgba(255, 200, 70, .7); }
@media (prefers-reduced-motion: reduce) { .tile.isdora::before { animation: none; } }

/* 鳴き（チー・ポン・カン・北抜き）：後ろの光の模様は出さず、文字だけ。白い文字は見にくいので、金色の文字に濃い縁 */
.fx-shout.call .burst, .fx-shout.call::before, .fx-shout.call::after { display: none; }
.fx-shout.call .word { color: #ffd84a; -webkit-text-stroke: 5px #1a1030; paint-order: stroke fill;
  text-shadow: 0 4px 0 #1a1030, 0 6px 14px rgba(0, 0, 0, .7); }
.fx-shout.call.kan .word { color: #e8c8ff; }
.fx-shout.call.nuki .word { color: #b8f5c4; }
/* テンパイの待ち：手牌に触れた時だけ出す */
.waits.hoverwaits { opacity: 0; pointer-events: none; transition: opacity .12s; }
body.hand-hover .waits.hoverwaits, .waits.hoverwaits.show { opacity: 1; }
/* カウンターを聞く画面：返せるカードを大きく光らせて見せる */
.counterask { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.counterask .ca-what { font: 800 17px/1.4 "Shippori Mincho B1", serif; color: #fff3c4; text-align: center; }
.counterask .ca-cards { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.counterask .ca-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.counterask .ca-card, .fx-countercard { box-shadow: 0 0 0 3px #ff5a6e, 0 0 26px rgba(255, 70, 90, .85), 0 8px 18px rgba(0, 0, 0, .6); animation: caPulse 1.4s ease-in-out infinite; cursor: zoom-in; }
@keyframes caPulse { 50% { box-shadow: 0 0 0 3px #ffb3be, 0 0 40px rgba(255, 90, 110, 1), 0 8px 18px rgba(0, 0, 0, .6); } }
.fx-counterrow { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 4px 0 6px; }
.fx-countercol { display: flex; flex-direction: column; align-items: center; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .counterask .ca-card, .fx-countercard { animation: none; } }
/* 宣言した牌・対象を、本物の牌やカードで見せる */
.fx-choice .tile { --w: 40px; }
.fx-choicecard { flex: none; }
.cl-aim .tile + .tile { margin-left: 2px; }
.activedetail.withtile { display: flex; align-items: center; justify-content: center; gap: 4px; }
.activedetail.withtile .tile { --w: 24px; }
.zoomcap .zoomtile { --w: 46px; display: inline-block; vertical-align: middle; margin-left: 10px; }
.cardpeek .peektile { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; padding: 6px 12px; border-radius: 12px;
  background: rgba(20, 8, 30, .9); box-shadow: 0 0 0 2px #e7c46a; color: #fff3c4; font: 800 15px/1 "Shippori Mincho B1", serif; }
.cardpeek .peektile .tile { --w: 40px; }

/* カードを引いた：シンプルに。斜めの字・流れる線・後ろの光はやめ、和風の字を金色で */
.fx-drawword { transform: translate(-50%, -50%); font-family: "Shippori Mincho B1", serif; font-weight: 800; font-size: 54px; letter-spacing: 6px;
  color: #ffe9a8; -webkit-text-stroke: 6px #2a0f1e; paint-order: stroke fill; text-shadow: 0 4px 10px rgba(0, 0, 0, .7); }
.fx-drawword::before, .fx-drawword::after { display: none !important; }
.fx-drawword.small { font-size: 22px; letter-spacing: 3px; -webkit-text-stroke: 4px #2a0f1e; }
.fx-carddraw .rays { display: none; }
@keyframes drawWord { from { opacity: 0; transform: translate(-50%, -40%); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* 鳴き・北抜きの文字も、ほかの画面と同じ明朝体に */
.fx-shout.call .word { font-family: "Shippori Mincho B1", serif; font-weight: 800; letter-spacing: 8px; }
.fx-shout.call.nuki .word { font-size: 48px; color: #ffe9a8; }
/* シャンテン数：大きめで見やすく */
.handinfo .shanten { padding: 6px 18px 7px; font-size: 24px; letter-spacing: 2px; border-radius: 10px; box-shadow: 0 0 0 2px rgba(255, 240, 200, .55), 0 4px 10px rgba(0, 0, 0, .5); }
.handinfo .shanten b { font: 800 26px/1 "Shippori Mincho B1", serif; }
.handinfo .shanten small { font-size: 13px; }
.fx-shield.side { border-radius: 45% / 18%; }
/* ロンした牌：虹色のオーラ */
.fx-ronaura { position: fixed; z-index: 34; transform: translate(-50%, -50%); border-radius: 10px; pointer-events: none;
  background: conic-gradient(from 0deg, #ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #8a6bff, #ff4dd8, #ff4d6d);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .9)) blur(.4px); animation: ronAura 1.2s linear infinite, ronAuraIn .3s ease-out; }
@keyframes ronAura { to { filter: drop-shadow(0 0 16px rgba(255, 255, 255, 1)) hue-rotate(360deg) blur(.4px); } }
@keyframes ronAuraIn { from { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
/* あがり牌（倒した手牌の右端）にも虹色の光 */
.tile.wintile { box-shadow: 0 0 0 3px #fff, 0 0 0 6px transparent, 0 0 18px 6px rgba(255, 255, 255, .6) !important; animation: winRainbow 2s linear infinite; }
@keyframes winRainbow { 0% { filter: drop-shadow(0 0 8px #ff4d6d); } 25% { filter: drop-shadow(0 0 8px #fff04d); } 50% { filter: drop-shadow(0 0 8px #4dff88); } 75% { filter: drop-shadow(0 0 8px #4dd2ff); } 100% { filter: drop-shadow(0 0 8px #ff4d6d); } }
/* 役満：点数を虹色に */
.rs-total.yakuman .gain, .rs-total.yakuman .gainunit, .rs-total.yakuman .limitname {
  background: linear-gradient(90deg, #ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #8a6bff, #ff4dd8, #ff4d6d) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-stroke: 0;
  text-shadow: none; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .55)) drop-shadow(0 3px 0 rgba(40, 10, 40, .9));
  animation: yakumanRainbow 2.4s linear infinite; }
@keyframes yakumanRainbow { to { background-position: 200% 0; } }
/* 音量のつまみ */
.volslider { display: inline-flex; align-items: center; gap: 10px; }
.volslider input[type=range] { width: 180px; accent-color: #e7c46a; }
.volslider .volval { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.gm-vols { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.gm-vol { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #fff3c4; font: 800 15px/1 "Shippori Mincho B1", serif; }
/* ロンされた河の牌：虹色の光の輪 */
.pond .ronned { position: relative; z-index: 3; }
.pond .ronned .ronring { position: absolute; inset: -9px; border-radius: 9px; pointer-events: none; z-index: 5;
  background: conic-gradient(from 0deg, #ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #8a6bff, #ff4dd8, #ff4d6d);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, .9)); animation: ronAura 1.2s linear infinite; }
body:not(.ron-lit) .pond .ronned .ronring { opacity: 0; }
/* ロン・ツモ・鳴きの確認は、河（どの牌か）が見えるように上の方に出す */
.overlay:has(> .counterask) { align-items: flex-start; padding-top: 110px; background: rgba(0, 0, 0, .25); }

/* ---------------------------------------------------------------- motion-prompt の演出（MIT License · showheyohtaki/motion-prompt） */
/* #153 3Dチルト */
.jcard.tiltable { transition: transform .12s ease-out; transform-style: preserve-3d; will-change: transform; }
.jcard .tiltglare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: screen; z-index: 3; }
.cardpeek .jcard { transition: transform .12s ease-out; position: relative; }
.jcard.tiltable { position: relative; }
/* #142 ガラス割れ：割れる瞬間の白い光 */
.fx-shatterflash { position: fixed; inset: 0; background: #fff; pointer-events: none; z-index: 5; animation: shatterFlash .45s ease-out forwards; }
@keyframes shatterFlash { from { opacity: .65; } to { opacity: 0; } }
/* #011 スクワッシュ＆ストレッチ：手牌を倒す時、卓に当たってつぶれ、伸びて戻る */
@keyframes slamDown {
  0% { transform: perspective(500px) rotateX(-70deg) scaleY(1.06); filter: brightness(.7); }
  60% { transform: perspective(500px) rotateX(2deg) scale(1, 1); filter: brightness(1.15); }
  70% { transform: perspective(500px) rotateX(0) scale(1.04, .84); }
  84% { transform: perspective(500px) rotateX(-5deg) scale(.98, 1.05); }
  100% { transform: none; filter: none; }
}
.laid.tipping { animation-duration: .5s; }
/* リーチ棒：落ちてきて、つぶれて弾む */
.kyosticks .tenbou.dropin { animation: stickDrop .55s cubic-bezier(.5, 0, .5, 1) both; transform-origin: 50% 100%; }
@keyframes stickDrop {
  0% { transform: translateY(-60px) scaleY(1.3); opacity: 0; }
  55% { transform: translateY(0) scaleY(1); opacity: 1; }
  68% { transform: translateY(0) scale(1.25, .55); }
  84% { transform: translateY(-6px) scale(.92, 1.15); }
  100% { transform: none; }
}
.rs-now { display: inline-block; }

/* ---------------------------------------------------------------- 結果の額縁（厚い金の縁・走る光・四隅の宝珠） */
@property --rsA { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.overlay.res2:not(.draw) .result.res2 {
  --fx1: #fff3b0; --fx2: #ffb52e; --fx3: #fff; --jw1: #fff4c2; --jw2: #ffb000; --jw3: #8a4a00;
  border: 13px solid transparent; border-radius: 22px; padding: 20px 24px; overflow: visible;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 200, 90, .18), transparent 55%) padding-box,
    repeating-linear-gradient(45deg, rgba(231, 196, 106, .05) 0 2px, transparent 2px 18px) padding-box,
    linear-gradient(160deg, #3a1530 0%, #1d0b2a 55%, #10081c 100%) padding-box,
    /* 金の縁：光の当たる面と影の面を交互に置いて、打ち出した金具のような厚みを出す */
    linear-gradient(135deg, #fff8d8 0%, #f2c75a 9%, #8a5512 20%, #ffe79a 31%, #c48a24 44%, #fff4c8 52%, #b07818 63%, #ffe08a 76%, #7a4a0e 88%, #f7d77a 100%) border-box;
  box-shadow:
    0 0 0 1px #4a2a06, 0 0 0 3px rgba(255, 240, 190, .55),
    inset 0 0 0 1px #3a1f04, inset 0 0 0 3px rgba(255, 236, 170, .35), inset 0 6px 18px rgba(0, 0, 0, .6), inset 0 0 50px rgba(255, 190, 80, .14),
    0 0 26px 4px rgba(255, 196, 70, .55), 0 0 80px rgba(255, 160, 40, .3), 0 26px 70px rgba(0, 0, 0, .8);
}
.overlay.res2.win-ron:not(.draw) .result.res2 { --fx1: #ffd0d0; --fx2: #ff3b4e; --fx3: #fff; --jw1: #ffd6d6; --jw2: #e0162c; --jw3: #4a0008; }
.rs-frame { position: absolute; inset: 0; pointer-events: none; z-index: 4; border-radius: 10px; }
/* 縁の内側を一周する光の筋 */
.rs-frame .rs-run { position: absolute; inset: 3px; border-radius: 9px; padding: 2px;
  background: conic-gradient(from var(--rsA), transparent 0 62%, var(--fx2) 74%, var(--fx1) 82%, var(--fx3) 85%, transparent 92%),
              linear-gradient(var(--fx2), var(--fx2));
  background-blend-mode: normal; opacity: .95;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 4px var(--fx2)) drop-shadow(0 0 10px var(--fx2));
  animation: rsRun 3.2s linear infinite; }
.rs-frame .rs-run { background: conic-gradient(from var(--rsA), color-mix(in srgb, var(--fx2) 35%, transparent) 0 60%, var(--fx2) 72%, var(--fx1) 80%, var(--fx3) 84%, color-mix(in srgb, var(--fx2) 35%, transparent) 92%); }
@keyframes rsRun { to { --rsA: 360deg; } }
/* 斜めに走る照り返し */
.rs-frame .rs-shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.rs-frame .rs-shine::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 18%; left: -30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .0) 20%, rgba(255, 255, 255, .22) 50%, transparent 80%);
  transform: skewX(-18deg); animation: rsFrameShine 4.5s ease-in-out 1.2s infinite; }
@keyframes rsFrameShine { 0% { left: -30%; } 45%, 100% { left: 130%; } }
/* 四隅の宝珠：金の菱形の台に、光る玉 */
.rs-gem { position: absolute; width: 44px; height: 44px; z-index: 5; }
.rs-gem.tl { left: -30px; top: -30px; } .rs-gem.tr { right: -30px; top: -30px; }
.rs-gem.bl { left: -30px; bottom: -30px; } .rs-gem.br { right: -30px; bottom: -30px; }
.rs-gem::before { content: ""; position: absolute; inset: 4px; transform: rotate(45deg); border-radius: 6px;
  background: linear-gradient(135deg, #fff8d8, #e9b445 35%, #7a4a0e 55%, #ffe08a 75%, #a06a14);
  box-shadow: 0 0 0 1px #4a2a06, inset 0 0 0 2px rgba(255, 245, 200, .55), 0 3px 8px rgba(0, 0, 0, .6), 0 0 14px rgba(255, 200, 80, .6); }
.rs-gem b { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--jw1) 22%, var(--jw2) 55%, var(--jw3) 100%);
  box-shadow: 0 0 0 1.5px #5a3608, 0 0 10px 2px var(--jw2), 0 0 22px var(--jw2); animation: rsGem 2.4s ease-in-out infinite; }
.rs-gem.tr b { animation-delay: .6s; } .rs-gem.br b { animation-delay: 1.2s; } .rs-gem.bl b { animation-delay: 1.8s; }
@keyframes rsGem { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.45); box-shadow: 0 0 0 1.5px #5a3608, 0 0 16px 5px var(--jw2), 0 0 34px var(--jw2); } }
/* 宝珠のきらめき（十字の光） */
.rs-gem::after { content: ""; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; pointer-events: none;
  background: linear-gradient(90deg, transparent 47%, rgba(255, 255, 255, .95) 50%, transparent 53%), linear-gradient(0deg, transparent 47%, rgba(255, 255, 255, .95) 50%, transparent 53%);
  -webkit-mask: radial-gradient(circle, #000 0 8%, transparent 60%); mask: radial-gradient(circle, #000 0 8%, transparent 60%);
  opacity: 0; animation: rsTwinkle 2.4s ease-in-out infinite; }
.rs-gem.tr::after { animation-delay: .6s; } .rs-gem.br::after { animation-delay: 1.2s; } .rs-gem.bl::after { animation-delay: 1.8s; }
@keyframes rsTwinkle { 0%, 70%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 82% { opacity: 1; transform: scale(1.1) rotate(20deg); } }
/* 役満：縁を流れる光と宝珠を虹色に */
.overlay.res2.win-yakuman .rs-frame .rs-run { background: conic-gradient(from var(--rsA), #ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #8a6bff, #ff4dd8, #ff4d6d);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .8)) drop-shadow(0 0 12px rgba(255, 120, 220, .7)); animation-duration: 2.2s; }
.overlay.res2.win-yakuman .rs-gem b { background: conic-gradient(from 0deg, #ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #8a6bff, #ff4dd8, #ff4d6d);
  box-shadow: 0 0 0 1.5px #5a3608, 0 0 12px 3px rgba(255, 255, 255, .7), 0 0 26px rgba(255, 120, 220, .8); animation: rsGemHue 2s linear infinite; }
@keyframes rsGemHue { to { filter: hue-rotate(360deg) brightness(1.2); } }
@media (prefers-reduced-motion: reduce) { .rs-frame .rs-run, .rs-frame .rs-shine::before, .rs-gem b, .rs-gem::after { animation: none; } }

/* 金の縁の厚み：外の縁・溝・中の稜線・内の縁を重ねて、打ち出しの額縁に見せる。上は明るく下は暗く */
.rs-frame .rs-bevel { position: absolute; inset: -13px; border-radius: 22px; pointer-events: none;
  box-shadow: inset 0 0 0 1px #fff7cf, inset 0 0 0 2px #e7b445, inset 0 0 0 4px #8a5512, inset 0 0 0 5px #5a3508,
    inset 0 0 0 6px #fff0b0, inset 0 0 0 8px #f2c75a, inset 0 0 0 10px #b07818, inset 0 0 0 11px #6b400c, inset 0 0 0 12px #ffe9a0, inset 0 0 0 13px #3a1f04; }
.rs-frame .rs-bevel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 18%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, .4)),
              linear-gradient(90deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 12%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, .3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.rs-frame .rs-run { padding: 3px; inset: 2px; }
/* 宝珠の台をもう一枚（八つの角の金具） */
.rs-gem { width: 52px; height: 52px; }
.rs-gem.tl { left: -33px; top: -33px; } .rs-gem.tr { right: -33px; top: -33px; }
.rs-gem.bl { left: -33px; bottom: -33px; } .rs-gem.br { right: -33px; bottom: -33px; }
.rs-gem s { position: absolute; inset: 9px; border-radius: 5px;
  background: linear-gradient(180deg, #fff6c8, #d9a63a 45%, #7a4a0e 70%, #f2c75a);
  box-shadow: 0 0 0 1px #4a2a06, inset 0 0 0 2px rgba(255, 245, 200, .5); }
.rs-gem b { width: 22px; height: 22px; margin: -11px 0 0 -11px; }

/* 結果の手牌：1列に並べ、あがり牌は牌1つ分あけて一番右に */
.res2 .rs-hand { flex-wrap: nowrap; }
.res2 .rs-hand .wingap { flex: none; width: 44px; }
@media (max-width: 760px), (max-height: 520px) { .res2 .rs-hand .wingap { width: 30px; } }
.res2 .rs-hand .sz-big { flex: none; }

/* ---- 四隅のダイヤ（前の宝珠の台と玉は使わない） */
.rs-gem { width: 54px; height: 50px; }
.rs-gem::before, .rs-gem::after { content: none; }
.rs-gem.tl { left: -36px; top: -34px; } .rs-gem.tr { right: -36px; top: -34px; }
.rs-gem.bl { left: -36px; bottom: -34px; } .rs-gem.br { right: -36px; bottom: -34px; }
.rs-gem .dia { width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .6)) drop-shadow(0 3px 4px rgba(0, 0, 0, .55)) drop-shadow(0 0 8px var(--dg)) drop-shadow(0 0 18px var(--dg));
  animation: diaPulse 2.4s ease-in-out infinite; }
.rs-gem.tr .dia { animation-delay: .6s; } .rs-gem.br .dia { animation-delay: 1.2s; } .rs-gem.bl .dia { animation-delay: 1.8s; }
.rs-gem .dia .d1 { fill: var(--d1); } .rs-gem .dia .d2 { fill: var(--d2); } .rs-gem .dia .d3 { fill: var(--d3); }
.rs-gem .dia .d4 { fill: var(--d4); } .rs-gem .dia .d5 { fill: var(--d5); }
.rs-gem .dia polygon { stroke: rgba(255, 255, 255, .55); stroke-width: .35; stroke-linejoin: round; }
.rs-gem .dia .rim { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: .8; }
.rs-gem .dia .glint { fill: #fff; opacity: .9; }
@keyframes diaPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* 色の初期値：透明なダイヤ（連荘数での色分けは後ろの ren0〜ren4） */
.overlay.res2 .result.res2 { --d1: #ffffff; --d2: #eef6ff; --d3: #bcd0e6; --d4: #7f93ad; --d5: #fff1c4; --dg: rgba(255, 220, 140, .9); }
/* 役満：面ごとに虹色の光を散らして、色がめぐる */
.overlay.res2.win-yakuman .result.res2 { --d1: #ffffff; --d2: #9ef0ff; --d3: #ff9ad8; --d4: #7a6bff; --d5: #fff07a; --dg: rgba(255, 255, 255, .95); }
.overlay.res2.win-yakuman .rs-gem .facets { animation: diaHue 2.2s linear infinite; }
@keyframes diaHue { to { filter: hue-rotate(360deg); } }
/* きらめき：ダイヤの上で十字の光がはじける */
.rs-gem .tw { position: absolute; left: 30%; top: 8%; width: 40px; height: 40px; margin: -20px 0 0 -20px; pointer-events: none;
  background: linear-gradient(90deg, transparent 46%, #fff 50%, transparent 54%), linear-gradient(0deg, transparent 46%, #fff 50%, transparent 54%);
  -webkit-mask: radial-gradient(circle, #000 0 6%, transparent 62%); mask: radial-gradient(circle, #000 0 6%, transparent 62%);
  opacity: 0; animation: rsTwinkle 2.4s ease-in-out infinite; }
.rs-gem.tr .tw { animation-delay: .6s; } .rs-gem.br .tw { animation-delay: 1.2s; } .rs-gem.bl .tw { animation-delay: 1.8s; }
@media (prefers-reduced-motion: reduce) { .rs-gem .dia, .rs-gem .facets, .rs-gem .tw { animation: none; } }
.result.res2 > .rs-fit > .rs-hand { max-width: none; width: max-content; }
/* ---- 連荘数でダイヤの色を変える（ロン・ツモは縁を回る光の色で分ける） */
/* 縁の光：誰のあがりでも、ツモは金・ロンは紅 */
.overlay.res2.other:not(.win-ron):not(.draw) .result.res2 { --fx1: #fff3b0; --fx2: #ffb52e; }
/* ダイヤ：1回目のあがりは透明、2連荘サファイア、3連荘エメラルド、4連荘ルビー、5連荘以上と役満は虹 */
.overlay.res2.ren0 .result.res2 { --d1: #ffffff; --d2: #eef6ff; --d3: #bcd0e6; --d4: #7f93ad; --d5: #fff1c4; --dg: rgba(255, 220, 140, .9); }
.overlay.res2.ren1 .result.res2 { --d1: #eaf2ff; --d2: #7fa6ff; --d3: #2f5cf0; --d4: #0c1f78; --d5: #b8ccff; --dg: rgba(80, 130, 255, .95); }
.overlay.res2.ren2 .result.res2 { --d1: #e6fff0; --d2: #5fe39a; --d3: #12a85a; --d4: #04502a; --d5: #b2f5cf; --dg: rgba(40, 220, 120, .95); }
.overlay.res2.ren3 .result.res2 { --d1: #ffe4e8; --d2: #ff7a8c; --d3: #e01a38; --d4: #7a0418; --d5: #ffb0bc; --dg: rgba(255, 60, 90, .95); }
.overlay.res2.ren4 .result.res2, .overlay.res2.win-yakuman .result.res2 { --d1: #ffffff; --d2: #9ef0ff; --d3: #ff9ad8; --d4: #7a6bff; --d5: #fff07a; --dg: rgba(255, 255, 255, .95); }
.overlay.res2.ren4 .rs-gem .facets { animation: diaHue 2.2s linear infinite; }
.overlay.res2.ren4 .rs-gem .tw { animation-duration: 1.2s; }
.overlay.res2.ren4 .rs-gem .dia { width: 112%; height: 112%; margin: -6% 0 0 -6%; }
/* 「n連荘！」の札：ダイヤと同じ色 */
.res2 .rs-ren { margin-top: -6px; padding: 3px 16px 4px; border-radius: 999px; font: 900 20px/1.2 "Shippori Mincho B1", serif; letter-spacing: 3px; color: #fff;
  background: linear-gradient(180deg, var(--d2), var(--d3) 60%, var(--d4)); box-shadow: 0 0 0 2px #fff3c4, 0 0 0 4px #8a5512, 0 0 18px var(--dg);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55); }
.res2 .rs-ren.ren4 { background: linear-gradient(90deg, #ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #8a6bff, #ff4dd8, #ff4d6d) 0 0 / 200% 100%; animation: yakumanRainbow 2.4s linear infinite; }
/* 連荘ボーナスのあがり報酬：縁を虹色にして、枚数を大きく */
.fx-buy.reward.bonus { box-shadow: 0 0 0 2px #fff, 0 0 0 5px #ff4dd8, 0 0 0 8px #4dd2ff, 0 0 50px rgba(255, 120, 220, .8); }
.fx-buy.reward.bonus .t { background: linear-gradient(90deg, #ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #8a6bff, #ff4dd8) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; animation: yakumanRainbow 2.4s linear infinite; }
.fx-buy.reward.bonus .c { font-size: 1.25em; color: #fff6c8; text-shadow: 0 0 14px rgba(255, 220, 120, .9); }

/* ---------------------------------------------------------------- ぷっくりした艶ボタン（パチンコ台のボタンのように厚み・艶・光の走り） */
.act.act, body.in-game .btn { position: relative; overflow: hidden; isolation: isolate; }
.act.act {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--lq1) 55%, #fff) 0%, var(--lq1) 38%, var(--lq2) 100%);
  box-shadow:
    inset 0 0 0 1.5px var(--rim), inset 0 0 0 3px rgba(0, 0, 0, .45), inset 0 0 0 4px rgba(255, 236, 170, .3),
    inset 0 -7px 12px rgba(0, 0, 0, .45),
    0 0 0 1px #000, 0 4px 0 color-mix(in srgb, var(--lq2) 55%, #000), 0 4px 0 1px #000, 0 10px 18px rgba(0, 0, 0, .6);
  transition: transform .08s, box-shadow .08s, filter .12s;
}
/* 上半分の艶（文字の下に敷く） */
.act.act::before, body.in-game .btn::before { content: ""; position: absolute; z-index: -1; left: 5px; right: 5px; top: 3px; height: 48%;
  border-radius: 8px 8px 40% 40% / 8px 8px 12px 12px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 70%, rgba(255, 255, 255, 0)); }
/* 斜めに走る光 */
.act.act::after, body.in-game .btn::after { content: ""; position: absolute; z-index: -1; top: -30%; bottom: -30%; width: 34%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5) 50%, transparent); transform: skewX(-20deg);
  animation: btnShine 3.6s ease-in-out infinite; }
@keyframes btnShine { 0%, 55% { left: -60%; } 85%, 100% { left: 140%; } }
.act.act:hover::after, body.in-game .btn:hover::after { animation-duration: 1.2s; }
.act.act:hover { filter: brightness(1.15) saturate(1.1); }
/* 押すと沈む（厚みがなくなる） */
.act.act:active { transform: translateY(4px); filter: brightness(.95);
  box-shadow: inset 0 0 0 1.5px var(--rim), inset 0 0 0 3px rgba(0, 0, 0, .45), inset 0 -4px 10px rgba(0, 0, 0, .5), 0 0 0 1px #000, 0 3px 8px rgba(0, 0, 0, .6); }
.act.act.on { box-shadow: inset 0 0 0 2px #fff3c4, inset 0 0 0 4px rgba(0, 0, 0, .5), inset 0 -7px 12px rgba(0, 0, 0, .45),
  0 0 0 1px #000, 0 4px 0 color-mix(in srgb, var(--lq2) 55%, #000), 0 4px 0 1px #000, 0 0 24px rgba(255, 220, 130, .95); }
/* あがれる時のツモ・ロン：鮮やかな紅に、脈打つ光の輪 */
.act.act.win { --lq1: #ff3048; --lq2: #6a0010; --rim: #ffe9a0; font-size: 22px; animation: winBtnPulse 1.1s ease-in-out infinite; }
@keyframes winBtnPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25) saturate(1.2) drop-shadow(0 0 10px rgba(255, 90, 90, .95)) drop-shadow(0 0 22px rgba(255, 200, 80, .8)); } }
.act.act.win::after { animation-duration: 1.6s; }
.act.act.riichi { --lq1: #e8203a; --lq2: #5a0010; }
.act.act.call { --lq1: #2f7ae8; --lq2: #071a4a; }
.act.act.kan { --lq1: #8a3ae8; --lq2: #200848; }
.act.act.skip::after { animation: none; }
/* 対局中のふつうのボタン */
body.in-game .btn { background: linear-gradient(180deg, #6a5038 0%, #3a2a1c 38%, #120a05 100%);
  box-shadow: inset 0 0 0 1.5px #f0cc62, inset 0 0 0 3px rgba(0, 0, 0, .45), inset 0 -6px 10px rgba(0, 0, 0, .45),
    0 0 0 1px #000, 0 4px 0 #0a0502, 0 4px 0 1px #000, 0 9px 16px rgba(0, 0, 0, .55); transition: transform .08s, box-shadow .08s, filter .12s; }
body.in-game .btn.gold { color: #3a2204;
  background: linear-gradient(180deg, #fff2b0 0%, #f6d36a 30%, #d9961e 62%, #8a5208 100%);
  box-shadow: inset 0 0 0 1.5px #fff6d0, inset 0 -6px 10px rgba(90, 40, 0, .45),
    0 0 0 1px #3a2204, 0 0 0 3px #f0cc62, 0 0 0 4px #3a2204, 0 4px 0 2px #5a3204, 0 4px 0 3px #1a0c02, 0 10px 18px rgba(0, 0, 0, .55), 0 0 18px rgba(255, 200, 80, .45); }
body.in-game .btn.red { color: #fff3c4; text-shadow: 0 1px 0 #000;
  background: linear-gradient(180deg, #ff8a96 0%, #ff3048 32%, #b0101e 65%, #4a0008 100%);
  box-shadow: inset 0 0 0 1.5px #ffe9a0, inset 0 -6px 10px rgba(0, 0, 0, .45), 0 0 0 1px #000, 0 4px 0 #2a0004, 0 4px 0 1px #000, 0 10px 18px rgba(0, 0, 0, .55), 0 0 16px rgba(255, 60, 80, .5); }
body.in-game .btn:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 0 0 1.5px #f0cc62, inset 0 -4px 8px rgba(0, 0, 0, .5), 0 0 0 1px #000, 0 3px 8px rgba(0, 0, 0, .55); }
body.in-game .btn:disabled::after, .act.act:disabled::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .act.act::after, body.in-game .btn::after, .act.act.win { animation: none; } }
/* 大きいツモ・ロン：上半分の艶と、台から浮いた厚み */
.bigbtn.tsumo { background:
    linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .14) 46%, rgba(255, 255, 255, 0) 48%) 50% 0 / calc(100% - 14px) 100% no-repeat,
    radial-gradient(ellipse at 50% 0%, rgba(255, 250, 220, .55), transparent 55%), linear-gradient(180deg, #ffd860 0%, #e0a028 45%, #8a4a08 100%);
  box-shadow: inset 0 0 0 2px #fff3c4, inset 0 -8px 14px rgba(80, 30, 0, .55), 0 0 0 4px #5a3606, 0 0 0 7px #f0cc62, 0 0 0 9px #3a2204,
    0 8px 0 2px #4a2804, 0 8px 0 4px #1a0c02, 0 16px 24px rgba(0, 0, 0, .6), 0 0 50px rgba(255, 200, 70, .95); }
.bigbtn.ron { background:
    linear-gradient(180deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .12) 46%, rgba(255, 255, 255, 0) 48%) 50% 0 / calc(100% - 14px) 100% no-repeat,
    radial-gradient(ellipse at 50% 0%, rgba(255, 220, 220, .45), transparent 55%), linear-gradient(180deg, #ff4a5a 0%, #b0101e 50%, #4a0008 100%);
  box-shadow: inset 0 0 0 2px #ffd0d0, inset 0 -8px 14px rgba(40, 0, 0, .6), 0 0 0 4px #5a0610, 0 0 0 7px #f0cc62, 0 0 0 9px #3a0408,
    0 8px 0 2px #2a0004, 0 8px 0 4px #0a0001, 0 16px 24px rgba(0, 0, 0, .6), 0 0 50px rgba(255, 70, 90, .95); }
.bigbtn:active { animation: none; transform: translateY(6px); }
/* ---- 結果画面の点数の移動：点棒が飛び、もらう人の欄は金色に光って数え上がる */
.tenbou.fx-flystick { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; width: 54px; height: 8px;
  box-shadow: 0 0 0 1px #b9b4a8, 0 0 10px rgba(255, 230, 150, .9), 0 3px 5px rgba(0, 0, 0, .45); }
.rs-dcell { position: relative; transition: background .3s; }
.rs-dcell.rs-gaining { background: linear-gradient(180deg, rgba(255, 220, 120, .28), rgba(120, 70, 8, .35));
  box-shadow: 0 0 0 2px #f0cc62, 0 0 22px rgba(255, 200, 80, .7); animation: rsGain .5s ease-in-out infinite alternate; }
@keyframes rsGain { to { box-shadow: 0 0 0 2px #fff3c4, 0 0 34px rgba(255, 210, 90, 1); } }
.rs-dcell.rs-gaining .rs-now, .rs-dcell.rs-gained .rs-now {
  background: linear-gradient(180deg, #fffbe6, #ffd54a 50%, #c88a20); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 8px rgba(255, 210, 90, .9)) drop-shadow(0 2px 0 rgba(60, 30, 0, .9)); }
.rs-dcell.rs-gained { box-shadow: 0 0 0 2px #f0cc62, 0 0 18px rgba(255, 200, 80, .55); }
.rs-dcell.rs-losing { animation: rsLose .18s linear 6; }
.rs-dcell.rs-losing .rs-now { color: #ff9a9a; }
@keyframes rsLose { 50% { transform: translateX(-2px); } }
/* 数え終わりにはじける金の光 */
.rs-burst { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; pointer-events: none; z-index: 3;
  box-shadow: 0 0 0 0 rgba(255, 240, 180, .95), 0 0 30px 10px rgba(255, 200, 80, .9); animation: rsBurst .8s ease-out forwards; }
@keyframes rsBurst { to { box-shadow: 0 0 0 120px rgba(255, 240, 180, 0), 0 0 60px 40px rgba(255, 200, 80, 0); } }
@media (prefers-reduced-motion: reduce) { .rs-dcell.rs-gaining, .rs-dcell.rs-losing { animation: none; } }
/* はじける光：白から金へ、明るく重ねて広がる */
.rs-burst { width: 60px; height: 60px; margin: -30px; border-radius: 50%; box-shadow: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0 12%, rgba(255, 230, 140, .9) 28%, rgba(255, 180, 40, .45) 50%, transparent 70%);
  animation: rsBurst2 .75s ease-out forwards; }
.rs-burst::before { content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(90deg, transparent 47%, #fff 50%, transparent 53%), linear-gradient(0deg, transparent 47%, #fff 50%, transparent 53%);
  -webkit-mask: radial-gradient(circle, #000 0 10%, transparent 65%); mask: radial-gradient(circle, #000 0 10%, transparent 65%); }
@keyframes rsBurst2 { 0% { transform: scale(.3); opacity: 1; } 60% { opacity: .9; } 100% { transform: scale(4.2) rotate(30deg); opacity: 0; } }
/* 光の層（PixiJS）：一番上に重ねて、さわれないように */
.glow-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 45; pointer-events: none; display: none; }
/* ロンされた河の牌：ツモの時のあがり牌と同じ、白い光に色がめぐる光り方（カットインの後から） */
.pond .ronned .ronring, .fx-ronaura { display: none; }
body.ron-lit .pond .tile.ronned { box-shadow: 0 0 0 3px #fff, 0 0 0 6px transparent, 0 0 18px 6px rgba(255, 255, 255, .6) !important; animation: winRainbow 2s linear infinite; }
.pond .tile.ron-taken { visibility: hidden; }

/* カードの拡大：横長の画面では「使う」ボタンをカードの右に置く（高さを全部カードに使う） */
.overlay.cardzoom.side { flex-direction: row; gap: 28px; }
.overlay.cardzoom.side .zoombar { max-width: 240px; }

/* リザルト：スマホの横向きなど低い画面では2列（左＝役と点数、右＝支払いと次へ） */
.result.res2 > .rs-fit.rs-2col { flex-direction: row; align-items: flex-start; gap: 28px; }
.rs-fit.rs-2col > .rs-col { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; }
.rs-fit.rs-2col > .rs-col.l { flex-grow: 1.2; }
.rs-fit.rs-2col > .rs-col > * { max-width: 100%; }
.rs-fit.rs-2col > .rs-col > .rs-hand { max-width: none; width: max-content; }
.rs-fit.rs-2col > .rs-col.r { align-self: center; }

/* しもべを選ぶ：スマホの横向きなど低い画面では、6体を横1列に並べる */
@media (max-height: 520px) and (min-aspect-ratio: 3/2) {
  .svpick .result { max-width: min(860px, 96vw); width: 96vw; }
  .svp-grid { grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .svp-stage { height: 120px; }
}

/* カウンターの確認：低い画面では、カードを左・文とボタンを右に（ボタンが画面の下に隠れないように） */
@media (max-height: 520px) {
  .overlay:has(> .counterask) { padding-top: 8px; padding-bottom: 8px; align-items: center; }
  .counterask.side { display: grid; grid-template-columns: auto minmax(200px, 300px); column-gap: 22px; row-gap: 10px;
    align-items: center; justify-items: center; width: auto; max-width: 96vw; }
  .counterask.side > .ca-cards { grid-column: 1; grid-row: 1 / span 3; flex-wrap: nowrap; gap: 14px; }
  .counterask.side > h2, .counterask.side > .ca-what, .counterask.side > .btn { grid-column: 2; margin: 0; }
  .counterask.side > h2 { align-self: end; }
  .counterask.side > .btn { align-self: start; }
  .counterask.side .ca-col .btn { font-size: 12px; padding: 7px 10px; white-space: nowrap; letter-spacing: 0; }
}
/* 返せるカードが2枚以上ある時は横に並べる（縦に積むと画面の下にはみ出す） */
.result.counterask { max-width: min(760px, 94vw); width: auto; }

/* あがり報酬の「カード1枚」：数字が「枚」にくっついて「牧」に見えないよう、和文の字体で間を空ける */
.fx-buy.reward .c { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; letter-spacing: 3px; }
/* スマホの横向きなど低い画面では、カード購入・あがり報酬の帯を少し小さく（横からはみ出さないように） */
@media (max-height: 520px) { .fx-buy { zoom: .82; } }
/* オーラスのお知らせ：狭い画面でも「オーラス」が2行に割れないように */
.allast-banner { width: max-content; max-width: 94vw; }
.allast-banner b { white-space: nowrap; }
@media (max-height: 520px) { .allast-banner { zoom: .78; } }

/* ---------------------------------------------------------------- 終局：金の額縁・金銀銅のメダル・1位の金の札 */
.overlay.final2 .result.final2 {
  --fx1: #fff3b0; --fx2: #ffb52e; --fx3: #fff;
  --d1: #ffffff; --d2: #eef6ff; --d3: #bcd0e6; --d4: #7f93ad; --d5: #fff1c4; --dg: rgba(255, 220, 140, .9);
  position: relative; border: 13px solid transparent; border-radius: 22px; padding: 18px 26px 20px; overflow: visible;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 200, 90, .2), transparent 55%) padding-box,
    repeating-linear-gradient(45deg, rgba(231, 196, 106, .05) 0 2px, transparent 2px 18px) padding-box,
    linear-gradient(160deg, #3a1530 0%, #1d0b2a 55%, #10081c 100%) padding-box,
    linear-gradient(135deg, #fff8d8 0%, #f2c75a 9%, #8a5512 20%, #ffe79a 31%, #c48a24 44%, #fff4c8 52%, #b07818 63%, #ffe08a 76%, #7a4a0e 88%, #f7d77a 100%) border-box;
  box-shadow: 0 0 0 1px #4a2a06, 0 0 0 3px rgba(255, 240, 190, .55),
    inset 0 0 0 1px #3a1f04, inset 0 0 0 3px rgba(255, 236, 170, .35), inset 0 6px 18px rgba(0, 0, 0, .6),
    0 0 26px 4px rgba(255, 196, 70, .55), 0 0 80px rgba(255, 160, 40, .3), 0 26px 70px rgba(0, 0, 0, .8);
}
.overlay.final2.mytop .result.final2 { --d1: #ffffff; --d2: #9ef0ff; --d3: #ff9ad8; --d4: #7a6bff; --d5: #fff07a; --dg: rgba(255, 255, 255, .95); }
.overlay.final2.mytop .rs-frame .rs-run { background: conic-gradient(from var(--rsA), #ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #8a6bff, #ff4dd8, #ff4d6d);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .8)) drop-shadow(0 0 12px rgba(255, 120, 220, .7)); animation-duration: 2.2s; }
.overlay.final2.mytop .rs-gem .dia { animation: diaPulse 2.4s ease-in-out infinite, rsGemHue 3s linear infinite; }
.final2 .fn-list, .final2 .fn-title, .final2 .fn-note, .final2 .fn-teaser, .final2 .fn-btns, .final2 .wait-note { position: relative; z-index: 5; }

/* 見出し：打ち出しの金文字に光が走る（文字は動かない） */
.final2 .fn-title { font-size: 60px; letter-spacing: 18px; padding-left: 18px; color: transparent;
  background: linear-gradient(110deg, #fff6c8 0%, #ffd54a 30%, #b8741a 45%, #fffbe6 50%, #ffd54a 55%, #c88a20 75%, #fff0b8 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 3px 0 #3a1f04) drop-shadow(0 0 18px rgba(255, 200, 80, .65)); animation: rsShine 3.2s ease-in-out infinite; }

/* 順位：金・銀・銅のメダル（厚みのある縁と、刻んだ数字） */
.final2 .fn-rank { position: relative; width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 28%, #fff 0 6%, var(--m1) 18%, var(--m2) 55%, var(--m3) 100%);
  box-shadow: 0 0 0 2px var(--m3), inset 0 0 0 4px var(--m1), inset 0 0 0 6px var(--m3), inset 0 -4px 8px rgba(0, 0, 0, .35), 0 4px 8px rgba(0, 0, 0, .6);
  --m1: #4a3a5a; --m2: #2a1d3a; --m3: #120a1c; }
.final2 .fn-rank b { font: 900 26px/1 "Shippori Mincho B1", serif; color: var(--m3); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.final2 .rank1 .fn-rank { --m1: #fff3b0; --m2: #f2b62e; --m3: #6b3c06; box-shadow: 0 0 0 2px #6b3c06, inset 0 0 0 4px #fff3b0, inset 0 0 0 6px #b07818, inset 0 -4px 8px rgba(0, 0, 0, .3), 0 0 18px rgba(255, 200, 80, .9), 0 4px 8px rgba(0, 0, 0, .6); }
.final2 .rank2 .fn-rank { --m1: #ffffff; --m2: #c4ccd8; --m3: #4a5260; }
.final2 .rank3 .fn-rank { --m1: #ffd9b8; --m2: #c47a3e; --m3: #4a2408; }
.final2 .rank4 .fn-rank b, .final2 .rank4 .fn-rank { color: #d8c8f0; }
.final2 .fn-row.rank4 .fn-rank b { color: #d8c8f0; text-shadow: none; }

/* 1位の札：金の板に照り返しが走る */
.final2 .fn-row { position: relative; overflow: hidden; padding: 10px 16px; }
.final2 .fn-row.rank1 { border: 0; padding: 14px 18px;
  background: linear-gradient(180deg, rgba(255, 236, 170, .32), rgba(150, 90, 10, .28) 60%, rgba(90, 50, 6, .35)),
    linear-gradient(160deg, #4a2a10, #2a140a);
  box-shadow: 0 0 0 2px #f2c75a, 0 0 0 4px #6b3c06, inset 0 1px 0 rgba(255, 250, 220, .7), inset 0 -2px 6px rgba(0, 0, 0, .4), 0 0 26px rgba(255, 200, 80, .55); }
/* 照り返しは背景の一枚として流す（札の外にはみ出さない） */
.final2 .fn-row.rank1 { overflow: visible; background-size: 100% 100%, 100% 100%; }
.final2 .fn-row.rank1 { background-image: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .38) 50%, transparent 58%),
    linear-gradient(180deg, rgba(255, 236, 170, .32), rgba(150, 90, 10, .28) 60%, rgba(90, 50, 6, .35)), linear-gradient(160deg, #4a2a10, #2a140a);
  background-size: 300% 100%, 100% 100%, 100% 100%; background-position: 150% 0, 0 0, 0 0; background-repeat: no-repeat;
  animation: fnPlate 3.6s ease-in-out 2.4s infinite; }
@keyframes fnPlate { 0% { background-position: 150% 0, 0 0, 0 0; } 45%, 100% { background-position: -50% 0, 0 0, 0 0; } }
.final2 .fn-row.rank1 .fn-name { font-size: 20px; color: #fff6d0; }
.final2 .fn-row.rank1 .fn-pts b { font-size: 28px; color: #ffe27a; text-shadow: 0 0 12px rgba(255, 200, 80, .8); }
.final2 .fn-row.me { outline: 2px solid rgba(255, 243, 196, .7); outline-offset: 3px; overflow: visible; }
.final2 .fn-row.rank1.me { overflow: visible; }
.final2 .fn-crown { top: -24px; font-size: 26px; animation: fnCrown 2.4s ease-in-out infinite; }
@keyframes fnCrown { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-3px); } }
/* 成績の札も立体に */
.final2 .fn-score { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 3px 0 rgba(0, 0, 0, .45); }

/* 優勝の判子 */
.final2 .fn-stamp { display: inline-block; margin-top: 5px; padding: 3px 9px; border-radius: 7px;
  font: 900 15px/1 "Shippori Mincho B1", serif; letter-spacing: 3px; color: #fff; background: linear-gradient(180deg, #e2343e, #8a0e18);
  box-shadow: 0 0 0 2px #ffd34d, 0 0 14px rgba(255, 80, 60, .8); text-shadow: 0 2px 0 #4a0408; transform: rotate(-6deg); }

/* 入場：下の順位から順に滑り込み、1位は大きく弾んで入る。判子は最後に押される */
.overlay.final2.enter .fn-title { animation: fnTitleIn .6s cubic-bezier(.2, 1.4, .4, 1) both, rsShine 3.2s ease-in-out 1s infinite; }
@keyframes fnTitleIn { from { opacity: 0; transform: scale(1.6); filter: blur(6px); } to { opacity: 1; transform: none; } }
.overlay.final2.enter .fn-row { animation: fnRowIn .5s cubic-bezier(.2, 1.2, .4, 1) var(--in) both; }
.overlay.final2.enter .fn-row.rank1 { animation: fnTopIn .7s cubic-bezier(.2, 1.5, .4, 1) var(--in) both, fnPlate 3.6s ease-in-out 2.4s infinite; }
@keyframes fnRowIn { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes fnTopIn { 0% { opacity: 0; transform: scale(1.35); } 60% { opacity: 1; transform: scale(.97); } 100% { transform: none; } }
.overlay.final2.enter .fn-stamp { animation: fnStamp .35s cubic-bezier(.3, 1.6, .5, 1) 2.2s both; }
@keyframes fnStamp { from { opacity: 0; transform: rotate(-6deg) scale(2.6); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }
.overlay.final2.enter .fn-note, .overlay.final2.enter .fn-teaser, .overlay.final2.enter .fn-btns { animation: fnFade .5s ease 2.3s both; }
@keyframes fnFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .overlay.final2 * { animation: none !important; } }
@media (max-height: 520px) { .final2 .fn-title { font-size: 44px; } }
.overlay.final2 .result.final2 { width: min(700px, 94vw); }

/* ---------------------------------------------------------------- ホームの下のボタン：漆塗りの板に金の縁、艶と厚み */
.hb-btn {
  overflow: hidden; isolation: isolate; border: 0; border-radius: 16px;
  background:
    radial-gradient(130% 80% at 50% -10%, rgba(255, 220, 140, .32), transparent 55%),
    linear-gradient(175deg, #5a1828 0%, #2c0c22 48%, #14061c 100%);
  box-shadow:
    inset 0 0 0 1px #fff2bf, inset 0 0 0 2px #e2b04a, inset 0 0 0 3px #7a4a0e, inset 0 0 0 4px rgba(255, 228, 150, .55),
    inset 0 -6px 12px rgba(0, 0, 0, .45),
    0 0 0 1px #3a1f04, 0 5px 0 #6b3c06, 0 6px 0 #2a1402, 0 12px 20px rgba(0, 0, 0, .6);
}
/* 上半分の艶 */
.hb-btn::before { content: ""; position: absolute; left: 5px; right: 5px; top: 5px; height: 42%; border-radius: 12px 12px 40% 40% / 12px 12px 18px 18px; z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .04)); pointer-events: none; }
/* 斜めに走る照り返し（ボタンごとに少しずらす） */
.hb-btn::after { content: ""; position: absolute; top: -30%; bottom: -30%; width: 34%; left: -60%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 245, 210, .5), transparent); transform: skewX(-20deg);
  animation: hbShine 5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .25s + 1s); }
@keyframes hbShine { 0% { left: -60%; } 22%, 100% { left: 140%; } }
.hb-btn:nth-child(2) { --i: 1; } .hb-btn:nth-child(3) { --i: 2; } .hb-btn:nth-child(4) { --i: 3; } .hb-btn:nth-child(5) { --i: 4; } .hb-btn:nth-child(6) { --i: 5; }
.hb-btn svg { filter: drop-shadow(0 1px 0 #3a1f04) drop-shadow(0 0 7px rgba(255, 200, 90, .7)); }
.hb-btn span { text-shadow: 0 1px 0 #2a0a14, 0 0 8px rgba(255, 210, 120, .45); }
.hb-btn:hover { box-shadow:
    inset 0 0 0 1px #fff2bf, inset 0 0 0 2px #e2b04a, inset 0 0 0 3px #7a4a0e, inset 0 0 0 4px rgba(255, 228, 150, .55), inset 0 -6px 12px rgba(0, 0, 0, .45),
    0 0 0 1px #3a1f04, 0 5px 0 #6b3c06, 0 6px 0 #2a1402, 0 0 22px rgba(255, 200, 90, .7), 0 12px 20px rgba(0, 0, 0, .6); }
.hb-btn:active { transform: translateY(4px); box-shadow:
    inset 0 0 0 1px #fff2bf, inset 0 0 0 2px #e2b04a, inset 0 0 0 3px #7a4a0e, inset 0 0 0 4px rgba(255, 228, 150, .55), inset 0 -6px 12px rgba(0, 0, 0, .45),
    0 0 0 1px #3a1f04, 0 1px 0 #6b3c06, 0 2px 0 #2a1402, 0 5px 10px rgba(0, 0, 0, .6); }
@media (prefers-reduced-motion: reduce) { .hb-btn::after { animation: none; } }

/* ---------------------------------------------------------------- 局の始め：金の縁の漆の帯に「東2局」 */
.round-banner { position: fixed; left: 50%; top: 34%; z-index: 38; transform: translate(-50%, -50%); pointer-events: none;
  display: flex; align-items: baseline; gap: 14px; padding: 14px 70px; animation: rbOut .35s ease-in 1.6s forwards; }
.round-banner .rb-band { position: absolute; inset: 0; z-index: -1; transform-origin: 50% 50%;
  background: linear-gradient(90deg, transparent, rgba(40, 8, 24, .92) 18%, rgba(60, 14, 34, .95) 50%, rgba(40, 8, 24, .92) 82%, transparent),
    linear-gradient(180deg, rgba(255, 220, 140, .18), transparent 50%);
  box-shadow: 0 -2px 0 -0px rgba(0, 0, 0, 0);
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  animation: rbBand .45s cubic-bezier(.2, 1, .3, 1) both; }
/* 上下の金の線 */
.round-banner .rb-band::before, .round-banner .rb-band::after { content: ""; position: absolute; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #8a5512 10%, #fff2bf 30%, #f2c75a 50%, #fff2bf 70%, #8a5512 90%, transparent);
  box-shadow: 0 0 10px rgba(255, 200, 80, .8); }
.round-banner .rb-band::before { top: 0; } .round-banner .rb-band::after { bottom: 0; }
.round-banner b { font: 900 56px/1 "Shippori Mincho B1", serif; letter-spacing: 10px; color: transparent;
  background: linear-gradient(180deg, #fffbe6 0%, #ffe07a 35%, #c88a20 60%, #fff0b8 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 3px 0 #3a1f04) drop-shadow(0 0 16px rgba(255, 200, 80, .7)); animation: rbText .5s cubic-bezier(.2, 1.5, .4, 1) .12s both; }
.round-banner small { font: 800 20px/1 "Shippori Mincho B1", serif; color: #fff3c4; text-shadow: 0 2px 4px rgba(0, 0, 0, .8); animation: rbText .5s ease .25s both; }
.round-banner small:empty { display: none; }
@keyframes rbBand { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes rbText { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: none; } }   /* ぼかしは毎コマ描き直しになって重いので使わない */
@keyframes rbOut { to { opacity: 0; transform: translate(-50%, -50%) scale(1.05); } }
@media (max-height: 520px) { .round-banner { zoom: .7; } }
@media (prefers-reduced-motion: reduce) { .round-banner, .round-banner * { animation-duration: .01s !important; } }

/* 流局の見出し：銀青の打ち出し文字に光が走る（文字は動かない） */
.res2 .rs-banner.draw .rs-title, .rs-banner.draw .rs-title { color: transparent;
  background: linear-gradient(110deg, #f4f8ff 0%, #a8c0ff 30%, #3a58b0 45%, #ffffff 50%, #a8c0ff 55%, #4a6ac0 75%, #e8f0ff 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 3px 0 #0a1440) drop-shadow(0 0 16px rgba(120, 160, 255, .75)); animation: rsShine 3.6s ease-in-out infinite; }
/* 結果の点数の行：前の点数は控えめに（今の点数を主役に） */
.rs-pline { flex-wrap: nowrap; white-space: nowrap; }
.rs-before { font-size: 12px; }

/* ---------------------------------------------------------------- ボタンの手応え（press.js）：沈む → 跳ね返る、押した所から光 */
/* 位置の決め方（transform）とぶつからないよう、translate・scale を別に使う */
.is-pressed { translate: 0 3px; scale: .95; filter: brightness(1.15) saturate(1.12) !important; transition: translate .04s, scale .04s, filter .04s; }
.bigbtn.is-pressed, .home-play.is-pressed { translate: 0 6px; scale: .92; }
.is-pop { animation: pressPop .36s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes pressPop { 0% { scale: .95; translate: 0 3px; filter: brightness(1.35); } 45% { scale: 1.06; translate: 0 -2px; } 75% { scale: .99; } 100% { scale: 1; translate: 0 0; filter: none; } }
/* 押した所の光：白い芯がはじけ、金の輪が広がる */
.press-flash { position: fixed; z-index: 60; width: 0; height: 0; pointer-events: none; }
.press-flash b, .press-flash s { position: absolute; left: 0; top: 0; border-radius: 50%; translate: -50% -50%; }
.press-flash b { width: 70px; height: 70px; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 12%, rgba(255, 230, 150, .7) 30%, rgba(255, 190, 60, 0) 70%);
  mix-blend-mode: screen; animation: pfCore .32s ease-out forwards; }
.press-flash s { width: 30px; height: 30px; border: 3px solid rgba(255, 230, 150, .95); box-shadow: 0 0 12px rgba(255, 200, 80, .9), inset 0 0 8px rgba(255, 220, 120, .7);
  animation: pfRing .45s cubic-bezier(.2, .8, .3, 1) forwards; }
.press-flash.heavy b { width: 120px; height: 120px; opacity: .75; }
.press-flash b { opacity: .85; }
.press-flash.heavy s { width: 50px; height: 50px; border-width: 4px; animation-duration: .55s; }
@keyframes pfCore { from { scale: .3; opacity: 1; } to { scale: 1.3; opacity: 0; } }
@keyframes pfRing { from { scale: .4; opacity: 1; } to { scale: 3.4; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .is-pop { animation: none; } .press-flash { display: none; } }
/* 押した所の光を強めに：輪は2重（2つ目は少し遅れて）、火花が飛ぶ */
.press-flash b { opacity: 1; background: radial-gradient(circle, #fff 0 14%, rgba(255, 236, 170, .85) 30%, rgba(255, 190, 60, 0) 70%); }
.press-flash s { border-color: #fff4c8; box-shadow: 0 0 14px rgba(255, 210, 90, 1), 0 0 4px #fff, inset 0 0 10px rgba(255, 220, 120, .9); }
.press-flash s + s { animation-delay: .08s; border-width: 2px; opacity: 0; animation-fill-mode: both; }
.press-flash u { position: absolute; left: 0; top: 0; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px 2px rgba(255, 210, 90, .95); animation: pfSpark .42s cubic-bezier(.15, .8, .3, 1) forwards; }
.press-flash.heavy u { width: 7px; height: 7px; margin: -3.5px; }
@keyframes pfSpark { from { transform: rotate(var(--a)) translateX(4px); opacity: 1; } to { transform: rotate(var(--a)) translateX(var(--d)) scale(.3); opacity: 0; } }

/* フリガナ（rubyName）：文字の真上に自分で置く。どのブラウザでも同じ位置になる */
.rb { position: relative; display: inline-block; }
.rb .rtx { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); white-space: nowrap;
  font-size: .45em; font-weight: 700; letter-spacing: 0; line-height: 1; margin-bottom: .1em; opacity: .85; pointer-events: none; }
.jcard.has-ruby .jc-name span { line-height: 1; padding-top: calc(var(--cw) * .022); overflow: visible; }
.jcard .jc-name .rtx { font-size: calc(var(--cw) * .03); color: var(--ink); }
/* メニューの項目：文字が長くても枠からはみ出さない */
.gm-grid .gm-item { min-width: 0; overflow: hidden; white-space: nowrap; letter-spacing: 1px; }
.gm-grid .gm-item > span:not(.sw):not(.tc) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* カードの演出中に返すかを聞く所：返せるカードは横1列（縦に積むと画面からはみ出す）、ボタンの字は1行 */
.fx-counterrow { flex-wrap: nowrap; }
.fx-counterbtn { white-space: nowrap; }
.fx-counterrow .fx-counterbtn { font-size: 15px; padding: 9px 14px; }
@media (max-height: 520px) { .fx-counterrow .fx-counterbtn { font-size: 13px; padding: 7px 10px; } .fx-counterq { font-size: 15px; } }

/* ---------- 切り抜けないカードの専用の前ぶれ演出（cardspecial.js） ---------- */
.sp-el { position: fixed; pointer-events: none; z-index: 3; }
.sp-dark { inset: 0; }
.sp-cracks { inset: 0; z-index: 4; }
.sp-cracks svg { position: absolute; inset: 0; }
.sp-cracks path { fill: none; stroke: #1a0400; stroke-width: 9; stroke-linejoin: round; stroke-linecap: round; }
.sp-cracks path.hot { stroke: #ffcf5a; stroke-width: 3; filter: drop-shadow(0 0 6px #ff7a1a) drop-shadow(0 0 14px #ff3a00); }
.sp-pillar { width: 34vmin; height: 110vh; z-index: 4; transform-origin: 50% 100%; mix-blend-mode: screen;
  background: radial-gradient(ellipse 50% 60% at 50% 100%, #fff8d0 0%, #ffb12a 25%, #ff4a00 55%, rgba(255, 40, 0, 0) 75%),
              linear-gradient(90deg, rgba(255, 60, 0, 0), rgba(255, 140, 20, .95) 35%, #fff2b0 50%, rgba(255, 140, 20, .95) 65%, rgba(255, 60, 0, 0));
  filter: blur(2px); }
.sp-vortex { border-radius: 50%;
  background:
    radial-gradient(circle, #000 0 6%, rgba(30, 12, 0, .95) 11%, rgba(0, 0, 0, 0) 30%),
    repeating-conic-gradient(from 0deg, #3a2204 0deg, #c8901e 10deg, #ffe08a 16deg, #c8901e 22deg, #3a2204 36deg),
    #3a2204;
  -webkit-mask: radial-gradient(circle, #000 42%, transparent 68%); mask: radial-gradient(circle, #000 42%, transparent 68%);
  box-shadow: 0 0 80px 30px rgba(255, 200, 90, .35); }
.sp-vortex::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(0, 0, 0, 0) 0 22px, rgba(40, 20, 0, .45) 22px 30px); }
.sp-tile { position: fixed; left: 0; top: 0; z-index: 4; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.sp-tile .tile { width: 40px; }
.sp-moon { border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fffbe6 0%, #ffe9a0 35%, #f2c55a 70%, #d99a2b 100%);
  box-shadow: 0 0 60px 20px rgba(255, 220, 130, .55), 0 0 160px 60px rgba(255, 200, 90, .3); }
.sp-roofs { left: 0; right: 0; bottom: 0; height: 30vh; z-index: 3;
  background:
    linear-gradient(170deg, transparent 0 40%, #07030f 41%) 0 0 / 22vw 100% repeat-x,
    linear-gradient(-170deg, transparent 0 40%, #07030f 41%) 11vw 0 / 22vw 100% repeat-x,
    linear-gradient(transparent 55%, #07030f 56%); }
.sp-shadow { z-index: 4; background: center / contain no-repeat; filter: brightness(0) drop-shadow(0 0 10px rgba(255, 230, 150, .7)); }
.sp-string { left: 0; right: 0; height: 2px; background: rgba(60, 30, 10, .9); box-shadow: 0 1px 0 rgba(255, 200, 120, .2); }
.sp-lantern { width: 46px; height: 62px; z-index: 4; transform: translate(-50%, -50%); border-radius: 46% / 40%;
  background: linear-gradient(90deg, #4a0c08, #7a1a10 30%, #8a2214 50%, #7a1a10 70%, #4a0c08);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; transition: background .15s, box-shadow .15s; }
.sp-lantern::before, .sp-lantern::after { content: ""; position: absolute; left: 22%; right: 22%; height: 7px; background: #241008; border-radius: 2px; }
.sp-lantern::before { top: -4px; }
.sp-lantern::after { bottom: -4px; }
.sp-lantern i { position: absolute; inset: 0; border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 9px); }
.sp-lantern b { position: relative; font: 900 20px/1 "Yu Mincho", "Hiragino Mincho ProN", serif; color: rgba(20, 0, 0, .7); }
.sp-lantern.on { background: radial-gradient(ellipse at 50% 45%, #fff6c8 0%, #ffcf6a 30%, #ff7a2a 65%, #c8281a 100%);
  box-shadow: 0 0 18px 6px rgba(255, 150, 60, .75), 0 0 46px 14px rgba(255, 110, 30, .4); }
.sp-lantern.on b { color: #3a0600; }
.sp-doron { z-index: 6; font: 900 clamp(48px, 13vmin, 120px)/1 "Yu Mincho", "Hiragino Mincho ProN", serif; color: #fff4c8; white-space: nowrap;
  -webkit-text-stroke: 3px #5a1a00; paint-order: stroke fill;
  text-shadow: 0 0 12px #ff9a3a, 0 0 30px #ff5a00, 4px 6px 0 #2a0800; }

.sp-alert { inset: 0; z-index: 4; box-shadow: inset 0 0 0 10px #ff1a1a, inset 0 0 60px 20px rgba(255, 0, 0, .75), inset 0 0 160px 40px rgba(255, 40, 0, .35); }
.sp-speed { width: 260vmax; height: 260vmax; z-index: 3; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .85) 0deg .6deg, transparent .6deg 3.2deg, rgba(255, 210, 140, .6) 3.2deg 3.6deg, transparent 3.6deg 7deg);
  -webkit-mask: radial-gradient(circle, transparent 13%, #000 30%); mask: radial-gradient(circle, transparent 13%, #000 30%); }
.sp-bolt { inset: 0; z-index: 5; }
.sp-bolt svg { position: absolute; inset: 0; overflow: visible; }
.sp-bolt path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.sp-bolt .o { stroke: rgba(120, 170, 255, .55); stroke-width: 26; filter: blur(8px); }
.sp-bolt .m { stroke: #ffe680; stroke-width: 11; filter: drop-shadow(0 0 10px #ffd000); }
.sp-bolt .i { stroke: #fff; stroke-width: 4; }
.sp-bolt.big .o { stroke-width: 44; }
.sp-bolt.big .m { stroke-width: 18; }
.sp-bolt.big .i { stroke-width: 7; }
.sp-halo { z-index: 3; border-radius: 50%; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg, #ff3a3a 0deg 5deg, transparent 5deg 15deg, #ffd000 15deg 20deg, transparent 20deg 30deg,
    #3aff7a 30deg 35deg, transparent 35deg 45deg, #3ac8ff 45deg 50deg, transparent 50deg 60deg, #c86bff 60deg 65deg, transparent 65deg 75deg, #fff4c0 75deg 80deg, transparent 80deg 90deg);
  -webkit-mask: radial-gradient(circle, #000 8%, rgba(0, 0, 0, .8) 25%, transparent 62%); mask: radial-gradient(circle, #000 8%, rgba(0, 0, 0, .8) 25%, transparent 62%); }
.fx-pop.sp-goldpop { will-change: auto; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 16px #ffd000) drop-shadow(0 0 40px #ff7a00) drop-shadow(0 30px 30px rgba(0, 0, 0, .55)); }

/* パチンコの演出文字：太い黒ぶち → 明るい金のふち → こい色のふち → 金属のグラデーション、上を光が走る */
.sp-title { z-index: 7; display: grid; transform: translate(-50%, -50%); white-space: nowrap;
  font: 900 clamp(72px, 27vmin, 210px)/1 "Shippori Mincho B1", "Yu Mincho", serif; letter-spacing: .02em; }
.sp-title > span { grid-area: 1 / 1; padding: .12em .18em; position: relative; }
.sp-title .l1 { color: #120400; -webkit-text-stroke: .2em #120400; filter: drop-shadow(0 .06em 0 #000) drop-shadow(0 0 .12em rgba(0, 0, 0, .8)); }
.sp-title .l2 { color: var(--rim1); -webkit-text-stroke: .13em var(--rim1); }
.sp-title .l3 { color: var(--rim2); -webkit-text-stroke: .07em var(--rim2); }
.sp-title .l4 { background: var(--fill); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .012em rgba(255, 255, 255, .9); }
.sp-title .l5 { background: linear-gradient(110deg, transparent 0 40%, rgba(255, 255, 255, .95) 48%, rgba(255, 255, 255, .95) 52%, transparent 60% 100%) no-repeat;
  background-size: 300% 100%; background-position: 130% 0; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: spShine 1.1s .35s ease-in-out both; }
@keyframes spShine { to { background-position: -30% 0; } }
.sp-title.gold { --rim1: #fff3c0; --rim2: #7a3c00; --fill: linear-gradient(180deg, #fffef0 0%, #ffe680 30%, #ffb800 48%, #8a4a00 52%, #e89a10 70%, #fff2a0 100%); }
.sp-title.fire { --rim1: #ffe9a0; --rim2: #5a0000; --fill: linear-gradient(180deg, #fffbe0 0%, #ffd040 28%, #ff5a00 48%, #8a0000 52%, #ff3a10 72%, #ffc070 100%); }
.sp-title.silver { --rim1: #ffffff; --rim2: #0a2a6a; --fill: linear-gradient(180deg, #ffffff 0%, #e2f0ff 30%, #8ab8ff 48%, #1a3a8a 52%, #6aa0ff 72%, #e8f4ff 100%); }
/* 後ろの金の光（すっきりした太い光の筋） */
.sp-burst { z-index: 3; border-radius: 50%; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 120, .9) 0deg 6deg, rgba(255, 220, 120, 0) 10deg 24deg, rgba(255, 220, 120, .9) 30deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .7) 20%, transparent 58%); mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .7) 20%, transparent 58%); }
.sp-burst::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 250, 220, .95), rgba(255, 200, 80, .5) 40%, transparent 70%); }

/* 鬼の雷の舞台：空・雷雲（奥と手前）・斜めの床で奥行きを出す */
.sp-stage3d { inset: 0; z-index: 2; overflow: hidden; perspective: 600px; perspective-origin: 50% 40%; }
.sp-stage3d .sky { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 30%, #2a1a5a 0%, #120a2e 55%, #05020e 100%); }
.sp-stage3d .cloud { position: absolute; left: -15%; right: -15%; background: url("/static/fx/storm.webp") center top / 100% 100% no-repeat; transform-origin: 50% 30%; }
.sp-stage3d .cloud.far { top: -5%; height: 60%; opacity: .85; }
.sp-stage3d .cloud.near { top: -18%; height: 55%; transform-origin: 50% 0; filter: blur(1px); background-position: center bottom; }
.sp-stage3d .floor { position: absolute; left: -60%; right: -60%; top: 55%; height: 140%; transform-origin: 50% 0; transform: rotateX(72deg);
  background: radial-gradient(ellipse 30% 22% at 50% 12%, rgba(var(--grid, 140, 110, 255), .3), transparent 70%), linear-gradient(#141018, #040306 70%); }
.sp-stage3d .floor .grid { position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(var(--grid, 150, 130, 255), .22) 0 2px, transparent 2px 80px), repeating-linear-gradient(0deg, rgba(var(--grid, 150, 130, 255), .18) 0 2px, transparent 2px 80px);
  -webkit-mask: linear-gradient(#000, transparent 60%); mask: linear-gradient(#000, transparent 60%); }
.sp-floorring { z-index: 3; width: 420px; height: 420px; border-radius: 50%; mix-blend-mode: screen;
  border: 10px solid var(--c); box-shadow: 0 0 30px 8px var(--c), inset 0 0 30px 8px var(--c); }
.sp-debris { z-index: 6; width: 18px; height: 14px; border-radius: 3px;
  background: linear-gradient(135deg, #6a4a3a, #2a1810 60%, #120804); box-shadow: inset 1px 1px 0 rgba(255, 200, 150, .5), 0 0 6px rgba(255, 120, 40, .8); }
.sp-cracks.onfloor { z-index: 3; }
/* 結果画面：本当のドラ（表示牌の次の牌）を、数の横に小さく並べる */
.sz-mini { --w: 17px; }
.rs-dcount { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.rs-dcount .tile.sz-mini { flex: none; vertical-align: middle; }

/* 終局：スマホの横向きなど低い画面では、最初から詰めて並べる（縮めなくても入るように） */
@media (max-height: 500px) {
  .result.final2 { padding: 10px 18px 12px; gap: 6px; }
  .final2 .fn-title { font-size: 34px; letter-spacing: 10px; padding-left: 10px; line-height: 1; }
  .final2 .fn-list { gap: 5px; }
  .final2 .fn-row, .final2 .fn-row.rank1 { padding: 5px 12px; }
  .final2 .fn-rank { width: 38px; height: 38px; }
  .final2 .fn-rank b { font-size: 20px; }
  .final2 .fn-av { width: 44px; height: 44px; }
  .final2 .fn-row.rank1 .fn-name, .final2 .fn-name { font-size: 16px; }
  .final2 .fn-pts b { font-size: 30px; }
  .final2 .fn-score { font-size: 22px; padding: 2px 10px; }
  .final2 .fn-note { font-size: 10px; }
  .final2 .fn-teaser { margin: 2px auto 0; padding: 5px 12px; }
  .final2 .fn-teaser b { font-size: 13px; }
  .final2 .fn-btns .btn { padding-top: 6px; padding-bottom: 6px; font-size: 15px; }
  .final2 .fn-title { font-size: 28px; }
  .final2 .fn-teaser { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
  .final2 .fn-tz-items { margin: 0; gap: 6px; }
  .final2 .fn-tz-item { font-size: 11px; padding: 2px 8px; }
  .final2 .fn-tz-x { font-size: 11px; }
  .final2 .fn-av { width: 38px; height: 38px; }
}

/* 捨てる牌を押した瞬間：すっと持ち上がって光る（河へ飛ぶまでのつなぎ） */
.hand .tile.sending { transform: translateY(-26px) scale(1.06) !important; filter: brightness(1.15) drop-shadow(0 0 10px rgba(255, 230, 150, .9)); transition: transform .09s ease-out, filter .09s; z-index: 5; }

/* スマホ：指が触れた手札のカードがすっと浮く（パソコンのマウスを重ねた時と同じ） */
.handslot.touchlift { transform: translateY(calc(var(--drop) - 26px)) rotate(var(--rot)) scale(1.08); z-index: 3; transition: transform .12s cubic-bezier(.2,.9,.3,1.2); }
.handslot.touchlift .jcard { box-shadow: 0 0 0 2px rgba(255, 235, 170, .95), 0 0 18px rgba(255, 210, 110, .8), 0 10px 18px rgba(0, 0, 0, .55); }

/* スマホ：演出中の重い描画（ぼかし・重ねた影・合成）を減らして、カットインやカードの動きを滑らかにする */
@media (pointer: coarse) {
  .fx-cutin .ci-art { filter: drop-shadow(0 0 10px rgba(255, 220, 140, .7)); }
  .fx-cutin .ci-band, .fx-cutin .ci-art, .fx-cutin .ci-word, .fx-carddraw, .fx-carddraw .flipper, .fx-pop, .fx-cardplay { will-change: transform, opacity; }
  .sp-stage3d .cloud.near { filter: none !important; }
  .fx-pop { filter: drop-shadow(0 0 12px var(--c)); }
  .fx-pop.sp-goldpop { filter: drop-shadow(0 0 14px #ffb000); }
  .sp-speed, .sp-halo, .sp-burst, .sp-vortex, .sp-pillar, .sp-floorring { mix-blend-mode: normal; }
  .fx-cardscene .fx-spark { display: none; }
}

/* 河の牌：本物の牌のように、厚みは控えめに、側面は陰で暗く（絵柄の面がはっきり浮かぶように） */
.tile.lay { --T: calc(var(--w) * .38); }
.tile.lay .sd.s { background: linear-gradient(180deg, #d9dde3 0%, #b9c0ca 45%, #2a6cc0 52%, #123a78 100%); }
.tile.lay .sd.n { background: linear-gradient(0deg, #e6e9ee 0%, #cfd5dc 45%, #3478cc 52%, #174486 100%); }
.tile.lay .sd.e { background: linear-gradient(90deg, #c9cfd8 0%, #a9b1bc 45%, #2466b8 52%, #10346c 100%); }
.tile.lay .sd.w { background: linear-gradient(270deg, #d2d8e0 0%, #b2bac5 45%, #2869bc 52%, #123873 100%); }
.tile.lay { box-shadow: inset 0 0 0 1px rgba(70, 85, 110, .35), inset 2px 2px 3px rgba(255, 255, 255, .95), inset -2px -3px 5px rgba(60, 75, 100, .35); }
/* スマホ：毎コマ描き直しが要る飾り（額縁を回る光・光の筋・ダイヤの脈動・ドラのきらめき）は止めて軽くする */
@media (pointer: coarse) {
  .rs-frame .rs-run, .rs-frame .rs-shine, .rs-gem .dia, .rs-gem .tw, .tile.isdora::before, .tile.isdora::after, .btn.gold { animation: none !important; }
  .rs-rays { animation-duration: 0s !important; }
}

/* 河の牌：平らな牌に、手前へ象牙色の厚み → 青い背 → 卓に落ちる影を重ねる（立体の部品を使わず、軽く描く） */
.pond, .pond .side { transform-style: flat !important; }
.tile.lay {
  transform: none !important; transform-style: flat !important; filter: none;
  border-bottom: 0; height: calc(var(--w) * 1.34); margin-bottom: calc(var(--w) * .26);
  box-shadow:
    inset 0 0 0 1px rgba(70, 85, 110, .3),
    inset 2px 2px 3px rgba(255, 255, 255, .95),
    inset -2px -3px 5px rgba(60, 75, 100, .3),
    0 calc(var(--w) * .07) 0 #e4e8ee,
    0 calc(var(--w) * .13) 0 #c3cad4,
    0 calc(var(--w) * .16) 0 #2f72c8,
    0 calc(var(--w) * .22) 0 #143f80,
    calc(var(--w) * .05) calc(var(--w) * .3) calc(var(--w) * .2) rgba(0, 0, 0, .5) !important;
}
.tile.lay.tsumogiri { filter: brightness(.8) saturate(.75); }

/* 相手の鳴いた牌：手牌の横に、寝かせた牌として少し間をあけて並べる */
.opprow .meld.oppmeld { gap: 2px; margin-left: 10px; align-items: flex-end; }
.opprow .meld.oppmeld .side { display: inline-flex; }
/* 横向きの牌（鳴いた牌・リーチ宣言牌）：90度回すと厚みの影も横に回ってしまうので、回した後に手前（下）へ出るよう影を横向きに付け直す */
.side > .tile.lay { transform: translate(-50%, -50%) rotate(90deg) !important; }
.side > .tile.lay {
  box-shadow:
    inset 0 0 0 1px rgba(70, 85, 110, .3),
    inset 2px -2px 3px rgba(255, 255, 255, .95),
    inset -3px 2px 5px rgba(60, 75, 100, .3),
    calc(var(--w) * .07) 0 0 #e4e8ee,
    calc(var(--w) * .13) 0 0 #c3cad4,
    calc(var(--w) * .16) 0 0 #2f72c8,
    calc(var(--w) * .22) 0 0 #143f80,
    calc(var(--w) * .3) calc(var(--w) * -.05) calc(var(--w) * .2) rgba(0, 0, 0, .5) !important;
}
.mymelds .side > .tile {
  --tile3d:
    inset 0 0 0 1px rgba(70, 85, 110, .22),
    inset 2px -2px 3px rgba(255, 255, 255, .95),
    inset -3px 3px 5px rgba(80, 95, 120, .28),
    calc(var(--w) * .07) 0 0 #f3f5f8,
    calc(var(--w) * .14) 0 0 #d9dfe7,
    calc(var(--w) * .17) 0 0 #3a82d8,
    calc(var(--w) * .24) 0 0 #1b4f9c,
    calc(var(--w) * .26) 0 0 #0e2f63,
    calc(var(--w) * .36) calc(var(--w) * -.04) calc(var(--w) * .22) rgba(0, 0, 0, .55);
  box-shadow: var(--tile3d);
}
/* カード名（読み仮名つき）：読み仮名と名前をひとまとまりにして、名前の欄の上下まん中に置く（名前が下にくっつかないように） */
.jcard.has-ruby .jc-name span { font-size: calc(var(--cw) * .064); line-height: 1; padding-top: calc(var(--cw) * .024); }
.jcard.has-ruby .jc-name .rb { vertical-align: baseline; }
.jcard.has-ruby .jc-name .rtx { font-size: calc(var(--cw) * .027); margin-bottom: calc(var(--cw) * .002); }

/* カードを買った・あがり報酬：画面の真ん中ではなく、その人の前に出す */
.fx-buy.at { top: auto; }
/* 「カードを引いた！」：その人の前に、金ぶちの札で分かりやすく */
.fx-drawword.plate-word { z-index: 37; font-size: 24px; letter-spacing: 3px; -webkit-text-stroke: 0; color: #fff3c4; white-space: nowrap;
  padding: 8px 22px 9px; border-radius: 12px;
  background: linear-gradient(180deg, #3a1622, #1c0910); text-shadow: 0 2px 4px rgba(0, 0, 0, .8);
  box-shadow: 0 0 0 2px #ffe08a, 0 0 0 4px #8a5a12, 0 5px 0 4px #4a2c06, 0 10px 20px rgba(0, 0, 0, .6), 0 0 24px rgba(255, 200, 80, .55); }
.fx-drawword.plate-word .pw-who { font-size: .8em; color: #ffd98a; margin-right: 10px; }

/* あがり報酬の札：漆塗りの板に、金の厚い縁。下に厚みが見える立体の札で、光が横切る */
.fx-buy.reward {
  padding: 14px 34px 16px; gap: 16px; border-radius: 16px; overflow: hidden;
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%, rgba(255, 220, 140, .22), transparent 60%),
    linear-gradient(180deg, #4a0d14 0%, #2a0509 55%, #160205 100%);
  border: 3px solid transparent;
  box-shadow:
    inset 0 0 0 2px #ffe9a8, inset 0 0 0 4px #9a6412, inset 0 0 0 6px #ffd76a, inset 0 2px 10px rgba(255, 240, 200, .35),
    0 0 0 3px #b8801c, 0 0 0 5px #fff1b8, 0 0 0 8px #7a4a08,
    0 8px 0 7px #5a3606, 0 12px 0 7px #2a1802,
    0 22px 30px rgba(0, 0, 0, .7), 0 0 50px rgba(255, 200, 80, .65);
  animation: rewardIn .6s cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes rewardIn {
  from { transform: translate(-50%, -50%) perspective(600px) rotateX(70deg) scale(.6); opacity: 0; }
  to { transform: translate(-50%, -50%) perspective(600px) rotateX(0) scale(1); opacity: 1; }
}
.fx-buy.reward .rw-shine { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 48%, rgba(255, 240, 190, .2) 54%, transparent 62%) no-repeat;
  background-size: 260% 100%; animation: rwShine 1.4s .45s ease-in-out both; }
@keyframes rwShine { from { background-position: 130% 0; } to { background-position: -40% 0; } }
.fx-buy.reward .w { background: linear-gradient(180deg, #fffbe6, #e8b84a 55%, #9a6412); box-shadow: 0 0 0 2px #5a3606, 0 0 10px rgba(255, 210, 100, .8); }
.fx-buy.reward .n { color: #ffe9b8; }
.fx-buy.reward .t { font-family: "Shippori Mincho B1", serif; font-size: 34px; letter-spacing: 5px;
  background: linear-gradient(180deg, #fffef0 0%, #ffe680 30%, #ffb800 50%, #8a4a00 54%, #e89a10 75%, #fff2a0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #3a1a00) drop-shadow(0 0 8px rgba(255, 200, 80, .8)); text-shadow: none; }
.fx-buy.reward .c { padding: 4px 14px; border-radius: 10px; color: #fff;
  background: linear-gradient(180deg, #c8202c, #7a0a12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 2px #ffd76a, 0 3px 0 2px #5a0a10; }
.fx-buy.reward .t { font-size: 38px;
  background: linear-gradient(180deg, #ffffff 0%, #fff3b0 25%, #ffd34a 48%, #b86e08 52%, #ffc93a 72%, #fffbe0 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 0 #4a2400) drop-shadow(0 0 10px rgba(255, 215, 100, .95)); }

.fx-quicktile { position: fixed; z-index: 33; margin: 0; transform-origin: 50% 50%; pointer-events: none; }
/* 手札のカード：左の空いている所に寄せて、大きく（画面が横長なほど左に空きがあるので、大きくする） */
.myhandcards { left: 40px; top: 430px; transform: scale(1.12); transform-origin: 0 100%; }
@media (min-aspect-ratio: 19/10) { .myhandcards { left: -40px; top: 420px; transform: scale(1.32); } }
@media (min-aspect-ratio: 21/10) { .myhandcards { left: -70px; top: 418px; transform: scale(1.4); } }

/* 手札が5枚の時の注意：赤い帯で目立たせる */
.buypanel .buyfull { margin-top: 8px; padding: 6px 14px; border-radius: 8px; text-align: center; font-weight: 800; font-size: 14px; color: #fff;
  background: linear-gradient(180deg, #c8202c, #7a0a12); box-shadow: 0 0 0 2px #ffd76a, 0 0 14px rgba(255, 60, 60, .7); animation: buyFullBlink 1.2s ease-in-out infinite; }
@keyframes buyFullBlink { 50% { box-shadow: 0 0 0 2px #fff, 0 0 22px rgba(255, 80, 80, 1); } }
.buypanel.full .buybtn { box-shadow: 0 0 0 2px #ff5a5a, 0 0 16px rgba(255, 70, 70, .7); }
/* 河のリーチ宣言牌（横向き）：ほかの牌と同じ段の高さに置く（下にずれないように） */
.pond > .side { height: calc(var(--w) * 1.34); margin-bottom: calc(var(--w) * .26); align-self: flex-end; }
.pond > .side > .tile.lay { margin: 0; top: auto; bottom: calc(var(--w) * -.17); transform: translate(-50%, 0) rotate(90deg) !important; transform-origin: 50% 50%; }

/* ---------- ツモ・ロン：パチンコのプッシュボタン（丸い立体） ---------- */
.pushbtn { position: relative; width: 150px; height: 160px; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; animation: pbIn .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes pbIn { from { transform: scale(.4) translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
/* 台：下に厚みのある黒い台座 */
.pushbtn .pb-base { position: absolute; left: 3px; right: 3px; top: 16px; height: 140px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, #3a3a44, #0c0c12 70%);
  box-shadow: 0 10px 0 #050508, 0 18px 22px rgba(0, 0, 0, .7); }
/* 銀の縁：金属の輪 */
.pushbtn .pb-rim { position: absolute; left: 6px; right: 6px; top: 4px; height: 138px; border-radius: 50%;
  background: conic-gradient(from 200deg, #f4f6fa, #8a92a2, #ffffff, #6a7282, #e8ecf2, #9aa2b2, #f4f6fa);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), inset 0 -4px 8px rgba(0, 0, 0, .45), 0 4px 0 #3a3f4a; }
/* ドーム：ぷっくり光る丸い押し面 */
.pushbtn .pb-dome { position: absolute; left: 18px; right: 18px; top: 15px; height: 114px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; transition: transform .07s ease-out;
  background: radial-gradient(circle at 50% 38%, var(--d1) 0%, var(--d2) 45%, var(--d3) 80%, var(--d4) 100%);
  box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .45), inset 0 6px 10px rgba(255, 255, 255, .5), 0 6px 0 var(--d5), 0 8px 12px rgba(0, 0, 0, .5); }
.pushbtn.tsumo { --d1: #fff6b0; --d2: #ffc21a; --d3: #e06a00; --d4: #7a2a00; --d5: #5a2000; --glow: rgba(255, 200, 60, .95); }
.pushbtn.ron { --d1: #ffd0dc; --d2: #ff3a5a; --d3: #b8102e; --d4: #5a0012; --d5: #400010; --glow: rgba(255, 60, 100, .95); }
.pushbtn .pb-glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .55), transparent 60%);
  animation: pbPulse 1s ease-in-out infinite; }
@keyframes pbPulse { 50% { opacity: .25; } }
.pushbtn .pb-label { position: relative; font: 900 40px/1 "Shippori Mincho B1", serif; color: #fff; letter-spacing: 2px;
  -webkit-text-stroke: 5px rgba(60, 10, 0, .85); paint-order: stroke fill; text-shadow: 0 3px 0 rgba(60, 10, 0, .8), 0 0 14px rgba(255, 255, 255, .7); }
/* つや：上の半分に白い光の反射 */
.pushbtn .pb-gloss { position: absolute; left: 14%; right: 14%; top: 5%; height: 42%; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); pointer-events: none; }
/* 外に広がる光 */
.pushbtn::after { content: ""; position: absolute; left: -10px; right: -10px; top: -10px; height: 170px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 40px 10px var(--glow); animation: pbPulse 1s ease-in-out infinite; z-index: -1; }
/* 押した時：ドームが沈んで明るくなる */
.pushbtn.is-pressed .pb-dome, .pushbtn:active .pb-dome { transform: translateY(6px); box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .4), inset 0 6px 10px rgba(255, 255, 255, .6), 0 0 0 var(--d5), 0 2px 4px rgba(0, 0, 0, .5); filter: brightness(1.2); }
.pushbtn .pb-tile { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); z-index: 2; }
@media (max-height: 520px) { .pushbtn { zoom: .78; } }

/* 千里眼：いつでも見返せるボタン（手牌の右上、鳴きの切り替えの上） */
.peekbtn { position: absolute; left: 1086px; top: 395px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 6px 14px 7px 8px;
  border-radius: 999px; border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, #7a3cff, #3a0f9a); box-shadow: 0 0 0 2px #e8d8ff, 0 0 0 4px #4a1aa8, 0 4px 0 4px #24085a, 0 0 18px rgba(170, 120, 255, .9);
  animation: peekGlow 1.6s ease-in-out infinite; }
@keyframes peekGlow { 50% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #6a2ad8, 0 4px 0 4px #24085a, 0 0 28px rgba(200, 160, 255, 1); } }
.peekbtn .pk-eye { font-size: 24px; line-height: 1; }
.peekbtn .pk-tx { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.peekbtn b { font: 800 17px/1 "Shippori Mincho B1", serif; letter-spacing: 2px; }
.peekbtn small { font-size: 11px; opacity: .9; }
.result.peekview { max-width: min(96vw, 1000px); gap: 12px; }
.peekview h2 { margin: 0; font-family: "Shippori Mincho B1", serif; letter-spacing: 3px; }
.peekview .pk-row { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.peekview .pk-name { font-weight: 800; color: #ffe9a8; }
.peekview .pk-tiles { display: flex; gap: 3px; flex-wrap: nowrap; }
.peekview .pk-note { font-size: 12px; opacity: .75; text-align: center; }

/* ロンできなかった当たり牌：赤い縁と、角に丸い「！」。押すと何があったか出る */
.tile.noted::after { content: none !important; display: none !important; }
.tile.noted, .tile.lay.noted { outline: 3px solid #ff2d55; outline-offset: 1px; cursor: pointer; }
.note-badge { position: absolute; right: -9px; top: -9px; z-index: 4; width: 18px; height: 18px; border-radius: 50%; font-style: normal;
  display: grid; place-items: center; font: 900 13px/1 "M PLUS Rounded 1c", sans-serif; color: #fff; background: #ff2d55;
  box-shadow: 0 0 0 2px #fff, 0 0 10px #ff2d55; animation: notePulse 1.2s ease-in-out infinite; pointer-events: none; }
.side .note-badge { transform: rotate(-90deg); }
/* 裏ドラをめくる：iPhone の Safari で、縮めた画面の中の立体回転が白く抜けることがあるので、平面の裏返し（横に縮めて開く）にする */
.dwstack .tile.flipin, .rs-drow .tile.flipin { animation: uraFlip2D .4s ease-out both; }
@keyframes uraFlip2D { 0% { transform: scaleX(0); } 60% { transform: scaleX(1.12) scaleY(1.06); } 100% { transform: none; } }
/* ロン・ツモなどのカットイン：画面に対して少し小さく（帯は左右の端まで届くように広げておく） */
.fx-cutin { transform: scale(.86); transform-origin: 50% 50%; }
.fx-cutin .ci-band { left: -25%; right: -25%; }
@media (max-height: 520px) { .fx-cutin { transform: scale(.78); } }
/* 手牌：少し大きく見やすく */
.hand .sz-hand, .hand .tile.sz-hand { --w: 63px; }
/* 2回続けてタップしても、画面が拡大されないように */
html, body { touch-action: manipulation; }

/* 手札：ふだんは左下に小さく（相手の鳴いた牌を隠さない）。触れると大きく広がる */
.myhandcards { left: 6px; top: 470px; transform: scale(.8); transform-origin: 0 100%; transition: transform .18s cubic-bezier(.2, .9, .3, 1.1); }
.myhandcards.open { transform: scale(1.5); z-index: 30; }
@media (min-aspect-ratio: 19/10) { .myhandcards { left: -30px; transform: scale(.88); } .myhandcards.open { transform: scale(1.6); } }
/* ツモ・ロンのボタンを大きく。スキップ（鳴きの欄）は右へよけて、重ならないように */
.pushbtn { zoom: 1.4; }
@media (max-height: 520px) { .pushbtn { zoom: 1.25; } }
.bigwin { top: 300px; }
.bigwin ~ .claimbar { left: auto; right: 24px; top: 440px; transform: none; }
@media (pointer: coarse) {
  .sp-stage3d .floor { left: -25%; right: -25%; height: 110%; }
  .sp-speed { width: 160vmax; height: 160vmax; }
}

/* 手札：左下の隅に小さく。触れるとぐっと大きく広がる（横長の画面ほど左の余白が広いので、そこへ寄せる） */
.myhandcards { left: 0; top: 548px; transform: scale(.72); }
.myhandcards.open { transform: scale(1.75); }
@media (min-aspect-ratio: 19/10) { .myhandcards { left: -70px; transform: scale(.78); } .myhandcards.open { transform: scale(1.95); } }
@media (min-aspect-ratio: 21/10) { .myhandcards { left: -105px; top: 540px; transform: scale(.8); } .myhandcards.open { transform: scale(2.05); } }
.myhandcards .handslot.touchlift { transform: translateY(calc(var(--drop) - 22px)) rotate(var(--rot)) scale(1.06); }

/* 浮かせたカードの効果：右の空いている所に大きく */
.cardside { position: fixed; z-index: 45; right: max(14px, env(safe-area-inset-right)); top: 16vh; width: min(34vw, 380px); max-height: 52vh;
  overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 12px; border-radius: 14px; pointer-events: none;
  color: #2a1a0a; background: linear-gradient(180deg, #fffaf0, #f3e7c8);
  box-shadow: 0 0 0 3px #e7c46a, 0 0 0 6px #7a4a08, 0 10px 26px rgba(0, 0, 0, .6), 0 0 30px rgba(255, 210, 110, .45);
  animation: csIn .16s ease-out both; }
@keyframes csIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.cardside.action { box-shadow: 0 0 0 3px #e7c46a, 0 0 0 6px #1d6b3a, 0 10px 26px rgba(0, 0, 0, .6), 0 0 30px rgba(120, 230, 150, .4); }
.cardside.counter { box-shadow: 0 0 0 3px #e7c46a, 0 0 0 6px #8a1220, 0 10px 26px rgba(0, 0, 0, .6), 0 0 30px rgba(255, 110, 110, .4); }
.cardside .cs-name { font: 800 17px/1.2 "Shippori Mincho B1", serif; letter-spacing: 2px; color: #6a3a06; border-bottom: 1px solid rgba(120, 80, 20, .35); padding-bottom: 4px; }
.cardside .cs-text { font: 700 22px/1.55 "Shippori Mincho B1", serif; }
.cardside .cs-why { font-size: 13px; font-weight: 800; color: #b0121e; }
.cardside .cs-hint { font-size: 11px; opacity: .6; text-align: right; }

.rs-now { padding-right: 2px; overflow: visible; }
.rs-dtx, .rs-pline { overflow: visible; }

/* ---------- 牌の見やすさ（字を大きく、面を明るく平らに、厚みは控えめに） ---------- */
.tile .face { padding: 5% 4% 3%; }
/* 手牌：大きく。面は明るいクリーム色で平ら、上だけ少し光る。背（緑）は下に細く */
.hand .sz-hand, .hand .tile.sz-hand { --w: 70px; }
.hand .tile {
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf4 30%, #f3eedf 100%) !important;
  border-bottom-width: calc(var(--w) * .04);
  border-bottom-color: #e8e1cc;
  --tile3d:
    inset 0 0 0 1px rgba(80, 70, 40, .22),
    inset 0 3px 0 rgba(255, 255, 255, .95),
    inset 0 -3px 5px rgba(120, 100, 60, .14),
    0 calc(var(--w) * -.07) 0 #f7f3e8,
    0 calc(var(--w) * -.11) 0 #2f78d0,
    0 calc(var(--w) * -.13) 0 #17468f,
    0 calc(var(--w) * .05) 0 #d8cfb6,
    0 calc(var(--w) * .12) calc(var(--w) * .14) rgba(0, 0, 0, .45);
  box-shadow: var(--tile3d);
}
.hand { gap: 1px; }
/* 河の牌：真上から見たように平らに近く。字が大きく見えるよう、厚みと影は小さく */
.tile.lay {
  background: linear-gradient(180deg, #ffffff 0%, #fbf8ef 45%, #f0eadb 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(80, 70, 40, .28),
    inset 0 2px 0 rgba(255, 255, 255, .95),
    0 calc(var(--w) * .05) 0 #e1d9c3,
    0 calc(var(--w) * .1) 0 #2f78d0,
    0 calc(var(--w) * .13) 0 #17468f,
    calc(var(--w) * .03) calc(var(--w) * .2) calc(var(--w) * .14) rgba(0, 0, 0, .45) !important;
  margin-bottom: calc(var(--w) * .14);
}
.pond { gap: 1px; }
.pond > .side { margin-bottom: calc(var(--w) * .14); }
/* 鳴きの発声：ぱっと出て、すぐ消える（短く切れよく） */
.fx-shout.call .word { animation: callPop .7s cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes callPop {
  0% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
  18% { transform: translate(-50%, -50%) scale(.92); opacity: 1; }
  28% { transform: translate(-50%, -50%) scale(1.04); }
  72% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -60%) scale(1.08); opacity: 0; }
}

/* 自分の発動中のカード：手札・手牌と重ならないよう、右の空いている所（鳴き・自動ツモ切りの上）に */
.activecol.mine { left: auto; right: 22px; top: 352px; bottom: auto; align-items: flex-end; }
/* 裏向きの牌（相手の伏せた捨て牌・月隠れの書・闇の帳など）は、河でも裏の色のまま（明るい面の色で上書きしない） */
.tile.back.lay {
  background: linear-gradient(115deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, #4a8fe0 0%, #2a6cc0 60%, #17468f 100%) !important;
}
.tile.back.lay .face { display: none; }

/* 結果画面の「32,000 → 33,000点」：欄の幅に合わせて文字の大きさを決める（どんな画面でもはみ出さない） */
.rs-dtx { container-type: inline-size; overflow: hidden; }
.rs-dcell .rs-pline { zoom: 1 !important; flex-wrap: nowrap; white-space: nowrap; gap: .5cqi; }
.rs-dcell .rs-now { font-size: min(24px, 11cqi) !important; min-width: 0 !important; padding-right: 0; }
.rs-dcell .rs-before { font-size: min(13px, 6cqi) !important; }
.rs-dcell .rs-arrow { font-size: min(13px, 6cqi) !important; }
.rs-dcell .rs-ten { font-size: min(12px, 6cqi) !important; }

.cardside { pointer-events: auto; max-height: 64vh; }
.cardside .cs-use { margin-top: 2px; align-self: stretch; padding: 10px 14px; border: 0; border-radius: 10px; cursor: pointer;
  font: 800 17px/1 "Shippori Mincho B1", serif; letter-spacing: 3px; color: #3a1a00;
  background: linear-gradient(180deg, #fff6c8, #ffd34a 45%, #d99a1a); box-shadow: 0 0 0 2px #7a4a08, 0 4px 0 2px #5a3206, 0 0 16px rgba(255, 200, 80, .7); }
.cardside .cs-use:active { transform: translateY(3px); box-shadow: 0 0 0 2px #7a4a08, 0 1px 0 2px #5a3206; }
/* 手札：扇形にせず、横にまっすぐ並べる（引いたカードも横に滑って入る） */
.myhandcards .handslot { --rot: 0deg !important; --drop: 0px !important; transform-origin: 50% 100%; }
.myhandcards .handslot + .handslot { margin-left: calc(var(--cw, 84px) * -.38); }

/* ---------- ツモ・ロン：パチンコの激アツ PUSH ボタン ---------- */
.pushbtn { overflow: visible; }
/* 後ろで回る光の筋と、脈打つ大きな光 */
.pushbtn .pb-rays { position: absolute; left: 50%; top: 72px; width: 330px; height: 330px; margin: -165px 0 0 -165px; border-radius: 50%; pointer-events: none; z-index: -2;
  background: repeating-conic-gradient(from 0deg, var(--ray) 0deg 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%);
  animation: pbSpin 4s linear infinite; mix-blend-mode: screen; }
.pushbtn .pb-aura { position: absolute; left: 50%; top: 72px; width: 230px; height: 230px; margin: -115px 0 0 -115px; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, var(--glow) 0%, transparent 65%); animation: pbAura .55s ease-in-out infinite alternate; }
@keyframes pbSpin { to { transform: rotate(360deg); } }
@keyframes pbAura { from { transform: scale(.9); opacity: .65; } to { transform: scale(1.12); opacity: 1; } }
/* 虹色に流れる LED の輪（金属の縁の外側） */
.pushbtn .pb-led { position: absolute; left: 0; right: 0; top: -2px; height: 146px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from var(--pbA, 0deg), #ff2a55, #ffb21a, #fff23a, #3aff7a, #2ad8ff, #7a4aff, #ff2ad8, #ff2a55);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%, #000 70%, transparent 72%); mask: radial-gradient(circle, transparent 62%, #000 64%, #000 70%, transparent 72%);
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px var(--glow)); animation: pbLed 1.2s linear infinite; }
@property --pbA { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes pbLed { to { --pbA: 360deg; } }
/* 金属の縁：もっと分厚く、光を強く反射する */
.pushbtn .pb-rim { background: conic-gradient(from 210deg, #ffffff, #7a8090, #f8faff, #4a5060, #ffffff, #8a90a0, #e8ecf4, #ffffff);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9), inset 0 -6px 10px rgba(0, 0, 0, .55), inset 0 6px 8px rgba(255, 255, 255, .7), 0 5px 0 #2a2f3a, 0 0 18px var(--glow); }
/* ドームの中で回る光の渦 */
.pushbtn .pb-swirl { position: absolute; inset: -20%; border-radius: 50%; mix-blend-mode: screen; opacity: .55;
  background: conic-gradient(from 0deg, transparent 0 20%, rgba(255, 255, 255, .9) 25%, transparent 32% 52%, rgba(255, 255, 255, .7) 57%, transparent 64%);
  animation: pbSpin 1.6s linear infinite; }
.pushbtn .pb-label { font-size: 44px; z-index: 2; animation: pbBeat .55s ease-in-out infinite alternate;
  -webkit-text-stroke: 6px rgba(50, 6, 0, .9); text-shadow: 0 4px 0 rgba(50, 6, 0, .85), 0 0 18px #fff, 0 0 30px var(--glow); }
@keyframes pbBeat { from { transform: scale(1); } to { transform: scale(1.08); } }
.pushbtn .pb-push { position: absolute; bottom: 14%; left: 0; right: 0; text-align: center; z-index: 2;
  font: 900 11px/1 "Orbitron", sans-serif; letter-spacing: 2px; color: #fff; text-shadow: 0 0 6px #fff, 0 1px 0 rgba(0, 0, 0, .7);
  animation: pbBlink .3s steps(2) infinite; }
@keyframes pbBlink { 50% { opacity: .35; } }
.pushbtn .pb-label { position: relative; top: -6px; }
/* ドームを斜めに走る強い光（数秒に一度） */
.pushbtn .pb-sweep { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .95) 48%, transparent 60%) no-repeat; background-size: 250% 100%;
  animation: pbSweep 1.4s ease-in-out infinite; }
@keyframes pbSweep { 0%, 40% { background-position: 150% 0; } 100% { background-position: -60% 0; } }
.pushbtn.tsumo { --ray: rgba(255, 220, 80, .85); }
.pushbtn.ron { --ray: rgba(255, 70, 120, .85); }
/* 押した瞬間：真っ白に光ってから沈む */
.pushbtn.is-pressed .pb-dome { filter: brightness(1.8) saturate(1.3); }
@media (pointer: coarse) { .pushbtn .pb-rays { mix-blend-mode: normal; opacity: .8; } }
.pushbtn .pb-led { left: -6px; right: -6px; top: -8px; height: 158px;
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 70%, transparent 72%); mask: radial-gradient(circle, transparent 58%, #000 60%, #000 70%, transparent 72%); }
/* ボタンが出ている間は、卓を少し暗くしてボタンを目立たせる */
.bigwin::before { content: ""; position: fixed; inset: -50vmax; z-index: -3; pointer-events: none; background: radial-gradient(circle at 50% 50%, transparent 10%, rgba(0, 0, 0, .55) 45%); }
/* スマホ：指を離した後も「マウスが乗っている」扱いが残って、別のカードまで浮くのを止める（浮くのは効果を出しているカードだけ） */
@media (hover: none) {
  .handslot:hover { transform: translateY(var(--drop)) rotate(var(--rot)); z-index: auto; }
  .myhandcards .handslot:not(.touchlift) { transform: none !important; }
}
/* 手札（小さい時）：卓の外の左の空いている所へ寄せて、少し大きく */
.myhandcards { left: -60px; top: 560px; transform: scale(.95); }
@media (min-aspect-ratio: 19/10) { .myhandcards { left: -150px; transform: scale(1.02); } }
@media (min-aspect-ratio: 21/10) { .myhandcards { left: -205px; top: 556px; transform: scale(1.08); } }

/* 手札の置き場所は placeCardFan で決める。広げた時は、その場所から大きく */
.myhandcards.open { transform: scale(var(--openk, 1.9)) !important; z-index: 44; }
body > .myhandcards { z-index: 30; }
/* 小さい時：カードを深く重ねて幅をせまくし、そのぶん大きく見せる */
body > .myhandcards:not(.open) .handslot + .handslot { margin-left: calc(var(--cw, 84px) * -.8); }

.opphand.opened { gap: 1px; align-items: flex-end; }
.opphand.opened .tile { box-shadow: var(--tile3d), 0 0 0 1px rgba(0, 0, 0, .2); }

/* 横長のスマホ：卓の右の外の空きに、操作ボタンと「鳴き・自動ツモ切り」を大きく並べる（手牌から離す） */
/* 大きさは scale で（触った後の :hover の transform に消されないように）。手牌より上、リーチなどのボタンより右上に */
.stage.wideR .autobtn { top: auto; bottom: 196px; right: calc(16px - var(--xr)); scale: 1.5; transform-origin: 100% 100%; }
.stage.wideR .autobtn.nakibtn { bottom: 270px; }
.stage.wideR .autobtn.cfxbtn { bottom: 344px; }
.stage.wideR .activecol.mine { right: calc(22px - var(--xr)); top: 200px; }
.stage.wideR .autobtn { min-width: 132px; justify-content: space-between; }

/* 背景は暗く・ぼかして、卓（麻雀）に目が行くようにする */
body.in-game[data-stage="space"] { background: linear-gradient(rgba(3, 5, 14, .7), rgba(3, 5, 14, .7)), #04040f url("/static/stage/space.webp") center / cover no-repeat fixed; }
body.in-game[data-stage="wa"] { background: linear-gradient(rgba(5, 6, 20, .7), rgba(5, 6, 20, .7)), #0b0f2e url("/static/stage/wa.webp") center / cover no-repeat fixed; }
body.in-game[data-stage="matsuri"] { background: linear-gradient(rgba(4, 5, 18, .72), rgba(4, 5, 18, .72)), #070a26 url("/static/stage/matsuri.webp") center / cover no-repeat fixed; }
body.in-game[data-stage="space"]::after { opacity: .3; }
.stage-fw { opacity: .4; }
.stage-petal { opacity: .55; }

/* いちばん新しい捨て牌の印：金の小さな三角が、牌の上でふわふわ動く */

.lastmark { position: absolute; left: 50%; top: calc(var(--w, 34px) * -.55); width: 0; height: 0; pointer-events: none; z-index: 6;
  border-left: calc(var(--w, 34px) * .3) solid transparent; border-right: calc(var(--w, 34px) * .3) solid transparent;
  border-top: calc(var(--w, 34px) * .4) solid #ffd34d; filter: drop-shadow(0 0 3px rgba(255, 200, 60, .95)) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
  animation: lastBob .9s ease-in-out infinite; }
@keyframes lastBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, calc(var(--w, 34px) * -.14)); } }
/* 牌を河に置いた時の光の輪 */
.fx-landpuff { position: fixed; z-index: 34; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, rgba(255, 240, 200, .25) 45%, transparent 70%);
  box-shadow: 0 0 0 2px rgba(255, 245, 210, .55); }
/* 手牌：本物の牌のように、斜めの艶と、上に見える背（青）の厚みを少し足す */
.hand .tile {
  background: linear-gradient(118deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 32%), linear-gradient(180deg, #ffffff 0%, #fdfbf4 30%, #f1ebda 100%) !important;
  --tile3d:
    inset 0 0 0 1px rgba(80, 70, 40, .24),
    inset 0 3px 0 rgba(255, 255, 255, .95),
    inset 0 -4px 6px rgba(120, 100, 60, .16),
    0 calc(var(--w) * -.06) 0 #f7f3e8,
    0 calc(var(--w) * -.12) 0 #3a86dc,
    0 calc(var(--w) * -.16) 0 #17468f,
    0 calc(var(--w) * .05) 0 #d3c9ae,
    0 calc(var(--w) * .12) calc(var(--w) * .16) rgba(0, 0, 0, .5);
}
/* 結果画面や小窓を出している間は、外に出した手札を隠す（上に重ならないように） */
body:has(.overlay:not(.cardzoom)) > .myhandcards, body:not(.in-game) > .myhandcards { visibility: hidden; }

/* ---------- 河の牌：本物の牌のような「箱」に。面はふくらみと艶、下に白い胴と青い背の厚み（明暗つき）、床に落ちる影 ---------- */
.tile.lay {
  border-radius: calc(var(--w) * .14);
  background:
    radial-gradient(ellipse 70% 45% at 30% 18%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #ffffff 0%, #faf6ea 55%, #e9e0c8 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(90, 75, 40, .32),
    inset 0 calc(var(--w) * .05) calc(var(--w) * .03) rgba(255, 255, 255, .9),
    inset calc(var(--w) * .05) 0 calc(var(--w) * .05) rgba(255, 255, 255, .55),
    inset calc(var(--w) * -.06) 0 calc(var(--w) * .07) rgba(120, 100, 60, .16),
    inset 0 calc(var(--w) * -.08) calc(var(--w) * .08) rgba(120, 100, 60, .26),
    0 calc(var(--w) * .02) 0 #bfb08a,
    0 calc(var(--w) * .06) 0 #f6f1e2,
    0 calc(var(--w) * .1) 0 #e8dfc6,
    0 calc(var(--w) * .14) 0 #d2c49f,
    0 calc(var(--w) * .16) 0 #8fbdf3,
    0 calc(var(--w) * .2) 0 #3d82d6,
    0 calc(var(--w) * .24) 0 #24589f,
    0 calc(var(--w) * .27) 0 #13336a,
    calc(var(--w) * .03) calc(var(--w) * .34) calc(var(--w) * .16) rgba(0, 0, 0, .55) !important;
  margin-bottom: calc(var(--w) * .3);
}
.pond > .side { margin-bottom: calc(var(--w) * .3); }

/* 鳴かれた河の牌の、赤いトゲの輪 */
.fx-callmark { position: fixed; z-index: 33; pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #ff2a2a 0deg 9deg, transparent 9deg 20deg);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%, #000 62%, transparent 64%); mask: radial-gradient(circle, transparent 38%, #000 40%, #000 62%, transparent 64%);
  filter: drop-shadow(0 0 4px rgba(255, 60, 40, .9)); }
.fx-callmark.kan { background: repeating-conic-gradient(from 0deg, #b45aff 0deg 9deg, transparent 9deg 20deg); filter: drop-shadow(0 0 4px rgba(180, 90, 255, .9)); }
/* 鳴きの文字の後ろを、斜めの光の帯がさっと走る */
.fx-shout.call .streak { position: absolute; left: 50%; top: 50%; width: 420px; height: 64px; pointer-events: none;
  transform: translate(-50%, -50%) skewX(-18deg) scaleX(0);
  background: linear-gradient(90deg, transparent, rgba(255, 210, 90, .0) 8%, rgba(255, 190, 60, .75) 45%, rgba(255, 250, 220, .95) 50%, rgba(255, 190, 60, .75) 55%, transparent 92%);
  animation: callStreak .7s cubic-bezier(.2, .9, .3, 1) forwards; }
.fx-shout.call.kan .streak { background: linear-gradient(90deg, transparent, rgba(190, 120, 255, .75) 45%, rgba(250, 235, 255, .95) 50%, rgba(190, 120, 255, .75) 55%, transparent 92%); }
@keyframes callStreak {
  0% { transform: translate(-50%, -50%) skewX(-18deg) scaleX(0); opacity: 1; }
  30% { transform: translate(-50%, -50%) skewX(-18deg) scaleX(1); opacity: 1; }
  75% { opacity: .85; }
  100% { transform: translate(-50%, -50%) skewX(-18deg) scaleX(1.1); opacity: 0; }
}

/* あがりの前ぶれ（光の柱・虹の帯・流れ星） */
.fx-winbeams { position: fixed; inset: 0; z-index: 36; pointer-events: none; overflow: hidden; }
.fx-winbeams .wb-beam { position: absolute; top: -10%; height: 120%; transform: translateX(-50%) scaleY(0); transform-origin: 50% 0; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, rgba(150, 220, 255, .55) 30%, rgba(255, 255, 255, .95) 50%, rgba(150, 220, 255, .55) 70%, transparent);
  filter: blur(2px); animation: wbBeam 1.9s cubic-bezier(.2, .8, .3, 1) var(--d) both; }
@keyframes wbBeam {
  0% { transform: translateX(-50%) scaleY(0); opacity: 0; }
  14% { transform: translateX(-50%) scaleY(1); opacity: 1; }
  60% { transform: translateX(-50%) scaleY(1) scaleX(1.15); opacity: .85; }
  100% { transform: translateX(-50%) scaleY(1) scaleX(.4); opacity: 0; }
}
.fx-winbeams .wb-floor { position: absolute; width: 46vw; height: 16vw; transform: translate(-50%, -50%) scale(.2); border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .9), rgba(140, 210, 255, .5) 40%, transparent 70%); animation: wbFloor 1.9s ease-out both; }
@keyframes wbFloor { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; } }
.fx-winbeams .wb-rainbow { position: absolute; left: 0; right: 0; height: 9px; mix-blend-mode: screen;
  background: linear-gradient(90deg, #ff3b5c, #ffb02e, #fff04a, #4dff7a, #38c8ff, #8a5bff, #ff3bd4, #ff3b5c) 0 0 / 50% 100% repeat-x;
  box-shadow: 0 0 14px rgba(255, 255, 255, .8); animation: wbRain 1.9s linear both; }
.fx-winbeams .wb-rainbow.top { top: 0; }
.fx-winbeams .wb-rainbow.bottom { bottom: 0; animation-direction: reverse; }
@keyframes wbRain { 0% { opacity: 0; background-position: 0 0; } 10%, 75% { opacity: 1; } 100% { opacity: 0; background-position: 100vw 0; } }
.fx-winbeams .wb-star { position: absolute; left: -30vw; top: 18vh; width: 30vw; height: 6px; border-radius: 3px; transform: rotate(14deg);
  background: linear-gradient(90deg, transparent, rgba(190, 140, 255, .6) 60%, #fff 96%); box-shadow: 0 0 18px 4px rgba(200, 150, 255, .8);
  animation: wbStar .55s cubic-bezier(.3, .6, .4, 1) .05s both; }
@keyframes wbStar { 0% { transform: translateX(0) rotate(14deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(150vw) rotate(14deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fx-winbeams { display: none; } }
.hand .tile.dealin { animation: none; }   /* 配牌の動きは JS で（山から手元へ飛ぶ） */

/* iPhone の Safari は横向きの時に文字を勝手に大きくすることがある（メニューの文字がはみ出た）。html から止める */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.gm-grid .gm-item > .tn { min-width: 0; overflow: hidden; text-overflow: clip; }

/* ---------- 流局の画面（作り直し）：月夜に霧と青い光の粒。左に各人の手、右に点数 ---------- */
.overlay.res2.draw { background: radial-gradient(ellipse 90% 80% at 50% 30%, #1d2c66 0%, #0c1436 45%, #04060f 100%); }
.dr-bg { overflow: hidden; }
.dr-moon { position: absolute; right: 7%; top: 6%; width: 22vh; height: 22vh; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #ffffff 0%, #eef3ff 30%, #b8c8f0 62%, #7c8fc8 100%);
  box-shadow: 0 0 40px 10px rgba(170, 200, 255, .55), 0 0 140px 50px rgba(110, 150, 255, .25); opacity: .85; animation: drMoon 1.4s ease-out both; }
@keyframes drMoon { from { opacity: 0; transform: translateY(20px) scale(.9); } }
.dr-mist { position: absolute; left: -30%; width: 160%; height: 40%; pointer-events: none; opacity: .5;
  background: radial-gradient(ellipse 30% 50% at 20% 50%, rgba(160, 190, 255, .28), transparent 70%),
              radial-gradient(ellipse 26% 45% at 60% 55%, rgba(140, 170, 255, .22), transparent 70%),
              radial-gradient(ellipse 22% 40% at 90% 45%, rgba(170, 200, 255, .2), transparent 70%); }
.dr-mist.a { bottom: -6%; animation: drMist 26s linear infinite; }
.dr-mist.b { top: 30%; opacity: .3; animation: drMist 38s linear infinite reverse; }
@keyframes drMist { from { transform: translateX(0); } to { transform: translateX(-18%); } }
.dr-rays { position: absolute; left: 50%; top: 30%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; pointer-events: none; opacity: .18;
  background: repeating-conic-gradient(from 0deg, rgba(150, 190, 255, .5) 0 4deg, transparent 4deg 16deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 55%); mask: radial-gradient(circle, #000 0, transparent 55%); animation: drRays 60s linear infinite; }
@keyframes drRays { to { transform: rotate(360deg); } }
.dr-motes i { position: absolute; left: var(--x); top: 104%; width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, #fff 0, #9cc4ff 45%, transparent 70%); box-shadow: 0 0 8px #7fb2ff;
  animation: drMote var(--t) linear var(--d) infinite; }
@keyframes drMote { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 90% { opacity: .7; } 100% { transform: translate(30px, -112vh); opacity: 0; } }
.overlay.res2.draw .result.res2 {
  background: radial-gradient(ellipse at 50% 0%, rgba(140, 180, 255, .2), transparent 60%),
    repeating-linear-gradient(45deg, rgba(160, 190, 255, .05) 0 2px, transparent 2px 18px),
    linear-gradient(160deg, rgba(26, 36, 84, .9) 0%, rgba(14, 18, 48, .92) 55%, rgba(8, 10, 26, .94) 100%);
  box-shadow: 0 0 0 2px #e6eeff, 0 0 0 5px #8fa8e0, 0 0 0 7px #2a3c78, 0 0 0 9px #b8c8f0,
    inset 0 0 40px rgba(120, 160, 255, .15), 0 0 50px rgba(100, 150, 255, .35), 0 24px 70px rgba(0, 0, 0, .75); }
.rs-banner.draw { animation: drTitleIn .7s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes drTitleIn { from { opacity: 0; letter-spacing: 40px; filter: blur(8px); } to { opacity: 1; } }
.dr-sub { font: 800 15px/1 "Shippori Mincho B1", serif; letter-spacing: 6px; color: #cfe0ff; padding: 6px 18px; position: relative;
  text-shadow: 0 0 10px rgba(120, 170, 255, .9); }
.dr-sub::before, .dr-sub::after { content: ""; position: absolute; top: 50%; width: 70px; height: 2px; background: linear-gradient(90deg, transparent, #9fbaff); }
.dr-sub::before { right: 100%; }
.dr-sub::after { left: 100%; transform: scaleX(-1); }
.rs-tenpai.dr-rows { display: flex; flex-direction: column; gap: 8px; width: 100%; grid-template-columns: none; }
.dr-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; min-width: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .2)); border: 1px solid rgba(160, 190, 255, .18); }
.dr-row.on { border-color: rgba(125, 208, 255, .8); box-shadow: 0 0 14px rgba(110, 190, 255, .45), inset 0 0 20px rgba(90, 160, 255, .15);
  background: linear-gradient(90deg, rgba(30, 70, 140, .55), rgba(10, 20, 50, .35)); }
.dr-row.me .dr-name { color: #ffe9a8; }
.dr-row .rs-av { width: 48px; height: 48px; flex: none; }
.dr-row.off .rs-av { filter: grayscale(.6) brightness(.75); }
.dr-who { display: flex; flex-direction: column; gap: 4px; width: 84px; flex: none; }
.dr-name { font: 800 15px/1.1 "Shippori Mincho B1", serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-st { align-self: flex-start; font: 900 12px/1 "M PLUS Rounded 1c", sans-serif; padding: 4px 8px; border-radius: 10px; color: #c8d0e0; background: rgba(255, 255, 255, .1); }
.dr-row.on .dr-st { color: #04223a; background: linear-gradient(180deg, #e6f7ff, #7dd0ff 60%, #3a9ae0); box-shadow: 0 0 10px rgba(125, 208, 255, .9); }
.dr-tiles { display: flex; align-items: flex-end; gap: 1px; flex-wrap: nowrap; flex: 1 1 0; min-width: 0; overflow: hidden; }
.dr-row.off .dr-tiles { opacity: .55; }
.dr-meld { display: inline-flex; gap: 1px; margin-left: 6px; }
.dr-wait { display: inline-flex; align-items: center; gap: 2px; margin-left: 10px; padding: 3px 6px 3px 4px; border-radius: 8px;
  background: rgba(255, 220, 120, .12); border: 1px solid rgba(255, 220, 120, .6); box-shadow: 0 0 10px rgba(255, 210, 100, .35); }
.dr-wl { writing-mode: vertical-rl; font: 900 11px/1 "M PLUS Rounded 1c", sans-serif; color: #ffe08a; margin-right: 3px; }
.dr-rows:not(.pending) .dr-row { animation: drRowIn .5s cubic-bezier(.2, .9, .3, 1) both; }
.dr-rows:not(.pending) .dr-row:nth-child(2) { animation-delay: .12s; }
.dr-rows:not(.pending) .dr-row:nth-child(3) { animation-delay: .24s; }
.dr-rows:not(.pending) .dr-row:nth-child(4) { animation-delay: .36s; }
@keyframes drRowIn { from { opacity: 0; transform: translateX(-40px); } }
.overlay.res2.draw .rs-dcell { border-color: rgba(160, 190, 255, .45); }
@media (prefers-reduced-motion: reduce) { .dr-mist, .dr-rays, .dr-motes i, .dr-row { animation: none !important; } }
.overlay.res2.draw .rs-fit.rs-2col > .rs-col.l { flex-grow: 1.9; }

/* ---------- 局の始めのカード購入（作り直し）：画面全体を暗くして、同じ大きさの札を3枚並べる ---------- */
.buyshade { inset: -1500px; z-index: 30; background: rgba(4, 2, 12, .62); animation: shadeIn .3s ease-out both; }
body.buying > .myhandcards { filter: brightness(.38); transition: filter .3s; pointer-events: none; }
.buypanel.bp2 { top: 50%; z-index: 31; transform: translate(-50%, -54%); gap: 14px; padding: 18px 26px 20px; border-radius: 20px; width: max-content;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 220, 140, .22), transparent 70%),
    repeating-linear-gradient(45deg, rgba(231, 196, 106, .05) 0 2px, transparent 2px 16px),
    linear-gradient(180deg, #2e1a3a, #160b22 60%, #0c0614);
  box-shadow: 0 0 0 2px #fff0b8, 0 0 0 5px #c99a3e, 0 0 0 7px #4a300a, 0 0 0 8.5px #e7c46a,
    0 0 50px rgba(255, 190, 80, .4), 0 24px 60px rgba(0, 0, 0, .8);
  animation: bp2In .45s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes bp2In { from { opacity: 0; transform: translate(-50%, -54%) scale(.85); } }
.bp-head { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bp-q { font: 900 28px/1.1 "Shippori Mincho B1", serif; letter-spacing: .14em; color: transparent;
  background: linear-gradient(180deg, #fffbe0, #f0cc62 50%, #b07a1a 75%, #ffe08a); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 0 #2a1204) drop-shadow(0 0 12px rgba(255, 200, 80, .6)); }
.bp-info { font: 800 13px/1 "M PLUS Rounded 1c", sans-serif; color: #e8d8b0; letter-spacing: .08em; padding: 5px 14px; border-radius: 12px; background: rgba(0, 0, 0, .4); }
.bp-row { display: flex; align-items: stretch; gap: 14px; }
.bp-row > .bp-c { flex: none; }
.bp-c { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  width: 168px; height: 132px; padding: 10px 10px 12px; border: 0; border-radius: 14px; cursor: pointer; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, var(--c1), var(--c2)); animation: none;
  box-shadow: inset 0 0 0 1.5px var(--rim), inset 0 0 0 4px rgba(0, 0, 0, .35), inset 0 18px 24px rgba(255, 255, 255, .12), 0 6px 0 var(--c3), 0 10px 18px rgba(0, 0, 0, .6);
  transition: transform .12s ease, filter .12s ease; }
.bp-c::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 48%; border-radius: 14px 14px 40% 40% / 14px 14px 18px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); pointer-events: none; }
.bp-c:active { transform: translateY(4px); box-shadow: inset 0 0 0 1.5px var(--rim), inset 0 0 0 4px rgba(0, 0, 0, .35), 0 2px 0 var(--c3), 0 4px 10px rgba(0, 0, 0, .6); }
.bp-c b { position: relative; font: 900 20px/1 "Shippori Mincho B1", serif; letter-spacing: .12em; text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
.bp-c small { position: relative; font: 700 12px/1.2 "M PLUS Rounded 1c", sans-serif; color: rgba(255, 255, 255, .82); white-space: nowrap; }
.bp-c.buy { --c1: #a8761a; --c2: #4a2a06; --c3: #2a1602; --rim: #ffe7a0; width: 196px;
  box-shadow: inset 0 0 0 1.5px var(--rim), inset 0 0 0 4px rgba(0, 0, 0, .3), inset 0 18px 24px rgba(255, 255, 255, .15), 0 6px 0 var(--c3), 0 0 26px rgba(255, 200, 80, .75), 0 10px 18px rgba(0, 0, 0, .6);
  animation: bpGlow 1.6s ease-in-out infinite; }
.bp-c.buy b { color: transparent; background: linear-gradient(180deg, #fffbe6, #ffe08a 55%, #f0b840); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 0 #2a1204); text-shadow: none; }
.bp-c.buy small { color: #ffe9b0; }
@keyframes bpGlow { 50% { filter: brightness(1.15); box-shadow: inset 0 0 0 1.5px var(--rim), inset 0 0 0 4px rgba(0, 0, 0, .3), inset 0 18px 24px rgba(255, 255, 255, .15), 0 6px 0 var(--c3), 0 0 40px rgba(255, 210, 90, 1), 0 10px 18px rgba(0, 0, 0, .6); } }
.bp-c.buy::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: bpSheen 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes bpSheen { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.bp-c.mul { --c1: #3456a8; --c2: #101c48; --c3: #070d24; --rim: #a8c4ff; }
.bp-c.skip { --c1: #4a4650; --c2: #19171e; --c3: #0b0a0e; --rim: #c8c0b0; }
.bp-c:disabled { filter: grayscale(.7) brightness(.6); animation: none; cursor: default; }
.bp-ic { position: relative; flex: 1; display: grid; place-items: center; }
.bp-c .cardback { width: 40px; height: 56px; transform: rotate(-8deg); }
.bp-swap { position: relative; width: 56px; height: 50px; }
.bp-swap .cardbackmini { position: absolute; width: 30px; height: 42px; border-radius: 3px; box-shadow: 0 0 0 1.5px #a8c4ff, 0 3px 6px rgba(0, 0, 0, .6); }
.bp-swap .a { left: 2px; top: 6px; transform: rotate(-12deg); }
.bp-swap .b { right: 2px; top: 0; transform: rotate(10deg); }
.bp-x { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .7); }
.bp-x::before, .bp-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 3px; margin: -1.5px 0 0 -11px; border-radius: 2px; background: rgba(255, 255, 255, .8); transform: rotate(45deg); }
.bp-x::after { transform: rotate(-45deg); }
.buypanel.bp2.full .bp-c.buy { box-shadow: inset 0 0 0 1.5px #ff8a8a, 0 6px 0 var(--c3), 0 0 20px rgba(255, 70, 70, .8); }

/* ---------- ツモ・ロン・リーチのカットイン（作り直し）：画面の高さに合わせた大きさ。帯は画面の端から端まで。
   卓を暗くして、こい漆の帯に太ぶちの金属文字（白い光で文字が消えないように） ---------- */
.fx-cutin, .fx-cutin.fx-cutin { transform: none; }
.fx-cutin .ci-dim { position: absolute; inset: 0; opacity: 0; z-index: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0, 0, 0, .45), rgba(0, 0, 0, .8)); }
.fx-cutin .ci-bar { height: 9vh; }
.fx-cutin .ci-band, .fx-cutin.fx-cutin .ci-band { left: -30vw; right: -30vw; top: 50%; height: 46vh; margin-top: -23vh;
  background: linear-gradient(180deg, #07061a 0%, #1a1240 22%, #2c1d5c 50%, #1a1240 78%, #07061a 100%);
  border-top: .7vh solid #f0cc62; border-bottom: .7vh solid #f0cc62;
  box-shadow: 0 -.4vh 0 #6a4612, 0 .4vh 0 #6a4612, 0 0 4vh rgba(255, 200, 90, .55), inset 0 0 8vh rgba(0, 0, 0, .6); }
.fx-cutin.ron .ci-band, .fx-cutin.fx-cutin.ron .ci-band { background: linear-gradient(180deg, #1a0004 0%, #4a0610 22%, #7a0c1c 50%, #4a0610 78%, #1a0004 100%);
  border-color: #ffb0a0; box-shadow: 0 -.4vh 0 #6a0a10, 0 .4vh 0 #6a0a10, 0 0 4vh rgba(255, 80, 80, .6), inset 0 0 8vh rgba(0, 0, 0, .6); }
.fx-cutin .ci-art { top: 50%; height: 94vh; width: 46vw; margin-top: -54vh; }
.fx-cutin.from0 .ci-art, .fx-cutin.from2 .ci-art, .fx-cutin.from3 .ci-art { left: 1vw; right: auto; }
.fx-cutin.from1 .ci-art { right: 1vw; left: auto; }
.fx-cutin .ci-plate { top: 50%; margin-top: -21vh; gap: 1.6vh; }
.fx-cutin .ci-av { width: 8vh; height: 8vh; }
.fx-cutin .ci-wind { width: 5vh; height: 5vh; font-size: 3vh; }
.fx-cutin .ci-name { font-size: 4.6vh; }
.fx-cutin .ci-word.mt { top: 50%; margin-top: -14vh; display: grid; font: 900 28vh/1 "Shippori Mincho B1", "Yu Mincho", serif; letter-spacing: .02em;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; white-space: nowrap;
  filter: drop-shadow(0 0 2.4vh rgba(255, 200, 80, .75)); }
.fx-cutin.ron .ci-word.mt, .fx-cutin.riichi .ci-word.mt { filter: drop-shadow(0 0 2.4vh rgba(255, 80, 60, .8)); }
.fx-cutin.riichi .ci-word.mt { font-size: 22vh; }
.fx-cutin.from0 .ci-word.mt, .fx-cutin.from2 .ci-word.mt, .fx-cutin.from3 .ci-word.mt { left: 47vw; right: auto; }
.fx-cutin.from1 .ci-word.mt { right: 47vw; left: auto; }
.ci-word.mt > span { grid-area: 1 / 1; padding: .1em .14em; position: relative; }
.ci-word.mt .l1 { color: #120400; -webkit-text-stroke: .2em #120400; }
.ci-word.mt .l2 { color: var(--rim1); -webkit-text-stroke: .13em var(--rim1); }
.ci-word.mt .l3 { color: var(--rim2); -webkit-text-stroke: .07em var(--rim2); }
.ci-word.mt .l4 { background: var(--fill); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .012em rgba(255, 255, 255, .9); }
.ci-word.mt .l5 { background: linear-gradient(110deg, transparent 0 40%, rgba(255, 255, 255, .95) 48%, rgba(255, 255, 255, .95) 52%, transparent 60% 100%) no-repeat;
  background-size: 300% 100%; background-position: 130% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: spShine 1s .85s ease-in-out both; }
.ci-word.mt.gold { --rim1: #fff3c0; --rim2: #7a3c00; --fill: linear-gradient(180deg, #fffef0 0%, #ffe680 30%, #ffb800 48%, #8a4a00 52%, #e89a10 70%, #fff2a0 100%); }
.ci-word.mt.fire { --rim1: #ffe9a0; --rim2: #5a0000; --fill: linear-gradient(180deg, #fffbe0 0%, #ffd040 28%, #ff5a00 48%, #8a0000 52%, #ff3a10 72%, #ffc070 100%); }
body.cutin-on > .myhandcards { opacity: 0; transition: opacity .2s; }

/* 捨てた牌の飛ぶ牌：入れ物は着地した時の河の牌と同じ場所・大きさ。中で「立った牌の絵」から「寝かせた牌」へ入れ替わる */
.fx-quicktile { position: fixed; z-index: 33; margin: 0; transform-origin: 50% 50%; pointer-events: none; will-change: transform; }
.fx-quicktile > .qt-lay { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; }
.fx-quicktile > .qt-stand { position: absolute; left: 50%; top: 50%; margin: 0; transform-origin: 50% 50%; box-shadow: 0 6px 10px rgba(0, 0, 0, .35); }

/* 条件未達の帯：そのカードの形で切り抜く。カードごとに重なりを閉じるので、手前のカードの上には出ない */
.handslot { isolation: isolate; }
.handslot .blockclip { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; border-radius: calc(var(--cw, 84px) * .047); }
.handslot .blockclip .blockbadge { left: -20%; right: -20%; top: 42%; transform: translateY(-50%) rotate(-14deg); text-align: center; border-radius: 0;
  border-width: 2px 0; font-size: calc(var(--cw, 84px) * .17); padding: .25em 0; }

/* ---------- カード購入（3回目）：打ち出しの金の額縁＋虹色に流れる光、厚みのある艶のボタン、読みやすい縁取り文字 ---------- */
.buypanel.bp3 { padding: 22px 30px 24px; border-radius: 14px; overflow: visible;
  --fx1: #fff; --fx2: #ff6ad5; --fx3: #fff6b0;
  --d1: #ffffff; --d2: #9ef0ff; --d3: #ff9ad8; --d4: #7a6bff; --d5: #fff07a; --dg: rgba(255, 255, 255, .95);
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%, rgba(255, 90, 200, .22), transparent 70%),
    radial-gradient(ellipse 60% 50% at 85% 0%, rgba(80, 200, 255, .22), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255, 210, 90, .18), transparent 70%),
    linear-gradient(180deg, #1c1030 0%, #0e0820 55%, #07040f 100%);
  box-shadow: 0 0 60px rgba(255, 150, 230, .28), 0 0 40px rgba(110, 200, 255, .25), 0 26px 60px rgba(0, 0, 0, .85); }
.buypanel.bp3 > .rs-frame { border-radius: 14px; }
.buypanel.bp3 .rs-frame .rs-run { background: conic-gradient(from var(--rsA), #ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #8a6bff, #ff4dd8, #ff4d6d);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .7)) drop-shadow(0 0 10px rgba(255, 120, 220, .6)); animation-duration: 2.6s; }
.buypanel.bp3 .rs-gem { transform: scale(.72); }
.buypanel.bp3 .rs-gem .dia { animation: diaPulse 2.4s ease-in-out infinite, rsGemHue 3s linear infinite; }
.buypanel.bp3 .bp-head, .buypanel.bp3 .bp-row, .buypanel.bp3 .buyfull { position: relative; z-index: 5; }
.buypanel.bp3 .bp-q { font-size: 30px; color: #fff6d0; background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-stroke: 6px #2a0f04; paint-order: stroke fill; filter: drop-shadow(0 3px 0 #000) drop-shadow(0 0 14px rgba(255, 200, 90, .7)); }
.buypanel.bp3 .bp-info { font-size: 14px; color: #fff; background: linear-gradient(180deg, #2a1c44, #120a22); box-shadow: inset 0 0 0 1.5px #e7c46a, 0 2px 6px rgba(0, 0, 0, .6); padding: 6px 16px; }
/* ボタン：厚み（下の側面）、上半分の艶、金の縁。押すと沈む */
.buypanel.bp3 .bp-c { height: 140px; border-radius: 16px; overflow: visible;
  box-shadow: inset 0 0 0 2px var(--rim), inset 0 0 0 4px rgba(0, 0, 0, .35), inset 0 -10px 18px rgba(0, 0, 0, .35), inset 0 14px 22px rgba(255, 255, 255, .18),
    0 0 0 2px #2a1804, 0 9px 0 var(--c3), 0 9px 0 2px #120800, 0 16px 22px rgba(0, 0, 0, .7); }
.buypanel.bp3 .bp-c::before { border-radius: 14px 14px 50% 50% / 14px 14px 22px 22px; height: 46%; left: 4px; right: 4px; top: 4px; }
.buypanel.bp3 .bp-c:active { transform: translateY(6px); box-shadow: inset 0 0 0 2px var(--rim), inset 0 0 0 4px rgba(0, 0, 0, .35), 0 0 0 2px #2a1804, 0 3px 0 var(--c3), 0 5px 10px rgba(0, 0, 0, .7); }
.buypanel.bp3 .bp-c b { font-size: 21px; color: #fff; -webkit-text-stroke: 5px rgba(20, 8, 0, .85); paint-order: stroke fill; text-shadow: 0 2px 0 #000; }
.buypanel.bp3 .bp-c small { font-size: 12.5px; color: #fff; -webkit-text-stroke: 3px rgba(0, 0, 0, .6); paint-order: stroke fill; }
.buypanel.bp3 .bp-c.buy { --c1: #ffd860; --c2: #b06a08; --c3: #5a3002; --rim: #fff3c0; width: 204px; animation: none; }
.buypanel.bp3 .bp-c.buy b { color: #fffbe8; background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none; -webkit-text-stroke: 5px #3a1a00; }
/* 引くボタンだけ、縁を虹色の光が回る */
.buypanel.bp3 .bp-c.buy > .bp-rb { position: absolute; inset: -6px; border-radius: 21px; padding: 4px; pointer-events: none;
  background: conic-gradient(from var(--rsA), #ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #8a6bff, #ff4dd8, #ff4d6d);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .8)) drop-shadow(0 0 14px rgba(255, 120, 220, .7)); animation: rsRun 2s linear infinite; }
.buypanel.bp3 .bp-c.mul { --c1: #5a86ff; --c2: #1a2c7a; --c3: #0a1240; --rim: #d8e4ff; }
.buypanel.bp3 .bp-c.skip { --c1: #6a6672; --c2: #24222a; --c3: #0e0d12; --rim: #e2dccf; }
.buypanel.bp3 .bp-c:disabled { filter: grayscale(.8) brightness(.55); }
.buypanel.bp3 .bp-c:disabled > .bp-rb { display: none; }

/* 手牌が見えている相手の待ち：その人の手牌のすぐ横（卓の外側）に、大きな牌で。縁は止まった虹色（毎コマの描き直しをしない） */
.pl-waits { position: absolute; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; border-radius: 12px; pointer-events: none;
  background: linear-gradient(180deg, rgba(30, 16, 50, .96), rgba(10, 6, 20, .96)); box-shadow: 0 6px 16px rgba(0, 0, 0, .6), 0 0 16px rgba(255, 210, 90, .5); }
.pl-waits::before { content: ""; position: absolute; inset: -3px; border-radius: 14px; padding: 3px;
  background: linear-gradient(135deg, #ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #8a6bff, #ff4dd8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.pl-waits.float, .pl-veil.float { position: fixed; z-index: 40; }
.pl-waits.float { flex-direction: column; gap: 5px; padding: 7px 8px 8px; animation: pwIn .35s cubic-bezier(.2, 1.3, .4, 1) both; }
.pl-waits .pw-l { font: 900 15px/1 "M PLUS Rounded 1c", sans-serif; color: #ffe27a; -webkit-text-stroke: 4px #3a0a30; paint-order: stroke fill; letter-spacing: 2px; }
.pl-waits .pw-t { display: grid; grid-template-columns: 1fr; gap: 4px; }
.pl-waits.many .pw-t { grid-template-columns: 1fr 1fr; }
.pl-waits .pw-t .tile { box-shadow: var(--tile3d), 0 0 0 2px #ffd34d, 0 0 10px rgba(255, 211, 77, .8); }
@keyframes pwIn { from { opacity: 0; transform: translateY(-8px) scale(.85); } }

/* 天の羽衣：浄玻璃の鏡を弾いて、手牌を見せない。最初の1回だけ、鏡が飛んできて弾き返される */
.pl-veil { display: flex; align-items: center; gap: 7px; padding: 6px 10px 6px 6px; border-radius: 12px; pointer-events: none;
  background: linear-gradient(180deg, #fbf6ff, #e6dcff); border: 2px solid #b79cff; box-shadow: 0 6px 16px rgba(0, 0, 0, .55), 0 0 14px rgba(190, 160, 255, .7); }
.pl-veil .pv-ic { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none; border: 2px solid #fff; box-shadow: 0 0 0 2px #8a6bff; background: #ddd; }
.pl-veil .pv-ic img { width: 100%; height: 100%; object-fit: cover; }
.pl-veil .pv-tx { display: flex; flex-direction: column; line-height: 1.15; }
.pl-veil .pv-tx b { font: 900 14px/1.1 "M PLUS Rounded 1c", sans-serif; color: #3a1f7a; }
.pl-veil .pv-tx small { font: 800 12px/1.2 "M PLUS Rounded 1c", sans-serif; color: #c0245a; }
.pl-veil .pv-mirror { position: absolute; left: 4px; top: 50%; width: 34px; height: 46px; margin-top: -23px; object-fit: cover; border-radius: 4px; border: 2px solid #fff; box-shadow: 0 0 10px rgba(120, 200, 255, .9); opacity: 0; }
.pl-veil .pv-ring { position: absolute; left: 6px; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 16px #b79cff; opacity: 0; }
.pl-waits.still { animation: none; }
.pl-veil.bounce { animation: pvShake .5s calc(var(--pvd, 0ms) + .55s) ease-out both; }
.pl-veil.bounce .pv-mirror { animation: pvMirror 1.3s cubic-bezier(.3, .7, .4, 1) var(--pvd, 0ms) both; }
.pl-veil.left.bounce .pv-mirror { animation-name: pvMirrorL; }
.pl-veil.bounce .pv-ring { animation: pvRing .6s calc(var(--pvd, 0ms) + .5s) ease-out both; }
@keyframes pvMirror { 0% { opacity: 0; transform: translate(-160px, 10px) rotate(-30deg) scale(1.3); } 15% { opacity: 1; }
  40% { opacity: 1; transform: translate(-6px, 0) rotate(0) scale(1); } 100% { opacity: 0; transform: translate(-140px, -70px) rotate(-200deg) scale(.6); } }
@keyframes pvMirrorL { 0% { opacity: 0; transform: translate(180px, 10px) rotate(30deg) scale(1.3); } 15% { opacity: 1; }
  40% { opacity: 1; transform: translate(10px, 0) rotate(0) scale(1); } 100% { opacity: 0; transform: translate(170px, -70px) rotate(200deg) scale(.6); } }
@keyframes pvRing { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(2.4); } }
@keyframes pvShake { 0%, 100% { transform: none; } 25% { transform: translateX(6px) rotate(2deg); } 60% { transform: translateX(-3px); } }

/* 背景の星：画面の4倍の層を回すと、iPhone で毎コマの描き直しが重くなり、牌を押した反応まで遅れる。画面と同じ大きさで止めておく */
body.in-game::after { left: 0; top: 0; width: 100%; height: 100%; animation: none; will-change: auto; transform: none; }
.stage-petal { box-shadow: none; will-change: transform, opacity; }
body.cardfly > .myhandcards { z-index: 29; }

/* カード購入：卓の外の暗幕の上に、卓と同じ大きさで出す */
.buyshade.buyov { position: fixed; inset: 0; z-index: 45; background: rgba(4, 2, 12, .62); animation: shadeIn .3s ease-out both; }
.buyov .buypanel.bp2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%) scale(var(--stg, 1)); transform-origin: 50% 50%; animation: bpov .45s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes bpov { from { opacity: 0; transform: translate(-50%, -54%) scale(calc(var(--stg, 1) * .85)); } }
/* 「カードを引く」の上を流れる光：ボタンの外に出ないよう、ボタンの中で模様だけを動かす（外に待機させない） */
.buypanel.bp3 .bp-c.buy::after { left: 0; right: 0; width: auto; top: 0; bottom: 0; border-radius: inherit;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%) no-repeat;
  background-size: 300% 100%; background-position: 150% 0; animation: bpSheen2 2.4s ease-in-out infinite; }
@keyframes bpSheen2 { 0%, 55% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
.stage .myhandcards { visibility: hidden !important; }

/* 結果画面（横長）：上の段に大きな手牌、その下に2列 */
.result.res2 > .rs-fit.rs-2col { flex-direction: column; align-items: stretch; gap: 10px; }
.rs-fit.rs-2col > .rs-hand { align-self: center; }
.rs-fit.rs-2col > .rs-cols { display: flex; flex-direction: row; align-items: flex-start; gap: 28px; width: 100%; }
.rs-cols > .rs-col { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; }
.rs-cols > .rs-col.l { flex-grow: 1.2; }
.rs-cols > .rs-col > * { max-width: 100%; }
.rs-cols > .rs-col.r { align-self: center; }
.overlay.res2.draw .rs-cols > .rs-col.l { flex-grow: 1.9; }

/* あがり報酬（作り直し）：小さめの札。縁を虹色の光が回り、金属の文字。卓と同じ縮尺で、手牌に被らない大きさ */
.fx-buy.reward.rw2 { padding: 7px 14px 8px 8px; gap: 9px; border-radius: 999px; overflow: visible; zoom: clamp(.85, calc(var(--stg, 1) * 1.7), 1.25);
  background: radial-gradient(ellipse 70% 120% at 30% 0%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(180deg, #2a1440 0%, #150828 60%, #0b0418 100%);
  border: 0; box-shadow: 0 6px 0 #070210, 0 12px 22px rgba(0, 0, 0, .65), 0 0 28px rgba(255, 140, 230, .45), 0 0 46px rgba(110, 200, 255, .3);
  animation: rw2In .55s cubic-bezier(.2, 1.35, .4, 1) both; }
@keyframes rw2In { from { opacity: 0; transform: translate(-50%, -50%) translateY(18px) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%); } }
.fx-buy.reward.rw2 .rw-rim { position: absolute; inset: -3px; border-radius: inherit; padding: 3px; pointer-events: none;
  background: conic-gradient(from var(--rsA), #ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #8a6bff, #ff4dd8, #ff4d6d);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .8)); animation: rsRun 1.8s linear infinite; }
.fx-buy.reward.rw2 .rw-shine { border-radius: inherit; overflow: hidden; }
.fx-buy.reward.rw2 .w { width: 30px; height: 30px; font-size: 16px; flex: none; }
.fx-buy.reward.rw2 .rw-body { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; gap: 2px; }
.fx-buy.reward.rw2 .n { font-size: 11px; letter-spacing: 1px; color: #e9dcff; text-shadow: 0 1px 2px #000; }
.fx-buy.reward.rw2 .t { font-size: 22px; letter-spacing: 3px; line-height: 1.05;
  background: linear-gradient(90deg, #ff8aa0, #ffd27a, #fff58a, #8affb0, #8ae4ff, #b49aff, #ff9ae6, #ff8aa0) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0;
  filter: drop-shadow(0 2px 0 #1a0630) drop-shadow(0 0 6px rgba(255, 255, 255, .55)); animation: rw2Hue 2.4s linear infinite; }
@keyframes rw2Hue { to { background-position: 200% 0; } }
.fx-buy.reward.rw2 .c { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 7px; border-radius: 999px; font-size: 14px; letter-spacing: 1px;
  background: linear-gradient(180deg, #ffe680, #e0a018 55%, #a86808); color: #3a1a00; text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 0 #5a3402; }
.fx-buy.reward.rw2 .rw-card { width: 13px; height: 18px; border-radius: 2px; background: repeating-linear-gradient(45deg, #7a1a22 0 3px, #5a1018 3px 6px);
  box-shadow: 0 0 0 1.5px #fff1b8; transform: rotate(-8deg); }
.fx-buy.reward.rw2.bonus .t { font-size: 18px; }

/* 結果の点数（作り直し）：1人1行。左から 顔・名前、前→今の点数、増減。どの画面でも文字が切れない固定の大きさ */
.rs-deltas, .rs-deltas.four { display: flex !important; flex-direction: column; gap: 6px; width: 100%; min-width: 300px; }
.rs-deltas .rs-dcell { display: grid !important; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 6px 10px !important; min-width: 0; container-type: normal; }
.rs-deltas .rs-dcell .rs-av { width: 36px !important; height: 36px !important; grid-row: 1 / span 2; }
.rs-deltas .rs-dtx { display: contents; }
.rs-deltas .rs-dhead { display: contents; }
.rs-deltas .rs-dname { grid-column: 2; grid-row: 1; font: 800 13px/1.1 "Shippori Mincho B1", serif !important; color: #fff3c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rs-deltas .rs-pline { grid-column: 2; grid-row: 2; display: flex; align-items: baseline; gap: 5px; margin: 0 !important; zoom: 1 !important; white-space: nowrap; min-width: 0; }
.rs-deltas .rs-before { font: 700 12px/1 "M PLUS Rounded 1c", sans-serif !important; color: rgba(255, 255, 255, .6); }
.rs-deltas .rs-arrow { font-size: 11px; color: rgba(255, 255, 255, .5); }
.rs-deltas .rs-now { font: 900 20px/1 "M PLUS Rounded 1c", sans-serif !important; min-width: 0 !important; letter-spacing: .3px; }
.rs-deltas .rs-ten { font-size: 11px; color: rgba(255, 255, 255, .7); }
.rs-deltas .rs-dval { grid-column: 3; grid-row: 1 / span 2; font: 900 17px/1 "M PLUS Rounded 1c", sans-serif !important; padding: 6px 10px !important; border-radius: 10px; white-space: nowrap; }

/* 「牌を捨ててください」：河に被らないよう、卓の右外（自動ツモ切りの下）に出す。
   右の空きが狭い画面でも引いた牌に被らないよう、手牌の段より上に置く */
.stage.wideR .yourturn { left: auto; top: auto; right: calc(16px - var(--xr)); bottom: 128px; transform: none; scale: 1.5; transform-origin: 100% 100%;
  font-size: 15px; padding: 8px 18px 9px; letter-spacing: .12em; animation: ytPulse 1.6s ease-in-out infinite; }
@keyframes ytPulse { 50% { box-shadow: inset 0 0 0 1.5px #fff3c4, 0 0 0 1px #000, 0 0 26px rgba(255, 220, 120, .9); } }
/* 卓の右に空きがない画面：河より下、手牌の向聴の札の横（右寄り）に小さく */
.stage:not(.wideR) .yourturn { top: 562px; left: auto; right: 150px; transform: none; font-size: 14px; padding: 5px 14px 6px; }

/* ---------------------------------------------------------------- ドラ（作り直し）：あがり牌のオーラと同じ、牌を囲む光の輪。色は金色がかった黄色。
   輪は止めたまま、外の光だけをゆっくり明滅させる（輪の色を回すと毎コマ描き直しになって、iPhone で重くなるので） */
.tile.isdora { overflow: visible; }
.tile.isdora::before { content: ""; display: block; position: absolute; inset: calc(var(--w) * -.06); border-radius: calc(var(--w) * .17); pointer-events: none; z-index: 3;
  background: none; background-size: auto; mix-blend-mode: normal; filter: none; opacity: 1;
  box-shadow: 0 0 calc(var(--w) * .16) calc(var(--w) * .035) rgba(255, 220, 60, .9), 0 0 calc(var(--w) * .42) calc(var(--w) * .06) rgba(255, 190, 30, .5), inset 0 0 calc(var(--w) * .16) rgba(255, 236, 140, .5);
  animation: doraAura 1.8s ease-in-out infinite; will-change: opacity; }
@keyframes doraAura { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.tile.isdora::after { content: ""; display: block; position: absolute; inset: calc(var(--w) * -.06); border-radius: calc(var(--w) * .17); pointer-events: none; z-index: 4;
  padding: calc(var(--w) * .065); animation: none; filter: none; mix-blend-mode: normal; opacity: 1;
  background: conic-gradient(from 210deg, #ffffff, #ffe45c, #f0a800, #fff3b0, #ffd21f, #ffffff, #e09a00, #ffe680, #ffffff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.hand .tile.isdora { box-shadow: var(--tile3d), 0 0 12px rgba(255, 210, 60, .6); }
/* 選んで浮かせた手牌のドラ：金の選択の縁と重ならないよう、輪は少し外へ */
.hand .tile.isdora.sel::after, .hand .tile.isdora.sel::before { inset: calc(var(--w) * -.09); }
@media (prefers-reduced-motion: reduce) { .tile.isdora::before { animation: none; opacity: .85; } }

/* 手札のカードにも同じ光の輪：アクションカードは緑、カウンターカードは赤 */
.myhandcards .jcard { position: relative; overflow: visible; --aura: 60, 255, 165; --aura2: 40, 230, 150;
  --ring: conic-gradient(from 210deg, #ffffff, #5dffb0, #00c878, #b8ffe2, #2ef0c0, #ffffff, #00b86b, #7dffc6, #ffffff); }
.myhandcards .jcard.counter { --aura: 255, 70, 90; --aura2: 230, 30, 60;
  --ring: conic-gradient(from 210deg, #ffffff, #ff7a8c, #d0102c, #ffc0c8, #ff3a55, #ffffff, #b8001e, #ff8a9a, #ffffff); }
.myhandcards .jcard::before { content: ""; position: absolute; inset: calc(var(--cw) * -.035); border-radius: calc(var(--cw) * .075); pointer-events: none; z-index: 5;
  box-shadow: 0 0 calc(var(--cw) * .09) calc(var(--cw) * .02) rgba(var(--aura), .85), 0 0 calc(var(--cw) * .22) calc(var(--cw) * .03) rgba(var(--aura2), .45);
  animation: doraAura 1.8s ease-in-out infinite; will-change: opacity; }
.myhandcards .jcard::after { content: ""; position: absolute; inset: calc(var(--cw) * -.035); border-radius: calc(var(--cw) * .075); pointer-events: none; z-index: 6;
  padding: calc(var(--cw) * .03); background: var(--ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* 使えないカード（条件未達・相手の番のアクション）は光を弱く */
.myhandcards .handslot.blocked .jcard::before, .myhandcards .handslot.blocked .jcard::after { opacity: .35; animation: none; }
@media (pointer: coarse) { .myhandcards .jcard::before { animation: none !important; } }

/* ---------------------------------------------------------------- シークレット加工（強いカード）
   iPhone で重くならないよう、虹の箔・星の粒・枠はすべて止めた絵にして、動くのは斜めに走る光（位置だけ動かす）1本だけ。
   飛び出す時の裏返しを壊さないよう、カードの置き方（position）は変えない */
.jcard.secret:not(.cardface) { position: relative; }
.jcard.secret { background: linear-gradient(135deg, #fff6d0, #ffd0f0 20%, #c8f0ff 40%, #fff7b0 60%, #d8c8ff 80%, #fff6d0) !important; }
.jcard.secret .jc-name { background: linear-gradient(100deg, #fffdf2, #ffeefa 25%, #eaf8ff 50%, #fffbe0 75%, #f3ecff) !important; }
.jcard.secret .jc-foil { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: .28;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 1) 0 .8px, transparent 1.4px) 0 0 / 11px 13px,
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .9) 0 .6px, transparent 1.1px) 0 0 / 17px 9px,
    linear-gradient(115deg, rgba(255, 77, 109, .5), rgba(255, 184, 77, .5) 18%, rgba(255, 240, 77, .5) 34%, rgba(77, 255, 136, .5) 50%, rgba(77, 210, 255, .5) 66%, rgba(138, 107, 255, .5) 82%, rgba(255, 77, 216, .5)); }
.jcard.secret .jc-text { position: relative; z-index: 4; }
.jcard.secret .jc-artwrap { position: relative; }
.jcard.secret .jc-artwrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .32;
  background: linear-gradient(125deg, #ff4d6d 0%, #ffb84d 18%, #fff04d 34%, #4dff88 50%, #4dd2ff 66%, #8a6bff 82%, #ff4dd8 100%); }
.jcard.secret .jc-glint { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; overflow: hidden; }
.jcard.secret .jc-glint::before { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55) 50%, transparent); transform: translateX(-160%) skewX(-18deg);
  animation: secretGlint2 3.6s ease-in-out infinite; will-change: transform; }
@keyframes secretGlint2 { 0%, 55% { transform: translateX(-160%) skewX(-18deg); } 100% { transform: translateX(330%) skewX(-18deg); } }
/* 手札：虹色の輪（止めた虹）と白い光 */
.myhandcards .jcard.secret { --aura: 255, 255, 255; --aura2: 255, 140, 230;
  --ring: conic-gradient(from 210deg, #ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #8a6bff, #ff4dd8, #ff4d6d); }
.myhandcards .jcard.secret::before { box-shadow: 0 0 calc(var(--cw) * .1) calc(var(--cw) * .025) rgba(255, 255, 255, .85), 0 0 calc(var(--cw) * .24) calc(var(--cw) * .04) rgba(255, 120, 220, .5), 0 0 calc(var(--cw) * .32) calc(var(--cw) * .05) rgba(90, 200, 255, .35); }
@media (prefers-reduced-motion: reduce) { .jcard.secret .jc-glint::before { animation: none; } }

/* 雪女の吐息で凍った人：名札に氷の膜と「凍結 n」の札、手番を休む時は氷の札 */
.plate.frozen { filter: saturate(.6) brightness(.95); box-shadow: inset 0 0 0 2px rgba(190, 240, 255, .9), 0 0 16px rgba(150, 220, 255, .65) !important; }
.plate.frozen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(220, 248, 255, .35), rgba(140, 210, 255, .12) 40%, rgba(255, 255, 255, .25) 70%, rgba(160, 220, 255, .1)); }
.pl-chip.frozen { color: #06324a; background: linear-gradient(180deg, #f0fcff, #9fe2ff 60%, #5cbcf0); box-shadow: 0 0 8px rgba(150, 220, 255, .9); font-weight: 900; }
.fx-frozen { position: fixed; z-index: 37; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 18px 9px; border-radius: 14px; pointer-events: none; white-space: nowrap;
  background: linear-gradient(180deg, rgba(240, 252, 255, .96), rgba(150, 215, 245, .94)); color: #06324a;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #6cc4f0, 0 0 24px rgba(150, 220, 255, .9), 0 10px 18px rgba(0, 0, 0, .45); }
.fx-frozen b { font: 900 24px/1 "Shippori Mincho B1", serif; letter-spacing: .2em; }
.fx-frozen span { font: 800 12px/1 "M PLUS Rounded 1c", sans-serif; letter-spacing: .06em; }
/* カードの説明（右側）：シークレットのカードには虹色の札 */
.cardside .cs-secret { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font: 900 12px/1.3 "M PLUS Rounded 1c", sans-serif; letter-spacing: .06em; color: #1a0a20;
  background: linear-gradient(90deg, #ff8aa0, #ffd27a, #fff58a, #8affb0, #8ae4ff, #b49aff, #ff9ae6); box-shadow: 0 0 10px rgba(255, 160, 230, .7); }

/* スマホ：虹色の輪を回すのは毎コマ描き直しになるので、止めて光らせるだけにする */
@media (pointer: coarse) {
  .buypanel.bp3 .bp-c.buy > .bp-rb, .fx-buy.reward.rw2 .rw-rim, .fx-buy.reward.rw2 .t, .buypanel.bp3 .rs-frame .rs-run, .buypanel.bp3 .rs-gem .dia { animation: none !important; }
}
.stage-petals { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
/* スマホ：手札（いつも画面にある）のカードでは光の筋を走らせない。大きく見る時・引いた時だけ走らせる */
@media (pointer: coarse) { .myhandcards .jcard.secret .jc-glint { display: none; } }

/* 対局中ずっと動いている飾りは、画面の重ね直しが要らない動き（位置・透明度だけ）にする。
   光る縁の明滅（影の大きさを変える動き）は毎コマ描き直しになるので止めて、光ったままにする */
.yourturn, .stage.wideR .yourturn { animation: none; box-shadow: inset 0 0 0 1.5px #fff3c4, 0 0 0 1px #000, 0 0 22px rgba(255, 220, 120, .8); }
.shanten.ready { animation: none; box-shadow: inset 0 0 0 1.5px #fff3c4, 0 0 0 1px #3a2204, 0 0 0 3px #f0cc62, 0 0 24px rgba(255, 215, 110, .9); }
.act.act::after, body.in-game .btn::after { left: 0; animation: btnShine2 3.6s ease-in-out infinite; will-change: transform; }
@keyframes btnShine2 { 0%, 55% { transform: translateX(-180%) skewX(-20deg); } 85%, 100% { transform: translateX(420%) skewX(-20deg); } }
/* 手札で浮かせたカードも、重なりの順番は変えない（見た目と押した時のカードが食い違わないように） */
.myhandcards .handslot.touchlift { z-index: auto; }

/* 結果画面（横長）：欄を画面いっぱいに広げ、余白を詰め、役の文字を大きく */
@media (max-height: 560px) {
  .result.res2 { width: min(880px, 97vw) !important; margin-left: auto !important; margin-right: auto !important; padding: 12px 16px !important; }
  .res2 .rs-yaku { gap: 4px; }
  .res2 .rs-yrow { font-size: 30px !important; line-height: 1.25; }
  .res2 .rs-yrow .yn, .res2 .rs-yrow .yv { font-size: inherit !important; }
  .res2 .rs-title { font-size: 64px; letter-spacing: 14px; }
  .res2 .rs-banner { gap: 4px; }
  .rs-cols { gap: 20px !important; }
  .rs-cols > .rs-col { gap: 8px !important; }
  .rs-cols > .rs-col.r { align-self: flex-start !important; }
}
@media (max-height: 560px) { .rs-cols > .rs-col.l { flex-grow: 1.35 !important; } .rs-cols > .rs-col.l > .rs-hand { align-self: center; } }

/* 流局（横長）：手牌を大きく。待ちは手牌の下の段に、大きめの牌で。余白を詰める */
.dr-row { display: grid !important; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 6px 10px !important; }
.dr-row .rs-av { width: 44px !important; height: 44px !important; }
.dr-who { width: 76px !important; }
.dr-tiles { flex-wrap: wrap !important; row-gap: 4px; overflow: visible !important; }
.dr-tiles .tile { --w: 34px; }
.dr-wait { flex-basis: 100%; margin-left: 0 !important; justify-content: flex-start; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; gap: 4px !important; }
.dr-wait .dr-wl { writing-mode: horizontal-tb !important; font-size: 13px !important; margin-right: 6px !important; padding: 3px 8px; border-radius: 8px; color: #3a2604 !important;
  background: linear-gradient(180deg, #fff3c4, #e7c46a); }
.dr-wait .tile { --w: 30px; box-shadow: 0 0 0 2px rgba(255, 220, 120, .9), 0 0 10px rgba(255, 210, 100, .6); }
.dr-meld { margin-left: 8px !important; }
.dr-rows { gap: 6px !important; }
.overlay.res2.draw .rs-dcell { min-height: 0; }

/* 捨てるカードを選ぶ画面：大きな欄に、5〜6枚が全部見えるように。横長の画面では2列に並べる */
.result.carddiscard { width: min(880px, 96vw); max-width: none; max-height: 94vh; display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; }
.result.carddiscard h2 { margin: 0; font-size: 22px; white-space: nowrap; }
.result.carddiscard .wait-note { margin: 0; }
.result.carddiscard .pickcards { max-height: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@media (max-height: 560px) and (min-aspect-ratio: 3/2) {
  .result.carddiscard .pickcards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
}
.result.carddiscard .row { justify-content: center; }
@media (max-height: 560px) and (min-aspect-ratio: 3/2) {
  .result.carddiscard .pick-item { padding: 6px 8px; gap: 8px; min-height: 0; }
  .result.carddiscard .pk-art { width: 62px; height: 46px; flex: none; }
  .result.carddiscard .pk-name { font-size: 14px; }
  .result.carddiscard .pk-kind { font-size: 10px; padding: 1px 6px; }
  .result.carddiscard .pk-text { font-size: 11px; line-height: 1.35; }
  .result.carddiscard .pk-top { gap: 6px; }
}
.overlay > .result.carddiscard { max-height: calc(100vh - 16px) !important; height: auto; overflow: hidden; }
@media (max-height: 400px) and (min-aspect-ratio: 3/2) {
  .result.carddiscard { padding: 10px 14px; gap: 5px; }
  .result.carddiscard h2 { font-size: 18px; }
  .result.carddiscard .wait-note { font-size: 11px; }
  .result.carddiscard .pk-art { width: 54px; height: 40px; }
  .result.carddiscard .pk-text { font-size: 10.5px; }
  .result.carddiscard .row .btn { padding-block: 6px; }
}
@media (max-height: 400px) and (min-aspect-ratio: 3/2) {
  .result.carddiscard .wait-note { display: none; }
  .result.carddiscard h2::after { content: "（手札は5枚まで）"; font-size: 12px; letter-spacing: 0; margin-left: 8px; opacity: .8; }
}

/* 発動中の効果を見る画面：カードを大きく、横長の画面では説明を右に */
.result.effectview { display: flex; flex-direction: column; align-items: center; gap: 12px; width: auto; max-width: 94vw; padding: 14px 20px; }
.result.effectview.side { flex-direction: row; gap: 24px; }
.effectview .ev-info { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 180px; }
.effectview .ev-who { font: 800 18px/1.3 "Shippori Mincho B1", serif; color: #fff3c4; }
.effectview .ev-left { font: 700 14px/1.5 "M PLUS Rounded 1c", sans-serif; color: rgba(255, 255, 255, .85); text-align: center; }
/* カードログ・墓地（低い横長の画面）：1行を詰めて、2列に並べてたくさん見えるように */
@media (max-height: 440px) and (min-aspect-ratio: 3/2) {
  .result.cardlog2 { width: min(880px, 97vw) !important; max-height: calc(100vh - 16px) !important; padding: 10px 14px 10px !important; gap: 6px !important; }
  .result.cardlog2 .cl-head h2 { font-size: 18px; }
  .result.cardlog2 .cl-tabs .cl-tab { padding: 3px 10px; font-size: 12px; }
  .result.cardlog2 .cl-list { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px 8px !important; align-content: start; min-height: 0 !important; }
  .result.cardlog2 .cl-item { padding: 5px 6px; gap: 8px; }
  .result.cardlog2 .cl-art { width: 58px; height: 42px; }
  .result.cardlog2 .cl-text { font-size: 11px; line-height: 1.4; }
  .result.cardlog2 .grave-note, .result.cardlog2 .cl-hint { display: none; }
  .result.cardlog2 > .btn { padding-block: 5px; }
}
@media (max-height: 440px) and (min-aspect-ratio: 3/2) {
  .result.cardlog2 { display: flex !important; flex-direction: column; overflow: hidden !important; }
  .result.cardlog2 .cl-list { flex: 1 1 auto; overflow-y: auto !important; min-height: 0 !important; }
  .result.cardlog2 > .btn { flex: none; }
}
@media (max-height: 440px) and (min-aspect-ratio: 3/2) {
  .graveview .cl-list > .pickcards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; max-height: none; overflow: visible; }
  .graveview .pick-item { padding: 5px 6px; gap: 8px; }
  .graveview .pk-art { width: 58px; height: 42px; }
  .graveview .pk-name { font-size: 14px; }
  .graveview .pk-text { font-size: 11px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .graveview .pk-check { display: none; }
}
@media (max-height: 440px) and (min-aspect-ratio: 3/2) {
  .graveview .cl-list { display: block !important; }
  .graveview .cl-list > .pickcards { width: 100%; }
}
@media (max-height: 440px) and (min-aspect-ratio: 3/2) {
  .result.cardlog2.graveview .cl-list { display: block !important; grid-template-columns: none; }
}

/* 相手があがって倒した手牌：画面の真ん中に大きく */
.fx-laidshow { position: fixed; left: 50%; top: 46%; z-index: 35; transform: translate(-50%, -50%) scale(var(--k, 1)); transform-origin: 50% 50%;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 18px 16px; border-radius: 16px; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 70, 50, .96), rgba(8, 36, 24, .96)); box-shadow: 0 0 0 2px #f0cc62, 0 0 0 4px #5a3a08, 0 16px 34px rgba(0, 0, 0, .7), 0 0 30px rgba(255, 210, 100, .45); }
.fx-laidshow .ls-who { font: 800 18px/1 "Shippori Mincho B1", serif; color: #fff3c4; letter-spacing: .1em; text-shadow: 0 2px 0 #000; }
.fx-laidshow .ls-row { display: flex; align-items: flex-end; gap: 2px; }
.fx-laidshow .ls-row .tile { --w: 52px; }
.fx-laidshow .ls-win { margin-left: 14px; }

/* ---------- 卓の上のお知らせ（作り直し）：漆の札に金の縁と厚み。文字は白金。新しい時だけすっと出る ---------- */
.events.ev2 { position: relative; min-height: 0; padding: 4px 18px 5px; border-radius: 10px; color: #fff6dc;
  font: 800 13px/1.3 "Shippori Mincho B1", serif; letter-spacing: .08em; white-space: nowrap;
  background: linear-gradient(180deg, #3a1a2e 0%, #1e0c1a 60%, #12060f 100%);
  box-shadow: inset 0 0 0 1px #f0cc62, inset 0 0 0 3px rgba(0, 0, 0, .45), inset 0 1px 0 3px rgba(255, 236, 170, .25), 0 3px 0 #0a0408, 0 5px 10px rgba(0, 0, 0, .55), 0 0 12px rgba(255, 200, 90, .25);
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(255, 210, 120, .45); }
.events.ev2.empty { visibility: hidden; }
.events.ev2::before, .events.ev2::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; transform: rotate(45deg);
  background: linear-gradient(135deg, #fff6c8, #d9a63a); box-shadow: 0 0 4px rgba(255, 210, 100, .9); }
.events.ev2::before { left: 7px; } .events.ev2::after { right: 7px; }
.events.ev2.fresh { animation: ev2In .35s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes ev2In { from { opacity: 0; transform: translateY(-6px) scale(.92); } }

/* カード購入の札：あがり報酬と同じ形（虹ではなく金の縁）、金属の文字、払った点数は赤い札 */
.fx-buy.buy2 { padding: 7px 14px 8px 8px; gap: 9px; border-radius: 999px; overflow: visible; zoom: clamp(.85, calc(var(--stg, 1) * 1.7), 1.25);
  background: radial-gradient(ellipse 70% 120% at 30% 0%, rgba(255, 255, 255, .2), transparent 60%), linear-gradient(180deg, #3a1a10 0%, #200c06 60%, #120603 100%);
  box-shadow: inset 0 0 0 2px #f0cc62, inset 0 0 0 4px rgba(0, 0, 0, .4), 0 0 0 1px #5a3a08, 0 6px 0 #0a0402, 0 12px 22px rgba(0, 0, 0, .65), 0 0 24px rgba(255, 200, 90, .45);
  animation: rw2In .5s cubic-bezier(.2, 1.35, .4, 1) both; text-shadow: none; }
.fx-buy.buy2 .b2-shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 48%, transparent 60%) no-repeat; background-size: 260% 100%; animation: rwShine 1.2s .3s ease-in-out both; }
.fx-buy.buy2 .w { width: 30px; height: 30px; font-size: 16px; flex: none; background: linear-gradient(180deg, #fffbe6, #e8b84a 55%, #9a6412); color: #3a2604; box-shadow: 0 0 0 2px #5a3606; }
.fx-buy.buy2 .b2-body { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; gap: 2px; }
.fx-buy.buy2 .n { font-size: 11px; letter-spacing: 1px; color: #f3dc9a; }
.fx-buy.buy2 .t { font: 900 22px/1.05 "Shippori Mincho B1", serif; letter-spacing: 3px; color: transparent;
  background: linear-gradient(180deg, #fffef0 0%, #ffe680 30%, #ffb800 50%, #8a4a00 54%, #e89a10 75%, #fff2a0 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 0 #2a1204); }
.fx-buy.buy2 .c { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 7px; border-radius: 999px; font: 900 15px/1 "M PLUS Rounded 1c", sans-serif; letter-spacing: .5px;
  color: #fff; background: linear-gradient(180deg, #ff6a78, #c8202c 55%, #7a0a12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 #4a0408; text-shadow: 0 1px 0 #4a0408; }
.fx-buy.buy2 .b2-card { width: 13px; height: 18px; border-radius: 2px; background: repeating-linear-gradient(45deg, #7a1a22 0 3px, #5a1018 3px 6px); box-shadow: 0 0 0 1.5px #fff1b8; transform: rotate(-8deg); }

/* 「カードを引いた！」：同じ漆と金の札、金属の文字 */
.fx-drawword.plate-word, .fx-drawword:not(.small) { padding: 8px 22px 9px; border-radius: 14px; -webkit-text-stroke: 0; color: transparent; letter-spacing: 4px;
  background: radial-gradient(ellipse 70% 120% at 50% 0%, rgba(255, 255, 255, .16), transparent 60%), linear-gradient(180deg, #3a1a2e 0%, #1e0c1a 60%, #12060f 100%);
  box-shadow: inset 0 0 0 2px #f0cc62, inset 0 0 0 4px rgba(0, 0, 0, .4), 0 0 0 1px #5a3a08, 0 6px 0 #0a0408, 0 12px 22px rgba(0, 0, 0, .6), 0 0 22px rgba(255, 200, 90, .4); text-shadow: none; }
.fx-drawword.plate-word > span, .fx-drawword:not(.small) > span { color: transparent;
  background: linear-gradient(180deg, #fffef0 0%, #ffe680 30%, #ffb800 50%, #8a4a00 54%, #e89a10 75%, #fff2a0 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 0 #2a1204); }
.fx-drawword.plate-word .pw-who { color: transparent; }


/* ---------- お知らせの札（見やすさ優先）：明るい和紙の地に、濃い墨の文字。縁は金、下に厚み ---------- */
.events.ev2 { color: #2a1a08; text-shadow: none; font: 800 13px/1.3 "M PLUS Rounded 1c", sans-serif; letter-spacing: .04em;
  background: linear-gradient(180deg, #fffaf0 0%, #f6ecd2 100%);
  box-shadow: inset 0 0 0 1.5px #c9993c, 0 2px 0 #8a6424, 0 4px 8px rgba(0, 0, 0, .45); }
.events.ev2::before, .events.ev2::after { background: #c9993c; box-shadow: none; }

.fx-buy.buy2 { background: linear-gradient(180deg, #fffaf0 0%, #f4e6c4 100%);
  box-shadow: inset 0 0 0 2px #c9993c, 0 0 0 2px #6a4610, 0 5px 0 #6a4610, 0 10px 18px rgba(0, 0, 0, .55); }
.fx-buy.buy2 .n { color: #6a4a20; font-weight: 800; font-size: 12px; text-shadow: none; }
.fx-buy.buy2 .t { color: #3a1f04; background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none; font-size: 24px; }
.fx-buy.buy2 .b2-shine { background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .7) 48%, transparent 60%) no-repeat; background-size: 260% 100%; }

.fx-drawword.plate-word, .fx-drawword:not(.small) { background: linear-gradient(180deg, #fffaf0 0%, #f4e6c4 100%);
  box-shadow: inset 0 0 0 2px #c9993c, 0 0 0 2px #6a4610, 0 5px 0 #6a4610, 0 10px 18px rgba(0, 0, 0, .55); }
.fx-drawword.plate-word > span, .fx-drawword:not(.small) > span { color: #3a1f04; background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none; }
.fx-drawword.plate-word .pw-who { color: #8a1a10; margin-right: 8px; }

/* あがり報酬も同じ明るい札に（虹の縁はそのまま） */
.fx-buy.reward.rw2 { background: linear-gradient(180deg, #fffaf0 0%, #f4e6c4 100%); }
.fx-buy.reward.rw2 .n { color: #6a4a20; text-shadow: none; font-weight: 800; }
.fx-buy.reward.rw2 .t { color: #3a1f04; background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none; animation: none; }
.fx-buy.buy2 .w, .fx-buy.reward.rw2 .w { background: radial-gradient(circle at 35% 30%, #5a3a1a, #2a1608); color: #fff3c4; box-shadow: 0 0 0 2px #c9993c; }

/* 相手があがって倒した手牌：卓の上のまま、卓からはみ出さない一番大きい大きさに（ふだんの約1.4倍） */
.opphand.laid .tile { --w: 36px; }
.peekbtn { animation: none !important; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #6a2ad8, 0 4px 0 4px #24085a, 0 0 22px rgba(200, 160, 255, .9); }

/* 軽量モード：止まった飾りだけ残し、重い光や動きを外す */
body.lite.in-game::before, body.lite.in-game::after { display: none !important; }
body.lite .tile.isdora::before, body.lite .tile.isdora::after { animation: none !important; box-shadow: 0 0 0 2px rgba(255, 210, 60, .95) !important; background: none !important; padding: 0 !important; -webkit-mask: none !important; mask: none !important; }
body.lite .myhandcards .jcard:not(.secret)::before { display: none !important; }
/* シークレットの箔と虹は止まっている絵なので、軽量モードでも残す。走る光の筋だけ外す */
body.lite .jc-glint { display: none !important; }
body.lite .fx-cutin .ci-canvas, body.lite .fx-winbeams, body.lite .rs-rays, body.lite .rs-sparks, body.lite .fx-sv-spark { display: none !important; }
body.lite .fx-cutin .ci-art, body.lite .fx-cutin .ci-word.mt { filter: none !important; }
body.lite *, body.lite *::before, body.lite *::after { text-shadow: none !important; }
body.lite .act.act::after, body.lite body.in-game .btn::after, body.lite .btn::after { animation: none !important; display: none !important; }

/* 自分の発動中のカード：大きくした分、3枚以上は少し重ねる */
.activecol.mine.many .activecard + .activecard { margin-left: -34px; }
.activecol.mine .activetitle { font-size: 14px; }
/* 左右の相手では、羽衣の札を縦長にして、発動中のカードと手牌の間に収める */
.pl-veil.float.left, .pl-veil.float.right { flex-direction: column; gap: 3px; padding: 6px 5px 5px; text-align: center; }
.pl-veil.float.left .pv-tx, .pl-veil.float.right .pv-tx { align-items: center; }
.pl-veil.float.left .pv-tx b, .pl-veil.float.right .pv-tx b { font-size: 12px; }
.pl-veil.float.left .pv-tx small, .pl-veil.float.right .pv-tx small { font-size: 10.5px; }
.pl-veil.float.left .pv-mirror, .pl-veil.float.right .pv-mirror, .pl-veil.float.left .pv-ring, .pl-veil.float.right .pv-ring { left: 50%; top: 26px; margin-left: -18px; }
/* 横長の結果画面：「ロン」と誰の和了かを横1列に、役は3つ以上なら2列にして縦を詰める（空いた分だけ全体を大きく出す） */
.rs-cols > .rs-col.l > .rs-banner { flex-direction: row; gap: 16px; }
.rs-cols > .rs-col.l > .rs-banner .rs-title { margin: 0; }
.rs-cols .rs-yaku.two { display: grid; grid-template-columns: auto auto; grid-auto-flow: column; column-gap: 34px; row-gap: 4px; }
.rs-cols > .rs-col.l > .rs-banner .rs-title { white-space: nowrap; writing-mode: horizontal-tb; flex: none; }
.rs-cols > .rs-col.l > .rs-banner .rs-who { flex-wrap: nowrap; white-space: nowrap; }
/* 横長の結果画面の右の列：点数の欄を低くして、左の列とつり合わせる（その分、全体を大きく出せる） */
.rs-cols > .rs-col.r { gap: 6px; }
.rs-cols .rs-deltas { gap: 4px; }
.rs-cols .rs-deltas .rs-dcell { padding: 3px 10px !important; }
.rs-cols .rs-deltas .rs-dcell .rs-av { width: 30px !important; height: 30px !important; }
.rs-cols .rs-dora { padding: 4px 10px; }
.rs-cols > .rs-col.l { align-self: stretch; justify-content: space-evenly; }
/* 千里眼：見た時にテンパイなら、待ちの牌を金の枠で大きく */
.peekview .pk-waits { flex: none; margin-top: 8px; display: flex; align-items: center; gap: 12px; padding: 6px 14px 6px 12px; border-radius: 12px;
  background: linear-gradient(180deg, #fff6d6, #ffe08a); border: 2px solid #c98a12; box-shadow: 0 0 16px rgba(255, 200, 60, .6); }
.peekview .pk-wl { font: 900 17px/1 "M PLUS Rounded 1c", sans-serif; color: #8a1a1a; white-space: nowrap; }
.peekview .pk-wt { display: flex; gap: 4px; }
.peekview .pk-wt .tile { --w: 42px; box-shadow: var(--tile3d), 0 0 0 2px #e0a020; }
.peekview .pk-nowait { font: 700 13px/1.2 "M PLUS Rounded 1c", sans-serif; color: rgba(255, 255, 255, .7); }
/* CPU の「カードを引いた！」：大きすぎたので、名札のそばに収まる小さめの札にする（画面の大きさに合わせて少しだけ伸び縮み） */
.fx-drawword.plate-word { font-size: clamp(13px, calc(var(--stg, 1) * 25px), 17px); letter-spacing: 2px; padding: .33em .85em .4em; border-radius: 10px; zoom: 1;
  box-shadow: inset 0 0 0 1.5px #c9993c, 0 0 0 1.5px #6a4610, 0 3px 0 #6a4610, 0 6px 12px rgba(0, 0, 0, .5); }
.fx-drawword.plate-word .pw-who { margin-right: 6px; }
/* 向かいの人の待ち：横1列 */
.pl-waits.float.top { flex-direction: row; gap: 7px; padding: 6px 9px 7px; }
.pl-waits.float.top .pw-t { display: flex; gap: 3px; }
.pl-waits.float.top .pw-t .tile { --w: 28px; }
.pl-waits.float.left .pw-t .tile, .pl-waits.float.right .pw-t .tile { --w: 30px; }
/* 名札の点滅：光（影）を毎コマ描き直すと iPhone が熱を持って重くなる。光の強弱を2段で切り替えるだけにする（描き直しは1秒に数回） */
.seatlab.flash, .plate.flash { animation-timing-function: steps(1, end); }
/* 羽衣が鏡を弾く動き：鏡を大きく、ゆっくり見せる */
.pl-veil .pv-mirror { width: 44px; height: 60px; margin-top: -30px; }
.pl-veil.float.left .pv-mirror, .pl-veil.float.right .pv-mirror { margin-left: -22px; top: 22px; }
.pl-veil.bounce .pv-mirror { animation-duration: 1.7s; }
.pl-veil.bounce .pv-ring { animation: pvRing2 .8s calc(var(--pvd, 0ms) + .62s) ease-out both; border-width: 5px; }
@keyframes pvRing2 { 0% { opacity: 1; transform: scale(.5); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes pvMirror { 0% { opacity: 0; transform: translate(-170px, 20px) rotate(-30deg) scale(1.4); } 8% { opacity: 1; }
  38% { opacity: 1; transform: translate(-4px, 0) rotate(0) scale(1.05); } 46% { transform: translate(-14px, -6px) rotate(-12deg) scale(1.1); }
  100% { opacity: 0; transform: translate(-150px, -90px) rotate(-260deg) scale(.5); } }
@keyframes pvMirrorL { 0% { opacity: 0; transform: translate(190px, 20px) rotate(30deg) scale(1.4); } 8% { opacity: 1; }
  38% { opacity: 1; transform: translate(4px, 0) rotate(0) scale(1.05); } 46% { transform: translate(14px, -6px) rotate(12deg) scale(1.1); }
  100% { opacity: 0; transform: translate(170px, -90px) rotate(260deg) scale(.5); } }
.pl-veil.bounce { animation: pvShake .5s calc(var(--pvd, 0ms) + .62s) ease-out both; }
/* 天の羽衣のカード自身が、浄玻璃の鏡を一瞬はじき返す：押し返すように揺れて、白い光の輪が広がる（変形と透明度だけ） */
.activecard.repel { position: relative; animation: repelCard .7s var(--pvd, 0ms) cubic-bezier(.2, 1.4, .4, 1) both; }
.activecard.repel::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  border: 4px solid #fff; box-shadow: 0 0 18px #c9b3ff, inset 0 0 14px #c9b3ff; transform: translate(-50%, -50%) scale(.3); opacity: 0;
  animation: repelRing .7s var(--pvd, 0ms) ease-out both; }
@keyframes repelCard { 0% { transform: none; } 18% { transform: scale(1.18) rotate(-4deg); } 40% { transform: scale(.94) rotate(3deg); } 65% { transform: scale(1.05); } 100% { transform: none; } }
@keyframes repelRing { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.3); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); } }
/* 右の列も上下いっぱいに広げて、下に余白を残さない */
.rs-cols > .rs-col.r { align-self: stretch !important; justify-content: space-evenly; }
/* 自分がカードを引いた時の「カードを1枚引いた！」：真ん中のカードのすぐ上に、程々の大きさで */
.fx-drawword.mid-word { z-index: 37; font-size: clamp(16px, calc(var(--stg, 1) * 32px), 22px); letter-spacing: 3px; padding: .32em .8em .36em; border-radius: 12px; white-space: nowrap; }
/* 軽量モードのボタン：鳴きの上に */
.autobtn.litebtn { top: auto; bottom: 8px; }
/* 横長：右下の角（自動ツモ切りの下、手牌の右）。右上は自分の発動中のカードと千里眼で埋まるので */
.stage.wideR .autobtn.litebtn { top: auto; bottom: 14px; scale: 1.15; min-width: 0; }
/* 右に余白がない画面（iPhone SE の横向きなど）：軽量モードは右上の空いている所に置く（右下はツモ牌、手牌の上は北抜き・カンのボタンと重なる） */
.stage:not(.wideR) .autobtn.litebtn { top: 180px; bottom: auto; height: 30px; }
/* 結果画面の点数：数字は縮めない（最後の桁が切れたり「点」が重なったりしないように）。足りない時は前の点数の方を縮める */
.rs-deltas .rs-now, .rs-dcell .rs-now { flex-shrink: 0; min-width: max-content !important; }
.rs-deltas .rs-before, .rs-dcell .rs-before { flex-shrink: 0; }
.rs-deltas .rs-pline { gap: 3px; }
.rs-deltas .rs-now { font-size: 18px !important; }
.rs-pline .rs-ten { flex-shrink: 0; }
/* 相手の待ちの札は、小窓（メニュー・カードログ・確認など）の上には出さない */
body:has(#app .overlay:not(.cardzoom)) > .pl-waits, body:has(#app .overlay:not(.cardzoom)) > .pl-veil { visibility: hidden; }
/* カウンターの連鎖の帯：暗い赤の上でも読めるように */
.chainbar { color: #fff; background: rgba(90, 6, 16, .92); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
/* 右に余白がある画面：千里眼のボタンは「鳴き」の上に置く（重なって押せなくならないように） */
.stage.wideR .peekbtn { left: auto; top: auto; right: calc(16px - var(--xr)); bottom: 344px; scale: 1.3; transform-origin: 100% 100%; }
/* 小さく見えるボタンも押しやすく：見た目はそのままで、押せる範囲を少し広げる */
.topinfo .toolbtn::after, .toolbtn.autobtn::after { content: ""; position: absolute; inset: -8px -2px; }
.toolbtn.autobtn::after { inset: -1px -10px; }
/* ロン・ツモの大きなボタンと一緒に鳴きの選択が出る時は、ボタンの下（手牌のすぐ上）に並べる（PUSH や自動ツモ切りを覆わない） */
.bigwin ~ .claimbar { top: 524px; scale: .9; transform-origin: 100% 0; }
.stage:not(.wideR) .bigwin ~ .claimbar { top: 532px; }
/* しもべの影と光：揺れる絵に filter を付けると、iPhone で描画用のメモリが飛ぶたびに増えていくので、
   filter はやめて、下に置いた楕円の影と、後ろのぼんやりした光（ただの塗り）で見せる */
.fx-servant .sv-body svg { filter: none !important; }
.fx-servant .sv-body { position: relative; }
.fx-servant .sv-body::before { content: ""; position: absolute; inset: -14%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 240, 200, .38), rgba(255, 240, 200, 0) 65%); }
.fx-servant .sv-body::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -10%; height: 14%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0) 70%); }

/* カットインの中身（帯・妖怪・名札・文字）。その人の側へ寄せて出す（位置は shout.js で決める） */
.fx-cutin .ci-stage { position: absolute; inset: 0; z-index: 1; transform-origin: 50% 50%; }
/* 妖怪の絵：帯の高さに収まる大きさで、帯の前に出す。名前と「リーチ／ロン／ツモ」の文字のすぐ横に並べる
   （右の人は 文字｜絵、ほかは 絵｜文字。帯が傾いている分、絵の上下も帯に合わせる） */
.fx-cutin .ci-art { z-index: 2; top: 50%; height: 40vh; width: 30vw; background-position: center center; }
.fx-cutin.from0 .ci-art, .fx-cutin.from2 .ci-art, .fx-cutin.from3 .ci-art { left: auto; right: calc(50% + 1.5vw); margin-top: -20vh; }
.fx-cutin.from1 .ci-art { right: auto; left: calc(50% + 1.5vw); margin-top: -20vh; }
.fx-cutin .ci-plate, .fx-cutin .ci-word { z-index: 3; }
/* カットインのアイコン：その人のアイコンを、虹色の輪の付いた丸で（帯の高さに収める） */
.fx-cutin .ci-art { display: flex; align-items: center; justify-content: center; width: 40vh; }
.fx-cutin .ci-pic { position: relative; display: block; height: 100%; aspect-ratio: 1; border-radius: 50%; padding: 1vh;
  background: conic-gradient(from 200deg, #ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #8a6bff, #ff4dd8, #ff4d6d);
  box-shadow: 0 0 2vh rgba(255, 255, 255, .6), 0 0 4vh rgba(255, 130, 230, .45); }
.fx-cutin .ci-pic img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #2a1d4a; box-shadow: inset 0 0 0 .4vh #fff; border: .5vh solid #fff; box-sizing: border-box; }
.fx-cutin .ci-art { filter: none; }
.fx-cutin.from0 .ci-art, .fx-cutin.from2 .ci-art, .fx-cutin.from3 .ci-art { right: calc(50% + 9vw); }
.fx-cutin.from1 .ci-art { left: calc(50% + 9vw); }   /* 文字とのあいだを空ける */
/* ロン・ツモの帯の縁は虹色（リーチは金のまま） */
.fx-cutin:not(.riichi) .ci-band, .fx-cutin.fx-cutin:not(.riichi) .ci-band {
  border-image: linear-gradient(90deg, #ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #8a6bff, #ff4dd8, #ff4d6d, #ffb84d, #fff04d, #4dff88, #4dd2ff, #8a6bff, #ff4dd8) 1; }
/* アイコンは帯の中（帯の傾きを打ち消す入れ物）に置いて、帯と一緒に動かす。帯の外の光は切らない */
.fx-cutin .ci-band, .fx-cutin.fx-cutin .ci-band { overflow: visible; }
.fx-cutin .ci-sheen { overflow: hidden; }
.fx-cutin .ci-artwrap { position: absolute; top: 0; bottom: 0; left: 30vw; right: 30vw; transform: skewY(6deg); z-index: 2; }
/* アイコンを帯の中心線に乗せる：帯は −6° 傾いているので、真ん中から横に離れた分（9vw＋アイコンの半分 20vh）だけ上下をずらす（tan6° ≒ 0.1051） */
.fx-cutin.from0 .ci-art, .fx-cutin.from2 .ci-art, .fx-cutin.from3 .ci-art { margin-top: calc(-20vh + 0.1051 * (9vw + 20vh)); }
.fx-cutin.from1 .ci-art { margin-top: calc(-20vh - 0.1051 * (9vw + 20vh)); }
/* 公開された相手の手牌（浄玻璃の鏡など）：鳴き牌・抜いた北もある時は、列が長くなって名札の下に隠れるので、牌を少し小さくして卓の上に収める */
.opprow.tight .opphand.opened .sz-river, .opprow.tight .oppmeld .sz-river, .opprow.tight .nukirow .sz-river { --w: var(--openw, 27px); }
/* 自分の名札：右下（カードの裏の並びは手札があるので出さない）。軽量モードのボタンは鳴きの上へ */
.plate.mine { top: auto; bottom: 10px; right: 14px; z-index: 6; }
.plate.mine .pl-fan { display: none; }
.stage.wideR .plate.mine { right: calc(16px - var(--xr)); bottom: 12px; }
.stage.wideR .autobtn.litebtn { bottom: 344px; }
.stage.wideR .yourturn { bottom: 116px; }
/* 卓の右に空きがない画面：右下は手牌があるので、鳴きボタンの上の空いている所に少し小さく置く */
.stage:not(.wideR) .plate.mine { top: 300px; bottom: auto; scale: .72; transform-origin: 100% 0; }
/* 音量のバー：自前の見た目にして、100% の時はつまみと金色の線が右の端まで届くようにする */
.volslider input[type=range] { -webkit-appearance: none; appearance: none; height: 26px; margin: 0; padding: 0; background: transparent; cursor: pointer; border: 0; outline: none; box-shadow: none; border-radius: 0; }
.volslider input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #f6d77a, #e0a83a) 0 0 / var(--p, 100%) 100% no-repeat, rgba(255, 255, 255, .18); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.volslider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #fff3c4 45%, #e7c46a); border: 2px solid #b8801c; box-shadow: 0 2px 5px rgba(0, 0, 0, .5); }
.volslider input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
.volslider input[type=range]::-moz-range-progress { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #f6d77a, #e0a83a); }
.volslider input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #fff3c4 45%, #e7c46a); border: 2px solid #b8801c; }
/* カットインの名前の札：丸いアイコンの下の縁に重ねて出す（札の中の小さいアイコンは、大きいアイコンと同じなので出さない） */
.fx-cutin .ci-art .ci-plate { position: absolute; top: auto; bottom: -1.5vh; left: 50%; right: auto; margin: 0; translate: -50% 0; z-index: 3; white-space: nowrap;
  padding: .6vh 2.2vh; border-radius: 999px; background: linear-gradient(180deg, rgba(40, 14, 30, .95), rgba(14, 6, 22, .95)); box-shadow: 0 0 0 .3vh #f0cc62, 0 .6vh 1.6vh rgba(0, 0, 0, .6); }
.fx-cutin .ci-art .ci-plate .ci-av { display: none; }
.fx-cutin .ci-art .ci-plate .ci-name { font-size: 4.2vh; }
/* 役満のツモ・ロン：帯そのものを虹色に（上下を少し暗くして、文字とアイコンを読みやすく） */
.fx-cutin.yakuman .ci-band, .fx-cutin.fx-cutin.yakuman .ci-band {
  background: linear-gradient(180deg, rgba(10, 4, 20, .55), rgba(10, 4, 20, 0) 28%, rgba(10, 4, 20, 0) 72%, rgba(10, 4, 20, .55)),
    linear-gradient(100deg, #ff3d6e, #ff9a3d 16%, #ffe23d 32%, #3dff8a 48%, #3dc8ff 64%, #8a5cff 80%, #ff3dd0);
  box-shadow: 0 0 4vh rgba(255, 255, 255, .55), 0 0 8vh rgba(255, 120, 230, .45), inset 0 0 6vh rgba(0, 0, 0, .35); }
/* リーチする牌を選ぶ時の待ち：牌の下に残り枚数、最後に合計 */
.riichiwaits .rw-tile { display: inline-flex; flex-direction: row; align-items: center; gap: 3px; margin-right: 4px; }
.riichiwaits .rw-tile small { font: 900 15px/1 "M PLUS Rounded 1c", sans-serif; color: #5a2a00; white-space: nowrap; }
.riichiwaits .rw-total { font: 900 16px/1 "M PLUS Rounded 1c", sans-serif; color: #b0180c; margin-left: 4px; white-space: nowrap; }
/* 右の切り替えボタン（鳴き・自動ツモ切り・軽量モード）：名札（えんじ色に金の縁の四角い札）と見分けやすいよう、
   丸みのある紺のガラスに銀青の縁、ON は緑に光る札にする */
.stage .toolbtn.autobtn { border-radius: 999px; padding: 0 12px 0 12px; color: #e6f3ff; font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; letter-spacing: .5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 52%), linear-gradient(160deg, #1f4068, #12263f 60%, #0b1728);
  border: 1.5px solid #86bce8; box-shadow: inset 0 0 0 1px rgba(200, 230, 255, .22), inset 0 -3px 6px rgba(0, 0, 0, .4), 0 4px 10px rgba(0, 0, 0, .5); }
.stage .toolbtn.autobtn .ti { color: #a8dcff; }
.stage .toolbtn.autobtn:not(.off) { border-color: #9fe6ff; box-shadow: inset 0 0 0 1px rgba(210, 240, 255, .35), 0 0 12px rgba(110, 200, 255, .45), 0 4px 10px rgba(0, 0, 0, .5); }
.stage .toolbtn.autobtn .sw { color: #9fb4c8; background: #0a1522; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8); }
.stage .toolbtn.autobtn .sw.on { color: #04281e; background: linear-gradient(180deg, #c8fff0, #48dcb0 60%, #179070); box-shadow: 0 0 10px rgba(80, 230, 180, .8); }
.stage .toolbtn.autobtn.off { filter: none; opacity: .9; }
.stage .toolbtn.autobtn.off .ti { color: #7f9ab3; }
/* 四麻：右の人の名札の位置（top: 150px）が自分の名札にかからないようにする。手牌が横に長いので、自分の名札は少し小さく右下に */
.stage.four .plate.mine { top: auto; }
.stage.four.wideR .plate.mine { scale: .74; transform-origin: 100% 100%; }
.stage.four:not(.wideR) .plate.mine { top: 300px; }
/* 対面（卓を180°回している人）の牌：下に付けた厚みと影が、回すと画面の上に出てしまうので、逆向きに付け直して手前（画面の下）に出す */
.rot.across .tile.lay {
  box-shadow:
    inset 0 0 0 1px rgba(90, 75, 40, .32),
    inset 0 calc(var(--w) * -.05) calc(var(--w) * .03) rgba(255, 255, 255, .9),
    inset calc(var(--w) * -.05) 0 calc(var(--w) * .05) rgba(255, 255, 255, .55),
    inset calc(var(--w) * .06) 0 calc(var(--w) * .07) rgba(120, 100, 60, .16),
    inset 0 calc(var(--w) * .08) calc(var(--w) * .08) rgba(120, 100, 60, .26),
    0 calc(var(--w) * -.02) 0 #bfb08a,
    0 calc(var(--w) * -.06) 0 #f6f1e2,
    0 calc(var(--w) * -.1) 0 #e8dfc6,
    0 calc(var(--w) * -.14) 0 #d2c49f,
    0 calc(var(--w) * -.16) 0 #8fbdf3,
    0 calc(var(--w) * -.2) 0 #3d82d6,
    0 calc(var(--w) * -.24) 0 #24589f,
    0 calc(var(--w) * -.27) 0 #13336a,
    calc(var(--w) * -.03) calc(var(--w) * -.34) calc(var(--w) * .16) rgba(0, 0, 0, .55) !important;
  margin-bottom: 0; margin-top: calc(var(--w) * .3);
}
.rot.across .side > .tile.lay {
  box-shadow:
    inset 0 0 0 1px rgba(70, 85, 110, .3),
    inset -2px 2px 3px rgba(255, 255, 255, .95),
    inset 3px -2px 5px rgba(60, 75, 100, .3),
    calc(var(--w) * -.07) 0 0 #e4e8ee,
    calc(var(--w) * -.13) 0 0 #c3cad4,
    calc(var(--w) * -.16) 0 0 #2f72c8,
    calc(var(--w) * -.22) 0 0 #143f80,
    calc(var(--w) * -.3) calc(var(--w) * .05) calc(var(--w) * .2) rgba(0, 0, 0, .5) !important;
  margin: 0;
}
/* 対局の準備（部屋）：左上にいつも「部屋を出る」 */
.lobby-leave { position: fixed; z-index: 30; left: max(12px, env(safe-area-inset-left, 0px)); top: max(10px, env(safe-area-inset-top, 0px)); }