/* 特卖宝石 · 奥林匹斯白昼：天空蓝 + 大理石白 + 鎏金 */
:root {
  --sky: #bfe3fb;
  --sky2: #e3f3fd;
  --cream: #f8f1e3;
  --marble: #fffdf8;
  --ink: #2c2340;
  --ink2: #4a3f5e;
  --muted: #84799a;
  --line: #ecd9a8;
  --line2: rgba(44, 35, 64, .1);
  --gold: #d29a22;
  --gold2: #f5c542;
  --gold3: #a8720f;
  --blue: #2b6fe0;
  --navy: #1f2b5c;
  --red: #e53950;
  --green: #22b573;
  --amber: #ffb300;
  --serif: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
  --latin: 'Cinzel', 'Trajan Pro', 'Noto Serif SC', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --shadow: 0 2px 0 rgba(168, 114, 15, .18), 0 8px 22px rgba(60, 40, 90, .12);
  --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M0 10V0H8V6H4V4H6V2H2V8H10V0' fill='none' stroke='%23d29a22' stroke-width='1.1'/%3E%3Cpath d='M10 10V0H18V6H14V4H16V2H12V8H20' fill='none' stroke='%23d29a22' stroke-width='1.1'/%3E%3C/svg%3E");
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--cream); }
html, body { margin: 0; min-height: 100%; }
body {
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky2) 26%, var(--cream) 62%) fixed;
  color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
}
/* 天上的云 */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .9;
  background:
    radial-gradient(60px 22px at 12% 10%, #fff 60%, transparent 62%), radial-gradient(44px 18px at 18% 8%, #fff 60%, transparent 62%),
    radial-gradient(70px 24px at 84% 6%, #fff 60%, transparent 62%), radial-gradient(40px 16px at 90% 9%, #fff 60%, transparent 62%),
    radial-gradient(50px 18px at 60% 18%, rgba(255,255,255,.8) 60%, transparent 62%);
}
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.center { text-align: center; }
.small { font-size: 12px; }
.score b, .pts, .cnt, .code, .deck-lv, .place, .rp b, .order, .bon, .hold b, .noble-pts { font-family: var(--latin); font-variant-numeric: lining-nums; }

.btn {
  border: 1.5px solid var(--line); background: var(--marble); color: var(--ink);
  padding: 10px 16px; border-radius: 14px; font-weight: 700; letter-spacing: .03em;
  transition: transform .12s, box-shadow .2s, opacity .2s; white-space: nowrap; box-shadow: 0 2px 0 rgba(168,114,15,.25);
}
.btn:active { transform: translateY(1px) scale(.98); box-shadow: none; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.gold { background: linear-gradient(180deg, #ffe58a, var(--gold2) 45%, #e29a12); color: #4a2d00; border-color: #ffe9a6; box-shadow: 0 3px 0 #b8770a, 0 8px 18px rgba(226,154,18,.35); text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.btn.blue { background: linear-gradient(180deg, #6aa8ff, var(--blue)); color: #fff; border-color: #8fbaff; box-shadow: 0 3px 0 #1a4fae; }
.btn.red { background: linear-gradient(180deg, #ff8090, var(--red)); color: #fff; border-color: #ff9aa6; box-shadow: 0 3px 0 #9e1428; }
.btn.ghost { background: rgba(255,255,255,.7); }
.btn.big { padding: 14px 22px; font-size: 17px; border-radius: 16px; }
.btn.small { padding: 6px 12px; font-size: 13px; }
.link { background: none; border: 0; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; padding: 6px; font-weight: 600; }
.icon { width: 38px; height: 38px; border-radius: 12px; border: 1.5px solid transparent; background: rgba(255,255,255,.65); font-size: 18px; display: grid; place-items: center; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.icon:active { transform: scale(.95); }
.icon.on { background: #d8f7e8; border-color: var(--green); }

/* ================= 大厅 ================= */
.screen { position: relative; z-index: 1; }
#lobby { min-height: 100dvh; display: flex; justify-content: center; padding: calc(10px + var(--safe-t)) 14px calc(24px + var(--safe-b)); }
.lobby-wrap { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 14px; }
.profile { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.75); border: 1.5px solid #fff; border-radius: 20px; padding: 8px 10px; box-shadow: var(--shadow); backdrop-filter: blur(6px); }
.me-ava { flex: none; width: 58px; height: 58px; border-radius: 16px; overflow: hidden; padding: 0; border: 3px solid var(--gold2); background: none; box-shadow: 0 2px 0 var(--gold3); }
.me-ava svg { width: 100%; height: 100%; display: block; }
.me-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.me-info input { border: 0; background: transparent; font-size: 19px; font-weight: 800; color: var(--ink); outline: none; padding: 2px 0; width: 100%; border-bottom: 1.5px dashed var(--line); }
.me-info input::placeholder { color: #b9aec9; }
.hero-name { font-size: 12.5px; color: var(--gold3); font-weight: 600; }
.avatars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; background: rgba(255,255,255,.8); border-radius: 18px; padding: 10px; box-shadow: var(--shadow); }
.ava-btn { padding: 0; border-radius: 14px; border: 2.5px solid transparent; background: none; overflow: hidden; display: flex; flex-direction: column; font-size: 10.5px; color: var(--muted); }
.ava-btn svg { width: 100%; aspect-ratio: 1; display: block; border-radius: 11px; }
.ava-btn span { padding: 2px 0; }
.ava-btn.on { border-color: var(--gold2); color: var(--ink); font-weight: 700; }

.hero { position: relative; text-align: center; margin-top: -2px; }
.sign { position: relative; width: 200px; margin: 0 auto -6px; cursor: pointer; }
.temple { width: 200px; height: auto; display: block; filter: drop-shadow(0 12px 18px rgba(80,60,20,.18)); }
.t-gem { animation: gemBob 3s ease-in-out infinite; }
.t-halo { animation: halo 4s ease-in-out infinite; transform-origin: 110px 44px; }
.sign.shine .t-gem { animation: gemPop .7s ease; }
.hero-tag { position: absolute; right: 8px; top: 64px; transform-origin: 6px -14px; animation: swing 2.8s ease-in-out infinite; }
.hero-tag::before { content: ''; position: absolute; left: 5px; top: -16px; width: 1.5px; height: 18px; background: var(--gold); transform: rotate(-20deg); transform-origin: bottom; }
.hero-tag span { display: block; background: var(--red); color: #fff; font-family: var(--serif); font-weight: 900; font-size: 14px; padding: 3px 9px 3px 14px; clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); box-shadow: 0 4px 10px rgba(0,0,0,.2); letter-spacing: .1em; }
@keyframes gemBob { 50% { transform: translate(91px, 14px) scale(.38); } }
.t-gem { transform: translate(98px, 70px) scale(.26); }
@keyframes gemPop { 40% { transform: translate(85px, 8px) scale(.5); } }
@keyframes halo { 50% { opacity: .6; transform: scale(1.12); } }
@keyframes swing { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-10deg); } }
.brand { font-family: var(--serif); font-weight: 900; font-size: clamp(42px, 11vw, 62px); margin: 0; line-height: 1.05; letter-spacing: .08em;
  background: linear-gradient(180deg, #ffe58a 0%, var(--gold2) 40%, #d1850a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px rgba(120,70,0,.35); filter: drop-shadow(0 3px 0 rgba(120,70,0,.35)); }
.brand span:first-child { background: linear-gradient(180deg, #ff9aa6, var(--red) 55%, #a3122a); -webkit-background-clip: text; background-clip: text; }
.latin { font-family: var(--latin); letter-spacing: .4em; font-size: 12px; color: var(--gold3); margin: 4px 0 0; font-weight: 700; }

.count-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-weight: 700; color: var(--ink2); }
.sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.size { min-width: 44px; height: 40px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #6aa8ff, var(--blue)); color: #fff; font-family: var(--latin); font-weight: 900; font-size: 18px; box-shadow: 0 3px 0 #1a4fae; transform: skewX(-8deg); }
.size.on { background: linear-gradient(180deg, #ffb74d, #f57c00); box-shadow: 0 3px 0 #b85a00; }

.modes { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; gap: 10px; }
.mode { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 128px; border: 3px solid #fff; border-radius: 20px; padding: 0; overflow: hidden; text-align: left; box-shadow: var(--shadow); transition: transform .15s, box-shadow .2s; }
.mode.m-temai { grid-row: span 2; min-height: 266px; }
.mode-art { position: absolute; inset: 0; }
.mode-art svg { width: 100%; height: 100%; display: block; }
.mode-txt { position: relative; display: flex; flex-direction: column; padding: 30px 12px 10px; background: linear-gradient(180deg, transparent, rgba(20,16,40,.72) 55%); color: #fff; }
.mode-txt b { font-family: var(--serif); font-size: 22px; font-weight: 900; letter-spacing: .06em; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.m-temai .mode-txt b { font-size: 30px; }
.mode-txt small { font-size: 12px; opacity: .92; }
.mode-txt em { align-self: flex-start; font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 8px; background: rgba(255,255,255,.25); margin-bottom: 4px; }
.m-temai .mode-txt em { background: var(--red); }
.mode.on { border-color: var(--gold2); box-shadow: 0 0 0 3px rgba(245,197,66,.45), var(--shadow); transform: translateY(-2px); }
.mode.on::after { content: '✓'; position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--gold2); color: #4a2d00; display: grid; place-items: center; font-weight: 900; box-shadow: 0 2px 0 var(--gold3); }

.go { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile-btn { position: relative; display: flex; align-items: center; gap: 10px; min-height: 84px; border: 3px solid #fff; border-radius: 20px; padding: 0 12px 0 0; overflow: hidden; text-align: left; box-shadow: var(--shadow); color: #fff; }
.tile-btn.friends { background: linear-gradient(135deg, #b388ff, #7c4dff); }
.tile-btn.bots { background: linear-gradient(135deg, #64b5f6, #3949ab); }
.tile-btn:active { transform: scale(.98); }
.tb-art { flex: none; width: 84px; align-self: stretch; }
.tb-art svg { width: 100%; height: 100%; display: block; }
.tb-txt { display: flex; flex-direction: column; }
.tb-txt b { font-family: var(--serif); font-size: 20px; font-weight: 900; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.tb-txt small { font-size: 12px; opacity: .9; }
.join { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.join input { background: rgba(255,255,255,.85); border: 1.5px solid var(--line); color: var(--ink); border-radius: 14px; padding: 12px 14px; font-size: 16px; outline: none; width: 100%; }
.join input:focus { border-color: var(--blue); }
.err { color: var(--red); min-height: 1.2em; margin: -6px 0 0; text-align: center; font-weight: 600; }

.open-rooms h2 { font-family: var(--serif); font-size: 16px; color: var(--gold3); margin: 0 0 8px; letter-spacing: .1em; }
.open-rooms ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.room-row { width: 100%; display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: center; text-align: left; border: 1.5px solid var(--line); background: var(--marble); border-radius: 14px; padding: 10px 12px; box-shadow: 0 2px 0 rgba(168,114,15,.15); }
.rid { font-family: var(--latin); font-weight: 900; color: var(--blue); }
.rmode { font-size: 12px; background: #fff3d1; padding: 1px 6px; border-radius: 6px; }
.rnames { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rlv { font-size: 12px; color: var(--muted); }

/* ================= 牌桌 ================= */
body.at-table { overflow: hidden; }
#table { height: 100dvh; display: flex; flex-direction: column; }
.topbar { position: relative; display: flex; align-items: center; gap: 6px; padding: calc(4px + var(--safe-t)) 8px 4px; }
.roominfo { flex: 1; display: flex; gap: 6px; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 13px; }
.roominfo b { font-family: var(--serif); color: var(--ink); font-size: 17px; letter-spacing: .06em; }
.roominfo span { color: var(--ink2); background: rgba(255,255,255,.7); padding: 1px 8px; border-radius: 8px; font-weight: 600; }
.roominfo .final-tag { background: var(--red); color: #fff; animation: pulse 1.2s infinite; }
.tools { display: flex; gap: 4px; }
.timebar { height: 4px; margin: 2px 10px 0; border-radius: 4px; overflow: hidden; }
.timebar.on { background: rgba(255,255,255,.7); }
.timebar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--gold2), #ffe58a); transition: transform .5s linear; will-change: transform; }
.timebar.urgent i { background: var(--red); }
.ticker { height: 22px; padding: 1px 12px 0; font-size: 12.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-new { animation: tkIn .35s ease; display: inline-block; }
@keyframes tkIn { from { transform: translateY(8px); opacity: 0; } }

.board { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.rivals-full { display: grid; grid-template-columns: 1fr; gap: 8px; flex: none; padding-top: 6px; }
.shop { display: flex; flex-direction: column; gap: 10px; }

/* 玩家面板 */
.unit { position: relative; display: flex; gap: 8px; background: linear-gradient(180deg, #fffdf8, #fff6e2); border: 2px solid #fff; border-radius: 16px; padding: 7px 7px 6px; box-shadow: var(--shadow); transition: box-shadow .2s, border-color .2s; }
.unit.turn { border-color: var(--gold2); box-shadow: 0 0 0 3px rgba(245,197,66,.4), var(--shadow); }
.unit.winner { border-color: var(--green); box-shadow: 0 0 0 3px rgba(34,181,115,.35), var(--shadow); }
.board.teams .unit { border-top: 4px solid var(--team); }
.order { position: absolute; left: -6px; top: -8px; z-index: 2; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 900; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.board.teams .order { background: var(--team); color: #1f2b5c; font-family: var(--serif); }
.unit-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.unit-head { display: flex; align-items: center; gap: 6px; }
.unit-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.who-line { position: relative; display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12.5px; }
.who-line .ava { flex: none; width: 24px; height: 24px; border-radius: 7px; overflow: hidden; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px var(--line); }
.who-line .ava svg { width: 100%; height: 100%; display: block; }
.who-line .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--ink2); }
.who-line .nm em { font-style: normal; font-size: 10px; margin-left: 3px; color: var(--gold3); }
.who-line.done { opacity: .5; }
.tag { flex: none; font-size: 10px; padding: 0 4px; border-radius: 4px; background: #efe6d2; color: var(--muted); }
.tag.off { background: #ffe0e4; color: var(--red); }
.tag.mic { background: none; padding: 0; }
.turn-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold2); box-shadow: 0 0 0 0 rgba(245,197,66,.8); animation: ring 1.3s infinite; }
@keyframes ring { 70% { box-shadow: 0 0 0 7px rgba(245,197,66,0); } 100% { box-shadow: 0 0 0 0 rgba(245,197,66,0); } }
.score { flex: none; text-align: right; line-height: 1; }
.score b { font-size: 24px; font-weight: 900; color: #f57c00; -webkit-text-stroke: .6px rgba(120,60,0,.25); }
.score small { color: var(--muted); font-size: 10px; }
.score.lead b { color: var(--red); }

.hold-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.hcol { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bon { width: 100%; max-width: 26px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.3); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.bon.b-w { background: linear-gradient(180deg, #ffffff, #dfe7f0); color: #46546a; text-shadow: none; box-shadow: inset 0 0 0 1px #c9d4e2, inset 0 -2px 0 rgba(0,0,0,.08); }
.bon.b-u { background: linear-gradient(180deg, #5b9cf6, #2563d9); } .bon.b-g { background: linear-gradient(180deg, #3fd07c, #17a058); } .bon.b-r { background: linear-gradient(180deg, #ff5a64, #d01a30); } .bon.b-k { background: linear-gradient(180deg, #5d5068, #241e2a); }
.bon.z { opacity: .28; }
.bon.none { background: none; box-shadow: none; }
.hold { position: relative; display: grid; place-items: center; }
.hold .gem { filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.hold b { position: absolute; right: -4px; bottom: -3px; min-width: 14px; height: 14px; padding: 0 2px; border-radius: 7px; background: #fff; color: var(--ink); font-size: 10px; font-weight: 900; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line); }
.hold.z { opacity: .3; }
.hold.z b { display: none; }
.unit-foot { display: flex; gap: 8px; font-size: 11px; color: var(--muted); align-items: center; flex-wrap: wrap; }
.unit-foot span { display: inline-flex; align-items: center; gap: 2px; }
.resv { display: flex; gap: 4px; flex-wrap: wrap; }
.won-nobles { display: flex; gap: 3px; }
.pop { animation: pop .35s ease; }
@keyframes pop { 40% { transform: scale(1.06); } }

/* 我的面板 */
.mine .unit { padding: 9px 9px 8px; background: linear-gradient(180deg, #fffaf0, #ffefc9); border-color: #ffe08a; }
.mine .score b { font-size: 32px; }
.mine .who-line { font-size: 14px; }
.mine .who-line .ava { width: 32px; height: 32px; border-radius: 9px; }
.mine .bon { max-width: 34px; height: 28px; font-size: 16px; }
.mine .hold b { min-width: 17px; height: 17px; font-size: 12px; border-radius: 9px; }
.slots { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; width: min(46%, 220px); align-self: center; }
.slot { aspect-ratio: .74; border-radius: 10px; border: 2px dashed #e7cf8f; background: rgba(255,255,255,.7); display: grid; place-items: center; color: #e2c37a; font-size: 22px; font-weight: 300; }
.slot-card { width: 100%; }

/* 神明 */
.nobles { flex: none; display: flex; gap: 8px; justify-content: center; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 2px; }
.nobles::-webkit-scrollbar { display: none; }
.nobles .none { color: var(--muted); font-size: 13px; }
.noble { position: relative; flex: none; width: 62px; height: 62px; border-radius: 12px; overflow: hidden; cursor: pointer; border: 2.5px solid #fff; box-shadow: var(--shadow); background: #fff; }
.noble-face { position: absolute; inset: 0; }
.noble-face svg { width: 100%; height: 100%; display: block; }
.noble.close { border-color: var(--green); box-shadow: 0 0 0 2px rgba(34,181,115,.4), var(--shadow); }
.noble-pts { position: absolute; right: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ffe58a, #e29a12); color: #4a2d00; font-weight: 900; font-size: 12px; box-shadow: 0 1px 0 #a8720f; }
.noble-need { position: absolute; left: 2px; bottom: 2px; display: flex; gap: 1.5px; }
.need { width: 13px; height: 15px; border-radius: 3px; display: grid; place-items: center; font-size: 10px; font-weight: 900; color: #fff; font-family: var(--latin); box-shadow: 0 0 0 1px rgba(255,255,255,.9); }
.need-w { background: #fff; color: #46546a; } .need-u { background: #2563d9; } .need-g { background: #17a058; } .need-r { background: #e01f36; } .need-k { background: #352d3d; }
.noble.tiny { width: 26px; height: 26px; border-radius: 6px; border-width: 1.5px; cursor: default; }
.noble.tiny .noble-pts, .noble.tiny .noble-need { display: none; }
.noble.big { width: 150px; height: 150px; border-radius: 18px; border-width: 4px; flex: none; }
.noble.big .noble-pts { width: 34px; height: 34px; font-size: 20px; right: 5px; top: 5px; }
.noble.big .need { width: 22px; height: 26px; font-size: 14px; }
.noble.big .noble-need { left: 5px; bottom: 5px; gap: 3px; }

/* 宝石库 */
.bank { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 8px 4px 4px; }
.token { position: relative; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 0; transition: transform .15s; }
.tk-gem { position: relative; display: grid; place-items: center; width: 56px; height: 56px; }
.tk-gem .gem { width: 52px; height: 52px; filter: drop-shadow(0 4px 4px rgba(60,40,90,.18)); transition: transform .15s; }
.token .cnt { position: absolute; top: -4px; left: calc(50% - 30px); min-width: 22px; height: 22px; border-radius: 11px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 900; display: grid; place-items: center; padding: 0 4px; box-shadow: 0 0 0 2px var(--ink), 0 2px 0 rgba(0,0,0,.15); }
.token .gname { font-size: 11px; color: var(--ink2); font-weight: 600; }
.token.out { opacity: .32; }
.token.live:not(.out) .tk-gem::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle, rgba(255,236,150,.55), transparent 70%); }
.token.picked { transform: translateY(-8px); }
.token.picked .tk-gem .gem { transform: scale(1.12); filter: drop-shadow(0 0 10px rgba(255,200,40,.9)); }
.pick-n { position: absolute; top: 34px; right: calc(50% - 32px); background: var(--red); color: #fff; font-weight: 900; font-size: 12px; border-radius: 9px; padding: 0 6px; font-family: var(--latin); box-shadow: 0 0 0 2px #fff; }

/* 柜台 */
.market { display: flex; flex-direction: column; gap: 7px; }
.row { display: grid; grid-template-columns: .82fr repeat(var(--show, 4), 1fr); gap: 7px; }
.deck { position: relative; border-radius: 12px; border: 2.5px solid #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 0; overflow: hidden; color: #fff; box-shadow: var(--shadow); }
.deck.lv1 { background: linear-gradient(160deg, #9ccc65, #558b2f); }
.deck.lv2 { background: linear-gradient(160deg, #64b5f6, #1565c0); }
.deck.lv3 { background: linear-gradient(160deg, #ba68c8, #6a1b9a); }
.deck::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: var(--meander) repeat-x 0 0 / auto 7px; filter: brightness(3); opacity: .5; }
.deck-lv { position: absolute; left: 6px; top: 3px; font-weight: 900; font-size: 13px; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.deck-emb { width: 56%; max-width: 46px; color: rgba(255,255,255,.92); filter: drop-shadow(0 2px 0 rgba(0,0,0,.2)); }
.deck-n { font-family: var(--latin); font-weight: 900; font-size: 17px; text-shadow: 0 1px 0 rgba(0,0,0,.3); line-height: 1; }
.deck-n small { font-family: var(--sans); font-size: 11px; margin-left: 1px; }

.card { position: relative; aspect-ratio: .74; border-radius: 12px; background: #fff; overflow: hidden; border: 3px solid #fff;
  box-shadow: 0 2px 0 rgba(168,114,15,.22), 0 6px 14px rgba(60,40,90,.14); cursor: pointer; transition: transform .15s, box-shadow .2s; container-type: inline-size; }
.card:active { transform: scale(.97); }
.card.empty { background: rgba(255,255,255,.4); border: 2px dashed #e7d7b0; box-shadow: none; cursor: default; }
.card-art { position: absolute; inset: 0; border-radius: 9px; overflow: hidden; }
.card-art svg { width: 100%; height: 100%; display: block; }
.card-gem { position: absolute; left: 3px; top: 3px; z-index: 1; width: clamp(18px, 28cqw, 30px); height: clamp(18px, 28cqw, 30px); border-radius: 8px; background: rgba(255,255,255,.88); display: grid; place-items: center; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.card-gem .gem { width: 82%; height: 82%; }
.pts { position: absolute; right: 4px; top: 0; z-index: 1; font-weight: 900; font-size: clamp(16px, 34cqw, 34px); line-height: 1.1; color: #fff; -webkit-text-stroke: 1.4px #3a2a52; paint-order: stroke; text-shadow: 0 2px 0 #3a2a52; }
.costs { position: absolute; z-index: 1; left: 3px; bottom: 3px; display: flex; flex-direction: column-reverse; gap: 2px; }
.cost { position: relative; width: clamp(14px, 22cqw, 24px); height: clamp(14px, 22cqw, 24px); border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: clamp(9px, 15cqw, 15px); color: #fff; box-shadow: 0 0 0 1.6px #fff, 0 1px 3px rgba(0,0,0,.35); text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.cost-w { background: linear-gradient(180deg, #fff, #dfe7f0); color: #46546a; text-shadow: none; } .cost-u { background: linear-gradient(180deg, #5b9cf6, #2563d9); } .cost-g { background: linear-gradient(180deg, #3fd07c, #17a058); } .cost-r { background: linear-gradient(180deg, #ff5a64, #d01a30); } .cost-k { background: linear-gradient(180deg, #5d5068, #241e2a); }
.cost s { position: absolute; right: -10px; top: -6px; font-size: 9px; color: #fff; background: var(--red); border-radius: 4px; padding: 0 2px; font-weight: 900; }
.cost.cut { box-shadow: 0 0 0 2px var(--red), 0 1px 3px rgba(0,0,0,.35); }
.lv2.card { border-color: #dbe7f5; }
.lv3.card { border-color: transparent; background: linear-gradient(135deg, #ffe58a, #e29a12, #fff1b3, #c98a0c) border-box; }
.lv3.card::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); background-size: 250% 100%; animation: sheen 4s ease-in-out infinite; mix-blend-mode: soft-light; }
@keyframes sheen { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
.card.can { box-shadow: 0 0 0 3px var(--green), 0 0 16px rgba(34,181,115,.55); }
.card.near { box-shadow: 0 0 0 2.5px rgba(255,179,0,.85), 0 6px 14px rgba(60,40,90,.14); }
.card.on-sale::after { content: ''; position: absolute; inset: -3px; border-radius: 12px; box-shadow: inset 0 0 0 3px var(--red); pointer-events: none; z-index: 2; }
.sale-tag { position: absolute; z-index: 3; right: -24px; bottom: 10px; transform: rotate(-38deg); background: var(--red); color: #fff; font-family: var(--serif); font-weight: 900; font-size: clamp(9px, 15cqw, 13px); padding: 1px 26px; letter-spacing: .1em; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.card.sale-in { animation: saleIn .9s ease; }
@keyframes saleIn { 20% { transform: scale(1.12) rotate(-3deg); } 40% { transform: scale(1.08) rotate(3deg); } 60% { transform: scale(1.1) rotate(-2deg); } }
.card.small { width: 30px; flex: none; border-radius: 6px; border-width: 1.5px; }
.card.small .card-gem, .card.small .costs, .card.small .sale-tag { display: none; }
.card.small .pts { font-size: 12px; right: 2px; -webkit-text-stroke-width: 1px; text-shadow: none; }
.card.small .card-art { border-radius: 4px; }
.card.hidden-r::after { content: '盲'; position: absolute; z-index: 3; right: 3px; bottom: 3px; font-size: 10px; font-weight: 900; color: #fff; background: rgba(44,35,64,.7); border-radius: 4px; padding: 0 3px; }
.card.back { cursor: default; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 11px; font-family: var(--latin); }
.card.back.lv1 { background: linear-gradient(160deg, #9ccc65, #558b2f); } .card.back.lv2 { background: linear-gradient(160deg, #64b5f6, #1565c0); } .card.back.lv3 { background: linear-gradient(160deg, #ba68c8, #6a1b9a); }
.card.big { width: 168px; flex: none; border-radius: 16px; border-width: 4px; }
.card.big .card-art { border-radius: 12px; }

/* 底部操作条 */
.actionbar { position: relative; flex: none; z-index: 5; display: flex; gap: 8px; align-items: center; padding: 10px 12px calc(10px + var(--safe-b));
  background: rgba(255,253,248,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 2px solid #fff; box-shadow: 0 -6px 20px rgba(60,40,90,.1); }
.ab-text { flex: 1; min-width: 0; font-size: 14px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.ab-text b { color: var(--ink); }
.ab-text.you b { color: #f57c00; }
.ab-sel { flex: 1; display: flex; gap: 4px; justify-content: center; }
.chip { display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 7px 0 3px; border-radius: 13px; background: #fff; font-size: 13px; font-weight: 900; font-family: var(--latin); box-shadow: 0 0 0 1.5px var(--line); }
.chip .gem { width: 20px; height: 20px; }
.ab-sel .chip { height: 34px; padding: 0 9px 0 4px; }
.ab-sel .chip .gem { width: 26px; height: 26px; }

/* 气泡 */
.bubble { position: absolute; z-index: 4; left: 20px; top: -30px; background: var(--navy); color: #fff; font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 12px; white-space: nowrap; animation: bub .25s ease; box-shadow: 0 4px 10px rgba(0,0,0,.25); pointer-events: none; }
.bubble::after { content: ''; position: absolute; left: 12px; bottom: -5px; border: 6px solid transparent; border-top-color: var(--navy); border-bottom: 0; }
@keyframes bub { from { transform: scale(.6); opacity: 0; } }

/* 飞的东西 */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
.flyer { position: fixed; display: grid; place-items: center; will-change: transform; }
.flyer .gem { width: 70%; height: 70%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.flyer .card { width: 100%; height: 100%; }
.flyer .noble { width: 100%; height: 100%; }

/* 横幅 */
.banner { position: fixed; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(.6); z-index: 18; max-width: calc(100vw - 32px); pointer-events: none; opacity: 0; text-align: center;
  background: linear-gradient(180deg, #fffdf8, #fff1cf); border: 3px solid #fff; border-radius: 20px; padding: 14px 26px 12px; box-shadow: 0 0 0 3px var(--gold2), 0 20px 50px rgba(60,40,90,.3); transition: .25s cubic-bezier(.3,1.6,.5,1); min-width: 200px; }
.banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.banner b { display: block; white-space: nowrap; font-family: var(--serif); font-weight: 900; font-size: 28px; color: #f57c00; letter-spacing: .1em; }
.banner small { display: block; color: var(--ink2); margin-top: 2px; }
.banner.snipe { box-shadow: 0 0 0 3px var(--red), 0 20px 50px rgba(60,40,90,.3); } .banner.snipe b { color: var(--red); }
.banner.final { background: linear-gradient(180deg, #ff6b7d, var(--red)); } .banner.final b, .banner.final small { color: #fff; }
.banner.bn-noble b { color: #8e24aa; }
.banner.mine { padding: 10px 22px; }

.toast { position: fixed; left: 50%; bottom: calc(86px + var(--safe-b)); transform: translateX(-50%) translateY(20px); z-index: 40; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 14px; font-weight: 600; font-size: 14px; opacity: 0; transition: .25s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.toast.show { opacity: 1; transform: translateX(-50%); }
.toast.bad { background: var(--red); }

/* 弹层 */
.sheet { position: fixed; inset: 0; z-index: 20; background: rgba(30,24,50,.4); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sheet-card { position: relative; width: 100%; max-width: 560px; max-height: 88dvh; overflow-y: auto; background: linear-gradient(180deg, #fffdf8, #fff6e2); border-radius: 22px 22px 0 0; padding: 22px 16px calc(16px + var(--safe-b)); animation: up .25s cubic-bezier(.2,1,.3,1); box-shadow: 0 -10px 40px rgba(30,24,50,.25); }
.sheet-card::before { content: ''; position: absolute; left: 18px; right: 18px; top: 8px; height: 7px; background: var(--meander) repeat-x 0 0 / auto 7px; opacity: .6; }
@keyframes up { from { transform: translateY(40px); opacity: .5; } }
.sheet-card h2, .sheet-card h3 { font-family: var(--serif); margin: 0 0 8px; color: var(--ink); letter-spacing: .04em; }
.sheet-card h3 small { color: var(--muted); font-size: 14px; font-weight: 600; }
.sheet-card h4 { margin: 14px 0 6px; color: var(--muted); font-size: 13px; }
.cd-sub { color: var(--gold3); font-size: 13px; margin: -4px 0 6px !important; font-weight: 700; }
.sheet-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.card-detail { display: flex; gap: 14px; align-items: flex-start; }
.cd-info { flex: 1; min-width: 0; }
.cd-info p { margin: 4px 0; font-size: 13.5px; }
.sale-note { color: var(--red); font-weight: 700; }
.pricelist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.pricelist li { display: grid; grid-template-columns: 20px 1fr auto auto; gap: 6px; align-items: center; font-size: 13px; }
.pricelist .ok { color: var(--green); font-weight: 700; } .pricelist .bad { color: var(--red); font-weight: 700; }
.ret-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ret-btn { position: relative; border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: 8px 10px; }
.ret-btn .chip { height: 32px; font-size: 15px; box-shadow: none; } .ret-btn .chip .gem { width: 26px; height: 26px; }
.ret-n { position: absolute; top: -8px; right: -6px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; padding: 0 5px; border-radius: 6px; }
.emotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.emote { border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: 10px 6px; font-weight: 700; }
.menu-list { display: grid; gap: 8px; }
.log { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--muted); display: grid; gap: 3px; max-height: 40dvh; overflow: auto; }
.log b { color: var(--ink); }
.rules { font-size: 14px; }
.rules ul { padding-left: 20px; margin: 6px 0; }
.rules li { margin: 3px 0; }
.rules h3 { margin-top: 14px; font-size: 16px; }
.gods-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 8px 0; }
.gods-row figure { margin: 0; text-align: center; font-size: 11.5px; color: var(--ink2); font-weight: 700; }
.gr-art { aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 2.5px solid #fff; box-shadow: var(--shadow); margin-bottom: 3px; }
.gr-art svg { width: 100%; height: 100%; display: block; }
.gods-row .gem { vertical-align: -3px; }
.stats { width: 100%; border-collapse: collapse; font-size: 14px; }
.stats th, .stats td { padding: 6px 4px; text-align: center; border-bottom: 1px solid var(--line2); }
.stats th { color: var(--muted); font-weight: 600; font-size: 12px; }

/* 结算 */
.result h2 { font-size: 26px; text-align: center; }
.result.won h2 { color: #f57c00; }
.result > .muted { text-align: center; margin: 0 0 10px; }
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rank li { display: grid; grid-template-columns: 28px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; background: #fff; border: 1.5px solid var(--line2); border-radius: 14px; padding: 8px 10px; }
.rank li.win { border-color: var(--gold2); background: linear-gradient(90deg, #fff4cc, #fff); }
.rank li.me .rn { color: #f57c00; }
.place { grid-row: span 2; font-weight: 900; font-size: 22px; color: var(--gold3); text-align: center; }
.rn { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-weight: 700; }
.rn .ava { width: 26px; height: 26px; border-radius: 7px; overflow: hidden; display: inline-block; }
.rn .ava svg { width: 100%; height: 100%; display: block; }
.team-badge { flex: none; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; background: var(--team); color: var(--navy); font-family: var(--serif); font-weight: 900; font-size: 13px; }
.rp b { font-size: 22px; color: #f57c00; }
.rc { grid-column: 2 / 4; font-size: 12px; color: var(--muted); }

/* 等人 */
.waitroom { position: absolute; inset: 56px 0 0; overflow-y: auto; display: flex; justify-content: center; align-items: flex-start; padding: 12px 12px calc(20px + var(--safe-b)); z-index: 3; }
.wr-card { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 12px; height: max-content; }
.wr-card > * { flex: none; }
.wr-head { display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, #fffdf8, #fff1cf); border: 2px solid #fff; border-radius: 18px; padding: 14px; box-shadow: var(--shadow); }
.wr-head small { display: block; color: var(--muted); font-size: 12px; }
.code { font-size: 34px; font-weight: 900; color: var(--blue); letter-spacing: .12em; line-height: 1.1; }
.wr-mode { border-left: 1.5px solid var(--line); padding-left: 14px; }
.wr-mode b { font-family: var(--serif); font-size: 17px; }
.wr-config { display: flex; flex-wrap: wrap; gap: 5px; }
.wr-config .size { min-width: 0; height: 32px; font-family: var(--sans); font-size: 13px; padding: 0 10px; transform: none; }
.wr-seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.wteam { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 16px; background: rgba(255,255,255,.55); border-top: 4px solid var(--team); }
.wteam .team-badge { align-self: flex-start; }
.wseat { position: relative; display: flex; align-items: center; gap: 8px; border: 2px solid #fff; background: var(--marble); border-radius: 14px; padding: 8px 10px; text-align: left; min-height: 56px; box-shadow: var(--shadow); }
.wseat.free { border: 2px dashed #e7cf8f; background: rgba(255,255,255,.5); color: var(--muted); box-shadow: none; }
.wseat.me { border-color: var(--gold2); }
.wseat .ava { flex: none; width: 38px; height: 38px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; }
.wseat .ava svg { width: 100%; height: 100%; }
.wseat .plus { font-size: 20px; }
.wseat .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.wseat .nm em { font-style: normal; font-size: 10px; color: var(--gold3); margin-left: 4px; }
.wseat .nm em.h { color: var(--green); }
.kick { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-size: 13px; line-height: 1; }
.wr-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; }
#wrStats { align-self: center; }
@keyframes pulse { 50% { opacity: .55; } }

/* ================= 众神特效 ================= */
.godfx { position: fixed; inset: 0; z-index: 60; overflow: hidden; animation: fade .25s; pointer-events: none; }
.godfx.out { opacity: 0; transition: opacity .4s; }
.fx-tint { position: absolute; inset: 0; }
.fx-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-center { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fx-card { width: min(46vw, 200px); animation: cardIn 2.6s cubic-bezier(.2,1.2,.3,1) both; filter: drop-shadow(0 0 24px rgba(255,255,255,.7)); }
.fx-card .card { width: 100%; border-width: 4px; }
.fx-title { text-align: center; color: #fff; animation: titleIn .5s .35s both; }
.fx-title b { display: block; font-family: var(--serif); font-weight: 900; font-size: 34px; letter-spacing: .14em; text-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 20px rgba(255,255,255,.6); }
.fx-title small { font-size: 14px; opacity: .95; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
@keyframes cardIn { 0% { transform: scale(.2) rotateY(180deg); opacity: 0; } 22% { transform: scale(1.08) rotateY(0); opacity: 1; } 32% { transform: scale(1); } 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.05); opacity: .9; } }
@keyframes titleIn { from { transform: translateY(16px) scale(.8); opacity: 0; } }
body.shake #table { animation: shake .5s; }
@keyframes shake { 15% { transform: translate(-6px, 3px); } 30% { transform: translate(5px, -4px); } 45% { transform: translate(-4px, -2px); } 60% { transform: translate(3px, 3px); } 80% { transform: translate(-2px, 1px); } }

/* 宙斯：乌云 + 数道雷电 */
.fx-zeus .fx-tint { background: radial-gradient(circle at 50% 40%, rgba(60,80,150,.55), rgba(10,14,40,.88)); }
.fx-bolt path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; animation: boltDraw 1.1s var(--d) both; }
.fx-bolt .glow { stroke: #9fd3ff; stroke-width: 2.6; opacity: .55; filter: blur(1.2px); }
.fx-bolt .core { stroke: #fff; stroke-width: .9; }
.fx-bolt .core.thin { stroke-width: .5; }
@keyframes boltDraw { 0% { stroke-dashoffset: 200; opacity: 1; } 18% { stroke-dashoffset: 0; opacity: 1; } 30% { opacity: .2; } 38% { opacity: 1; } 70% { opacity: .9; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.fx-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: flash 1.4s both; pointer-events: none; }
@keyframes flash { 0%, 6% { opacity: 0; } 9% { opacity: .85; } 14% { opacity: 0; } 30% { opacity: 0; } 33% { opacity: .6; } 38% { opacity: 0; } }

/* 波塞冬：海浪涌起 */
.fx-poseidon .fx-tint { background: linear-gradient(180deg, rgba(20,90,170,.35), rgba(8,40,90,.82)); }
.fx-wave { animation: waveIn 2.4s cubic-bezier(.3,.7,.3,1) both; }
.fx-wave.w1 { animation-delay: .05s; } .fx-wave.w2 { animation-delay: .18s; } .fx-wave.w3 { animation-delay: .3s; }
@keyframes waveIn { 0% { transform: translate(-30px, calc(var(--k) * 40px)); } 40% { transform: translate(0, calc(var(--k) * -14px)); } 60% { transform: translate(12px, calc(var(--k) * -9px)); } 100% { transform: translate(28px, 0); } }
.fx-foam { fill: #e9fbff; animation: foam 1.6s var(--d) both; }
@keyframes foam { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(calc(var(--h) * -1px)); opacity: 0; } }

/* 雅典娜：金光、猫头鹰飞过、橄榄叶飘落 */
.fx-athena .fx-tint { background: radial-gradient(circle at 50% 45%, rgba(255,240,180,.75), rgba(170,120,30,.75)); }
.fx-ring { fill: none; stroke: #fff6c8; stroke-width: .8; transform-origin: center; transform-box: fill-box; animation: ringOut 1.6s ease-out both; }
.fx-ring.r2 { animation-delay: .35s; }
@keyframes ringOut { from { transform: scale(.3); opacity: 1; } to { transform: scale(6); opacity: 0; } }
.fx-leaf { animation: leafFall 2.2s var(--d) linear both; transform-box: fill-box; transform-origin: center; }
@keyframes leafFall { from { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } to { transform: translate(calc(var(--x) * 1px), calc(var(--k) * 110px)) rotate(var(--r)); opacity: .9; } }
.fx-owl { animation: owlFly 2.2s ease-in-out both; }
@keyframes owlFly { 0% { transform: translate(-20px, calc(var(--k) * 80px)) scale(1); } 45% { transform: translate(40px, calc(var(--k) * 14px)) scale(1.7); } 100% { transform: translate(125px, calc(var(--k) * 4px)) scale(1.1); } }

/* 阿瑞斯：烈焰、火星、长矛交击 */
.fx-ares .fx-tint { background: radial-gradient(circle at 50% 60%, rgba(255,120,40,.55), rgba(90,10,10,.88)); }
.fx-flame { fill: #ff7a1a; transform-box: fill-box; transform-origin: 50% 100%; animation: flameUp 1.4s var(--d) ease-out both; }
.fx-flame.f2 { fill: #ffc233; } .fx-flame.f3 { fill: #e8322a; }
@keyframes flameUp { 0% { transform: scale(.2, 0); opacity: 0; } 30% { transform: scale(var(--s), calc(var(--s) * 1.4)); opacity: 1; } 70% { transform: scale(calc(var(--s) * .9), calc(var(--s) * 1.1)); opacity: .9; } 100% { transform: scale(.6, .3); opacity: 0; } }
.fx-ember { fill: #ffe082; animation: ember 1.8s var(--d) both; }
@keyframes ember { from { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } to { transform: translate(calc(var(--x) * 1px), calc(var(--k) * -70px)); opacity: 0; } }
.fx-spear { transform-box: view-box; }
.fx-spear.s1 { animation: spear1 .9s .2s cubic-bezier(.3,1.5,.5,1) both; }
.fx-spear.s2 { animation: spear2 .9s .2s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes spear1 { from { transform: translate(-30px, calc(var(--k) * 60px)) rotate(-60deg); opacity: 0; } to { transform: translate(50px, calc(var(--k) * 78px)) rotate(-30deg); opacity: 1; } }
@keyframes spear2 { from { transform: translate(130px, calc(var(--k) * 60px)) rotate(60deg); opacity: 0; } to { transform: translate(50px, calc(var(--k) * 78px)) rotate(30deg); opacity: 1; } }

/* 哈迪斯：冥雾、绿色魂火、三头犬的眼睛 */
.fx-hades .fx-tint { background: radial-gradient(circle at 50% 50%, rgba(70,30,110,.7), rgba(8,4,16,.95)); }
.fx-mist { fill: #9c7bd1; opacity: 0; animation: mist 2.4s var(--d) ease-in-out both; filter: blur(2px); }
@keyframes mist { 0% { transform: translateX(0); opacity: 0; } 40% { opacity: .35; } 100% { transform: translateX(calc(var(--x) * 1px)); opacity: 0; } }
.fx-wisp { fill: #3ee8a0; transform-box: fill-box; transform-origin: 50% 100%; animation: wisp 2s var(--d) ease-out both; filter: drop-shadow(0 0 1.5px #3ee8a0); }
@keyframes wisp { from { transform: translate(0, 0) scale(.5); opacity: 0; } 20% { opacity: 1; } to { transform: translate(calc(var(--x) * 1px), calc(var(--k) * -60px)) scale(1.2); opacity: 0; } }
.fx-eyes circle { fill: #ff3d3d; filter: drop-shadow(0 0 1.5px #ff3d3d); }
.fx-eyes { opacity: 0; animation: eyes 2.2s var(--d) both; }
@keyframes eyes { 10% { opacity: 1; } 40% { opacity: 1; } 45% { opacity: .1; } 50% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }

/* ================= 宽屏 ================= */
@media (min-width: 900px) {
  .board { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; grid-template-areas: "shop mine" "shop rivals"; align-content: start; gap: 12px 18px; padding: 8px 18px 16px; max-width: 1200px; margin: 0 auto; width: 100%; }
  .shop { grid-area: shop; max-width: min(720px, calc((100dvh - 360px) * 1.1)); width: 100%; justify-self: center; }
  .mine { grid-area: mine; align-self: start; }
  .rivals-full { grid-area: rivals; padding-top: 6px; }
  .rivals, .mebar { display: none !important; }
  .mine .unit { flex-direction: column; }
  .slots { width: 100%; }
  .sheet { align-items: center; }
  .sheet-card { border-radius: 22px; }
  .actionbar { justify-content: center; }
  .actionbar > .ab-text, .actionbar > .ab-sel { flex: 0 1 520px; }
  .tk-gem, .tk-gem .gem { width: 60px; height: 60px; }
}
@media (max-width: 560px) {
  .card.big { width: 130px; }
  .noble.big { width: 120px; height: 120px; }
  .avatars { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 430px) {
  .roominfo .ri-n { display: none; }
  .tk-gem, .tk-gem .gem { width: 46px; height: 46px; }
}
@media (max-width: 380px) {
  .roominfo .ri-t { display: none; }
  .token .gname { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 窄面板：名字优先，机器人标记缩成角标 */
.rivals-full .who-line .tag:not(.off) { display: none; }
.rivals-full .score b { font-size: 21px; }
.rivals-full .score small { display: none; }
.rivals-full .unit-foot { gap: 5px; font-size: 10.5px; }
.rivals-full .who-line .ava { width: 22px; height: 22px; }
.tile-btn { gap: 8px; min-height: 76px; }
.tb-art { width: 68px; }
.tb-txt { min-width: 0; }
.tb-txt b { font-size: 18px; white-space: nowrap; }
.tb-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcol { min-width: 0; }
.hold { width: 100%; }
.hold .gem { width: 100%; max-width: 22px; height: auto; aspect-ratio: 1; }
.hold-grid.big .hold .gem { max-width: 32px; }
.hold-grid.big { gap: 5px; }
@media (min-width: 900px) { .rivals-full .hold .gem { max-width: 26px; } }


/* ================= 浅色护眼：米黄底，比白色暗一档 ================= */
:root[data-theme="light"] { --card-edge: #e6dcc4; }
:root[data-theme="light"], :root[data-theme="light"] body { background: #e7dfca; }
:root[data-theme="light"] body { background: radial-gradient(120% 70% at 50% 0%, #efe8d6 0%, #e7dfca 60%, #ddd3bb 100%) fixed; color: #3a3326; }
:root[data-theme="light"] body::before { display: none; }
:root[data-theme="light"] { --sky: #e7dfca; --sky2: #e7dfca; --cream: #e7dfca; --marble: #f3edde; --ink: #3a3326; --ink2: #5a5040; --muted: #8a7f68; --line: #d6c7a2; --gold2: #e0b450; --blue: #3d6fb8; --navy: #33456b; --red: #c94b55; --green: #3f9a6a; }
:root[data-theme="light"] .btn:not(.gold):not(.blue):not(.red) { background: #f3edde; }
:root[data-theme="light"] .icon { background: rgba(255,255,255,.35); }
:root[data-theme="light"] .profile, :root[data-theme="light"] .avatars { background: rgba(243,237,222,.9); border-color: #e6dcc4; }
:root[data-theme="light"] .unit { background: linear-gradient(180deg, #f3edde, #ece3cc); border-color: #e6dcc4; }
:root[data-theme="light"] .mine .unit { background: linear-gradient(180deg, #f2e8cf, #e9dcbb); border-color: #dcc58a; }
:root[data-theme="light"] .order { box-shadow: 0 0 0 2px #e7dfca; }
:root[data-theme="light"] .hold b { background: #f3edde; }
:root[data-theme="light"] .card { background: #f3edde; border-color: #efe6d0; }
:root[data-theme="light"] .card-art, :root[data-theme="light"] .noble-face, :root[data-theme="light"] .mode-art, :root[data-theme="light"] .tb-art, :root[data-theme="light"] .gr-art { filter: brightness(.95) saturate(.88); }
:root[data-theme="light"] .tk-gem .gem, :root[data-theme="light"] .hold .gem, :root[data-theme="light"] .card-gem .gem { filter: saturate(.9); }
:root[data-theme="light"] .card-gem { background: rgba(243,237,222,.88); }
:root[data-theme="light"] .noble, :root[data-theme="light"] .mode, :root[data-theme="light"] .tile-btn, :root[data-theme="light"] .gr-art { border-color: #efe6d0; }
:root[data-theme="light"] .slot { background: rgba(243,237,222,.6); }
:root[data-theme="light"] .actionbar { background: rgba(236,228,208,.95); border-top-color: #efe6d0; }
:root[data-theme="light"] .sheet-card { background: linear-gradient(180deg, #f3edde, #ebe2ca); }
:root[data-theme="light"] .banner { background: linear-gradient(180deg, #f3edde, #eadfc2); border-color: #efe6d0; }
:root[data-theme="light"] .ret-btn, :root[data-theme="light"] .emote, :root[data-theme="light"] .rank li, :root[data-theme="light"] .wseat, :root[data-theme="light"] .room-row, :root[data-theme="light"] .join input { background: #f3edde; }
:root[data-theme="light"] .wr-head { background: linear-gradient(135deg, #f3edde, #ece0bf); border-color: #efe6d0; }
:root[data-theme="light"] .timebar.on, :root[data-theme="light"] .roominfo span { background: rgba(255,255,255,.35); }
:root[data-theme="light"] .temple { filter: drop-shadow(0 12px 18px rgba(80,60,20,.18)) brightness(.95); }

/* ================= 深色护眼：墨绿灰底 ================= */
:root[data-theme="dark"] {
  --sky: #1b2321; --sky2: #1e2725; --cream: #1a201f; --marble: #2b3532;
  --ink: #e4dccb; --ink2: #c7bfac; --muted: #8e9890;
  --line: #4b5650; --line2: rgba(228, 220, 203, .08);
  --gold: #c39a45; --gold2: #d6b25e; --gold3: #b08a3e;
  --blue: #4f7fbf; --navy: #3a4f6e; --red: #c85a5a; --green: #5aa97c; --amber: #d2a24a;
  --card-edge: #3a4542;
  --shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 8px 20px rgba(0, 0, 0, .28);
  color-scheme: dark;
}
:root[data-theme="dark"] { background: var(--cream); }
:root[data-theme="dark"] body { background: radial-gradient(120% 70% at 50% 0%, #26302d 0%, #1d2523 55%, #171d1c 100%) fixed; }
:root[data-theme="dark"] body::before { opacity: .05; }
:root[data-theme="dark"] .btn { background: #2f3a37; border-color: var(--line); color: var(--ink); box-shadow: 0 2px 0 rgba(0,0,0,.3); }
:root[data-theme="dark"] .btn.gold { background: linear-gradient(180deg, #d9bb72, #b8913f); color: #241a08; border-color: #c9a75a; box-shadow: 0 3px 0 #7a5d24; text-shadow: none; }
:root[data-theme="dark"] .btn.blue { background: linear-gradient(180deg, #5b86c0, #3f6aa3); border-color: #5b86c0; box-shadow: 0 3px 0 #2a4a75; }
:root[data-theme="dark"] .btn.red { background: linear-gradient(180deg, #d06c6c, #a94848); border-color: #c06060; box-shadow: 0 3px 0 #6e2c2c; }
:root[data-theme="dark"] .btn.ghost { background: rgba(255,255,255,.04); }
:root[data-theme="dark"] .icon { background: rgba(255,255,255,.06); box-shadow: none; }
:root[data-theme="dark"] .icon.on { background: rgba(90,169,124,.2); border-color: var(--green); }
:root[data-theme="dark"] .link { color: #8fb3d9; }
:root[data-theme="dark"] .profile, :root[data-theme="dark"] .avatars { background: rgba(43,53,50,.85); border-color: var(--card-edge); }
:root[data-theme="dark"] .me-info input { color: var(--ink); border-bottom-color: var(--line); }
:root[data-theme="dark"] .me-info input::placeholder { color: #6f7a73; }
:root[data-theme="dark"] .me-ava { border-color: var(--gold2); box-shadow: 0 2px 0 #6e5520; }
:root[data-theme="dark"] .temple { filter: drop-shadow(0 12px 18px rgba(0,0,0,.4)) brightness(.82) saturate(.8); }
:root[data-theme="dark"] .brand { background: linear-gradient(180deg, #e8d29a 0%, #cfa957 50%, #9d7531 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
:root[data-theme="dark"] .brand span:first-child { background: linear-gradient(180deg, #e3a0a0, #c25555 60%, #8a3434); -webkit-background-clip: text; background-clip: text; }
:root[data-theme="dark"] .latin, :root[data-theme="dark"] .hero-name { color: var(--gold); }
:root[data-theme="dark"] .count-row { color: var(--ink2); }
:root[data-theme="dark"] .size { background: linear-gradient(180deg, #4d77ae, #3a5e8e); box-shadow: 0 3px 0 #253f61; color: #e8eef6; }
:root[data-theme="dark"] .size.on { background: linear-gradient(180deg, #d1a356, #a97c32); box-shadow: 0 3px 0 #6e5020; color: #241a08; }
:root[data-theme="dark"] .mode, :root[data-theme="dark"] .tile-btn { border-color: var(--card-edge); }
:root[data-theme="dark"] .mode-art, :root[data-theme="dark"] .tb-art, :root[data-theme="dark"] .gr-art { filter: brightness(.82) saturate(.82); }
:root[data-theme="dark"] .tile-btn.friends { background: linear-gradient(135deg, #6c5a8e, #4d3f6e); }
:root[data-theme="dark"] .tile-btn.bots { background: linear-gradient(135deg, #4f6f93, #36486e); }
:root[data-theme="dark"] .mode.on { border-color: var(--gold2); box-shadow: 0 0 0 3px rgba(214,178,94,.3), var(--shadow); }
:root[data-theme="dark"] .join input { background: #252e2c; border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] .room-row { background: var(--marble); border-color: var(--line); box-shadow: none; }
:root[data-theme="dark"] .rmode { background: #3a4542; }
:root[data-theme="dark"] .roominfo b { color: var(--ink); }
:root[data-theme="dark"] .roominfo span { background: rgba(255,255,255,.06); color: var(--ink2); }
:root[data-theme="dark"] .timebar.on { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .timebar i { background: linear-gradient(90deg, #b08a3e, #d6b25e); }
:root[data-theme="dark"] .unit { background: linear-gradient(180deg, #2e3835, #283130); border-color: var(--card-edge); }
:root[data-theme="dark"] .unit.turn { border-color: var(--gold2); box-shadow: 0 0 0 2px rgba(214,178,94,.35), var(--shadow); }
:root[data-theme="dark"] .mine .unit { background: linear-gradient(180deg, #343c34, #2a3230); border-color: #5a5236; }
:root[data-theme="dark"] .order { box-shadow: 0 0 0 2px #1d2523; background: #4a5f80; }
:root[data-theme="dark"] .who-line .ava { box-shadow: 0 0 0 1.5px #1d2523, 0 0 0 2.5px var(--line); }
:root[data-theme="dark"] .who-line .nm { color: var(--ink); }
:root[data-theme="dark"] .tag { background: #3a4542; color: var(--muted); }
:root[data-theme="dark"] .score b { color: #d9a356; -webkit-text-stroke: 0; }
:root[data-theme="dark"] .score.lead b { color: #e07b6a; }
:root[data-theme="dark"] .bon { filter: saturate(.75) brightness(.9); }
:root[data-theme="dark"] .bon.b-w { background: linear-gradient(180deg, #d9dde2, #aab3be); color: #2c3440; box-shadow: none; }
:root[data-theme="dark"] .hold b { background: #3a4542; color: var(--ink); box-shadow: 0 0 0 1px #1d2523; }
:root[data-theme="dark"] .slot { background: rgba(255,255,255,.03); border-color: #5a5236; color: #6f6750; }
:root[data-theme="dark"] .noble { border-color: var(--card-edge); background: #2b3532; }
:root[data-theme="dark"] .noble-face, :root[data-theme="dark"] .card-art { filter: brightness(.86) saturate(.8); }
:root[data-theme="dark"] .noble-pts { background: radial-gradient(circle at 35% 30%, #e2c47a, #b8913f); color: #241a08; box-shadow: 0 1px 0 #6e5520; }
:root[data-theme="dark"] .need { box-shadow: 0 0 0 1px rgba(0,0,0,.4); filter: saturate(.8); }
:root[data-theme="dark"] .need-w { background: #d9dde2; }
:root[data-theme="dark"] .tk-gem .gem, :root[data-theme="dark"] .hold .gem, :root[data-theme="dark"] .chip .gem, :root[data-theme="dark"] .card-gem .gem { filter: brightness(.88) saturate(.82); }
:root[data-theme="dark"] .token .cnt { background: #e4dccb; color: #1d2523; box-shadow: 0 0 0 2px #1d2523, 0 2px 0 rgba(0,0,0,.3); }
:root[data-theme="dark"] .token .gname { color: var(--ink2); }
:root[data-theme="dark"] .token.live:not(.out) .tk-gem::before { background: radial-gradient(circle, rgba(214,178,94,.22), transparent 70%); }
:root[data-theme="dark"] .token.picked .tk-gem .gem { filter: drop-shadow(0 0 8px rgba(214,178,94,.7)); }
:root[data-theme="dark"] .deck { border-color: var(--card-edge); filter: saturate(.7) brightness(.85); }
:root[data-theme="dark"] .card { background: #2b3532; border-color: var(--card-edge); box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.3); }
:root[data-theme="dark"] .lv2.card { border-color: #55606a; }
:root[data-theme="dark"] .lv3.card { background: linear-gradient(135deg, #cfae63, #9c7631, #dcc183, #8a6526) border-box; }
:root[data-theme="dark"] .lv3.card::before { opacity: .45; }
:root[data-theme="dark"] .card.empty { background: rgba(255,255,255,.02); border-color: var(--line); }
:root[data-theme="dark"] .card-gem { background: rgba(29,37,35,.75); box-shadow: none; }
:root[data-theme="dark"] .pts { color: #f0e6cf; -webkit-text-stroke-color: #1d2523; text-shadow: 0 2px 0 #1d2523; }
:root[data-theme="dark"] .cost { box-shadow: 0 0 0 1.6px #1d2523, 0 1px 3px rgba(0,0,0,.4); filter: saturate(.8); }
:root[data-theme="dark"] .cost-w { background: linear-gradient(180deg, #e3e6ea, #b3bcc6); }
:root[data-theme="dark"] .card.can { box-shadow: 0 0 0 3px var(--green), 0 0 12px rgba(90,169,124,.4); }
:root[data-theme="dark"] .card.near { box-shadow: 0 0 0 2.5px rgba(210,162,74,.75); }
:root[data-theme="dark"] .card.on-sale::after { box-shadow: inset 0 0 0 3px var(--red); }
:root[data-theme="dark"] .sale-tag { background: var(--red); }
:root[data-theme="dark"] .actionbar { background: rgba(29,37,35,.94); border-top-color: var(--card-edge); box-shadow: 0 -6px 20px rgba(0,0,0,.3); }
:root[data-theme="dark"] .ab-text.you b { color: var(--gold2); }
:root[data-theme="dark"] .chip { background: #2b3532; box-shadow: 0 0 0 1.5px var(--line); color: var(--ink); }
:root[data-theme="dark"] .bubble { background: #3a4f6e; }
:root[data-theme="dark"] .bubble::after { border-top-color: #3a4f6e; }
:root[data-theme="dark"] .banner { background: linear-gradient(180deg, #2f3936, #252e2c); border-color: var(--card-edge); box-shadow: 0 0 0 2px var(--gold2), 0 20px 50px rgba(0,0,0,.45); }
:root[data-theme="dark"] .banner b { color: var(--gold2); }
:root[data-theme="dark"] .banner small { color: var(--ink2); }
:root[data-theme="dark"] .banner.snipe b { color: #e08a8a; }
:root[data-theme="dark"] .banner.final { background: linear-gradient(180deg, #a94848, #7e3333); }
:root[data-theme="dark"] .banner.bn-noble b { color: #c9a6e0; }
:root[data-theme="dark"] .toast { background: #3a4f6e; color: var(--ink); }
:root[data-theme="dark"] .toast.bad { background: #8e3d3d; }
:root[data-theme="dark"] .sheet { background: rgba(8,10,10,.55); }
:root[data-theme="dark"] .sheet-card { background: linear-gradient(180deg, #2b3532, #232b29); color: var(--ink); box-shadow: 0 -10px 40px rgba(0,0,0,.45); }
:root[data-theme="dark"] .sheet-card h2, :root[data-theme="dark"] .sheet-card h3 { color: var(--ink); }
:root[data-theme="dark"] .cd-sub { color: var(--gold); }
:root[data-theme="dark"] .ret-btn, :root[data-theme="dark"] .emote, :root[data-theme="dark"] .rank li, :root[data-theme="dark"] .wseat { background: #2f3a37; border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] .rank li.win { background: linear-gradient(90deg, rgba(214,178,94,.18), rgba(214,178,94,.04)); border-color: var(--gold2); }
:root[data-theme="dark"] .rank li.me .rn, :root[data-theme="dark"] .result.won h2, :root[data-theme="dark"] .rp b { color: var(--gold2); }
:root[data-theme="dark"] .gr-art { border-color: var(--card-edge); }
:root[data-theme="dark"] .wr-head { background: linear-gradient(135deg, #2f3936, #2b332f); border-color: var(--card-edge); }
:root[data-theme="dark"] .code { color: #8fb3d9; }
:root[data-theme="dark"] .wteam { background: rgba(255,255,255,.03); }
:root[data-theme="dark"] .wseat.free { background: rgba(255,255,255,.02); border-color: var(--line); }
:root[data-theme="dark"] .wseat.me { border-color: var(--gold2); }
:root[data-theme="dark"] .wr-config .size { box-shadow: 0 2px 0 #253f61; }
:root[data-theme="dark"] .wr-config .size.on { box-shadow: 0 2px 0 #6e5020; }
:root[data-theme="dark"] .kick { background: #a94848; }
:root[data-theme="dark"] .godfx .fx-card { filter: drop-shadow(0 0 20px rgba(255,240,200,.45)); }

/* 主题切换按钮 */
.theme-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme-pick button { border: 1.5px solid var(--line); background: var(--marble); color: var(--ink); border-radius: 14px; padding: 10px 6px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.theme-pick button.on { border-color: var(--gold2); box-shadow: 0 0 0 2px rgba(214,178,94,.35); }
.theme-pick i { width: 34px; height: 22px; border-radius: 6px; display: block; border: 1px solid rgba(0,0,0,.15); }
.theme-pick .t-auto i { background: linear-gradient(90deg, #ece4cf 50%, #232c2a 50%); }
.theme-pick .t-light i { background: #ece4cf; }
.theme-pick .t-dark i { background: #232c2a; }


/* ================= 一屏牌桌（手机）：不用上下滑就能看到对手、柜台和自己 ================= */
.mebar { display: none; }
.rivals { display: none; }
@media (max-width: 899px) {
  .board { gap: 6px; padding: 2px 8px 6px; }
  .rivals-full, .mine { display: none; }
  .rivals { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 6px; flex: none; padding-top: 9px; }
  .shop { flex: 1 0 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
  .board > .shop { flex: 1 1 0; min-height: 366px; }
  .nobles { flex: none; gap: 6px; padding: 1px 2px; }
  .noble { width: 46px; height: 46px; border-radius: 10px; border-width: 2px; }
  .noble-pts { width: 16px; height: 16px; font-size: 10px; right: 1px; top: 1px; }
  .noble-need { left: 1px; bottom: 1px; gap: 1px; }
  .need { width: 10px; height: 12px; font-size: 8.5px; border-radius: 2px; }
  .bank { flex: none; padding: 4px 2px 0; gap: 2px; }
  .tk-gem, .tk-gem .gem { width: 40px; height: 40px; }
  .token .cnt { min-width: 19px; height: 19px; font-size: 11.5px; top: -4px; left: calc(50% - 26px); }
  .token .gname { font-size: 10px; line-height: 1.2; }
  .pick-n { top: 26px; }
  .token.picked { transform: translateY(-5px); }
  .market { flex: 1; min-height: 252px; container-type: size; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
  .row { display: flex; justify-content: center; gap: 5px;
    --cw: min(calc((100cqh - 10px) / 3 * .76), calc((100cqw - 5px * var(--show, 4)) / (var(--show, 4) + .7))); }
  .row > .card, .row > .deck { flex: none; width: var(--cw); height: calc(var(--cw) / .76); aspect-ratio: auto; }
  .row > .deck { width: calc(var(--cw) * .7); padding: 2px 0; }
  .deck-emb { width: 62%; }
  .deck-n { font-size: 14px; }
  .deck-lv { font-size: 11px; left: 4px; top: 2px; }
  .mebar { display: block; flex: none; }
}

/* 对手小卡片 */
.rchip { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 5px 5px 4px; border-radius: 12px; text-align: left; color: var(--ink);
  background: linear-gradient(180deg, #fffdf8, #fff6e2); border: 2px solid #fff; box-shadow: var(--shadow); transition: box-shadow .2s, border-color .2s; }
.rchip:active { transform: scale(.98); }
.rchip.turn { border-color: var(--gold2); box-shadow: 0 0 0 2px rgba(245,197,66,.4), var(--shadow); }
.rchip.winner { border-color: var(--green); }
.board.teams .rchip { border-top: 3px solid var(--team); }
.rchip .order { left: -5px; top: -8px; min-width: 18px; height: 18px; font-size: 10.5px; }
.board.teams .rchip .order { background: var(--team); color: #1f2b5c; }
.rc-head { display: flex; align-items: center; gap: 3px; min-width: 0; font-size: 11.5px; font-weight: 700; }
.rc-head .ava { flex: none; width: 19px; height: 19px; border-radius: 5px; overflow: hidden; }
.rc-head .ava + .ava { margin-left: -7px; box-shadow: -1px 0 0 #fff; }
.rc-head .ava svg { width: 100%; height: 100%; display: block; }
.rc-head .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-head .tag { font-size: 9px; }
.rc-pts { flex: none; font-family: var(--latin); font-size: 18px; line-height: 1; color: #f57c00; }
.rc-pts.lead { color: var(--red); }
.rc-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
.rc-col { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.rb { width: 100%; height: 14px; border-radius: 4px; font-style: normal; font-size: 10px; font-weight: 900; font-family: var(--latin); display: grid; place-items: center; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.rb.b-w { background: linear-gradient(180deg, #fff, #dfe7f0); color: #46546a; text-shadow: none; box-shadow: inset 0 0 0 1px #c9d4e2; }
.rb.b-u { background: linear-gradient(180deg, #5b9cf6, #2563d9); } .rb.b-g { background: linear-gradient(180deg, #3fd07c, #17a058); } .rb.b-r { background: linear-gradient(180deg, #ff5a64, #d01a30); } .rb.b-k { background: linear-gradient(180deg, #5d5068, #241e2a); }
.rb.z { opacity: .28; }
.rb.none { background: none; box-shadow: none; }
.rg { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 9.5px; font-weight: 900; font-family: var(--latin); line-height: 1; border: 2px solid var(--gc); color: var(--ink); background: color-mix(in srgb, var(--gc) 18%, transparent); }
.rg.g-w { --gc: #b8c4d3; } .rg.g-u { --gc: #2f6fde; } .rg.g-g { --gc: #17a058; } .rg.g-r { --gc: #e01f36; } .rg.g-k { --gc: #6c6475; } .rg.g-y { --gc: #e0a722; }
.rg.z { opacity: .3; }
.rc-foot { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.rc-foot span { display: inline-flex; align-items: center; gap: 1px; }
.rc-foot .hot { color: var(--red); font-weight: 700; }
.rc-foot .gem { width: 10px; height: 10px; }
.rchip .bubble { top: 30px; left: 4px; }
.rivals[data-n="4"] .rc-head .nm { font-size: 10.5px; }
.rivals[data-n="4"] .rc-pts { font-size: 16px; }

/* 我的一行 */
.mebar-in { position: relative; display: flex; align-items: center; gap: 7px; padding: 6px 7px; border-radius: 14px;
  background: linear-gradient(180deg, #fffaf0, #ffefc9); border: 2px solid #ffe08a; box-shadow: var(--shadow); }
.mebar-in.turn { border-color: var(--gold2); box-shadow: 0 0 0 2px rgba(245,197,66,.45), var(--shadow); }
.mb-me { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; border: 0; background: none; padding: 0; line-height: 1; }
.mb-me .ava { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; box-shadow: 0 0 0 2px var(--gold2); }
.mb-me .ava svg { width: 100%; height: 100%; display: block; }
.mb-pts { font-family: var(--latin); font-size: 22px; font-weight: 900; color: #f57c00; margin-top: 3px; }
.mb-me small { font-size: 9.5px; color: var(--muted); font-family: var(--latin); }
.mb-hold { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mb-hold .hold-grid { gap: 3px; }
.mb-hold .bon { max-width: 30px; height: 20px; font-size: 13px; }
.mb-hold .hold .gem { max-width: 26px; }
.mb-foot { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 2px; }
.mb-foot .gem { width: 11px; height: 11px; }
.mb-slots { flex: none; display: grid; grid-template-columns: repeat(3, 36px); gap: 4px; }
.mb-slots .slot, .mb-slots .card { width: 36px; height: 50px; aspect-ratio: auto; border-radius: 7px; }
.mb-slots .slot { font-size: 15px; border-width: 1.5px; }
.mb-slots .card { border-width: 2px; }
.mb-slots .card .costs, .mb-slots .card .sale-tag { display: none; }
.mb-slots .card .card-gem { width: 14px; height: 14px; border-radius: 4px; left: 1px; top: 1px; }
.mb-slots .card .pts { font-size: 14px; right: 2px; -webkit-text-stroke-width: 1px; text-shadow: none; }
.mebar-in .bubble { top: -26px; left: 30px; }
.unit-sheet .unit { box-shadow: none; }
.unit-sheet .resv .card.small { width: 54px; }
.unit-sheet .resv .card.small .costs { display: flex; flex-direction: row; flex-wrap: wrap; position: absolute; left: 2px; bottom: 2px; }
.unit-sheet .resv .card.small .cost { width: 13px; height: 13px; font-size: 8.5px; }

/* 登录页 */
#login { min-height: 100dvh; display: flex; justify-content: center; padding: calc(14px + var(--safe-t)) 14px calc(20px + var(--safe-b)); }
.login-wrap { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 10px; }
.login-hero { text-align: center; }
.sign.small { width: 150px; margin: 0 auto -10px; }
.sign.small .temple { width: 150px; }
.sign.small .hero-tag { right: 0; top: 46px; transform: scale(.8); }
.login-hero .brand { font-size: clamp(38px, 10vw, 54px); }
.login-card { background: rgba(255,253,248,.9); border: 2px solid #fff; border-radius: 22px; padding: 16px 14px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.login-card h2 { font-family: var(--serif); font-size: 18px; margin: 0; text-align: center; letter-spacing: .06em; }
.hero-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hero-btn { padding: 0; border: 3px solid transparent; border-radius: 16px; overflow: hidden; background: none; aspect-ratio: 1; transition: transform .15s, border-color .15s, opacity .15s; opacity: .72; }
.hero-btn svg { width: 100%; height: 100%; display: block; }
.hero-btn.on { border-color: var(--gold2); opacity: 1; transform: scale(1.05); box-shadow: 0 6px 16px rgba(210,154,34,.35); }
.hero-pick-name { text-align: center; font-family: var(--serif); font-weight: 900; color: var(--gold3); font-size: 15px; min-height: 1.3em; }
.name-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.name-row input { border: 1.5px solid var(--line); background: #fff; color: var(--ink); border-radius: 14px; padding: 12px 14px; font-size: 18px; font-weight: 700; outline: none; width: 100%; }
.name-row input:focus { border-color: var(--gold2); }
.dice { width: 50px; height: 50px; font-size: 24px; border-radius: 14px; border: 1.5px solid var(--line); }
.login-go { width: 100%; }
.login-card .err { margin: 0; min-height: 1.2em; }
.me-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; border: 0; background: none; text-align: left; padding: 0; }
.me-info b { font-size: 19px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 深色、浅色护眼下的新元素 */
:root[data-theme="dark"] .rchip { background: linear-gradient(180deg, #2e3835, #283130); border-color: var(--card-edge); }
:root[data-theme="dark"] .rchip.turn { border-color: var(--gold2); box-shadow: 0 0 0 2px rgba(214,178,94,.35), var(--shadow); }
:root[data-theme="dark"] .rc-pts, :root[data-theme="dark"] .mb-pts { color: #d9a356; }
:root[data-theme="dark"] .rc-pts.lead { color: #e07b6a; }
:root[data-theme="dark"] .rb { filter: saturate(.75) brightness(.9); }
:root[data-theme="dark"] .rb.b-w { background: linear-gradient(180deg, #d9dde2, #aab3be); color: #2c3440; box-shadow: none; }
:root[data-theme="dark"] .rc-head .ava + .ava { box-shadow: -1px 0 0 #283130; }
:root[data-theme="dark"] .mebar-in { background: linear-gradient(180deg, #343c34, #2a3230); border-color: #5a5236; }
:root[data-theme="dark"] .mebar-in.turn { border-color: var(--gold2); }
:root[data-theme="dark"] .login-card { background: rgba(43,53,50,.92); border-color: var(--card-edge); }
:root[data-theme="dark"] .name-row input { background: #252e2c; border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] .dice { background: #2f3a37; border-color: var(--line); }
:root[data-theme="light"] .rchip { background: linear-gradient(180deg, #f3edde, #ece3cc); border-color: #e6dcc4; }
:root[data-theme="light"] .rchip.turn { border-color: var(--gold2); }
:root[data-theme="light"] .mebar-in { background: linear-gradient(180deg, #f2e8cf, #e9dcbb); border-color: #dcc58a; }
:root[data-theme="light"] .login-card { background: rgba(243,237,222,.92); border-color: #efe6d0; }
:root[data-theme="light"] .name-row input { background: #f8f3e6; }

@media (min-width: 900px) { .mine .slots { grid-template-columns: repeat(3, 76px); justify-content: center; width: auto; } }

/* ===== 质感数字：斜体衬线，像桌游印刷 ===== */
:root { --num: "Cinzel", Georgia, "Times New Roman", serif; --numi: Georgia, "Times New Roman", serif; }

/* ===== 玩家面板：迷你卡 + 筹码 ===== */
.hold-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--tg, 6px); align-items: start; }
.tok { --ts: 30px; position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding-bottom: calc(var(--ts) * .42); }
.tk-card { position: relative; width: calc(var(--ts) * .86); max-width: 100%; height: calc(var(--ts) * 1.12); border-radius: calc(var(--ts) * .16); display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.35); }
.tk-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(255,255,255,.45) 0 22%, transparent 23% 100%); pointer-events: none; }
.tk-card b { font: italic 700 calc(var(--ts) * .62)/1 var(--numi); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 3px rgba(0,0,0,.35); -webkit-text-stroke: .4px rgba(0,0,0,.35); }
.tk-card.b-w { background: linear-gradient(180deg, #ffffff, #d5dde8); } .tk-card.b-w b { color: #3b4658; text-shadow: 0 1px 0 #fff; -webkit-text-stroke: 0; }
.tk-card.b-u { background: linear-gradient(180deg, #4f93f3, #1f4fb8); }
.tk-card.b-g { background: linear-gradient(180deg, #4cc97a, #13804a); }
.tk-card.b-r { background: linear-gradient(180deg, #f2604a, #b51f22); }
.tk-card.b-k { background: linear-gradient(180deg, #4a4452, #141116); }
.tk-card.ghost { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.tk-card.ghost::after { display: none; }
.tk-card.ghost .tk-ic { opacity: .45; }
.tk-card.gold .gem { width: 60%; height: auto; opacity: .45; }
.tk-ic { position: absolute; right: calc(var(--ts) * -.16); top: calc(var(--ts) * -.16); width: calc(var(--ts) * .46); height: calc(var(--ts) * .46); display: grid; place-items: center; font-style: normal; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.tk-ic .gem { width: 100%; height: 100%; }
.tk-coin { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: calc(var(--ts) * .66); height: calc(var(--ts) * .66); border-radius: 50%; display: grid; place-items: center; z-index: 2;
  font: italic 700 calc(var(--ts) * .4)/1 var(--numi); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.6);
  background: radial-gradient(circle, #3a3f45 0 56%, transparent 57%), repeating-conic-gradient(var(--rim) 0 22deg, var(--str) 22deg 45deg);
  box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 2px 3px rgba(0,0,0,.5); }
.co-w { --rim: #e8edf3; --str: #9aa6b4; } .co-u { --rim: #2f6be0; --str: #a8c6ff; } .co-g { --rim: #1e9a57; --str: #9ee0b8; }
.co-r { --rim: #d4352c; --str: #ffb2a8; } .co-k { --rim: #2a2530; --str: #8d8496; } .co-y { --rim: #e2a91f; --str: #fff0b8; }
.tok:has(.tk-card:not(.ghost)) .tk-coin { bottom: 0; }
.t-s { --tg: 2px; } .t-s .tok { --ts: 19px; }
.t-s .tk-ic { display: none; }
.t-s .tk-card { border-radius: 3px; }
.t-m { --tg: 6px; } .t-m .tok { --ts: 28px; }
.t-l { --tg: 10px; } .t-l .tok { --ts: 36px; }
@media (max-width: 899px) { .mebar .t-m { --tg: 4px; } .mebar .t-m .tok { --ts: 25px; } }
:root[data-theme="light"] .tk-card.ghost { background: rgba(60,50,30,.07) !important; border-color: rgba(60,50,30,.14); }
:root[data-theme="dark"] .tk-card:not(.ghost) { filter: saturate(.85) brightness(.92); }

/* ===== 宝石库：一摞筹码 ===== */
.tk-gem { border-radius: 50%; }
.tk-gem .gem { width: 62% !important; height: 62% !important; position: relative; z-index: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)) !important; }
.tk-gem::after { content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, var(--face) 0 52%, rgba(0,0,0,.25) 53% 55%, transparent 56%), repeating-conic-gradient(var(--rim) 0 20deg, var(--str) 20deg 30deg);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35), 0 0 0 1px rgba(0,0,0,.35), var(--stack, 0 0 0 transparent), 0 3px 6px rgba(0,0,0,.35); }
.token.t-w { --rim: #eef2f6; --str: #a7b2bf; --face: #f7f9fb; --edge: #a9b4c1; }
.token.t-u { --rim: #2c66d8; --str: #b6cfff; --face: #dbe7ff; --edge: #183f8f; }
.token.t-g { --rim: #1c9554; --str: #a6e5c0; --face: #dcf3e6; --edge: #0f5c33; }
.token.t-r { --rim: #cf322a; --str: #ffbdb4; --face: #fde3df; --edge: #84191a; }
.token.t-k { --rim: #2b2631; --str: #8f8698; --face: #d9d4de; --edge: #0d0b0f; }
.token.t-y { --rim: #e0a61c; --str: #fff1bf; --face: #fff6d8; --edge: #946a0b; }
.st1 { --stack: 0 3px 0 var(--edge); }
.st2 { --stack: 0 3px 0 var(--edge), 0 5px 0 var(--rim), 0 7px 0 var(--edge); }
.st3 { --stack: 0 3px 0 var(--edge), 0 5px 0 var(--rim), 0 7px 0 var(--edge), 0 9px 0 var(--rim), 0 11px 0 var(--edge); }
.st4 { --stack: 0 3px 0 var(--edge), 0 5px 0 var(--rim), 0 7px 0 var(--edge), 0 9px 0 var(--rim), 0 11px 0 var(--edge), 0 13px 0 var(--rim), 0 15px 0 var(--edge); }
.token.live:not(.out) .tk-gem::before { z-index: 2; mix-blend-mode: screen; }
.token .cnt { font-family: var(--numi); font-style: italic; z-index: 3; }
:root[data-theme="dark"] .tk-gem::after { filter: saturate(.8) brightness(.9); }
.bank { padding-bottom: 14px; }

/* ===== 卡牌价格：彩色圆章 + 小宝石 ===== */
.cost { overflow: visible; }
.cost b { font: italic 700 1em/1 var(--numi); }
.cost-ic { position: absolute; right: -32%; bottom: -12%; width: 52%; height: 52%; display: grid; place-items: center; font-style: normal; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.cost-ic .gem { width: 100%; height: 100%; }
.costs { gap: 3px; }
.mb-slots .cost-ic, .resv .cost-ic { display: none; }
.token .gname { margin-top: 15px; }
@media (max-width: 899px) { .token .gname { display: none; } .tk-gem { margin-bottom: 14px; } .bank { padding-bottom: 2px; } }
.need { font: italic 700 11px/1 var(--numi); }
.noble.big .need { font-size: 15px; }
@media (max-width: 899px) { .need { font-size: 9.5px; } }
@media (max-width: 899px) {
  .tk-gem { margin-bottom: 7px; }
  .st2, .st3, .st4 { --stack: 0 2px 0 var(--edge), 0 4px 0 var(--rim), 0 6px 0 var(--edge); }
  .st1 { --stack: 0 2px 0 var(--edge); }
}

/* ===== 神兽特效 ===== */
.fx-baihu .fx-tint { background: radial-gradient(circle at 50% 40%, rgba(200,225,255,.55), rgba(20,34,60,.9)); }
.fx-claw .glow { stroke: #bfe6ff; stroke-width: 3.2; } .fx-claw .core { stroke: #fff; stroke-width: 1.4; }
.fx-huli .fx-tint { background: radial-gradient(circle at 50% 45%, rgba(255,190,220,.55), rgba(40,20,70,.9)); }
.fx-huli .fx-wisp { fill: #8ac8ff; filter: drop-shadow(0 0 1.5px #8ac8ff); }
.fx-huli .fx-ring { stroke: #ffd6e6; }
.fx-kun .fx-tint { background: linear-gradient(180deg, rgba(14,30,70,.55), rgba(6,20,50,.9)); }
.fx-xuanwu .fx-tint { background: radial-gradient(circle at 50% 60%, rgba(150,110,60,.55), rgba(16,12,10,.94)); }
.fx-xuanwu .fx-mist { fill: #7aa68a; }
.fx-crack .glow { stroke: #ffcf6a; stroke-width: 2.6; } .fx-crack .core { stroke: #fff4c8; stroke-width: 1; }
.fx-rise { transform-box: fill-box; transform-origin: center; animation: fxRise 2.4s var(--d, 0s) cubic-bezier(.2,.9,.3,1) both; }
@keyframes fxRise { 0% { transform: translateY(calc(var(--k) * 30px)) scale(.6); opacity: 0; } 30% { transform: translateY(0) scale(1); opacity: 1; } 80% { opacity: .9; } 100% { transform: translateY(calc(var(--k) * -8px)) scale(1.12); opacity: 0; } }

/* ======================================================================
   登录 + 大厅：和「大落保皇」「大胆掼蛋」一个系列的排法
   深青墨底 + 暗纹（山、浪、云）+ 书法大字 + 金色按钮
   ====================================================================== */
.series-screen {
  --s-bg1: #17302c; --s-bg2: #0c1816; --s-ink: #f3ead8; --s-mute: #a9b8ad; --s-gold: #e8c26a; --s-gold2: #b98a2e;
  --s-card: rgba(255,255,255,.055); --s-edge: rgba(232,194,106,.28); --s-well: rgba(0,0,0,.22);
  --s-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23f3e6c4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 44l12-16 7 8 9-14 12 22'/%3E%3Cpath d='M84 30c4-5 9-5 12 0s8 5 12 0'/%3E%3Cpath d='M86 112c4-5 9-5 12 0s8 5 12 0s8 5 12 0'/%3E%3Cpath d='M22 104c0-6 8-8 11-3c2-5 10-4 10 2c4 0 5 5 1 6H24c-3 0-4-3-2-5z'/%3E%3Cpath d='M64 80l6-6 6 6-6 6z'/%3E%3C/g%3E%3C/svg%3E");
  position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; color: var(--s-ink);
  background: radial-gradient(120% 70% at 50% 0%, var(--s-bg1), var(--s-bg2) 75%) fixed;
  padding: calc(14px + var(--safe-t)) 16px calc(28px + var(--safe-b));
}
.series-screen::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: var(--s-pat) 0 0 / 140px 140px; opacity: .07; z-index: 0; }
.series-screen > * { position: relative; z-index: 1; }
:root[data-theme="light"] .series-screen {
  --s-bg1: #f3ead6; --s-bg2: #e2d5b8; --s-ink: #3a3122; --s-mute: #7a6e58; --s-gold: #a8771c; --s-gold2: #8a5e10;
  --s-card: rgba(255,252,244,.62); --s-edge: rgba(168,119,28,.32); --s-well: rgba(120,90,40,.08);
}
:root[data-theme="light"] .series-screen::before { opacity: .09; filter: invert(1) sepia(1) saturate(2) hue-rotate(-10deg); }
.s-inner { max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.s-inner.wide { max-width: 560px; align-items: stretch; }

/* ---------- 登录 ---------- */
#login .s-inner { padding-top: 4vh; }
.mascot { width: 190px; height: 154px; cursor: pointer; }
.mascot .fox { width: 100%; height: 100%; overflow: visible; }
.mascot .m-body { animation: foxBob 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.mascot .tails { transform-box: fill-box; transform-origin: 88% 92%; animation: tailWag 2.2s ease-in-out infinite; }
.mascot.wag .m-body { animation: foxHop .7s cubic-bezier(.3,1.6,.5,1), foxBob 2.6s .7s ease-in-out infinite; }
@keyframes foxBob { 50% { transform: translateY(-3px); } }
@keyframes foxHop { 0% { transform: translateY(18px) scale(.8); opacity: 0; } 60% { transform: translateY(-8px) scale(1.04); opacity: 1; } }
@keyframes tailWag { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(5deg); } }
.s-title { font-family: var(--serif); font-weight: 900; font-size: clamp(46px, 14vw, 72px); line-height: 1; margin: 2px 0 0; letter-spacing: .06em; white-space: nowrap;
  background: linear-gradient(180deg, #fff1c4 0%, #e8c26a 45%, #b98a2e 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
:root[data-theme="light"] .s-title { background: linear-gradient(180deg, #c99a3a, #8a5e10); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 0 rgba(255,255,255,.6)); }
.s-tag { margin: 10px 0 22px; color: var(--s-mute); font-size: 15px; letter-spacing: .12em; }
.s-card { width: 100%; padding: 16px; border-radius: 22px; background: var(--s-card); border: 1px solid var(--s-edge); box-shadow: 0 10px 30px rgba(0,0,0,.18); backdrop-filter: blur(4px); }
.s-me { display: flex; align-items: center; gap: 10px; }
.s-ava { flex: none; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--s-gold), 0 4px 10px rgba(0,0,0,.3); }
.s-ava svg, .me-ava svg, .hero-btn svg { width: 100%; height: 100%; display: block; }
.s-me input { flex: 1; min-width: 0; height: 50px; border-radius: 14px; border: 1px solid var(--s-edge); background: var(--s-well); color: var(--s-ink); font-size: 18px; padding: 0 14px; outline: none; font-family: inherit; }
.s-me input::placeholder { color: var(--s-mute); opacity: .8; }
.s-me input:focus { border-color: var(--s-gold); }
.s-dice { flex: none; width: 44px; height: 50px; border-radius: 14px; border: 1px solid var(--s-edge); background: var(--s-well); font-size: 22px; }
.s-avas { display: flex; gap: 10px; overflow-x: auto; padding: 12px 4px 6px; margin: 10px -4px 0; scrollbar-width: none; scroll-snap-type: x proximity; }
.s-avas::-webkit-scrollbar { display: none; }
.series-screen .hero-btn { flex: none; width: 50px; height: 50px; aspect-ratio: auto; border-radius: 50%; padding: 0; border: 0; opacity: .7; scroll-snap-align: center; transition: transform .15s, opacity .15s, box-shadow .15s; box-shadow: 0 0 0 2px rgba(255,255,255,.12); overflow: hidden; background: none; }
.series-screen .hero-btn.on { opacity: 1; transform: scale(1.12); box-shadow: 0 0 0 3px var(--s-gold), 0 4px 10px rgba(0,0,0,.35); }
.s-hero { text-align: center; color: var(--s-gold); font-size: 13px; letter-spacing: .1em; margin: 4px 0 12px; min-height: 18px; }
.s-go { width: 100%; height: 58px; border: 0; border-radius: 16px; font-family: var(--serif); font-weight: 900; font-size: 22px; letter-spacing: .2em; color: #3a2508;
  background: linear-gradient(180deg, #ffe39a 0%, #e8b84a 55%, #c08a26 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 0 #8a5e14, 0 10px 20px rgba(0,0,0,.25); transition: transform .1s; }
.s-go:active, .s-ghost:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 0 #8a5e14; }
.s-go small, .s-ghost small { display: block; font-family: var(--sans); font-weight: 600; font-size: 11.5px; letter-spacing: .08em; opacity: .7; margin-top: 2px; }
.s-link { margin-top: 18px; background: none; border: 0; color: var(--s-gold); font-size: 17px; text-decoration: underline; text-underline-offset: 5px; }
.s-sib { margin-top: 26px; color: var(--s-mute); font-size: 14px; }
.s-sib a { color: var(--s-ink); text-underline-offset: 4px; }
#login .err { min-height: 0; margin: 8px 0 0; text-align: center; }

/* ---------- 大厅 ---------- */
.s-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 18px; }
.me-pill { justify-self: start; display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 14px 4px 4px; border-radius: 999px; border: 1px solid var(--s-edge); background: var(--s-card); color: var(--s-ink); }
.me-pill b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 7em; }
.me-ava { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.s-top-mid { text-align: center; line-height: 1.1; }
.s-top-mid b { display: block; font-family: var(--serif); font-weight: 900; font-size: 26px; color: var(--s-gold); letter-spacing: .3em; margin-right: -.3em; }
.s-top-mid small { color: var(--s-mute); font-size: 12.5px; }
.s-top-r { justify-self: end; display: flex; gap: 10px; }
.s-round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--s-edge); background: var(--s-card); color: var(--s-ink); font-size: 18px; font-weight: 800; display: grid; place-items: center; }
.s-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 6px 2px 10px; }
.s-sec h2 { margin: 0; font-family: var(--serif); font-weight: 900; font-size: 21px; color: var(--s-gold); letter-spacing: .2em; white-space: nowrap; }
.s-aside { color: var(--s-mute); font-size: 13px; text-align: right; }
.series-screen .modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.series-screen .mode { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; min-height: 0; aspect-ratio: auto; padding: 18px 6px 14px; border-radius: 20px;
  border: 1px solid var(--s-edge); background: var(--s-card); color: var(--s-ink); box-shadow: 0 8px 20px rgba(0,0,0,.15); transition: transform .15s, box-shadow .15s, border-color .15s; text-align: center; }
.series-screen .mode.on { border: 2px solid var(--s-gold); box-shadow: 0 0 0 3px rgba(232,194,106,.18), 0 10px 24px rgba(0,0,0,.25); transform: translateY(-2px); }
.mode-bg { position: absolute; inset: 0; opacity: .22; -webkit-mask: linear-gradient(180deg, transparent 20%, #000 85%); mask: linear-gradient(180deg, transparent 20%, #000 85%); pointer-events: none; }
.mode-bg svg { width: 100%; height: 100%; display: block; }
.mode.on .mode-bg { opacity: .38; }
.glyph { position: relative; font-family: var(--serif); font-weight: 900; font-size: clamp(44px, 13vw, 60px); line-height: 1; text-shadow: 0 3px 0 rgba(0,0,0,.3); }
.m-temai .glyph { color: #f07a5a; } .m-classic .glyph { color: #7fd0b4; } .m-team .glyph { color: #f0c860; }
:root[data-theme="light"] .m-temai .glyph { color: #c4442a; } :root[data-theme="light"] .m-classic .glyph { color: #2f8a6a; } :root[data-theme="light"] .m-team .glyph { color: #b07a10; }
:root[data-theme="light"] .glyph { text-shadow: 0 2px 0 rgba(255,255,255,.7); }
.mname { position: relative; margin-top: 6px; font-size: 13px; color: var(--s-mute); letter-spacing: .1em; white-space: nowrap; }
.seats { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 12px 0 10px; max-width: 92px; min-height: 18px; }
.seats i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px dashed var(--s-mute); opacity: .75; }
.seats.many i { width: 11px; height: 11px; }
.mode.on .seats i { border-color: var(--s-gold); opacity: 1; }
.mtag { position: relative; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--s-well); color: var(--s-ink); white-space: nowrap; }
.mode.on .mtag { background: var(--s-gold); color: #3a2508; font-weight: 700; }
.s-sizes { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 2px 14px; color: var(--s-mute); font-size: 14px; }
.series-screen .sizes { display: flex; gap: 8px; }
.series-screen .size { min-width: 48px; height: 40px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--s-edge); background: var(--s-card); color: var(--s-ink); box-shadow: none; transform: none; font-family: var(--serif); font-weight: 900; font-size: 18px; }
.series-screen .size small { font-family: var(--sans); font-size: 11px; font-weight: 600; margin-left: 1px; opacity: .7; }
.series-screen .size.on { background: var(--s-gold); border-color: var(--s-gold); color: #3a2508; }
.s-acts { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.s-acts .s-go { height: 64px; font-size: 20px; letter-spacing: .12em; }
.s-ghost { height: 64px; border-radius: 16px; border: 1.5px solid var(--s-gold); background: var(--s-card); color: var(--s-gold); font-family: var(--serif); font-weight: 900; font-size: 20px; letter-spacing: .12em; box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.s-ghost.slim { height: 48px; font-size: 16px; padding: 0 18px; }
.series-screen .join { display: flex; gap: 10px; margin: 12px 0 0; }
.series-screen .join input { flex: 1; min-width: 0; height: 48px; border-radius: 14px; border: 1px solid var(--s-edge); background: var(--s-well); color: var(--s-ink); padding: 0 14px; font-size: 16px; outline: none; }
.series-screen .join input::placeholder { color: var(--s-mute); }
.series-screen .open-rooms { margin-top: 22px; }
.series-screen .open-rooms ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.series-screen .room-row { width: 100%; display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--s-edge); background: var(--s-card); color: var(--s-ink); text-align: left; }
.series-screen .rid { font-family: var(--serif); color: var(--s-gold); font-weight: 900; }
.series-screen .rnames { color: var(--s-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.series-screen .rlv { color: var(--s-gold); font-size: 13px; }
.series-screen #seriesBox { margin-top: 26px; color: var(--s-ink); }
.series-screen .err { color: #ff8a7a; }
@media (max-width: 360px) { .s-acts { grid-template-columns: 1fr; } .series-screen .mode { padding: 14px 4px 12px; } }
@media (min-width: 700px) { .series-screen .mode { padding: 26px 10px 18px; } }
#login.series-screen { display: block; padding: calc(14px + var(--safe-t)) 16px calc(28px + var(--safe-b)); }
.s-inner { width: 100%; }
.s-avas { max-width: 100%; }
.series-screen .mode.on::after { display: none; }
:root .series-screen .size { background: var(--s-card); box-shadow: none; color: var(--s-ink); }
:root .series-screen .size.on { background: var(--s-gold); color: #3a2508; box-shadow: 0 3px 0 var(--s-gold2); }
.mascot { width: 230px; height: 186px; }

/* ===== 弹窗不被挡 ===== */
/* 对手小卡片在棋盘最上面，气泡往上冒会被裁掉：改成从下面冒出来 */
.rchip .bubble { top: auto; bottom: -24px; left: 50%; transform: translateX(-50%); z-index: 12; max-width: 150%; overflow: hidden; text-overflow: ellipsis; animation: bubDown .25s ease; }
@keyframes bubDown { from { transform: translate(-50%, -6px); opacity: 0; } }
.rivals { position: relative; z-index: 6; }
/* 横幅要压过底部弹窗（截胡、神兽投奔时正在看卡也能看到） */
.banner { z-index: 25; }
/* 「轮到你了」放在下面操作栏上方，不挡柜台 */
@media (max-width: 899px) { .banner.mine { top: auto; bottom: calc(150px + var(--safe-b)); transform: translate(-50%, 0) scale(.7); } .banner.mine.show { transform: translate(-50%, 0) scale(1); } }
.series-screen .size.lv { font-family: var(--serif); font-size: 15px; padding: 0 12px; letter-spacing: .06em; }
.series-screen .s-lv { margin-top: -4px; }
:root .series-screen .size.lv-zn.on { background: linear-gradient(180deg, #e8604a, #a8281a); border-color: #c43a30; color: #fff4e0; box-shadow: 0 3px 0 #6e1a10; }
.wr-lv { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; color: var(--muted); font-size: 13px; }
.wr-lv span { margin-right: 4px; }
.wr-lv .size { min-width: 0; height: 32px; padding: 0 12px; font-family: var(--serif); font-size: 14px; transform: none; }
.wr-lv b { color: var(--gold3); font-family: var(--serif); }

/* ===== 手机底栏的预留卡：直接标出还要付哪些宝石 ===== */
.mb-slots { grid-template-columns: repeat(3, 44px); gap: 5px; }
.mb-slots .slot, .mb-slots .card { width: 44px; height: 60px; }
.slot-wrap { position: relative; width: 44px; height: 60px; }
.slot-wrap .card { position: absolute; inset: 0; }
.slot-need { position: absolute; left: 1px; right: 1px; bottom: 2px; z-index: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; pointer-events: none; }
.sn { min-width: 13px; height: 13px; padding: 0 2px; border-radius: 4px; display: grid; place-items: center; font: italic 700 10px/1 Georgia, serif; font-style: italic; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5); box-shadow: 0 0 0 1px rgba(255,255,255,.85), 0 1px 2px rgba(0,0,0,.5); }
.sn.need-w { background: #eef2f6; color: #3b4658; text-shadow: none; } .sn.need-u { background: #2c66d8; } .sn.need-g { background: #1c9554; } .sn.need-r { background: #cf322a; } .sn.need-k { background: #2b2631; }
.sn.ok { opacity: .35; }
.sn.free { background: #1c9554; font: 700 9px/1 var(--sans); padding: 0 3px; }
.mb-slots .card.can { box-shadow: 0 0 0 2px #3fd07c, 0 0 10px rgba(63,208,124,.7); }
.mb-slots .card.near { box-shadow: 0 0 0 2px #e8c26a; }
:root[data-theme="dark"] .sn { box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5); }

/* ===== 等人：清爽版 ===== */
.wr-card { gap: 14px; max-width: 560px; }
.wr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 0; }
.wr-code small { display: block; color: var(--muted); font-size: 12px; letter-spacing: .1em; }
.wr-code b { font-family: var(--serif); font-weight: 900; font-size: 44px; line-height: 1; letter-spacing: .12em; color: var(--gold3); }
.wr-invite { height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--gold2); background: none; color: var(--gold3); font-weight: 800; font-size: 15px; }
.wr-sum { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.5); border: 1px solid var(--line); }
.wr-sum .glyph { font-size: 38px; text-shadow: none; flex: none; }
.wr-sum-t { flex: 1; min-width: 0; }
.wr-sum-t b { display: block; font-family: var(--serif); font-size: 17px; }
.wr-sum-t small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.wr-edit { flex: none; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: none; color: var(--ink2); font-size: 13px; font-weight: 700; }
.wr-hint { margin: -4px 0 0; text-align: center; color: var(--muted); font-size: 12.5px; }
.wr-btns { display: grid; grid-template-columns: 1fr; gap: 10px; }
.wr-btns:has(.wr-fill) { grid-template-columns: 1fr 1.3fr; }
.wr-fill, .wr-start { height: 54px; border-radius: 16px; font-family: var(--serif); font-weight: 900; font-size: 18px; letter-spacing: .08em; }
.wr-fill { border: 1.5px solid var(--gold2); background: none; color: var(--gold3); }
.wr-start { border: 0; color: #3a2508; background: linear-gradient(180deg, #ffe39a, #e8b84a 55%, #c08a26); box-shadow: 0 4px 0 #8a5e14; }
.wr-start:disabled { background: rgba(127,127,127,.18); color: var(--muted); box-shadow: none; }
.wseat { box-shadow: none; }
:root[data-theme="dark"] .wr-sum { background: rgba(255,255,255,.04); border-color: var(--line); }
:root[data-theme="dark"] .wr-code b { color: #e8c26a; }
:root[data-theme="dark"] .wr-invite, :root[data-theme="dark"] .wr-fill { color: #e8c26a; border-color: #b98a2e; }
:root[data-theme="dark"] .wr-edit { color: var(--ink); }
:root[data-theme="light"] .wr-sum { background: rgba(255,252,244,.6); }
/* 房间设置弹窗 */
.rs-row { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 10px; margin: 12px 0; }
.rs-row > span { color: var(--muted); font-size: 14px; }
.seg { display: flex; padding: 3px; gap: 3px; border-radius: 12px; background: rgba(127,127,127,.14); }
.seg button { flex: 1; height: 38px; border: 0; border-radius: 9px; background: none; color: var(--ink2); font-family: var(--serif); font-weight: 900; font-size: 16px; }
.seg button.on { background: var(--gold2); color: #3a2508; box-shadow: 0 2px 4px rgba(0,0,0,.18); }
.seg button.zn.on { background: linear-gradient(180deg, #e8604a, #a8281a); color: #fff4e0; }

/* ===== 新手引导 ===== */
#coach { position: fixed; inset: 0; z-index: 45; background: rgba(8,12,12,.45); animation: fade .2s; }
.co-ring { position: fixed; border-radius: 16px; box-shadow: 0 0 0 3px #e8c26a, 0 0 0 9999px rgba(8,12,12,.35), 0 0 24px rgba(232,194,106,.6); pointer-events: none; }
.co-tip { position: fixed; left: 16px; right: 16px; max-width: 420px; margin: 0 auto; padding: 14px 16px 12px; border-radius: 18px; background: #fffaf0; color: #2c2416; box-shadow: 0 14px 40px rgba(0,0,0,.4); animation: up .25s cubic-bezier(.2,1,.3,1); }
.co-tip b { font-family: var(--serif); font-size: 18px; color: #a8771c; }
.co-tip p { margin: 6px 0 10px; font-size: 15px; line-height: 1.55; }
.co-foot { display: flex; align-items: center; gap: 8px; }
.co-foot span { flex: 1; color: #8a7f68; font-size: 12px; }
.co-skip { border: 0; background: none; color: #8a7f68; font-size: 13px; }
.co-next { border: 0; height: 36px; padding: 0 16px; border-radius: 10px; background: linear-gradient(180deg, #ffe39a, #e8b84a 55%, #c08a26); color: #3a2508; font-weight: 800; }
:root[data-theme="dark"] .co-tip { background: #2b3532; color: var(--ink); }
:root[data-theme="dark"] .co-tip b { color: #e8c26a; }
/* 卡片详情的价格行 */
.pricelist li b { font-size: 16px; }
.ab-can { color: #3fd07c; font-size: 1.1em; }
/* 对手小卡片：这色既没卡也没宝石就不画 */
.t-s .tok:not(:has(.tk-coin)):has(.tk-card.ghost) { visibility: hidden; }

/* ===== 退回宝石 ===== */
.ret-tip { margin: 0 0 4px; }
.ret-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; margin: 12px 0 4px; }
.ret-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: 16px; transition: transform .12s, border-color .12s; }
.ret-btn b { font-family: var(--serif); font-size: 18px; line-height: 1; }
.ret-btn .gem { filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.ret-btn.on { border-color: var(--red); border-width: 2px; transform: translateY(-2px); }
.ret-btn:disabled { opacity: .45; }
.ret-n { top: -9px; right: -7px; min-width: 30px; height: 24px; padding: 0 6px; border-radius: 12px; font-size: 14px; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.ret-btns { display: grid; grid-template-columns: 1fr 1.6fr; }
.ret-btns .btn { height: 50px; font-size: 17px; }
.ret-grid { grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); gap: 8px; } .ret-btn .gem { width: 30px; height: 30px; }

/* ===== 筹码中心用宝石本色，白/黑一眼分开 ===== */
.tk-coin { background: radial-gradient(circle, var(--face) 0 56%, rgba(0,0,0,.25) 57% 59%, transparent 60%), repeating-conic-gradient(var(--rim) 0 22deg, var(--str) 22deg 45deg); color: var(--fc, #fff); }
.co-w { --face: #f6f8fb; --rim: #c9d2dd; --str: #ffffff; --fc: #2c3440; text-shadow: none; box-shadow: 0 0 0 1px #9aa6b4, 0 2px 3px rgba(0,0,0,.35); }
.co-u { --face: #2f6be0; } .co-g { --face: #1e9a57; } .co-r { --face: #d4352c; }
.co-k { --face: #1c1920; --rim: #4a4452; --str: #8d8496; }
.co-y { --face: #e8b230; --fc: #3a2508; text-shadow: none; }
/* 底栏：分数直接放在头像上面 */
.mb-me { gap: 4px; }
.mb-me .mb-pts { margin-top: 0; font-size: 24px; line-height: 1; }
.mb-me .ava { width: 40px; height: 40px; border-radius: 10px; }

/* ===== 押牌 ===== */
.token.t-y.live .tk-gem { cursor: pointer; }
.token.t-y.pledging { transform: translateY(-10px); }
.token.t-y.pledging .tk-gem::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 3px #ffd24a, 0 0 18px rgba(255,210,74,.8); animation: pulseGold 1s ease-in-out infinite; z-index: 3; }
@keyframes pulseGold { 50% { box-shadow: 0 0 0 5px rgba(255,210,74,.6), 0 0 26px rgba(255,210,74,.9); } }
.board.pledging .market .card, .board.pledging .deck { cursor: pointer; animation: pledgeWiggle 1.2s ease-in-out infinite; box-shadow: 0 0 0 2px rgba(255,210,74,.85), 0 0 14px rgba(255,210,74,.45); }
.board.pledging .market .card.empty { animation: none; box-shadow: none; }
@keyframes pledgeWiggle { 50% { transform: translateY(-2px); } }
.pledged { position: relative; width: 100%; height: 100%; }
.pledged .card { width: 100%; height: 100%; }
.pl-coin { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-12deg); display: grid; place-items: center; filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.pl-coin .gem { width: 100%; height: 100%; }
.flyer.fly-coin { z-index: 2; }
/* 买得起的牌点一下：翘起来，等第二下 */
.card.armed { transform: translateY(-8px) scale(1.04); z-index: 5; box-shadow: 0 0 0 3px #3fd07c, 0 10px 22px rgba(0,0,0,.4), 0 0 18px rgba(63,208,124,.7) !important; }
.card.armed::after { content: '再点买下'; position: absolute; left: 50%; bottom: -2px; transform: translate(-50%, 50%); z-index: 6; white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: #1c9554; color: #fff; font-size: 11px; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.mb-slots .card.armed::after { content: '再点'; font-size: 9px; padding: 1px 5px; }
.card.armed::after { bottom: 6px; transform: translateX(-50%); }
/* 先手标记：只挂在先手那家 */
.first-tag { position: absolute; left: -6px; top: -9px; z-index: 3; padding: 1px 6px; border-radius: 999px; background: linear-gradient(180deg, #ffe39a, #e8b84a); color: #3a2508; font-size: 10.5px; font-weight: 900; letter-spacing: .05em; box-shadow: 0 1px 3px rgba(0,0,0,.35); white-space: nowrap; }
.board.teams .first-tag { left: auto; right: -4px; }
.mb-me { position: relative; }
.mb-me .first-tag { left: 50%; top: -12px; transform: translateX(-50%); }
.mb-me .first-tag { top: -16px; }

/* 神兽现身特效的大标题：小屏也一行放下 */
.fx-title b { white-space: nowrap; font-size: clamp(24px, 8.5vw, 34px); letter-spacing: .08em; }
.fx-title { max-width: calc(100vw - 24px); }

/* 等人：跟在顶栏下面排，不再写死距顶 56px（iPhone 桌面版顶栏会被状态栏往下推） */
.waitroom { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; }
.wr-sum-t small { line-height: 1.5; }
#table.idle .timebar, #table.idle .ticker { display: none; }

/* ===== 顶部状态行：动态 + 轮到你的提示和按钮，合成一行 ===== */
.status { position: relative; z-index: 6; display: flex; align-items: center; min-height: 30px; margin: 2px 8px 0; padding: 0 4px; border-radius: 10px; transition: background .2s; }
.status .ticker { flex: 1; min-width: 0; height: auto; padding: 0 4px; }
.status.act .ticker { display: none; }
.status .actionbar { position: static; flex: 1; min-width: 0; display: none; gap: 6px; align-items: center; padding: 0; background: none !important; border: 0 !important; box-shadow: none !important; }
.status.act .actionbar { display: flex; }
.status.act { padding: 3px 4px 3px 10px; }
.status.you { background: linear-gradient(90deg, rgba(232,184,74,.22), rgba(232,184,74,.08)); box-shadow: inset 0 0 0 1px rgba(232,184,74,.45); }
.status.warn { background: rgba(229,57,80,.12); box-shadow: inset 0 0 0 1px rgba(229,57,80,.35); }
.status.end { background: rgba(127,127,127,.12); }
.status .ab-text { flex: 1; min-width: 0; text-align: left; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink2); }
.status .ab-text b { color: #d9822b; }
.status .ab-text .gem { vertical-align: -4px; }
.status .ab-sel { flex: 1; display: flex; align-items: center; gap: 2px; }
.status .ab-sel .gem { width: 22px; height: 22px; }
.status .ab-sel i { font-style: normal; font-weight: 900; font-size: 12px; margin: 0 4px 0 -2px; }
.ab-btn { flex: none; height: 28px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.55); color: var(--ink); font-size: 13px; font-weight: 800; }
.ab-btn.gold { border: 0; color: #3a2508; background: linear-gradient(180deg, #ffe39a, #e8b84a 55%, #c08a26); box-shadow: 0 2px 0 #8a5e14; }
.ab-btn:disabled { opacity: .45; }
:root[data-theme="dark"] .ab-btn:not(.gold) { background: rgba(255,255,255,.06); color: var(--ink); }
:root[data-theme="dark"] .status .ab-text b { color: #e8c26a; }
/* 底部不再有操作栏：牌桌一直铺到底，留出 Home 指示条的位置 */
.board { padding-bottom: calc(8px + var(--safe-b)); }
.toast { bottom: calc(96px + var(--safe-b)); }
@media (max-width: 899px) { .banner.mine { bottom: calc(110px + var(--safe-b)); } }

/* ===== 手机：神兽格子跟着剩余空间长大（--nb 由脚本算，默认 46px） ===== */
@media (max-width: 899px) {
  .nobles { gap: calc(var(--nb, 46px) * .12); }
  .nobles .noble { width: var(--nb, 46px); height: var(--nb, 46px); border-radius: calc(var(--nb, 46px) * .2); }
  .nobles .noble-pts { width: calc(var(--nb, 46px) * .34); height: calc(var(--nb, 46px) * .34); font-size: calc(var(--nb, 46px) * .21); }
  .nobles .need { width: calc(var(--nb, 46px) * .22); height: calc(var(--nb, 46px) * .26); font-size: calc(var(--nb, 46px) * .185); }
  .nobles .noble-need { gap: calc(var(--nb, 46px) * .025); left: 2px; bottom: 2px; }
  .market { justify-content: flex-start; }
}
@media (max-width: 899px) { .market { justify-content: space-evenly; } }
@media (max-width: 899px) {
  .bank .tk-gem, .bank .tk-gem .gem { width: var(--gb, 40px) !important; height: var(--gb, 40px) !important; }
  .bank .tk-gem .gem { width: calc(var(--gb, 40px) * .62) !important; height: calc(var(--gb, 40px) * .62) !important; }
}
@media (max-width: 899px) {
  /* 牌按宽度定了，剩下的高度让牌长高一点（最多比原来高 22%），画面露得更多 */
  .row > .card, .row > .deck { height: min(calc((100cqh - 10px) / 3), calc(var(--cw) / .76 * 1.22)); }
}

/* ======================================================================
   奖励：钱袋条 / 山海馈赠 / 印章 / 图鉴 / 宝阁 / 宝匣 / 头像框 / 桌布
   ====================================================================== */
.wallet-bar { display: flex; align-items: center; gap: 8px; margin: -6px 0 16px; }
.wb-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--s-edge); background: var(--s-card); color: var(--s-ink); font-size: 15px; }
.wb-item b { font-family: var(--serif); font-weight: 900; }
.wb-ic { width: 24px; height: 24px; display: inline-grid; }
.wb-ic svg { width: 100%; height: 100%; }
.wb-sep { width: 1px; height: 18px; background: var(--s-edge); margin: 0 4px; }
.wb-item.ready #walletScroll { color: #ff8a5a; }
.wb-item.ready { box-shadow: 0 0 0 2px rgba(255,138,90,.55); animation: readyPulse 1.6s ease-in-out infinite; }
@keyframes readyPulse { 50% { box-shadow: 0 0 0 4px rgba(255,138,90,.25); } }
.wb-btn { flex: none; height: 44px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--s-gold); background: none; color: var(--s-gold); font-family: var(--serif); font-weight: 900; font-size: 16px; letter-spacing: .1em; }
.wb-btn.gold { border: 0; color: #3a2508; background: linear-gradient(180deg, #ffe39a, #e8b84a 55%, #c08a26); box-shadow: 0 3px 0 #8a5e14; }

/* 印章：朱红方章，两个字竖排 */
.seal { display: inline-grid; grid-template-columns: 1fr; place-items: center; width: 46px; height: 46px; padding: 3px; border-radius: 6px; background: #c23a2b; color: #fbe9d0; font-family: var(--serif); font-weight: 900; font-size: 15px; line-height: 1.05; box-shadow: inset 0 0 0 2px #fbe9d0, inset 0 0 0 3.5px #c23a2b, 0 2px 4px rgba(0,0,0,.3); transform: rotate(-4deg); }
.seal b { display: block; }
.seal.press { animation: sealPress .6s calc(var(--i, 0) * 120ms + 350ms) cubic-bezier(.3,1.6,.5,1) both; }
@keyframes sealPress { 0% { transform: rotate(-4deg) scale(2.4); opacity: 0; } 60% { transform: rotate(-4deg) scale(.92); opacity: 1; } 100% { transform: rotate(-4deg) scale(1); } }
.stars { display: block; color: #e8b84a; font-size: 11px; letter-spacing: 1px; }

/* 山海馈赠 */
.bao { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px 14px; background: radial-gradient(circle at 50% 40%, rgba(40,30,10,.55), rgba(8,10,10,.86)); animation: fade .25s; }
.bao.out { animation: fade .25s reverse both; }
.bao-card { width: 100%; max-width: 520px; max-height: 92dvh; overflow-y: auto; padding: 20px 16px 18px; border-radius: 22px; background: linear-gradient(180deg, #2c2416, #1b1610); box-shadow: 0 0 0 2px #b98a2e, 0 0 0 5px rgba(232,194,106,.18), 0 30px 80px rgba(0,0,0,.6); color: #f6ead0; text-align: center; animation: up .35s cubic-bezier(.2,1.2,.3,1); }
.bao-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; }
.bao-head b { font-family: var(--serif); font-weight: 900; font-size: 26px; letter-spacing: .3em; margin-right: -.3em; background: linear-gradient(180deg, #fff1c4, #e8c26a 50%, #b98a2e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bao-head i { flex: 1; max-width: 70px; height: 2px; background: linear-gradient(90deg, transparent, #e8c26a); }
.bao-head i:last-child { background: linear-gradient(90deg, #e8c26a, transparent); }
.bao-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 12px 8px; }
.bao-item { display: flex; flex-direction: column; align-items: center; gap: 5px; animation: itemPop .5s calc(var(--i) * 120ms + 200ms) cubic-bezier(.3,1.7,.5,1) both; }
@keyframes itemPop { 0% { transform: translateY(20px) scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
.bao-ico { position: relative; width: 72px; height: 72px; border-radius: 14px; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, rgba(255,226,160,.18), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1.5px rgba(232,194,106,.45); }
.bao-ico svg { width: 54px; height: 54px; }
.bao-ico em { position: absolute; right: 4px; bottom: 2px; font: italic 900 16px/1 Georgia, serif; color: #fff; text-shadow: 0 1px 0 #000, 0 0 4px rgba(0,0,0,.8); }
.bao-tag { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 1px 6px; border-radius: 999px; background: #e2402a; color: #fff; font-size: 10px; font-weight: 800; box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.bao-name { font-size: 12.5px; line-height: 1.3; color: #f6ead0; }
.it-beast { width: 60px; height: 60px; border-radius: 12px; overflow: hidden; display: block; box-shadow: 0 0 0 2px #e8c26a; }
.it-beast svg { width: 100%; height: 100%; display: block; }
.it-beast-wrap.new .bao-ico { box-shadow: inset 0 0 0 2px #ffcf6a, 0 0 18px rgba(255,207,106,.6); }
.it-frame { width: 58px; height: 58px; border-radius: 12px; overflow: hidden; display: block; }
.it-frame svg { width: 100%; height: 100%; display: block; }
.bao-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 12px; font-size: 14px; color: #d8c8a0; }
.bao-foot svg { width: 22px; height: 22px; }
.bao-foot span { margin-right: 10px; font-family: var(--serif); font-weight: 900; }
.bao-ok { width: min(100%, 260px); height: 52px; border: 0; border-radius: 14px; font-family: var(--serif); font-weight: 900; font-size: 20px; letter-spacing: .3em; color: #3a2508; background: linear-gradient(180deg, #ffe39a, #e8b84a 55%, #c08a26); box-shadow: 0 4px 0 #8a5e14; }

/* 头像框 */
.fr-bronze, .fr-silver, .fr-gold, .fr-jade { box-shadow: 0 0 0 2px var(--fr1), 0 0 0 4px var(--fr2) !important; }
.fr-bronze { --fr1: #e0a070; --fr2: #8a4f24; }
.fr-silver { --fr1: #f2f6fa; --fr2: #8a96a6; }
.fr-gold { --fr1: #ffe39a; --fr2: #b98a2e; }
.fr-jade { --fr1: #b8f2d8; --fr2: #1c7a5a; animation: jadeGlow 2.4s ease-in-out infinite; }
@keyframes jadeGlow { 50% { box-shadow: 0 0 0 2px var(--fr1), 0 0 0 4px var(--fr2), 0 0 12px #52c79a; } }
.w-title { display: block; font-size: 11px; color: #c23a2b; font-weight: 800; line-height: 1.2; }

/* 登录页锁住的化身 */
.series-screen .hero-btn.locked { position: relative; opacity: .45; filter: grayscale(.6); }
.hero-btn .lock { position: absolute; right: -2px; bottom: -2px; font-style: normal; font-size: 13px; }

/* 图鉴 */
.codex h3 small, .shop h3 small { font-size: 13px; color: var(--muted); font-weight: 600; margin-left: 6px; }
.cx-tabs { margin: 8px 0; }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.cx-beast { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.4); color: var(--ink); }
.cx-art { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; display: block; box-shadow: 0 0 0 2px #e8c26a; }
.cx-art svg { width: 100%; height: 100%; display: block; }
.cx-beast b { font-family: var(--serif); font-size: 15px; }
.cx-beast small { font-size: 10.5px; color: var(--muted); line-height: 1.3; }
.cx-beast.locked .cx-art { filter: brightness(0) opacity(.35); box-shadow: 0 0 0 2px var(--line); }
.cx-stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cx-stamp { display: grid; grid-template-columns: 50px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.4); color: var(--ink); }
.cx-stamp .seal { grid-row: span 2; }
.cx-stamp b { font-family: var(--serif); font-size: 14px; }
.cx-stamp small { font-size: 11px; color: var(--muted); line-height: 1.3; }
.cx-stamp.locked .seal { background: #b8b0a0; box-shadow: inset 0 0 0 2px #f2ece0, inset 0 0 0 3.5px #b8b0a0; opacity: .5; }
.cx-stamp.on { border: 2px solid #c23a2b; }
:root[data-theme="dark"] .cx-beast, :root[data-theme="dark"] .cx-stamp, :root[data-theme="dark"] .shop-it { background: rgba(255,255,255,.04); }

/* 宝阁 */
.shop .wallet { float: right; display: flex; align-items: center; gap: 4px; font-size: 15px; }
.shop .wallet svg, .shop .price svg { width: 20px; height: 20px; vertical-align: -5px; }
.box-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: 8px 0 4px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(90deg, rgba(196,68,42,.12), transparent); color: var(--ink); text-align: left; }
.box-btn svg { width: 48px; height: 48px; flex: none; }
.box-btn b { display: block; font-family: var(--serif); font-size: 17px; }
.box-btn small { color: var(--muted); }
.box-btn.ready { border: 2px solid #e2402a; animation: readyPulse 1.6s ease-in-out infinite; }
.box-btn.ready svg { animation: boxShake 1.2s ease-in-out infinite; }
@keyframes boxShake { 0%, 60%, 100% { transform: none; } 70% { transform: rotate(-8deg); } 80% { transform: rotate(8deg); } 90% { transform: rotate(-4deg); } }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.shop-it { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.45); color: var(--ink); }
.shop-it b { font-family: var(--serif); font-size: 15px; }
.shop-it small { font-size: 11px; color: var(--muted); }
.shop-it .price { margin-top: 2px; padding: 3px 10px; border-radius: 999px; background: rgba(28,122,90,.12); color: #1c7a5a; font-weight: 800; font-size: 13px; }
.shop-it.own .price { background: rgba(127,127,127,.14); color: var(--ink2); }
.shop-it.on { border: 2px solid #e8b84a; }
.shop-it.on .price { background: #e8b84a; color: #3a2508; }
.sw { display: block; width: 84px; height: 56px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.av-sw { width: 56px; height: 56px; }
.av-sw svg { width: 100%; height: 100%; display: block; }
.sw.big { width: 160px; height: 110px; }
.av-sw.big { width: 110px; height: 110px; }

/* 桌布：牌桌背景（宝阁里换） */
.tb-sw.tb-qinglv, body[data-tb="tb-qinglv"] #table { background: radial-gradient(120% 60% at 50% 0%, #e4efe0, #b9d3c2 60%, #8fb5a4); }
.tb-sw.tb-dunhuang, body[data-tb="tb-dunhuang"] #table { background: radial-gradient(120% 60% at 50% 0%, #f4e0c4, #e0b48a 60%, #b8784a); }
.tb-sw.tb-xinghe, body[data-tb="tb-xinghe"] #table { background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 15%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 70%, #fff, transparent), radial-gradient(1px 1px at 85% 60%, #fff, transparent), radial-gradient(120% 70% at 50% 0%, #2a3a6a, #121a36 60%, #0a0e20); }
.tb-sw.tb-xueyu, body[data-tb="tb-xueyu"] #table { background: radial-gradient(120% 60% at 50% 0%, #ffffff, #dfe8f2 55%, #b8c8dc); }
body[data-tb="tb-xinghe"] #table { color: #eef2ff; --ink: #eef2ff; --ink2: #c8d0ea; --muted: #9aa6c8; }
body[data-tb]:not([data-tb=""]) #table .rchip, body[data-tb]:not([data-tb=""]) #table .mebar-in { backdrop-filter: blur(2px); }

/* 开宝匣 */
.box-open { display: flex; flex-direction: column; gap: 22px; }
.bx-stage { position: relative; width: 260px; height: 260px; display: grid; place-items: center; }
.bx-rays { position: absolute; inset: -40px; background: repeating-conic-gradient(rgba(255,226,160,.35) 0 8deg, transparent 8deg 22deg); border-radius: 50%; -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%); opacity: 0; animation: rays 6s linear .9s infinite, fadeIn .4s .9s forwards; }
@keyframes rays { to { transform: rotate(360deg); } }
@keyframes fadeIn { to { opacity: 1; } }
.bx-box { position: absolute; width: 130px; height: 130px; animation: boxOpen 1.1s ease-in both; }
.bx-box svg { width: 100%; height: 100%; }
@keyframes boxOpen { 0% { transform: scale(.6); } 15% { transform: scale(1); } 25%, 45%, 65% { transform: rotate(-10deg); } 35%, 55%, 75% { transform: rotate(10deg); } 85% { transform: scale(1.25); opacity: 1; filter: brightness(1.6); } 100% { transform: scale(1.6); opacity: 0; } }
.bx-prize { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #f6ead0; opacity: 0; animation: prizeIn .6s 1s cubic-bezier(.3,1.7,.5,1) forwards; }
@keyframes prizeIn { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.bx-prize b { font-family: var(--serif); font-size: 22px; color: #ffe39a; }
.bx-prize small { color: #d8c8a0; }
.prize-jade svg { width: 96px; height: 96px; }
.box-open .bao-ok { opacity: 0; animation: fadeIn .3s 1.5s forwards; }
.cx-beast.locked .cx-art { filter: grayscale(1) brightness(.32) blur(1.2px); }
.box-open { background: radial-gradient(circle at 50% 40%, rgba(60,40,10,.8), rgba(6,8,8,.95)); }
.bx-prize b { text-shadow: 0 2px 8px rgba(0,0,0,.8); }

/* ===== 手感：按下回弹 ===== */
button, .card, .token, .deck, .noble, .rchip { -webkit-user-select: none; user-select: none; }
.btn:active, .ab-btn:active, .s-go:active, .s-ghost:active, .wb-btn:active, .size:active, .mode:active, .hero-btn:active, .shop-it:active, .cx-beast:active, .cx-stamp:active { transform: scale(.94); transition: transform .06s; }
.token:active .tk-gem, .row > .card:active, .deck:active, .noble:active, .rchip:active { transform: scale(.92); transition: transform .06s; }
/* 轮到谁：头像外一圈慢慢转的金光 */
.rchip.turn .ava, .mebar-in.turn .mb-me .ava { position: relative; overflow: visible; }
.rchip.turn .ava::before, .mebar-in.turn .mb-me .ava::before { content: ''; position: absolute; inset: -3px; border-radius: 10px; background: conic-gradient(#ffe39a, transparent 30%, #e8b84a 50%, transparent 80%, #ffe39a); z-index: -1; animation: ringSpin 1.6s linear infinite; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
.rchip .ava, .mb-me .ava { isolation: isolate; }
/* 分数涨的时候跳一下 */
.pts-up { animation: ptsUp .7s cubic-bezier(.3,1.8,.5,1); display: inline-block; }
@keyframes ptsUp { 30% { transform: scale(1.6); color: #3fd07c; } }
/* 买下的牌飞回去时翻个面 */
.flyer.fly-card { animation: flipFly .65s ease-in-out; }
@keyframes flipFly { 50% { filter: brightness(1.3) drop-shadow(0 0 12px rgba(255,226,160,.9)); } }

/* ===== 山海馈赠：一卷宣纸手卷（替换原来的金色卡片） ===== */
:root { --xuan: #efe6d2; --mo: #2b2620; --mo2: #6b5d4a; --zhu: #b8382a; --shiqing: #2f5e7a; --shilv: #4e8b6a; --nijin: #a8823a; }
.juan-wrap { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: calc(var(--safe-t, 0px) + 16px) 10px calc(var(--safe-b, 0px) + 16px); background: rgba(20, 16, 12, .9); animation: fade .25s; }
.juan-wrap.out { animation: fade .25s reverse both; }
.juan { --w: min(calc(100vw - 42px), 520px); display: flex; align-items: stretch; max-height: calc(100dvh - 140px); }
.juan .roller { position: relative; z-index: 1; flex: none; width: 11px; margin: -10px 0; background: #4a3020; border-radius: 3px; }
.juan .roller::before, .juan .roller::after { content: ""; position: absolute; left: -2px; right: -2px; height: 9px; border-radius: 2px; background: var(--nijin); }
.juan .roller::before { top: -4px; } .juan .roller::after { bottom: -4px; }
.juan .roller:first-child { animation: rollL .8s cubic-bezier(.3,.7,.2,1) both; }
.juan .roller:last-child { animation: rollR .8s cubic-bezier(.3,.7,.2,1) both; }
@keyframes rollL { from { transform: translateX(calc(var(--w) / 2)); } }
@keyframes rollR { from { transform: translateX(calc(var(--w) / -2)); } }
.juan .paper { width: var(--w); display: flex; flex-direction: column; background-color: var(--xuan); color: var(--mo); border-top: 7px solid var(--shiqing); border-bottom: 7px solid var(--shiqing);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: unroll .8s cubic-bezier(.3,.7,.2,1) both; }
@keyframes unroll { from { clip-path: inset(0 50%); } to { clip-path: inset(0 0); } }
.juan-cols { flex: 1; min-height: 0; display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: flex-start; gap: 18px 12px; padding: 22px 16px 14px; overflow-y: auto; scrollbar-width: none; }
.juan-title { flex: none; writing-mode: vertical-rl; margin: 0 0 0 4px; padding-left: 14px; border-left: 1px solid var(--nijin); font-family: var(--serif); font-weight: 900; font-size: 26px; letter-spacing: .4em; color: var(--mo); }
.gift { position: relative; flex: none; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: inkIn .7s calc(.75s + var(--i) * .15s) ease-out both; }
@keyframes inkIn { from { opacity: 0; filter: blur(4px); } }
.g-ico { width: 52px; height: 52px; display: grid; place-items: center; }
.g-ico svg { width: 100%; height: 100%; display: block; }
.g-beast { width: 52px; height: 52px; display: block; padding: 2px; border: 1px solid var(--mo); background: var(--xuan); }
.g-frame { width: 52px; height: 52px; display: block; border-radius: 50%; overflow: hidden; }
.g-n { font-family: var(--serif); font-weight: 900; font-size: 20px; line-height: 1; color: var(--zhu); }
.g-name { writing-mode: vertical-rl; font-family: var(--serif); font-weight: 700; font-size: 16px; letter-spacing: .18em; color: var(--mo); }
.g-mark { writing-mode: vertical-rl; padding: 3px 1px; border: 1px solid var(--zhu); color: var(--zhu); font-size: 11px; line-height: 1; letter-spacing: .1em; font-family: var(--serif); font-weight: 700; }
.g-note { writing-mode: vertical-rl; font-size: 11px; color: var(--mo2); letter-spacing: .1em; }
.juan-foot { margin: 0 18px; padding: 10px 0 14px; border-top: 1px solid rgba(43,38,32,.25); text-align: center; font-family: var(--serif); font-size: 13.5px; color: var(--mo2); }
.juan-ok { height: 48px; padding: 0 36px; border: 0; border-radius: 3px; background: var(--zhu); color: var(--xuan); font-family: var(--serif); font-weight: 900; font-size: 18px; letter-spacing: .3em; text-indent: .3em; animation: inkIn .4s 1.1s both; }
.juan-ok:active { transform: translateY(1px); background: #9a2e22; }
.juan-ok:focus-visible, .pp-tabs button:focus-visible, .cx-beast:focus-visible, .cx-stamp:focus-visible, .shop-it:focus-visible { outline: 2px solid var(--shiqing); outline-offset: 2px; }

/* 星：三粒泥金小菱 */
.stars { display: flex; justify-content: center; gap: 3px; font-size: 0; }
.stars i { width: 6px; height: 6px; transform: rotate(45deg); border: 1px solid var(--nijin); }
.stars i.on { background: var(--nijin); }

/* 印：朱砂方印，盖下去不弹 */
.seal { width: 44px; height: 44px; padding: 2px; border-radius: 3px; background: var(--zhu); color: var(--xuan); font-size: 15px; box-shadow: inset 0 0 0 2px var(--zhu), inset 0 0 0 3.5px var(--xuan); transform: rotate(-3deg); opacity: .93; }
.seal.press { animation: stampDown .45s calc(.8s + var(--i, 0) * .15s) cubic-bezier(.5,0,.8,.4) both; }
@keyframes stampDown { 0% { transform: rotate(-3deg) scale(1.5); opacity: 0; } 70% { transform: rotate(-3deg) scale(.97); opacity: .93; } 100% { transform: rotate(-3deg) scale(1); opacity: .93; } }
.sheet-card.paper .box-btn.ready svg { animation: none; }

/* 开宝匣：同一张宣纸语言 */
.box-open .bx-rays { display: none; }
.box-open { background: rgba(24, 19, 14, .86); }
.bx-prize b { color: var(--xuan); text-shadow: none; letter-spacing: .1em; }
.bx-prize small { color: #cbbd9f; }
.box-open .juan-ok { animation: inkIn .4s 1.5s both; }

/* 图鉴 / 印谱 / 宝阁：宣纸底，石青裱边 */
.sheet-card.paper { --ink: var(--mo); --ink2: var(--mo2); --muted: #8a7b64; --line: rgba(43,38,32,.3); background-color: var(--xuan); color: var(--mo); border-top: 7px solid var(--shiqing); }
.pp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.pp-head h3 { margin: 0; font-family: var(--serif); font-weight: 900; font-size: 24px; letter-spacing: .25em; color: var(--mo); }
.pp-tabs { display: flex; gap: 14px; }
.pp-tabs button { padding: 6px 0; border: 0; background: none; color: var(--mo2); font-family: var(--serif); font-weight: 700; font-size: 14px; border-bottom: 2px solid transparent; }
.pp-tabs button.on { color: var(--mo); border-bottom-color: var(--zhu); }
.pp-note { margin: 4px 0 12px; font-size: 12.5px; line-height: 1.6; color: var(--mo2); }
.sheet-card.paper .cx-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 14px 10px; }
.sheet-card.paper .cx-beast { padding: 0; gap: 5px; border: 0; border-radius: 0; background: none; color: var(--mo); }
.sheet-card.paper .cx-art { width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; padding: 3px; border: 1px solid var(--mo); box-shadow: none; background: var(--xuan); }
.sheet-card.paper .cx-beast b { font-size: 14px; letter-spacing: .08em; }
.sheet-card.paper .cx-beast.locked .cx-art { filter: none; border-style: dashed; border-color: rgba(43,38,32,.4); }
.sheet-card.paper .cx-beast.locked .cx-art svg { filter: grayscale(1) contrast(.5) brightness(1.5); opacity: .28; }
.sheet-card.paper .cx-beast.locked b { color: #a89a80; }
.sheet-card.paper .cx-stamps { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 16px 8px; }
.sheet-card.paper .cx-stamp { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; border-radius: 0; background: none; text-align: center; color: var(--mo); }
.sheet-card.paper .cx-stamp .seal { width: 50px; height: 50px; font-size: 17px; margin-bottom: 2px; }
.sheet-card.paper .cx-stamp b { font-size: 13px; }
.sheet-card.paper .cx-stamp small { font-size: 10.5px; line-height: 1.4; color: var(--mo2); }
.sheet-card.paper .cx-stamp em { font-style: normal; font-size: 10.5px; color: var(--zhu); }
.sheet-card.paper .cx-stamp.locked .seal { background: none; color: rgba(184,56,42,.3); box-shadow: inset 0 0 0 1.5px rgba(184,56,42,.3); opacity: 1; }
.sheet-card.paper .cx-stamp.locked b { color: #a89a80; }
.sheet-card.paper .cx-stamp.on { border: 0; }
.sheet-card.paper .cx-stamp.on b { color: var(--zhu); border-bottom: 1.5px solid var(--zhu); }
.sheet-card.paper .shop .wallet { float: none; display: flex; gap: 12px; font-family: var(--serif); font-weight: 900; color: var(--mo); }
.sheet-card.paper .shop .wallet i { font-style: normal; display: inline-flex; align-items: center; gap: 3px; }
.sheet-card.paper .shop h4 { margin: 14px 0 8px; font-family: var(--serif); font-size: 15px; letter-spacing: .2em; color: var(--mo); padding-bottom: 4px; border-bottom: 1px solid rgba(43,38,32,.2); }
.sheet-card.paper .shop-it { border: 1px solid rgba(43,38,32,.3); border-radius: 3px; background: none; color: var(--mo); }
.sheet-card.paper .shop-it .price { padding: 0; border-radius: 0; background: none; color: var(--zhu); font-family: var(--serif); font-weight: 900; }
.sheet-card.paper .shop-it.own .price { background: none; color: var(--shiqing); }
.sheet-card.paper .shop-it.on { border: 1.5px solid var(--zhu); }
.sheet-card.paper .shop-it.on .price { background: none; color: var(--mo2); }
.sheet-card.paper .sw { border-radius: 2px; box-shadow: 0 0 0 1px rgba(43,38,32,.4); }
.sheet-card.paper .box-btn { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 6px; width: 100%; padding: 12px; border: 1px solid rgba(43,38,32,.35); border-radius: 3px; background: rgba(47,94,122,.07); color: var(--mo); text-align: left; box-shadow: none; animation: none; }
.sheet-card.paper .box-btn > svg, .sheet-card.paper .box-btn > .ic { grid-row: span 2; }
.sheet-card.paper .box-btn svg { width: 52px; height: 52px; }
.sheet-card.paper .box-btn b { font-family: var(--serif); font-size: 17px; letter-spacing: .1em; display: block; }
.sheet-card.paper .box-btn small { font-size: 12px; color: var(--mo2); }
.sheet-card.paper .box-btn.ready { border-color: var(--zhu); }
.slips { display: flex; gap: 4px; }
.slips i { width: 7px; height: 18px; border: 1px solid var(--mo2); border-radius: 1px; }
.slips i.on { background: var(--nijin); border-color: var(--nijin); }

/* 大厅钱袋：去掉金渐变和呼吸光 */
.wb-btn.gold { background: var(--zhu); color: #f4ead6; box-shadow: none; }
.wb-item.ready { box-shadow: none; animation: none; }
.wb-item.ready #walletScroll { color: var(--zhu); }
.wb-item { position: relative; }
.wb-item.ready::after { content: ""; position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--zhu); }
@media (prefers-reduced-motion: reduce) { .juan .roller, .juan .paper, .gift, .juan-ok, .seal.press { animation: none !important; } }
.sheet-card.paper .btn.ghost { background: none; border: 1px solid rgba(43,38,32,.45); border-radius: 3px; color: var(--mo); box-shadow: none; font-family: var(--serif); letter-spacing: .2em; }

/* ===== 匹配 ===== */
.me-txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.15; }
.me-txt small { font-size: 11px; color: var(--s-gold); font-weight: 700; white-space: nowrap; }
.me-txt small:empty { display: none; }
.s-acts.one { grid-template-columns: 1fr; }
.s-acts.one .s-go { height: 72px; font-size: 26px; letter-spacing: .3em; }
.s-more { border: 1px solid var(--s-edge); border-radius: 16px; background: var(--s-card); padding: 0 12px; }
.s-more summary { list-style: none; cursor: pointer; padding: 12px 2px; font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--s-ink); display: flex; align-items: center; justify-content: space-between; }
.s-more summary::-webkit-details-marker { display: none; }
.s-more summary::after { content: "展开"; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--s-mute); }
.s-more[open] summary::after { content: "收起"; }
.s-more[open] { padding-bottom: 12px; }
.s-more .s-acts { margin-top: 10px; grid-template-columns: 1fr 1fr; }
.s-more .s-ghost { height: 56px; font-size: 17px; }

.mm { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: calc(var(--safe-t, 0px) + 20px) 20px calc(var(--safe-b, 0px) + 20px); background: rgba(10,18,16,.94); color: #f3ead8; animation: fade .2s; }
.mm.hidden { display: none; }
.mm-card { width: min(360px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.mm-card h2 { margin: 8px 0 0; font-family: var(--serif); font-weight: 900; font-size: 26px; letter-spacing: .25em; text-indent: .25em; }
.mm-dial { width: 150px; height: 150px; color: #e8c26a; }
.mm-dial svg { width: 100%; height: 100%; }
.mm-needle { transform-origin: 60px 60px; animation: needle 3.2s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes needle { 0% { transform: rotate(-30deg); } 50% { transform: rotate(40deg); } 100% { transform: rotate(-30deg); } }
.mm-time { margin: 0; font-family: var(--latin); font-size: 40px; font-weight: 900; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.mm-sub { margin: 0; font-size: 14px; color: #a9b8ad; }
.mm-rank { margin: 6px 0 14px; font-size: 14px; color: #a9b8ad; }
.mm-rank b { color: #e8c26a; font-family: var(--serif); }
.mm .s-ghost { min-width: 140px; }
.mm-seats { list-style: none; margin: 14px 0 6px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; }
.mm-seats li { width: 72px; display: flex; flex-direction: column; align-items: center; gap: 4px; animation: seatIn .4s calc(var(--i) * 110ms) ease-out both; }
.mm-seats .ava { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; display: block; box-shadow: 0 0 0 2px rgba(232,194,106,.35); }
.mm-seats .ava svg { width: 100%; height: 100%; display: block; }
.mm-seats li.me .ava { box-shadow: 0 0 0 3px #e8c26a; }
.mm-seats b { font-size: 13px; max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-seats small { font-size: 11px; color: #a9b8ad; }
@keyframes seatIn { from { opacity: 0; transform: translateY(10px); } }

/* ===== 互动道具 ===== */
.props-row { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.props-row > span { font-size: 13px; color: var(--muted); }
.prop-btn { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 44px; min-width: 56px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.5); color: var(--ink); font-size: 14px; }
.prop-btn i { font-style: normal; font-size: 22px; }
.prop-btn small { font-size: 12px; color: var(--muted); }
.prop-btn:disabled { opacity: .4; }
.prop-btn.wide { padding: 0 16px; }
:root[data-theme="dark"] .prop-btn { background: rgba(255,255,255,.06); }
.prop-fly { position: fixed; z-index: 70; width: 36px; height: 36px; font-size: 32px; line-height: 36px; text-align: center; pointer-events: none; }
.prop-hit { position: fixed; z-index: 70; width: 48px; height: 48px; font-size: 40px; line-height: 48px; text-align: center; pointer-events: none; animation: propHit .9s ease-out forwards; }
@keyframes propHit { 0% { transform: scale(.4); opacity: 0; } 25% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1) translateY(-18px); opacity: 0; } }
.fw { position: fixed; z-index: 70; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%; pointer-events: none; }

/* ===== 结算：段位 ===== */
.juan-rank { margin: 0 18px; padding: 8px 0 2px; text-align: center; font-family: var(--serif); font-size: 15px; color: var(--mo); border-top: 1px solid rgba(43,38,32,.25); }
.juan-rank b { color: var(--shiqing); font-weight: 900; margin: 0 4px; }
.juan-rank span { margin-left: 8px; font-weight: 900; }
.juan-rank.up span { color: var(--shilv); } .juan-rank.down span { color: var(--zhu); }
.juan-rank em { font-style: normal; margin-left: 8px; padding: 1px 6px; border: 1px solid var(--zhu); color: var(--zhu); font-size: 12px; }

/* ===== 宝库 ===== */
.cx-tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 14px 10px; }
.tr-it { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--mo); }
.tr-ico { width: 62px; height: 62px; display: block; }
.tr-ico svg { width: 100%; height: 100%; }
.tr-it b { font-family: var(--serif); font-size: 14px; }
.tr-it small { font-size: 11px; color: var(--mo2); }
.tr-it.r2 small { color: var(--shiqing); } .tr-it.r3 small { color: var(--zhu); }
.tr-it.locked .tr-ico { opacity: .22; filter: grayscale(1); }
.tr-it.locked b { color: #a89a80; }

/* ===== 宝阁：分类 ===== */
.shop-tabs { margin: 14px 0 4px; overflow-x: auto; scrollbar-width: none; gap: 16px; }
.shop-tabs button { flex: none; }
.sheet-card.paper .shop-it { position: relative; }
.ic-sw, .pr-sw { display: grid; place-items: center; width: 84px; height: 56px; background: rgba(43,38,32,.04); }
.ic-sw svg { width: 44px; height: 44px; }
.pr-sw { font-size: 30px; line-height: 1; grid-template-rows: 1fr auto; padding-top: 4px; }
.pr-sw small { font-size: 10.5px; color: var(--mo2); }
.shop-cell { position: relative; display: grid; }
.shop-cell > .shop-it { width: 100%; }
.shop-it .try, .shop-cell > .try { z-index: 3; cursor: pointer; font-family: inherit; line-height: 1.5; position: absolute; top: 6px; right: 6px; padding: 1px 7px; border: 1px solid rgba(43,38,32,.35); border-radius: 3px; font-size: 11px; color: var(--mo2); background: var(--xuan); }
.shop-it.soon { opacity: .6; }
.shop-it.soon .price { color: var(--mo2) !important; }
.bk-sw { position: relative; background: #3b5f7a; }
.bk-sw i { position: absolute; inset: 6px 22px; border-radius: 4px; }
.bk-sw.bk-yun, body[data-back="bk-yun"] .deck { background-color: #2f5e7a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24'%3E%3Cpath d='M2 18c4-8 10-8 12 0c2-6 8-6 10 0M22 8c3-5 8-5 10 0c2-4 6-4 8 0' stroke='%23e8dcc0' stroke-width='1.4' fill='none' opacity='.55'/%3E%3C/svg%3E"); }
.bk-sw.bk-jin, body[data-back="bk-jin"] .deck { background-color: #1f1a16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 2h12v12H5V5h6v6H8' stroke='%23c9a24a' stroke-width='1.2' fill='none'/%3E%3C/svg%3E"); }
body[data-back="bk-yun"] .deck, body[data-back="bk-jin"] .deck { border-color: #e8dcc0; }
body[data-back="bk-jin"] .deck { border-color: #c9a24a; }
.tb-sw.tb-xuan, body[data-tb="tb-xuan"] #table { background: #efe8d8; }
.tb-sw.tb-zhusha, body[data-tb="tb-zhusha"] #table { background: radial-gradient(120% 60% at 50% 0%, #c5523a, #8f2a1c 70%); }
body[data-tb="tb-zhusha"] #table { color: #fbefe0; --ink: #fbefe0; --ink2: #f0d8c4; --muted: #e2b8a4; }

/* ===== 省电 ===== */
/* 页面在后台：所有动画暂停 */
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }
/* 轮到谁的旋转光圈：改成静止的金边，常驻旋转太耗电 */
.rchip.turn .ava::before, .mebar-in.turn .mb-me .ava::before { animation: none; background: #e8b84a; }
/* 三级卡的流光：每次刷新牌桌都会重播，持续重绘很费电，改成静止的一道高光 */
.lv3.card::before { animation: none; background-position: 60% 0; opacity: .5; }
/* 省电模式：装饰动画、模糊、特效全部关掉 */
body.lite *, body.lite *::before, body.lite *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
body.lite .mm-needle { animation: none !important; }
body.lite .lv3.card::before, body.lite .godfx .fx-svg { display: none; }
body.lite * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.lite .card, body.lite .deck, body.lite .token, body.lite .rchip, body.lite .mebar-in { box-shadow: none !important; }
.wr-match { text-align: center; padding: 40px 16px; } .wr-match h2 { font-family: var(--serif); letter-spacing: .2em; }
/* 宣纸面板在深色、浅色主题下都保持纸色 */
:root .sheet-card.paper, :root[data-theme="dark"] .sheet-card.paper, :root[data-theme="light"] .sheet-card.paper { background: var(--xuan); color: var(--mo); }
:root[data-theme="dark"] .sheet-card.paper h2, :root[data-theme="dark"] .sheet-card.paper h3, :root[data-theme="dark"] .sheet-card.paper h4 { color: var(--mo); }
:root[data-theme="dark"] .sheet-card.paper .shop-it, :root[data-theme="dark"] .sheet-card.paper .cx-beast, :root[data-theme="dark"] .sheet-card.paper .cx-stamp { background: none; color: var(--mo); }

/* ===== 轮到你 ===== */
/* 屏幕四周金边：一层单独的边框，只改透明度闪两下（不重画），之后静止 */
body.my-turn #table::after { content: ""; position: fixed; inset: 0; z-index: 7; pointer-events: none; border: 3px solid #e8b84a; will-change: opacity; }
#table.turn-flash::after { animation: turnEdge .4s ease-in-out 4 alternate; }
@keyframes turnEdge { from { opacity: 1; } to { opacity: .25; } }
/* 我的那一行 */
body.my-turn .mebar-in { border-color: #e8b84a; box-shadow: 0 0 0 3px rgba(232,184,74,.55), 0 6px 18px rgba(232,184,74,.35); }
:root[data-theme="dark"] body.my-turn .mebar-in { background: linear-gradient(180deg, #4a4428, #35321f); }
.mb-me { position: relative; }
body.my-turn .mebar-in .first-tag { display: none; }
/* 顶上状态条：整条金色 + 倒计时 */
.status.you.turn { background: linear-gradient(90deg, #f0c45a, #e8b84a); box-shadow: 0 2px 10px rgba(232,184,74,.4); }
.status.you.turn .ab-text, .status.you.turn .ab-text b { color: #3a2508; }
.status.you.turn .ab-text b:first-child { font-size: 15px; }
.ab-sec { flex: none; min-width: 34px; text-align: right; font-family: var(--latin); font-weight: 900; font-size: 15px; color: #3a2508; font-variant-numeric: tabular-nums; }
.ab-sec.hot { color: #b3261e; }
body.lite #table.turn-flash::after { animation: none; }

/* ===== iOS 发热：牌桌上去掉一直在跑的动画和昂贵的滤镜 ===== */
/* 常驻循环动画：改成静止（每一帧都要重画，是发热主因） */
.turn-dot { animation: none; box-shadow: 0 0 0 3px rgba(245,197,66,.35); }
.roominfo .final-tag { animation: pulse 1.2s 3; }
.fr-jade { animation: none; box-shadow: 0 0 0 2px var(--fr1), 0 0 0 4px var(--fr2), 0 0 8px #52c79a !important; }
/* 牌桌上重复很多次的小图标：drop-shadow 滤镜每个都要单独离屏绘制，全部去掉 */
#table .hold .gem, #table .tk-gem .gem, #table .cost-ic, #table .deck-emb, .ret-btn .gem, .flyer .gem { filter: none !important; }
#table .token.picked .tk-gem .gem { filter: none !important; }
#table .token.picked .tk-gem { box-shadow: 0 0 0 3px rgba(255,200,40,.9); border-radius: 50%; }
.token.live:not(.out) .tk-gem::before { mix-blend-mode: normal !important; }
/* 毛玻璃：iOS 上很耗 GPU */
#table *, .sheet-card, .s-card, .profile { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* 固定背景：iOS 滚动时会整页重画 */
body, :root[data-theme="light"] body, :root[data-theme="dark"] body, .series-screen { background-attachment: scroll !important; }
body.at-table::before { display: none; }
/* 飞牌：去掉滤镜动画（每帧都要离屏重画），只靠位移 */
.flyer.fly-card { animation: none; }
.flyer { contain: layout style; }

/* ===== 扩展玩法 ===== */
.s-ext .sizes { flex-wrap: wrap; justify-content: flex-end; }
.size.ext { position: relative; min-width: 52px; padding: 0 10px; font-family: var(--serif); font-weight: 900; }
.size.ext.locked { opacity: .55; }
.size.ext .lk { font-style: normal; font-size: 10px; margin-right: 2px; }
.size.ext small { display: block; font-family: var(--sans); font-size: 9.5px; font-weight: 700; line-height: 1; margin-top: -2px; }
.ext-note { margin: -4px 2px 4px; font-size: 12.5px; line-height: 1.5; color: var(--s-mute); min-height: 0; }
.ext-note:empty { display: none; }
.roominfo .ri-ext { background: #8a5a2a; color: #fff; }

/* 西域奇货 */
.card.orient { outline: 2px solid #c98a3a; outline-offset: -2px; }
.card .fx-tag { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1px 2px; background: rgba(110,60,20,.88); color: #ffe8bf; font-size: clamp(8px, 13cqw, 11px); font-weight: 800; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }
.card.orient .costs { bottom: 16%; }
.card-gem .pair-ic { font-family: var(--serif); font-weight: 900; font-size: 13px; color: #8a5a2a; }
.card-gem .x2 { position: absolute; right: -6px; bottom: -6px; font-style: normal; font-size: 10px; font-weight: 900; color: #fff; background: #c4442a; border-radius: 6px; padding: 0 3px; line-height: 14px; }

/* 名城 */
.nobles.cities { gap: 6px; }
.city { flex: 1 1 0; min-width: 0; max-width: 130px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 2px 4px; align-items: center; padding: 5px 7px; border-radius: 10px;
  border: 1.5px solid #b98a2e; background: linear-gradient(180deg, #fff8e6, #f3e2b8); color: #3a2a12; text-align: left; }
.city b { font-family: var(--serif); font-size: 15px; letter-spacing: .1em; }
.city .c-pts { font-family: var(--latin); font-weight: 900; font-size: 15px; color: #b5462f; }
.city .c-pts small { font-family: var(--sans); font-size: 10px; margin-left: 1px; }
.city .c-need { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 4px; }
.city.close { box-shadow: 0 0 0 2px #5cb85c; }
.city.taken { opacity: .6; }
.city em { grid-column: 1 / -1; font-style: normal; font-size: 11px; font-weight: 800; color: #b5462f; }
:root[data-theme="dark"] .city { background: linear-gradient(180deg, #3a3426, #2c2a22); color: #f1e6cc; border-color: #8a6a2a; }
.nd { display: inline-flex; align-items: center; gap: 1px; font-size: 11px; font-weight: 800; line-height: 1; }
.nd .gem { width: 12px; height: 12px; }
.nd-any { padding: 1px 4px; border-radius: 4px; background: rgba(0,0,0,.08); }

/* 驿站：挂在神兽后面的一小排 */
.nobles.has-posts { flex-wrap: wrap; }
.posts { flex: 1 0 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.post { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 2px; border-radius: 8px; border: 1px solid rgba(138,90,42,.45); background: rgba(255,248,230,.75); color: #3a2a12; }
.post b { font-family: var(--serif); font-size: 12px; }
.post .c-need { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.post .flags { display: flex; gap: 2px; min-height: 6px; }
.post .flags i, .card .forts i { width: 7px; height: 9px; background: var(--fc); clip-path: polygon(0 0, 100% 15%, 100% 70%, 0 85%); display: block; }
.post.mine { border-color: #e8b84a; box-shadow: 0 0 0 1.5px #e8b84a; }
:root[data-theme="dark"] .post { background: rgba(255,255,255,.05); color: #f1e6cc; }

/* 镇物 */
.card .forts { position: absolute; right: 2px; bottom: 18%; z-index: 3; display: flex; gap: 1px; padding: 2px 3px; border-radius: 5px; background: rgba(0,0,0,.55); }
.card .forts i { width: 9px; height: 12px; }
.card.forted.other { filter: none; }
.card.forted.other::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(0,0,0,.28); pointer-events: none; border-radius: inherit; }
.card.fort-pick { box-shadow: 0 0 0 2px #e8b84a !important; cursor: pointer; }
.noble.locked-mine::after { content: "订"; position: absolute; right: 2px; top: 2px; z-index: 2; padding: 0 3px; border-radius: 4px; background: #c4442a; color: #fff; font-size: 10px; font-weight: 900; }
.s-ext .sizes { flex-wrap: nowrap; gap: 5px; }
.s-ext .size.ext { min-width: 0; flex: 1 1 0; padding: 0 4px; font-size: 14px; }
.s-ext > span { white-space: nowrap; }
.s-ext .size.ext { flex-direction: column; line-height: 1.1; white-space: nowrap; }
.s-ext .size.ext.locked { border-style: dashed; }
.s-ext .size.ext small { font-size: 9px; margin: 1px 0 0; opacity: .85; }
/* 后手补偿的黄金：第一轮挂「补」字 */
.tok.gift { position: relative; cursor: help; }
.tok .gift-tag { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); z-index: 2; padding: 0 3px; border-radius: 4px; background: #c4442a; color: #fff; font-style: normal; font-size: 9.5px; font-weight: 900; line-height: 13px; pointer-events: none; }
.tok.gift .tk-coin { animation: giftPop .5s ease-out 2; }
@keyframes giftPop { 50% { transform: scale(1.35); } }

/* ===== 充值 ===== */
.promo { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px 8px 8px; border-radius: 14px; border: 1px solid rgba(196,68,42,.55); background: linear-gradient(90deg, rgba(196,68,42,.22), rgba(196,68,42,.06)); color: var(--s-ink); text-align: left; }
.promo.hidden { display: none; }
.pr-seal { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 4px; background: #b8382a; color: #f6ead0; font-family: var(--serif); font-weight: 900; font-size: 13px; writing-mode: vertical-rl; letter-spacing: .1em; transform: rotate(-4deg); }
.pr-txt { flex: 1; min-width: 0; }
.pr-txt b { display: block; font-family: var(--serif); font-size: 15px; }
.pr-txt small { display: block; font-size: 12px; color: var(--s-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-go { flex: none; font-size: 13px; font-weight: 800; color: #e58a6f; }
.packs { display: grid; gap: 8px; margin: 10px 0 4px; }
.pack { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 10px; padding: 10px; border-radius: 4px; border: 1px solid rgba(43,38,32,.35); background: none; color: var(--mo); text-align: left; }
.pack.pk-first { border-color: var(--zhu); background: rgba(184,56,42,.06); }
.pack.done { opacity: .5; }
.pk-txt b { display: block; font-family: var(--serif); font-size: 16px; }
.pk-txt small { display: block; font-size: 12px; line-height: 1.45; color: var(--mo2); }
.pk-txt em { display: block; font-style: normal; font-size: 12px; color: var(--shilv); margin-top: 2px; }
.pk-price { font-family: var(--serif); font-weight: 900; font-size: 18px; color: var(--zhu); }
.pack.done .pk-price { font-size: 13px; color: var(--mo2); }
.month-ic { font-family: var(--serif); font-weight: 900; font-size: 26px; color: #f6ead0; background: #2f5e7a !important; }
.month-ic.big { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 4px; }
.pay-test { margin: 6px 0; padding: 6px 10px; border-radius: 4px; background: rgba(47,94,122,.1); color: var(--shiqing); font-size: 12.5px; }
.pay-ov { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(20,16,12,.7); animation: fade .2s; }
.pay-card { width: min(340px, 100%); padding: 22px 20px 18px; border-radius: 6px; background: #fbf7ee; color: #2b2620; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.pay-card h3 { margin: 4px 0; font-family: var(--serif); font-size: 22px; letter-spacing: .1em; }
.pay-sub { margin: 0; font-size: 12px; color: #8a7b64; letter-spacing: .2em; }
.pay-desc { margin: 0 0 8px; font-size: 13px; color: #6b5d4a; line-height: 1.5; }
.pay-amt { margin: 10px 0; font-family: var(--serif); color: #b8382a; font-size: 18px; }
.pay-amt b { font-size: 40px; font-family: var(--latin); }
.pay-btns { display: flex; gap: 10px; margin-top: 12px; }
.pay-btns button { flex: 1; height: 46px; border-radius: 4px; font-family: var(--serif); font-weight: 900; font-size: 16px; }
.pay-no { border: 1px solid rgba(43,38,32,.35); background: none; color: #2b2620; }
.pay-yes { border: 0; background: #b8382a; color: #fbf7ee; }
.pay-yes:disabled { opacity: .6; }
.g-sw { width: 52px !important; height: 40px !important; }
.g-prop { font-size: 34px; }
.vip { flex: none; display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 2px; border-radius: 3px; background: #b8382a; color: #f6ead0; font-style: normal; font-size: 10px; font-weight: 900; font-family: var(--serif); }
/* 限定装扮的画在 skins.js 里 */
.pay-terms { margin: 12px 0 0; font-size: 12px; color: #8a7b64; }
.pay-terms a, .pp-note a { color: #b8382a; }

/* ===== 博古架宝阁 ===== */
.sheet-card.paper .shop-grid.shelf { gap: 18px 10px; padding: 4px 2px 10px; }
.sheet-card.paper .shop-it.niche { position: relative; padding: 12px 6px 10px; border: 0; border-radius: 0; background: linear-gradient(180deg, rgba(43,38,32,.06), rgba(43,38,32,.015) 70%); box-shadow: inset 0 0 0 1px rgba(110,74,40,.28); }
/* 架子的木板 */
.sheet-card.paper .shop-it.niche::after { content: ""; position: absolute; left: -5px; right: -5px; bottom: -9px; height: 8px; background: linear-gradient(180deg, #8a5a32, #5e3a1e); border-radius: 1px; box-shadow: 0 2px 3px rgba(0,0,0,.18); }
.shop-it.niche .stand { position: relative; display: grid; place-items: center; padding-bottom: 6px; }
/* 一束光打在物件上 */
.shop-it.niche .stand::before { content: ""; position: absolute; left: 50%; top: -12px; width: 120%; height: calc(100% + 14px); transform: translateX(-50%); background: radial-gradient(60% 55% at 50% 40%, rgba(255,240,200,.55), transparent 70%); pointer-events: none; }
.shop-it.niche .stand .sw { position: relative; box-shadow: 0 6px 10px -4px rgba(0,0,0,.45), 0 0 0 1px rgba(43,38,32,.4); }
.sheet-card.paper .shop-it.niche.r2, .shop-it.niche.r2 { box-shadow: inset 0 0 0 1.5px rgba(92,148,131,.7); }
.sheet-card.paper .shop-it.niche.r3, .shop-it.niche.r3 { box-shadow: inset 0 0 0 1.5px #aab4c0; background: linear-gradient(180deg, rgba(170,180,192,.16), rgba(170,180,192,.03) 70%); }
.sheet-card.paper .shop-it.niche.r4, .shop-it.niche.r4 { box-shadow: inset 0 0 0 1.5px #c9a24a; background: linear-gradient(180deg, rgba(201,162,74,.18), rgba(201,162,74,.03) 70%); }
.sheet-card.paper .shop-it.niche.r5, .shop-it.niche.r5 { box-shadow: inset 0 0 0 2px #a9c8f5, inset 0 0 22px rgba(170,140,255,.28); background: linear-gradient(160deg, rgba(201,166,255,.18), rgba(143,216,255,.12) 40%, rgba(159,240,192,.12) 70%, rgba(255,224,138,.16)); }
.sheet-card.paper .shop-it.niche.lim, .shop-it.niche.lim { box-shadow: inset 0 0 0 1.5px #b8382a; background: linear-gradient(180deg, rgba(184,56,42,.10), rgba(184,56,42,.02) 70%); }
.rare { position: absolute; left: 6px; top: 6px; z-index: 2; padding: 1px 5px; border-radius: 2px; font-style: normal; font-family: var(--serif); font-size: 10.5px; font-weight: 900; letter-spacing: .1em; color: #fbf7ee; }
/* 品阶签：陶土、青铜、錾银、鎏金、琉璃，御制（节日限定） */
.rare.r1 { background: #a0623a; }
.rare.r2 { background: linear-gradient(180deg, #5c9483, #2f5e52); }
.rare.r3 { background: linear-gradient(180deg, #f2f5f8, #9aa6b4); color: #232a33; }
.rare.r4 { background: linear-gradient(180deg, #f3d27a, #b8862e); color: #2b2008; }
.rare.r5 { background: linear-gradient(100deg, #c9a6ff, #8fd8ff 35%, #9ff0c0 65%, #ffe08a); color: #1d1638; }
.rare.r-lim { background: #b8382a; box-shadow: inset 0 0 0 1px #e9c46a; }
.sets { display: grid; gap: 6px; }
.set-row { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; padding: 8px 10px; border: 1px dashed rgba(43,38,32,.3); }
.set-row b { font-family: var(--serif); }
.set-dots { display: flex; gap: 4px; }
.set-dots i { width: 10px; height: 10px; transform: rotate(45deg); border: 1px solid #a8823a; }
.set-dots i.on { background: #a8823a; }
.set-row small { font-size: 12px; color: var(--mo2); }
/* 礼包 */
.pack { position: relative; grid-template-columns: 96px 1fr auto !important; }
.pk-pic { width: 96px; height: 70px; display: grid; place-items: center; overflow: hidden; box-shadow: 0 6px 12px -6px rgba(0,0,0,.5), 0 0 0 1px rgba(43,38,32,.35); background: #fff; }
.pk-pic .skin-pic { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-pic.month { background: #e8efe6; } .pk-pic.month svg { height: 62px; }
.pack.pk-yaochi { border: 1.5px solid #c9a24a !important; background: linear-gradient(90deg, rgba(201,162,74,.18), transparent) !important; }
.pk-price { display: flex; flex-direction: column; align-items: flex-end; }
.pk-price s { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--mo2); }
.pk-txt em.until { color: var(--zhu); }
.pack .try { position: absolute; right: 8px; bottom: 6px; }
/* 试穿 */
.fit-ov, .uv-ov { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 20px; background: rgba(20,16,12,.82); animation: fade .2s; }
.fit-card { width: min(320px, 100%); padding: 18px; background: #fbf7ee; color: #2b2620; text-align: center; border-radius: 4px; }
.fit-sub { margin: 0; font-size: 12px; letter-spacing: .3em; color: #8a7b64; }
.fit-card h3 { margin: 2px 0 12px; font-family: var(--serif); letter-spacing: .1em; }
.fit-phone { margin: 0 auto; width: 210px; padding: 8px; border-radius: 22px; background: #222; }
.fit-table { height: 300px; border-radius: 15px; padding: 26px 10px 10px; display: flex; flex-direction: column; gap: 14px; background: radial-gradient(120% 70% at 50% 0%, #2c3a35, #1b2421); overflow: hidden; }
.fit-table.tb-sw { width: auto; height: 300px; border-radius: 15px; }
.fit-row { display: flex; gap: 6px; justify-content: center; }
.fit-deck { width: 42px; height: 58px; border-radius: 6px; border: 2px solid #fff; display: grid; place-items: center; color: #fff; font: 900 12px var(--latin); background: linear-gradient(160deg, #64b5f6, #1565c0); }
.fit-gem { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8, transparent 40%), var(--c); box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.fit-row.cards { flex-wrap: wrap; }
.fit-c { width: 40px; height: 54px; border-radius: 6px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); }
.fit-note { font-size: 12px; color: #6b5d4a; margin: 12px 0; }
/* 揭幕 */
.uv-ov { grid-template-rows: auto auto auto; gap: 14px; align-content: center; }
.uv-stage { position: relative; width: 240px; height: 180px; display: grid; place-items: center; }
.uv-pic { width: 220px; height: 160px; display: grid; place-items: center; overflow: hidden; box-shadow: 0 16px 30px rgba(0,0,0,.5); background: #fbf7ee; }
.uv-pic .skin-pic, .uv-pic .sw { width: 100%; height: 100%; object-fit: cover; display: block; }
.uv-pic.r3 { box-shadow: 0 0 0 3px #dfe5ec, 0 16px 30px rgba(0,0,0,.5), 0 0 30px rgba(223,229,236,.35); }
.uv-pic.r4 { box-shadow: 0 0 0 3px #e9c46a, 0 16px 30px rgba(0,0,0,.5), 0 0 40px rgba(233,196,106,.45); }
.uv-pic.r5 { box-shadow: 0 0 0 3px #b8d8ff, 0 16px 30px rgba(0,0,0,.5), 0 0 46px rgba(170,140,255,.5), 0 0 80px rgba(120,230,200,.3); }
.uv-ic svg { width: 110px; height: 110px; }
/* 红绸：盖着，0.7 秒后掀开飞走 */
.uv-silk { position: absolute; inset: -6px; background: repeating-linear-gradient(100deg, #a3241a 0 14px, #c23a2b 14px 30px, #8e1a12 30px 40px); box-shadow: inset 0 -20px 30px rgba(0,0,0,.35); transform-origin: 50% 0; animation: silkOff 1s .7s cubic-bezier(.6,0,.4,1) forwards; }
.uv-silk::after { content: ""; position: absolute; left: 50%; top: 40%; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #e9c46a 0 40%, #b8862e 41% 55%, transparent 56%); }
@keyframes silkOff { 40% { transform: translateY(-10%) skewX(-6deg) scaleY(.9); } 100% { transform: translateY(-140%) skewX(-14deg) scaleY(.4); opacity: 0; } }
.uv-rays { position: absolute; inset: -60px; pointer-events: none; background: radial-gradient(circle, rgba(255,226,160,.5), transparent 60%); opacity: 0; animation: fadeIn .6s 1.3s forwards; z-index: -1; }
.uv-txt { width: min(300px, 90vw); text-align: center; color: #f6ead0; opacity: 0; animation: fadeIn .5s 1.4s forwards; }
.uv-txt .rare { position: static; display: inline-block; margin-bottom: 6px; }
.uv-txt h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 26px; letter-spacing: .2em; }
.uv-txt p { margin: 0; font-size: 14px; color: #d8c8a0; line-height: 1.6; font-family: var(--serif); }
.uv-ok { opacity: 0; animation: fadeIn .3s 1.7s forwards; }
body.lite .uv-silk { animation-duration: .01s; animation-delay: 0s; }
/* 入座特效 */
.entr { position: fixed; inset: 0; z-index: 65; pointer-events: none; display: grid; place-items: center; }
.entr .en-txt { position: relative; text-align: center; padding: 10px 26px; background: rgba(20,16,12,.72); border-radius: 4px; animation: enTxt 2.4s ease-out both; }
.entr .en-txt b { display: block; font-family: var(--serif); font-size: 24px; letter-spacing: .15em; color: #f6ead0; }
.entr .en-txt small { font-family: var(--serif); font-size: 14px; letter-spacing: .3em; color: #e9c46a; }
@keyframes enTxt { 0% { opacity: 0; transform: scale(.85); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.entr.en-yaochi .en-art { position: absolute; left: 0; top: 40%; width: 220px; height: 90px; background: radial-gradient(60% 50% at 50% 60%, #f6dc8a, #e9c46a 50%, transparent 72%); filter: blur(1px); animation: cloudIn 2.2s cubic-bezier(.3,.6,.3,1) both; }
@keyframes cloudIn { from { transform: translateX(-240px); opacity: 0; } 30% { opacity: 1; } 70% { transform: translateX(calc(50vw - 110px)); opacity: 1; } to { transform: translateX(calc(50vw - 110px)) translateY(-30px); opacity: 0; } }
.entr.en-suichao .en-art { position: absolute; inset: 0; background: radial-gradient(4px 4px at 20% 30%, #ffd65a, transparent), radial-gradient(3px 3px at 75% 25%, #ff7a4a, transparent), radial-gradient(5px 5px at 60% 70%, #ffd65a, transparent), radial-gradient(3px 3px at 30% 75%, #ff7a4a, transparent), radial-gradient(4px 4px at 85% 60%, #ffd65a, transparent); animation: sparks 1.2s steps(6) 2; }
@keyframes sparks { 50% { transform: scale(1.15); opacity: .4; } }
/* 节日活动 */
.uv-txt .uv-why { margin: 0 0 8px; font-size: 12.5px; letter-spacing: .25em; color: #e9c46a; }
.promo.ev { border-color: rgba(233,196,106,.7); background: linear-gradient(90deg, rgba(184,38,26,.32), rgba(184,38,26,.08)); }
.promo.ev .pr-seal { background: #b8261a; color: #f6e2a8; }
.promo .pr-txt small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pay-how { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--s-ink2, #6b5d4a); }
.acct-row { display: flex; justify-content: flex-end; margin: -10px 0 10px; min-height: 28px; }

/* 状态条 + 倒计时挪到牌桌里：一级牌下面、自己那行上面；内容太长要滚动时贴在底部 */
.dock { position: sticky; bottom: 0; z-index: 6; flex: none; display: flex; flex-direction: column; gap: 4px; margin: -4px 0 -2px; }
.dock .timebar { margin: 0 2px; }
.dock .status { margin: 0; }
@media (min-width: 900px) {
  .board { grid-template-rows: auto auto 1fr; grid-template-areas: "shop dock" "shop mine" "shop rivals"; }
  .dock { grid-area: dock; position: static; margin: 0; }
}
/* 卡背在宝阁里竖着摆，跟真牌一样的比例，图案看得全 */
.shop-it .sw.bk-sw { width: 44px; height: 70px; border-radius: 6px; }
.shop-it.niche .stand:has(.bk-sw) { min-height: 70px; }
/* ===== 卡面主题 ===== */
/* 认色：主题把画面统一了色调，牌边上加一圈本色，一眼分得清 */
.card[class*="fc-"] { --fc-edge: #ccc; box-shadow: inset 0 0 0 2.5px var(--fc-edge), var(--shadow); }
.card[class*="fc-"].b-w { --fc-edge: #e8eef5; } .card[class*="fc-"].b-u { --fc-edge: #3b6fd6; } .card[class*="fc-"].b-g { --fc-edge: #2f9e5f; }
.card[class*="fc-"].b-r { --fc-edge: #d8443a; } .card[class*="fc-"].b-k { --fc-edge: #4a3a5a; }
.card[class*="fc-"] .card-art { inset: 2.5px; border-radius: 7px; filter: none !important; }
.card[class*="fc-"] .card-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
/* 剪纸：纸纹 + 刀口锯齿边 */
.card.fc-jianzhi .card-art::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 8L8 0' stroke='%23000' stroke-opacity='.06'/%3E%3C/svg%3E"); box-shadow: inset 0 0 0 3px rgba(246,234,210,.9); }
/* 水墨：宣纸纤维 + 晕开的边 */
.card.fc-shuimo .card-art::after { background: radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(241,233,214,.55)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M2 10q10 -3 18 2M14 30q8 2 20 -3M30 8q3 6 8 7' stroke='%23786a50' stroke-opacity='.18' fill='none'/%3E%3C/svg%3E"); }
/* 青花：瓷面的釉光 */
.card.fc-qinghua .card-art::after { background: linear-gradient(135deg, rgba(255,255,255,.35), transparent 35%, transparent 70%, rgba(255,255,255,.15)); box-shadow: inset 0 0 0 2px rgba(31,78,156,.5); }
/* 敦煌：壁画的龟裂 */
.card.fc-dunhuang .card-art::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 20l12 4l6 -10l14 6l10 -8l18 4M10 60l6 -14l16 -2l4 -12l16 2M30 0l2 10' stroke='%233a1d14' stroke-opacity='.22' fill='none'/%3E%3C/svg%3E"), radial-gradient(110% 90% at 50% 40%, transparent 55%, rgba(90,40,20,.35)); }
/* 金漆：漆面高光 */
.card.fc-jinqi .card-art::after { background: linear-gradient(160deg, rgba(255,240,200,.22), transparent 30%); box-shadow: inset 0 0 0 1.5px rgba(233,196,106,.7); }
/* 琉璃：玻璃的折光 */
.card.fc-liuli .card-art::after { background: linear-gradient(120deg, rgba(255,255,255,.4), transparent 25%, transparent 60%, rgba(255,255,255,.25) 75%, transparent 85%); }
/* 宝阁里的卡面样品：两张牌叠着放 */
.shop-it .sw.fc-sw { position: relative; width: 70px; height: 70px; background: none; box-shadow: none !important; overflow: visible; }
.fc-sw svg { position: absolute; width: 40px; height: 60px; border-radius: 5px; box-shadow: 0 4px 8px -2px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.2); }
.fc-sw svg:first-child { left: 4px; top: 6px; transform: rotate(-8deg); }
.fc-sw svg:last-child { left: 26px; top: 4px; transform: rotate(7deg); }
.fit-faces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; }
.fit-faces .card { position: relative; aspect-ratio: .76; }
/* 宝石皮肤样品 */
.shop-it .sw.gm-sw { width: 96px; height: 70px; background: radial-gradient(70% 70% at 50% 45%, rgba(255,240,200,.5), transparent 70%); box-shadow: none !important; display: grid; grid-template-columns: repeat(3, 1fr); place-items: center; gap: 2px; padding: 4px; overflow: visible; }
.gm-sw svg { filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.fit-gems { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; padding: 16px 8px; border-radius: 14px; background: radial-gradient(80% 80% at 50% 40%, #2c3e35, #18241f); }
.fit-gems.small { gap: 2px; padding: 8px; margin-top: 0; background: #e9dfc8; }
/* ===== 新头像框（全桌都看得见） ===== */
.fr-qingzhu { box-shadow: 0 0 0 2px #7fbf8f, 0 0 0 4px #2f6b4f !important; }
.fr-baizhan { box-shadow: 0 0 0 2px #c08a52, 0 0 0 4px #3a3a40, 0 0 0 5px #c08a52 !important; }
.fr-changsheng { box-shadow: 0 0 0 2px #f3d27a, 0 0 0 4px #b8261a, 0 0 0 5px #f3d27a !important; }
.fr-cangjia { box-shadow: 0 0 0 2px #f2e6cc, 0 0 0 4px #5a2e1c, 0 0 0 5px #f2e6cc !important; }
.fr-shangwang { box-shadow: 0 0 0 2px #fff3c4, 0 0 0 4px #c9962e, 0 0 0 6px #2f8a6a, 0 0 10px rgba(233,196,106,.6) !important; }
.fr-qingtong { box-shadow: 0 0 0 2px #8fbfa8, 0 0 0 4px #4f7d6c, 0 0 0 5px #b08048 !important; }
.fr-yinsi { box-shadow: 0 0 0 1.5px #ffffff, 0 0 0 3px #9aa6b4, 0 0 0 4.5px #e8eef5, 0 0 0 6px #6f7c8c !important; }
.fr-yuhuan { box-shadow: 0 0 0 3px #eef3ea, 0 0 0 4.5px #b8c8b0, 0 0 8px rgba(220,235,215,.7) !important; }
.fr-jinlong { box-shadow: 0 0 0 2px #fff0b0, 0 0 0 4px #d9a63a, 0 0 0 5.5px #8a5a10, 0 0 0 7px #f3d27a, 0 0 12px rgba(233,196,106,.6) !important; }
.fr-qicai { padding: 3px !important; background: conic-gradient(#ff8aa8, #ffd36a, #9ff0a0, #8fd8ff, #c9a6ff, #ff8aa8) !important; box-shadow: 0 0 10px rgba(170,140,255,.55) !important; }
.fr-qicai svg { border-radius: inherit; }
.fr-qinghua { box-shadow: 0 0 0 2px #f6f8fb, 0 0 0 4px #1f4e9c, 0 0 0 5px #f6f8fb, 0 0 0 6.5px #1f4e9c !important; }
.fr-jinqi { box-shadow: 0 0 0 2px #e9c46a, 0 0 0 4.5px #120d0a, 0 0 0 6px #e9c46a !important; }
/* ===== 入座特效：飞天、星雨 ===== */
.entr.en-feitian .en-art { position: absolute; inset: 0; background:
  radial-gradient(40% 8% at 30% 40%, rgba(232,120,90,.7), transparent 70%), radial-gradient(40% 8% at 70% 55%, rgba(80,170,190,.65), transparent 70%), radial-gradient(30% 6% at 50% 30%, rgba(233,196,106,.7), transparent 70%);
  animation: ribbon 2.2s ease-out both; }
@keyframes ribbon { from { transform: translateX(-60%) rotate(-8deg); opacity: 0; } 30% { opacity: 1; } to { transform: translateX(30%) rotate(4deg); opacity: 0; } }
.entr.en-xingyu .en-art { position: absolute; inset: 0; background:
  linear-gradient(115deg, transparent 48%, rgba(255,255,255,.9) 50%, transparent 52%) 10% 0 / 120px 120px no-repeat,
  linear-gradient(115deg, transparent 48%, rgba(255,240,200,.8) 50%, transparent 52%) 60% 10% / 90px 90px no-repeat,
  linear-gradient(115deg, transparent 48%, rgba(200,220,255,.8) 50%, transparent 52%) 85% 30% / 140px 140px no-repeat;
  animation: starfall 1.6s cubic-bezier(.3,.6,.4,1) 2 both; }
@keyframes starfall { from { transform: translate(-30px, -60px); opacity: 0; } 30% { opacity: 1; } to { transform: translate(60px, 120px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .entr.en-feitian .en-art, .entr.en-xingyu .en-art { animation: none; } }

/* ===== 宝阁：更奢华一点 ===== */
.shop-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tabs button { flex: none; }
.sec-note { margin: -4px 0 8px !important; }
.shop-cell { min-width: 0; }
.shop-it.earn .price { color: var(--mo2, #6b5d4a); }
.earn-lb { display: flex; flex-direction: column; align-items: center; font-size: 11.5px; line-height: 1.3; font-family: var(--sans, inherit); font-weight: 600; }
.earn-lb em { font-style: normal; font-size: 13px; font-weight: 900; color: #a8321f; }
.shop-it.deal .price s, .dh-price s { opacity: .55; margin-right: 4px; font-weight: 600; }
.deal-tag { position: absolute; right: 6px; bottom: 34px; z-index: 2; padding: 1px 6px; border-radius: 2px; background: #b8382a; color: #fbefe0; font-style: normal; font-size: 10.5px; font-weight: 900; letter-spacing: .08em; transform: rotate(-4deg); }
.deal-tag.earn-tag { background: #2f6b4f; }
.deal-tag.inline { position: static; display: inline-block; margin-left: 6px; transform: none; vertical-align: 2px; }
.shop-it .sw.fr-sw { width: 70px; height: 70px; display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 45%, rgba(255,240,200,.6), transparent 70%); box-shadow: none !important; overflow: visible; }
.fr-sw .ava, .sc-ava .ava, .mp-fr .ava { display: block; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; }
.fr-sw .ava svg, .sc-ava .ava svg, .mp-fr .ava svg { width: 100%; height: 100%; display: block; }
/* 今日珍品 */
.deal-hero { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; margin: 4px 0 18px; padding: 14px; border: 0; border-radius: 4px; text-align: left; color: #f6ead0; cursor: pointer;
  background: radial-gradient(120% 140% at 0% 0%, #4a1c14, #24100c 60%, #140806); box-shadow: inset 0 0 0 1.5px #c9a24a, inset 0 0 0 4px #24100c, inset 0 0 0 5px rgba(201,162,74,.5), 0 8px 18px rgba(0,0,0,.25); }
.deal-hero::before { content: "珍"; position: absolute; right: 12px; top: 10px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 3px; background: #b8382a; color: #fbefe0; font: 900 17px/1 var(--serif); transform: rotate(6deg); box-shadow: inset 0 0 0 1.5px rgba(251,239,224,.5); }
.dh-stage { flex: none; width: 112px; height: 112px; display: grid; place-items: center; border-radius: 4px; background: radial-gradient(60% 60% at 50% 45%, rgba(255,226,150,.35), transparent 70%); overflow: hidden; }
.dh-stage .tb-sw.big { width: 112px; height: 80px; }
.dh-stage .big-back { width: 62px; height: 98px; }
.dh-stage .sc-gems { transform: scale(.42); margin: 0; }
.dh-stage .sc-faces { transform: scale(.5); width: 220px; margin: 0; }
.dh-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dh-txt small { color: #e9c46a; letter-spacing: .3em; font-size: 12px; }
.dh-txt > b { font: 900 24px/1.2 var(--serif); letter-spacing: .1em; }
.dh-price { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 800; }
.dh-price svg { width: 20px; height: 20px; }
.dh-price em { font-style: normal; font-size: 22px; color: #ffd27a; font-family: var(--serif); }
.dh-price i { font-style: normal; padding: 0 5px; border-radius: 2px; background: #b8382a; font-size: 11px; }
.dh-left { font-size: 12px; color: #cdb98e; }
.dh-left b { font-variant-numeric: tabular-nums; color: #f6ead0; }
/* 主题套装 */
.set-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.set-card { min-width: 0; padding: 12px; border-radius: 4px; background: linear-gradient(180deg, rgba(43,38,32,.06), rgba(43,38,32,.015)); box-shadow: inset 0 0 0 1px rgba(110,74,40,.3); }
.set-card.done { box-shadow: inset 0 0 0 1.5px #c9a24a; background: linear-gradient(180deg, rgba(201,162,74,.16), rgba(201,162,74,.03)); }
.sc-hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.sc-hd b { font: 900 17px/1.2 var(--serif); letter-spacing: .15em; }
.sc-hd small { font-weight: 800; color: #a8321f; }
.set-items { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.set-it { flex: none; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border: 1px dashed rgba(110,74,40,.4); border-radius: 3px; background: none; color: inherit; opacity: .55; cursor: pointer; }
.set-it.on { opacity: 1; border-style: solid; border-color: #c9a24a; background: rgba(201,162,74,.1); }
.set-it small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mp { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 4px; overflow: hidden; }
.mp.tb-sw { width: 54px; height: 38px; }
.mp-back { width: 28px; height: 44px; border-radius: 3px; }
.mp-gem { grid-template-columns: repeat(2, 1fr); gap: 1px; background: none; }
.mp-face svg { width: 30px; height: 44px; border-radius: 3px; }
.mp-fr { overflow: visible; }
.mp-fr .ava { width: 34px; height: 34px; border-radius: 9px; }
.mp-ic svg { width: 36px; height: 36px; }
.set-reward { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 8px 10px; border: 0; border-radius: 3px; background: #24100c; color: #f6ead0; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px #c9a24a; }
.set-reward span { display: flex; flex-direction: column; }
.set-reward small { color: #e9c46a; font-size: 11px; letter-spacing: .2em; }
.set-reward b { font: 900 15px/1.3 var(--serif); }
.set-reward.on { background: #3a2a12; }
.g-earn .mp { width: 40px; height: 40px; }
/* 鉴赏页 */
.sc-ov { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(80% 60% at 50% 35%, rgba(58,36,18,.97), rgba(12,7,4,.985)); animation: fadeIn .18s ease-out; }
.sc-card { width: min(380px, 100%); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #f6ead0; text-align: center; }
.sc-stage { position: relative; width: 100%; height: 230px; display: grid; place-items: center; }
.sc-rays { position: absolute; inset: -20px; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,226,150,.13) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 75%); mask: radial-gradient(closest-side, #000 30%, transparent 75%); animation: rayspin 30s linear 1; }
@keyframes rayspin { to { transform: rotate(60deg); } }
.sc-ov.r5 .sc-rays { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,160,220,.14) 0 6deg, rgba(150,220,255,.12) 6deg 12deg, transparent 12deg 18deg); }
.sc-ov.rlim .sc-rays { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,120,90,.16) 0 6deg, transparent 6deg 18deg); }
.sc-pic { position: relative; z-index: 1; display: grid; place-items: center; filter: drop-shadow(0 16px 24px rgba(0,0,0,.5)); animation: scUp .4s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes scUp { from { transform: translateY(20px) scale(.9); opacity: 0; } }
.sc-pic .tb-sw.big { width: 260px; height: 180px; border-radius: 14px; }
.big-back { display: block; width: 120px; height: 190px; border-radius: 10px; border: 3px solid #e9c46a; }
.sc-gems { margin: 0; padding: 22px 14px; max-width: 340px; }
.sc-faces { display: grid; grid-template-columns: repeat(3, 96px); gap: 8px; margin: 0; }
.sc-ava .ava { width: 120px; height: 120px; border-radius: 28px; }
.sc-pic .uv-ic svg { width: 130px; height: 130px; }
.sc-txt .rare { position: static; display: inline-block; }
.sc-txt h3 { margin: 6px 0 4px; font: 900 30px/1.2 var(--serif); letter-spacing: .2em; }
.sc-lore { margin: 0 0 6px; font-family: var(--serif); font-size: 15px; color: #e8d6ae; }
.sc-desc { margin: 0; font-size: 13.5px; color: #cdb98e; }
.sc-set { margin: 8px 0 0; font-size: 13px; color: #e9c46a; }
.sc-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; margin-top: 6px; }
.sc-acts .btn { min-width: 96px; }
.sc-card .sc-acts .btn.ghost { color: #f6ead0 !important; border: 1px solid rgba(246,234,208,.45) !important; background: rgba(255,255,255,.06) !important; box-shadow: none !important; font-weight: 700; }
.sc-buy { min-width: 200px !important; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 12px 22px; font-size: 17px; font-weight: 900; color: #2b1d08 !important; background: linear-gradient(180deg, #ffe39a, #e9b84a) !important; border: 0 !important; box-shadow: 0 4px 0 #9a6a1c, 0 8px 18px rgba(233,184,74,.35); }
.sc-buy svg { width: 22px; height: 22px; }
.sc-buy s { opacity: .55; margin-right: 4px; }
.sc-buy:disabled { filter: grayscale(.6); opacity: .6; }
.sc-short, .sc-earn { width: 100%; margin: 2px 0 0; font-size: 13px; color: #e9c46a; }
.sc-earn b { font-size: 18px; color: #ffd27a; }
@media (prefers-reduced-motion: reduce) { .sc-rays, .sc-pic { animation: none; } }
.uv-pic:has(.sc-ava), .uv-pic:has(.fit-gems), .uv-pic:has(.sc-faces), .uv-pic:has(.uv-ic) { background: none; box-shadow: none; }
/* 大厅布局修正：扩展一行独占整宽，字居中；开始匹配和下面的框之间留空 */
.s-ext { flex-direction: column; align-items: stretch; gap: 8px; }
.s-ext .sizes { width: 100%; }
.s-ext .size.ext { display: flex; align-items: center; justify-content: center; height: 46px; font-size: 15px; }
.s-acts.one { margin-bottom: 14px; }