:root {
  --ink: #171717; --paper: #fffaf0; --pink: #ff4f75; --red: #ef4b46; --blue: #4da7ff;
  --green: #7ad52f; --yellow: #ffd95a; --purple: #a06bed; --muted: #e8e0d3;
  font-family: "Kaiti SC", "STKaiti", "PingFang SC", system-ui, sans-serif;
  color: var(--ink); background: #d9d3c7;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100dvh; overflow-x: clip; background: radial-gradient(circle at 20% 20%, #ffffffb5 0 1px, transparent 1.5px) 0 0 / 7px 7px, #d9d3c7; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.app-shell { width: min(100%, 1120px); min-height: 100dvh; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) clamp(12px, 3vw, 32px) max(16px, env(safe-area-inset-bottom)); overflow: visible; background: radial-gradient(circle at 8% 14%, #ff4f7513 0 3px, transparent 4px), repeating-linear-gradient(8deg, transparent 0 33px, #1a1a1a07 34px 35px), var(--paper); box-shadow: 0 0 50px #0004; }
.masthead { display: flex; align-items: center; justify-content: space-between; min-height: 100px; border-bottom: 2px dashed #cfc6b8; }
.brand { position: relative; display: flex; align-items: end; gap: 16px; }
.brand-kicker { margin-bottom: 9px; padding: 4px 9px; background: var(--ink); color: white; font-weight: 900; transform: rotate(-2deg); }
.masthead h1 { position: relative; margin: 0; font-size: clamp(48px, 8vw, 78px); line-height: .9; letter-spacing: -6px; transform: rotate(-2deg); }
.masthead h1 span { color: var(--pink); margin-left: 8px; }
.masthead h1::after { content: ""; position: absolute; height: 7px; left: 11%; right: -4%; bottom: -11px; border-radius: 50%; background: var(--pink); transform: rotate(3deg); }
.help-button, .text-button { border: 0; background: none; font-weight: 900; text-decoration: underline 3px var(--green); }
.help-button { padding: 10px; font-size: 17px; }
.view { min-height: calc(100dvh - 124px); }
.lobby { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr); gap: clamp(28px, 6vw, 72px); align-items: center; padding: 32px 5%; }
/* 首页左侧是“开吵海报”，不再用一整块黄色填满。黄色只做撕纸和重点词，留白才有呼吸感。 */
.lobby-poster { position: relative; isolation: isolate; min-height: 405px; padding: clamp(26px, 4vw, 50px); border: 3px solid var(--ink); border-radius: 8px 24px 9px 32px; overflow: hidden; background: #fffef9; box-shadow: 9px 10px 0 var(--ink); transform: rotate(-1deg); }
/* 黄色只是一笔圈重点的撕纸，不再铺满海报下半区。 */
.lobby-poster::before { content: ""; position: absolute; z-index: -1; left: 8%; top: 47%; width: 84%; height: 17%; border-block: 2px dashed #1717172b; background: repeating-linear-gradient(-18deg, #ffd95a 0 13px, #ffe88b 13px 26px); transform: rotate(-5deg); }
.lobby-poster::after { content: "？ ！"; position: absolute; right: 7%; bottom: 3%; z-index: -1; color: #ff4f7533; font: 1000 clamp(74px, 12vw, 146px)/1 "Kaiti SC", sans-serif; letter-spacing: -.25em; transform: rotate(-9deg); }
.poster-tag { position: absolute; right: 18px; top: 17px; padding: 7px 14px; border: 3px solid var(--red); border-radius: 50%; background: #fffdf7; color: var(--red); font-weight: 1000; transform: rotate(12deg); }
.poster-avatars { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 12px; }
.poster-avatars::before, .poster-avatars::after { content: ""; position: absolute; z-index: -1; width: 82px; height: 73px; border: 2px solid var(--ink); background: var(--blue); box-shadow: 3px 4px 0 var(--ink); transform: rotate(-9deg); }
.poster-avatars::before { left: 12%; background: var(--green); transform: rotate(7deg); }.poster-avatars::after { right: 12%; background: var(--pink); transform: rotate(-7deg); }
.poster-avatars .avatar { filter: drop-shadow(2px 3px 0 #fff) drop-shadow(4px 5px 0 #171717); }
.poster-avatars b { padding: 3px 5px; background: #fffdf7; color: var(--pink); font-weight: 1000; transform: rotate(-8deg); }
.lobby-poster h2 { position: relative; margin: 22px 0 12px; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.05; text-align: center; text-shadow: 2px 2px 0 #fff; }
.lobby-poster h2::after { content: ""; position: absolute; z-index: -1; left: 14%; right: 10%; bottom: -2px; height: 13px; background: #ff4f7566; transform: rotate(-1deg); }
.lobby-poster p { margin: 0 auto; max-width: 440px; padding: 9px 13px; border: 2px solid #171717aa; background: #fffdf7e8; box-shadow: 3px 4px 0 #17171733; font-family: "PingFang SC", sans-serif; font-weight: 700; line-height: 1.7; text-align: center; transform: rotate(.6deg); }
.join-card { display: grid; gap: 17px; padding: 30px; border: 3px solid var(--ink); background: white; box-shadow: 7px 8px 0 #ff4f75; transform: rotate(.6deg); }
.join-card label { display: grid; gap: 8px; font-size: 18px; font-weight: 1000; }
input { width: 100%; padding: 13px 14px; border: 2px solid var(--ink); border-radius: 3px; background: #fffdf7; font-weight: 800; outline: 0; }
input:focus { box-shadow: 0 0 0 4px #4da7ff44; }
.primary-button, .join-row button { padding: 13px 18px; border: 3px solid var(--ink); border-radius: 5px 12px 5px 13px; background: var(--green); box-shadow: 4px 5px 0 var(--ink); font-size: 20px; font-weight: 1000; }
.primary-button:active:not(:disabled), .join-row button:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--ink); }
.primary-button:disabled { filter: grayscale(1); opacity: .5; cursor: not-allowed; }
.mode-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-button { min-width: 0; padding: 15px 12px; border: 3px solid var(--ink); border-radius: 6px 16px 7px 14px; background: white; box-shadow: 4px 5px 0 var(--ink); text-align: left; }
.mode-button strong, .mode-button small { display: block; }.mode-button strong { font-size: 20px; }.mode-button small { margin-top: 5px; font-family: "PingFang SC", sans-serif; font-size: 11px; font-weight: 700; line-height: 1.35; }
.solo-button { background: var(--green); transform: rotate(-1deg); }.human-button { background: var(--yellow); transform: rotate(1deg); }
.mode-button:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--ink); }
.or { display: flex; align-items: center; gap: 8px; color: #777; font-size: 12px; font-weight: 800; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: #ccc; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.join-row button { padding-inline: 17px; background: var(--blue); color: white; font-size: 16px; }
.avatar { display: block; flex: 0 0 auto; width: 76px; height: 76px; border: 0; border-radius: 0; background-size: 200% 200%; background-repeat: no-repeat; background-color: transparent; mix-blend-mode: multiply; filter: drop-shadow(2px 4px 2px #0002); }
.avatar.animal-owl { background-image: url("assets/generated/owl-heat-sheet-ui-v2.webp"); }
.avatar.animal-capybara { background-image: url("assets/generated/capybara-heat-sheet-ui-v2.webp"); }
.avatar.animal-cat { background-image: url("assets/generated/orange-cat-heat-sheet-ui-v2.webp"); }
.avatar.heat-0 { background-position: 0 0; }.avatar.heat-1 { background-position: 100% 0; }.avatar.heat-2 { background-position: 0 100%; }.avatar.heat-3 { background-position: 100% 100%; }

.room { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 30px 0; }
.room-ticket { display: flex; align-items: center; gap: 20px; padding: 13px 24px; border: 3px solid var(--ink); background: var(--yellow); box-shadow: 5px 6px 0 var(--ink); transform: rotate(-1deg); }
.room-ticket span { font-weight: 900; }.room-ticket strong { color: var(--pink); font: 1000 42px/1 "PingFang SC", sans-serif; letter-spacing: 8px; }
.room-ticket button { border: 2px solid var(--ink); background: white; font-weight: 900; }
.room-tip { margin: 0; font-weight: 900; }
.seat-list { display: grid; width: min(100%, 670px); gap: 12px; }
.room-seat, .player-seat { --seat-color: var(--ink); --seat-wash: #fff; }.seat-0 { --seat-color: #e64756; --seat-wash: #fff0f1; }.seat-1 { --seat-color: #289b57; --seat-wash: #effbf2; }.seat-2 { --seat-color: #337ce8; --seat-wash: #eff5ff; }
.room-seat { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 14px; padding: 10px 18px; border: 2px dashed var(--seat-color); background: #ffffff90; opacity: .65; }
.room-seat.filled { border-style: solid; border-color: var(--seat-color); background: var(--seat-wash); box-shadow: 3px 4px 0 #0002; opacity: 1; }
.room-seat strong, .room-seat span { display: block; }.room-seat strong { font-size: 20px; }.room-seat span { color: #666; font-family: sans-serif; font-size: 13px; }.seat-chip { display: inline-block; color: var(--seat-color); font: 1000 9px/1 "PingFang SC", sans-serif; font-style: normal; letter-spacing: .04em; }.room-seat > .seat-chip { padding: 3px 6px; border: 1px solid var(--seat-color); background: white; }
.room-seat.is-selectable { border-style: dashed; opacity: .9; }.room-seat-actions { display: grid; justify-items: end; gap: 6px; }.room-seat-actions .seat-chip { padding: 3px 6px; border: 1px solid var(--seat-color); background: white; }.seat-action, .seat-current, .seat-pending { min-width: 80px; padding: 5px 7px; border: 1px solid var(--seat-color); background: white; color: var(--seat-color); font: 900 10px/1.15 "PingFang SC", sans-serif; text-align: center; }.seat-action { cursor: pointer; box-shadow: 1px 2px 0 color-mix(in srgb, var(--seat-color) 28%, transparent); }.seat-action:hover { background: var(--seat-wash); transform: translateY(-1px); }.seat-action:active { transform: translate(1px, 1px); box-shadow: none; }.seat-pick { background: var(--seat-color); color: white; }.seat-current { border-style: dashed; background: transparent; }.seat-pending { border-color: #b8b1a6; color: #7d766d; }.seat-swap-request { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 2px solid var(--blue); background: #eff7ff; box-shadow: 3px 4px 0 #337ce82e; color: #255f9b; font: 900 12px/1.35 "PingFang SC", sans-serif; }.seat-swap-request span { display: flex; gap: 7px; }.seat-swap-request button { padding: 6px 9px; border: 1px solid #337ce8; background: white; color: #255f9b; font: 900 11px/1 "PingFang SC", sans-serif; }.seat-swap-request button[data-swap-response="accept"] { background: #337ce8; color: white; }.seat-swap-request small { color: #6a8bad; font: 800 10px/1.3 "PingFang SC", sans-serif; }
.room .primary-button { width: min(100%, 480px); }.room .text-button { color: #777; }

.table { display: grid; grid-template-rows: auto minmax(440px, 1fr) auto; gap: 9px; min-height: calc(100dvh - 100px); padding-top: 12px; }
.turn-banner { --turn-accent: var(--yellow); position: relative; left: 50%; z-index: 12; display: none; grid-column: 1 / 3; grid-template-columns: minmax(0, 1fr) minmax(0, 740px) minmax(0, 1fr); align-items: center; gap: 18px; width: 100vw; max-width: none; min-width: 0; height: 82px; min-height: 82px; margin: 0 -50vw 7px; padding: 0 clamp(22px, 5vw, 58px); border: 0; color: white; filter: drop-shadow(0 5px 5px #0004); pointer-events: none; }
.turn-banner::before, .turn-banner::after, .turn-rip { content: ""; position: absolute; pointer-events: none; clip-path: polygon(0 5%, 24% 3%, 51% 5%, 78% 3%, 100% 5%, 100% 95%, 80% 97%, 54% 95%, 27% 97%, 0 95%); }
.turn-banner::before { z-index: -3; inset: -5px -.5%; background: white; }
.turn-banner::after { z-index: -1; inset: 0; background: linear-gradient(100deg, #0d0d0d 0 18%, #202020 36%, #090909 62%, #181818 100%); }
.turn-rip { z-index: -2; inset: -12px -2%; background: var(--turn-accent); transform: translateY(7px) skewX(-3deg); }
.turn-rip i { position: absolute; width: 22%; height: 3px; background: white; opacity: .75; transform: rotate(-3deg); }.turn-rip i:first-child { left: 7%; top: 24%; }.turn-rip i:last-child { right: 6%; bottom: 20%; transform: rotate(3deg); }
.turn-banner.is-visible { display: grid; animation: turnSubtitleIn .28s cubic-bezier(.2,.9,.25,1.16) both; }
.turn-banner.needs-confirm { pointer-events: auto; }.turn-banner.is-mine { --turn-accent: var(--green); }.turn-banner.is-response { --turn-accent: var(--pink); }.turn-banner.is-showcase { --turn-accent: var(--blue); }.turn-banner.is-waiting { --turn-accent: var(--yellow); }
.turn-banner.is-effect { --turn-accent: #e47b31; }
.turn-message { grid-column: 2; align-self: center; min-width: 0; z-index: 1; text-align: center; transform: rotate(-.4deg); }.turn-message span, .turn-message strong, .turn-message small { display: block; }.turn-message span { color: var(--turn-accent); font: 1000 10px/1.2 "PingFang SC", sans-serif; letter-spacing: 3px; }.turn-message strong { overflow: hidden; margin: 3px 0; font-size: clamp(24px, 3vw, 36px); line-height: 1; text-overflow: ellipsis; text-shadow: 3px 3px 0 #000; white-space: nowrap; }.turn-message small { overflow: hidden; font: 800 11px/1.3 "PingFang SC", sans-serif; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.turn-confirm { grid-column: 3; align-self: center; justify-self: end; z-index: 2; display: none; min-width: 142px; padding: 10px 15px; border: 3px solid white; background: var(--turn-accent); color: var(--ink); box-shadow: 4px 5px 0 white; font: 1000 15px/1.2 "PingFang SC", sans-serif; transform: rotate(2deg); pointer-events: auto; }.turn-confirm:hover { transform: rotate(0) scale(1.04); }.turn-confirm:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 white; }.turn-banner.needs-confirm .turn-confirm { display: block; }
.players { position: relative; min-height: 440px; overflow: visible; }
.players::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 56%; width: min(54vw, 520px); aspect-ratio: 1.9 / 1; border-radius: 50%; background: radial-gradient(ellipse, #ffdf7d12 0 20%, transparent 68%); transform: translate(-50%, -50%); }
.player-seats { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.player-seat { position: absolute; display: grid; grid-template-columns: 80px minmax(0, 1fr) 124px; gap: 9px; align-items: center; width: min(42%, 405px); min-width: 0; padding: 8px; border: 2px solid var(--seat-color); background: var(--seat-wash); box-shadow: 3px 4px 0 #0002; text-align: left; pointer-events: auto; transition: transform .12s, box-shadow .12s, background .12s, outline-color .12s; }
.player-seat.table-opponent-left { left: clamp(0px, 2vw, 22px); top: 8px; transform: rotate(-1deg); }.player-seat.table-opponent-right { right: clamp(0px, 2vw, 22px); top: 8px; transform: rotate(1deg); }.player-seat.table-self { position: relative; left: auto; bottom: auto; width: 100%; transform: rotate(-.5deg); }.player-seat.is-me { border-width: 3px; background: var(--seat-wash); box-shadow: inset 0 0 0 2px #fff, 3px 4px 0 #0003; }.player-seat.is-turn { border-width: 3px; background: var(--seat-wash); box-shadow: 0 0 0 5px var(--seat-color), 3px 6px 0 var(--ink); }.player-seat.is-turn.is-timer-low { animation: activeSeat .55s steps(2, end) infinite; }.player-seat.legal { cursor: copy; }.drag-active .player-seat.legal { animation: none; outline: 2px solid color-mix(in srgb, var(--seat-color) 48%, transparent); outline-offset: 3px; }.player-seat.legal::after { content: "拖到这里"; position: absolute; z-index: 3; right: 5px; top: -11px; display: none; padding: 3px 7px; border: 2px solid var(--ink); background: var(--seat-color); color: white; font: 900 10px/1 "PingFang SC", sans-serif; transform: rotate(3deg); }.drag-active .player-seat.legal::after, .drag-active .player-seat .combat-role { display: none !important; }.player-seat.drop-ready { animation: none !important; outline: 3px solid var(--seat-color); outline-offset: 5px; background: var(--seat-wash); box-shadow: 0 0 0 8px color-mix(in srgb, var(--seat-color) 58%, transparent), 5px 10px 0 var(--ink) !important; }
.player-seat.is-attacker { border-color: var(--seat-color); box-shadow: 0 0 0 5px color-mix(in srgb, var(--seat-color) 42%, transparent), 4px 7px 0 var(--ink); }.player-seat.is-combat-target { border-color: var(--seat-color); background: var(--seat-wash); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--seat-color) 33%, transparent), 4px 7px 0 var(--ink); }.combat-role { position: absolute; z-index: 8; right: 5px; top: -12px; display: none; padding: 4px 8px; border: 2px solid var(--ink); background: var(--seat-color); color: white; font: 1000 10px/1 "PingFang SC", sans-serif; box-shadow: 2px 2px 0 var(--ink); transform: rotate(2deg); }.is-attacker .combat-role, .is-combat-target .combat-role { display: block; }.player-seat.just-hit .avatar { animation: targetHit .42s linear, avatarCritical .65s infinite .42s; }.heat-float { position: absolute; z-index: 12; left: 50%; top: 38%; padding: 4px 9px; border: 2px solid var(--ink); background: white; box-shadow: 3px 3px 0 var(--ink); font: 1000 16px/1 "PingFang SC", sans-serif; font-style: normal; pointer-events: none; animation: heatFloat .88s ease-out forwards; }.heat-float.damage { color: var(--pink); }.heat-float.heal { color: #3e9916; }
.danger-mark { position: absolute; z-index: 9; left: 6px; bottom: -10px; padding: 3px 6px; border: 2px solid var(--ink); background: var(--red); color: white; box-shadow: 2px 2px 0 var(--ink); font: 1000 10px/1 "PingFang SC", sans-serif; transform: rotate(-4deg); animation: dangerBlink .8s steps(2, end) infinite; }
.player-seat:disabled { color: inherit; cursor: default; }.player-seat .avatar { width: 76px; height: 76px; transition: transform .12s cubic-bezier(.2,.9,.25,1.15), filter .12s; }.player-seat.drop-ready .avatar { animation: none !important; transform: scale(1.16) rotate(-3deg); filter: drop-shadow(0 0 0 4px #fff) drop-shadow(0 0 10px var(--seat-color)); }.player-seat .avatar.heat-1 { filter: drop-shadow(0 4px 3px #e9ad1666) saturate(1.08); }.player-seat .avatar.heat-2 { filter: drop-shadow(0 5px 4px #f06b2f77) saturate(1.15); }.player-seat .avatar.heat-3 { filter: drop-shadow(0 5px 5px #ec315799) saturate(1.28); animation: avatarCritical .65s infinite; }.turn-pin { position: absolute; z-index: 10; left: auto; right: 6px; top: -9px; padding: 1px 5px; background: var(--pink); color: white; font-size: 10px; font-weight: 900; white-space: nowrap; transform: rotate(2deg); }
.player-seat.is-eliminated { opacity: .48; filter: grayscale(.8); border-style: dashed; box-shadow: 2px 3px 0 #0002; }
.player-seat.is-eliminated .avatar { filter: grayscale(1); }
.turn-pin:empty { display: none; }.player-seat.is-turn .turn-pin { padding: 3px 8px; border: 2px solid var(--ink); background: var(--yellow); color: var(--ink); font-size: 11px; }
.turn-pin.timer-low { background: var(--red) !important; color: white !important; animation: dangerBlink .55s steps(2, end) infinite; }
.player-info { min-width: 0; }.player-info strong, .player-info > span:not(.player-meta), .player-meta > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.player-info strong { font-size: 17px; }.player-info span { color: #666; font-family: sans-serif; font-size: 11px; }.player-meta { display: flex !important; align-items: center; gap: 5px; min-width: 0; overflow: visible !important; white-space: nowrap; }.player-meta > span { min-width: 0; }
.ai-badge { display: inline-block; margin-left: 4px; padding: 1px 4px; border-radius: 3px; background: var(--purple); color: white; font: 900 8px/1.5 "PingFang SC", sans-serif; font-style: normal; vertical-align: 2px; }
.scores { min-width: 0; }.risk-meter { --heat-color: #a9a39a; display: inline-flex; align-items: center; gap: 3px; min-width: 0; padding: 0; background: transparent; font-family: "PingFang SC", sans-serif; white-space: nowrap; }.risk-meter.heat-1 { --heat-color: #e9ad16; }.risk-meter.heat-2 { --heat-color: #f06b2f; }.risk-meter.heat-3 { --heat-color: #ec3157; }.risk-label { color: #625a52; font-size: 10px; font-weight: 1000; }.heat-dots { display: inline-flex; gap: 1px; color: #b9b1a7; font: 1000 12px/1 sans-serif; letter-spacing: -1px; }.heat-dots i { font-style: normal; }.heat-dots i.hot { color: var(--heat-color); }
.table-center { position: absolute; z-index: 2; left: 50%; top: 57%; width: min(55%, 560px); min-height: 250px; transform: translate(-50%, -50%); transition: .15s; }.table-center.legal-drop { outline: 3px dashed var(--blue); outline-offset: -7px; background: #dff2ff88; }.table-center.drop-ready { outline-color: var(--pink); background: #ffe3e9bb; transform: translate(-50%, -50%) scale(1.015); box-shadow: 0 0 0 6px #ff4f7545; }
.combat-route { --combat-color: #f04762; position: fixed; z-index: 1; inset: 0; overflow: visible; pointer-events: none; }.combat-route[data-tone="response"] { --combat-color: #328fe5; }.combat-route[data-tone="heal"] { --combat-color: #63bd29; }.combat-line { --route-angle: 0deg; position: absolute; display: block; height: 5px; border: 2px solid var(--ink); border-radius: 99px 2px 2px 99px; background: var(--combat-color); box-shadow: 2px 2px 0 #0003; transform: translateY(-50%) rotate(var(--route-angle)); transform-origin: 0 50%; will-change: transform; animation: none; }.combat-line::after, .combat-line::before { content: ""; position: absolute; top: 50%; clip-path: polygon(0 0, 100% 50%, 0 100%, 19% 50%); transform: translateY(-50%); }.combat-line::after { right: -22px; z-index: 0; width: 25px; height: 27px; background: var(--ink); }.combat-line::before { right: -18px; z-index: 1; width: 19px; height: 19px; background: var(--combat-color); }.combat-label { display: none; }
.pending-card { position: absolute; z-index: 5; left: 50%; top: 50%; display: grid; place-items: center; width: min(330px, 86vw); min-height: 178px; pointer-events: none; transform: translate(-50%, -50%); }.pending-card.hidden { display: none; }.turn-table-title { position: absolute; left: 50%; top: -4px; z-index: 4; padding: 3px 8px; border: 2px solid var(--ink); background: var(--yellow); box-shadow: 2px 2px 0 var(--ink); color: var(--ink); font: 1000 9px/1 "PingFang SC", sans-serif; letter-spacing: .08em; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; }.turn-table-stack { display: flex; align-items: center; justify-content: center; min-height: 154px; padding-top: 12px; }.turn-table-card { position: relative; display: grid; grid-template-rows: 16px 69px auto 15px; align-items: center; width: 122px; height: 151px; padding: 6px 7px; border: 3px solid var(--ink); border-top-color: var(--card-color); background: linear-gradient(145deg, #fffdf7 0 76%, color-mix(in srgb, var(--card-color) 14%, white)); box-shadow: 4px 5px 0 #0003, 7px 8px 0 color-mix(in srgb, var(--card-color) 36%, transparent); color: var(--ink); transform: rotate(-4deg); animation: tableCardLand .28s cubic-bezier(.2,.9,.25,1.15) both; }.turn-table-card .card-art { width: 68px; height: auto; margin: 0 auto; }.turn-table-card strong { display: block; overflow: hidden; font: 1000 18px/1 "Kaiti SC", "STKaiti", sans-serif; text-align: center; text-overflow: ellipsis; white-space: nowrap; }.turn-table-card small { display: block; overflow: hidden; color: #5d574f; font: 900 9px/1 "PingFang SC", sans-serif; text-align: center; text-overflow: ellipsis; white-space: nowrap; }.turn-table-kind { position: absolute; left: -5px; top: -10px; z-index: 2; padding: 3px 6px; border: 2px solid var(--ink); background: var(--card-color); box-shadow: 2px 2px 0 var(--ink); color: white; font: 1000 9px/1 "PingFang SC", sans-serif; transform: rotate(-5deg); }.turn-table-stack.has-response .turn-table-card + .turn-table-card { z-index: 2; margin-left: -31px; margin-top: -19px; transform: translateY(-10px) rotate(5deg); }.turn-table-stack.has-response .turn-table-card + .turn-table-card .turn-table-kind { background: #328fe5; }.turn-table-stack.has-response .turn-table-card:nth-child(3) { z-index: 3; margin-left: -33px; margin-top: 15px; transform: translateY(4px) rotate(-1deg); }
.table-drop-hint { position: absolute; z-index: 11; inset: 50% auto auto 50%; display: none; padding: 9px 14px; border: 3px solid var(--ink); background: var(--blue); color: white; box-shadow: 4px 5px 0 var(--ink); font-weight: 1000; transform: translate(-50%, -50%) rotate(-2deg); transition: transform .14s cubic-bezier(.2,.9,.25,1.15), box-shadow .14s ease; pointer-events: none; }.table-center.legal-drop .table-drop-hint { display: block; }
.table-center.has-table-cards.legal-drop, .table-center.has-table-cards.drop-ready { outline: 0; background: transparent; box-shadow: none; transform: translate(-50%, -50%); }
#table-center .table-drop-hint { display: none !important; }
#table-center.center-drop-open .table-drop-hint { display: block !important; }
/* 从下方手牌往上拖时，已有落桌牌的投放口放在牌堆下方；不盖住已出的牌。 */
#table-center.has-table-cards.center-drop-open .table-drop-hint { top: auto; bottom: 5px; transform: translateX(-50%) rotate(-2deg); }
/* 拖进中央时，只放大投放提示框；松手或拖离后立即回到原尺寸，和头像目标反馈一致。 */
#table-center.center-drop-ready .table-drop-hint { box-shadow: 0 0 0 4px #ffcf4d66, 4px 5px 0 var(--ink); }
#table-center:not(.has-table-cards).center-drop-ready .table-drop-hint { transform: translate(-50%, -50%) rotate(-2deg) scale(1.16); }
#table-center.has-table-cards.center-drop-ready .table-drop-hint { transform: translateX(-50%) rotate(-2deg) scale(1.16); }
.action-panel { display: grid; grid-template-columns: minmax(238px, 25%) minmax(0, 1fr); gap: 10px; min-width: 0; padding: 5px 0 0; border-top: 2px solid #d6cec0; }.self-seat { display: flex; align-items: stretch; min-width: 0; }.hand-zone { min-width: 0; }.target-copy { width: fit-content; margin: 0 auto 3px; padding: 3px 11px; background: var(--ink); color: white; font-size: 12px; font-weight: 900; transform: rotate(.5deg); }
.hand { display: flex; gap: 8px; min-height: 151px; padding: 4px 5px 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scroll-snap-type: x proximity; }
.card { position: relative; flex: 1 0 112px; max-width: 150px; height: 132px; padding: 20px 7px 7px; border: 2px solid var(--card-color); border-radius: 5px; background: linear-gradient(145deg, #fff 0 76%, color-mix(in srgb, var(--card-color) 11%, white)); box-shadow: 2px 4px 0 #0003; overflow: hidden; scroll-snap-align: center; transition: transform .13s, opacity .13s; user-select: none; -webkit-user-select: none; }.card:nth-child(odd) { transform: rotate(-1deg); }.card:nth-child(even) { transform: rotate(1deg); }.card.usable { cursor: grab; touch-action: none; }.card.usable:hover { transform: translateY(-7px) rotate(0); box-shadow: 0 0 0 4px color-mix(in srgb, var(--card-color) 28%, transparent), 3px 7px 0 #0003; }.card.usable:active { cursor: grabbing; }.card.dragging-source { opacity: .16; transform: translateY(-3px) scale(.94); }.card.locked { filter: saturate(.45); opacity: .72; }.card:disabled { cursor: default; }.card-grammar { position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px 3px 7px; border: 0; border-radius: 0 0 0 5px; background: var(--card-color); box-shadow: -1px 1px 0 #0003; color: white; font: 1000 8px/1 "PingFang SC", sans-serif; }.card .card-grammar.counter, .card .card-grammar.frame, .card .card-grammar.group, .card .card-grammar.heal, .card .card-grammar.target { color: white; }.card-grammar i { display: inline; height: auto; color: inherit; font: inherit; }.card-grammar.mini { position: static; padding: 1px 3px; border-width: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 7px; }.card-grammar.response-grammar { position: static; float: right; margin-left: 6px; border: 1px solid var(--card-color); border-radius: 999px; background: #fffdf7; color: var(--card-color); }.card strong { position: relative; z-index: 1; display: block; font-size: 17px; text-shadow: 1px 1px 0 #fff; white-space: nowrap; }.card-art { display: block; height: 56px; margin: 0 auto 1px; background-image: url("assets/generated/card-meme-reactions-sheet-v3.webp"); background-repeat: no-repeat; background-size: 400% 400%; background-position: 0 0; filter: drop-shadow(1px 2px 1px #0002); }.card-art.art-0 { background-position: 0 0; }.card-art.art-1 { background-position: 33.333% 0; }.card-art.art-2 { background-position: 66.667% 0; }.card-art.art-3 { background-position: 100% 0; }.card-art.art-4 { background-position: 0 33.333%; }.card-art.art-5 { background-position: 33.333% 33.333%; }.card-art.art-6 { background-position: 66.667% 33.333%; }.card-art.art-7 { background-position: 100% 33.333%; }.card-art.art-8 { background-position: 0 66.667%; }.card-art.art-9 { background-position: 33.333% 66.667%; }.card-art.art-10 { background-position: 66.667% 66.667%; }.card-art.art-11 { background-position: 100% 66.667%; }.card-art.art-12 { background-position: 0 100%; }.card-art.art-13 { background-position: 33.333% 100%; }.card-art.art-14 { background-position: 66.667% 100%; }.card-art.art-15 { background-position: 100% 100%; }.card small { display: block; height: 28px; overflow: hidden; font-family: sans-serif; font-size: 10px; line-height: 1.35; text-align: left; }
.card-art[class*="meme-art-"] { background-image: url("assets/generated/season-one-hot-meme-sheet.webp"); background-size: 400% 200%; }.card-art.meme-art-0 { background-position: 0 0; }.card-art.meme-art-1 { background-position: 33.333% 0; }.card-art.meme-art-2 { background-position: 66.667% 0; }.card-art.meme-art-3 { background-position: 100% 0; }.card-art.meme-art-4 { background-position: 0 100%; }.card-art.meme-art-5 { background-position: 33.333% 100%; }
/* 贴吧牌不是把现代卡图套一层蓝色滤镜。它单独使用一张 4×4 的老论坛反应图集，
   因此切换时代时，牌名、效果和卡面都会一起换成当年的语境。 */
.card-art[class*="retro-art-"] { background-image: url("assets/generated/card-retro-forum-reactions-sheet-v2.webp"); background-size: 400% 400%; }
.card-art.retro-art-0 { background-position: 0 0; }.card-art.retro-art-1 { background-position: 33.333% 0; }.card-art.retro-art-2 { background-position: 66.667% 0; }.card-art.retro-art-3 { background-position: 100% 0; }.card-art.retro-art-4 { background-position: 0 33.333%; }.card-art.retro-art-5 { background-position: 33.333% 33.333%; }.card-art.retro-art-6 { background-position: 66.667% 33.333%; }.card-art.retro-art-7 { background-position: 100% 33.333%; }.card-art.retro-art-8 { background-position: 0 66.667%; }.card-art.retro-art-9 { background-position: 33.333% 66.667%; }.card-art.retro-art-10 { background-position: 66.667% 66.667%; }.card-art.retro-art-11 { background-position: 100% 66.667%; }.card-art.retro-art-12 { background-position: 0 100%; }.card-art.retro-art-13 { background-position: 33.333% 100%; }.card-art.retro-art-14 { background-position: 66.667% 100%; }.card-art.retro-art-15 { background-position: 100% 100%; }
.card.just-drawn { animation: cardDrawIn .52s cubic-bezier(.2,.9,.25,1.2) both; }
.card-detail { min-height: 22px; padding: 2px 8px; color: #655e55; font-family: sans-serif; font-size: 12px; font-weight: 700; text-align: center; }.drag-ghost, .card-launch { position: fixed; z-index: 90; margin: 0; pointer-events: none; transform-origin: 50% 75%; will-change: left, top, transform, opacity; }.drag-ghost { filter: drop-shadow(0 18px 12px #0004); transform: rotate(-7deg) scale(1.1); }.card-launch { z-index: 92; }.impact-burst { position: fixed; z-index: 91; width: 12px; height: 12px; border-radius: 50%; background: var(--burst-color); pointer-events: none; animation: burst .58s ease-out forwards; }

.response-layer, .round-layer { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 16px; background: #171717c9; backdrop-filter: blur(3px); }.response-box { width: min(100%, 570px); padding: 25px; border: 4px solid var(--ink); background: var(--paper); box-shadow: 8px 10px 0 var(--pink); transform: rotate(-.5deg); }.response-kicker, .help-kicker { display: inline-block; padding: 3px 8px; background: var(--pink); color: white; font-weight: 900; }.response-box h2 { margin: 12px 0 5px; font-size: 29px; }.response-box p { margin: 0 0 15px; font-family: sans-serif; font-size: 13px; }.response-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }.response-options button { min-height: 92px; padding: 10px; border: 3px solid var(--card-color, var(--ink)); background: white; text-align: left; box-shadow: 3px 4px 0 #0002; cursor: pointer; transition: transform .12s, box-shadow .12s, filter .12s; }.choice-card, .status-choice { min-height: 78px !important; }.choice-card strong, .status-choice strong { color: var(--card-color, #5b9c6c); }.choice-card small, .status-choice small { font-size: 12px; }
.response-options button:hover { transform: translateY(-2px); box-shadow: 5px 6px 0 #0003; }.response-options button:active { transform: translate(2px, 2px); box-shadow: 1px 2px 0 #0003; }.response-options strong, .response-options small { display: block; }.response-options strong { color: var(--card-color, var(--ink)); font-size: 20px; }.response-options small { margin-top: 4px; font-family: sans-serif; font-size: 11px; }.response-art { float: left; width: 62px; height: 62px; margin: -2px 7px 2px -4px; }.response-options .pass-response { --card-color: #c8303c; border-color: #c8303c; background: linear-gradient(135deg, #fff9f4 0 70%, #ffe0df 70%); box-shadow: 4px 5px 0 #c8303c55; }.pass-response .response-risk { display: inline-block; padding: 2px 5px; background: #c8303c; color: white; font: 900 9px/1 "PingFang SC", sans-serif; }.pass-response strong { margin-top: 5px; color: #af2531; }.pass-response b { display: inline-block; margin-top: 7px; padding: 3px 7px; border: 1px solid #c8303c; background: #c8303c; color: white; font: 900 10px/1 "PingFang SC", sans-serif; }
.meltdown-layer { position: fixed; z-index: 45; inset: 0; display: grid; place-items: center; overflow: hidden; pointer-events: none; isolation: isolate; background: radial-gradient(circle at 50% 52%, #fff4bd 0 2%, #ffb02e90 8%, #e32b1390 24%, #180504d9 72%); opacity: 0; }.meltdown-layer::before, .meltdown-layer::after { content: ""; position: absolute; inset: -18%; z-index: -1; background: repeating-radial-gradient(ellipse at center, #ffe36c 0 2px, #ff6b1f 4px 10px, #d91411 12px 17px, transparent 18px 29px); mix-blend-mode: screen; filter: blur(4px); opacity: .68; }.meltdown-layer::before { animation: fireSpin 1.25s linear infinite; }.meltdown-layer::after { inset: -5%; background: radial-gradient(ellipse at 15% 94%, #fff7ae 0 4%, #ff8b1d 11%, transparent 26%), radial-gradient(ellipse at 42% 100%, #ffd83f 0 5%, #ef3615 16%, transparent 34%), radial-gradient(ellipse at 74% 96%, #fff4a8 0 4%, #fb7419 14%, transparent 31%), radial-gradient(ellipse at 95% 100%, #ffda44 0 3%, #e42414 13%, transparent 26%); filter: blur(10px); opacity: .92; animation: flameRise .8s ease-in-out infinite alternate; }.meltdown-layer.is-active { animation: meltdownFlash 2.1s both; }.meltdown-heat { position: absolute; inset: -20%; border-radius: 43%; background: repeating-radial-gradient(ellipse at 50% 50%, transparent 0 20px, #ffdc5970 24px 26px, transparent 30px 52px); mix-blend-mode: screen; filter: blur(1px); }.haze-one { animation: heatPulse .68s ease-out infinite; }.haze-two { animation: heatPulse 1s .18s ease-out infinite reverse; opacity: .65; }.meltdown-flames { position: absolute; z-index: 1; inset: auto 0 -7vh; display: flex; align-items: end; justify-content: space-around; height: 57vh; padding-inline: 2vw; }.meltdown-flames i { display: block; width: clamp(80px, 15vw, 230px); height: clamp(200px, 48vh, 520px); border-radius: 52% 48% 32% 58% / 66% 63% 37% 34%; background: radial-gradient(ellipse at 50% 84%, #fff5a0 0 9%, #ffcf34 10% 21%, #ff6b1b 28% 47%, #d81e12 67%, transparent 70%); filter: blur(1px) drop-shadow(0 0 20px #ff4b19); transform-origin: 50% 100%; animation: tongue 440ms ease-in-out infinite alternate; }.meltdown-flames i:nth-child(2n) { height: clamp(160px, 40vh, 440px); animation-delay: -220ms; }.meltdown-flames i:nth-child(3n) { height: clamp(240px, 57vh, 610px); animation-delay: -120ms; }.meltdown-copy { position: relative; z-index: 3; display: grid; justify-items: center; color: white; text-align: center; text-shadow: 0 5px 0 #7a120d, 0 0 25px #ff4b17; transform: rotate(-3deg); }.meltdown-copy span { padding: 4px 11px; border: 2px solid #fff3b5; background: #e72416; box-shadow: 4px 4px 0 #4b0c09; font: 1000 clamp(12px, 2.6vw, 18px)/1 "PingFang SC", sans-serif; letter-spacing: .18em; }.meltdown-copy strong { margin: -10px 0 -6px; color: #fff6af; font: 1000 clamp(112px, 25vw, 250px)/.84 "Kaiti SC", "STKaiti", sans-serif; letter-spacing: -.14em; -webkit-text-stroke: clamp(2px, .45vw, 5px) #9a1710; }.meltdown-copy b { font-size: clamp(26px, 6vw, 58px); }.meltdown-copy small { margin-top: 7px; font: 800 clamp(12px, 2.5vw, 17px)/1.25 "PingFang SC", sans-serif; }.round-layer { z-index: 40; }.round-result { position: relative; z-index: 1; }
.round-result { width: min(90vw, 430px); padding: 30px; border: 4px solid var(--ink); background: var(--yellow); box-shadow: 8px 10px 0 var(--pink); text-align: center; transform: rotate(-2deg); }.round-result span { color: var(--red); font-weight: 1000; }.round-result h2 { margin: 10px 0; font-size: 42px; }.round-result p { font-weight: 900; }
.help-dialog, .gameover-dialog { width: min(92vw, 560px); padding: 28px; border: 4px solid var(--ink); background: var(--paper); box-shadow: 8px 10px 0 var(--ink); }.help-dialog::backdrop, .gameover-dialog::backdrop { background: #171717b8; backdrop-filter: blur(3px); }.dialog-close { position: absolute; right: 12px; top: 9px; border: 0; background: none; font-size: 27px; }.help-dialog h2 { margin: 10px 0; font-size: 32px; }.help-dialog ol { padding-left: 25px; font-family: sans-serif; line-height: 1.8; }.help-note { padding: 10px; background: #ffdd6455; font-family: sans-serif; font-size: 13px; }.legend { display: flex; flex-wrap: wrap; gap: 6px; }.legend span { padding: 4px 8px; border: 2px solid; font-weight: 900; }.gameover-dialog { text-align: center; }.gameover-dialog h2 { margin: 10px 0 20px; color: var(--red); font-size: 35px; }.gameover-avatar { position: relative; display: grid; place-items: center; box-sizing: border-box; width: 176px; height: 176px; margin: 0 auto; padding: 13px; overflow: hidden; border: 4px solid var(--ink); background: #fffdf7; box-shadow: 5px 6px 0 #17171738; }.gameover-avatar::before { display: none; }.gameover-avatar .avatar { width: 142px; height: 142px; margin: 0; filter: saturate(1.18); }
.help-restart { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 10px 12px; border: 2px dashed var(--ink); background: #ffe7a9; transform: rotate(-.4deg); }.help-restart.hidden { display: none; }.help-restart > div:first-child { min-width: 0; }.help-restart b, .help-restart small { display: block; }.help-restart small { margin-top: 3px; color: #625a52; font: 800 11px/1.35 sans-serif; }.help-game-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }.help-restart button { flex: 0 0 auto; padding: 9px 12px; border: 2px solid var(--ink); background: var(--pink); color: white; box-shadow: 3px 3px 0 var(--ink); font-weight: 1000; cursor: pointer; }.help-restart button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }.help-restart button:disabled { filter: grayscale(.6); cursor: wait; }
@media (max-width: 480px) { .help-restart { align-items: stretch; flex-direction: column; }.help-game-actions { width: 100%; }.help-restart button { width: 100%; } }
.toast { position: fixed; z-index: 60; left: 50%; top: 44%; max-width: 85vw; padding: 12px 18px; border: 3px solid var(--ink); background: white; box-shadow: 4px 5px 0 var(--ink); font-weight: 1000; transform: translate(-50%, -50%) scale(.8); opacity: 0; pointer-events: none; transition: .14s; }.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-1deg); }
@keyframes targetPulse { 50% { box-shadow: 0 0 0 6px #ff4f7566, 3px 5px 0 #0003; } }
@keyframes activeSeat { 50% { box-shadow: 0 0 0 8px #ffd95a80, 4px 8px 0 var(--ink); } }
@keyframes dangerBlink { 50% { transform: rotate(-4deg) scale(1.08); filter: brightness(1.15); } }
@keyframes avatarCritical { 50% { transform: rotate(-2deg) scale(1.04); } }
@keyframes targetHit { 20% { transform: translateX(-7px) rotate(-4deg) scale(1.06); } 45% { transform: translateX(8px) rotate(4deg) scale(.96); } 70% { transform: translateX(-4px) rotate(-2deg); } }
@keyframes heatFloat { from { opacity: 0; transform: translate(-50%, 8px) scale(.7) rotate(-3deg); } 28% { opacity: 1; transform: translate(-50%, -10px) scale(1.14) rotate(2deg); } to { opacity: 0; transform: translate(-50%, -55px) scale(.96) rotate(-1deg); } }
@keyframes cardDrawIn { from { opacity: 0; transform: translateY(80px) rotate(8deg) scale(.72); } to { opacity: 1; } }
@keyframes tableCardLand { from { opacity: 0; transform: translateY(-22px) rotate(-10deg) scale(.76); } to { opacity: 1; } }
@keyframes tableCardsSettle {
  0%, 38% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
  72% { opacity: .72; filter: blur(0); transform: translateY(5px) scale(.9); }
  100% { opacity: 0; filter: blur(2px); transform: translateY(16px) scale(.68); }
}
.pending-card.is-settling .turn-table-stack {
  transform-origin: 50% 55%;
  animation: tableCardsSettle 1.4s ease-in forwards;
  will-change: opacity, filter, transform;
}
/* 首次指令横条一出现就占满可用宽度，不从中间缩放展开。 */
@keyframes turnSubtitleIn { from { opacity: 0; transform: translateY(-7px) skewX(-1.5deg); } to { opacity: 1; transform: translateY(0) skewX(0); } }
@keyframes burst { from { opacity: 1; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(5px) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(92px) scale(.2); } }
@keyframes pageImpact { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px) rotate(-.15deg); } 50% { transform: translateX(5px) rotate(.12deg); } 75% { transform: translateX(-2px); } }
body.impact .app-shell { animation: pageImpact .24s linear; }
@keyframes meltdownFlash { 0% { opacity: 0; transform: scale(1.1); } 7% { opacity: 1; } 15% { opacity: .96; transform: scale(1); } 86% { opacity: .94; } 100% { opacity: 0; transform: scale(1.03); } }
@keyframes fireSpin { to { transform: rotate(360deg) scale(1.08); } }
@keyframes flameRise { to { transform: translateY(-3vh) scaleX(1.08); } }
@keyframes heatPulse { from { transform: scale(.45); opacity: .08; } to { transform: scale(1.16); opacity: .88; } }
@keyframes tongue { from { transform: rotate(-5deg) scaleY(.83) translateY(5%); } to { transform: rotate(6deg) scaleY(1.09) translateY(-3%); } }
body.meltdown .app-shell { animation: pageImpact .38s linear 2; }

@media (max-width: 920px) {
  .turn-banner { grid-template-columns: minmax(0, 1fr) auto; }
  .turn-message { grid-column: 1; }
  .turn-confirm { grid-column: 2; }
}

@media (max-width: 720px) {
  .app-shell { padding-inline: 10px; }.masthead { min-height: 78px; }.brand { gap: 7px; }.brand-kicker { max-width: 84px; margin-bottom: 5px; font-size: 10px; }.masthead h1 { font-size: 43px; letter-spacing: -4px; }.help-button { font-size: 13px; }
  .lobby { grid-template-columns: 1fr; gap: 26px; padding: 24px 10px; }.lobby-poster { min-height: 330px; padding: 25px 16px; }.poster-tag { right: -5px; top: 8px; font-size: 11px; }.poster-avatars .avatar { width: 51px; height: 51px; }.lobby-poster h2 { font-size: 35px; }.lobby-poster p { font-size: 13px; }.join-card { padding: 21px 16px; }.mode-button strong { font-size: 17px; }
  .room-ticket { gap: 9px; padding-inline: 10px; }.room-ticket strong { font-size: 31px; letter-spacing: 5px; }.room-seat { grid-template-columns: 59px minmax(0, 1fr) auto; padding: 9px; }.room-seat .avatar { width: 53px; height: 53px; }.room-seat > b { font-size: 11px; }.room-seat-actions { gap: 4px; }.seat-action, .seat-current, .seat-pending { min-width: 70px; padding: 4px; font-size: 9px; }.seat-swap-request { align-items: flex-start; flex-direction: column; gap: 8px; }.seat-swap-request span { width: 100%; }.seat-swap-request button { flex: 1; }
  .table { grid-template-rows: auto minmax(390px, 1fr) auto; min-height: calc(100dvh - 88px); }.turn-banner { grid-template-columns: minmax(0, 1fr) auto; height: 62px; min-height: 62px; gap: 8px; width: 100vw; margin: 0 -50vw 3px; padding: 0 17px; }.turn-message { grid-column: 1; text-align: left; }.turn-message strong { font-size: clamp(18px, 5.2vw, 23px); }.turn-message small { font-size: 9px; }.turn-message span { font-size: 8px; }.turn-confirm { grid-column: 2; width: 94px; min-width: 0; margin: 0; padding: 7px 8px; font-size: 11px; }
  .players { min-height: 390px; }.players::before { top: 57%; width: 90%; }.player-seat { display: flex; flex-direction: column; gap: 2px; width: 46%; padding: 6px 3px; text-align: center; }.player-seat.table-opponent-left { left: 0; top: 7px; }.player-seat.table-opponent-right { right: 0; top: 7px; }.player-seat.table-self { display: grid; grid-template-columns: 45px minmax(0, 1fr); grid-template-rows: auto auto; gap: 3px 5px; width: 100%; padding: 4px; text-align: left; }.player-seat.table-self .scores { grid-column: 1 / -1; width: 100%; }.player-seat .avatar { width: 56px; height: 56px; }.player-seat.table-self .avatar { width: 43px; height: 43px; }.danger-mark { left: 1px; bottom: -9px; padding: 2px 4px; font-size: 8px; }.player-info strong { max-width: 104px; font-size: 13px; }.player-info span { font-size: 9px; }.scores { width: 100%; }.risk-meter { width: 100%; padding: 3px 4px; text-align: left; }.risk-label { font-size: 8px; }
  .table-center { top: 59%; width: 92%; min-height: 225px; }.pending-card { min-height: 156px; }.turn-table-stack { min-height: 137px; }.turn-table-card { grid-template-rows: 14px 57px auto 14px; width: 104px; height: 130px; padding: 5px; }.turn-table-card .card-art { width: 57px; }.turn-table-card strong { font-size: 15px; }.turn-table-card small { font-size: 8px; }.turn-table-stack.has-response .turn-table-card + .turn-table-card { margin-left: -28px; }
  .action-panel { grid-template-columns: 116px minmax(0, 1fr); gap: 6px; padding-top: 4px; }.target-copy { max-width: 100%; padding: 3px 7px; font-size: 10px; text-align: center; }.hand { min-height: 119px; margin-inline: -3px; }.card { flex-basis: 84px; height: 112px; padding-inline: 5px; }.card strong { font-size: 13px; }.card-art { height: 43px; }.card small { height: 25px; font-size: 8px; }.card-detail { display: none; }
  .response-box { padding: 20px 15px; }.response-box h2 { font-size: 23px; }.response-options { grid-template-columns: 1fr; max-height: 54dvh; overflow-y: auto; }.response-options button { padding: 8px; }.response-options strong { font-size: 17px; }
  .meltdown-copy strong { font-size: min(48vw, 190px); }.meltdown-flames { height: 48vh; }
}

/* 状态徽章不参与名字/手牌文字的截断，也不被旧的自己座位规则隐藏。 */
#game-view .player-info .player-meta {
  display: flex !important;
  overflow: visible !important;
}
#game-view .player-info .player-meta > span { display: block; }
#game-view .player-info .recorded-mark {
  display: inline-flex !important;
  flex: 0 0 auto;
  overflow: visible;
}
@media (max-width: 380px) { .brand-kicker { display: none; }.masthead h1 { font-size: 41px; }.poster-avatars { gap: 3px; }.mode-choice, .join-row { grid-template-columns: 1fr; }.room-ticket { flex-wrap: wrap; justify-content: center; }.room-ticket button { flex-basis: 100%; }.turn-banner { padding-inline: 18px; }.turn-confirm { width: 86px; font-size: 10px; }.player-seat .avatar { width: 56px; height: 56px; }.player-info strong { max-width: 94px; }.card { flex-basis: 86px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }


/* The source sheet is a 4×4 square grid: every visible tile stays square. */
.card-art { width: 56px; aspect-ratio: 1; height: auto; }
@media (max-width: 640px) {
  .card-art { width: 43px; height: auto; }
}

/* 三国杀式底座：玩家坐在牌桌底边，手牌从面前展开；不再是一整条个人资料栏。 */
.table { grid-template-rows: auto minmax(360px, 1fr) auto; gap: 7px; padding-top: 7px; }
.turn-banner { grid-column: 1; margin-bottom: 0; }
.action-panel { position: relative; display: block; min-width: 0; min-height: 193px; padding: 27px 0 0; border-top: 0; }
.self-seat { position: absolute; z-index: 7; left: 50%; top: -21px; width: min(300px, 54vw); transform: translateX(-50%); }
.player-seat.table-self { display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto auto; gap: 3px 7px; min-height: 80px; width: 100%; padding: 6px 8px; border: 2px solid var(--seat-color); border-radius: 9px 14px 8px 12px; background: var(--seat-wash); box-shadow: 3px 4px 0 #0003; text-align: left; transform: rotate(-.5deg); }
.player-seat.table-self .avatar { width: 58px; height: 58px; grid-row: 1 / 3; }
.player-seat.table-self .player-info strong { font-size: 15px; }
.player-seat.table-self .player-info span { display: none; }
.player-seat.table-self .risk-meter { width: fit-content; padding: 0; border: 0; background: transparent; }
.player-seat.table-self .scores { justify-self: start; align-self: start; }
.hand-zone { position: relative; min-width: 0; }
.target-copy { position: absolute; z-index: 5; left: 50%; top: 1px; max-width: min(420px, 78vw); margin: 0; padding: 3px 10px; transform: translateX(-50%) rotate(.5deg); font-size: 11px; white-space: nowrap; }
.hand { --fan-step: 72px; align-items: flex-end; justify-content: center; gap: 0; min-height: 177px; height: 177px; padding: 23px 36px 3px 58px; overflow: visible; scrollbar-width: none; touch-action: none; }
.card { --fan-rotate: 0deg; --fan-lift: 0px; --fan-card-width: 118px; flex: 0 0 var(--fan-card-width); width: var(--fan-card-width); max-width: none; height: 160px; margin-left: calc(var(--fan-step) - var(--fan-card-width)); padding: 21px 7px 7px; border-radius: 7px 7px 4px 4px; background: linear-gradient(145deg, #fff 0 76%, color-mix(in srgb, var(--card-color) 11%, white)); transform: translateY(var(--fan-lift)) rotate(var(--fan-rotate)); transform-origin: 50% 115%; transition: transform .16s, box-shadow .16s, filter .16s; }
.card:first-child { margin-left: 0; }.card.usable:hover, .card.usable:focus-visible { z-index: 12; transform: translateY(calc(var(--fan-lift) - 18px)) rotate(0deg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--card-color) 28%, transparent), 3px 8px 0 #0003; outline: none; }.card .card-title--long { display: -webkit-box; min-height: 30px; overflow: hidden; font-size: 14px; line-height: 1.05; text-align: center; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; }.card small { height: 40px; }
.card.locked { filter: saturate(.82) brightness(.99); opacity: 1; }
.card-detail { display: none; }

/* 红温只保留三团火：亮火表示已累积，灰火表示空位。 */
.risk-meter { display: inline-flex; align-items: flex-end; padding: 0; background: transparent; }
.heat-dots { display: inline-flex; align-items: flex-end; gap: 2px; height: 24px; }
.heat-dots .heat-flame { display: block; width: 19px; height: 24px; flex: 0 0 19px; background: url("assets/generated/heat-fire-icon-v3.webp?v=1") center / contain no-repeat; filter: grayscale(1) saturate(0) contrast(.82) brightness(1.22); opacity: .34; transform: scale(.9); transform-origin: center bottom; transition: filter .18s ease, opacity .18s ease, transform .18s ease; }
.heat-dots .heat-flame.is-lit { filter: saturate(1.12) brightness(1.04) drop-shadow(0 1px 2px #d64c2066); opacity: 1; transform: scale(1); }
.heat-dots .heat-flame.is-lit:nth-child(1) { filter: sepia(.12) saturate(1.08) brightness(1.15) drop-shadow(0 1px 2px #d48b2566); }
.heat-dots .heat-flame.is-lit:nth-child(2) { filter: saturate(1.18) brightness(1.04) drop-shadow(0 1px 2px #df5e2166); }
.heat-dots .heat-flame.is-lit:nth-child(3) { filter: hue-rotate(-14deg) saturate(1.48) brightness(.98) drop-shadow(0 1px 3px #cb274466); }
.player-seat .avatar.heat-2 { filter: drop-shadow(0 5px 5px #f06b2faa) saturate(1.2); }.player-seat .avatar.heat-3 { filter: drop-shadow(0 5px 7px #ec3157cc) saturate(1.35); }

/* 中央区是回合战报，不是压在一起的一沓牌：并列展示每一次出牌和回应。 */
.turn-table-stack { align-items: flex-start; gap: 12px; min-height: 154px; padding-top: 16px; }
.turn-table-card { grid-template-rows: 14px 17px 58px auto 13px; width: 118px; height: 158px; padding: 5px 6px; transform: rotate(-1.5deg); }
.turn-table-flow { display: flex; align-items: center; justify-content: center; min-width: 0; gap: 3px; color: #4e4942; font: 1000 8px/1 "PingFang SC", sans-serif; white-space: nowrap; }
.turn-table-flow b, .turn-table-flow em { overflow: hidden; min-width: 0; max-width: 42px; text-overflow: ellipsis; white-space: nowrap; }
.turn-table-flow b { color: var(--actor-color); }.turn-table-flow em { color: var(--target-color); font-style: normal; }.turn-table-flow i { color: var(--card-color); font: 1000 13px/1 sans-serif; font-style: normal; }
.turn-table-card .card-art { width: 58px; }.turn-table-card small { color: #6b645b; }
.turn-table-stack.has-response .turn-table-card + .turn-table-card,
.turn-table-stack.has-response .turn-table-card:nth-child(3) { z-index: auto; margin: 0; transform: rotate(1.5deg); }

/* 落桌牌按“类别 → 谁对谁 → 表情 → 牌名 → 结果”逐行排版。 */
.pending-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: min(900px, 92vw); min-height: 234px; padding-top: 4px; }
.turn-table-stack { flex: 0 1 auto; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 12px; width: 100%; min-height: 0; max-height: min(52vh, 468px); padding: 0 6px 8px; overflow-y: auto; scrollbar-width: thin; }
.turn-table-card { grid-template-rows: 22px 20px 84px 34px minmax(38px, auto); width: 164px; min-height: 238px; height: auto; padding: 7px 8px 9px; }
.turn-table-kind { position: static; justify-self: start; align-self: start; padding: 2px 5px; transform: rotate(-4deg); }
.turn-table-card .card-art { width: 84px; height: 84px; margin: 0 auto; }
.turn-table-card strong { font-size: 20px; }
.turn-table-card small { display: -webkit-box; overflow: hidden; font-size: 10px; line-height: 1.25; text-align: left; text-overflow: clip; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.turn-table-card.is-reveal { border-style: dashed; border-top-color: #d6a12c; background: linear-gradient(145deg, #fffdf7 0 68%, #ffe6a4 100%); box-shadow: 4px 5px 0 #0003, 7px 8px 0 #d6a12c55; }.turn-table-card.is-reveal .turn-table-kind { background: #d6a12c; }.turn-table-card.is-reveal small { color: #9a5a06; font-weight: 1000; text-align: center; }
.turn-table-card strong { align-self: center; }
.turn-table-card small { align-self: start; }
@media (max-width: 720px) {
  .pending-card { width: min(96vw, 410px); min-height: 188px; padding-top: 2px; }
  .turn-table-stack { gap: 7px; min-height: 0; max-height: min(48vh, 360px); padding: 0 3px 6px; }
  .turn-table-card { grid-template-rows: 18px 15px 64px 28px minmax(30px, auto); width: 124px; min-height: 190px; height: auto; padding: 5px 5px 7px; }
  .turn-table-kind { padding: 2px 4px; font-size: 8px; }.turn-table-card .card-art { width: 64px; height: 64px; }.turn-table-card strong { font-size: 17px; }.turn-table-card small { font-size: 8px; line-height: 1.25; }.turn-table-flow { gap: 2px; font-size: 7px; }.turn-table-flow b, .turn-table-flow em { max-width: 38px; }.turn-table-flow i { font-size: 10px; }
}

@media (max-width: 720px) {
  .table { grid-template-rows: auto minmax(330px, 1fr) auto; }
  .action-panel { min-height: 151px; padding-top: 19px; }
  .self-seat { top: -16px; width: min(270px, 83vw); }
  .player-seat.table-self { grid-template-columns: 45px minmax(0, 1fr); width: 100%; min-height: 54px; padding: 4px 6px; }
  .player-seat.table-self .avatar { width: 45px; height: 45px; }.player-seat.table-self .scores { grid-column: auto; width: auto; }.player-seat.table-self .player-info strong { max-width: 142px; font-size: 13px; }.player-seat.table-self .risk-meter { width: fit-content; padding: 0; }
  .target-copy { top: -1px; max-width: 82vw; overflow: hidden; font-size: 9px; text-overflow: ellipsis; }
  .hand { min-height: 145px; height: 145px; padding: 18px 14px 3px 42px; margin: 0; overflow: visible; }
  .card { --fan-card-width: 88px; height: 132px; margin-left: calc(var(--fan-step) - var(--fan-card-width)); padding: 18px 5px 5px; }.card strong { font-size: 13px; }.card .card-title--long { min-height: 26px; font-size: 11px; }.card-art { width: 43px; height: auto; }.card small { height: 31px; font-size: 8px; }.card-grammar { padding: 3px 5px; font-size: 7px; }
  .heat-dots { gap: 1px; height: 20px; }.heat-dots .heat-flame { width: 16px; height: 20px; flex-basis: 16px; }
}

/* 常见笔记本高度也应一眼看到“对手—自己—手牌”，不能为了中间留白把出牌区推到首屏外。 */
@media (max-height: 820px) and (min-width: 721px) {
  .table { grid-template-rows: auto minmax(250px, 1fr) auto; min-height: calc(100dvh - 112px); }
  .players { min-height: 270px; }
  .table-center { min-height: 170px; }
  .action-panel { min-height: 168px; }.hand { min-height: 157px; height: 157px; padding-top: 17px; }
  .card { --fan-card-width: 98px; height: 138px; margin-left: calc(var(--fan-step) - var(--fan-card-width)); padding: 19px 6px 5px; }
  .card-art { width: 48px; }
  .card small { height: 31px; font-size: 9px; }
}

/* 桌面牌桌：纸张可以铺满，但真正交战的区域始终是一张居中的小牌桌。
   这样超宽或超高屏不会把三名玩家和手牌拉成三处孤岛。 */
@media (min-width: 721px) {
  .table {
    /* 牌桌本身撑到视口底边：对手在上、落牌在中、自己的资料和手牌固定落在底边。
       中段吃掉多出来的高度，不能让空白遗留在手牌下方。 */
    grid-template-rows: auto minmax(300px, 1fr) 168px;
    height: calc(100dvh - 124px);
    min-height: calc(100dvh - 124px);
    align-content: stretch;
  }
  .players,
  .action-panel {
    width: min(100%, 860px);
    margin-inline: auto;
  }
  /* 横条提示隐藏时也要保留第一行，不能把对手区自动塞进 0 高度的提示行。 */
  .players { grid-row: 2; min-height: 0; height: 100%; }
  .action-panel { grid-row: 3; }
  .players::before { width: min(64%, 500px); top: 55%; }
  .player-seat.table-opponent-left,
  .player-seat.table-opponent-right {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 3px 7px;
    width: min(236px, 25vw);
    padding: 6px 8px;
    border-width: 2px;
    box-shadow: 3px 4px 0 #0002;
  }
  .player-seat.table-opponent-left { left: clamp(0px, 2vw, 22px); top: 4px; }
  .player-seat.table-opponent-right { right: clamp(0px, 2vw, 22px); top: 4px; }
  .player-seat.table-opponent-left .avatar,
  .player-seat.table-opponent-right .avatar { width: 58px; height: 58px; grid-row: 1 / 3; }
  .player-seat.table-opponent-left .player-info,
  .player-seat.table-opponent-right .player-info { align-self: end; }
  .player-seat.table-opponent-left .player-info strong,
  .player-seat.table-opponent-right .player-info strong { font-size: 14px; }
  .player-seat.table-opponent-left .scores,
  .player-seat.table-opponent-right .scores { align-self: start; width: 100%; }
  .player-seat.table-opponent-left .risk-meter,
  .player-seat.table-opponent-right .risk-meter { width: fit-content; padding: 0; }

  .action-panel { min-height: 168px; height: 168px; padding: 0; }
  .target-copy { display: none; }
  .self-seat {
    z-index: 5;
    left: 0;
    top: 59px;
    width: 194px;
    transform: none;
  }
  .player-seat.table-self {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 3px 7px;
    /* 与对手座位卡同一高度等级，避免自己的头像区显得被压扁。 */
    min-height: 80px;
    padding: 6px 8px;
    border-radius: 8px 12px 7px 11px;
  }
  .player-seat.table-self .avatar { width: 58px; height: 58px; grid-row: 1 / 3; }
  .player-seat.table-self .player-info { align-self: end; }
  .player-seat.table-self .scores { justify-self: start; align-self: start; }
  .player-seat.table-self .risk-meter { padding: 0; }
  .hand-zone { position: absolute; z-index: 4; inset: 0; height: 168px; padding: 0; }
  .hand {
    position: absolute;
    left: 204px;
    bottom: 0;
    width: calc(100% - 204px);
    height: 146px;
    min-height: 146px;
    margin: 0;
    justify-content: flex-start;
    padding: 0 10px 2px 5px;
    /* 选中的牌往上抬时可以越过手牌槽；不能再被 146px 的槽口截掉。 */
    overflow: visible;
  }
  .card { --fan-card-width: 96px; height: 144px; margin-left: calc(var(--fan-step) - var(--fan-card-width)); padding: 19px 6px 5px; }
  .card-art { width: 48px; }
  .card small { height: 31px; font-size: 9px; }
}

/* 极矮的桌面仍优先保证“对手—出牌区—自己的手牌”在首屏连成一张桌子。 */
@media (min-width: 721px) and (max-height: 760px) {
  .table { grid-template-rows: auto clamp(260px, 42vh, 330px) 150px; }
  .action-panel { min-height: 150px; height: 150px; }
  .hand-zone { height: 150px; }
  .self-seat { top: 48px; }
  .hand { height: 132px; min-height: 132px; }
  .card { --fan-card-width: 88px; height: 130px; margin-left: calc(var(--fan-step) - var(--fan-card-width)); padding-top: 16px; }
  .card-art { width: 43px; }
  .card small { height: 27px; font-size: 8px; }
}

@media (max-width: 720px) {
  /* 手机上按真实出牌顺序排：手牌在上，自己的资料在最下方。
     不再把人物卡悬在牌堆上方，避免挡住第一排牌。 */
  /* 底部是一块固定的出牌座：不让最小高度在资料卡下方留下空壳。 */
  .table {
    grid-template-rows: auto minmax(0, 1fr) 222px;
    height: calc(100dvh - 110px);
    min-height: calc(100dvh - 110px);
  }
  .players { min-height: 0; }
  .target-copy { display: none; }
  .action-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 222px;
    height: 222px;
    padding: 0;
  }
  .hand-zone {
    position: relative;
    z-index: 4;
    order: 1;
    width: 100%;
    height: 145px;
  }
  .hand {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    height: 145px;
    min-height: 145px;
    margin: 0;
    padding: 15px 14px 3px 42px;
    overflow: visible;
  }
  .self-seat {
    position: relative;
    z-index: 5;
    left: auto;
    top: auto;
    order: 2;
    width: min(286px, 88vw);
    margin-top: 2px;
    margin-bottom: max(0px, env(safe-area-inset-bottom));
    transform: none;
  }
}

/* 对局不再浪费一整行首页标题：把省下来的高度完整给“对手—中央落牌区—手牌”。
   原先固定按视口减 110px 计算，又叠加了标题栏，矮屏时中间行会被挤成 0。 */
@media (max-width: 720px) {
  .app-shell:has(#game-view:not(.hidden)) {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .app-shell:has(#game-view:not(.hidden)) .masthead { display: none; }
  .app-shell:has(#game-view:not(.hidden)) #game-view {
    grid-template-rows: auto minmax(180px, 1fr) 222px;
    height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    min-height: 0;
  }
}

/* 破防不是无来源的全屏特效：先从具体头像点燃，再铺满和收回同一位置。 */
.meltdown-layer { --meltdown-x: 50vw; --meltdown-y: 50vh; background: transparent; }
.meltdown-layer::before { position: fixed; left: var(--meltdown-x); top: var(--meltdown-y); inset: auto; z-index: -2; width: 124vmax; height: 124vmax; border-radius: 50%; background: repeating-radial-gradient(circle, #fff3a8 0 3px, #ffb42d 5px 13px, #f04418 15px 28px, #8e130d 32px 46px, transparent 49px 66px); mix-blend-mode: screen; filter: blur(3px); opacity: 0; transform: translate(-50%, -50%) scale(.015); animation: none; }
.meltdown-layer::after { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 12% 96%, #fff8b4 0 3%, #ffc62c 6%, #e53816 16%, transparent 29%), radial-gradient(ellipse at 39% 101%, #fff3a1 0 5%, #ffad22 10%, #dc2114 24%, transparent 39%), radial-gradient(ellipse at 70% 98%, #ffe05e 0 4%, #fa781b 13%, #d51b12 28%, transparent 43%), radial-gradient(ellipse at 95% 102%, #fff2a1 0 3%, #f7811c 12%, #bd160f 25%, transparent 37%), radial-gradient(circle at 50% 48%, #ffeca888 0 8%, #f04b1b9b 27%, #310807e8 74%); background-color: #240604cf; clip-path: circle(0 at var(--meltdown-x) var(--meltdown-y)); opacity: 0; animation: none; }
.meltdown-layer.is-active::before { animation: sourceFireWave 2.1s cubic-bezier(.2,.76,.26,1) both; }
.meltdown-layer.is-active::after { animation: fireFieldSpread 2.1s cubic-bezier(.2,.76,.26,1) both; }
.meltdown-source-fire { position: fixed; left: var(--meltdown-x); top: var(--meltdown-y); z-index: 4; width: 26px; height: 32px; opacity: 0; transform: translate(-50%, -74%) scale(.2); transform-origin: 50% 100%; }
.meltdown-source-fire::before, .meltdown-source-fire::after, .meltdown-source-fire i { position: absolute; bottom: 0; display: block; width: 24px; height: 42px; border-radius: 65% 35% 52% 48% / 72% 61% 39% 28%; background: radial-gradient(ellipse at 48% 80%, #fff9bd 0 16%, #ffcf2e 18% 34%, #ff6819 49% 66%, #d71e12 79%, transparent 81%); content: ""; filter: drop-shadow(0 0 9px #ff4c1a); transform-origin: 50% 100%; }
.meltdown-source-fire::before { left: -15px; height: 30px; transform: rotate(-19deg); }.meltdown-source-fire::after { right: -15px; height: 35px; transform: rotate(22deg); }.meltdown-source-fire i:nth-child(1) { left: 0; height: 49px; }.meltdown-source-fire i:nth-child(2) { left: 10px; height: 29px; transform: rotate(22deg); }.meltdown-source-fire i:nth-child(3) { left: -8px; height: 26px; transform: rotate(-18deg); }
.meltdown-layer.is-active .meltdown-source-fire { animation: avatarIgnition 2.1s cubic-bezier(.2,.8,.3,1) both; }
.meltdown-heat { position: fixed; left: var(--meltdown-x); top: var(--meltdown-y); inset: auto; width: 110vmax; height: 110vmax; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 26px, #ffdc5970 30px 33px, transparent 37px 63px); mix-blend-mode: screen; filter: blur(1px); opacity: 0; transform: translate(-50%, -50%) scale(.02); }
.meltdown-layer.is-active .haze-one { animation: heatRing 2.1s ease-out both; }.meltdown-layer.is-active .haze-two { animation: heatRing 2.1s .1s ease-out both; }
.meltdown-flames { clip-path: circle(0 at var(--meltdown-x) var(--meltdown-y)); }.meltdown-layer.is-active .meltdown-flames { animation: flameCurtainSpread 2.1s cubic-bezier(.2,.76,.26,1) both; }
.meltdown-layer.is-active .meltdown-copy { animation: meltdownCopy 2.1s both; }
.player-seat.is-meltdown-source { z-index: 20; }.player-seat.is-meltdown-source .avatar { animation: avatarMeltdownSource 2.1s cubic-bezier(.2,.74,.25,1) both !important; filter: drop-shadow(0 0 5px #fff6a2) drop-shadow(0 0 18px #ff4b1a) saturate(1.4) !important; }
@keyframes meltdownFlash { 0% { opacity: 0; } 7% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sourceFireWave { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.015); } 8% { opacity: .9; transform: translate(-50%, -50%) scale(.05); } 48% { opacity: .92; transform: translate(-50%, -50%) scale(1); } 72% { opacity: .76; transform: translate(-50%, -50%) scale(.92); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.015); } }
@keyframes fireFieldSpread { 0%, 6% { opacity: 0; clip-path: circle(0 at var(--meltdown-x) var(--meltdown-y)); } 16% { opacity: .88; clip-path: circle(16vmax at var(--meltdown-x) var(--meltdown-y)); } 47%, 70% { opacity: .96; clip-path: circle(115vmax at var(--meltdown-x) var(--meltdown-y)); } 88% { opacity: .7; clip-path: circle(20vmax at var(--meltdown-x) var(--meltdown-y)); } 100% { opacity: 0; clip-path: circle(0 at var(--meltdown-x) var(--meltdown-y)); } }
@keyframes avatarIgnition { 0%, 4% { opacity: 0; transform: translate(-50%, -74%) scale(.2); } 14% { opacity: 1; transform: translate(-50%, -74%) scale(1.35); } 39% { opacity: .95; transform: translate(-50%, -74%) scale(2.15); } 68% { opacity: 0; transform: translate(-50%, -74%) scale(3); } 100% { opacity: 0; transform: translate(-50%, -74%) scale(.2); } }
@keyframes heatRing { 0%, 8% { opacity: 0; transform: translate(-50%, -50%) scale(.02); } 14% { opacity: .9; } 61% { opacity: .25; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.02); } }
@keyframes flameCurtainSpread { 0%, 12% { clip-path: circle(0 at var(--meltdown-x) var(--meltdown-y)); } 49%, 70% { clip-path: circle(115vmax at var(--meltdown-x) var(--meltdown-y)); } 100% { clip-path: circle(0 at var(--meltdown-x) var(--meltdown-y)); } }
@keyframes meltdownCopy { 0%, 17% { opacity: 0; transform: translateY(16px) scale(.7) rotate(-3deg); } 32%, 67% { opacity: 1; transform: translateY(0) scale(1) rotate(-3deg); } 86%, 100% { opacity: 0; transform: translateY(-10px) scale(.82) rotate(-3deg); } }
@keyframes avatarMeltdownSource { 0% { transform: scale(1); } 9% { transform: scale(1.12) rotate(-5deg); } 15%, 27% { transform: scale(1.2) rotate(5deg); } 38% { transform: scale(1.08); opacity: 1; } 61% { transform: scale(1); opacity: .7; } 84% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }

/* 手牌正文不再靠固定高度硬截：标题、表情图、说明各占一格，说明最多完整显示三行。 */
.card {
  display: grid;
  grid-template-rows: auto 40px minmax(0, 1fr);
  align-content: start;
  gap: 1px;
}
.card .card-art {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  align-self: center;
}
.card small {
  height: auto;
  min-height: 0;
  overflow: hidden;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
@media (min-width: 721px) {
  .card { grid-template-rows: auto 44px minmax(0, 1fr); }
  .card .card-art { width: 44px; height: 44px; }
}
@media (min-width: 721px) and (max-height: 760px) {
  .card { grid-template-rows: auto 38px minmax(0, 1fr); }
  .card .card-art { width: 38px; height: 38px; }
}

/* 首页宣传直接展示生图主视觉，不再保留一块文字说明。 */
.lobby-poster { display: block; isolation: isolate; min-height: 390px; padding: 0; border-radius: 12px; background: #fffdf7; box-shadow: 7px 8px 0 var(--ink); transform: none; }
.lobby-poster::before, .lobby-poster::after, .poster-tag { display: none; }
.poster-keyart { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 77% center; transform: scale(1.16); }
.poster-copy { position: relative; z-index: 1; max-width: 57%; padding: 6px 7px; text-align: left; text-shadow: 1px 1px 0 #fffaf0; }
.poster-kicker { display: inline-block; padding: 5px 9px; background: var(--ink); color: white; font: 900 11px/1 "PingFang SC", sans-serif; letter-spacing: .08em; }
.lobby-poster h2 { margin: 12px 0 10px; font-size: clamp(38px, 4.6vw, 58px); line-height: .98; letter-spacing: -.06em; text-align: left; text-shadow: none; }
.lobby-poster h2::after { display: none; }.lobby-poster h2 em { display: block; margin-top: 5px; color: var(--pink); font-style: normal; }
.lobby-poster p { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: #514b43; font-size: 14px; font-weight: 800; line-height: 1.65; text-align: left; transform: none; }.lobby-poster p b { color: var(--red); }
.poster-flow { display: flex; align-items: center; gap: 9px; width: fit-content; padding: 7px 0; border-block: 2px solid #17171722; color: var(--ink); font: 1000 13px/1 "PingFang SC", sans-serif; }.poster-flow span { white-space: nowrap; }.poster-flow i { color: var(--pink); font-size: 17px; font-style: normal; }
.poster-avatars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 0; }.poster-avatars::before, .poster-avatars::after { display: none; }
.poster-avatar { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; padding: 7px 5px; border: 2px solid var(--ink); background: #fff; box-shadow: 3px 3px 0 #17171733; }.poster-avatar:nth-child(1) { border-top-color: var(--green); }.poster-avatar:nth-child(2) { border-top-color: var(--blue); }.poster-avatar:nth-child(3) { border-top-color: var(--pink); }
.poster-avatars .avatar { width: 46px; height: 46px; filter: none; }.poster-avatars b { padding: 0; background: transparent; color: var(--ink); font: 900 11px/1 "PingFang SC", sans-serif; transform: none; white-space: nowrap; }
.join-card { border-radius: 10px; box-shadow: 6px 7px 0 var(--pink); transform: none; }.mode-button, .solo-button, .human-button { border-radius: 7px; transform: none; }
@media (max-width: 720px) { .lobby { gap: 18px; padding-top: 16px; }.lobby-poster { min-height: 300px; padding: 0; }.poster-keyart { object-position: 76% center; transform: scale(1.1); }.poster-copy { max-width: 64%; padding: 3px; }.lobby-poster h2 { margin-top: 10px; font-size: clamp(37px, 10.3vw, 45px); }.lobby-poster p { font-size: 13px; } }

/* 首页序章：用电影开场字幕的透视滚动，先讲清楚这张牌桌为什么存在。 */
body.opening-crawl-active { overflow: hidden; }
.opening-crawl { position: fixed; inset: 0; z-index: 120; display: block; overflow: hidden; isolation: isolate; background: var(--paper); color: var(--ink); opacity: 1; transition: opacity .55s ease; }
.opening-crawl.is-exiting { opacity: 0; pointer-events: none; }
.opening-crawl.is-ended .opening-crawl-content { animation-play-state: paused; opacity: 0; }
.opening-crawl.is-ended .opening-skip { display: none; }
.opening-crawl.hidden { display: none; }
.opening-stars { position: absolute; inset: -5%; z-index: 0; background-color: var(--paper); background-image: radial-gradient(circle at 12% 18%, var(--pink) 0 1.5px, transparent 2px), radial-gradient(circle at 76% 24%, var(--blue) 0 1.5px, transparent 2px), radial-gradient(circle at 42% 73%, var(--green) 0 1.2px, transparent 1.8px), radial-gradient(circle at 88% 82%, var(--yellow) 0 1.3px, transparent 1.9px), radial-gradient(circle at 25% 94%, var(--red) 0 1px, transparent 1.7px); background-size: 173px 149px, 241px 211px, 127px 191px, 197px 163px, 113px 137px; opacity: .34; animation: openingStarsDrift 24s ease-in-out infinite alternate; }
.opening-crawl-stage { position: absolute; inset: 0; z-index: 1; overflow: hidden; perspective: 900px; perspective-origin: 50% 100%; }
.opening-crawl-content { position: absolute; top: 0; left: 50%; width: min(1800px, calc(100vw - 48px)); max-width: calc(100vw - 48px); min-width: 0; margin: 0; padding: 0 16px 16vh; overflow: visible; overflow-wrap: anywhere; word-break: break-word; white-space: normal; text-align: center; font-family: "STSong", "Songti SC", "Noto Serif CJK SC", serif; font-size: clamp(40px, 2.8vw, 50px); font-weight: 700; line-height: 1.72; text-shadow: 2px 2px 0 #fff; transform-origin: 50% 100%; transform: translate3d(-50%, 88vh, 0) rotateX(24deg); animation: openingCrawlRoll 28s linear both; }
.opening-crawl-content h2 { display: block; width: 100%; max-width: 100%; margin: 0 0 1.6rem; color: var(--pink); font-family: "Kaiti SC", "STKaiti", serif; font-size: clamp(106px, 11.5vw, 158px); font-weight: 900; line-height: 1.05; letter-spacing: 0; overflow-wrap: anywhere; word-break: break-word; white-space: normal; text-shadow: 3px 3px 0 var(--yellow); }
.opening-crawl-content p { display: block; width: 100%; max-width: 100%; min-width: 0; margin: 0 auto; overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.opening-crawl-content p + p { margin-top: .95rem; }
.opening-crawl-kicker { margin-bottom: 1.2rem !important; color: var(--blue); font-family: "PingFang SC", sans-serif; font-size: clamp(12px, 1.4vw, 17px); font-weight: 900; }
.opening-crawl-rule { width: 112px; margin: 0 auto 2.2rem; border-top: 4px solid var(--green); opacity: .9; }
.opening-crawl-finale { margin-top: 2.4rem !important; color: var(--red); font-size: 1.18em; font-weight: 900; }
.opening-crawl-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, var(--paper) 0, #fffaf066 17%, transparent 70%, var(--paper) 100%), radial-gradient(ellipse at center, transparent 30%, #17171712 100%); }
.opening-crawl-brand { position: absolute; top: max(20px, env(safe-area-inset-top)); left: 50%; z-index: 3; padding: 7px 11px; color: var(--ink); font: 900 10px/1 "PingFang SC", sans-serif; letter-spacing: 0; opacity: .72; transform: translateX(-50%); white-space: nowrap; }
.opening-skip { position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 4; min-height: 38px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 3px; background: #fff; color: var(--ink); box-shadow: 2px 3px 0 var(--pink); font-family: "PingFang SC", sans-serif; font-size: 12px; font-weight: 900; }
.opening-skip:hover, .opening-skip:focus-visible { background: var(--yellow); color: var(--ink); outline: none; }
.opening-crawl.is-ended .opening-crawl-content { animation-play-state: paused; opacity: 0; }
.opening-crawl.is-ended .opening-skip { display: none; }
.opening-crawl-ending { position: absolute; left: 50%; top: 50%; z-index: 5; width: min(760px, calc(100vw - 48px)); padding: 30px 32px 34px; border: 3px solid var(--ink); background: #fffaf0ee; box-shadow: 7px 8px 0 var(--pink); color: var(--ink); text-align: center; transform: translate(-50%, -50%); }
.opening-crawl-ending p { margin: 0 0 22px; font-family: "PingFang SC", sans-serif; font-size: clamp(22px, 2.5vw, 30px); font-weight: 900; }
.opening-crawl-ending-actions { display: flex; justify-content: center; gap: 16px; }
.opening-ending-button { min-width: 180px; min-height: 58px; padding: 12px 20px; border: 3px solid var(--ink); border-radius: 3px; font-family: "PingFang SC", sans-serif; font-size: 18px; font-weight: 900; }
.opening-ending-button.secondary { background: #fff; color: var(--ink); box-shadow: 2px 3px 0 var(--blue); }
.opening-ending-button.primary { background: var(--green); color: var(--ink); box-shadow: 3px 4px 0 var(--ink); }
.opening-entry.join-card { width: min(560px, 100%); margin: 0 auto; padding: 16px; border-width: 2px; box-shadow: 4px 5px 0 var(--pink); text-align: left; }
.opening-entry .mode-button { padding: 12px 10px; }.opening-entry .mode-button strong { font-size: 17px; }
.opening-crawl-ending > .opening-ending-button { display: block; min-width: 0; margin: 14px auto 0; padding: 8px 14px; font-size: 13px; }
.opening-ending-button:hover, .opening-ending-button:focus-visible { background: var(--yellow); color: var(--ink); outline: none; transform: translateY(-1px); }
/* 序章选局只保留一层操作表单，全部使用直角纸片，避免圆角框再套圆角框。 */
.opening-crawl-ending { border: 0; background: transparent; box-shadow: none; }
.opening-entry.join-card, .opening-entry input, .opening-entry .mode-button, .opening-entry .join-row button, .opening-crawl-ending > .opening-ending-button { border-radius: 0; }
.masthead-actions { display: flex; align-items: center; gap: 11px; }
.opening-replay { padding: 7px 10px; border: 2px solid var(--ink); border-radius: 3px; background: #fff; box-shadow: 2px 3px 0 var(--ink); font-size: 13px; font-weight: 1000; transform: rotate(2deg); }
.opening-replay:hover, .opening-replay:focus-visible { background: var(--yellow); outline: none; transform: translateY(-1px) rotate(0); }
@keyframes openingCrawlRoll { 0% { opacity: 1; transform: translate3d(-50%, 88vh, 0) rotateX(24deg); } 100% { opacity: .92; transform: translate3d(-50%, calc(-100% - 12vh), 0) rotateX(24deg); } }
@keyframes openingStarsDrift { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (max-width: 720px) {
  .opening-crawl-stage { perspective: 680px; }
  .opening-crawl-content { width: calc(100vw - 28px); max-width: calc(100vw - 28px); padding-inline: 7px; font-size: 33px; line-height: 1.72; transform: translate3d(-50%, 86vh, 0) rotateX(22deg); }
  .opening-crawl-content h2 { font-size: clamp(86px, 26vw, 126px); }
  .opening-crawl-content p + p { margin-top: .8rem; }
  .opening-crawl-rule { margin-bottom: 1.8rem; }
  .opening-crawl-brand { max-width: 84vw; overflow: hidden; text-overflow: ellipsis; }
  .opening-crawl-ending { top: 50%; width: calc(100vw - 28px); padding: 24px 16px 26px; }
  .opening-crawl-ending p { margin-bottom: 18px; font-size: 20px; }
  .opening-entry.join-card { padding: 14px 12px; }
  .opening-crawl-ending-actions { gap: 10px; }
  .opening-ending-button { min-width: 0; min-height: 52px; padding-inline: 10px; font-size: 16px; }
  .opening-ending-button { flex: 1; }
  .masthead-actions { gap: 4px; }
  .opening-replay { padding-inline: 8px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .opening-stars { animation: none; }
  .opening-crawl-content { animation-duration: 28s !important; animation-timing-function: linear !important; animation-iteration-count: 1 !important; }
}

/* 中间战报区优先保证完整卡面；牌多时在内部滚动，不再压缩或裁切最后一行。 */
@media (min-width: 721px) {
  #game-view .table-center { min-height: 338px; }
  #game-view .pending-card { box-sizing: border-box; min-height: 308px; max-height: none; padding: 22px 0 16px; overflow: visible; }
  #game-view .turn-table-stack { max-height: min(62vh, 560px); padding: 20px 8px 16px; scroll-padding-block: 20px; }
}
@media (max-width: 720px) {
  #game-view .table-center { top: 92px; }
  #game-view .pending-card { box-sizing: border-box; min-height: 220px; max-height: none; padding: 20px 0 14px; overflow: visible; }
  #game-view .turn-table-stack { max-height: calc(100dvh - clamp(208px, 31dvh, 238px) - 108px); padding: 20px 7px 14px; scroll-padding-block: 20px; }
}

/* 负面触发沿用整局结束的全宽撕纸横条，只是没有结果头像和按钮。 */
.negative-effect-alert {
  --negative-effect-accent: #e47b31;
  position: fixed;
  inset: 50% 0 auto;
  isolation: isolate;
  box-sizing: border-box;
  z-index: 42;
  display: none;
  place-items: center;
  width: 100vw;
  min-height: clamp(112px, 15vh, 148px);
  padding: 14px clamp(18px, 6vw, 80px);
  overflow: visible;
  border: 0;
  background: transparent;
  color: #fffdf7;
  pointer-events: none;
  text-align: center;
  transform: translateY(-50%);
}
.negative-effect-alert.hidden { display: none; }
.negative-effect-alert::before,
.negative-effect-alert::after,
.negative-effect-rip {
  content: "";
  position: absolute;
  pointer-events: none;
  clip-path: polygon(0 5%, 24% 3%, 51% 5%, 78% 3%, 100% 5%, 100% 95%, 80% 97%, 54% 95%, 27% 97%, 0 95%);
}
.negative-effect-alert::before { z-index: 0; inset: -5px -.5%; background: #fffdf7; }
.negative-effect-alert::after { z-index: 2; inset: 0; background: linear-gradient(100deg, #0d0d0d 0 18%, #202020 36%, #090909 62%, #181818 100%); }
.negative-effect-rip { z-index: 1; inset: -12px -2%; background: var(--negative-effect-accent); transform: translateY(7px) skewX(-3deg); }
.negative-effect-rip i { position: absolute; width: 22%; height: 3px; background: #fffdf7; opacity: .75; transform: rotate(-3deg); }
.negative-effect-rip i:first-child { left: 7%; top: 24%; }
.negative-effect-rip i:last-child { right: 6%; bottom: 20%; transform: rotate(3deg); }
.negative-effect-message { position: relative; z-index: 3; display: grid; justify-items: center; gap: 4px; }
.negative-effect-alert span { color: #ffd95a; font: 1000 10px/1 "PingFang SC", sans-serif; letter-spacing: .22em; }
.negative-effect-alert strong { font: 1000 clamp(30px, 4vw, 52px)/1 "Kaiti SC", "STKaiti", serif; text-shadow: 3px 3px 0 #000; }
.negative-effect-alert small { color: #fffdf7; font: 900 13px/1.3 "PingFang SC", sans-serif; }
.negative-effect-alert.is-active { display: grid; animation: negativeEffectAlert 2.2s cubic-bezier(.2,.82,.25,1) both; }
@keyframes negativeEffectAlert {
  0% { opacity: 0; transform: translateY(-50%) translateX(-3vw); }
  14%, 72% { opacity: 1; transform: translateY(-50%) translateX(0); }
  100% { opacity: 0; transform: translateY(-50%) translateX(2vw); }
}
@media (max-width: 720px) {
  .negative-effect-alert { min-height: 102px; padding: 12px 18px; }
  .negative-effect-alert strong { font-size: 27px; }
  .negative-effect-alert small { font-size: 11px; }
}

/* 破防的主角就是当事人的头像：放大同一只动物的破防脸，再从它身上打出漫画冲击波。 */
.meltdown-layer { --meltdown-x: 50vw; --meltdown-y: 50vh; background: transparent; opacity: 1; }
.meltdown-layer.is-active { animation: none; }
.meltdown-layer::before { position: fixed; left: var(--meltdown-x); top: var(--meltdown-y); inset: auto; z-index: 1; width: 150vmax; height: 150vmax; border: clamp(8px, 1.5vw, 18px) solid #ff9a27; border-radius: 50%; background: transparent; box-shadow: 0 0 0 clamp(12px, 2vw, 26px) #ef331d66, inset 0 0 0 clamp(5px, 1vw, 12px) #ffe685; filter: none; opacity: 0; transform: translate(-50%, -50%) scale(.02); animation: none; }
.meltdown-layer::after { position: fixed; inset: 0; z-index: 0; background: radial-gradient(circle at var(--meltdown-x) var(--meltdown-y), transparent 0 9vmax, #ffb33b20 30vmax, #ef39151f 80vmax, #7b170d20 130vmax); clip-path: none; filter: none; opacity: 0; animation: none; }
.meltdown-layer.is-active::before { animation: avatarShockwave 1.9s cubic-bezier(.18,.74,.25,1) both; }
.meltdown-layer.is-active::after { animation: avatarHeatWash 1.9s ease-out both; }
.meltdown-portrait { position: fixed; left: var(--meltdown-x); top: var(--meltdown-y); z-index: 5; width: clamp(104px, 16vw, 158px); height: clamp(104px, 16vw, 158px); opacity: 0; transform: translate(-50%, -50%) scale(.3); pointer-events: none; }
.meltdown-portrait::before { content: ""; position: absolute; z-index: -1; inset: -16%; background: #ffe785; clip-path: polygon(50% 0, 58% 23%, 73% 6%, 74% 29%, 96% 19%, 80% 40%, 100% 50%, 79% 58%, 94% 80%, 71% 71%, 68% 97%, 52% 77%, 38% 100%, 34% 76%, 12% 90%, 24% 66%, 0 70%, 18% 51%, 0 35%, 26% 39%, 14% 13%, 38% 27%); filter: drop-shadow(0 0 12px #ff4b1d); transform: rotate(-8deg); }
.meltdown-avatar { position: absolute; inset: 7%; width: 86%; height: 86%; background-size: 200% 200%; filter: drop-shadow(0 5px 0 #8d2115) drop-shadow(0 0 13px #ff4c1b) saturate(1.4) !important; }
.meltdown-layer.is-active .meltdown-portrait { animation: avatarSpotlight 1.9s cubic-bezier(.18,.8,.22,1) both; }
.meltdown-source-fire { position: fixed; left: var(--meltdown-x); top: var(--meltdown-y); z-index: 6; width: 28px; height: 38px; opacity: 0; transform: translate(-50%, -118%) scale(.2); transform-origin: 50% 100%; }
.meltdown-source-fire::before, .meltdown-source-fire::after, .meltdown-source-fire i { position: absolute; bottom: 0; display: block; width: 24px; height: 42px; border-radius: 65% 35% 52% 48% / 72% 61% 39% 28%; background: radial-gradient(ellipse at 48% 80%, #fff9bd 0 16%, #ffcf2e 18% 34%, #ff6819 49% 66%, #d71e12 79%, transparent 81%); content: ""; filter: drop-shadow(0 0 9px #ff4c1a); transform-origin: 50% 100%; }.meltdown-source-fire::before { left: -15px; height: 30px; transform: rotate(-19deg); }.meltdown-source-fire::after { right: -15px; height: 35px; transform: rotate(22deg); }.meltdown-source-fire i:nth-child(1) { left: 0; height: 49px; }.meltdown-source-fire i:nth-child(2) { left: 10px; height: 29px; transform: rotate(22deg); }.meltdown-source-fire i:nth-child(3) { left: -8px; height: 26px; transform: rotate(-18deg); }
.meltdown-layer.is-active .meltdown-source-fire { animation: avatarIgnition 1.9s cubic-bezier(.2,.8,.3,1) both; }
.meltdown-heat { position: fixed; left: var(--meltdown-x); top: var(--meltdown-y); inset: auto; z-index: 2; width: 116vmax; height: 116vmax; border: 4px solid #ffd260; border-radius: 50%; background: transparent; box-shadow: 0 0 0 7px #ef4a252e; filter: none; opacity: 0; transform: translate(-50%, -50%) scale(.02); }.meltdown-layer.is-active .haze-one { animation: heatRing 1.9s ease-out both; }.meltdown-layer.is-active .haze-two { animation: heatRing 1.9s .09s ease-out both; }
.meltdown-copy { position: fixed; left: var(--meltdown-x); top: var(--meltdown-y); z-index: 7; display: grid; justify-items: center; width: max-content; max-width: min(72vw, 310px); color: white; text-align: center; text-shadow: 3px 3px 0 #7a120d, 0 0 14px #ff4b17; opacity: 0; transform: translate(-50%, 72px) rotate(-3deg) scale(.7); }.meltdown-copy span { padding: 3px 8px; border: 2px solid #fff3b5; background: #e72416; box-shadow: 3px 3px 0 #4b0c09; font: 1000 11px/1 "PingFang SC", sans-serif; letter-spacing: .12em; }.meltdown-copy b { margin-top: 6px; font: 1000 clamp(20px, 4vw, 32px)/1.05 "Kaiti SC", "STKaiti", sans-serif; }.meltdown-copy small { margin-top: 3px; font: 800 11px/1.2 "PingFang SC", sans-serif; }.meltdown-layer.is-active .meltdown-copy { animation: meltdownCopy 1.9s both; }
.player-seat.is-meltdown-source { z-index: 20; }.player-seat.is-meltdown-source .avatar { animation: avatarMeltdownSource 1.9s cubic-bezier(.2,.74,.25,1) both !important; filter: drop-shadow(0 0 5px #fff6a2) drop-shadow(0 0 18px #ff4b1a) saturate(1.4) !important; }
@keyframes avatarShockwave { 0%, 13% { opacity: 0; transform: translate(-50%, -50%) scale(.02); } 21% { opacity: .85; transform: translate(-50%, -50%) scale(.12); } 60% { opacity: .34; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.03); } }
@keyframes avatarHeatWash { 0%, 17% { opacity: 0; } 36%, 58% { opacity: 1; } 100% { opacity: 0; } }
@keyframes avatarSpotlight { 0%, 7% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0); } 17% { opacity: 1; transform: translate(-50%, -50%) scale(1.22) rotate(-8deg); } 27%, 45% { opacity: 1; transform: translate(-50%, -50%) scale(1.06) rotate(5deg); } 67% { opacity: .92; transform: translate(-50%, -50%) scale(.98) rotate(-2deg); } 84% { opacity: 0; transform: translate(-50%, -50%) scale(.55) rotate(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } }
@keyframes avatarIgnition { 0%, 6% { opacity: 0; transform: translate(-50%, -118%) scale(.2); } 17% { opacity: 1; transform: translate(-50%, -118%) scale(1.45); } 45% { opacity: .95; transform: translate(-50%, -118%) scale(2.15); } 69% { opacity: 0; transform: translate(-50%, -118%) scale(2.7); } 100% { opacity: 0; transform: translate(-50%, -118%) scale(.2); } }
@keyframes heatRing { 0%, 15% { opacity: 0; transform: translate(-50%, -50%) scale(.02); } 26% { opacity: .75; } 62% { opacity: .12; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.02); } }
@keyframes meltdownCopy { 0%, 18% { opacity: 0; transform: translate(-50%, 72px) rotate(-3deg) scale(.7); } 31%, 66% { opacity: 1; transform: translate(-50%, 72px) rotate(-3deg) scale(1); } 87%, 100% { opacity: 0; transform: translate(-50%, 60px) rotate(-3deg) scale(.82); } }
@keyframes avatarMeltdownSource { 0% { transform: scale(1); } 10% { transform: scale(1.13) rotate(-6deg); } 18%, 29% { transform: scale(1.2) rotate(6deg); } 43% { transform: scale(1.06); opacity: 1; } 67% { transform: scale(1); opacity: .78; } 85% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }

/* 角色是牌桌上的第一识别点：头像放大一档；三团火固定占位，避免被资料区压没。 */
.heat-dots { min-width: 65px; height: 27px; }
.heat-dots .heat-flame {
  width: 21px;
  height: 27px;
  flex: 0 0 21px;
  background: url("assets/generated/heat-fire-icon-v3.webp?v=1") center / contain no-repeat;
  overflow: visible;
}
.heat-dots .heat-flame::before {
  content: none;
}

@media (min-width: 721px) {
  .player-seat.table-opponent-left,
  .player-seat.table-opponent-right,
  .player-seat.table-self { grid-template-columns: 68px minmax(0, 1fr); }
  .player-seat.table-opponent-left .avatar,
  .player-seat.table-opponent-right .avatar,
  .player-seat.table-self .avatar { width: 68px; height: 68px; }
  .player-seat.table-opponent-left,
  .player-seat.table-opponent-right { min-height: 84px; }
  .self-seat { width: 210px; }
  .player-seat.table-self { min-height: 90px; }
  .hand { left: 220px; width: calc(100% - 220px); }
}

@media (max-width: 720px) {
  .player-seat.table-opponent-left .avatar,
  .player-seat.table-opponent-right .avatar { width: 64px; height: 64px; }
  .player-seat.table-self { grid-template-columns: 54px minmax(0, 1fr); min-height: 64px; }
  .player-seat.table-self .avatar { width: 54px; height: 54px; }
  .heat-dots { min-width: 56px; height: 23px; }
  .heat-dots .heat-flame { width: 18px; height: 23px; flex-basis: 18px; }
  .heat-dots .heat-flame::before { font-size: 20px; line-height: 23px; }
}

/* 斗地主炸弹式破防：头像点燃炸弹，白闪后蘑菇云与双冲击波从当事人位置爆开。 */
.meltdown-layer { background: transparent; }
.meltdown-layer::before { display: none; }
.meltdown-layer::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  background:
    radial-gradient(circle at var(--meltdown-x) var(--meltdown-y), #fff5b866 0 5vmax, #ff6c234d 16vmax, transparent 36vmax),
    radial-gradient(circle at 50% 50%, #5f1008c7 0, #100101f2 82%);
  opacity: 0;
}
.meltdown-layer.is-active::after { animation: bombBackdrop 2.4s ease-out both; }
.meltdown-white-flash {
  position: fixed;
  inset: 0;
  z-index: 9;
  background: #fffce7;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
.meltdown-layer.is-active .meltdown-white-flash { animation: atomicWhiteFlash 2.4s linear both; }
.meltdown-trigger-bomb {
  position: fixed;
  left: var(--meltdown-x);
  top: var(--meltdown-y);
  z-index: 8;
  width: clamp(54px, 7vw, 82px);
  aspect-ratio: 1;
  border: 4px solid #140b12;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 27%, #6d6876 0 7%, #28232e 20%, #08070b 72%);
  box-shadow: 0 7px 0 #10070a, 0 0 0 5px #ffe47a, 0 0 28px #ff4a18;
  opacity: 0;
  transform: translate(-50%, -62%) scale(.25) rotate(-14deg);
  transform-origin: 50% 60%;
}
.meltdown-trigger-bomb::before {
  content: "";
  position: absolute;
  left: 62%;
  top: -25%;
  width: 38%;
  height: 42%;
  border: 6px solid #2b1b16;
  border-bottom: 0;
  border-left-color: transparent;
  border-radius: 50% 50% 0 0;
  transform: rotate(17deg);
}
.meltdown-trigger-bomb i,
.meltdown-trigger-bomb i::before,
.meltdown-trigger-bomb i::after {
  position: absolute;
  left: 94%;
  top: -38%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff8ab;
  box-shadow: 0 0 8px 4px #ffca31, 0 0 18px 8px #ff3c13;
  content: "";
}
.meltdown-trigger-bomb i::before { left: -18px; top: -10px; transform: scale(.48); }
.meltdown-trigger-bomb i::after { left: 14px; top: 7px; transform: scale(.38); }
.meltdown-layer.is-active .meltdown-trigger-bomb { animation: atomicBombFuse 2.4s cubic-bezier(.18,.82,.22,1) both; }
.meltdown-shockwave {
  position: fixed;
  left: var(--meltdown-x);
  top: var(--meltdown-y);
  z-index: 4;
  width: 18vmax;
  height: 7vmax;
  border: clamp(5px, .75vw, 10px) solid #fff4a9;
  border-radius: 50%;
  box-shadow: 0 0 0 clamp(5px, .8vw, 11px) #ff8b27, 0 0 42px 18px #ff431dbd, inset 0 0 26px #fff4ac;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.03);
  will-change: transform, opacity;
}
.meltdown-layer.is-active .wave-one { animation: atomicShockwave 2.4s .02s cubic-bezier(.12,.72,.18,1) both; }
.meltdown-layer.is-active .wave-two { animation: atomicShockwaveTwo 2.4s .13s cubic-bezier(.12,.72,.18,1) both; }
.meltdown-bomb-burst {
  position: fixed;
  left: var(--meltdown-x);
  top: var(--meltdown-y);
  z-index: 3;
  width: min(94vmin, 760px);
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%, -72%) scale(.12);
  transform-origin: 50% 72%;
  filter: saturate(1.08) drop-shadow(0 0 34px #ff5b1c);
  will-change: transform, opacity;
}
.meltdown-bomb-burst::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/generated/meltdown-burst-strip-v1.webp?v=2") 0 0 / 1200% 100% no-repeat;
  will-change: background-position;
}
.meltdown-particles {
  position: fixed;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: normal;
  filter: none;
}
.meltdown-layer.is-active .meltdown-bomb-burst { animation: atomicSpriteMotion 2.4s cubic-bezier(.15,.78,.18,1) both; }
.meltdown-layer.is-active .meltdown-bomb-burst::before { animation: atomicSpriteFrames 980ms .42s steps(11, end) both; }
.meltdown-portrait { z-index: 5; }
.meltdown-layer.is-active .meltdown-portrait { animation: bombAvatar 2.4s cubic-bezier(.16,.82,.2,1) both; }
.meltdown-source-fire { z-index: 6; }
.meltdown-layer.is-active .meltdown-source-fire { animation: bombFuse 2.4s ease-out both; }
.meltdown-heat { display: none; }
.meltdown-copy {
  left: 50vw;
  top: 50vh;
  z-index: 7;
  max-width: min(86vw, 620px);
  transform: translate(-50%, 88px) rotate(-3deg) scale(.7);
}
.meltdown-copy span { background: #e82818; box-shadow: 4px 4px 0 #4b0c09; }
.meltdown-copy b { margin-top: 8px; font-size: clamp(30px, 6.2vw, 68px); white-space: nowrap; }
.meltdown-copy small { margin-top: 8px; font-size: clamp(12px, 2.1vw, 18px); }
.meltdown-layer.is-active .meltdown-copy { animation: bombCopy 2.4s cubic-bezier(.16,.82,.2,1) both; }
body.meltdown .app-shell { animation: bombTableImpact 1040ms .46s cubic-bezier(.2,.8,.25,1) both; }

@keyframes bombBackdrop {
  0%, 8% { opacity: 0; }
  18%, 78% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes atomicWhiteFlash {
  0%, 16% { opacity: 0; }
  18% { opacity: .96; }
  21% { opacity: .18; }
  25% { opacity: .55; }
  31%, 100% { opacity: 0; }
}
@keyframes atomicBombFuse {
  0%, 3% { opacity: 0; transform: translate(-50%, -62%) scale(.2) rotate(-14deg); }
  7% { opacity: 1; transform: translate(-50%, -72%) scale(1.22) rotate(7deg); }
  11%, 15% { opacity: 1; transform: translate(-50%, -68%) scale(1) rotate(-4deg); }
  18% { opacity: 0; transform: translate(-50%, -68%) scale(2.8) rotate(12deg); filter: brightness(2.4); }
  100% { opacity: 0; }
}
@keyframes atomicShockwave {
  0%, 17% { opacity: 0; transform: translate(-50%, -50%) scale(.03); }
  19% { opacity: 1; }
  42% { opacity: .85; transform: translate(-50%, -50%) scale(6.8); }
  61%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(10.5); }
}
@keyframes atomicShockwaveTwo {
  0%, 19% { opacity: 0; transform: translate(-50%, -50%) scale(.03); }
  22% { opacity: .9; }
  48% { opacity: .7; transform: translate(-50%, -50%) scale(5.2); }
  67%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(9); }
}
@keyframes atomicSpriteFrames {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}
@keyframes atomicSpriteMotion {
  0%, 16% { opacity: 0; transform: translate(-50%, -72%) scale(.12) rotate(-3deg); }
  18% { opacity: 1; transform: translate(-50%, -72%) scale(.24) rotate(-2deg); }
  34% { opacity: 1; transform: translate(-50%, -72%) scale(.9) rotate(0); }
  58%, 70% { opacity: 1; transform: translate(-50%, -75%) scale(1.03) rotate(.5deg); }
  84% { opacity: .72; transform: translate(-50%, -80%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -86%) scale(1.13); }
}
@keyframes bombFuse {
  0%, 5% { opacity: 0; transform: translate(-50%, -118%) scale(.2); }
  10%, 17% { opacity: 1; transform: translate(-50%, -118%) scale(1.65); }
  24% { opacity: 0; transform: translate(-50%, -118%) scale(3.2); }
  100% { opacity: 0; }
}
@keyframes bombAvatar {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
  8%, 17% { opacity: 1; transform: translate(-50%, -50%) scale(1.26) rotate(-7deg); }
  24% { opacity: 1; transform: translate(-50%, -50%) scale(.94) rotate(5deg); }
  31%, 69% { opacity: .2; transform: translate(-50%, -50%) scale(.78); }
  82% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(-3deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes bombCopy {
  0%, 28% { opacity: 0; transform: translate(-50%, 104px) rotate(-5deg) scale(.45); }
  36% { opacity: 1; transform: translate(-50%, 88px) rotate(3deg) scale(1.18); }
  44%, 73% { opacity: 1; transform: translate(-50%, 88px) rotate(-2deg) scale(1); }
  88%, 100% { opacity: 0; transform: translate(-50%, 70px) rotate(-2deg) scale(.78); }
}
@keyframes bombTableImpact {
  0%, 100% { transform: translate(0, 0); filter: none; }
  10% { transform: translate(-14px, 7px) rotate(-.55deg); filter: saturate(1.45) brightness(1.12); }
  23% { transform: translate(12px, -9px) rotate(.48deg); }
  37% { transform: translate(-9px, 6px) rotate(-.3deg); }
  51% { transform: translate(7px, -4px); }
  66% { transform: translate(-4px, 3px); }
  82% { transform: translate(2px, -1px); }
}

@media (max-width: 720px) {
  .meltdown-bomb-burst { width: min(110vmin, 640px); }
  .meltdown-copy { transform: translate(-50%, 76px) rotate(-3deg) scale(.7); }
  .meltdown-copy b { max-width: 92vw; overflow: hidden; font-size: clamp(27px, 8.4vw, 46px); text-overflow: ellipsis; }
  @keyframes bombCopy {
    0%, 28% { opacity: 0; transform: translate(-50%, 92px) rotate(-5deg) scale(.45); }
    36% { opacity: 1; transform: translate(-50%, 76px) rotate(3deg) scale(1.12); }
    44%, 73% { opacity: 1; transform: translate(-50%, 76px) rotate(-2deg) scale(1); }
    88%, 100% { opacity: 0; transform: translate(-50%, 64px) rotate(-2deg) scale(.78); }
  }
}

/* 程序爆炸 v2：序列帧退出舞台，火球、烟云和余烬全部由 Canvas 实时组成。 */
.meltdown-bomb-burst { display: none !important; }
.meltdown-distortion {
  position: fixed;
  left: var(--meltdown-x);
  top: var(--meltdown-y);
  z-index: 5;
  width: 20vmax;
  height: 8vmax;
  border: 3px solid #ffe694b8;
  border-radius: 50%;
  box-shadow: 0 0 22px #ff7b24aa, inset 0 0 18px #fff0a870;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.05);
  backdrop-filter: blur(3px) saturate(1.55) contrast(1.08);
  will-change: transform, opacity;
}
.meltdown-distortion i {
  position: absolute;
  inset: 12%;
  border: 2px solid #ff8b3975;
  border-radius: inherit;
}
.meltdown-distortion i:nth-child(2) { inset: 28%; border-color: #fff5b694; }
.meltdown-layer.is-active .meltdown-distortion { animation: proceduralHeatDistortion 2.8s .44s cubic-bezier(.12,.72,.18,1) both; }
.meltdown-layer.is-active::after { animation-duration: 2.8s; }
.meltdown-layer.is-active .meltdown-white-flash { animation-duration: 2.8s; }
.meltdown-layer.is-active .meltdown-trigger-bomb { animation-duration: 2.8s; }
.meltdown-layer.is-active .wave-one,
.meltdown-layer.is-active .wave-two,
.meltdown-layer.is-active .meltdown-portrait,
.meltdown-layer.is-active .meltdown-source-fire,
.meltdown-layer.is-active .meltdown-copy { animation-duration: 2.8s; }
.meltdown-portrait { z-index: 7; }
.meltdown-source-fire, .meltdown-copy { z-index: 8; }
body.meltdown .app-shell { animation-duration: 1.2s; animation-delay: .5s; }

@keyframes proceduralHeatDistortion {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.04); filter: blur(0); }
  8% { opacity: .95; }
  42% { opacity: .48; transform: translate(-50%, -50%) scale(5.8); filter: blur(1px); }
  72% { opacity: .16; transform: translate(-50%, -50%) scale(9); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(11); filter: blur(4px); }
}

/* 程序爆炸 v3：冲击光染到牌桌边缘，爆点留下焦痕，主体退场后仍有一拍余味。 */
.meltdown-edge-light {
  position: fixed;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--meltdown-x) var(--meltdown-y), #ffd86a38 0 16vmax, transparent 52vmax);
  box-shadow: inset 0 0 0 1px #ffad3822, inset 0 0 11vmax 2vmax #e52d1c;
  mix-blend-mode: screen;
}
.meltdown-layer.is-active .meltdown-edge-light { animation: meltdownEdgeLight 4s ease-out both; }
.meltdown-scorch {
  position: fixed;
  left: var(--meltdown-x);
  top: var(--meltdown-y);
  z-index: 1;
  width: clamp(150px, 28vmax, 430px);
  aspect-ratio: 1.7;
  border-radius: 46% 54% 43% 57% / 58% 45% 55% 42%;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 48% 52%, #100808c7 0 15%, #281410a8 27%, #6d2b173d 47%, transparent 68%),
    repeating-radial-gradient(ellipse, #21100db8 0 3px, transparent 5px 13px);
  filter: blur(.7px);
  mix-blend-mode: multiply;
  transform: translate(-50%, -50%) scale(.25) rotate(-4deg);
}
.meltdown-layer.is-active .meltdown-scorch { animation: meltdownScorch 4s cubic-bezier(.18,.78,.22,1) both; }
@keyframes meltdownEdgeLight {
  0%, 12% { opacity: 0; }
  14% { opacity: 1; }
  23% { opacity: .72; }
  54% { opacity: .24; }
  100% { opacity: 0; }
}
@keyframes meltdownScorch {
  0%, 17% { opacity: 0; transform: translate(-50%, -50%) scale(.25) rotate(-4deg); }
  25% { opacity: .74; transform: translate(-50%, -50%) scale(1.08) rotate(-4deg); }
  66% { opacity: .48; transform: translate(-50%, -50%) scale(1) rotate(-4deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.96) rotate(-4deg); }
}

@media (max-width: 720px) {
  .meltdown-edge-light { box-shadow: inset 0 0 16vmax 3vmax #e52d1c; }
  .meltdown-scorch { width: min(70vw, 330px); }
}

@media (prefers-reduced-motion: reduce) {
  .meltdown-edge-light, .meltdown-scorch, .meltdown-distortion { display: none; }
}

/* 破防演出 V4：先说清“哪张牌打破了谁”，再让人物框自身炸开。 */
.meltdown-layer {
  --meltdown-duration: 3.4s;
  opacity: 1;
  background: transparent;
}
.meltdown-layer::before { display: none !important; }
.meltdown-layer::after {
  display: block !important;
  z-index: 0;
  background:
    radial-gradient(circle at var(--meltdown-x) var(--meltdown-y), #fff4bd99 0 3vmax, #ff641f57 14vmax, transparent 40vmax),
    radial-gradient(circle at var(--meltdown-x) var(--meltdown-y), #40120ac9 0, #100607ed 75%);
  opacity: 0;
  clip-path: circle(0 at var(--meltdown-x) var(--meltdown-y));
}
.meltdown-layer.is-active::after { animation: v4Backdrop var(--meltdown-duration) cubic-bezier(.2,.72,.2,1) both; }
.meltdown-trigger-bomb, .meltdown-source-fire, .meltdown-distortion, .meltdown-scorch { display: none !important; }

.meltdown-portrait {
  z-index: 11;
  width: clamp(116px, 17vw, 176px);
  height: clamp(116px, 17vw, 176px);
  border: 7px solid #fff2a1;
  border-radius: 22% 26% 20% 25%;
  background: #ff7047;
  box-shadow: 0 0 0 6px #3a1720, 0 10px 0 #3a1720, 0 0 36px #ff5c20;
  overflow: visible;
  opacity: 0;
}
.meltdown-portrait::before { display: none; }
.meltdown-avatar {
  inset: 6%;
  width: 88%;
  height: 88%;
  border-radius: 18%;
  filter: saturate(1.45) contrast(1.08) drop-shadow(0 5px 0 #6e1c28) !important;
}
.meltdown-panic-face { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.meltdown-panic-face::before {
  content: "";
  position: absolute;
  left: 28%; top: 34%;
  width: 16%; height: 22%;
  border: 4px solid #241725;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 55%, #241725 0 13%, white 15% 100%);
  box-shadow: calc(clamp(116px, 17vw, 176px) * .28) 0 0 -1px white, calc(clamp(116px, 17vw, 176px) * .28) 0 0 3px #241725;
}
.meltdown-panic-face::after {
  content: "";
  position: absolute;
  left: 42%; top: 62%;
  width: 18%; height: 17%;
  border: 4px solid #241725;
  border-radius: 50% 50% 46% 46%;
  background: #51172a;
  box-shadow: inset 0 -7px 0 #ff8e8e;
}
.meltdown-layer.is-active .meltdown-portrait { animation: v4Portrait var(--meltdown-duration) cubic-bezier(.16,.82,.2,1) both; }

.meltdown-cracks { position: absolute; z-index: 5; inset: -8px; opacity: 0; }
.meltdown-cracks i { position: absolute; left: 50%; top: 50%; width: 45%; height: 4px; background: #fff7d5; box-shadow: 0 0 0 2px #2b1520, 0 0 8px #fff; transform-origin: 0 50%; clip-path: polygon(0 20%, 35% 0, 47% 55%, 72% 15%, 100% 45%, 100% 100%, 70% 70%, 49% 100%, 34% 44%, 0 80%); }
.meltdown-cracks i:nth-child(1) { transform: rotate(8deg); }
.meltdown-cracks i:nth-child(2) { transform: rotate(67deg); width: 39%; }
.meltdown-cracks i:nth-child(3) { transform: rotate(129deg); width: 47%; }
.meltdown-cracks i:nth-child(4) { transform: rotate(187deg); width: 42%; }
.meltdown-cracks i:nth-child(5) { transform: rotate(244deg); width: 48%; }
.meltdown-cracks i:nth-child(6) { transform: rotate(308deg); width: 36%; }
.meltdown-layer.is-active .meltdown-cracks { animation: v4Cracks var(--meltdown-duration) steps(2, end) both; }

.meltdown-debris { position: fixed; left: var(--meltdown-x); top: var(--meltdown-y); z-index: 10; width: 1px; height: 1px; }
.meltdown-debris i {
  position: absolute;
  left: 0; top: 0;
  width: 22px; height: 14px;
  border: 3px solid #291722;
  background: #ffb34d;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--debris-angle)) scale(.2);
}
.meltdown-layer[data-animal="cat"] .meltdown-debris i { width: 25px; height: 11px; border: 0; border-radius: 50% 0 50% 0; background: #ffd18c; box-shadow: 0 0 0 2px #743c2f; }
.meltdown-layer[data-animal="capybara"] .meltdown-debris i[data-kind="杯"] { border-radius: 4px 4px 10px 10px; background: #b8edff; box-shadow: inset 0 -5px 0 #59b8dd; }
.meltdown-layer[data-animal="capybara"] .meltdown-debris i[data-kind="茶"] { width: 15px; height: 15px; border-radius: 50%; border-color: #5d291d; background: #9b4f2c; }
.meltdown-layer[data-animal="owl"] .meltdown-debris i[data-kind="羽"] { width: 13px; height: 29px; border-radius: 80% 10% 80% 10%; background: #c5a56f; }
.meltdown-layer[data-animal="owl"] .meltdown-debris i[data-kind="镜"] { width: 24px; height: 24px; border-radius: 50%; background: #bff2ff99; box-shadow: inset 0 0 0 3px white; }
.meltdown-layer.is-active .meltdown-debris i { animation: v4Debris var(--meltdown-duration) var(--debris-delay) cubic-bezier(.12,.7,.24,1) both; }

.meltdown-smoke { position: fixed; left: var(--meltdown-x); top: var(--meltdown-y); z-index: 9; width: 1px; height: 1px; }
.meltdown-smoke i { position: absolute; width: 66px; height: 66px; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #78605b 0 18%, #382b2e 48%, transparent 72%); opacity: 0; filter: blur(3px); }
.meltdown-smoke i:nth-child(1) { left: -50px; }
.meltdown-smoke i:nth-child(2) { left: 4px; top: -14px; animation-delay: 110ms !important; }
.meltdown-smoke i:nth-child(3) { left: -17px; top: -38px; animation-delay: 210ms !important; }
.meltdown-layer.is-active .meltdown-smoke i { animation: v4Smoke var(--meltdown-duration) ease-out both; }

.meltdown-white-flash, .meltdown-shockwave, .meltdown-edge-light, .meltdown-copy { animation-duration: var(--meltdown-duration) !important; }
.meltdown-layer.is-active .meltdown-white-flash { animation-name: v4WhiteFlash; }
.meltdown-layer.is-active .wave-one { animation: v4Shockwave var(--meltdown-duration) cubic-bezier(.12,.72,.18,1) both; }
.meltdown-layer.is-active .wave-two { animation: v4ShockwaveTwo var(--meltdown-duration) cubic-bezier(.12,.72,.18,1) both; }
.meltdown-layer.is-active .meltdown-edge-light { animation: v4EdgeLight var(--meltdown-duration) ease-out both; }
.meltdown-copy { left: var(--meltdown-x); top: var(--meltdown-y); z-index: 14; transform: translate(-50%, clamp(92px, 15vw, 142px)) rotate(-2deg) scale(.6); }
.meltdown-copy span { display: none; }
.meltdown-copy b { font-size: clamp(28px, 5vw, 58px); }
.meltdown-copy small { padding: 4px 10px; border-radius: 999px; background: #2b1824cc; }
.meltdown-layer.is-active .meltdown-copy { animation: v4Copy var(--meltdown-duration) cubic-bezier(.16,.82,.2,1) both; }
body.meltdown .app-shell { animation: v4TableImpact 720ms .55s cubic-bezier(.2,.8,.25,1) both; }

@keyframes v4Backdrop {
  0%, 12% { opacity: 0; clip-path: circle(0 at var(--meltdown-x) var(--meltdown-y)); }
  20%, 70% { opacity: 1; clip-path: circle(145vmax at var(--meltdown-x) var(--meltdown-y)); }
  88% { opacity: .42; clip-path: circle(42vmax at var(--meltdown-x) var(--meltdown-y)); }
  100% { opacity: 0; clip-path: circle(0 at var(--meltdown-x) var(--meltdown-y)); }
}
@keyframes v4Portrait {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.55) rotate(-4deg); }
  5% { opacity: 1; }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.14) rotate(4deg); }
  17% { opacity: 1; transform: translate(-50%, -50%) scale(1.3) rotate(-5deg); filter: brightness(1.15); }
  19% { opacity: 1; transform: translate(-50%, -50%) scale(1.3) rotate(-5deg); filter: brightness(4); }
  22% { opacity: .18; transform: translate(-50%, -50%) scale(1.62) rotate(9deg); filter: brightness(2); }
  25%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.78) rotate(9deg); filter: brightness(2); }
}
@keyframes v4Cracks { 0%, 12% { opacity: 0; } 15%, 21% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes v4Debris {
  0%, 18% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--debris-angle)) scale(.2); }
  20% { opacity: 1; }
  54% { opacity: 1; transform: translate(calc(-50% + cos(var(--debris-angle)) * var(--debris-distance)), calc(-50% + sin(var(--debris-angle)) * var(--debris-distance))) rotate(calc(var(--debris-angle) + 430deg)) scale(1); }
  78%, 100% { opacity: 0; transform: translate(calc(-50% + cos(var(--debris-angle)) * var(--debris-distance)), calc(-50% + sin(var(--debris-angle)) * var(--debris-distance) + 84px)) rotate(calc(var(--debris-angle) + 620deg)) scale(.72); }
}
@keyframes v4Smoke {
  0%, 22% { opacity: 0; transform: translate(-50%, 0) scale(.3); }
  34% { opacity: .72; }
  76% { opacity: .4; transform: translate(-50%, -100px) scale(1.45); }
  100% { opacity: 0; transform: translate(-50%, -155px) scale(1.8); }
}
@keyframes v4WhiteFlash { 0%, 18% { opacity: 0; } 19% { opacity: 1; } 21% { opacity: 1; } 23% { opacity: 0; } 100% { opacity: 0; } }
@keyframes v4Shockwave { 0%, 19% { opacity: 0; transform: translate(-50%, -50%) scale(.03); } 21% { opacity: 1; } 43% { opacity: .6; transform: translate(-50%, -50%) scale(7); } 58%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(10); } }
@keyframes v4ShockwaveTwo { 0%, 21% { opacity: 0; transform: translate(-50%, -50%) scale(.03); } 23% { opacity: .9; } 48% { opacity: .45; transform: translate(-50%, -50%) scale(6); } 65%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(9); } }
@keyframes v4EdgeLight { 0%, 18% { opacity: 0; } 20% { opacity: 1; } 48% { opacity: .32; } 88%, 100% { opacity: 0; } }
@keyframes v4Copy { 0%, 26% { opacity: 0; transform: translate(-50%, clamp(105px, 17vw, 158px)) rotate(-4deg) scale(.55); } 34% { opacity: 1; transform: translate(-50%, clamp(92px, 15vw, 142px)) rotate(2deg) scale(1.12); } 43%, 70% { opacity: 1; transform: translate(-50%, clamp(92px, 15vw, 142px)) rotate(-2deg) scale(1); } 86%, 100% { opacity: 0; transform: translate(-50%, clamp(78px, 13vw, 124px)) scale(.75); } }
@keyframes v4TableImpact { 0%, 100% { transform: translate(0); } 10% { transform: translate(-14px, 7px) rotate(-.5deg); } 22% { transform: translate(13px, -8px) rotate(.45deg); } 38% { transform: translate(-9px, 5px); } 56% { transform: translate(6px, -3px); } 76% { transform: translate(-3px, 2px); } }

@media (max-width: 720px) {
  .meltdown-portrait { width: 124px; height: 124px; }
  .meltdown-panic-face::before { box-shadow: 35px 0 0 -1px white, 35px 0 0 3px #241725; }
  .meltdown-debris i { --debris-distance: 102px !important; }
  .meltdown-copy b { max-width: 90vw; font-size: clamp(28px, 8vw, 43px); }
}

@media (prefers-reduced-motion: reduce) {
  .meltdown-debris, .meltdown-smoke, .meltdown-cracks { display: none; }
}

.recorded-mark { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 17px; padding: 2px 5px; border: 1px solid #9e3148; border-radius: 3px; background: #ffe0e7; box-shadow: 1px 1px 0 #9e314855; color: #9e3148; font: 1000 9px/1 sans-serif; white-space: nowrap; }
.scores { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; }
.action-meter { display: inline-flex; align-items: flex-end; gap: 2px; min-width: 45px; height: 27px; padding: 0; white-space: nowrap; }
.action-meter i { display: block; width: 21px; height: 27px; flex: 0 0 21px; background: url("assets/generated/action-point-icon-v1.webp?v=1") center / contain no-repeat; filter: grayscale(1) saturate(0) contrast(.82) brightness(1.2); opacity: .28; transform: scale(.9); transform-origin: center bottom; transition: filter .18s ease, opacity .18s ease, transform .18s ease; }
.action-meter i.ready { filter: saturate(1.08) brightness(1.06) drop-shadow(0 1px 2px #287fd588); opacity: 1; transform: scale(1); }
.card-grammar.scene { background: #7656c8; color: white; }

/* 行动力与红温共用同一套手绘贴纸语言，但分别用蓝色闪电和橙红火焰表达。 */
.card { padding-top: 23px; }
.card .card-grammar:not(.response-grammar):not(.mini) { left: 5px; right: 5px; display: flex; align-items: center; justify-content: space-between; min-height: 18px; padding: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--card-color); }
.card-cost-inline, .grammar-kind { display: inline-flex; align-items: center; gap: 3px; color: inherit; font: inherit; }
.card-cost-inline { padding: 0; }
.card-cost-inline > i { display: block; width: 18px; height: 18px; background: url("assets/generated/action-point-icon-v1.webp?v=1") center / contain no-repeat; }
.card-cost-inline em { color: currentColor; font: 1000 10px/1 "PingFang SC", sans-serif; font-style: normal; }
.grammar-kind { padding: 3px 6px; border-radius: 999px; background: var(--card-color); color: white; box-shadow: 0 1px 0 #0003; }
.card-grammar.response-grammar { display: inline-flex; min-height: 0; width: auto; padding: 3px 6px; box-shadow: none; }

/* 手牌卡面使用一套统一安全边距：顶部语法条、左右文字和底部说明都离边 7px。
   标题/表情只在这块安全区里自然排布，不通过上下居中掩盖底部留白。 */
.card { --card-edge: 7px; display: flex; flex-direction: column; padding: 27px var(--card-edge) var(--card-edge); }
.card .card-grammar:not(.response-grammar):not(.mini) { top: var(--card-edge); left: var(--card-edge); right: var(--card-edge); }
.card .card-art { margin-bottom: 0; }
.card small { margin-top: 6px; flex: 0 0 auto; }
@media (max-width: 720px) {
  .card { --card-edge: 5px; padding-top: 24px; padding-inline: var(--card-edge); padding-bottom: var(--card-edge); }
}

@media (max-width: 720px) {
  .action-meter { min-width: 38px; height: 23px; gap: 1px; }
  .action-meter i { width: 18px; height: 23px; flex-basis: 18px; }
}

/* 移动端使用独立牌桌，不再把 PC 的三行结构整体缩小。
   上层只管对手和落牌，下层只管自己和手牌；短暂提示作为浮层，不参与高度分配。 */
@media (max-width: 720px) {
  body:has(#game-view:not(.hidden)) { height: 100dvh; overflow: hidden; }
  .app-shell:has(#game-view:not(.hidden)) {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }
  .app-shell:has(#game-view:not(.hidden)) #game-view {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: grid;
    grid-template-rows: minmax(0, 1fr) clamp(208px, 31dvh, 238px);
    gap: 4px;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding: max(8px, env(safe-area-inset-top)) 8px max(5px, env(safe-area-inset-bottom));
    overflow: hidden;
    background: radial-gradient(circle at 50% 37%, #ffe99b18 0 18%, transparent 48%), var(--paper);
  }

  #game-view .turn-banner {
    position: fixed;
    left: 0;
    top: calc(50dvh - 32px);
    z-index: 30;
    width: 100vw;
    height: 64px;
    min-height: 64px;
    margin: 0;
    padding-inline: 17px;
  }

  #game-view .players {
    grid-row: 1;
    isolation: isolate;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  #game-view .combat-route { z-index: 1; }
  #game-view .player-seats { inset: 0; }
  #game-view .player-seat.table-opponent-left,
  #game-view .player-seat.table-opponent-right {
    top: 4px;
    width: calc(50% - 6px);
    min-height: 91px;
    padding: 6px 4px 5px;
  }
  #game-view .player-seat.table-opponent-left { left: 0; }
  #game-view .player-seat.table-opponent-right { right: 0; }
  #game-view .player-seat.table-opponent-left .avatar,
  #game-view .player-seat.table-opponent-right .avatar { width: 62px; height: 62px; }

  #game-view .table-center {
    left: 0;
    right: 0;
    top: 101px;
    bottom: 0;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 0;
    transform: none;
  }
  #game-view .table-center.drop-ready { transform: scale(1.01); }
  #game-view .pending-card {
    top: 50%;
    width: 100%;
    max-height: 100%;
  }
  #game-view .turn-table-stack { max-height: calc(100dvh - clamp(208px, 31dvh, 238px) - 142px); }

  #game-view .action-panel {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
  }
  #game-view .hand-zone {
    position: relative;
    z-index: 4;
    order: 1;
    width: 100%;
    height: clamp(140px, 21dvh, 158px);
    min-height: 0;
  }
  #game-view .hand {
    position: absolute;
    inset: auto 0 0;
    width: 100%;
    height: clamp(140px, 21dvh, 158px);
    min-height: 0;
    padding: 17px 12px 2px 38px;
    overflow: visible;
  }
  #game-view .self-seat {
    position: relative;
    z-index: 5;
    left: auto;
    top: auto;
    order: 2;
    width: min(292px, 92vw);
    min-height: 64px;
    margin: 2px auto 0;
    transform: none;
  }
  #game-view .player-seat.table-self {
    min-height: 64px;
    max-height: 70px;
  }
}

/* 本回合主操作：玩家可以像喊“过”一样主动收手，不必尴尬地等倒计时。 */
.hand-status-bar { position: absolute; z-index: 18; inset: 0; pointer-events: none; }
.hand-status-bar .target-copy { pointer-events: none; }
.end-turn-button { position: absolute; left: 22px; top: 8px; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 6px 11px; border: 3px solid var(--ink); border-radius: 6px 10px 5px 8px; background: var(--yellow); box-shadow: 4px 5px 0 var(--ink); color: var(--ink); transform: rotate(-2deg); pointer-events: auto; }
.end-turn-button span { color: #685520; font: 900 9px/1 "PingFang SC", sans-serif; }
.end-turn-button strong { font: 1000 15px/1 "PingFang SC", sans-serif; white-space: nowrap; }
.end-turn-button::after { content: "→"; font: 1000 18px/1 sans-serif; }
.end-turn-button:hover { transform: translateY(-2px) rotate(0); box-shadow: 5px 7px 0 var(--ink); }
.end-turn-button:active { transform: translate(3px, 4px) rotate(0); box-shadow: 1px 1px 0 var(--ink); }
.end-turn-button:disabled { cursor: default; filter: grayscale(.6); }

@media (min-width: 721px) {
  /* PC 左下的人物卡上方本来就是留白，按钮放这里不会盖住手牌。 */
  .hand-status-bar { left: 0; right: auto; width: 204px; }
  #game-view .end-turn-button { top: -4px; }
  #game-view .self-seat { top: 64px; }
}

@media (min-width: 721px) and (max-height: 760px) {
  #game-view .self-seat { top: 56px; }
}

@media (max-width: 720px) {
  /* 手机上把“结束回合”悬在手牌右上角外侧，和下方人物信息分开。 */
  #game-view .hand-status-bar { inset: 0; }
  #game-view .end-turn-button { left: auto; right: max(9px, env(safe-area-inset-right)); top: -42px; min-height: 40px; padding: 5px 9px; }
  #game-view .end-turn-button span { display: none; }
  #game-view .end-turn-button strong { font-size: 13px; }
}

/* 手牌整体放大一档：同步放大牌面、梗图和说明，仍用扇形重叠容纳多张牌。 */
@media (min-width: 721px) {
  #game-view .card {
    --fan-card-width: 108px;
    height: 156px;
    margin-left: calc(var(--fan-step) - var(--fan-card-width));
    padding: 23px 7px 7px;
    grid-template-rows: auto 46px minmax(0, 1fr);
  }
  #game-view .card .card-title--long { min-height: 28px; font-size: 13px; line-height: 1.05; }
  #game-view .card .card-art { width: 46px; height: 46px; }
  #game-view .card small {
    height: auto;
    min-height: 0;
    overflow-wrap: anywhere;
    word-break: break-all;
    font-size: 9.5px;
    line-height: 1.22;
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
}

@media (min-width: 721px) and (max-height: 760px) {
  #game-view .card {
    --fan-card-width: 98px;
    height: 140px;
    padding: 20px 6px 5px;
    grid-template-rows: auto 40px minmax(0, 1fr);
  }
  #game-view .card .card-art { width: 40px; height: 40px; }
  #game-view .card small { font-size: 8.5px; }
}

@media (max-width: 720px) {
  #game-view .card {
    --fan-card-width: 94px;
    height: 140px;
    margin-left: calc(var(--fan-step) - var(--fan-card-width));
    padding: 20px 6px 6px;
    grid-template-rows: auto 46px minmax(0, 1fr);
  }
  #game-view .card strong { font-size: 14px; }
  #game-view .card .card-title--long { min-height: 27px; font-size: 12px; }
  #game-view .card .card-art { width: 46px; height: 46px; }
  #game-view .card small { font-size: 9px; line-height: 1.28; }
}

/* PC 自己的信息卡复用对手卡的同一套规格，只改变它在牌桌左下角的位置。 */
@media (min-width: 721px) {
  #game-view .self-seat {
    width: min(236px, 25vw);
  }
  #game-view .player-seat.table-self {
    grid-template-columns: 68px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 3px 7px;
    min-height: 84px;
    padding: 6px 8px;
    border-width: 2px;
    border-radius: 0;
    background: var(--seat-wash);
    box-shadow: 3px 4px 0 #0002;
    text-align: left;
    transform: rotate(-1deg);
  }
  #game-view .player-seat.table-self .avatar {
    width: 68px;
    height: 68px;
    grid-row: 1 / 3;
  }
  #game-view .player-seat.table-self .player-info { align-self: end; }
  #game-view .player-seat.table-self .player-info strong { font-size: 14px; }
  #game-view .player-seat.table-self .player-info span { display: block; }
  #game-view .player-seat.table-self .scores {
    align-self: start;
    justify-self: stretch;
    width: 100%;
  }
  #game-view .player-seat.table-self .risk-meter { width: fit-content; padding: 0; }
  #game-view .hand {
    left: calc(min(236px, 25vw) + 22px);
    width: calc(100% - min(236px, 25vw) - 22px);
  }
  #game-view .hand-status-bar { width: min(236px, 25vw); }
}

/* PC 将“个人资料 + 手牌”按真实内容宽度组成一组，再把整组放在底边正中。 */
@media (min-width: 721px) {
  #game-view .action-panel { width: min(100%, 1040px); }
  #game-view .self-seat,
  #game-view .hand-status-bar {
    left: calc(50% - var(--hand-group-width, 100%) / 2);
  }
  #game-view .hand {
    left: calc(50% - var(--hand-group-width, 100%) / 2 + var(--self-seat-width, min(236px, 25vw)) + 20px);
    width: var(--hand-content-width, calc(100% - min(236px, 25vw) - 20px));
    justify-content: flex-start;
    padding-right: 14px;
  }
}

/* PC 对局使用真正的两层牌桌：上层从标题栏下方立刻开始，下层承载自己和手牌。
   横向行动提示是临时全屏浮层，不再为它长期预留一整行高度。 */
@media (min-width: 721px) {
  body:has(#game-view:not(.hidden)) {
    height: 100dvh;
    overflow: hidden;
  }
  .app-shell:has(#game-view:not(.hidden)) {
    display: grid;
    grid-template-rows: 82px minmax(0, 1fr);
    height: 100dvh;
    min-height: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    overflow: hidden;
  }
  .app-shell:has(#game-view:not(.hidden)) .masthead {
    min-height: 0;
    height: 82px;
  }
  .app-shell:has(#game-view:not(.hidden)) #game-view {
    grid-template-rows: minmax(0, 1fr) 168px;
    gap: 6px;
    height: auto;
    min-height: 0;
    padding-top: 5px;
  }
  #game-view .turn-banner {
    position: fixed;
    left: 0;
    top: calc(50% - 41px);
    width: 100vw;
    margin: 0;
  }
  #game-view .players {
    grid-row: 1;
  }
  #game-view .player-seat.table-opponent-left,
  #game-view .player-seat.table-opponent-right {
    top: 18px;
  }
  #game-view .action-panel {
    grid-row: 2;
  }
}

/* 爆炸只保留角色起爆、闪光、碎片和烟尘；移除廉价的扩散圆环。 */
.meltdown-shockwave { display: none !important; }
.meltdown-cracks { display: none !important; }

/* 破防演出 V6：头像起爆与原爆炸保留，后半段接生图蘑菇云精灵；CSS 仅负责切帧和运动。 */
.meltdown-layer {
  --meltdown-duration: 2.8s;
  --meltdown-x: 50vw;
  --meltdown-y: 50vh;
  --meltdown-angle: 0deg;
  --meltdown-copy-x: 50vw;
  --meltdown-copy-y: 62vh;
  --mushroom-fit-scale: 1;
  position: fixed;
  inset: 0;
  z-index: 45;
  display: block;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  background: transparent;
  isolation: isolate;
  animation: none !important;
}
.meltdown-layer::before,
.meltdown-layer::after {
  content: "";
  position: fixed;
  left: var(--meltdown-x);
  top: var(--meltdown-y);
  display: block !important;
  pointer-events: none;
  opacity: 0;
}
/* 背景伪元素全部关闭，避免 CSS 渐变烟尘与生图素材混用。 */
.meltdown-layer::before {
  display: none !important;
}
.meltdown-layer::after {
  display: none !important;
}
.meltdown-layer.is-active { animation: handdrawnBackdrop var(--meltdown-duration) linear both !important; }

.meltdown-edge-light {
  position: fixed;
  z-index: 0;
  inset: 0;
  opacity: 0;
  box-shadow: inset 0 0 0 0 #e53322;
}
.meltdown-layer.is-active .meltdown-edge-light {
  animation: handdrawnEdge var(--meltdown-duration) cubic-bezier(.16,.76,.2,1) both;
}

.meltdown-vfx {
  position: fixed;
  left: var(--meltdown-x);
  top: var(--meltdown-y);
  z-index: 3;
  width: clamp(380px, 66vmin, 690px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(var(--meltdown-angle));
  transform-origin: 50% 50%;
}
.meltdown-sprite {
  position: absolute;
  inset: 0;
  display: block;
  background: url("assets/generated/meltdown-handdrawn-grid-v1.webp?v=1") 0 0 / 400% 400% no-repeat;
  opacity: 0;
  transform: scale(.38);
  transform-origin: 50% 50%;
  image-rendering: auto;
}
.meltdown-layer.is-active .meltdown-sprite {
  animation: handdrawnSpriteFrames 1.08s steps(1, end) both,
    handdrawnSpritePresence 1.08s cubic-bezier(.18,.78,.2,1) both;
}

.meltdown-mushroom-fit {
  --mushroom-anchor-nudge: 42px;
  position: fixed;
  left: var(--meltdown-x);
  top: calc(var(--meltdown-y) + var(--mushroom-anchor-nudge));
  z-index: 5;
  display: block;
  width: clamp(320px, 50vmin, 520px);
  aspect-ratio: 1;
  transform: translate(-50%, -100%) scale(var(--mushroom-fit-scale));
  transform-origin: 50% 100%;
}
.meltdown-mushroom {
  position: absolute;
  inset: 0;
  display: block;
  background: url("assets/generated/meltdown-mushroom-grid-v1.webp?v=1") 0 0 / 400% 400% no-repeat;
  opacity: 0;
  transform: scale(.48);
  transform-origin: 50% 100%;
  image-rendering: auto;
}
.meltdown-layer.is-active .meltdown-mushroom {
  animation: mushroomSpriteFrames 1.88s .40s steps(1, end) both,
    mushroomSpritePresence 1.88s .40s cubic-bezier(.16,.78,.2,1) both;
}

.meltdown-white-flash {
  position: fixed;
  left: var(--meltdown-x);
  top: var(--meltdown-y);
  z-index: 4;
  width: clamp(82px, 15vmin, 170px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 0;
  background: #fff9ce;
  clip-path: polygon(50% 0, 58% 35%, 82% 12%, 67% 41%, 100% 50%, 67% 59%, 85% 88%, 58% 66%, 50% 100%, 42% 66%, 15% 90%, 33% 59%, 0 50%, 34% 42%, 13% 13%, 42% 35%);
  filter: drop-shadow(0 0 12px #ffb22b);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.08) rotate(8deg);
}
.meltdown-layer.is-active .meltdown-white-flash {
  animation: handdrawnHitFlash var(--meltdown-duration) steps(1, end) both !important;
}

.meltdown-copy {
  position: fixed;
  left: var(--meltdown-copy-x);
  top: var(--meltdown-copy-y);
  z-index: 6;
  display: grid;
  width: max-content;
  max-width: min(88vw, 520px);
  justify-items: center;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.76);
}
.meltdown-copy span { display: none !important; }
.meltdown-copy b {
  display: block;
  margin: 0;
  width: min(86vw, 520px);
  aspect-ratio: 1200 / 550;
  overflow: hidden;
  background: url("assets/generated/meltdown-title-v1.webp?v=1") center / contain no-repeat;
  color: transparent;
  font-size: 0 !important;
  line-height: 0;
  text-shadow: none;
  -webkit-text-stroke: 0;
  filter: drop-shadow(0 6px 7px rgb(57 8 3 / 45%));
}
.meltdown-copy b::after {
  content: none;
}
.meltdown-layer.is-active .meltdown-copy {
  animation: handdrawnCopy var(--meltdown-duration) cubic-bezier(.18,.82,.2,1) both !important;
}

.player-seat.is-meltdown-source { z-index: 20; }
.player-seat.is-meltdown-source .avatar {
  animation: handdrawnAvatarSource var(--meltdown-duration) cubic-bezier(.18,.8,.22,1) both !important;
  transform-origin: 50% 65% !important;
}
body.meltdown .app-shell {
  animation: handdrawnTableImpact 360ms 210ms cubic-bezier(.22,.8,.24,1) both !important;
}

@keyframes handdrawnSpriteFrames {
  0% { background-position: 0% 0%; }
  6.25% { background-position: 33.333% 0%; }
  12.5% { background-position: 66.667% 0%; }
  18.75% { background-position: 100% 0%; }
  25% { background-position: 0% 33.333%; }
  31.25% { background-position: 33.333% 33.333%; }
  37.5% { background-position: 66.667% 33.333%; }
  43.75% { background-position: 100% 33.333%; }
  50% { background-position: 0% 66.667%; }
  56.25%, 100% { background-position: 33.333% 66.667%; }
}
@keyframes handdrawnSpritePresence {
  0% { opacity: 0; transform: scale(.28); }
  4% { opacity: 1; }
  18% { transform: scale(.56); }
  36% { opacity: 1; transform: scale(.88); }
  60% { opacity: 1; transform: scale(1.06); }
  72% { opacity: .82; transform: scale(.92); }
  100% { opacity: 0; transform: scale(.66); }
}
@keyframes mushroomSpriteFrames {
  0% { background-position: 0% 0%; }
  6.25% { background-position: 33.333% 0%; }
  12.5% { background-position: 66.667% 0%; }
  18.75% { background-position: 100% 0%; }
  25% { background-position: 0% 33.333%; }
  31.25% { background-position: 33.333% 33.333%; }
  37.5% { background-position: 66.667% 33.333%; }
  43.75% { background-position: 100% 33.333%; }
  50% { background-position: 0% 66.667%; }
  56.25% { background-position: 33.333% 66.667%; }
  62.5% { background-position: 66.667% 66.667%; }
  68.75% { background-position: 100% 66.667%; }
  75% { background-position: 0% 100%; }
  81.25% { background-position: 33.333% 100%; }
  87.5% { background-position: 66.667% 100%; }
  93.75%, 100% { background-position: 100% 100%; }
}
@keyframes mushroomSpritePresence {
  0% { opacity: 0; transform: scale(.68); }
  7% { opacity: .82; transform: scale(.72); }
  28% { opacity: 1; transform: scale(.84); }
  58% { opacity: 1; transform: scale(.96); }
  80% { opacity: .92; transform: scale(1); }
  100% { opacity: 0; transform: scale(.96); }
}
@keyframes handdrawnHitFlash {
  0%, 12% { opacity: 0; transform: translate(-50%, -50%) scale(.08) rotate(8deg); }
  13%, 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(-4deg); }
  19%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.46) rotate(-4deg); }
}
@keyframes handdrawnBackdrop {
  0%, 8% { background-color: transparent; }
  18% { background-color: #2b0808a8; }
  68% { background-color: #2407078f; }
  100% { background-color: transparent; }
}
@keyframes handdrawnEdge {
  0%, 12% { opacity: 0; box-shadow: inset 0 0 0 0 #e53322; }
  19% { opacity: .75; box-shadow: inset 0 0 clamp(46px, 9vmin, 110px) clamp(3px, 1vmin, 12px) #f14424; }
  52% { opacity: .42; }
  100% { opacity: 0; box-shadow: inset 0 0 clamp(20px, 5vmin, 60px) 0 #7d170f; }
}
@keyframes handdrawnCopy {
  0%, 34% { opacity: 0; transform: translate(-50%, -50%) scale(.76); filter: blur(3px); }
  42% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); filter: blur(0); }
  48%, 76% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(.94); filter: blur(1px); }
}
@keyframes handdrawnAvatarSource {
  0% { transform: scale(1); filter: none; }
  10% { transform: scale(.84) rotate(-2deg); filter: saturate(1.25); }
  17% { transform: scale(1.1) rotate(1deg); filter: brightness(1.9) saturate(1.6) drop-shadow(0 0 12px #ffd23f); }
  36% { transform: scale(.98); filter: saturate(1.2) drop-shadow(0 0 8px #ff4b20); }
  76% { transform: scale(1.02); filter: saturate(1.08); }
  100% { transform: scale(1); filter: none; }
}
@keyframes handdrawnTableImpact {
  0% { transform: translate(0, 0); }
  18% { transform: translate(-5px, 2px); }
  34% { transform: translate(5px, -3px); }
  52% { transform: translate(-3px, 2px); }
  72% { transform: translate(2px, -1px); }
  100% { transform: translate(0, 0); }
}

@media (max-width: 720px) {
  .meltdown-vfx { width: clamp(340px, 92vmin, 520px); }
  .meltdown-mushroom-fit { width: clamp(300px, 82vmin, 430px); }
  .meltdown-copy b { max-width: 90vw; overflow: hidden; font-size: clamp(27px, 9vw, 44px); text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
  body.meltdown .app-shell { animation: none !important; }
  .meltdown-layer.is-active .meltdown-sprite {
    animation: handdrawnReducedFrame 680ms ease-out both;
    background-position: 66.667% 66.667%;
  }
  .meltdown-layer.is-active .meltdown-mushroom {
    animation: mushroomReducedFrame 1.2s .18s ease-out both;
    background-position: 100% 66.667%;
  }
  .meltdown-layer.is-active .meltdown-white-flash { animation: none !important; }
}
@keyframes handdrawnReducedFrame {
  0%, 100% { opacity: 0; transform: scale(.7); }
  18%, 72% { opacity: 1; transform: scale(1); }
}
@keyframes mushroomReducedFrame {
  0%, 100% { opacity: 0; transform: scale(.7); }
  18%, 72% { opacity: 1; transform: scale(1); }
}

/* 结算不再使用居中弹窗，改为贯穿页面的横向撕纸条。 */
.gameover-dialog {
  --gameover-accent: var(--yellow);
  position: fixed;
  inset: 50% 0 auto;
  isolation: isolate;
  box-sizing: border-box;
  display: none;
  grid-template-columns: auto minmax(0, max-content) auto;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 54px);
  width: 100vw;
  max-width: none;
  min-height: clamp(150px, 20vh, 210px);
  margin: 0;
  padding: 18px clamp(18px, 6vw, 80px);
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  transform: translateY(-50%);
}

.gameover-dialog[open] {
  display: grid;
  animation: gameover-strip-in .35s cubic-bezier(.2, .9, .25, 1.12) both;
}

.gameover-dialog::before,
.gameover-dialog::after,
.gameover-rip {
  content: "";
  position: absolute;
  pointer-events: none;
  clip-path: polygon(
    0 5%, 24% 3%, 51% 5%, 78% 3%, 100% 5%,
    100% 95%, 80% 97%, 54% 95%, 27% 97%, 0 95%
  );
}

.gameover-dialog::before {
  z-index: 0;
  inset: -5px -.5%;
  background: white;
}

.gameover-dialog::after {
  z-index: 2;
  inset: 0;
  background: linear-gradient(100deg, #0d0d0d 0 18%, #202020 36%, #090909 62%, #181818 100%);
}

.gameover-rip {
  z-index: 1;
  inset: -12px -2%;
  background: var(--gameover-accent);
  transform: translateY(7px) skewX(-3deg);
}

.gameover-rip i {
  position: absolute;
  width: 22%;
  height: 3px;
  background: white;
  opacity: .75;
  transform: rotate(-3deg);
}

.gameover-rip i:first-child {
  left: 7%;
  top: 24%;
}

.gameover-rip i:last-child {
  right: 6%;
  bottom: 20%;
  transform: rotate(3deg);
}

.gameover-dialog > * {
  position: relative;
  z-index: 3;
}

.gameover-dialog > .gameover-rip {
  position: absolute;
  z-index: 1;
}

.gameover-dialog h2 {
  margin: 0;
  color: #fffdf7;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1;
  white-space: nowrap;
  text-shadow: 3px 3px 0 #000;
}

.gameover-avatar {
  width: clamp(92px, 11vw, 132px);
  height: clamp(92px, 11vw, 132px);
  margin: 0;
  padding: 8px;
  border: 3px solid #fffdf7;
  background: #fffdf7;
  box-shadow: 5px 6px 0 var(--red);
}

.gameover-avatar .avatar {
  width: 100%;
  height: 100%;
}

.gameover-dialog #restart-button {
  margin: 0;
  font-size: clamp(13px, 1.5vw, 18px);
  white-space: nowrap;
}

.gameover-dialog:has(#restart-button[hidden]) {
  grid-template-columns: auto auto;
}

@keyframes gameover-strip-in {
  from { opacity: 0; transform: translateY(-50%) translateX(-3vw); }
  to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

@media (max-width: 560px) {
  .gameover-dialog {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 118px;
    padding: 12px;
  }

  .gameover-dialog:has(#restart-button[hidden]) {
    grid-template-columns: 72px minmax(0, max-content);
  }

  .gameover-avatar {
    width: 72px;
    height: 72px;
    padding: 5px;
  }

  .gameover-dialog h2 {
    overflow: hidden;
    font-size: clamp(20px, 6vw, 28px);
    text-overflow: ellipsis;
  }

  .gameover-dialog #restart-button {
    max-width: 108px;
    padding: 9px 8px;
    font-size: 11px;
    line-height: 1.2;
    white-space: normal;
  }
}

/* 大嘴巴子卡面与受击动画分离：卡面讲梗，序列帧负责让目标角色真正“挨一下”。 */
.card-art.bull-card-art {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff url("assets/generated/niulai-character-v1.webp") center 42% / cover no-repeat;
}
.card-art.bull-card-art::before { content: none; }
.bull-layer {
  position: fixed;
  z-index: 46;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: #17171799;
  backdrop-filter: blur(7px);
}
.bull-stage {
  width: min(760px, 96vw);
  padding: clamp(20px, 4vw, 38px);
  border: 3px solid #d8d5d1;
  background: #fff;
  color: #292522;
  box-shadow: 7px 8px 0 #07c160, 0 28px 80px #17171738;
  text-align: center;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  transform: rotate(-.35deg);
}
.bull-kicker {
  display: none;
}
.bull-stage h2 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 42px); font-weight: 800; line-height: 1.2; }
.bull-stage > p { max-width: 620px; min-height: 22px; margin: 0 auto 20px; color: #625d58; font-size: 14px; font-weight: 500; line-height: 1.6; }
.bull-cows { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 2.2vw, 20px); }
.bull-cow {
  position: relative;
  min-width: 0;
  padding: 12px 8px 10px;
  border: 2px solid #d8d5d1;
  background: #fff;
  color: #292522;
  box-shadow: 4px 5px 0 #1717171f;
  cursor: pointer;
  transition: transform .16s, border-color .16s, filter .16s;
}
.bull-cow:not(:disabled):hover { border-color: #ef7642; transform: translateY(-7px) rotate(-1deg); filter: brightness(1.04); }
.bull-cow:disabled { cursor: default; }
.bull-cow.is-picked:not(.is-bull):not(.is-mom) { border-color: #07c160; background: #fff; opacity: 1; }
.bull-cow.is-picked:not(.is-bull):not(.is-mom) .bull-cow-face { opacity: .66; }
.bull-cow-face { position: relative; display: grid; place-items: center; aspect-ratio: 1.28; overflow: hidden; border: 1px solid #e2dfdc; background: #fff url("assets/generated/niulai-card-back-v1.webp") center / cover no-repeat; transform-style: preserve-3d; }
.bull-pick-avatar {
  position: absolute;
  z-index: 4;
  right: -8px;
  top: -10px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--picker-color), 2px 3px 0 #17171730;
  pointer-events: none;
}
.bull-pick-avatar .avatar { width: 42px; height: 42px; filter: none; }
.bull-cow-face i { display: block; width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, transparent 0 22%, #fff3 23% 28%, transparent 29%), linear-gradient(135deg, transparent 0 45%, #fff2 46% 51%, transparent 52%); }
.bull-cow-face b {
  position: absolute;
  left: 50%;
  bottom: 2px;
  min-width: 76px;
  padding: 4px 8px;
  background: #6e4326;
  color: white;
  font-size: clamp(15px, 2.6vw, 22px);
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  transform: translateX(-50%) scale(.4);
}
.bull-cow > strong { display: block; overflow: hidden; font-size: clamp(13px, 2vw, 17px); font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.bull-cow > small { display: block; min-height: 18px; margin-top: 5px; color: #68635f; font-size: 11px; font-weight: 500; line-height: 1.35; }
.bull-result { min-height: 24px; margin-top: 18px; color: #b84d27; font-size: clamp(13px, 2.3vw, 17px); font-weight: 700; line-height: 1.45; }
.bull-layer.is-reveal .bull-cow { animation: bullCardReveal .72s cubic-bezier(.18,.82,.22,1.12) both; }
.bull-layer.is-reveal .bull-cow.is-bull { border-color: #ef7642; background: #fff; box-shadow: 0 0 0 3px #ef8a4530, 4px 5px 0 #ef8a4540; }
.bull-layer.is-reveal .bull-cow.is-mom { border-color: #d8d5d1; background: #fff; }
.bull-layer.is-reveal .bull-cow.is-bull .bull-cow-face { background-image: url("assets/generated/niulai-character-v1.webp"); }
.bull-layer.is-reveal .bull-cow.is-mom .bull-cow-face { background-color: #fff; background-image: url("assets/generated/niulai-mama-v1.webp"); background-size: contain; background-repeat: no-repeat; }
.bull-layer.is-reveal .bull-cow-face i { opacity: 0; }
.bull-layer.is-reveal .bull-cow-face b { opacity: 1; transform: translateX(-50%) scale(1); transition: opacity .18s .38s, transform .25s .38s; }
.bull-layer.is-reveal .bull-copy { animation: bullCopyPop .4s both; }
@keyframes bullCardReveal {
  0% { opacity: .2; transform: perspective(600px) rotateY(90deg) scale(.82); }
  62% { opacity: 1; transform: perspective(600px) rotateY(-8deg) scale(1.05); }
  100% { opacity: 1; transform: perspective(600px) rotateY(0) scale(1); }
}
@media (max-width: 560px) {
  .bull-layer { padding: 10px; }
  .bull-stage { width: 100%; padding: 18px 10px 20px; box-shadow: 6px 7px 0 #07c160; }
  .bull-stage > p { margin-bottom: 12px; font-size: 12px; }
  .bull-cows { gap: 6px; }
  .bull-cow { padding: 8px 4px; border-width: 2px; }
  .bull-pick-avatar { right: -5px; top: -7px; width: 36px; height: 36px; border-width: 2px; }
  .bull-pick-avatar .avatar { width: 33px; height: 33px; }
  .bull-cow-face b { min-width: 58px; font-size: 15px; }
  .bull-result { margin-top: 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bull-layer.is-reveal .bull-cow { animation-duration: .15s; animation-delay: 0s; }
}

.card-art.slap-card-art {
  background-image: url("assets/generated/slap-card-art-v3.webp");
  background-size: cover;
  background-position: 52% 45%;
}
.card-grammar.gag { color: #fff; }
.card-cost-inline.free {
  width: auto;
  min-width: 23px;
  padding-right: 3px;
  color: #fff7a7;
  font-size: 7px;
  white-space: nowrap;
}
.slap-layer {
  --slap-x: 50vw;
  --slap-y: 50vh;
  --slap-size: 180px;
  --slap-flip: 1;
  --slap-push: 1;
  position: fixed;
  z-index: 44;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.slap-victim-sprite {
  position: absolute;
  left: var(--slap-x);
  top: var(--slap-y);
  width: clamp(136px, var(--slap-size), 220px);
  aspect-ratio: 1;
  background-position: 0 0;
  background-size: 400% 200%;
  background-repeat: no-repeat;
  opacity: 0;
  filter: drop-shadow(5px 7px 0 #4b1d1238);
  transform: translate(-50%, -50%) scaleX(var(--slap-flip));
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  contain: paint;
  will-change: transform, opacity, background-position;
}
.slap-layer[data-animal="owl"] .slap-victim-sprite { background-image: url("assets/generated/slap-hit-owl-grid-v2.webp"); }
.slap-layer[data-animal="capybara"] .slap-victim-sprite { background-image: url("assets/generated/slap-hit-capybara-grid-v2.webp"); }
.slap-layer[data-animal="cat"] .slap-victim-sprite { background-image: url("assets/generated/slap-hit-cat-grid-v2.webp"); }
.slap-impact-copy {
  position: absolute;
  left: calc(var(--slap-x) + 6px);
  top: calc(var(--slap-y) - 54px);
  color: #fff39a;
  font: 1000 clamp(42px, 7vw, 78px)/1 "Kaiti SC", "STKaiti", sans-serif;
  -webkit-text-stroke: 3px #7f1f10;
  text-shadow: 5px 6px 0 #24100d;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-8deg) scale(.35);
}
.slap-layer.is-active .slap-victim-sprite {
  animation: slapVictimFrames 630ms steps(1, end) both;
}
.slap-layer.is-active .slap-impact-copy {
  animation: slapCopy 610ms cubic-bezier(.16,.86,.22,1) both;
}
.player-seat.slap-hit .avatar {
  opacity: 0 !important;
}
@keyframes slapVictimFrames {
  /* 一条清楚的力线：预感 → 脸被压过去 → 掌印定格 → 回正。
     不用「眩晕 / 左右反弹」两帧，避免视觉上像失控抖动。 */
  0%, 20% {
    opacity: 1;
    background-position: 33.333% 0;
    transform: translate(-50%, -50%) scaleX(var(--slap-flip)) scale(.98);
  }
  21%, 33% {
    opacity: 1;
    background-position: 66.667% 0;
    transform: translate(-50%, -50%) translateX(calc(var(--slap-push) * 6px)) scaleX(var(--slap-flip)) scale(1.02, .98);
  }
  34%, 48% {
    opacity: 1;
    background-position: 100% 0;
    transform: translate(-50%, -50%) translateX(calc(var(--slap-push) * 15px)) scaleX(var(--slap-flip)) scale(1.08, .92);
  }
  49%, 78% {
    opacity: 1;
    background-position: 0 100%;
    transform: translate(-50%, -50%) translateX(calc(var(--slap-push) * 9px)) scaleX(var(--slap-flip)) scale(1.03, .98);
  }
  79% {
    opacity: 1;
    background-position: 100% 100%;
    transform: translate(-50%, -50%) translateX(calc(var(--slap-push) * 2px)) scaleX(var(--slap-flip)) scale(1.01);
  }
  100% {
    /* JS 在 animationend 同一帧换回原头像；尾帧保持可见可避免定时器兜底时出现空白。 */
    opacity: 1;
    background-position: 100% 100%;
    transform: translate(-50%, -50%) scaleX(var(--slap-flip)) scale(1);
  }
}
@keyframes slapCopy {
  0%, 29% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(.35); }
  39% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1.18); }
  72% { opacity: 1; transform: translate(-50%, -66%) rotate(2deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -84%) rotate(4deg) scale(.9); }
}
@media (max-width: 560px) {
  .slap-victim-sprite { width: clamp(124px, var(--slap-size), 178px); }
  .slap-impact-copy { top: calc(var(--slap-y) - 42px); }
}
@media (prefers-reduced-motion: reduce) {
  .slap-layer.is-active .slap-victim-sprite { animation-duration: 520ms; }
  .slap-layer.is-active .slap-impact-copy,
  .player-seat.slap-hit .avatar { animation-duration: 520ms; }
}

/* 在线拍砖是独立演出：砖头从头顶落下，受击角色由专属砖头序列帧接管。 */
.brick-layer {
  --brick-x: 50vw;
  --brick-y: 50vh;
  --brick-size: 180px;
  position: fixed;
  z-index: 44;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.brick-victim-sprite {
  position: absolute;
  left: var(--brick-x);
  top: var(--brick-y);
  width: clamp(136px, var(--brick-size), 220px);
  aspect-ratio: 1;
  background-position: 0 0;
  background-size: 400% 200%;
  background-repeat: no-repeat;
  opacity: 0;
  filter: drop-shadow(5px 7px 0 #4b1d1238);
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  contain: paint;
  will-change: transform, opacity, background-position;
}
.brick-layer[data-animal="owl"] .brick-victim-sprite { background-image: url("assets/generated/brick-hit-owl-grid-v1.webp"); }
.brick-layer[data-animal="capybara"] .brick-victim-sprite { background-image: url("assets/generated/brick-hit-capybara-grid-v1.webp"); }
.brick-layer[data-animal="cat"] .brick-victim-sprite { background-image: url("assets/generated/brick-hit-cat-grid-v1.webp"); }
.brick-impact-copy {
  position: absolute;
  left: calc(var(--brick-x) + 8px);
  top: calc(var(--brick-y) - 59px);
  color: #fff0bd;
  font: 1000 clamp(42px, 7vw, 78px)/1 "Kaiti SC", "STKaiti", sans-serif;
  -webkit-text-stroke: 3px #72513a;
  text-shadow: 5px 6px 0 #2d2019;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-6deg) scale(.35);
}
.brick-layer.is-active .brick-victim-sprite { animation: brickVictimFrames 900ms steps(1, end) both; }
.brick-layer.is-active .brick-impact-copy { animation: brickCopy 880ms cubic-bezier(.16,.86,.22,1) both; }
.player-seat.brick-hit .avatar { opacity: 0 !important; }
@keyframes brickVictimFrames {
  0%, 12% { opacity: 1; background-position: 0 0; transform: translate(-50%, -50%) scale(.98); }
  13%, 23% { opacity: 1; background-position: 33.333% 0; transform: translate(-50%, -50%) scale(1); }
  24%, 35% { opacity: 1; background-position: 66.667% 0; transform: translate(-50%, -50%) scale(1.02); }
  36%, 51% { opacity: 1; background-position: 100% 0; transform: translate(-50%, -50%) scale(1.08, .9); }
  52%, 67% { opacity: 1; background-position: 0 100%; transform: translate(-50%, -50%) scale(1.02, .94); }
  68%, 81% { opacity: 1; background-position: 33.333% 100%; transform: translate(-50%, -50%) scale(1); }
  82%, 91% { opacity: 1; background-position: 66.667% 100%; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1; background-position: 100% 100%; transform: translate(-50%, -50%) scale(1); }
}
@keyframes brickCopy {
  0%, 31% { opacity: 0; transform: translate(-50%, -50%) rotate(-6deg) scale(.35); }
  39% { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(1.18); }
  74% { opacity: 1; transform: translate(-50%, -64%) rotate(2deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -82%) rotate(4deg) scale(.9); }
}
@media (max-width: 560px) {
  .brick-victim-sprite { width: clamp(124px, var(--brick-size), 178px); }
  .brick-impact-copy { top: calc(var(--brick-y) - 44px); }
}
@media (prefers-reduced-motion: reduce) {
  .brick-layer.is-active .brick-victim-sprite { animation-duration: 720ms; }
  .brick-layer.is-active .brick-impact-copy { animation-duration: 700ms; }
}

/* 运行时卡牌图集改用 WebP，保持切帧尺寸不变，减少进局首批下载。 */
.card-art { background-image: url("assets/generated/card-meme-reactions-sheet-v3.webp"); }

/* 双时空牌桌：时代感只留在桌面边缘。
   旧版把整张插画用 cover 铺在牌局底下，聊天装饰、论坛栏和座位/手牌会抢同一块画面；
   现在改成干净桌面 + 极轻的边缘纹理，中央始终只服务于本次出牌。 */
#game-view.era-wechat,
#game-view.era-tieba {
  position: relative;
  isolation: isolate;
  transition: background-color .32s ease, color .32s ease;
}
#game-view.era-wechat {
  background:
    radial-gradient(48% 30% at -8% 30%, #07c1600c 0, transparent 74%),
    radial-gradient(44% 28% at 108% 76%, #07c1600b 0, transparent 76%),
    linear-gradient(180deg, #f9fbfa 0%, #f1f5f3 100%);
}
#game-view.era-tieba {
  background:
    linear-gradient(90deg, #dcebf91c 0 28px, transparent 28px calc(100% - 28px), #dcebf91c calc(100% - 28px) 100%),
    linear-gradient(180deg, #f8fbff 0%, #f1f7fd 100%);
}
#game-view.era-wechat::before,
#game-view.era-tieba::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity .32s ease, background .32s ease;
}
/* 微信：只在两侧留下很淡的“消息气泡”轮廓，不再塞进一整幅山水聊天插画。 */
#game-view.era-wechat::before {
  background:
    radial-gradient(ellipse 90px 54px at 7% 35%, transparent 0 61%, #07c16013 62% 65%, transparent 66%),
    radial-gradient(ellipse 76px 46px at 94% 55%, transparent 0 61%, #07c16011 62% 65%, transparent 66%),
    radial-gradient(ellipse 62px 39px at 12% 80%, transparent 0 61%, #07c1600e 62% 65%, transparent 66%);
}
/* 贴吧：只保留旧网页的细蓝边和少量楼层分隔线，中央不铺论坛截图。 */
#game-view.era-tieba::before {
  background:
    linear-gradient(#4b8dc822, #4b8dc822) 0 0 / 100% 2px no-repeat,
    linear-gradient(#4b8dc811, #4b8dc811) 0 calc(100% - 1px) / 100% 1px no-repeat,
    repeating-linear-gradient(180deg, transparent 0 48px, #4b8dc70c 48px 49px) 0 16px / 24px calc(100% - 32px) no-repeat,
    repeating-linear-gradient(180deg, transparent 0 48px, #4b8dc70c 48px 49px) 100% 16px / 24px calc(100% - 32px) no-repeat;
}
/* 只把真正的牌桌内容抬到时代背景上方。
   提示条、负面效果等 fixed 浮层不能被这里改成 relative，
   否则 50% 会相对网格位移，掉到手牌下方。 */
#game-view.era-wechat > .players,
#game-view.era-wechat > .action-panel,
#game-view.era-tieba > .players,
#game-view.era-tieba > .action-panel {
  position: relative;
  z-index: 1;
}

/* 时空切换不是换一层底图：浏览器先各拍一帧完整牌桌，旧画面被卷碎，
   新画面再从不规则裂缝里重组。碎片仅复用两套时代纹理，真实角色、卡牌和顶栏
   都来自 View Transition 的完整快照，因此不会出现“背景先换好”的假切换。 */
.era-shift {
  --era-edge: #43a66d;
  --era-glow: #a7ffd0;
  --era-ink: #1c5f39;
  --era-texture: url("assets/generated/era-wechat-chat-texture-v3.webp");
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.era-shift::before,
.era-shift::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.era-shift::before {
  z-index: 1;
  top: calc(50% - 3px);
  left: 0;
  width: 100%;
  height: 7px;
  background: linear-gradient(90deg, transparent 0 2%, var(--era-edge) 8%, transparent 13%, var(--era-glow) 20%, var(--era-edge) 29%, transparent 39%, var(--era-edge) 49%, var(--era-glow) 62%, transparent 74%, var(--era-edge) 89%, transparent 100%);
  clip-path: polygon(0 48%, 8% 0, 19% 72%, 29% 18%, 39% 100%, 51% 13%, 64% 82%, 76% 4%, 89% 71%, 100% 42%, 100% 62%, 89% 100%, 76% 30%, 64% 96%, 51% 26%, 39% 85%, 29% 0, 19% 84%, 8% 23%, 0 68%);
  box-shadow: 0 -16px 24px -15px var(--era-glow), 0 16px 24px -15px var(--era-glow);
  filter: drop-shadow(0 0 6px var(--era-edge));
  transform-origin: 50% 50%;
}
.era-shift::after {
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(112vw, 1320px);
  height: min(66vh, 420px);
  background:
    linear-gradient(90deg, transparent 0 6%, color-mix(in srgb, var(--era-glow) 24%, transparent) 24%, transparent 43%, color-mix(in srgb, var(--era-glow) 22%, transparent) 61%, transparent 83%),
    repeating-linear-gradient(0deg, transparent 0 7px, color-mix(in srgb, var(--era-edge) 17%, transparent) 8px 9px);
  transform: translate(-50%, -50%) scaleX(.04) scaleY(.22);
  filter: blur(1px);
}
.era-shift-warp {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.era-shift-warp i {
  --x: 0vw;
  --y: 0vh;
  --r: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 18vw;
  height: 26px;
  border: 1px solid color-mix(in srgb, var(--era-glow) 76%, white);
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--era-edge) 45%, transparent), transparent 34%, color-mix(in srgb, var(--era-glow) 56%, transparent)), var(--era-texture);
  background-position: center;
  background-size: auto, cover;
  box-shadow: 0 0 12px color-mix(in srgb, var(--era-edge) 55%, transparent);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.15);
}
.era-shift-warp i:nth-child(1) { --x: -48vw; --y: -31vh; --r: -19deg; width: 22vw; height: 21px; }
.era-shift-warp i:nth-child(2) { --x: -32vw; --y: 36vh; --r: 14deg; width: 15vw; height: 42px; }
.era-shift-warp i:nth-child(3) { --x: -16vw; --y: -43vh; --r: 26deg; width: 9vw; height: 33px; }
.era-shift-warp i:nth-child(4) { --x: 11vw; --y: 41vh; --r: -24deg; width: 14vw; height: 23px; }
.era-shift-warp i:nth-child(5) { --x: 29vw; --y: -36vh; --r: 17deg; width: 20vw; height: 38px; }
.era-shift-warp i:nth-child(6) { --x: 52vw; --y: 24vh; --r: -12deg; width: 19vw; height: 20px; }
.era-shift-warp i:nth-child(7) { --x: -56vw; --y: 7vh; --r: 9deg; width: 12vw; height: 49px; }
.era-shift-warp i:nth-child(8) { --x: 57vw; --y: -8vh; --r: -7deg; width: 12vw; height: 54px; }
.era-shift-warp i:nth-child(9) { --x: -6vw; --y: -35vh; --r: -34deg; width: 13vw; height: 18px; }
.era-shift-warp i:nth-child(10) { --x: 5vw; --y: 37vh; --r: 31deg; width: 17vw; height: 17px; }
.era-shift-warp i:nth-child(11) { --x: 40vw; --y: 37vh; --r: 37deg; width: 11vw; height: 30px; }
.era-shift-copy {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 8px 20px;
  color: var(--era-ink);
  text-align: center;
  text-shadow: 0 1px 0 #ffffffdd, 0 0 14px #ffffffb8;
}
.era-shift-copy span {
  position: relative;
  color: color-mix(in srgb, var(--era-ink) 72%, var(--era-edge));
  font: 900 10px/1 "PingFang SC", sans-serif;
  letter-spacing: .16em;
}
.era-shift-copy strong {
  position: relative;
  color: var(--era-ink);
  font: 1000 clamp(17px, 2.8vw, 26px)/1.1 "PingFang SC", sans-serif;
  text-align: center;
}
#era-shift[data-target-era="tieba"] {
  --era-edge: #4a82bc;
  --era-glow: #b7d9ff;
  --era-ink: #244f7f;
  --era-texture: url("assets/generated/era-tieba-forum-texture-v3.webp");
}
.era-shift.is-active { animation: eraWarpStage 7s linear both; }
.era-shift.is-active::before { animation: eraWarpSeam 7s cubic-bezier(.18,.72,.18,1) both; }
.era-shift.is-active::after { animation: eraWarpField 7s ease-out both; }
.era-shift.is-active .era-shift-copy { animation: eraWarpCopy 7s ease both; }
.era-shift.is-active .era-shift-warp i { animation: eraWarpShard 7s cubic-bezier(.15,.76,.21,1) both; }
.era-shift.is-active .era-shift-warp i:nth-child(2n) { animation-delay: .035s; }
.era-shift.is-active .era-shift-warp i:nth-child(3n) { animation-delay: .075s; }
@keyframes eraWarpStage {
  0%, 7% { opacity: 0; }
  13%, 84% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes eraWarpSeam {
  0% { opacity: 0; transform: scaleX(.05) scaleY(.3); }
  16% { opacity: .96; transform: scaleX(.44) scaleY(2.1); }
  34%, 61% { opacity: 1; transform: scaleX(1.12) scaleY(1.3); }
  76% { opacity: .78; transform: scaleX(1.04) scaleY(.76); }
  100% { opacity: 0; transform: scaleX(1.16) scaleY(.18); }
}
@keyframes eraWarpField {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.04) scaleY(.18); }
  22% { opacity: .85; transform: translate(-50%, -50%) scaleX(.5) scaleY(.38); }
  42% { opacity: .78; transform: translate(-50%, -50%) scaleX(.76) scaleY(.66); }
  70% { opacity: .34; transform: translate(-50%, -50%) scaleX(1.03) scaleY(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.24) scaleY(1.2); }
}
@keyframes eraWarpCopy {
  0%, 22% { opacity: 0; transform: translateY(9px) scale(.88); filter: blur(5px); }
  30%, 76% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  88%, 100% { opacity: 0; transform: translateY(-5px) scale(.96); filter: blur(2px); }
}
@keyframes eraWarpShard {
  0%, 15% { opacity: 0; transform: translate(-50%, -50%) scale(.12) rotate(0); }
  31% { opacity: .9; transform: translate(-50%, -50%) scale(.68) rotate(var(--r)); }
  72% { opacity: .72; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(var(--r)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.13) rotate(var(--r)); }
}

/* 两张都是完整牌桌快照。新快照以锯齿裂缝出现并逐段撑满全屏，
   旧快照则被抽走、失真、淡出；两者有真正的交叠，不会“先换好再盖一层”。 */
::view-transition-group(root) {
  animation-duration: 7s;
  animation-timing-function: cubic-bezier(.18,.76,.2,1);
}
::view-transition-image-pair(root) { isolation: isolate; }
::view-transition-old(root) {
  z-index: 1;
  animation: eraOldTimeShatter 7s cubic-bezier(.18,.76,.2,1) both;
  transform-origin: 50% 50%;
}
::view-transition-new(root) {
  z-index: 2;
  animation: eraNewTimeRebuild 7s cubic-bezier(.18,.76,.2,1) both;
  transform-origin: 50% 50%;
}
@keyframes eraOldTimeShatter {
  0% { opacity: 1; filter: none; transform: scale(1); clip-path: inset(0); }
  28% { opacity: .96; filter: saturate(.5) contrast(1.18) blur(.45px); transform: scale(.992) skewX(-.55deg); }
  66% { opacity: .6; filter: saturate(.2) contrast(1.36) blur(1.3px); transform: scale(.978) skewX(.8deg) translateX(-7px); }
  100% { opacity: 0; filter: saturate(.08) contrast(1.45) blur(3px); transform: scale(.95) skewX(-1deg) translateX(-22px); }
}
@keyframes eraNewTimeRebuild {
  0% { opacity: 1; clip-path: polygon(0 48%, 11% 45%, 23% 51%, 36% 46%, 50% 53%, 64% 45%, 78% 51%, 90% 46%, 100% 50%, 100% 53%, 90% 57%, 78% 49%, 64% 56%, 50% 48%, 36% 55%, 23% 48%, 11% 54%, 0 52%); filter: saturate(1.65) contrast(1.3) hue-rotate(17deg) blur(1.8px); transform: scale(1.025); }
  28% { clip-path: polygon(0 43%, 11% 38%, 23% 52%, 36% 40%, 50% 57%, 64% 38%, 78% 52%, 90% 40%, 100% 45%, 100% 57%, 90% 63%, 78% 49%, 64% 62%, 50% 46%, 36% 61%, 23% 48%, 11% 63%, 0 56%); filter: saturate(1.45) contrast(1.18) hue-rotate(10deg) blur(.7px); }
  70% { clip-path: polygon(0 18%, 11% 14%, 23% 25%, 36% 16%, 50% 23%, 64% 15%, 78% 25%, 90% 16%, 100% 21%, 100% 79%, 90% 84%, 78% 75%, 64% 86%, 50% 78%, 36% 84%, 23% 75%, 11% 86%, 0 82%); filter: saturate(1.13) contrast(1.05) hue-rotate(2deg); transform: scale(1.008); }
  100% { opacity: 1; clip-path: inset(0); filter: none; transform: scale(1); }
}

/* 微信里是气泡和柔和圆角；贴吧里是窄边框、楼层标签和早期网页的细虚线。 */
#game-view.era-wechat .player-seat { background: #f9fffbdc; border-color: #75bd92; box-shadow: 3px 4px 0 #2a765525; }
#game-view.era-wechat .player-seat::after { border-color: #43a66d; }
#game-view.era-wechat .turn-table-card { background: #f7fffaed; border-color: #58a97a; box-shadow: 4px 5px 0 #2b76552b; }
#game-view.era-wechat .turn-table-kind { background: #43a66d; }
#game-view.era-wechat .table-drop-hint { border-color: #79bd98; background: #effff5d6; color: #317a4f; }

#game-view.era-tieba .player-seat {
  border-color: #5d89b7;
  border-radius: 2px;
  background: #f4f9ffdf;
  box-shadow: 2px 3px 0 #315d8b36;
}
#game-view.era-tieba .player-seat::after { border: 1px dashed #8fb0cf; border-radius: 0; }
#game-view.era-tieba .player-seat .player-info span::before { content: ""; }
#game-view.era-tieba .turn-table-card {
  border-color: #5f8dbc;
  border-radius: 2px;
  background: repeating-linear-gradient(0deg, #ffffffcc 0 18px, #e7f0fa88 18px 19px), #f5faff;
  box-shadow: 2px 3px 0 #315d8b32;
}
#game-view.era-tieba .turn-table-kind { border-radius: 1px; background: #4c83bc; }
#game-view.era-tieba .table-drop-hint { border: 1px dashed #6e96c0; border-radius: 2px; background: #eef6ffdc; color: #315e8d; }
#game-view.era-tieba .card-detail { color: #315e8d; }

@media (max-width: 720px) {
  .player-seat.table-opponent-left, .player-seat.table-opponent-right { top: 18px; }
  .era-shift-copy { padding: 8px 14px; }.era-shift-copy strong { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  /* 仍保留可读时长；只降低位移和碎片效果，避免文字一闪而过。 */
  .era-shift.is-active { animation-duration: 7s; }
  .era-shift.is-active::before,
  .era-shift.is-active::after,
  .era-shift.is-active .era-shift-copy,
  .era-shift.is-active .era-shift-warp i { animation-duration: 7s; }
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 7s; }
}

/*
  双时空不该只是“同一张牌桌换背景”。下面把导航、角色资料、手牌和落桌牌
  一起改成各自年代的产品语言：现在是群聊里的消息气泡；2011 是吧内的楼层回帖。
  中央交锋区不放额外常驻说明，仍只服务于当前这次出牌。
*/
body.era-wechat-ui {
  background: #edf0ee;
}
body.era-tieba-ui {
  background: #dbe8f5;
}
body.era-wechat-ui .app-shell:has(#game-view:not(.hidden)),
body.era-tieba-ui .app-shell:has(#game-view:not(.hidden)) {
  width: min(100%, 1180px);
  min-height: 100dvh;
  padding-inline: clamp(10px, 2.3vw, 28px);
  box-shadow: 0 0 44px #26373b20;
}

/* 现在：微信群。顶部像聊天 App 导航，卡牌像可拖走的一条消息。 */
body.era-wechat-ui .app-shell:has(#game-view:not(.hidden)) {
  --era-main: #07c160;
  --era-soft: #e8f8ed;
  background: #f4f7f5;
}
body.era-wechat-ui .masthead {
  min-height: 58px;
  padding: 0 13px;
  border-bottom: 1px solid #dadfdb;
  background: #f8faf9;
  box-shadow: 0 1px 0 #ffffff;
}
body.era-wechat-ui .brand { align-items: center; gap: 9px; }
body.era-wechat-ui .brand-kicker {
  order: 2;
  margin: 0;
  padding: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  transform: none;
}
body.era-wechat-ui .brand-kicker::after {
  content: "3 人群聊中";
  color: #8a928d;
  font: 700 11px/1 "PingFang SC", sans-serif;
}
body.era-wechat-ui .masthead h1 {
  color: var(--pink);
  font: 900 30px/1 "Kaiti SC", "STKaiti", serif;
  letter-spacing: -.06em;
  text-shadow: 2px 2px 0 var(--yellow);
  transform: none;
}
body.era-wechat-ui .masthead h1 span { margin-left: 1px; color: inherit; }
body.era-wechat-ui .masthead h1::after { display: none; }
body.era-wechat-ui .help-button {
  min-width: 62px;
  padding: 6px 9px;
  border: 1px solid #d5dad7;
  border-radius: 5px;
  background: #fff;
  color: #5e6762;
  font: 700 12px/1 "PingFang SC", sans-serif;
  text-decoration: none;
}
#game-view.era-wechat .players::before {
  background: radial-gradient(ellipse, #07c1600e 0 18%, transparent 67%);
}
#game-view.era-wechat .player-seat {
  border: 0;
  border-radius: 18px 18px 18px 5px;
  background: #fff;
  box-shadow: 0 2px 7px #2850391c;
}
#game-view.era-wechat .player-seat.table-opponent-right {
  border-radius: 18px 18px 5px 18px;
}
#game-view.era-wechat .player-seat.table-self {
  border-radius: 16px 16px 16px 5px;
  background: #f0fff5;
}
#game-view.era-wechat .player-seat.is-turn {
  box-shadow: 0 0 0 3px #baf0ce, 0 4px 12px #079a4a2b;
}
#game-view.era-wechat .player-seat.drop-ready {
  background: #e5ffec;
  box-shadow: 0 0 0 5px #91e8b4, 0 5px 15px #079a4a38 !important;
}
#game-view.era-wechat .player-seat .avatar {
  filter: drop-shadow(0 2px 2px #234a301f);
}
#game-view.era-wechat .player-info strong { color: #202522; font-family: "PingFang SC", sans-serif; }
#game-view.era-wechat .player-info span { color: #8b938e; }
#game-view.era-wechat .player-info .forum-status-mark { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 15px; padding: 2px 5px; border: 1px solid #75bd92; border-radius: 10px; background: #effcf3; box-shadow: 0 1px 0 #32714d1e; color: #28734a; font: 800 8px/1 "PingFang SC", sans-serif; white-space: nowrap; }
#game-view.era-wechat .ai-badge { border-radius: 10px; background: #48b87a; }
#game-view.era-wechat .turn-pin {
  right: 8px;
  top: -8px;
  padding: 4px 8px;
  border: 0;
  border-radius: 12px;
  background: #515752;
  box-shadow: 0 1px 3px #27342c38;
  font-family: "PingFang SC", sans-serif;
  transform: none;
}
#game-view.era-wechat .player-seat.is-turn .turn-pin { border: 0; background: #07c160; color: #fff; }
#game-view.era-wechat .table-drop-hint {
  border: 1px dashed #9bdcaf;
  border-radius: 14px;
  background: #f5fff8e8;
  box-shadow: none;
  color: #3d9b62;
  font-family: "PingFang SC", sans-serif;
}
#game-view.era-wechat .turn-table-card {
  border: 0;
  border-radius: 16px 16px 16px 4px;
  background: #fff;
  box-shadow: 0 3px 10px #1c573328;
}
#game-view.era-wechat .turn-table-card:nth-child(even) { border-radius: 16px 16px 4px 16px; background: #d9f8df; }
#game-view.era-wechat .turn-table-kind { border: 0; border-radius: 9px; background: #07c160; transform: none; }
#game-view.era-wechat .turn-table-flow { color: #84918a; }
#game-view.era-wechat .turn-table-flow i { color: #07a653; }
#game-view.era-wechat .action-panel {
  /* 手牌只是浮在当前时空地图上的可操作物，不再额外切一块“底部输入框”。 */
  border-top: 0;
  background: transparent;
}
#game-view.era-wechat .hand::before {
  content: none;
}
#game-view.era-wechat .card {
  border: 1px solid #d9e5dc;
  border-radius: 12px 12px 12px 4px;
  background: linear-gradient(145deg, #fff 0 73%, #e7f9ec 100%);
  box-shadow: 0 2px 6px #224c301f;
}
/* 顶部的出牌语法（点名、全体、↩回应）已承担信息职责；
   不再叠加“消息”这个装饰标签，避免和 ↩ 等图标挤在左上角。 */
#game-view.era-wechat .card::before { content: none; }
#game-view.era-wechat .card.usable:hover,
#game-view.era-wechat .card.usable:focus-visible {
  box-shadow: 0 0 0 3px #9ae8b8, 0 7px 14px #056f3424;
}

/* 2011：贴吧。顶栏、楼层、纸页和“回复”标签全部回到旧网页的秩序。 */
body.era-tieba-ui .app-shell:has(#game-view:not(.hidden)) {
  --era-main: #397fbd;
  --era-soft: #eef6ff;
  background: #f3f7fb;
}
body.era-tieba-ui .masthead {
  min-height: 54px;
  padding: 0 14px;
  border: 1px solid #276da9;
  border-bottom: 3px solid #1f66a4;
  background: linear-gradient(#5c9ed6, #347dbd);
  box-shadow: inset 0 1px #b9ddf7, 0 2px 4px #265c8e38;
}
body.era-tieba-ui .brand { align-items: center; gap: 10px; }
body.era-tieba-ui .brand-kicker {
  order: 2;
  margin: 0;
  padding: 2px 5px;
  border: 1px solid #c7e5ff88;
  background: #1f67a5;
  color: #eaf6ff;
  font: 700 10px/1 "Microsoft YaHei", "PingFang SC", sans-serif;
  letter-spacing: 0;
  transform: none;
}
body.era-tieba-ui .masthead h1 {
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
  transform: none;
}
body.era-tieba-ui .masthead h1::before {
  content: "你先别急";
  color: var(--pink);
  font: 900 30px/1 "Kaiti SC", "STKaiti", serif;
  letter-spacing: -.06em;
  text-shadow: 2px 2px 0 var(--yellow);
}
body.era-tieba-ui .masthead h1::after { display: none; }
body.era-tieba-ui .help-button {
  padding: 5px 8px;
  border: 1px solid #1f659e;
  border-radius: 2px;
  background: linear-gradient(#fff, #e8f1fb);
  color: #275e92;
  box-shadow: inset 0 1px #fff;
  font: 700 11px/1 "Microsoft YaHei", "PingFang SC", sans-serif;
  text-decoration: none;
}
#game-view.era-tieba .players::before {
  background: radial-gradient(ellipse, #4186c013 0 20%, transparent 69%);
}
#game-view.era-tieba .player-seat {
  overflow: visible;
  border: 1px solid #a9c4df;
  border-radius: 1px;
  background: linear-gradient(90deg, #e5f0fc 0 7px, #fbfdff 7px 100%);
  box-shadow: 0 1px 2px #355f871c;
}
#game-view.era-tieba .player-seat.table-self { background: linear-gradient(90deg, #d7ebff 0 7px, #f9fcff 7px 100%); }
#game-view.era-tieba .player-seat::before {
  content: attr(data-floor);
  position: absolute;
  right: 5px;
  bottom: 4px;
  color: #91a8c0;
  font: 700 9px/1 "Microsoft YaHei", "PingFang SC", sans-serif;
}
#game-view.era-tieba .player-seat.is-turn {
  border-color: #4f91ca;
  box-shadow: 0 0 0 2px #c6e3fb, 0 2px 5px #276da938;
}
#game-view.era-tieba .player-seat.drop-ready {
  border-color: #347eb9;
  background: linear-gradient(90deg, #d1eaff 0 7px, #eff8ff 7px 100%);
  box-shadow: 0 0 0 4px #b6daf8, 0 4px 9px #28659b2b !important;
}
#game-view.era-tieba .player-seat .avatar { filter: drop-shadow(0 1px 1px #32577726); }
#game-view.era-tieba .player-info strong { color: #255d90; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
#game-view.era-tieba .player-info span { color: #879db4; }
#game-view.era-tieba .player-info span::before { content: none; }
#game-view.era-tieba .player-info .forum-status-mark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 15px;
  padding: 1px 4px;
  border: 1px solid #8eafcd;
  border-radius: 1px;
  background: linear-gradient(#f8fcff, #dfedf9);
  box-shadow: inset 0 1px #fff;
  color: #356f9e;
  font: 700 8px/1 "Microsoft YaHei", "PingFang SC", sans-serif;
  letter-spacing: -.1px;
  white-space: nowrap;
}
#game-view.era-tieba .player-info .forum-status-mark + .forum-status-mark { margin-left: -2px; }
#game-view.era-tieba .ai-badge { border-radius: 1px; background: #6595c2; }
#game-view.era-tieba .turn-pin {
  right: 6px;
  top: -9px;
  padding: 3px 6px;
  border: 1px solid #3272ab;
  border-radius: 1px;
  background: #eaf4ff;
  box-shadow: none;
  color: #27679f;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  transform: none;
}
#game-view.era-tieba .player-seat.is-turn .turn-pin { border-color: #286faa; background: #4d8fc7; color: #fff; }
#game-view.era-tieba .table-drop-hint {
  border: 1px dashed #83a9cc;
  border-radius: 1px;
  background: #f8fcffea;
  box-shadow: inset 0 0 0 3px #edf6ff;
  color: #4c7ba4;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
#game-view.era-tieba .turn-table-card {
  position: relative;
  overflow: visible;
  border: 1px solid #9bbcd9;
  border-radius: 1px;
  background: repeating-linear-gradient(0deg, #fff 0 20px, #f1f7fd 20px 21px);
  box-shadow: 2px 2px 0 #a4c5e044;
}
#game-view.era-tieba .turn-table-card::before {
  content: "回复";
  position: absolute;
  right: -1px;
  top: -17px;
  padding: 3px 7px;
  border: 1px solid #5790c1;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  background: #edf6ff;
  color: #3775ad;
  font: 700 8px/1 "Microsoft YaHei", "PingFang SC", sans-serif;
}
#game-view.era-tieba .turn-table-kind { border-radius: 1px; background: #4c86bd; transform: none; }
#game-view.era-tieba .turn-table-flow { color: #7b96b1; }
#game-view.era-tieba .turn-table-flow i { color: #3179b5; }
#game-view.era-tieba .action-panel {
  /* 和微信群一致：底部沿用整张地图，而不是再叠一层论坛回帖区底板。 */
  border-top: 0;
  background: transparent;
}
#game-view.era-tieba .hand::before {
  content: none;
}
#game-view.era-tieba .card {
  border: 1px solid #8daece;
  border-radius: 1px;
  background: repeating-linear-gradient(0deg, #fff 0 17px, #edf5fd 17px 18px);
  box-shadow: 2px 2px 0 #3b75a11f;
}
#game-view.era-tieba .card::before { content: none; }
#game-view.era-tieba .card.usable:hover,
#game-view.era-tieba .card.usable:focus-visible {
  box-shadow: 0 0 0 3px #b9dcf9, 3px 7px 0 #4e81ab25;
}

@media (max-width: 720px) {
  body.era-wechat-ui .masthead, body.era-tieba-ui .masthead { min-height: 48px; padding-inline: 10px; }
  body.era-wechat-ui .masthead h1 { font-size: 24px; }
  body.era-tieba-ui .masthead h1::before { font-size: 24px; }
  body.era-wechat-ui .brand-kicker::after { font-size: 9px; }
  body.era-tieba-ui .brand-kicker { font-size: 8px; }
  body.era-wechat-ui .help-button, body.era-tieba-ui .help-button { min-width: 0; padding: 5px 6px; font-size: 10px; }
  #game-view.era-wechat .turn-table-card::before,
  #game-view.era-tieba .turn-table-card::before { font-size: 7px; }
  #game-view.era-tieba .turn-table-card::before { top: -15px; }
  #game-view.era-wechat .hand::before, #game-view.era-tieba .hand::before { left: 4px; bottom: 6px; font-size: 8px; }
  #game-view.era-tieba .player-info .forum-status-mark { min-height: 13px; padding: 1px 3px; font-size: 7px; }
}

/* 最终覆盖：中央战报完整展示优先于旧布局的紧凑高度。 */
@media (min-width: 721px) {
  #game-view .table-center { min-height: 310px; }
  #game-view .pending-card { min-height: 280px; max-height: none; }
  #game-view .turn-table-stack { max-height: min(62vh, 540px); }
}
@media (max-width: 720px) {
  #game-view .table-center { top: 92px; }
  #game-view .pending-card { min-height: 220px; max-height: none; }
  #game-view .turn-table-stack { max-height: calc(100dvh - clamp(208px, 31dvh, 238px) - 108px); }
}