/* 游戏场景层：席位、牌组与桌面舞台；保留基础控件的可访问性。 */
.game-icon { display: inline-block; width: 24px; height: 24px; vertical-align: middle; flex: 0 0 auto; }
.icon-button { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 13px; background: #172133; color: #a9bddc; }
button { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
button[data-busy] { opacity: .7; }
button[data-busy]::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spinner .6s linear infinite; }
#app { max-width: 1200px; }
.room-head { padding: 12px 6px 14px; }
.room-head > .btn-sm { border-color: transparent; color: #9baecb; }
.room-head > .btn-sm:hover { color: var(--gold2); background: #202b40; }
#rules-banner { max-width: 100%; margin-bottom: 14px; background: #141e30; border-color: #2d3d57; }
.lobby-scene { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.lobby-table { position: relative; isolation: isolate; overflow: hidden; padding: 28px; border: 1px solid #344565; border-radius: 26px; background: radial-gradient(ellipse at 50% 40%, #25345180, transparent 70%), linear-gradient(140deg, #18233a, #111a2b); box-shadow: 0 20px 65px #0003, inset 0 1px 0 #ffffff0a; }
.table-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.table-heading h2 { margin: 6px 0 0; font-size: clamp(21px, 2.5vw, 28px); color: #eef1f8; }
.party-count { display: flex; align-items: center; gap: 7px; background: #0c1525; padding: 10px 12px; border: 1px solid #30415f; border-radius: 13px; color: #e0bc76; font-size: 21px; flex-shrink: 0; }
.party-count .game-icon { width: 18px; color: #8aa3c6; }
.party-count small { font-size: 12px; color: #788dab; }
.table-art { position: relative; display: flex; justify-content: center; align-items: center; height: 176px; margin: 8px 0 16px; }
.table-art::before { content: ''; position: absolute; width: 300px; height: 100px; border: 1px solid #59728e33; border-radius: 50%; transform: perspective(300px) rotateX(30deg); box-shadow: 0 0 0 16px #2b3f581f, 0 0 0 32px #2b3f5814; }
.mystery-card { display: grid; place-items: center; position: relative; width: 88px; height: 120px; border: 1px solid #938459; border-radius: 14px; background: linear-gradient(145deg, #28364b, #0f192c); color: #e7c980; font: 700 42px Georgia, serif; box-shadow: 0 16px 30px #0005; }
.mystery-card::after { content: ''; position: absolute; inset: 7px; border: 1px solid #c8a45c40; border-radius: 9px; }
.main-card { transform: translateY(-10px); z-index: 2; border-color: #e5c57d; box-shadow: 0 16px 40px #0004, 0 0 45px #b8924720; background: radial-gradient(ellipse at 50% 45%, #67522b55, transparent), linear-gradient(135deg, #31405b, #131e32); }
.side-card:first-child { transform: rotate(-18deg) translate(10px, 8px); font-size: 25px; opacity: .6; }
.side-card:last-child { transform: rotate(18deg) translate(-10px, 8px); font-size: 25px; opacity: .6; }
.seat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; position: relative; }
.player-seat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 19px 8px 15px; border: 1px solid #3a4b6a; border-radius: 18px; background: linear-gradient(145deg, #21314c, #182238); min-width: 0; }
.player-seat > b { color: #e6edf8; width: 100%; text-align: center; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-seat.self-seat { border-color: #aa8a50; background: linear-gradient(135deg, #41392a80, #222d41); }
.seat-avatar { width: 68px; height: 68px; border: 0; border-radius: 22px; box-shadow: 0 8px 20px #0003; }
.seat-status { display: flex; align-items: center; gap: 5px; color: #8396b3; font-size: 11px; }
.seat-status .status-dot { width: 5px; height: 5px; }
.seat-crown { position: absolute; top: -12px; padding: 2px 7px; background: #685232; color: #ffdc85; border: 1px solid #b09459; border-radius: 8px; z-index: 1; }
.seat-crown .game-icon { width: 17px; height: 17px; }
.empty-seat { border: 1px dashed #3a4b66; background: #0d162433; }
.empty-seat > b { color: #637797; font-size: 12px; font-weight: 500; }
.empty-seat small { color: #4d6587; font-size: 10px; }
.empty-sigil { display: grid; place-items: center; width: 68px; height: 68px; border: 1px dashed #435878; border-radius: 23px; font-size: 26px; font-weight: 300; color: #7488a7; }
.empty-seat:hover { transform: translateY(-5px); border-color: #b08d49; background: #34342933; }
.empty-seat:hover .empty-sigil { color: #d2b171; border-color: #8d7a55; }
.offline-seat { opacity: .55; }
.seat-remove { position: absolute; top: 5px; right: 5px; min-height: 28px; width: 28px; padding: 0; border: 0; background: #27283b; color: #f5989f; }
.seat-remove .game-icon { width: 15px; }
.lobby-deck { padding: 22px; border: 1px solid #354565; border-radius: 24px; background: linear-gradient(145deg, #202a3f, #151e30); box-shadow: 0 15px 60px #0002; }
.deck-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.deck-heading h3 { margin: 5px 0 0; font-size: 19px; }
.deck-heading .eyebrow { font-size: 10px; letter-spacing: 1.7px; }
.rule-token-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rule-token { display: flex; align-items: center; gap: 10px; padding: 14px 10px; border: 1px solid #364763; border-radius: 14px; background: #111c2d; min-width: 0; }
.rule-token > .game-icon { width: 20px; color: #b69a60; }
.rule-token > span { font-size: 10px; color: #6f87ab; }
.rule-token b { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: #d4dfed; }
.tempo-options { display: flex; gap: 5px; margin: 15px 0; padding: 4px; border: 1px solid #2e3e59; border-radius: 12px; background: #101b2c; }
.tempo-chip { min-height: 34px; flex: 1; padding: 5px 6px; font-size: 12px; background: transparent; border: 0; color: #7e94b8; border-radius: 8px; }
.tempo-chip.active { color: #e9d08e; background: #3b3730; box-shadow: inset 0 0 0 1px #8c7542; }
.hint-rule-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; margin-top: 16px; border: 1px solid #364962; border-radius: 14px; background: #111b2c; text-align: left; }
.hint-rule-card .rule-card-icon { display: grid; place-items: center; width: 38px; height: 43px; border: 1px solid #4e5866; border-radius: 8px; background: #242e3d; color: #7487a3; }
.hint-rule-card .rule-card-icon .game-icon { width: 22px; }
.hint-rule-card b { color: #b7c5db; font-size: 13px; display: block; }
.hint-rule-card small { color: #6981a5; font-size: 10px; display: block; margin-top: 3px; }
.hint-rule-card.enabled { border-color: #947b45; background: linear-gradient(135deg, #443a2770, #1a263a); }
.hint-rule-card.enabled .rule-card-icon { border-color: #b89954; background: #55482e; color: #ffe096; }
.hint-rule-card.enabled b { color: #efd797; }
.game-switch { position: relative; width: 35px; height: 20px; border-radius: 15px; margin-left: auto; border: 1px solid #42546e; background: #152035; }
.game-switch::before { content: ''; position: absolute; width: 12px; height: 12px; top: 3px; left: 3px; border-radius: 50%; background: #7186a5; transition: transform .2s ease, background .2s ease; }
.enabled .game-switch { background: #9b7b3a; border-color: #dab25f; }
.enabled .game-switch::before { transform: translateX(15px); background: #fff0be; }
.rule-status-gem { margin-left: auto; color: #cba25b; }
.action-preview { display: flex; align-items: center; justify-content: center; gap: 16px; padding-top: 23px; }
.action-preview > span { display: flex; align-items: center; flex-direction: column; gap: 6px; color: #8f9ab6; }
.action-preview small { font-size: 10px; }
.action-preview i { font-style: normal; color: #354863; }
.action-preview .game-icon { width: 20px; height: 20px; color: #7188ab; }
.lobby-launch { background: linear-gradient(180deg, #0b111ede, #080e19); }
.lobby-launch .inner { max-width: 480px; }
.lobby-launch #start { display: flex; align-items: center; gap: 14px; justify-content: center; height: 55px; background: linear-gradient(135deg, #f0d687, #c39443); box-shadow: 0 7px 28px #bc8a3729, inset 0 1px 0 #fff4bd; border-radius: 14px; }
.lobby-launch #start:disabled { background: #2a3448; color: #7387a9; box-shadow: none; border: 1px solid #465774; opacity: 1; }
.launch-arrow { margin-left: auto; }
.lobby-launch #start > .game-icon { margin-left: auto; }
.waiting-orbit { display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 14px; color: #849ec2; height: 45px; }
.orbit-dot { display: inline-block; width: 6px; height: 6px; background: #d9b468; border-radius: 50%; box-shadow: 0 0 0 4px #deb87112; animation: orbitPulse 1.7s ease-in-out infinite; }
.tuning-tile { position: relative; padding: 18px; border: 1px solid #405375; border-radius: 16px; background: #111c2e; }
.tuning-tile > .game-icon { color: #d4b16a; width: 25px; }
.tuning-tile > span { display: inline-block; margin-left: 10px; color: #b7c9df; font-size: 13px; }
.tuning-tile > div { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.tuning-tile input { margin: 0; font-size: 25px; padding: 12px; text-align: center; border-color: #475975; color: #f0dcaa; width: 100%; }
.tuning-tile small { flex-shrink: 0; color: #657d9e; }
.tuning-footnote { color: #7690b5; text-align: center; font-size: 12px; }
/* 弹窗标题统一纵向层级；不靠文本空格隔开中英文，也不叠加组件各自的 margin。 */
.sheet .head > div.grow { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.sheet .head > div.grow > * { margin: 0; max-width: 100%; }
.sheet .head > div.grow > .eyebrow { display: block; font-size: 10px; line-height: 1.3; letter-spacing: 1.7px; }
.sheet .head > div.grow > #sheet-title { display: block; line-height: 1.4; overflow-wrap: anywhere; }
.rules-story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rules-story article { position: relative; padding: 18px 10px; border: 1px solid #35496b; border-radius: 17px; text-align: center; background: #142035; }
.story-number { display: block; text-align: left; font-size: 10px; color: #7b92b2; }
.story-art { display: flex; align-items: center; justify-content: center; gap: 7px; height: 100px; }
.mini-mystery { display: grid; place-items: center; width: 38px; height: 53px; border: 1px solid #c4a362; border-radius: 7px; font: 700 25px Georgia, serif; color: #ffdb90; background: #313347; transform: rotate(-8deg); }
.story-art .game-icon { width: 28px; height: 28px; color: #d8b16a; }
.story-trophy .game-icon { width: 60px; height: 60px; }
.rules-story h3 { color: #dae4f4; font-size: 14px; }
.rules-story p { color: #8199bb; font-size: 11px; margin-bottom: 0; }
.rules-bottom { text-align: center; margin-top: 20px; color: #b8a173; font-size: 12px; }
.rules-details { margin-top: 18px; border-top: 1px solid #2d415f; padding: 15px 0 0; color: #7893b8; font-size: 12px; }
.rules-details summary { cursor: var(--game-cursor-action, pointer); width: max-content; margin: 0 auto; }
.hint-targets { display: flex; gap: 8px; flex-wrap: wrap; }
.hint-target { display: flex; align-items: center; gap: 8px; border: 1px solid #796942; background: #332d2355; padding: 8px 12px; border-radius: 13px; }
/* Keep the hit area stationary: moving on hover can drop edge clicks. */
.hint-target:hover:not(:disabled), .hint-target:active:not(:disabled) { transform: none; border-color: #edc46d; background: #44392199; }
.hint-target:active:not(:disabled) { box-shadow: inset 0 0 0 1px #edc46d55; }
.hint-target:focus-visible { outline: 2px solid #edc46d; outline-offset: 2px; }
.hint-target b { font-size: 13px; font-weight: 500; }
.hint-target > .game-icon { width: 15px; color: #ddb670; }
.hint-parcel { display: flex; align-items: center; justify-content: center; margin: 22px auto 5px; max-width: 300px; }
.parcel-path { display: flex; align-items: center; flex: 1; justify-content: center; padding: 0 10px; gap: 10px; }
.parcel-path i { border-top: 1px dashed #988457; height: 1px; width: 30%; }
.parcel-path b { display: grid; place-items: center; padding: 10px 8px; border: 1px solid #b99b57; border-radius: 10px; background: #3f382d; color: #eccf87; transform: rotate(9deg); }
.parcel-names { display: flex; justify-content: space-between; width: 300px; max-width: 100%; margin: 0 auto 15px; color: #94a9c9; font-size: 12px; padding: 0 4px; }
.hint-waiting { display: flex; gap: 12px; justify-content: center; align-items: center; padding: 12px; color: #a69572; font-size: 12px; }
.hint-card-head h2 { font-size: 22px; }
.hint-reveal { background: #4f422538; border: 1px solid #8d7543; border-left: 3px solid #d9b869; padding: 20px; }
.hint-reveal > .game-icon { color: #e3c078; }
.hint-reveal p { font-size: 18px; color: #e1d3b3; margin: 8px 0; }
#hint-send { display: flex; align-items: center; justify-content: center; gap: 10px; }
.action-choices button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 62px; }
.action-choices button .game-icon { color: #b5a279; width: 27px; height: 27px; }
.identity-preview { text-align: center; }
.profile-avatar { width: 80px; height: 80px; border-radius: 25px; border: 1px solid #ddbc724d; box-shadow: 0 7px 25px #0004; }
.identity-preview > span:last-child { display: block; font-size: 11px; margin-top: 9px; color: #929fc0; }
.avatar-section > div:first-child { min-width: 90px; }
.avatar-picker { grid-template-columns: repeat(4, 55px); gap: 9px; }
.avatar-choice { width: 55px; min-height: 55px; padding: 3px; border-radius: 17px; }
.avatar-choice .avatar-face { width: 46px; height: 46px; border-radius: 14px; }
.avatar-choice.selected::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #f0cd7a; border: 2px solid #29354a; bottom: -4px; right: -4px; }
.avatar-choice { position: relative; }
.board-avatar { width: 42px; height: 42px; }
.prow .hero-pav { width: 30px !important; height: 37px !important; border-radius: 5px !important; margin-left: -6px; border-color: #b19a6440; flex: 0 0 auto; }
@keyframes spinner { to { transform: rotate(360deg); } }
@keyframes orbitPulse { 50% { box-shadow: 0 0 0 8px #deb87108; opacity: .55; } }
@keyframes cardDeal { 0% { transform: translateX(-18px) rotate(-4deg); opacity: .1; } 60% { transform: translateX(6px) rotate(1deg); } 100% { transform: translateX(0); opacity: 1; } }
@keyframes cardFlip { from { opacity: 0; transform: perspective(600px) rotateX(-35deg) translateY(10px); } to { opacity: 1; transform: none; } }
.card-deal { animation: cardDeal .6s cubic-bezier(.2,.8,.2,1) both; }
.card-flip { animation: cardFlip .55s ease both; }
@media (prefers-reduced-motion: no-preference) {
  .table-art .main-card { animation: mysteryFloat 5s ease-in-out infinite; }
  .player-seat:not(.empty-seat) { animation: cardFlip .4s ease both; }
  @keyframes mysteryFloat { 50% { transform: translateY(-17px) rotate(2deg); } }
}
@media (min-width: 900px) {
  .sheet { background: #030813ba; backdrop-filter: blur(8px); }
  .sheet[data-kind="picker"] .panel { max-width: 960px; height: min(780px, calc(var(--viewport-height, 100dvh) - 70px)); }
  .sheet[data-kind="settings"] .panel { max-width: 580px; }
  .sheet[data-kind="rules"] .panel { max-width: 850px; }
  .home-title { padding-top: 16px; padding-bottom: 8px; }
  .home-title h1 { font-size: 42px; margin-top: 12px; }
  .home-title .brand-mark { margin-top: 12px; width: 42px; height: 42px; }
  .home-panel { margin-top: 12px; padding-top: 24px; }
}
@media (max-width: 950px) {
  .lobby-scene { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .lobby-deck { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .deck-heading { grid-column: 1/-1; margin-bottom: 0; }
  .rule-token-grid { grid-row: span 3; }
  .hint-rule-card { margin-top: 0; }
  .tempo-options { margin: 0; }
  .action-preview { padding-top: 0; }
}
@media (max-width: 560px) {
  .lobby-table { padding: 18px 14px; border-radius: 19px; }
  .table-heading h2 { font-size: 19px; }
  .table-heading .eyebrow { font-size: 9px; }
  .party-count { padding: 7px 8px; font-size: 17px; }
  .party-count .game-icon { display: none; }
  .seat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .table-art { height: 135px; margin-top: 0; margin-bottom: 10px; }
  .mystery-card { width: 63px; height: 86px; font-size: 32px; border-radius: 11px; }
  .table-art::before { width: 210px; height: 72px; }
  .player-seat { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 13px 7px; }
  .seat-avatar { width: 52px; height: 52px; border-radius: 16px; }
  .empty-sigil { width: 52px; height: 52px; border-radius: 16px; }
  .player-seat > b { width: 100%; font-size: 12px; }
  .empty-seat small { display: none; }
  .lobby-deck { padding: 18px 14px; border-radius: 18px; gap: 12px; }
  .rule-token-grid { gap: 8px; grid-row: auto; grid-column: 1/-1; grid-template-columns: repeat(4, 1fr); }
  .rule-token { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 10px 4px; }
  .rule-token b { font-size: 11px; }
  .hint-rule-card { grid-column: 1/-1; }
  .tempo-options { grid-column: 1/-1; }
  .action-preview { grid-column: 1/-1; }
  .home-title { padding: 18px 0 8px; }
  .home-title .brand-mark { margin-top: 12px; width: 36px; height: 36px; }
  .home-title h1 { font-size: 30px; margin: 15px 0 6px; }
  .home-panel { padding: 18px 16px; }
  .panel-heading { margin-bottom: 6px; }
  .panel-heading h2 { font-size: 18px; }
  .avatar-section { flex-direction: row; align-items: center; gap: 10px; padding-bottom: 13px; margin-bottom: 13px; }
  .profile-avatar { width: 64px; height: 64px; border-radius: 20px; }
  .avatar-section > div:first-child { min-width: 65px; }
  .avatar-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; flex: 1; max-width: 205px; }
  .avatar-choice { width: 100%; min-height: 42px; height: auto; aspect-ratio: 1; padding: 2px; border-radius: 12px; }
  .avatar-choice .avatar-face { width: 100%; height: 100%; border-radius: 10px; }
  .home-divider { margin: 18px 0 14px; }
  .rules-story { grid-template-columns: 1fr; }
  .rules-story article { text-align: left; padding: 14px; display: grid; grid-template-columns: 95px 1fr; align-items: center; gap: 0 12px; }
  .story-art { grid-row: span 3; grid-column: 1; height: 70px; }
  .story-number { grid-column: 2; }
  .rules-story h3 { margin: 6px 0 0; }
  .rules-story p { margin: 4px 0; }
  .story-art .avatar-face { width: 26px; height: 26px; }
  .story-art .game-icon { width: 22px; height: 22px; }
  .story-trophy .game-icon { width: 48px; height: 48px; }
  .story-actions { gap: 6px; }
  .action-choices button { gap: 7px; min-height: 54px; }
  .action-choices button .game-icon { width: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 数字参数采用牌面式 +/- 控件，隐藏浏览器原生 spinner。 */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.number-control { display: grid !important; grid-template-columns: 38px minmax(0, 1fr) 38px auto; align-items: center; gap: 6px; margin-top: 12px !important; }
.number-control input { min-width: 0; }
.nudge-button { display: grid; place-items: center; width: 38px; min-height: 44px; padding: 0; border: 1px solid #536986; border-radius: 11px; background: linear-gradient(145deg, #263753, #172338); color: #d8bb72; font-size: 22px; line-height: 1; box-shadow: inset 0 1px 0 #ffffff0b, 0 4px 12px #0002; }
.nudge-button:hover { border-color: #d6b66c; color: #ffe39b; background: linear-gradient(145deg, #3f4c64, #222e44); transform: translateY(-1px); }
.nudge-button:active { transform: translateY(1px) scale(.96); box-shadow: inset 0 2px 5px #0004; }
.number-control small { white-space: nowrap; }
.button-emblem { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: auto; border: 1px solid rgba(47,31,7,.35); border-radius: 10px; background: rgba(255,235,160,.18); color: #382708; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); transform: rotate(-5deg); transition: transform .18s ease, background .18s ease; }
.button-emblem .game-icon { width: 18px; height: 18px; }
.home-create:hover .button-emblem { transform: rotate(0) translateX(2px); background: rgba(255,244,190,.32); }
.home-create:active .button-emblem { transform: scale(.92) rotate(4deg); }
.lobby-launch #start .launch-arrow { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 0; background: transparent; opacity: .7; transition: transform .18s ease, opacity .18s ease; }
.lobby-launch #start .launch-arrow .game-icon { width: 22px; height: 22px; margin: 0; stroke-width: 2.2; }
.lobby-launch #start:not(:disabled):is(:hover, :focus-visible) .launch-arrow { opacity: 1; transform: translateX(3px); }
.lobby-launch #start:disabled .launch-arrow { opacity: .4; }
@media (prefers-reduced-motion: reduce) {
  .lobby-launch #start:not(:disabled):is(:hover, :focus-visible) .launch-arrow { transform: none; }
}
@media (max-width: 560px) {
  .number-control { grid-template-columns: 34px minmax(0, 1fr) 34px auto; gap: 5px; }
  .nudge-button { width: 34px; min-height: 40px; }
}

/* 内层输入只承载文本；键盘与鼠标焦点由外层金色光圈统一呈现。 */
.input-shell input,
.input-shell input:focus,
.input-shell input:focus-visible {
  flex: 1 1 0; min-width: 0; width: 100%;
  outline: none; border: 0; box-shadow: none; background: transparent;
}
.input-shell:focus-within { border-color: #e6c679; box-shadow: 0 0 0 3px #d5aa501a, inset 0 0 20px #d5aa500a; }
.avatar-change-button { position: relative; padding: 0; min-height: 0; border: 0; background: transparent; border-radius: 22px; }
.avatar-change-button:hover { transform: translateY(-3px) rotate(-3deg); filter: brightness(1.1); }
.avatar-change-button:focus-visible { outline: 2px solid #efcd81; outline-offset: 4px; }
.avatar-edit-sigil { position: absolute; display: grid; place-items: center; bottom: -4px; right: -4px; width: 23px; height: 23px; border: 1px solid #d5b56b; border-radius: 8px; background: #353347; color: #ffe08c; font-size: 15px; box-shadow: 0 3px 8px #0005; }
.avatar-sheet .avatar-stage { display: flex; align-items: center; flex-direction: column; gap: 12px; padding: 14px 0 25px; color: #859cc0; font-size: 12px; }
.avatar-stage-face { width: 100px; height: 100px; border-radius: 30px; border-color: #c6a45e; box-shadow: 0 0 40px #cdab5830; }
.team-avatar-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 auto 20px; max-width: 360px; }
.team-avatar-picker .avatar-choice { width: 100%; height: auto; aspect-ratio: 1; padding: 5px; }
.team-avatar-picker .avatar-face { width: 100%; height: 100%; }
.team-avatar-picker .avatar-choice.taken { filter: grayscale(1); opacity: .4; cursor: var(--game-cursor-disabled, not-allowed); }
.avatar-lock { position: absolute; bottom: 1px; right: 1px; display: grid; place-items: center; width: 20px; height: 20px; background: #111b2c; border: 1px solid #6c7690; border-radius: 7px; color: #b5c5de; }
@media (min-width: 900px) { .sheet[data-kind="avatars"] .panel { max-width: 470px; } }

/* 统一交互动效：展开内容保留 DOM，收起也有退场，不干扰输入和滚动。 */
:root { --motion-fast: 160ms; --motion-normal: 240ms; --motion-ease: cubic-bezier(.2,.8,.2,1); --disclosure-duration: 320ms; --disclosure-ease: cubic-bezier(.4,0,.2,1); }
.disclosure { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows var(--disclosure-duration) var(--disclosure-ease), opacity var(--disclosure-duration) var(--disclosure-ease), visibility 0s var(--disclosure-duration); }
.disclosure.is-open { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
.disclosure-inner { min-height: 0; overflow: hidden; }
.disclosure-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto; padding: 4px 8px; min-height: 36px; border: 0; background: transparent; color: inherit; font-size: inherit; }
.disclosure-label { display: block; line-height: 1.25; }
.disclosure-chevron { display: block; width: 14px; height: 14px; flex-shrink: 0; transform-origin: center; transition: transform var(--disclosure-duration) var(--disclosure-ease); }
.disclosure-toggle[aria-expanded="true"] .disclosure-chevron { transform: rotate(180deg); }
.sheet[data-closing] { pointer-events: auto; }
.sheet[data-closing] .panel { pointer-events: none; }
button, .chip, .game-switch, .action-card, .ccard { transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, opacity var(--motion-fast) ease, filter var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); }
.invite-destination { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; margin: 0 0 22px; padding: 14px 16px; border: 1px solid #b899514d; border-radius: 13px; background: #d4ac5010; color: #b7c5dc; font-size: 13px; }
.invite-destination strong { color: var(--gold2); font-size: 21px; letter-spacing: .14em; }
.invite-destination small { grid-column: 1 / -1; color: #8597b4; }
.invite-destination a { grid-column: 1 / -1; color: var(--gold2); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 推理桌面：细金色滚动条、暗色控件、固定情报与分组线索。 */
:root { color-scheme: dark; }
* { scrollbar-width: thin; scrollbar-color: #8a744b #101a2a; }
*::-webkit-scrollbar { width: 7px; height: 6px; }
*::-webkit-scrollbar-track { background: #101a2a; border-radius: 12px; }
*::-webkit-scrollbar-thumb { background: linear-gradient(#b69b62, #5b6680); border-radius: 12px; border: 1px solid #101a2a; }
*::-webkit-scrollbar-thumb:hover { background: #d6b675; }
input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"])), textarea, select { color: #e7edf8; background-color: #0e1729; border-color: #354866; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
input::placeholder, textarea::placeholder { color: #7389ab; opacity: 1; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 0; border-color: #dfbd72; box-shadow: 0 0 0 3px #d3ae5818, inset 0 0 22px #d3ae5808; }
select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d9bb76' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
select option { background: #162239; color: #e7edf8; }
.input-shell input, .input-shell input:focus-visible { background: transparent; border: 0; box-shadow: none; }
.in-game-head { position: sticky; top: 0; z-index: 24; min-height: 72px; margin-bottom: 10px; padding: 12px 10px; border-bottom: 1px solid #35466399; background: #0b1323ed; backdrop-filter: blur(18px); }
.room-turn-title { display: block; margin-top: 3px; color: #ebce8b; font-size: 18px; }
#phase-playing .turn-order { position: sticky; top: 72px; z-index: 22; background: #0b1323f2; backdrop-filter: blur(18px); }
.event-card { min-height: 0; padding: 20px 22px; }
.event-idle { padding: 18px 22px; }
.event-idle h2 { margin: 5px 0 8px; font-size: 23px; }
.event-idle p { margin: 0; }
.question-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; color: #ddc589; font-size: 12px; }
.question-toolbar > span { display: flex; align-items: center; gap: 6px; }
.question-toolbar .game-icon { width: 16px; height: 16px; }
.question-toolbar small { color: #7f94b3; font-size: 10px; }
.question-toolbar > div { display: flex; gap: 6px; }
.question-toolbar button { padding: 5px 8px; min-height: 30px; font-size: 11px; }
.quick-questions { flex-wrap: wrap; overflow: visible; gap: 6px; margin-bottom: 10px; }
.quick-questions .question-chip { padding: 7px 10px; min-height: 32px; border: 1px solid #43577a; border-radius: 10px; background: #17253b; color: #bbcde6; font-size: 12px; }
.question-chip:hover { border-color: #dab66c; background: #353426; color: #f1d796; transform: translateY(-2px); }
.question-library .head small { display: block; margin-top: 5px; font-size: 11px; }
.question-categories { display: flex; gap: 7px; overflow-x: auto; padding: 12px 18px; border-bottom: 1px solid #354765; flex-shrink: 0; }
.question-categories .chip { white-space: nowrap; font-size: 12px; padding: 6px 12px; }
.question-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.question-option { text-align: left; display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 13px; border: 1px solid #344d70; background: linear-gradient(135deg, #21334b, #141f33); }
.question-option small { display: block; margin-bottom: 4px; color: #809ec4; font-size: 10px; }
.question-option b { font-size: 13px; color: #e3ebf8; }
.question-option em { flex-shrink: 0; color: #d4b675; font-size: 10px; font-style: normal; }
.question-option:hover { transform: translateY(-2px); border-color: #d4b675; box-shadow: 0 5px 20px #0004; }
.question-option.asked { opacity: .6; }
#battle-log { border-color: #344765; }
#battle-log .log { max-height: none; overflow: visible; overscroll-behavior: auto; }
.clue-notebook { padding: 12px 0 14px; margin: 0 0 12px; border-bottom: 1px solid #33445e; }
.clue-notebook-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; color: #cdb474; }
.clue-notebook-heading span { display: flex; gap: 6px; align-items: center; }
.clue-notebook-heading .game-icon { width: 16px; height: 16px; }
.clue-notebook-heading small { color: #7b91b0; font-size: 10px; }
.clue-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.clue-tag { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid #446b65; border-radius: 9px; background: #15322e; color: #91dec0; font-size: 12px; }
.clue-tag.no { background: #34222f; border-color: #715260; color: #e8a5b3; }
.clue-tag.tentative { background: #253146; border-color: #4a6286; color: #b0c6e5; }
.clue-tag.conflict { background: #42351e; border-color: #a28143; color: #f0d18a; }
.clue-empty { color: #8097b7; font-size: 11px; }
.clue-entry { padding: 14px; margin-bottom: 10px; border: 1px solid #364d6d; border-radius: 14px; background: linear-gradient(130deg, #18273d, #111d30); }
.clue-entry-head { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #99b2d4; }
.clue-entry-head .game-icon { width: 15px; height: 15px; color: #d7b978; }
.clue-entry-head small { margin-left: auto; color: #7088ab; font-size: 10px; }
.clue-entry h4 { margin: 9px 0 12px; color: #e5edf9; font-size: 14px; overflow-wrap: anywhere; }
.clue-answer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 0; font-size: 12px; border-top: 1px solid #2c3b55; }
.clue-answer b { grid-column: 1; min-width: 0; text-align: left; color: #95abca; overflow-wrap: anywhere; }
.clue-answer span { grid-column: 2; min-width: 0; text-align: center; overflow-wrap: anywhere; }
.clue-answer .yes { color: #81d6b1; } .clue-answer .no { color: #eaa2b0; }
.hint-entry { border-color: #817149; background: linear-gradient(130deg, #302e24, #182333); }
.hint-entry p { color: #efd59c; font-size: 14px; margin: 10px 0 0; overflow-wrap: anywhere; }
.clue-empty-state { display: flex; align-items: center; flex-direction: column; gap: 10px; padding: 20px 10px; text-align: center; color: #718eb6; }
.clue-empty-state .game-icon { width: 28px; height: 28px; color: #9d8858; }
.clue-empty-state b { font-size: 13px; color: #a6bddb; }
.clue-empty-state p { margin: 0; font-size: 11px; }
.picker-search { flex-shrink: 0; margin: 12px 14px 0; display: flex; gap: 10px; align-items: center; padding: 0 13px; border: 1px solid #476084; border-radius: 13px; background: #0a1424; box-shadow: inset 0 1px 0 #ffffff08; }
.picker-search > span { color: #c1a362; }
.picker-search .game-icon { width: 19px; height: 19px; }
.picker-search input, .picker-search input:focus-visible { flex: 1; width: 100%; min-width: 0; border: 0; outline: 0; padding: 13px 0; background: transparent; box-shadow: none; font-size: 14px; }
.picker-search:focus-within { border-color: #dab76c; box-shadow: 0 0 0 3px #d6b66c18; }
.picker-search kbd { color: #8ca4c9; font-size: 18px; }
.champ-preview { display: flex; gap: 12px; align-items: center; flex-shrink: 0; padding: 14px 20px; min-height: 106px; border-bottom: 1px solid #394d6a; background: radial-gradient(ellipse at top right, #bea04d21, transparent 60%), #152239; }
.champ-preview > img { width: 58px; height: 58px; flex-shrink: 0; border-radius: 14px; border: 1px solid #bfa368; box-shadow: 0 0 24px #caaa4c18; }
.champ-preview-copy { flex: 1; min-width: 0; }
.champ-preview-title { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.champ-preview-title b { color: #f0d18a; font-size: 16px; }
.champ-preview-title small { color: #8aa4c8; font-size: 11px; }
.hero-attributes { display: flex; flex-wrap: wrap; align-items: flex-start; min-width: 0; gap: 5px; overflow: visible; }
.hero-attribute { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; border: 1px solid #3d577b; background: #263b58; border-radius: 6px; padding: 3px 7px; color: #b3c9e5; font-size: 10px; }
.champ-preview-empty { display: flex; align-items: center; gap: 12px; color: #937e4e; }
.champ-preview-empty b, .champ-preview-empty small { display: block; }
.champ-preview-empty b { color: #aec2de; font-size: 14px; margin-bottom: 5px; }
.champ-preview-empty small { color: #748dae; font-size: 11px; }
@media (min-width: 900px) { .sheet[data-kind="questions"] .panel { max-width: 760px; max-height: min(720px, calc(var(--viewport-height, 100dvh) - 70px)); } }
@media (max-width: 899px) {
  #phase-playing .turn-order { display: none; }
  .game-layout { display: flex; flex-direction: column; }
  .champ-preview { padding: 11px 14px; min-height: 96px; }
  .champ-preview > img { width: 44px; height: 44px; border-radius: 10px; }
  .champ-preview-title { gap: 6px; }
  .champ-preview-title b { font-size: 14px; }
  .champ-preview-title small { display: none; }
}
@media (max-width: 560px) {
  .question-list { grid-template-columns: minmax(0, 1fr); }
  .question-toolbar > span { font-size: 11px; } .question-toolbar small { display: none; }
  .quick-questions .question-chip { font-size: 11px; padding: 6px 8px; }
  .log-heading { flex-wrap: wrap; }
  .clue-notebook-heading { flex-wrap: wrap; }
  .clue-entry-head small { font-size: 9px; }
  .clue-entry { padding: 11px; }
  .event-idle { padding: 14px 16px; }
  .event-idle h2 { font-size: 20px; }
}
.compact-viewport #app { padding-bottom: calc(24px + var(--safe-b)); }
.compact-viewport .actionbar { position: static; inset: auto; width: 100%; max-height: none; overflow: visible; margin-bottom: 14px; border: 1px solid #354663; border-radius: 16px; background: #0c1525; }

/* 邀请链接纯图标操作：所有屏宽保持链接与复制按钮并排，用勾选与颜色反馈。 */
.invite-copy-row { display: flex; gap: 10px; align-items: center; }
.invite-copy-row input { flex: 1; min-width: 0; }
#copy-invite-link { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 50px; width: 50px; height: 50px; min-width: 50px; padding: 0; border: 1px solid #827048; border-radius: 13px; color: #e2c680; background: linear-gradient(145deg, #343027, #1a2234); box-shadow: inset 0 1px 0 #ffffff08; }
#copy-invite-link .game-icon { display: block; width: 20px; height: 20px; }
#copy-invite-link:hover { border-color: #e2c680; background: #40392a; transform: translateY(-1px); }
#copy-invite-link:active { transform: scale(.95); }
#copy-invite-link[data-copied] { border-color: #64cda3; color: #89e3bd; background: #17372e; box-shadow: 0 0 18px #4ec39220; }
#copy-invite-link[data-busy]::after { display: none; }

/* 首页专用间距：不为不存在的操作栏预留空间，也不限制必要内容滚动。 */
#app.is-home {
  --home-top: 16px; --home-bottom: calc(16px + var(--safe-b));
  padding-top: var(--home-top); padding-bottom: var(--home-bottom);
}
.home-page { min-height: calc(var(--viewport-height, 100dvh) - var(--home-top) - var(--home-bottom)); }
.home-title .brand-mark { margin-top: 8px; margin-bottom: 8px; }
.home-title h1 { margin: 10px 0 0; }
.invite-destination { margin-bottom: 14px; padding: 10px 12px; }
@media (max-width: 560px) {
  #app.is-home { --home-top: 8px; }
  .home-footer { gap: 8px; font-size: 11px; }
  .home-facts { gap: 10px; }
  .home-fact { gap: 4px; }
  .home-fact .game-icon { width: 14px; height: 14px; }
  .home-footer .rules-link { gap: 4px; padding: 0 10px; }
  .home-title { padding: 4px 0 6px; }
  .home-title .brand-mark { margin-top: 4px; margin-bottom: 5px; width: 34px; height: 34px; }
  .home-title h1 { margin-top: 7px; }
  .home-panel { margin-top: 4px; padding: 15px 16px 16px; }
  .panel-heading { margin-bottom: 4px; }
  .avatar-section { padding-bottom: 10px; margin-bottom: 10px; }
  .home-divider { margin: 14px 0 10px; }
  .invite-destination { margin-bottom: 10px; padding: 8px 10px; }
}

@media (max-width: 899px) and (max-height: 700px) {
  .home-title { display: flex; align-items: center; gap: 14px; padding: 4px 0 6px; }
  .home-title .brand-mark { flex-shrink: 0; width: 30px; height: 30px; margin: 0; }
  .home-title h1 { font-size: 28px; margin: 0; }
  .home-panel { margin-top: 4px; padding: 14px 16px; }
  .panel-heading { margin-bottom: 4px; }
  .panel-heading .panel-eyebrow { display: block; }
  .panel-heading h2 { margin: 4px 0 0; }
  .avatar-section { padding-top: 4px; padding-bottom: 8px; margin-bottom: 8px; }
  .home-panel .input-shell { height: 48px; }
  #home-form > .home-create { height: 48px; margin-top: 12px; }
  .home-divider { margin: 10px 0 8px; }
}

/* 大厅只展示席位与开局操作；玩法收进底部抽屉，不占首屏。 */
#app.is-lobby { display: flex; flex-direction: column; min-height: var(--viewport-height, 100dvh); max-width: 920px; padding: 12px 14px calc(12px + var(--safe-b)); }
.is-lobby #room-head { flex-shrink: 0; margin-bottom: 12px; padding: 0 4px 8px; }
.is-lobby #phase-lobby { display: flex; flex: 1; flex-direction: column; gap: 14px; min-width: 0; }
.is-lobby .lobby-scene { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 0; min-width: 0; }
.is-lobby .lobby-table { width: 100%; padding: 20px; }
.is-lobby .table-heading .eyebrow { font-size: 9px; letter-spacing: 1.5px; }
.is-lobby .table-heading h2 { font-size: clamp(16px, 4.5vw, 23px); margin: 4px 0 0; line-height: 1.35; }
.is-lobby .table-art { height: 120px; margin: 8px 0 14px; }
.is-lobby .seat-grid { margin-top: 10px; }
#phase-lobby .lobby-launch { position: static; inset: auto; flex-shrink: 0; width: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; }
.lobby-launch .inner { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; max-width: none; }
#advanced-settings.lobby-play-button { position: relative; width: 56px; height: 56px; border: 1px solid #71623e; background: linear-gradient(145deg, #2c3040, #141f31); color: #dbbe7a; }
.lobby-play-button .game-icon { width: 23px; height: 23px; }
.drawer-entry-chevron { position: absolute; right: 5px; bottom: 3px; line-height: 0; }
.drawer-entry-chevron .game-icon { width: 12px; height: 12px; transform: rotate(180deg); }
.lobby-play-button:hover, .lobby-play-button[aria-expanded="true"] { border-color: #e2c680; box-shadow: 0 0 20px #d4af4820; }
.lobby-launch .waiting-orbit { height: 56px; border: 1px solid #3e506e; border-radius: 14px; background: #131f33; font-size: 13px; }
#phase-lobby #start { height: 56px; margin: 0; }

/* 底部玩法抽屉：节奏预设 → 单行参数 → 提示开关；只有这一层滚动。 */
.sheet[data-kind="settings"] { align-items: flex-end; padding: 0 12px var(--keyboard-offset); }
.sheet[data-kind="settings"] .panel { width: 100%; max-width: 580px; height: auto; max-height: calc(var(--viewport-height, 100dvh) - 18px - var(--safe-b)); margin: 0 auto; border-radius: 24px 24px 0 0; animation: rulesDrawerIn .3s cubic-bezier(.2,.8,.2,1) both; }
.sheet[data-kind="settings"] .panel::before { content: ''; flex-shrink: 0; width: 42px; height: 4px; margin: 10px auto 0; border-radius: 10px; background: #63708c; }
.sheet[data-kind="settings"] .head { padding: 14px; flex-shrink: 0; }
.settings-role { display: flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 5px 7px; border: 1px solid #41516c; border-radius: 8px; color: #95abc9; font-size: 10px; }
.settings-role .game-icon { width: 14px; height: 14px; }
.settings-role.host-role { border-color: #937741; color: #e7c780; background: #c89f3610; }
.sheet .settings-body { padding: 12px 14px; }
.rules-tuning .settings-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; }
.rules-tuning .tuning-tile { display: grid; grid-template-columns: 28px minmax(0, 1fr) 148px; align-items: center; gap: 8px; padding: 8px 10px; border-color: #354b6d; background: linear-gradient(130deg, #1b2b42, #101d30); }
.rules-tuning .tuning-tile > .game-icon { width: 25px; height: 25px; }
.rules-tuning .tuning-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; font-size: 12px; }
.tuning-label b { font-weight: 600; }
.tuning-label small { font-size: 9px; color: #758db0; }
.rules-tuning .number-control { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 4px; margin: 0 !important; }
.rules-tuning .number-control .nudge-button { width: 44px; height: 44px; min-height: 44px; }
.rules-tuning .number-control input { height: 44px; min-width: 0; margin: 0; padding: 4px 0; font-size: 20px; border: 1px solid #465b7c; border-radius: 10px; background: #0b1627; }
.rules-tuning .tuning-readout { display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; margin: 0; padding-right: 10px; }
.tuning-readout strong { color: #e7ca83; font-size: 24px; }
.rules-tuning .tempo-options { margin: 0 0 10px; }
.rules-tuning .tempo-chip { min-height: 40px; font-size: 13px; }
.rules-tuning .hint-rule-card { margin: 10px 0 0; padding: 10px 12px; }
.rules-tuning .hint-rule-card .rule-card-icon { width: 34px; height: 36px; }
.settings-sync { display: flex; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0; padding: 8px 14px calc(10px + var(--safe-b)); border-top: 1px solid #30435e; color: #85b49f; font-size: 11px; }
.settings-sync .game-icon { width: 15px; height: 15px; }
@keyframes rulesDrawerIn { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (max-width: 899px) {
  .is-lobby .lobby-table { padding: 14px; border-radius: 22px; }
  .is-lobby .table-heading { gap: 10px; }
  .is-lobby .party-count { padding: 8px 10px; font-size: 17px; }
  .is-lobby .seat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .is-lobby .seat-avatar { width: 54px; height: 54px; }
  .is-lobby .player-seat { padding: 13px 7px; gap: 7px; }
  .is-lobby .lobby-table:is([data-seats="6"], [data-seats="7"], [data-seats="8"]) .table-art { height: 66px; }
}
@media (max-width: 899px) and (min-height: 701px) {
  .is-lobby .lobby-table:is([data-seats="6"], [data-seats="7"], [data-seats="8"]) .player-seat { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; justify-content: stretch; align-items: center; gap: 2px 8px; min-height: 68px; padding: 8px; }
  .is-lobby .lobby-table:is([data-seats="6"], [data-seats="7"], [data-seats="8"]) .player-seat > :is(.avatar-face, .avatar-change-button, .empty-sigil) { grid-row: 1 / span 2; grid-column: 1; }
  .is-lobby .lobby-table:is([data-seats="6"], [data-seats="7"], [data-seats="8"]) .player-seat > b { grid-column: 2; font-size: 11px; text-align: left; }
  .is-lobby .lobby-table:is([data-seats="6"], [data-seats="7"], [data-seats="8"]) .seat-status { grid-column: 2; font-size: 10px; }
  .is-lobby .lobby-table:is([data-seats="6"], [data-seats="7"], [data-seats="8"]) :is(.seat-avatar, .empty-sigil) { width: 40px; height: 40px; border-radius: 12px; }
  .is-lobby .lobby-table:is([data-seats="6"], [data-seats="7"], [data-seats="8"]) .empty-seat > b { grid-row: 1 / span 2; }
}
@media (max-height: 700px) {
  #app.is-lobby { padding-top: 8px; padding-bottom: calc(8px + var(--safe-b)); }
  .is-lobby #room-head { margin-bottom: 8px; padding-bottom: 4px; }
  .is-lobby #phase-lobby { gap: 10px; }
  .is-lobby .lobby-table { padding: 12px; }
  .is-lobby .table-art { height: 64px; margin: 4px 0 8px; }
  .is-lobby .mystery-card { width: 44px; height: 58px; font-size: 25px; }
  .is-lobby .table-art::before { width: 160px; height: 45px; }
  .is-lobby .seat-grid { gap: 8px; }
  .is-lobby .player-seat { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; justify-content: stretch; align-items: center; gap: 2px 8px; min-height: 64px; padding: 8px; }
  .is-lobby .player-seat > :is(.avatar-face, .avatar-change-button, .empty-sigil) { grid-column: 1; grid-row: 1 / span 2; }
  .is-lobby .player-seat > b { grid-column: 2; font-size: 11px; text-align: left; }
  .is-lobby .seat-status { grid-column: 2; font-size: 10px; }
  .is-lobby :is(.seat-avatar, .empty-sigil) { width: 40px; height: 40px; border-radius: 12px; }
  .is-lobby .empty-seat > b { grid-row: 1 / span 2; }
  .is-lobby .lobby-table:is([data-seats="6"], [data-seats="7"], [data-seats="8"]) .table-art { display: none; }
}
@media (max-height: 600px) { .is-lobby .table-art { display: none; } }
.is-lobby .seat-crown { top: -8px; padding: 2px 5px; }
.is-lobby .seat-crown .game-icon { width: 13px; height: 13px; }
.is-lobby .avatar-edit-sigil { width: 19px; height: 19px; right: -2px; bottom: -2px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .sheet[data-kind="settings"] .panel { animation: none !important; } }

/* Party table / social play layer */
.game-hud { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:4px 2px 12px; }
.hud-pill { display:flex; align-items:center; gap:9px; min-width:0; color:#e7d18c; }
.hud-pill small { color:#7990b4; font-size:11px; }
.hud-orb { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; color:#ffe49b; background:linear-gradient(145deg,#614e29,#1e2c42); box-shadow:0 0 22px #d2a44736; }
.hud-tools { display:flex; gap:7px; }
.hud-tools .icon-button { width:40px; height:40px; }
.hud-tools .is-muted { color:#e6b7b7; border-color:#70404b; }
.game-table-stage { position:relative; isolation:isolate; padding:18px; border:1px solid #3c5273; border-radius:28px; background:radial-gradient(ellipse at 50% 30%,#29426380,transparent 60%), linear-gradient(145deg,#172943,#0d1729); box-shadow:0 26px 80px #0005,inset 0 1px #ffffff0a; overflow:visible; }
.table-glow { position:absolute; inset:12% 16% 20%; border:1px solid #91a6cc22; border-radius:50%; transform:perspective(600px) rotateX(58deg); box-shadow:0 0 0 18px #7194bd0c, 0 0 90px #1a7eb82b; pointer-events:none; }
.game-table-stage .game-layout { position:relative; z-index:1; }
.game-table-stage #game-main { min-width:0; }
.social-menu { position:fixed; z-index:80; width:min(280px,calc(100vw - 16px)); padding:10px; border:1px solid #5d7295; border-radius:18px; background:linear-gradient(145deg,#1e304d,#101a2c); box-shadow:0 18px 60px #0009,0 0 26px #4584ba2b; animation:social-menu-in .18s ease both; }
.social-menu-head { display:flex; justify-content:space-between; align-items:center; padding:2px 4px 9px 8px; color:#f1d58d; }
.social-close { width:32px; height:32px; padding:0; border-radius:9px; color:#9eb1cc; background:transparent; border:0; }
.social-props { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.social-prop { display:grid; place-items:center; gap:5px; min-height:74px; padding:8px 4px; color:#d8e1ef; background:#162641; border:1px solid #344f75; border-radius:13px; }
.social-prop:hover:not(:disabled) { transform:translateY(-3px) scale(1.02); border-color:#e0bd73; box-shadow:0 8px 20px #0004; }
.social-prop:disabled { filter:grayscale(.6); opacity:.35; cursor:var(--game-cursor-disabled, not-allowed); }
.social-prop b { font-size:11px; font-weight:600; }
.prop-art { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#253a59; }
.prop-art .game-icon { width:26px; height:26px; }
.prop-turtle .prop-art { color:#7fe0ba; }
.prop-tomato .prop-art { color:#f58a86; }
.prop-slipper .prop-art { color:#efc36e; }
.prop-applause .prop-art { color:#c3a5ff; }
#effects-layer { position:fixed; inset:0; z-index:90; pointer-events:none; overflow:hidden; }
.social-prop.prop-turtle { color:#8be6bf; background:#173b3a; }.social-prop.prop-tomato { color:#ff8e82; background:#4d252d; }.social-prop.prop-slipper { color:#f2cc75; background:#473d25; }.social-prop.prop-applause { color:#d8b8ff; background:#392c55; }
@keyframes social-menu-in { from { opacity:0; transform:translateY(-5px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes orbit-pulse { 50% { transform:scale(1.2) rotate(10deg); } }
@media (min-width:900px) { .game-table-stage .game-layout { grid-template-columns:minmax(0,1fr) 285px; } }
@media (max-width:899px) { .game-table-stage { padding:10px; border-radius:22px; } .game-hud { padding-left:4px; } }
@media (max-width:420px) { .social-menu { width:calc(100vw - 16px); } .social-prop { min-height:66px; } .prop-art { width:34px; height:34px; } }
@media (prefers-reduced-motion: reduce) { .social-menu { animation:none; } }

/* 对局桌重整：对局中不再重复展示房间码/邀请入口，把视觉重点放回桌面和行动。 */
.in-game-head .room-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.in-game-head .room-tools .icon-button { width: 38px; height: 38px; }
.in-game-head > .icon-button { flex: 0 0 40px; }
.in-game-head .room-tools + .icon-button { margin-left: 0; }

.table-caption { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 2px 12px; padding: 0 2px 10px; border-bottom: 1px solid #7890b52e; }
.table-caption-kicker { color: #ebd18e; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.table-caption-meta { color: #8da7c9; font-size: 11px; }
.game-table-stage { background: radial-gradient(ellipse at 50% 12%, #3554777a, transparent 58%), linear-gradient(150deg, #1a304b, #0c1729 72%); border-color: #4c668b; }
.game-table-stage::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 #ffffff14, inset 0 -22px 42px #07111f55; }
.game-table-stage .game-layout { gap: 14px; }
.game-table-stage #current-event { position: relative; overflow: hidden; border-color: #596f91; background: radial-gradient(ellipse at 100% 0%, #3b4e452b, transparent 52%), linear-gradient(145deg, #172b45, #111b2e); box-shadow: 0 16px 34px #060d1855, inset 0 1px #ffffff0c; }
.game-table-stage #current-event::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(#e9cc7e, #8a6c36); box-shadow: 0 0 18px #e5c26b66; }
.game-table-stage #current-event.event-idle { min-height: 176px; display: grid; place-items: center; align-content: center; text-align: center; }
.game-table-stage #current-event.event-idle .table-sigil { margin-bottom: 10px; }
.game-table-stage #current-event.event-idle h2 { color: #f0d697; }
.table-notebook { border-color: #415a7d; background: linear-gradient(145deg, #182943, #101a2c); box-shadow: 0 16px 40px #050b1444; }
.table-notebook .log-heading h3 { display: flex; align-items: center; gap: 7px; color: #e5edf9; }
.table-notebook .log-heading h3 .game-icon { color: #e1bd68; }
.actionbar { border-top: 1px solid #4d6487; background: linear-gradient(180deg, #0e1a2cfa, #09111ff7); box-shadow: 0 -14px 36px #050a1499; }

.seat-interact { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; min-height: 44px; padding: 3px; border-radius: 13px; border-color: #3c5273; background: #111d31; }
.seat-interact:not(:disabled):hover { border-color: #ddbc70; background: #253956; }
.seat-interact .board-avatar { width: 36px; height: 36px; }

@media (max-width: 899px) {
  .in-game-head { padding-left: 8px; padding-right: 8px; }
  .room-turn-title { font-size: 17px; }
  .game-table-stage { padding: 10px; }
  .table-caption { margin-bottom: 9px; padding-bottom: 8px; }
  .table-caption-kicker { font-size: 12px; }
  .game-table-stage .game-layout { gap: 10px; }
  .game-table-stage #current-event.event-idle { min-height: 148px; }
  .table-notebook { margin-top: 10px; }
}

@media (max-width: 420px) {
  .in-game-head .room-tools .icon-button, .in-game-head > .icon-button { width: 36px; height: 36px; }
  .in-game-head { gap: 5px; }
  .table-caption-meta { font-size: 10px; }
}

/* Portrait arena: only avatars, names and one badge live on the table. Lobby seats are untouched. */
#app.is-playing { padding-bottom: calc(24px + var(--safe-b)); }
.game-table-stage .arena { position:relative; z-index:1; display:grid; gap:18px; min-width:0; }
.arena-seats { display:contents; }
.portrait-seat { position:relative; display:grid; justify-items:center; align-content:center; gap:8px; width:88px; max-width:100%; min-width:44px; min-height:92px; margin:0; color:#cfdbef; border:0; background:none; }
.portrait-seat .seat-interact { position:relative; width:64px; height:64px; min-height:44px; padding:4px; border-radius:50%; border:1px solid #587293; background:#152238; box-shadow:0 8px 20px #040b1644; }
.portrait-seat .seat-avatar { width:54px; height:54px; border-radius:50%; }
.portrait-seat .pname { width:100%; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:700; line-height:18px; }
.portrait-seat.turn .seat-interact { border-color:#f1d18a; box-shadow:0 0 0 3px #e4bd5c25,0 0 28px #d6ad4e40; }
.portrait-seat.turn .seat-interact::before { content:''; position:absolute; inset:-7px; border:1px solid #e6c77855; border-radius:50%; pointer-events:none; }
.portrait-seat .seat-interact:hover { transform:translateY(-2px); border-color:#dfbf77; }
.portrait-seat.offline-player { opacity:.5; filter:grayscale(.7); }
.seat-badge { position:absolute; right:-1px; bottom:-1px; display:grid; place-items:center; width:23px; height:23px; border:2px solid #142238; border-radius:50%; color:#fff; background:#263e61; }
.seat-badge .game-icon { width:13px; height:13px; }
.seat-badge.acting { color:#ffe29a; background:#886a31; }.seat-badge.waiting { background:#267e91; }.seat-badge.solved { background:#5b8c66; }.seat-badge.offline { background:#4e5969; }.seat-badge.next { background:#57528c; }
.arena-center { min-width:0; align-self:center; z-index:1; }
.game-table-stage .arena-center #current-event { width:100%; min-height:210px; margin:0; border-radius:24px; }
.game-table-stage .arena-center #current-event.event-idle { padding:28px 20px; }
.game-table-stage .arena-center #current-event.event-idle h2 { font-size:clamp(20px,2.3vw,28px); }
.self-dock { position:relative; z-index:1; display:grid; grid-template-columns:88px minmax(0,1fr); gap:20px; align-items:start; width:100%; max-width:760px; margin:22px auto 0; padding:18px; border:1px solid #4b638566; border-radius:24px; background:linear-gradient(145deg,#172943c9,#0f1a2cde); box-shadow:inset 0 1px #ffffff0a; }
.self-dock .portrait-seat { min-height:102px; }
.self-dock .portrait-seat .seat-interact { width:74px; height:74px; }
.self-dock .portrait-seat .seat-avatar { width:64px; height:64px; }
.self-dock #turn-actions { position:static; inset:auto; min-width:0; width:100%; margin:0; max-height:none; overflow:visible; border:0; border-radius:0; box-shadow:none; padding:0; background:transparent; backdrop-filter:none; }
.self-dock .actionbar .inner { max-width:none; }
.self-dock .action-heading { margin-bottom:8px; }.self-dock .action-heading > b .game-icon { width:18px; height:18px; }
.self-dock .action-choices { gap:10px; }.self-dock .action-choices > button { min-height:76px; padding:10px 6px; gap:5px; border-radius:15px; }.self-dock .action-choices .game-icon { width:30px; height:30px; }.self-dock .action-choices b { font-size:12px; }
.dock-wait { min-height:86px; display:flex; align-items:center; justify-content:center; gap:9px; font-size:12px; }
.seat-detail { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px; padding:12px 0; color:#b9cae2; font-size:12px; border-top:1px solid #ffffff12; border-bottom:1px solid #ffffff12; }.seat-detail .detail-avatar { width:32px; height:32px; border-radius:10px; }.seat-detail img { width:32px; height:32px; border-radius:9px; }.seat-detail span { color:#8ea5c5; }.seat-detail .game-icon { width:16px; height:16px; }
@media (min-width:900px) {
  .game-table-stage .arena { grid-template-columns:88px repeat(3,minmax(0,1fr)) 88px; grid-template-rows:104px minmax(96px,auto) minmax(96px,auto); grid-template-areas:". top-left top-center top-right ." "left-upper center center center right-upper" "left-lower center center center right-lower"; gap:18px 22px; padding:8px 12px 18px; }
  .arena::before { content:''; pointer-events:none; position:absolute; inset:54px 25px -4px; border-radius:48%; border:1px solid #607fa322; background:radial-gradient(ellipse,#304d6755,#111d3012 65%); box-shadow:inset 0 0 40px #070d1b44; }
  .arena-center { grid-area:center; }
  .arena-seats .portrait-seat { justify-self:center; align-self:center; }
  [data-slot="top-left"] { grid-area:top-left; }[data-slot="top-center"] { grid-area:top-center; }[data-slot="top-right"] { grid-area:top-right; }
  [data-slot="left-upper"] { grid-area:left-upper; }[data-slot="right-upper"] { grid-area:right-upper; }[data-slot="left-lower"] { grid-area:left-lower; }[data-slot="right-lower"] { grid-area:right-lower; }
}
@media (max-width:899px) {
  .game-table-stage { padding:12px; }.game-table-stage .arena { gap:18px; }
  .arena-seats { display:grid; grid-template-columns:repeat(var(--opponent-cols,4),minmax(0,1fr)); gap:12px 6px; justify-items:center; align-items:start; width:100%; max-width:500px; margin:4px auto 0; }
  .portrait-seat { width:68px; min-height:74px; gap:6px; }.portrait-seat .pname { font-size:11px; }
  .portrait-seat .seat-interact { width:54px; height:54px; padding:3px; }.portrait-seat .seat-avatar { width:46px; height:46px; }
  .game-table-stage .arena-center #current-event { min-height:155px; border-radius:20px; }.game-table-stage .arena-center #current-event.event-idle { padding:18px 14px; }
  .self-dock { grid-template-columns:58px minmax(0,1fr); gap:10px; padding:12px 9px; margin-top:16px; border-radius:18px; }.self-dock .portrait-seat { width:58px; min-height:82px; }.self-dock .portrait-seat .seat-interact { width:58px; height:58px; }.self-dock .portrait-seat .seat-avatar { width:50px; height:50px; }
  .self-dock .action-choices { gap:6px; }.self-dock .action-choices > button { min-height:68px; }.self-dock .action-choices .game-icon { width:26px; height:26px; }
  .social-menu { left:8px !important; top:auto !important; bottom:calc(10px + var(--safe-b)); width:calc(100vw - 16px); max-width:460px; max-height:calc(var(--viewport-height,100vh) - 28px); overflow-y:auto; border-radius:24px; }
}
@media (max-width:359px) { .game-table-stage { padding:10px; }.self-dock { grid-template-columns:48px minmax(0,1fr); gap:8px; padding:10px 7px; }.self-dock .portrait-seat { width:48px; }.self-dock .portrait-seat .seat-interact { width:48px; height:48px; }.self-dock .portrait-seat .seat-avatar { width:40px; height:40px; }.self-dock .action-choices > button { padding:8px 4px; }.portrait-seat .seat-interact { width:48px; height:48px; }.portrait-seat .seat-avatar { width:40px; height:40px; } }

/* JS seeks the timeline, CSS only supplies appearance and local 450ms impact feedback. */
.prop-effect { position:fixed; inset:0; pointer-events:none; --prop-color:#eecb6b; }
.prop-effect.prop-tomato { --prop-color:#ff716c; }.prop-effect.prop-slipper { --prop-color:#8ec8ee; }.prop-effect.prop-turtle { --prop-color:#92d692; }.prop-effect.prop-applause { --prop-color:#c399ff; }
.flying-prop { position:fixed; left:0; top:0; display:grid; place-items:center; width:46px; height:46px; color:var(--prop-color); filter:drop-shadow(0 5px 8px #0008); will-change:transform; }
.flying-prop .game-icon, .flying-prop > svg { width:40px; height:40px; stroke-width:1.7; }
.prop-trail { position:fixed; inset:0; pointer-events:none; }.prop-trail path { stroke:var(--prop-color); stroke-width:4; stroke-linecap:round; opacity:.35; filter:drop-shadow(0 0 5px var(--prop-color)); }
.prop-burst { position:fixed; width:80px; height:80px; margin:-40px 0 0 -40px; color:var(--prop-color); }
.burst-ring { position:absolute; inset:8px; border:2px solid currentColor; border-radius:50%; animation:burst-ring .45s ease-out both; }
.burst-particle { position:absolute; left:38px; top:38px; width:6px; height:6px; border-radius:50%; background:currentColor; animation:burst-particle .45s ease-out both; }
.burst-tomato .burst-particle { width:10px; height:7px; border-radius:45% 65%; }.burst-slipper .burst-ring { border-style:dashed; }.burst-applause .burst-particle { clip-path:polygon(50% 0,62% 35%,100% 50%,62% 65%,50% 100%,38% 65%,0 50%,38% 35%); width:12px; height:12px; }
.burst-turtle .burst-ring { border-style:dotted; }.burst-turtle .prop-stamp::after { content:'⌛'; position:absolute; top:-12px; right:-9px; font-size:18px; }
.prop-stamp { display:grid; place-items:center; position:absolute; inset:18px; border-radius:50%; background:#14233aed; box-shadow:0 0 18px color-mix(in srgb,var(--prop-color) 40%,transparent); animation:prop-stamp .75s ease both; }.prop-stamp .game-icon,.prop-stamp > svg { width:28px; height:28px; }
.social-hit { animation:social-hit .45s ease both; }
@keyframes burst-ring { from { transform:scale(.4); opacity:.8; } to { transform:scale(1.6); opacity:0; } }
@keyframes burst-particle { from { transform:rotate(var(--angle)) translateX(0); opacity:1; } to { transform:rotate(var(--angle)) translateX(var(--distance)); opacity:0; } }
@keyframes prop-stamp { 0% { opacity:0; scale:.65; } 25%,65% { opacity:1; scale:1; } 100% { opacity:0; scale:.9; } }
@keyframes social-hit { 0%,100% { translate:0; filter:brightness(1); } 30% { translate:-4px; filter:brightness(1.35); } 65% { translate:4px; filter:brightness(1.15); } }
.reduced-static .burst-particle,.reduced-static .burst-ring { display:none; }.reduced-static .prop-stamp { animation:none; }
@media (prefers-reduced-motion:reduce) { .portrait-seat .seat-interact { transition:none; }.portrait-seat .seat-interact:hover { transform:none; }.social-hit,.burst-ring,.burst-particle,.prop-stamp { animation:none !important; } }
/* Compose below the whole dock, not inside the narrow area next to the local avatar. */
.self-dock:has(#act-slot) #turn-actions,.self-dock:has(#act-slot) #turn-actions > .inner { display:contents; }
.self-dock:has(#act-slot) > .portrait-seat { grid-column:1; grid-row:1; align-self:end; justify-self:center; }
.self-dock:has(#act-slot) .action-heading { grid-column:1; grid-row:2; margin:0; justify-content:center; }
.self-dock:has(#act-slot) .action-choices { grid-column:2; grid-row:1 / 3; align-self:center; }
.self-dock #act-slot { grid-column:1 / -1; min-width:0; }
.self-dock .question-toolbar { flex-wrap:wrap; }
.self-dock .quick-questions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.self-dock .quick-questions .question-chip { white-space:normal; overflow-wrap:anywhere; min-height:44px; text-align:left; }
.self-dock .question-toolbar button { min-height:44px; }
.self-dock .action-choices > button { flex-direction:column; min-width:0; }
.self-dock input,.self-dock textarea { min-width:0; }
.self-dock .hint-target { min-height:44px; max-width:100%; }.self-dock .hint-target b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.self-dock .answer-buttons { gap:6px; }.self-dock .answer-buttons button { min-width:0; padding:10px 6px; }.self-dock .answer-buttons .game-icon { width:20px; height:20px; }
@media (max-width:899px) {
  .self-dock:has(#answer-composer) { grid-template-columns:minmax(0,1fr); }.self-dock:has(#answer-composer) > .portrait-seat { justify-self:center; }
  .self-dock .question-toolbar > span { max-width:100%; }.self-dock .question-toolbar > div { margin-left:auto; }
  .self-dock:has(#act-slot:empty) { row-gap:0; }
  .room-turn-title { overflow-wrap:anywhere; }
}

/* Passing belongs to the local seat, not to a floating header above the action cards. */
.self-dock:has(.skip-turn) { row-gap:4px; }
.self-dock #act-slot:empty { display:none; }
.self-dock .skip-turn {
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  min-width:60px; min-height:44px; padding:6px 9px; margin:0;
  border:1px solid transparent; border-radius:999px; background:transparent;
  color:#8da3c4; font-size:12px; line-height:1; white-space:nowrap;
}
.self-dock .skip-turn .game-icon { width:16px; height:16px; }
.self-dock .skip-turn:hover:not(:disabled) { color:#e5cd92; background:#d5b5740d; border-color:#d5b57440; transform:none; }
.self-dock .skip-turn:active:not(:disabled) { transform:scale(.96); background:#d5b5741a; }
.self-dock .skip-turn:focus-visible { outline:2px solid #ebcb80; outline-offset:1px; }
.self-dock .skip-turn[data-busy] { opacity:.65; }
.self-dock .skip-turn[data-busy]::after { display:none; }
.self-dock .skip-turn[data-busy] .game-icon { opacity:.45; }

/* One compact speaker controls music + feedback without adding game copy. */
.room-tools { display:flex; align-items:center; gap:6px; }
#toggle-sound.is-muted { color:#e6b7b7; border-color:#70404b; }
#toggle-sound.audio-active { color:#a6eadb; border-color:#467f79; }
#toggle-sound.audio-active:focus-visible { box-shadow:0 0 0 3px #65d7be38; }