/* 地主别跑 H5：作业本 + 圆珠笔 + 荧光笔。牌面沿用宣传片的简约款：白底圆角、硬投影、角标点数、大花色。 */
:root {
  color-scheme: light;
  --paper: #FBFAF4; --grid: #DCE6F2; --ink: #22307A; --ink2: #4A5698; --red: #E5352B;
  --yel: #FFE14D; --pink: #FF9EBB; --mint: #8BE3B8; --sky: #9FD3FF; --gold: #FFD54A;
  --ch: clamp(66px, 22vh, 176px);          /* 手牌高度 */
  --cw: calc(var(--ch) * 0.72);
  --mh: calc(var(--ch) * 0.58);            /* 桌面小牌 */
  --mw: calc(var(--mh) * 0.72);
  --gap: clamp(4px, 1.2vh, 14px);
  --margin-l: clamp(14px, 3vw, 56px);      /* 红色装订线位置 */
  --font: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --wob: 14px 6px 12px 6px / 6px 12px 6px 14px;
}
html { font-size: clamp(11px, 0.85vw + 0.75vh, 18px); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--font); color: var(--ink); background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: calc(var(--ch) * 0.25) calc(var(--ch) * 0.25);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
body::before { content: ""; position: fixed; top: 0; bottom: 0; left: var(--margin-l); width: 2px; background: var(--red); opacity: .45; pointer-events: none; }
#app { position: fixed; inset: 0; }
button { font: inherit; color: inherit; }
input { font: inherit; color: var(--ink); }
:focus-visible { outline: 3px dashed var(--red); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3, h4, p { margin: 0; }

/* ---------- 通用部件 ---------- */
.btn {
  appearance: none; cursor: pointer; background: #fff; border: 2.5px solid var(--ink); border-radius: var(--wob);
  box-shadow: 3px 3px 0 var(--ink); padding: .42em 1.05em; font-weight: 800; font-size: 1rem; line-height: 1.25;
  transition: transform .08s, box-shadow .08s; white-space: nowrap;
}
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.primary { background: var(--yel); }
.btn.go { background: var(--mint); }
.btn.warn { background: var(--pink); }
.btn.ghost { background: transparent; box-shadow: none; border-style: dashed; }
.btn.small { font-size: .82rem; padding: .22em .7em; box-shadow: 2px 2px 0 var(--ink); }
.btn.icon { padding: .2em .5em; font-size: .9rem; }
.btn:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
.panel { background: #fff; border: 2.5px solid var(--ink); border-radius: 16px 6px 14px 7px / 7px 14px 6px 16px; box-shadow: 4px 4px 0 var(--ink); }
.hl { background: linear-gradient(transparent 55%, var(--yel) 55%, var(--yel) 92%, transparent 92%); padding: 0 .2em; }
.muted { color: var(--ink2); }
.pen { color: var(--red); }
.row { display: flex; align-items: center; gap: .5em; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
/* ---------- 扑克牌 ---------- */
.card {
  position: relative; width: var(--cw); height: var(--ch); flex: none;
  background: #fff; border: 2.5px solid var(--ink); border-radius: calc(var(--ch) * .085);
  box-shadow: calc(var(--ch) * .035) calc(var(--ch) * .035) 0 var(--ink);
  font-weight: 900; line-height: 1; color: var(--ink);
}
.card.red { color: var(--red); }
.card .rk { position: absolute; left: 9%; top: 6%; font-size: calc(var(--ch) * .21); letter-spacing: -.04em; }
.card .st { position: absolute; left: 11%; top: 27%; font-size: calc(var(--ch) * .15); }
.card .big { position: absolute; right: 8%; bottom: 7%; font-size: calc(var(--ch) * .38); }
.card.joker .rk { writing-mode: vertical-rl; font-size: calc(var(--ch) * .15); letter-spacing: .05em; }
.card.joker .big { font-size: calc(var(--ch) * .3); }
.card .stk { position: absolute; right: 6%; top: 5%; width: calc(var(--ch) * .14); height: calc(var(--ch) * .14); border-radius: 50%; border: 2px solid var(--ink); }
.card .stk.gold { background: var(--gold); } .card .stk.red { background: var(--red); } .card .stk.bomb { background: var(--ink); }
.card.mini { width: var(--mw); height: var(--mh); border-radius: calc(var(--mh) * .085); border-width: 2px; box-shadow: 2px 2px 0 var(--ink); }
.card.mini .rk { font-size: calc(var(--mh) * .22); } .card.mini .st { font-size: calc(var(--mh) * .16); }
.card.mini .big { font-size: calc(var(--mh) * .38); } .card.mini.joker .rk { font-size: calc(var(--mh) * .16); }
.card.mini .stk { display: none; }
.card.back { background: var(--sky); background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,.55) 6px 9px); }

/* ---------- 大厅 ---------- */
.lobby { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3vw; align-items: center; padding: 3vh 4vw 3vh calc(var(--margin-l) + 3vw); overflow: auto; }
.logo { font-size: clamp(42px, 9.5vh, 120px); font-weight: 900; line-height: 1.02; color: #fff; -webkit-text-stroke: 2.5px var(--ink); text-shadow: .06em .06em 0 var(--red); transform: rotate(-3deg); margin-bottom: .2em; }
.tagline { font-size: 1.15rem; margin: .3em 0 .9em; max-width: 26em; }
.cast { display: flex; align-items: flex-end; gap: 1.2vw; height: clamp(110px, 34vh, 300px); }
.cast .char-svg { height: 100%; width: auto; }
.cast .c1 { transform: rotate(-4deg); } .cast .c2 { transform: translateY(-6%) rotate(2deg); } .cast .c3 { transform: rotate(5deg); }
.lobby-form { padding: clamp(12px, 2.6vh, 26px) clamp(14px, 2vw, 28px); display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 16px); }
.lobby-form label { font-weight: 800; font-size: .95rem; }
.field { width: 100%; border: 2.5px solid var(--ink); border-radius: 10px 4px 9px 4px; padding: .45em .7em; background: #fff; font-size: 1.05rem; }
.field.code { letter-spacing: .5em; text-align: center; font-weight: 900; font-size: 1.3rem; }
.pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; }
.pick button { appearance: none; background: #fff; border: 2.5px solid var(--ink); border-radius: 12px; padding: .2em .1em 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; font-weight: 800; font-size: .78rem; }
.pick button .char-head { width: 100%; height: clamp(34px, 9vh, 76px); }
.pick button[aria-pressed="true"] { background: var(--yel); box-shadow: 3px 3px 0 var(--ink); }
.pick button:disabled { opacity: .35; }
.or { text-align: center; font-size: .85rem; color: var(--ink2); }
.err { color: var(--red); font-weight: 800; min-height: 1.3em; font-size: .92rem; }

/* 房间等待 */
.waiting { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4vh; padding: 2vh 4vw 2vh calc(var(--margin-l) + 2vw); }
.room-code { font-size: clamp(30px, 8vh, 72px); font-weight: 900; letter-spacing: .25em; padding: 0 .3em; background: linear-gradient(transparent 50%, var(--yel) 50%, var(--yel) 90%, transparent 90%); }
.seats { display: flex; gap: 2.5vw; align-items: flex-end; }
.seat-card { width: clamp(110px, 17vw, 210px); padding: 1vh .6em 1.2vh; display: flex; flex-direction: column; align-items: center; gap: .3em; text-align: center; }
.seat-card .char-svg { height: clamp(70px, 22vh, 190px); width: auto; }
.seat-card.empty { border-style: dashed; box-shadow: none; background: transparent; min-height: clamp(110px, 32vh, 280px); justify-content: center; }
.tag { display: inline-block; font-size: .72rem; font-weight: 800; padding: .05em .55em; border-radius: 20px; border: 2px solid var(--ink); background: var(--mint); }
.tag.host { background: var(--yel); } .tag.bot { background: var(--sky); } .tag.off { background: #ddd; }
.lan { font-size: .85rem; text-align: center; max-width: 46em; }
.lan code { font-family: inherit; font-weight: 800; background: #fff; border: 2px dashed var(--ink); padding: 0 .4em; border-radius: 6px; }
/* ---------- 牌桌 ---------- */
.table {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1fr);
  /* 最后一行至少放得下手牌，但如果右侧的派对面板更高，就跟着长高（多出来的高度从中间的出牌区让出） */
  grid-template-rows: auto minmax(0, 1fr) auto minmax(calc(var(--ch) + 2.2vh), auto);
  grid-template-areas: "top top top" "left center right" "act act act" "hand hand hand";
  padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) calc(var(--margin-l) + 8px);
  column-gap: 1vw;
}
.topbar { grid-area: top; display: flex; align-items: center; gap: .6em; min-width: 0; padding-bottom: .4vh; }
.topbar .street { font-weight: 900; font-size: 1.1rem; }
.chip { display: inline-flex; align-items: center; gap: .3em; border: 2px solid var(--ink); border-radius: 30px; padding: .08em .65em; background: #fff; font-size: .82rem; font-weight: 800; white-space: nowrap; }
.chip.rule { background: var(--pink); cursor: help; }
.chip.boss { background: var(--ink); color: var(--yel); }
.chip.mult { background: var(--yel); font-size: .95rem; }
.opp { display: flex; flex-direction: column; align-items: center; gap: .4vh; min-width: 0; padding-top: .5vh; }
.opp.left { grid-area: left; } .opp.right { grid-area: right; }
.who { position: relative; display: flex; flex-direction: column; align-items: center; }
.who .char-head { width: clamp(46px, 13vh, 120px); height: clamp(46px, 13vh, 120px); }
.who .name { font-weight: 800; font-size: .88rem; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .beans { font-size: .82rem; font-weight: 800; }
.who.turn .char-head { animation: bob .9s ease-in-out infinite; }
.who .crown { position: absolute; top: -2px; left: 50%; transform: translateX(-50%) rotate(-8deg); background: var(--red); color: #fff; font-size: .7rem; font-weight: 900; padding: .05em .45em; border-radius: 5px; border: 2px solid var(--ink); white-space: nowrap; z-index: 2; }
.who .crown.farm { background: var(--mint); color: var(--ink); }
.count { display: inline-flex; align-items: center; gap: .25em; font-weight: 900; font-size: .95rem; }
.count .cb { width: .9em; height: 1.25em; border: 2px solid var(--ink); border-radius: 3px; background: var(--sky); }
.count.danger { color: var(--red); }
.opp .jk { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.jk-dot { font-size: .66rem; font-weight: 800; padding: 0 .4em; border: 1.5px solid var(--ink); border-radius: 8px; background: #fff; cursor: help; white-space: nowrap; }
.jk-dot.r2 { background: var(--sky); } .jk-dot.r3 { background: var(--pink); } .jk-dot.r4 { background: var(--yel); }
.timer { height: 5px; width: 70%; background: rgba(34,48,122,.15); border-radius: 3px; overflow: hidden; }
.timer i { display: block; height: 100%; background: var(--red); transform-origin: left; }
.reveal { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 100%; }
.reveal .card { --mh: calc(var(--ch) * .36); }
.center { grid-area: center; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1vh; min-width: 0; }
.bottom-cards { display: flex; gap: 4px; align-items: center; }
.bottom-cards .lbl { font-size: .75rem; font-weight: 800; margin-right: .3em; }
.plays { position: relative; width: 100%; flex: 1; min-height: 0; }
.play-slot { position: absolute; display: flex; flex-direction: column; align-items: center; gap: .3vh; }
.play-slot.s-left { left: 0; top: 4%; align-items: flex-start; } .play-slot.s-right { right: 0; top: 4%; align-items: flex-end; }
.play-slot.s-me { left: 50%; bottom: 0; transform: translateX(-50%); }
.fan { display: flex; }
.fan .card { margin-left: calc(var(--mw) * -0.55); } .fan .card:first-child { margin-left: 0; }
.play-slot .pat { font-size: .78rem; font-weight: 900; background: var(--yel); padding: 0 .5em; border-radius: 4px; border: 2px solid var(--ink); }
.pass-word { font-size: 1.4rem; font-weight: 900; color: var(--ink2); transform: rotate(-6deg); }
.bubble { background: #fff; border: 2.5px solid var(--ink); border-radius: 14px; padding: .1em .65em; font-weight: 900; font-size: 1rem; white-space: nowrap; }
.actions { grid-area: act; display: flex; justify-content: center; align-items: center; gap: .7em; min-height: 2.6em; padding: .3vh 0; flex-wrap: wrap; }
.actions .hint-text { font-weight: 800; color: var(--red); }
.me { grid-area: hand; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 1vw; min-width: 0; }
.me .who .char-head { width: clamp(40px, 12vh, 100px); height: clamp(40px, 12vh, 100px); }
.hand { position: relative; height: calc(var(--ch) + 1.6vh); min-width: 0; touch-action: none; }
.hand .card { position: absolute; bottom: 0; transition: transform .12s ease-out; cursor: pointer; }
.hand .card.sel { transform: translateY(calc(var(--ch) * -0.16)); }
.hand .card.sel::after { content: ""; position: absolute; inset: -2.5px; border-radius: inherit; border: 3px solid var(--red); pointer-events: none; }
.hand .card.drag { filter: brightness(.9); }
.side { display: flex; flex-direction: column; gap: .4em; align-items: stretch; padding-bottom: .4vh; max-width: 9.5em; }
.items { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.item-btn { appearance: none; border: 2px solid var(--ink); background: var(--mint); border-radius: 8px; font-weight: 800; font-size: .74rem; padding: .15em .45em; cursor: pointer; }
.my-jk { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
/* ---------- 地图 / 商店 / 奖励 等全屏阶段 ---------- */
.stage { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) calc(var(--margin-l) + 12px); gap: 1vh; }
.stage-head { display: flex; align-items: center; gap: .8em; flex-wrap: wrap; }
.stage-head h2 { font-size: clamp(18px, 4.6vh, 40px); font-weight: 900; transform: rotate(-1.5deg); }
.stage-body { min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; }
.stage-foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; }
.mates { display: flex; gap: 1.4vw; align-items: center; }
.mate { display: flex; align-items: center; gap: .3em; font-size: .82rem; font-weight: 800; }
.mate .char-head { width: clamp(28px, 8vh, 60px); height: clamp(28px, 8vh, 60px); }
.mate .done { color: #2E9C8A; } .mate .wait { color: var(--ink2); }
.map-svg { width: 100%; height: 100%; max-height: 64vh; }
.map-svg .node { cursor: default; }
.map-svg .node.can { cursor: pointer; }
.map-svg .node.can circle.ring { animation: pulse 1.1s ease-in-out infinite; }
.map-svg text { font-family: var(--font); font-weight: 900; }
.legend { font-size: .8rem; color: var(--ink2); max-width: 60em; }
.offers { display: flex; gap: 2vw; align-items: stretch; justify-content: center; flex-wrap: wrap; }
.jcard { width: clamp(140px, 19vw, 230px); min-height: clamp(150px, 42vh, 300px); padding: 1.6vh .9em 1.4vh; display: flex; flex-direction: column; gap: .5em; cursor: pointer; text-align: left; appearance: none; font: inherit; color: inherit; background: #fff; border: 2.5px solid var(--ink); border-radius: 16px 6px 14px 7px / 7px 14px 6px 16px; box-shadow: 4px 4px 0 var(--ink); }
.jcard:nth-child(odd) { transform: rotate(-1.5deg); } .jcard:nth-child(even) { transform: rotate(1.5deg); }
.jcard[aria-pressed="true"] { background: #FFFBE0; outline: 3px solid var(--red); }
.jcard .rar { align-self: flex-start; font-size: .72rem; font-weight: 800; padding: .05em .6em; border-radius: 10px; border: 2px solid var(--ink); background: var(--mint); }
.jcard .rar.r2 { background: var(--sky); } .jcard .rar.r3 { background: var(--pink); } .jcard .rar.r4 { background: var(--yel); }
.jcard h4 { font-size: 1.15rem; font-weight: 900; }
.jcard p { font-size: .86rem; line-height: 1.5; }
.jcard .tagline2 { margin-top: auto; font-size: .74rem; color: var(--ink2); }
.jcard .price { font-weight: 900; font-size: 1rem; }
.jcard.sold { opacity: .4; cursor: default; }
.jcard.cant { cursor: not-allowed; }
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6vh 1.6vw; width: min(100%, 980px); }
.shop-grid .jcard { width: auto; min-height: clamp(96px, 24vh, 200px); transform: none; }
.ev { max-width: 44em; padding: 2.4vh 2em; display: flex; flex-direction: column; gap: 1.4vh; }
.ev h3 { font-size: 1.5rem; font-weight: 900; }
.ev .opt { text-align: left; white-space: normal; }
.outcomes { display: flex; flex-direction: column; gap: .3em; font-size: .9rem; }

/* 结算单 */
.sheet { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(251,250,244,.86); z-index: 20; padding: 2vh 3vw; }
.sheet .panel { width: min(96vw, 860px); max-height: 94vh; overflow: auto; padding: 2vh 1.6em; display: flex; flex-direction: column; gap: 1.2vh; }
.big-word { font-size: clamp(30px, 9vh, 80px); font-weight: 900; transform: rotate(-4deg); text-align: center; }
.big-word.win { color: #fff; -webkit-text-stroke: 2px var(--ink); text-shadow: .06em .06em 0 var(--red); }
.big-word.lose { color: var(--ink2); }
.calc { font-size: .95rem; text-align: center; }
.res-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.res-table td, .res-table th { border: 2px solid var(--ink); padding: .25em .5em; text-align: center; }
.res-table th { background: var(--sky); }
.res-table .plus { color: #1d8a5b; font-weight: 900; } .res-table .minus { color: var(--red); font-weight: 900; }
.stamp { display: inline-block; color: var(--red); border: 3px solid var(--red); border-radius: 8px; padding: .05em .6em; font-weight: 900; transform: rotate(-8deg); }

/* 浮层：提示条、表情飞行、播报 */
.toast { position: fixed; left: 50%; top: 12%; transform: translateX(-50%); z-index: 50; background: var(--ink); color: #fff; font-weight: 800; padding: .35em 1em; border-radius: 10px; max-width: 80vw; text-align: center; animation: toast 2.2s forwards; pointer-events: none; }
.flyer { position: fixed; z-index: 40; font-size: clamp(26px, 7vh, 56px); pointer-events: none; transition: transform .6s cubic-bezier(.3,.7,.4,1); }
.splat { position: fixed; z-index: 41; pointer-events: none; font-weight: 900; font-size: clamp(20px, 5vh, 40px); color: var(--red); -webkit-text-stroke: 1.5px var(--ink); animation: splat 1s forwards; }
.callout { position: absolute; z-index: 30; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: clamp(34px, 12vh, 110px); font-weight: 900; color: #fff; -webkit-text-stroke: 3px var(--ink); text-shadow: .06em .06em 0 var(--red); pointer-events: none; animation: callout 1.1s forwards; white-space: nowrap; }
.emote-bar { display: flex; gap: 4px; }
.emote-bar button { appearance: none; border: 2px solid var(--ink); background: #fff; border-radius: 50%; width: 2.1em; height: 2.1em; font-size: .9rem; cursor: pointer; padding: 0; }
.menu { position: absolute; z-index: 35; background: #fff; border: 2.5px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); padding: .4em; display: flex; flex-direction: column; gap: .3em; }
.rotate-tip { display: none; }
@media (orientation: portrait) and (max-width: 820px) {
  .rotate-tip { display: flex; position: fixed; inset: 0; z-index: 100; background: var(--paper); flex-direction: column; align-items: center; justify-content: center; gap: 1em; font-weight: 900; font-size: 1.3rem; text-align: center; padding: 2em; }
  .rotate-tip .phone { width: 64px; height: 110px; border: 4px solid var(--ink); border-radius: 12px; animation: rot 1.6s ease-in-out infinite; }
}
@keyframes bob { 50% { transform: translateY(-6%); } }
@keyframes pulse { 50% { stroke-width: 9; opacity: .55; } }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -8px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
@keyframes splat { 0% { transform: scale(.3) rotate(-10deg); opacity: 0; } 20% { transform: scale(1.2) rotate(8deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(1) rotate(8deg); opacity: 0; } }
@keyframes callout { 0% { transform: translate(-50%, -50%) scale(2.6) rotate(-6deg); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1) rotate(-6deg); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1) rotate(-6deg); opacity: 0; } }
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* 小屏兜底：顶栏规则卡多时省略显示，不把菜单挤出屏幕 */
.topbar { overflow: hidden; }
.chip.rule, .chip.boss { max-width: 12em; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 3.5em; }
@media (max-height: 420px) {
  .topbar .street { font-size: .9rem; }
  .chip { font-size: .72rem; padding: .02em .5em; }
  .opp .jk, .opp .emote-bar { display: none; }
}

/* 手机：保证可点区域和字号（按钮至少 34px 高，正文不小于 11px） */
@media (pointer: coarse), (max-height: 500px) {
  html { font-size: clamp(13px, 0.6vw + 1.6vh, 18px); }
  .btn, .item-btn { min-height: 34px; }
  .btn.small { min-height: 30px; }
  .emote-bar button { width: 32px; height: 32px; }
  .jk-dot, .tag, .play-slot .pat, .who .crown { font-size: 11px; }
  .chip { font-size: 11.5px; }
  .card.mini .rk { font-size: max(11px, calc(var(--mh) * .22)); }
}
@media (pointer: coarse), (max-height: 500px) {
  .btn.small, .who .beans, .bottom-cards .lbl, .who .name, .mate, .legend { font-size: 12px; }
}
/* 终局/房间页在矮屏上压缩角色高度，保证按钮在屏幕内 */
@media (max-height: 500px) {
  .waiting { gap: 1.2vh; padding-top: 1vh; padding-bottom: 1vh; }
  .waiting .seat-card .char-svg { height: 18vh; }
  .waiting .big-word { font-size: 9vh; }
  .waiting .seat-card { padding: .4vh .4em; gap: .1em; }
  .waiting .stamp { font-size: 12px; }
}

/* ---------- 派对层：锦囊托盘 / 陷阱 / 大招 ---------- */
.card.morphed { box-shadow: 0 0 0 3px var(--yel), calc(var(--ch) * .035) calc(var(--ch) * .035) 0 var(--ink); }
.card .mph { position: absolute; left: 6%; bottom: 6%; font-size: calc(var(--ch) * .17); line-height: 1; filter: drop-shadow(0 0 2px #fff); }
.card.mini .mph { font-size: calc(var(--mh) * .17); }
.party { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.ult-btn { appearance: none; cursor: pointer; display: flex; align-items: center; gap: .35em; justify-content: center; position: relative;
  background: linear-gradient(135deg, var(--yel), var(--pink)); border: 2.5px solid var(--ink); border-radius: 12px 4px 11px 4px; box-shadow: 3px 3px 0 var(--ink);
  padding: .3em .6em; font-weight: 900; font-size: .88rem; color: var(--ink); animation: ultpulse 1.6s ease-in-out infinite; }
.ult-btn:disabled { animation: none; background: #ddd; box-shadow: none; opacity: .55; cursor: not-allowed; }
.ult-btn i { position: absolute; top: -9px; right: -6px; font-style: normal; font-size: .62rem; background: var(--ink); color: #fff; padding: 0 .4em; border-radius: 6px; }
.ic { font-size: 1.15em; line-height: 1; }
.tray { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.tbtn { appearance: none; cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: .2em; padding: .15em .45em; font-weight: 800; font-size: .74rem;
  background: var(--mint); border: 2px solid var(--ink); border-radius: 9px; color: var(--ink); }
.tbtn.trap { background: var(--pink); }
.tbtn i { font-style: normal; color: var(--red); font-size: .7rem; }
.tbtn:active { transform: translate(1px, 1px); }
.tiny { font-size: .72rem; }
.traps { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.trap-set { font-size: .72rem; font-weight: 800; border: 2px dashed var(--ink); border-radius: 9px; padding: 0 .4em; background: #FFF3F7; }
.opp-party { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; max-width: 100%; }
.pchip { font-size: .7rem; font-weight: 800; border: 1.5px solid var(--ink); border-radius: 8px; padding: 0 .35em; background: #fff; white-space: nowrap; cursor: help; }
.pchip.used { opacity: .4; text-decoration: line-through; }
.pchip.trap { background: var(--pink); } .pchip.bound { background: var(--yel); }
.dlg { width: min(94vw, 560px); max-height: 92vh; overflow: auto; display: flex; flex-direction: column; gap: .7em; padding: 1.6vh 1.2em; }
.dlg h3 { font-size: 1.4rem; font-weight: 900; }
.pick-cards { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .3em; --mh: clamp(52px, 12vh, 84px); }
.pick-cards .card { cursor: pointer; }
.pick-cards .card.sel { transform: translateY(-6px); outline: 3px solid var(--red); outline-offset: 1px; }
@keyframes ultpulse { 50% { transform: scale(1.05) rotate(-1deg); } }

/* 20 个臭鸡蛋糊屏：盖在画面上，用手指/鼠标划过去把蛋擦掉；倒计时不会停 */
.egg-wrap { position: fixed; inset: 0; z-index: 60; touch-action: none; overflow: hidden; cursor: crosshair; }
.egg-wrap .egg-hint { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); background: var(--ink); color: #fff; font-weight: 800; padding: .2em .9em; border-radius: 10px; z-index: 2; pointer-events: none; }
.egg-splat { position: absolute; font-size: calc(clamp(44px, 14vh, 120px) * var(--s, 1)); transform: rotate(var(--r, 0deg)) scale(1); animation: eggin .22s backwards; transition: opacity .25s, transform .25s; filter: drop-shadow(0 0 6px rgba(255, 225, 77, .9)); line-height: 1; user-select: none; }
.egg-splat.gone { opacity: 0; transform: rotate(var(--r, 0deg)) scale(1.5); pointer-events: none; }
/* 最终状态(scale 1)是默认样式；动画只负责入场。这样"减少动画"把动画关掉后，鸡蛋依然看得见、擦得掉 */
@keyframes eggin { from { transform: rotate(var(--r, 0deg)) scale(0); } }
@media (max-height: 500px) {
  .tbtn .nm { display: none; }
  .tbtn { padding: .1em .35em; font-size: .9rem; }
  .ult-btn { font-size: .78rem; padding: .2em .4em; }
  .opp-party .pchip:nth-child(n+3) { display: none; }
  .party { max-width: 9em; }
}
@media (pointer: coarse), (max-height: 500px) {
  .tbtn, .ult-btn { min-height: 32px; }
  .pchip, .trap-set { font-size: 11px; }
}
.egg-wrap.fading { opacity: 0; transition: opacity .3s; pointer-events: none; }