/* ============ 三夜 · 牌桌剧场 ============ */
:root {
  --bg: #0d0f13;
  --felt: #1c3a2d;
  --felt-edge: #142a21;
  --wood: #3a2a1c;
  --ink: #f0e9d9;
  --ink-soft: #a9a494;
  --fable: #ff6b5e;
  --sol: #5ea2ff;
  --opus: #ffc94d;
  --dice: #b28dff;
  --coop: #46c47c;
  --defect: #ff5348;
  --gold: #e8c66a;
  --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--ink); font-family: var(--serif); }
button { font-family: var(--serif); cursor: pointer; }

#stage { position: fixed; inset: 0; overflow: hidden;
  background: radial-gradient(120vmax 80vmax at 50% 120%, #16181f 0%, var(--bg) 55%, #08090c 100%); }

/* ---------- 桌子 ---------- */
#table { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%);
  width: 92vmin; height: 64vmin; border-radius: 50%;
  background:
    radial-gradient(closest-side, #234a39 0%, var(--felt) 55%, var(--felt-edge) 92%, #0f1f18 100%);
  box-shadow:
    0 0 0 1.6vmin var(--wood),
    0 0 0 1.9vmin #241a11,
    0 3vmin 9vmin rgba(0,0,0,.75),
    inset 0 0 14vmin rgba(0,0,0,.55);
}
#table::after { content: ""; position: absolute; inset: 12%; border-radius: 50%;
  border: 1px dashed rgba(240,233,217,.14); }
#vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90vmax 70vmax at 50% 42%, transparent 40%, rgba(0,0,0,.55) 100%); }

#flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .12s; }
#flash.red { background: radial-gradient(closest-side at 50% 45%, rgba(255,60,50,.28), transparent 70%); }
#flash.purple { background: radial-gradient(closest-side at 50% 45%, rgba(178,141,255,.30), transparent 70%); }
#flash.gold { background: radial-gradient(closest-side at 50% 45%, rgba(232,198,106,.30), transparent 70%); }
#flash.on { opacity: 1; }

/* ---------- 座位 ---------- */
.seat { position: absolute; width: 18vmin; text-align: center; opacity: 0;
  transition: opacity .6s, transform .6s, filter .6s; transform: translateY(2vmin); z-index: 4; }
.seat.in { opacity: 1; transform: translateY(0); }
/* 不在当前对局里的人退到暗处 */
.seat.in.dim { opacity: .32; filter: grayscale(.7); }
#seat-opus.in.dim { transform: translate(-50%, 0); }
.seat .ring { position: relative; width: 13vmin; height: 13vmin; margin: 0 auto; border-radius: 50%;
  padding: .55vmin; background: #262b35; transition: box-shadow .4s, background .4s; }
.seat .ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  filter: saturate(.92); }
#seat-fable .ring { background: linear-gradient(135deg, var(--fable), #7a2f28); }
#seat-sol .ring { background: linear-gradient(135deg, var(--sol), #24457c); }
#seat-opus .ring { background: linear-gradient(135deg, var(--opus), #8a6a1e); }
#seat-dice .ring { background: linear-gradient(135deg, var(--dice), #4d3a80); }
.seat.lit .ring { box-shadow: 0 0 5vmin rgba(240,233,217,.35); }
.seat.hurt .ring { box-shadow: 0 0 5vmin rgba(255,83,72,.65); }
.seat .nm { margin-top: .9vmin; font-size: 1.9vmin; letter-spacing: .08em; color: var(--ink-soft); }
.seat .chip { display: inline-block; margin-top: .5vmin; min-width: 6.5vmin; padding: .3vmin 1.2vmin;
  border-radius: 99px; background: #12151b; border: 1px solid #2c313c;
  font-family: var(--mono); font-size: 2.4vmin; color: var(--ink); transition: transform .2s; }
.seat .chip.bump { transform: scale(1.22); border-color: var(--gold); }

/* 匿名面具 */
.seat .mask { position: absolute; inset: .55vmin; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; background: rgba(16,18,22,.88);
  color: var(--ink-soft); font-size: 5vmin; font-family: var(--mono); letter-spacing: 0;
  opacity: 0; transition: opacity .8s; pointer-events: none; }
#stage.anon .seat .mask { opacity: 1; }
#stage.anon .seat .ring { background: linear-gradient(135deg, #4a505e, #23262e); }

/* 王冠 */
.seat .crown { position: absolute; left: 50%; top: -3.4vmin; transform: translateX(-50%) scale(0);
  width: 5vmin; height: 5vmin; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 60%, #9a7c2e);
  color: #3a2c08; font-size: 2.6vmin; line-height: 5vmin; text-align: center;
  box-shadow: 0 0 3vmin rgba(232,198,106,.6); transition: transform .5s cubic-bezier(.2,1.6,.4,1); }
.seat.crowned .crown { transform: translateX(-50%) scale(1); }

/* 座位布局 */
#seat-opus { left: 50%; top: 6%; transform: translate(-50%, 2vmin); }
#seat-opus.in { transform: translate(-50%, 0); }
#seat-fable { left: 8%; bottom: 16%; }
#seat-sol { right: 8%; bottom: 16%; }
#seat-dice { right: 5%; top: 9%; width: 14vmin; }
#seat-dice .ring { width: 9vmin; height: 9vmin; }
#seat-dice .nm { font-size: 1.6vmin; color: var(--dice); }

/* 气泡：名牌 + 正文，说话是纸色对话泡，内心是深色思想云 */
.bubble { position: absolute; left: 50%; transform: translateX(-50%) scale(.92); bottom: 108%;
  min-width: 26vmin; max-width: 37vmin; border-radius: 1.8vmin; overflow: hidden;
  background: #f4eedd; color: #181a20; text-align: left;
  border-top: .55vmin solid #8b94a8;
  box-shadow: 0 1.8vmin 4.5vmin rgba(0,0,0,.55);
  opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; z-index: 9; }
.bubble.show { opacity: 1; transform: translateX(-50%) scale(1); }
.bubble .bhead { display: flex; align-items: center; gap: 1vmin; padding: .9vmin 1.5vmin .7vmin;
  border-bottom: 1px solid rgba(23,25,31,.14); font-size: 1.85vmin; }
.bubble .bhead img { width: 3.6vmin; height: 3.6vmin; border-radius: 50%; object-fit: cover;
  border: .25vmin solid rgba(23,25,31,.2); }
.bubble .bhead b { letter-spacing: .04em; }
.bubble .bhead i { font-style: normal; margin-left: auto; font-size: 1.5vmin; letter-spacing: .18em;
  padding: .25vmin 1.1vmin; border-radius: 99px; background: #21252e; color: #f0e9d9;
  white-space: nowrap; flex: none; }
.bubble .btext { padding: 1vmin 1.5vmin 1.4vmin; font-size: 2.25vmin; line-height: 1.6; }
/* 尾巴（对话泡三角） */
.bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -1.1vmin;
  border: 1.1vmin solid transparent; border-top-color: #f4eedd; }
/* 按角色着色 */
.bubble.f { border-top-color: var(--fable); }
.bubble.s { border-top-color: var(--sol); }
.bubble.o { border-top-color: var(--opus); }
.bubble.d { border-top-color: var(--dice); }
.bubble.f .bhead b { color: #a4382c; } .bubble.s .bhead b { color: #2b568f; }
.bubble.o .bhead b { color: #8a6414; } .bubble.d .bhead b { color: #5f42ab; }
/* 内心：深色思想云（虚线边 + 泡泡点尾巴 + 斜体） */
.bubble.think { background: #222838; color: #dde3f2; border: 1px dashed #566180; border-top-width: .55vmin; border-top-style: solid; }
.bubble.think .bhead { border-bottom-color: rgba(221,227,242,.16); }
.bubble.think .bhead i { background: var(--gold); color: #33270a; }
.bubble.think .btext { font-style: italic; }
.bubble.think .bhead b { color: #dde3f2; }
.bubble.think::after { border: none; width: 1.4vmin; height: 1.4vmin; border-radius: 50%;
  background: #222838; margin-left: -0.7vmin; margin-top: .5vmin; }
.bubble.think::before { content: ""; position: absolute; top: 100%; left: 50%; margin-left: 1.6vmin;
  margin-top: 2.4vmin; width: .8vmin; height: .8vmin; border-radius: 50%; background: #222838; }
/* 各座位的锚定方向 */
#seat-opus .bubble, #seat-dice .bubble { bottom: auto; top: 108%; }
#seat-opus .bubble::after, #seat-dice .bubble::after { top: auto; bottom: 100%; }
#seat-opus .bubble:not(.think)::after, #seat-dice .bubble:not(.think)::after {
  border-top-color: transparent; border-bottom-color: #f4eedd; }
#seat-opus .bubble.think::after, #seat-dice .bubble.think::after { bottom: 100%; margin-bottom: .5vmin; margin-top: 0; }
#seat-opus .bubble.think::before, #seat-dice .bubble.think::before { top: auto; bottom: 100%; margin-bottom: 2.4vmin; margin-top: 0; }
#seat-fable .bubble { left: 0; transform: translateX(0) scale(.92); }
#seat-fable .bubble.show { transform: translateX(0) scale(1); }
#seat-fable .bubble::after { left: 7vmin; }
#seat-sol .bubble { left: auto; right: 0; transform: translateX(0) scale(.92); }
#seat-sol .bubble.show { transform: translateX(0) scale(1); }
#seat-sol .bubble::after { left: auto; right: 6vmin; }
#seat-dice .bubble { left: auto; right: 0; transform: scale(.92); min-width: 22vmin; }
#seat-dice .bubble.show { transform: scale(1); }
#seat-dice .bubble::after { left: auto; right: 5vmin; }

/* ---------- 中央演区 ---------- */
#fx { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: 70vmin; text-align: center; z-index: 3; }
#round { min-height: 3vmin; font-size: 2.1vmin; letter-spacing: .35em; color: var(--ink-soft);
  opacity: 0; transition: opacity .3s; margin-bottom: 1.6vmin; }
#round.show { opacity: 1; }

#duel, #trio { display: flex; justify-content: center; align-items: flex-start; gap: 4vmin; }
#trio { gap: 3vmin; }
.pslot { text-align: center; }
.pname { margin-top: .8vmin; font-size: 1.8vmin; color: var(--ink-soft); letter-spacing: .06em; }
/* 牌上方的出牌人名牌：头像 + 名字，和座位一一对应 */
.pown { display: inline-flex; align-items: center; gap: .9vmin; margin-bottom: 1vmin;
  padding: .4vmin 1.5vmin .4vmin .5vmin; border-radius: 99px; background: rgba(13,15,19,.72);
  border: 1px solid #2c313c; font-size: 1.9vmin; letter-spacing: .05em; color: var(--ink); }
.pown img { width: 3.4vmin; height: 3.4vmin; border-radius: 50%; object-fit: cover; }
.pown.f { color: var(--fable); } .pown.s { color: var(--sol); }
.pown.o { color: var(--opus); } .pown.anon { color: var(--ink-soft); }
.pown.f, .pown.s, .pown.o { border-color: currentColor; }

.pcard { width: 13vmin; height: 18vmin; margin: 0 auto; border-radius: 1.2vmin; position: relative;
  transition: transform .16s ease-in; transform-style: preserve-3d; }
.pcard.sm { width: 10vmin; height: 14vmin; }
.pcard .pface { position: absolute; inset: 0; border-radius: 1.2vmin; display: flex;
  align-items: center; justify-content: center; font-size: 5vmin; font-weight: 700;
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 1.4vmin 3vmin rgba(0,0,0,.5); }
.pcard.sm .pface { font-size: 3.8vmin; }
.pcard.back .pface { background: repeating-linear-gradient(45deg, #1d2230 0 1vmin, #171b26 1vmin 2vmin);
  color: transparent; }
.pcard.c .pface { background: linear-gradient(160deg, #2c6d4a, #1c4a32); color: #d9ffe8; }
.pcard.d .pface { background: linear-gradient(160deg, #a3352c, #6d1f19); color: #ffe3df; }
.pcard.turn { transform: rotateY(90deg); }
.pcard.hit { animation: hit .5s; }
@keyframes hit { 0% { transform: translateY(0); } 30% { transform: translateY(-1.4vmin) rotate(-4deg); } 100% { transform: translateY(0); } }
.vs { align-self: center; font-size: 2.6vmin; color: var(--ink-soft); letter-spacing: .2em; padding-top: 6vmin; }

/* Sol 提交列 */
#submits .srow { display: flex; justify-content: center; gap: 1.6vmin; margin-bottom: 1vmin; }
#submits .s { width: 7vmin; height: 9.5vmin; border-radius: 1vmin; display: flex; align-items: center;
  justify-content: center; font-size: 3vmin; background: linear-gradient(160deg, #2c6d4a, #1c4a32);
  color: #d9ffe8; border: 1px solid rgba(255,255,255,.12); opacity: 0; transform: translateY(1.5vmin);
  transition: opacity .3s, transform .3s; }
#submits .s.show { opacity: 1; transform: translateY(0); }

/* 公共池 */
#pot { position: relative; width: 26vmin; height: 26vmin; margin: 0 auto; border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #2a3242, #171c26 70%);
  border: .4vmin solid #3a4356; box-shadow: inset 0 0 5vmin rgba(0,0,0,.6);
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
#pot .pot-n { font-family: var(--mono); font-size: 6vmin; color: var(--gold); }
#pot .pot-t { font-size: 1.8vmin; color: var(--ink-soft); letter-spacing: .2em; }
#pot .pot-mul { position: absolute; top: -1vmin; right: -3vmin; font-family: var(--mono);
  font-size: 3.2vmin; color: var(--gold); opacity: 0; transform: scale(.6); transition: all .3s; }
#pot .pot-mul.show { opacity: 1; transform: scale(1); }
.coin { position: fixed; width: 2.6vmin; height: 2.6vmin; border-radius: 50%; z-index: 8;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 55%, #9a7c2e);
  box-shadow: 0 0 1.5vmin rgba(232,198,106,.5); pointer-events: none;
  transition: transform .8s cubic-bezier(.3,.7,.4,1), opacity .8s; }

/* 信封 */
#envs { display: flex; justify-content: center; gap: 3vmin; }
.env { position: relative; width: 15vmin; height: 10.5vmin; background: #d8cfb8; border-radius: .8vmin;
  overflow: visible; box-shadow: 0 1.4vmin 3vmin rgba(0,0,0,.5); }
.env .flap { position: absolute; left: 0; right: 0; top: 0; height: 0; border-left: 7.5vmin solid transparent;
  border-right: 7.5vmin solid transparent; border-top: 5.6vmin solid #c4b998;
  transform-origin: top; transition: transform .5s; z-index: 2; }
.env.open .flap { transform: rotateX(180deg); }
.env .letter { position: absolute; left: 8%; right: 8%; top: 14%; bottom: 20%; background: #f7f2e4;
  border-radius: .5vmin; color: #23272f; font-size: 2.2vmin; display: flex; align-items: center;
  justify-content: center; transform: translateY(30%); opacity: 0; transition: all .5s .25s; }
.env.open .letter { transform: translateY(-18%); opacity: 1; }
.env .pname { position: absolute; left: 0; right: 0; top: 104%; }

/* 终局锣 */
#gong { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-8deg) scale(3);
  padding: 1.6vmin 4vmin; border: .5vmin solid var(--defect); border-radius: 1vmin;
  color: var(--defect); font-size: 5.4vmin; font-weight: 700; letter-spacing: .3em;
  background: rgba(13,15,19,.72); opacity: 0; z-index: 10; }
#gong.show { animation: gong .7s forwards; }
@keyframes gong { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(-8deg) scale(3); }
  60% { opacity: 1; transform: translate(-50%,-50%) rotate(-8deg) scale(.96); }
  100% { opacity: 1; transform: translate(-50%,-50%) rotate(-8deg) scale(1); } }

/* ---------- 字幕 ---------- */
#cap { position: absolute; left: 50%; bottom: 9.5%; transform: translateX(-50%); width: min(86vw, 88vmin);
  text-align: center; font-size: 2.7vmin; line-height: 1.6; color: var(--ink);
  text-shadow: 0 2px 12px rgba(0,0,0,.9); opacity: 0; transition: opacity .28s; z-index: 12; }
#cap.show { opacity: 1; }
#cap em { font-style: normal; color: var(--gold); }
#cap .who-fable { color: var(--fable); } #cap .who-sol { color: var(--sol); }
#cap .who-opus { color: var(--opus); } #cap .who-dice { color: var(--dice); }

/* ---------- 幕间标题 ---------- */
#titlecard { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: rgba(8,9,12,.94); opacity: 0;
  transition: opacity .5s; pointer-events: none; }
#titlecard.show { opacity: 1; }
.t-big { font-size: 8vmin; letter-spacing: .3em; text-indent: .3em; }
.t-sub { margin-top: 2vmin; font-size: 2.4vmin; color: var(--ink-soft); letter-spacing: .15em; }

/* ---------- 幕间小结卡 ---------- */
#recap { position: absolute; inset: 0; z-index: 19; display: flex; align-items: center;
  justify-content: center; padding: 0 6vw; background: rgba(8,9,12,.9);
  opacity: 0; transition: opacity .45s; }
#recap.show { opacity: 1; }
.r-card { width: min(92vw, 64vmin); background: linear-gradient(170deg, #1d222c, #14171e);
  border: 1px solid #2c313c; border-radius: 2vmin; padding: 3.2vmin 3.6vmin;
  box-shadow: 0 3vmin 8vmin rgba(0,0,0,.6); }
.r-card .r-k { font-family: var(--mono); font-size: 1.7vmin; letter-spacing: .3em;
  color: var(--gold); }
.r-card .r-title { margin-top: .8vmin; font-size: 3.2vmin; letter-spacing: .06em; }
.r-card .r-list { margin: 1.8vmin 0 0; list-style: none; }
.r-card .r-list li { position: relative; padding: 1vmin 0 1vmin 2.6vmin; font-size: 2.15vmin;
  line-height: 1.7; color: var(--ink); border-top: 1px dashed #2c313c; }
.r-card .r-list li:first-child { border-top: 0; }
.r-card .r-list li::before { content: ""; position: absolute; left: .4vmin; top: 2vmin;
  width: .9vmin; height: .9vmin; border-radius: 50%; background: var(--gold); }
.r-card .r-list b { color: var(--gold); font-weight: 600; }
.r-card .r-list .wf { color: var(--fable); } .r-card .r-list .ws { color: var(--sol); }
.r-card .r-list .wo { color: var(--opus); } .r-card .r-list .wd { color: var(--dice); }
.r-card .r-hint { margin-top: 2.2vmin; font-size: 1.7vmin; color: #565d6b; letter-spacing: .12em;
  text-align: center; animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

/* ---------- 小抄面板 ---------- */
#cheat { position: absolute; inset: 0; z-index: 26; background: rgba(8,9,12,.78);
  display: flex; align-items: flex-end; justify-content: center; }
.c-panel { width: min(100vw, 88vmin); max-height: 86%; overflow-y: auto;
  background: #14171e; border: 1px solid #2c313c; border-bottom: 0;
  border-radius: 2.4vmin 2.4vmin 0 0; padding: 0 3vmin 3vmin;
  box-shadow: 0 -2vmin 8vmin rgba(0,0,0,.7); -webkit-overflow-scrolling: touch; }
.c-top { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 2.2vmin 0 1.6vmin; background: #14171e; border-bottom: 1px solid #2c313c;
  font-size: 2.3vmin; letter-spacing: .18em; color: var(--gold); z-index: 1; }
.c-top button { background: none; border: 1px solid #2c313c; color: var(--ink-soft);
  width: 4.6vmin; height: 4.6vmin; border-radius: 50%; font-size: 2.6vmin; line-height: 1; }
.c-sec { margin-top: 2.4vmin; }
.c-h { font-size: 1.8vmin; letter-spacing: .3em; color: var(--ink-soft); margin-bottom: 1.2vmin; }
.c-rules { font-size: 2.1vmin; line-height: 1.8; color: var(--ink);
  background: #191d26; border: 1px solid #262b35; border-radius: 1.4vmin; padding: 1.6vmin 2vmin; }
.c-rules em { font-style: normal; color: var(--gold); }
.c-cast .c-p { display: flex; gap: 1.6vmin; align-items: flex-start; padding: 1.2vmin 0;
  border-top: 1px dashed #262b35; }
.c-cast .c-p:first-child { border-top: 0; }
.c-cast img { width: 6vmin; height: 6vmin; border-radius: 50%; object-fit: cover; flex: none;
  border: .3vmin solid #2c313c; }
.c-cast b { display: block; font-size: 2.1vmin; letter-spacing: .04em; }
.c-cast span { font-size: 1.95vmin; color: var(--ink-soft); line-height: 1.65; }
.c-cast .cf { color: var(--fable); } .c-cast .cs { color: var(--sol); }
.c-cast .co { color: var(--opus); } .c-cast .cd { color: var(--dice); }
.c-log { list-style: none; }
.c-log li { position: relative; padding: .9vmin 0 .9vmin 2.4vmin; font-size: 2vmin; line-height: 1.65;
  color: var(--ink); border-top: 1px dashed #262b35; }
.c-log li:first-child { border-top: 0; }
.c-log li::before { content: ""; position: absolute; left: .3vmin; top: 1.9vmin;
  width: .8vmin; height: .8vmin; border-radius: 50%; background: #566180; }
.c-log li.now::before { background: var(--gold); }
.c-log .c-empty { color: #565d6b; }
.c-log .c-empty::before { display: none; }
.c-links { display: flex; flex-wrap: wrap; gap: 1.2vmin; }
.c-links a { color: var(--sol); border: 1px solid #2c3d5c; border-radius: 99px;
  padding: .8vmin 2vmin; font-size: 1.9vmin; text-decoration: none; }

/* ---------- 大引语 ---------- */
#quote { position: absolute; inset: 0; z-index: 18; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 0 8vw; background: rgba(8,9,12,.9);
  opacity: 0; transition: opacity .45s; pointer-events: none; text-align: center; }
#quote.show { opacity: 1; }
.q-x { font-size: 3.6vmin; line-height: 1.9; max-width: 30em; }
.q-x em { font-style: normal; color: var(--gold); }
.q-by { margin-top: 3vmin; font-size: 2.1vmin; color: var(--ink-soft); letter-spacing: .12em; }
.q-by.f { color: var(--fable); } .q-by.s { color: var(--sol); } .q-by.o { color: var(--opus); }

/* ---------- 常驻界面 ---------- */
#badge { position: absolute; top: max(2.4vmin, env(safe-area-inset-top)); left: 3vmin; z-index: 14;
  font-size: 2vmin; letter-spacing: .2em; color: var(--ink-soft); border: 1px solid #2c313c;
  border-radius: 99px; padding: .6vmin 1.8vmin; background: rgba(13,15,19,.7);
  opacity: 0; transition: opacity .4s; }
#badge.show { opacity: 1; }
#ctrl { position: absolute; right: 3vmin; bottom: max(2.6vmin, env(safe-area-inset-bottom)); z-index: 22;
  display: flex; gap: 1.2vmin; }
#ctrl button { background: rgba(20,23,30,.85); border: 1px solid #2c313c; color: var(--ink-soft);
  border-radius: 99px; padding: 1vmin 2vmin; font-size: 2vmin; }
#ctrl button:active { transform: scale(.96); }
#ctrl button.on { border-color: var(--gold); color: var(--gold); }
#tapcue { position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 5.2%; z-index: 21;
  font-size: 2vmin; letter-spacing: .18em; color: var(--gold);
  opacity: 0; transition: opacity .3s; pointer-events: none;
  animation: tapPulse 1.6s ease-in-out infinite; }
#tapcue.show { opacity: .92; }
@keyframes tapPulse { 0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-.6vmin); } }
#hint { position: absolute; left: 3vmin; bottom: max(3vmin, env(safe-area-inset-bottom)); z-index: 14;
  font-size: 1.7vmin; color: #565d6b; letter-spacing: .05em; opacity: 0; transition: opacity .5s; }
#hint.show { opacity: 1; }

/* ---------- 海报/谢幕 ---------- */
#poster { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2.4vmin; text-align: center;
  background: radial-gradient(100vmax 70vmax at 50% 30%, #171a22 0%, #0a0b0e 70%);
  transition: opacity .7s; padding: 0 6vw; }
#poster.off { opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .7s, visibility 0s .7s; }
.p-cast { display: flex; align-items: center; }
.p-cast img { width: 14vmin; height: 14vmin; border-radius: 50%; object-fit: cover;
  border: .4vmin solid #2c313c; margin: 0 -1.6vmin; background: #12151b; }
.p-cast img:nth-child(1) { border-color: var(--fable); }
.p-cast img:nth-child(2) { border-color: var(--sol); z-index: 1; }
.p-cast img:nth-child(3) { border-color: var(--opus); }
.p-cast .p-dice { width: 9vmin; height: 9vmin; border-color: var(--dice); align-self: flex-start; }
.p-title { font-size: 11vmin; letter-spacing: .34em; text-indent: .34em; line-height: 1; }
.p-sub { font-size: 2.4vmin; color: var(--ink-soft); line-height: 1.9; }
.p-sub b { color: var(--gold); font-weight: 600; }
#btn-start, #btn-replay { margin-top: 1vmin; background: var(--ink); color: #17191f; border: 0;
  border-radius: 99px; padding: 1.8vmin 5vmin; font-size: 2.8vmin; letter-spacing: .1em;
  box-shadow: 0 1.5vmin 4vmin rgba(240,233,217,.15); }
#btn-start:active, #btn-replay:active { transform: scale(.97); }
.p-note { font-size: 1.9vmin; color: #565d6b; }

#credits { display: flex; flex-direction: column; align-items: center; gap: 1.8vmin; }
#credits .c-line { font-size: 3.4vmin; letter-spacing: .12em; }
#credits .c-sub { font-size: 2vmin; color: var(--ink-soft); line-height: 1.9; }
#credits .c-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4vmin; margin-top: .6vmin; }
#credits .c-links a { color: var(--sol); border: 1px solid #2c3d5c; border-radius: 99px;
  padding: .8vmin 2vmin; font-size: 1.9vmin; text-decoration: none; }

/* ---------- 骰子精灵 ---------- */
#dice-sprite { position: fixed; width: 5vmin; height: 5vmin; border-radius: 1vmin; z-index: 16;
  background: linear-gradient(145deg, #f5efe0, #cfc7b2); box-shadow: 0 1vmin 2.4vmin rgba(0,0,0,.6);
  opacity: 0; transition: top .8s cubic-bezier(.3,.7,.4,1), left .8s cubic-bezier(.3,.7,.4,1),
    transform .8s ease-in, opacity .3s; pointer-events: none; }
#dice-sprite::before, #dice-sprite::after { content: ""; position: absolute; width: 1vmin; height: 1vmin;
  border-radius: 50%; background: #6a45c8; }
#dice-sprite::before { top: 1vmin; left: 1vmin; }
#dice-sprite::after { bottom: 1vmin; right: 1vmin; }
#dice-sprite.show { opacity: 1; }
#dice-sprite.roll { transform: rotate(720deg); }

/* ---------- 手机竖屏 ---------- */
@media (max-aspect-ratio: 4/5) {
  #table { width: 96vw; height: 62vh; top: 45%; }
  .seat { width: 26vw; }
  .seat .ring { width: 17vw; height: 17vw; }
  .seat .nm { font-size: 3vw; }
  .seat .chip { font-size: 3.6vw; min-width: 11vw; }
  .seat .mask { font-size: 8vw; inset: .8vw; }
  .seat .crown { width: 8vw; height: 8vw; line-height: 8vw; font-size: 4vw; top: -5.5vw; }
  #seat-opus { top: 5%; }
  #seat-fable { left: 3%; bottom: 21%; }
  #seat-sol { right: 3%; bottom: 21%; }
  #seat-dice { right: 2%; top: 8%; width: 20vw; }
  #seat-dice .ring { width: 12vw; height: 12vw; }
  #seat-dice .nm { font-size: 2.6vw; }
  .bubble { min-width: 56vw; max-width: 70vw; border-radius: 3.4vw; border-top-width: 1.1vw; }
  .bubble .bhead { font-size: 3.2vw; padding: 1.8vw 3vw 1.4vw; gap: 2vw; }
  .bubble .bhead img { width: 6.4vw; height: 6.4vw; }
  .bubble .bhead i { font-size: 2.6vw; padding: .5vw 2vw; }
  .bubble .btext { font-size: 3.9vw; padding: 2vw 3vw 2.6vw; }
  .pown { font-size: 3.2vw; gap: 1.6vw; padding: .8vw 2.6vw .8vw 1vw; margin-bottom: 1.8vw; }
  .pown img { width: 6vw; height: 6vw; }
  #fx { width: 92vw; top: 43%; }
  #round { font-size: 3.4vw; }
  .pcard { width: 22vw; height: 30vw; }
  .pcard .pface { font-size: 9vw; }
  .pcard.sm { width: 17vw; height: 23vw; }
  .pcard.sm .pface { font-size: 7vw; }
  .pname { font-size: 3vw; }
  .vs { font-size: 4.2vw; padding-top: 11vw; }
  #submits .s { width: 12vw; height: 16vw; font-size: 5.4vw; }
  #pot { width: 44vw; height: 44vw; }
  #pot .pot-n { font-size: 10vw; }
  #pot .pot-t { font-size: 3vw; }
  #pot .pot-mul { font-size: 5.4vw; right: -6vw; }
  .env { width: 24vw; height: 17vw; }
  .env .flap { border-left-width: 12vw; border-right-width: 12vw; border-top-width: 9vw; }
  .env .letter { font-size: 3.6vw; }
  #gong { font-size: 9vw; border-width: 1vw; }
  #cap { font-size: 4.4vw; bottom: 12%; width: 92vw; }
  .t-big { font-size: 13vw; }
  .t-sub { font-size: 3.8vw; }
  .q-x { font-size: 5.4vw; }
  .q-by { font-size: 3.4vw; margin-top: 5vw; }
  #badge { font-size: 3vw; }
  #ctrl button { font-size: 3.4vw; padding: 2vw 3.6vw; }
  #tapcue { font-size: 3.2vw; bottom: 6.5%; }
  #hint { font-size: 2.8vw; }
  .p-cast img { width: 20vw; height: 20vw; }
  .p-cast .p-dice { width: 13vw; height: 13vw; }
  .p-title { font-size: 18vw; }
  .p-sub { font-size: 3.8vw; }
  #btn-start, #btn-replay { font-size: 4.6vw; padding: 3vw 9vw; }
  .p-note { font-size: 3vw; }
  #credits .c-line { font-size: 5.4vw; }
  #credits .c-sub { font-size: 3.2vw; }
  #credits .c-links a { font-size: 3.2vw; padding: 1.4vw 3.6vw; }
  #dice-sprite { width: 8vw; height: 8vw; }
  #dice-sprite::before, #dice-sprite::after { width: 1.6vw; height: 1.6vw; }
  #dice-sprite::before { top: 1.6vw; left: 1.6vw; }
  #dice-sprite::after { bottom: 1.6vw; right: 1.6vw; }
  .r-card { width: 92vw; padding: 5.4vw 6vw; border-radius: 3.6vw; }
  .r-card .r-k { font-size: 3vw; }
  .r-card .r-title { font-size: 5.6vw; }
  .r-card .r-list li { font-size: 3.7vw; padding: 1.8vw 0 1.8vw 4.6vw; }
  .r-card .r-list li::before { width: 1.6vw; height: 1.6vw; top: 3.4vw; left: .7vw; }
  .r-card .r-hint { font-size: 3vw; margin-top: 4vw; }
  .c-panel { width: 100vw; padding: 0 5vw 6vw; border-radius: 4.4vw 4.4vw 0 0; }
  .c-top { font-size: 4vw; padding: 3.8vw 0 2.8vw; }
  .c-top button { width: 8.4vw; height: 8.4vw; font-size: 4.8vw; }
  .c-h { font-size: 3.1vw; }
  .c-rules { font-size: 3.7vw; padding: 3vw 3.6vw; border-radius: 2.6vw; }
  .c-cast img { width: 10.5vw; height: 10.5vw; }
  .c-cast b { font-size: 3.7vw; }
  .c-cast span { font-size: 3.4vw; }
  .c-log li { font-size: 3.5vw; padding: 1.6vw 0 1.6vw 4.2vw; }
  .c-log li::before { width: 1.4vw; height: 1.4vw; top: 3.2vw; }
  .c-links a { font-size: 3.3vw; padding: 1.4vw 3.6vw; }
}