/* ============ OH卡小镇 · 深夜蓝+暖金 设计系统 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  background: #0b1030; color: #e8e2cc; overscroll-behavior: none;
  user-select: none; -webkit-user-select: none;
}
#app, #app-root { height: 100dvh; }
input, textarea { user-select: text; -webkit-user-select: text; font-family: inherit; }
.serif { font-family: "Songti SC", "STSong", "Noto Serif SC", serif; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #2a3560; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 按钮 ---------- */
.gold-btn {
  border: none; cursor: pointer; border-radius: 999px;
  padding: 12px 28px; font-size: 16px; font-weight: 600; color: #4a3410;
  background: linear-gradient(180deg, #ffe9ad, #e8ce8e 55%, #d4b06a);
  box-shadow: 0 2px 0 #a8853e, 0 6px 18px rgba(232, 206, 142, .25);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.gold-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 0 #a8853e, 0 10px 24px rgba(232, 206, 142, .35); }
.gold-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 #a8853e; }
.gold-btn:disabled { filter: grayscale(.6) brightness(.7); cursor: not-allowed; }
.gold-btn.big { padding: 15px 44px; font-size: 19px; }
.ghost-btn {
  border: 1px solid rgba(232, 206, 142, .45); background: rgba(13, 20, 48, .6); color: #e8ce8e;
  border-radius: 999px; padding: 9px 20px; font-size: 14px; cursor: pointer; transition: all .15s;
}
.ghost-btn:hover { background: rgba(232, 206, 142, .12); }
.ghost-btn.small { padding: 6px 14px; font-size: 13px; }
.ghost-btn.wide { width: 100%; padding: 13px; font-size: 16px; }
.ghost-btn:disabled { opacity: .4; cursor: not-allowed; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(232, 206, 142, .3);
  background: rgba(13, 20, 48, .6); color: #e8e2cc; font-size: 17px; cursor: pointer; transition: all .15s;
}
.icon-btn:hover, .icon-btn.on { background: rgba(232, 206, 142, .18); border-color: #e8ce8e; }

/* ---------- 通用覆盖层 ---------- */
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; z-index: 30; }
.overlay > * { pointer-events: auto; }
.center-overlay { background: radial-gradient(ellipse at center, rgba(8, 12, 34, .55), rgba(8, 12, 34, .88)); backdrop-filter: blur(3px); }
.bottom-sheet { justify-content: flex-end; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.fullSheet { background: rgba(8, 12, 34, .94); backdrop-filter: blur(4px); z-index: 40; }
.fade-in { animation: fadeIn .5s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.modal-mask { position: fixed; inset: 0; background: rgba(4, 6, 18, .7); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 90; }
.avatar-modal, .qr-modal {
  background: linear-gradient(180deg, #141c44, #0d1330); border: 1px solid rgba(232, 206, 142, .35);
  border-radius: 22px; padding: 26px; width: min(92vw, 420px); display: flex; flex-direction: column; gap: 14px; align-items: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.qr-title { font-size: 19px; font-weight: 700; color: #ffd98a; }

/* ---------- 小镇首页 ---------- */
.town-screen { height: 100%; display: flex; flex-direction: column; position: relative; }
.town-body { flex: 1; display: flex; min-height: 0; }
.town-body .town-scene { flex: 1; min-width: 0; }

/* 桌面三栏大厅：左右面板 */
.town-panel { display: none; }
@media (min-width: 920px) {
  .town-panel {
    display: flex; flex-direction: column; gap: 8px; width: 272px; flex-shrink: 0;
    padding: 16px 14px; overflow-y: auto;
    background: linear-gradient(180deg, rgba(10, 15, 38, .78), rgba(10, 15, 38, .55));
    backdrop-filter: blur(8px);
  }
  .tp-left { border-right: 1px solid rgba(232, 206, 142, .22); }
  .tp-right { border-left: 1px solid rgba(232, 206, 142, .22); }
  .town-screen .town-bottom { display: none; }
  .town-welcome { display: none; }
}
.tp-title { font-size: 17px; font-weight: 800; color: #ffd98a; font-family: "Songti SC", serif; margin-bottom: 6px; }
.tp-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: rgba(13, 20, 48, .72); border: 1px solid rgba(232, 206, 142, .3);
  border-radius: 14px; padding: 11px 14px; cursor: pointer; color: #e8e2cc; transition: all .15s;
}
.tp-row:hover { background: rgba(232, 206, 142, .12); transform: translateX(3px); }
.tp-row.active { border-color: #9FD98A; box-shadow: 0 0 12px rgba(159, 217, 138, .22); }
.tp-row.build { border-style: dashed; }
.tp-icon { font-size: 21px; width: 30px; text-align: center; }
.tp-rank {
  width: 21px; height: 21px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; color: #9fb0d8;
  background: rgba(143, 159, 201, .14); border: 1px solid rgba(143, 159, 201, .45);
}
.tp-rank.r1 { color: #3a2a10; background: #ffd98a; border-color: #ffd98a; box-shadow: 0 0 8px rgba(255, 217, 138, .5); }
.tp-rank.r2 { color: #23283a; background: #c8cdd9; border-color: #c8cdd9; }
.tp-rank.r3 { color: #3a2a18; background: #d9a86e; border-color: #d9a86e; }
.tp-name { font-size: 14.5px; font-weight: 700; color: #f2e3b8; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-status { font-size: 11.5px; color: #9fb0d8; white-space: nowrap; }
.tp-status.live { color: #9FD98A; }
.tp-steps { list-style: none; display: flex; flex-direction: column; gap: 9px; counter-reset: step; }
.tp-steps li { font-size: 13px; color: #c8cede; line-height: 1.55; padding-left: 26px; position: relative; counter-increment: step; }
.tp-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 1px; width: 18px; height: 18px;
  border-radius: 50%; background: rgba(232, 206, 142, .16); border: 1px solid rgba(232, 206, 142, .45);
  color: #ffd98a; font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.tp-sub { font-size: 12.5px; color: #8f9fc9; margin: 12px 0 6px; }
.tp-modes { font-size: 13px; color: #e8ce8e; line-height: 2; }
.tp-joinrow { width: 100%; }
.tp-joinrow .code-input { letter-spacing: 5px; font-size: 16px; }
.tp-joinrow .gold-btn { padding: 12px 18px; }
.tp-tip { font-size: 11.5px; color: #6f7ba0; line-height: 1.7; margin-top: auto; padding-top: 12px; }
.town-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; z-index: 5; }
.town-logo { font-size: 21px; font-weight: 800; color: #ffd98a; letter-spacing: 2px; text-shadow: 0 0 18px rgba(255, 217, 138, .45); font-family: "Songti SC", serif; }
.id-chip {
  display: flex; align-items: center; gap: 8px; border: 1px solid rgba(232, 206, 142, .4); background: rgba(13, 20, 48, .7);
  color: #e8e2cc; border-radius: 999px; padding: 6px 14px 6px 8px; font-size: 14px; cursor: pointer;
}
.id-avatar { font-size: 20px; }
.id-edit { opacity: .6; font-size: 12px; }
.town-scene { flex: 1; position: relative; overflow: hidden; min-height: 0; }
.town-scene > svg { width: 100%; height: 100%; display: block; }
.house-plot { cursor: default; }
.house-plot.has-room { cursor: pointer; }
.house-plot.has-room:hover { filter: brightness(1.25); }
.house-plot.has-room:active { filter: brightness(1.4); }
.build-plot { cursor: pointer; }
.build-plot:hover { filter: brightness(1.3); }
.room-phase { font-size: 12px; }
.town-bottom { padding: 8px 18px max(12px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; align-items: center; background: linear-gradient(180deg, transparent, rgba(8, 12, 34, .72) 45%); z-index: 5; }
.join-row { display: flex; gap: 10px; width: min(92vw, 420px); }
.code-input {
  flex: 1; text-align: center; letter-spacing: 8px; font-size: 20px; font-weight: 700; color: #ffd98a; text-transform: uppercase;
  background: rgba(13, 20, 48, .8); border: 1px solid rgba(232, 206, 142, .4); border-radius: 999px; outline: none; min-width: 0;
}
.code-input::placeholder { letter-spacing: 2px; font-size: 14px; color: #6f7ba0; }
.town-welcome { font-size: 12px; color: #8f9fc9; opacity: .85; }
.house-name-input, .ts-custom input {
  width: 100%; background: rgba(8, 12, 34, .7); border: 1px solid rgba(232, 206, 142, .35); color: #e8e2cc;
  border-radius: 12px; padding: 12px 14px; font-size: 15px; outline: none; text-align: center;
}
.pub-row { font-size: 14px; color: #b8b39a; }
.pub-row input { accent-color: #e8ce8e; }
.avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; width: 100%; }
.avatar-grid button {
  font-size: 24px; padding: 10px 0; border-radius: 14px; border: 1px solid rgba(232, 206, 142, .25);
  background: rgba(8, 12, 34, .6); cursor: pointer; transition: all .12s;
}
.avatar-grid button:hover { background: rgba(232, 206, 142, .15); }
.avatar-grid button.on { border-color: #ffd98a; background: rgba(232, 206, 142, .25); box-shadow: 0 0 12px rgba(255, 217, 138, .35); }

/* 萤火虫 */
.fireflies { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.fireflies i {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #d8f0a0; box-shadow: 0 0 8px 2px rgba(216, 240, 160, .5);
  animation: firefly linear infinite; opacity: 0;
}
@keyframes firefly {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .9; }
  50% { transform: translate(28px, -36px); opacity: .5; }
  90% { opacity: .8; }
}
.twinkle { animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.lamp-bulb { animation: lampGlow 3s ease-in-out infinite; }
@keyframes lampGlow { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }

/* 房屋窗户 */
.win-lit rect { fill: #ffd98a; }
.win-lit { filter: drop-shadow(0 0 7px rgba(255, 217, 138, .95)); }
.win-dark rect { fill: #1c2748; }
.smoke { opacity: 0; animation: smokeRise 3.2s ease-out infinite; }
.smoke.s2 { animation-delay: 1.1s; }
.smoke.s3 { animation-delay: 2.2s; }
@keyframes smokeRise {
  0% { opacity: 0; transform: translate(0, 0) scale(.7); }
  25% { opacity: .75; }
  100% { opacity: 0; transform: translate(-9px, -26px) scale(1.5); }
}
.house-svg { width: 100%; }
.house-svg svg { width: 100%; height: auto; display: block; }

/* ---------- 卡牌 ---------- */
.oh-card { position: relative; aspect-ratio: 5/7; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.oh-card .oh-card-inner, .oh-card .oh-svg { width: 100%; height: 100%; display: block; }
.oh-card.glow-card { box-shadow: 0 0 22px rgba(255, 217, 138, .4), 0 4px 14px rgba(0, 0, 0, .5); border: 1.5px solid rgba(255, 217, 138, .65); animation: cardBreath 2.6s ease-in-out infinite; }
@keyframes cardBreath { 0%, 100% { box-shadow: 0 0 16px rgba(255, 217, 138, .3), 0 4px 14px rgba(0, 0, 0, .5); } 50% { box-shadow: 0 0 30px rgba(255, 217, 138, .55), 0 4px 14px rgba(0, 0, 0, .5); } }
.card-corner-star { position: absolute; top: 6px; left: 8px; color: #ffd98a; font-size: 13px; text-shadow: 0 0 8px rgba(255, 217, 138, .8); }

.flip-card { perspective: 900px; aspect-ratio: 5/7; width: 100%; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2, .7, .3, 1); }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; }
.flip-back { transform: rotateY(180deg); }

/* 抽卡扇 */
.draw-overlay { background: linear-gradient(180deg, transparent 30%, rgba(8, 12, 34, .92) 55%); }
.draw-progress { font-size: 13px; color: #9fb0d8; margin-bottom: 8px; }
.fan-title { text-align: center; color: #ffd98a; font-size: 17px; font-weight: 700; margin-bottom: 14px; font-family: "Songti SC", serif; }
.fan-row { display: flex; justify-content: center; align-items: flex-end; gap: 4px; padding: 0 12px; }
.fan-card { width: clamp(56px, 15vw, 92px); aspect-ratio: 5/7; position: relative; cursor: pointer; transition: transform .25s, filter .25s; animation: fanIn .5s ease both; }
.fan-card:nth-child(1) { transform: rotate(-14deg) translateY(14px); animation-delay: 0s; }
.fan-card:nth-child(2) { transform: rotate(-7deg) translateY(4px); animation-delay: .06s; }
.fan-card:nth-child(3) { animation-delay: .12s; z-index: 2; }
.fan-card:nth-child(4) { transform: rotate(7deg) translateY(4px); animation-delay: .18s; }
.fan-card:nth-child(5) { transform: rotate(14deg) translateY(14px); animation-delay: .24s; }
@keyframes fanIn { from { opacity: 0; transform: translateY(40px) rotate(0deg); } }
.fan-card:hover { transform: translateY(-16px) scale(1.08) rotate(0deg) !important; z-index: 5; }
.fan-card .fan-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 217, 138, 0); font-size: 24px; transition: color .2s; }
.fan-card:hover .fan-hint { color: rgba(255, 217, 138, .9); }
.fan-card.picked { transform: translateY(-30px) scale(1.22) !important; z-index: 6; animation: pickGlow .5s ease; }
.fan-card.dimmed { opacity: .25; filter: grayscale(.8); }
@keyframes pickGlow { 0% { filter: brightness(1); } 40% { filter: brightness(1.8); } 100% { filter: brightness(1.15); } }
.fan-tip { text-align: center; color: #8f9fc9; font-size: 13px; margin-top: 16px; }
.draw-wait { color: #b8c3e0; font-size: 15px; padding: 34px 0 26px; text-align: center; }
.draw-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.draw-dots i { width: 8px; height: 8px; border-radius: 50%; background: #e8ce8e; animation: dotBounce 1.2s infinite; }
.draw-dots i:nth-child(2) { animation-delay: .15s; }
.draw-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dotBounce { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-7px); opacity: 1; } }

/* ---------- 房间 ---------- */
.room-screen { height: 100%; display: flex; flex-direction: column; position: relative; background: radial-gradient(ellipse at 50% 30%, #141c44 0%, #0b1030 70%); }
.room-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
.room-title { font-size: 17px; font-weight: 700; color: #f2e3b8; display: flex; align-items: center; gap: 8px; min-width: 0; }
.room-title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-mode-chip { font-size: 11px; border: 1px solid rgba(232, 206, 142, .4); border-radius: 999px; padding: 3px 9px; color: #e8ce8e; white-space: nowrap; }
.topbar-right { display: flex; gap: 8px; }
.reconnect-tip { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 200; background: rgba(13, 20, 48, .95); border: 1px solid rgba(232, 206, 142, .5); padding: 10px 22px; border-radius: 999px; font-size: 14px; color: #ffd98a; }

/* 能量条 */
.energy-bar { display: flex; align-items: center; gap: 10px; padding: 0 18px 8px; max-width: 760px; width: 100%; margin: 0 auto; }
.eb-icon { font-size: 17px; }
.eb-track { flex: 1; height: 14px; border-radius: 999px; background: rgba(8, 12, 34, .9); border: 1px solid rgba(232, 206, 142, .3); position: relative; overflow: hidden; }
.eb-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6e5a9e, #9a7ec9 40%, #ffd98a); transition: width .6s ease; position: relative; overflow: hidden; min-width: 0; }
.eb-shine { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); animation: ebShine 2.4s infinite; }
@keyframes ebShine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.eb-stars { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; color: #fff; text-shadow: 0 1px 3px #000; }
.eb-label { font-size: 11px; color: #9fb0d8; white-space: nowrap; }
.energy-bar.done .eb-fill { background: linear-gradient(90deg, #ffd98a, #ffe9ad); animation: donePulse 1.6s infinite; }
@keyframes donePulse { 0%, 100% { box-shadow: 0 0 6px rgba(255, 217, 138, .6); } 50% { box-shadow: 0 0 18px rgba(255, 217, 138, 1); } }

/* 围坐场景 */
.room-stage { flex: 1; position: relative; min-height: 0; }
.table-scene { position: absolute; inset: 0; max-width: 860px; margin: 0 auto; }
.floor { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(78%, 560px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(35, 48, 94, .55), rgba(13, 20, 48, .0) 72%); }
.table-glow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(46%, 300px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 217, 138, .28), rgba(255, 217, 138, 0) 70%); animation: tableGlow 3.5s ease-in-out infinite; }
@keyframes tableGlow { 0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
.table-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 130px; height: 130px; }
.deck-stack { position: absolute; inset: 0; animation: deckBob 3.4s ease-in-out infinite; }
@keyframes deckBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.deck-card { position: absolute; left: 50%; top: 50%; width: 56px; height: 78px; border-radius: 8px; border: 1.5px solid rgba(232, 206, 142, .5); background: linear-gradient(160deg, #2a3560, #141c44); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.deck-card::after { content: '✦'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #e8ce8e; font-size: 20px; }
.deck-card.d1 { transform: translate(-50%, -50%) rotate(-3deg); }
.deck-card.d2 { transform: translate(-50%, -52%) rotate(4deg) scale(.96); opacity: .85; }
.deck-card.d3 { transform: translate(-50%, -48%) rotate(-8deg) scale(.92); opacity: .7; }
.deck-stack.dealing { animation: deckBob 1s ease-in-out infinite; }
.table-sparkles i { position: absolute; color: #ffd98a; font-size: 13px; animation: sparkleFloat 3s ease-in-out infinite; opacity: 0; }
.table-sparkles i:nth-child(1) { left: -12px; top: 20%; }
.table-sparkles i:nth-child(2) { right: -16px; top: 30%; }
.table-sparkles i:nth-child(3) { left: 8%; bottom: 4%; }
.table-sparkles i:nth-child(4) { right: 10%; bottom: 0; }
.table-sparkles i:nth-child(5) { left: 45%; top: -18px; }
@keyframes sparkleFloat { 0%, 100% { opacity: 0; transform: translateY(4px) scale(.8); } 50% { opacity: 1; transform: translateY(-6px) scale(1.15); } }

/* 席位小屋 */
.seat { position: absolute; transform: translate(-50%, -50%); width: clamp(58px, 13vmin, 96px); text-align: center; transition: filter .3s; z-index: 10; }
.seat .house-svg { pointer-events: none; }
.seat.current { z-index: 20; }
.seat.current .house-svg { animation: seatPop .5s ease; filter: drop-shadow(0 0 18px rgba(255, 217, 138, .85)); }
@keyframes seatPop { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1.1); } }
.seat.current .house-svg { transform: scale(1.1); }
.seat.offline { filter: grayscale(1) brightness(.55); }
.seat-beam { position: absolute; left: 50%; bottom: 92%; transform: translateX(-50%); width: 130%; height: 200%; background: linear-gradient(to top, rgba(255, 217, 138, .28), transparent 75%); clip-path: polygon(28% 100%, 72% 100%, 100% 0, 0 0); pointer-events: none; animation: beamIn .6s ease; z-index: -1; }
@keyframes beamIn { from { opacity: 0; transform: translateX(-50%) scaleY(.3); } }
.seat-pill {
  margin-top: 5px; display: inline-flex; align-items: center; gap: 4px; max-width: 130px;
  background: rgba(10, 15, 38, .92); border: 1px solid rgba(143, 159, 201, .35); border-radius: 999px;
  font-size: clamp(10px, 1.9vmin, 13px); padding: 3px 9px; color: #d5d9e8; white-space: nowrap; overflow: hidden;
}
.seat-pill.gold { border-color: #ffd98a; color: #ffe9ad; box-shadow: 0 0 12px rgba(255, 217, 138, .4); font-weight: 700; }
.star-count { font-size: 10px; color: #ffd98a; }
.order-badge {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(180deg, #ffe9ad, #d4b06a); color: #4a3410; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

/* ---------- 大厅面板 ---------- */
.center-sheet { pointer-events: none; }
.lobby-panel {
  pointer-events: auto; background: linear-gradient(180deg, rgba(20, 28, 68, .96), rgba(13, 19, 48, .96));
  border: 1px solid rgba(232, 206, 142, .35); border-radius: 24px; padding: 22px 24px;
  width: min(92vw, 520px); max-height: 78%; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.lp-title { font-size: 19px; font-weight: 800; color: #ffd98a; text-align: center; font-family: "Songti SC", serif; }
.lp-count { text-align: center; color: #9fb0d8; font-size: 13px; }
.lp-label { font-size: 12px; color: #8f9fc9; margin-top: 4px; }
.lp-modes { display: flex; gap: 8px; }
.lp-mode { flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: center; padding: 10px 4px; border-radius: 14px; border: 1px solid rgba(143, 159, 201, .3); background: rgba(8, 12, 34, .5); color: #e8e2cc; cursor: pointer; transition: all .15s; }
.lp-mode b { font-size: 13px; }
.lp-mode i { font-style: normal; font-size: 10.5px; color: #8f9fc9; }
.lp-mode.on { border-color: #ffd98a; background: rgba(232, 206, 142, .14); box-shadow: 0 0 14px rgba(255, 217, 138, .25); }
.lp-mode.on i { color: #d4b06a; }
.lp-timers { display: flex; gap: 6px; flex-wrap: wrap; }
.lp-timer { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(143, 159, 201, .3); background: rgba(8, 12, 34, .5); color: #d5d9e8; font-size: 13px; cursor: pointer; }
.lp-timer.on { border-color: #ffd98a; background: rgba(232, 206, 142, .18); color: #ffe9ad; }
.lp-wait { text-align: center; color: #b8c3e0; font-size: 14px; padding: 8px 0; }
.lobby-panel .gold-btn { align-self: center; margin-top: 6px; }

/* ---------- 倒数 ---------- */
.countdown-overlay { z-index: 60; }
.count-big { font-size: clamp(90px, 22vw, 190px); font-weight: 900; color: #ffd98a; text-shadow: 0 0 40px rgba(255, 217, 138, .6); animation: countPop .9s ease both; font-family: "Songti SC", serif; }
@keyframes countPop { 0% { transform: scale(2.2); opacity: 0; } 40% { transform: scale(.95); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* ---------- 温牌仪式 ---------- */
.ritual-overlay { gap: 12px; }
.ritual-title { font-size: 24px; font-weight: 800; color: #ffd98a; font-family: "Songti SC", serif; }
.ritual-sub { color: #9fb0d8; font-size: 14px; }
.ritual-rings { display: flex; gap: clamp(8px, 2.4vw, 18px); flex-wrap: wrap; justify-content: center; max-width: 640px; }
.ritual-p { position: relative; width: 62px; text-align: center; }
.ritual-p svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rr-bg { fill: none; stroke: rgba(143, 159, 201, .25); stroke-width: 4; }
.rr-fg { fill: none; stroke: #ffd98a; stroke-width: 4; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .2s; }
.ritual-avatar { font-size: 30px; line-height: 60px; height: 60px; }
.ritual-p.done .ritual-avatar { animation: doneHop .6s ease; }
@keyframes doneHop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px) scale(1.2); } }
.ritual-name { font-size: 11px; color: #b8c3e0; margin-top: 3px; }
.hold-btn { min-width: 150px; }
.hold-btn.holding { filter: brightness(1.2); transform: scale(1.06); box-shadow: 0 0 26px rgba(255, 217, 138, .6); }
.hold-btn.holding .hold-label { display: inline-block; animation: wobble .5s infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.ritual-total { color: #e8ce8e; font-size: 14px; }
.ritual-total b { color: #ffd98a; font-size: 18px; }

/* ---------- 转盘 ---------- */
.order-overlay { gap: 14px; }
.order-title { font-size: 21px; color: #ffd98a; font-weight: 800; font-family: "Songti SC", serif; }
.wheel { width: 150px; height: 150px; border-radius: 50%; border: 3px dashed rgba(232, 206, 142, .6); position: relative; transition: transform 3.8s cubic-bezier(.15, .8, .25, 1); background: radial-gradient(circle, rgba(232, 206, 142, .12), transparent 70%); }
.wheel.spinning { box-shadow: 0 0 30px rgba(255, 217, 138, .3); }
.wheel-core { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; color: #ffd98a; text-shadow: 0 0 16px rgba(255, 217, 138, .7); }
.wheel-dot { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #ffd98a; box-shadow: 0 0 8px rgba(255, 217, 138, .8); }
.order-list { display: flex; flex-direction: column; gap: 5px; max-height: 32vh; overflow-y: auto; }
.order-item { background: rgba(13, 20, 48, .9); border: 1px solid rgba(232, 206, 142, .3); border-radius: 999px; padding: 5px 18px; font-size: 14px; animation: fadeIn .4s ease both; }
.order-no { color: #ffd98a; font-weight: 800; margin-right: 6px; }
.order-sub { color: #9fb0d8; font-size: 13px; }

/* ---------- 玩法介绍 ---------- */
.mi-card { text-align: center; padding: 34px 40px; background: linear-gradient(180deg, rgba(20, 28, 68, .95), rgba(13, 19, 48, .95)); border: 1px solid rgba(232, 206, 142, .4); border-radius: 26px; box-shadow: 0 0 40px rgba(255, 217, 138, .15); }
.mi-icon { font-size: 44px; margin-bottom: 10px; }
.mi-name { font-size: 22px; color: #ffd98a; font-weight: 800; font-family: "Songti SC", serif; }
.mi-desc { margin-top: 10px; color: #b8c3e0; font-size: 14px; max-width: 300px; }

/* ---------- 分享舞台 ---------- */
.share-stage {
  background: linear-gradient(180deg, rgba(20, 28, 68, .96), rgba(13, 19, 48, .97));
  border: 1px solid rgba(232, 206, 142, .4); border-radius: 24px; padding: 18px 20px;
  width: min(94vw, 560px); max-height: 72%; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55); position: relative;
}
.ss-header { display: flex; align-items: center; gap: 10px; }
.ss-avatar { font-size: 30px; }
.ss-name { font-size: 16px; font-weight: 700; color: #ffd98a; flex: 1; }
.ss-cards { display: flex; gap: 12px; justify-content: center; }
.ss-cards.three { gap: 8px; }
.ss-card-wrap { width: clamp(104px, 30vw, 150px); animation: cardIn .6s ease both; }
.ss-card-wrap:nth-child(2) { animation-delay: .15s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) rotate(3deg); } }
.ss-guide { display: flex; flex-direction: column; gap: 6px; min-height: 60px; }
.guide-line { color: #e8e2cc; font-size: 15px; padding: 8px 14px; background: rgba(8, 12, 34, .6); border-left: 3px solid #e8ce8e; border-radius: 8px; animation: fadeIn .5s ease both; }
.guide-enter-active { transition: all .5s ease; }
.guide-enter-from { opacity: 0; transform: translateX(-14px); }
.ss-listen { text-align: center; color: #9fb0d8; font-size: 14px; }
.ss-done { align-self: center; margin-top: 4px; }

/* 沙漏计时环 */
.timer-ring { position: relative; width: 52px; height: 52px; }
.timer-ring svg { width: 100%; height: 100%; }
.tr-bg { fill: rgba(8, 12, 34, .7); stroke: rgba(143, 159, 201, .3); stroke-width: 4; }
.tr-fg { fill: none; stroke: #ffd98a; stroke-width: 4; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 1s linear; }
.timer-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: #ffd98a; }
.timer-ring.urgent .tr-fg { stroke: #ff8a8a; }
.timer-ring.urgent span { color: #ff8a8a; animation: urgentBlink .6s infinite; }
@keyframes urgentBlink { 50% { opacity: .4; } }

/* ---------- 互动栏 ---------- */
.reaction-bar {
  position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; gap: 6px; align-items: center; background: rgba(10, 15, 38, .9); border: 1px solid rgba(232, 206, 142, .3);
  border-radius: 999px; padding: 7px 10px; z-index: 50; backdrop-filter: blur(6px); flex-wrap: wrap; max-width: 78vw;
}
.react-btn { font-size: 20px; background: none; border: none; cursor: pointer; transition: transform .12s; padding: 2px; }
.react-btn:hover { transform: scale(1.3); }
.star-btn {
  border: 1px solid #ffd98a; background: linear-gradient(180deg, rgba(255, 217, 138, .25), rgba(255, 217, 138, .1));
  color: #ffd98a; border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.star-btn:hover:not(:disabled) { background: rgba(255, 217, 138, .35); transform: scale(1.05); }
.star-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- 浮动表情 / 星星 / 流星 ---------- */
.reaction-layer { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.float-emoji { position: absolute; bottom: 8%; display: flex; flex-direction: column; align-items: center; animation: floatUp linear forwards; }
.fe-emoji { font-size: 34px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.fe-name { font-size: 11px; color: #b8c3e0; background: rgba(10, 15, 38, .8); padding: 1px 8px; border-radius: 999px; margin-top: 2px; }
@keyframes floatUp { 0% { transform: translateY(0) rotate(-4deg); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(-62vh) rotate(5deg); opacity: 0; } }
.starfly-layer { position: fixed; inset: 0; pointer-events: none; z-index: 71; }
.fly-star { position: absolute; left: 50%; top: 58%; font-size: 26px; animation: flyStar 1.1s ease-in forwards; }
@keyframes flyStar { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.4); opacity: 0; } }
.meteor-layer { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.meteor { position: absolute; top: -6%; width: 3px; height: 110px; background: linear-gradient(to bottom, rgba(255, 233, 173, .95), rgba(255, 233, 173, 0)); border-radius: 3px; transform: rotate(18deg); animation: meteorFall linear forwards; }
.meteor::before { content: ''; position: absolute; top: -4px; left: -2.5px; width: 8px; height: 8px; border-radius: 50%; background: #ffe9ad; box-shadow: 0 0 14px 4px rgba(255, 233, 173, .8); }
@keyframes meteorFall { 0% { transform: rotate(18deg) translateY(0); opacity: 0; } 12% { opacity: 1; } 100% { transform: rotate(18deg) translateY(115vh); opacity: .4; } }
.blessing { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); text-align: center; font-size: clamp(17px, 3.4vw, 25px); color: #ffe9ad; text-shadow: 0 0 24px rgba(255, 217, 138, .7); font-family: "Songti SC", serif; line-height: 1.9; background: rgba(8, 12, 34, .55); padding: 18px 30px; border-radius: 20px; border: 1px solid rgba(255, 217, 138, .35); }

/* ---------- Toast ---------- */
.toast-layer { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: rgba(13, 20, 48, .95); border: 1px solid rgba(232, 206, 142, .45); color: #e8e2cc; border-radius: 999px; padding: 9px 20px; font-size: 14px; display: flex; gap: 8px; align-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.toast.badge { border-color: #ffd98a; background: linear-gradient(180deg, rgba(74, 58, 20, .9), rgba(13, 20, 48, .95)); color: #ffe9ad; animation: badgePop .5s ease; }
@keyframes badgePop { 0% { transform: scale(.6); } 55% { transform: scale(1.12); } }
.toast-enter-active, .toast-leave-active { transition: all .4s ease; }
.toast-enter-from { opacity: 0; transform: translateY(-16px); }
.toast-leave-to { opacity: 0; transform: translateY(-10px); }

/* ---------- 我的专属席 ---------- */
.drawer-btn { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 46px; height: 46px; border-radius: 16px; border: 1px solid rgba(232, 206, 142, .4); background: rgba(10, 15, 38, .92); font-size: 20px; cursor: pointer; z-index: 50; }
.my-drawer {
  position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: 70px; width: min(84vw, 280px);
  background: linear-gradient(180deg, rgba(20, 28, 68, .97), rgba(13, 19, 48, .97)); border: 1px solid rgba(232, 206, 142, .4);
  border-radius: 20px; padding: 18px; z-index: 55; box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.drawer-enter-active, .drawer-leave-active { transition: all .3s ease; }
.drawer-enter-from, .drawer-leave-to { opacity: 0; transform: translateY(16px); }
.md-head { font-size: 16px; font-weight: 800; color: #ffd98a; margin-bottom: 12px; }
.md-card { display: flex; gap: 12px; align-items: center; background: rgba(8, 12, 34, .6); border-radius: 14px; padding: 12px; }
.md-avatar { font-size: 32px; }
.md-name { font-weight: 700; font-size: 15px; }
.md-stats { color: #9fb0d8; font-size: 12px; margin-top: 2px; }
.md-sub { font-size: 12px; color: #8f9fc9; margin: 12px 0 8px; }
.md-empty { color: #6f7ba0; font-size: 13px; }
.md-badge { display: flex; align-items: center; gap: 8px; background: rgba(8, 12, 34, .6); border-radius: 10px; padding: 7px 10px; margin-bottom: 6px; }
.mb-icon { font-size: 18px; }
.mb-name { font-size: 13px; color: #ffe9ad; }

/* ---------- QR ---------- */
.qr-code { background: #fff; padding: 10px; border-radius: 14px; line-height: 0; }
.qr-code svg { width: min(60vw, 220px); height: auto; }
.qr-code-text { color: #e8ce8e; font-size: 15px; }
.qr-code-text b { color: #ffd98a; font-size: 22px; letter-spacing: 6px; }
.qr-tip { color: #8f9fc9; font-size: 12.5px; }

/* ---------- 故事 ---------- */
.so-card { width: min(92vw, 480px); background: linear-gradient(180deg, rgba(20, 28, 68, .96), rgba(13, 19, 48, .96)); border: 1px solid rgba(232, 206, 142, .4); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 12px; max-height: 80%; overflow-y: auto; }
.so-title { font-size: 18px; font-weight: 800; color: #ffd98a; font-family: "Songti SC", serif; }
.so-sugs { display: flex; flex-direction: column; gap: 8px; }
.so-sugs .ghost-btn { text-align: left; padding: 11px 16px; font-size: 14px; line-height: 1.5; }
.so-card textarea, .si-right textarea {
  background: rgba(8, 12, 34, .7); border: 1px solid rgba(232, 206, 142, .35); color: #e8e2cc;
  border-radius: 14px; padding: 12px 14px; font-size: 15px; line-height: 1.6; resize: vertical; outline: none; width: 100%;
}
.so-wait { text-align: center; color: #9fb0d8; font-size: 13px; }
.story-input { background: linear-gradient(180deg, transparent 10%, rgba(8, 12, 34, .94) 30%); gap: 10px; }
.si-context { width: min(94vw, 600px); }
.si-label { font-size: 11.5px; color: #8f9fc9; }
.si-tail { color: #b8c3e0; font-size: 14px; background: rgba(8, 12, 34, .55); border-radius: 10px; padding: 8px 12px; margin-top: 4px; line-height: 1.6; }
.si-main { display: flex; gap: 14px; width: min(94vw, 600px); align-items: stretch; }
.si-card { width: 96px; flex-shrink: 0; }
.si-right { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.si-mine { color: #ffd98a; font-size: 14.5px; font-weight: 600; }
.si-avatar { font-size: 19px; }
.si-btns { display: flex; gap: 10px; justify-content: flex-end; width: min(94vw, 600px); }

.story-replay { padding: 18px; gap: 12px; }
.sr-head { text-align: center; font-size: 20px; font-weight: 800; color: #ffd98a; font-family: "Songti SC", serif; }
.sr-tip { font-size: 12.5px; color: #9fb0d8; font-weight: 400; margin-top: 6px; font-family: inherit; }
.sr-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; max-width: 640px; width: 100%; margin: 0 auto; padding: 4px 6px; }
.sr-opening { text-align: center; color: #e8dcc0; font-size: 16px; font-family: "Songti SC", serif; padding: 14px; background: rgba(8, 12, 34, .5); border-radius: 14px; border: 1px dashed rgba(232, 206, 142, .35); }
.sr-part { position: relative; background: rgba(20, 28, 68, .8); border: 1px solid rgba(143, 159, 201, .3); border-radius: 16px; padding: 12px 14px; }
.sr-part.best { border-color: #ffd98a; box-shadow: 0 0 18px rgba(255, 217, 138, .3); }
.sr-meta { font-size: 13px; color: #ffd98a; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.sr-avatar { font-size: 18px; }
.sr-crown { animation: crownBlink 1.2s infinite; }
@keyframes crownBlink { 50% { transform: scale(1.25); } }
.sr-body { display: flex; gap: 12px; }
.sr-card { width: 76px; flex-shrink: 0; }
.sr-text { color: #d5d9e8; font-size: 14.5px; line-height: 1.8; flex: 1; }
.flower-btn { position: absolute; right: 10px; bottom: 8px; background: rgba(8, 12, 34, .7); border: 1px solid rgba(232, 206, 142, .4); color: #e8ce8e; border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.flower-btn:hover:not(:disabled) { background: rgba(232, 206, 142, .2); }
.flower-btn:disabled { opacity: .5; cursor: not-allowed; }
.sr-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #e8ce8e; font-size: 14px; max-width: 640px; width: 100%; margin: 0 auto; }

/* ---------- 牌阵主题 ---------- */
.theme-select { gap: 12px; }
.ts-title { font-size: 20px; color: #ffd98a; font-weight: 800; font-family: "Songti SC", serif; }
.ts-list { display: flex; flex-direction: column; gap: 9px; width: min(92vw, 420px); }
.ts-item { text-align: left; background: rgba(20, 28, 68, .85); border: 1.5px solid rgba(143, 159, 201, .3); color: #e8e2cc; border-radius: 16px; padding: 12px 18px; cursor: pointer; transition: all .15s; }
.ts-item.on { border-color: #ffd98a; background: rgba(232, 206, 142, .13); }
.ts-name { font-weight: 700; font-size: 15.5px; }
.ts-pos { color: #8f9fc9; font-size: 12.5px; margin-top: 3px; }
.ts-custom { display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); }
.ts-labels { display: flex; gap: 8px; }
.spread-cards { display: flex; gap: 10px; justify-content: center; }
.sp-col { display: flex; flex-direction: column; gap: 6px; align-items: center; width: clamp(88px, 26vw, 132px); }
.sp-label { font-size: 12.5px; color: #ffd98a; border: 1px solid rgba(232, 206, 142, .45); padding: 2px 12px; border-radius: 999px; background: rgba(8, 12, 34, .6); }
.sp-guide { font-size: 11.5px; color: #9fb0d8; text-align: center; line-height: 1.5; }
.sp-note { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.sp-note input { flex: 1; min-width: 200px; background: rgba(8, 12, 34, .7); border: 1px solid rgba(232, 206, 142, .35); color: #e8e2cc; border-radius: 999px; padding: 10px 16px; font-size: 13.5px; outline: none; }

/* ---------- 颁奖 ---------- */
.award-overlay { gap: 8px; }
.award-crown { font-size: 74px; animation: crownPop .8s cubic-bezier(.2, 1.4, .4, 1) both; filter: drop-shadow(0 0 24px rgba(255, 217, 138, .8)); }
@keyframes crownPop { from { transform: scale(0) rotate(-30deg); } }
.award-title { font-size: 24px; color: #ffd98a; font-weight: 800; font-family: "Songti SC", serif; }
.award-names { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.award-name { background: rgba(20, 28, 68, .9); border: 1px solid #ffd98a; color: #ffe9ad; border-radius: 999px; padding: 8px 20px; font-size: 16px; }
.award-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.award-confetti i { position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px; background: #ffd98a; opacity: .85; animation: confettiFall linear infinite; }
.award-confetti i:nth-child(3n) { background: #9a7ec9; }
.award-confetti i:nth-child(3n+1) { background: #7fc9c4; }
@keyframes confettiFall { to { transform: translateY(108vh) rotate(720deg); } }

/* ---------- 结算 ---------- */
.summary-screen { gap: 10px; padding: 16px; }
.sum-head { text-align: center; }
.sum-title { font-size: 24px; color: #ffd98a; font-weight: 800; font-family: "Songti SC", serif; }
.sum-sub { color: #9fb0d8; font-size: 13px; margin-top: 4px; }
.poster { flex: 1; min-height: 0; width: min(94vw, 560px); margin: 0 auto; border-radius: 18px; overflow: hidden; border: 1px solid rgba(232, 206, 142, .45); box-shadow: 0 14px 44px rgba(0, 0, 0, .5); }
.poster svg { width: 100%; height: 100%; display: block; }
.sum-actions { display: flex; gap: 12px; align-items: center; }
.sum-wait { color: #9fb0d8; font-size: 13.5px; }

/* ---------- 大屏模式 ---------- */
.bigscreen .room-stage .table-scene { max-width: 1100px; }
.bigscreen .share-stage, .bigscreen .spread-stage { width: min(94vw, 760px); }
.bigscreen .ss-name { font-size: 22px; }
.bigscreen .ss-avatar { font-size: 40px; }
.bigscreen .guide-line { font-size: 20px; }
.bigscreen .ss-listen { font-size: 18px; }
.bigscreen .seat { width: clamp(70px, 11vmin, 120px); }
.bigscreen .seat-pill { font-size: 15px; }
.bigscreen .energy-bar { max-width: 900px; height: 22px; }
.bigscreen .eb-track { height: 20px; }
.bigscreen .lp-title { font-size: 24px; }
.bigscreen .reaction-layer { display: none; }

/* ---------- 响应式 ---------- */
@media (max-width: 640px) {
  .town-topbar { padding: 10px 12px; }
  .town-logo { font-size: 17px; }
  .ss-cards { gap: 8px; }
  .ss-card-wrap { width: clamp(96px, 42vw, 130px); }
  .reaction-bar { max-width: 62vw; }
  .react-btn { font-size: 17px; }
  .si-card { width: 76px; }
  .sr-card { width: 62px; }
  .lobby-panel { padding: 16px; }
  .lp-modes { flex-wrap: wrap; }
  .lp-mode { min-width: 45%; }
  .spread-cards { gap: 6px; }
  .sp-col { width: clamp(80px, 29vw, 110px); }
}
@media (max-height: 640px) {
  .table-center { width: 104px; height: 104px; }
  .seat { width: clamp(50px, 11vmin, 80px); }
}

/* ============ 双人探索小屋「遇见未知的自己」 ============ */
.explore-screen {
  height: 100%; display: flex; flex-direction: column; position: relative;
  background: radial-gradient(ellipse at 50% 0%, #1b2350 0%, #101736 45%, #0a0f26 100%);
  color: #e8e2cc; overflow: hidden;
}
.ex-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 6px; flex-shrink: 0; }
.ex-title { font-size: 15.5px; font-weight: 700; color: #ffd98a; font-family: "Songti SC", serif; white-space: nowrap; }

/* 环节进度条（6段） */
.ex-progress { display: flex; gap: 4px; padding: 0 12px 8px; flex-shrink: 0; }
.exp-seg {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px 2px; border-radius: 10px; border: 1px solid rgba(232, 206, 142, .18);
  background: rgba(13, 19, 48, .5); transition: all .25s;
}
.exp-seg.done { border-color: rgba(159, 217, 138, .4); background: rgba(30, 42, 30, .45); }
.exp-seg.current { border-color: #FFD98A; background: rgba(232, 206, 142, .14); box-shadow: 0 0 12px rgba(255, 217, 138, .25); }
.exp-idx {
  font-style: normal; font-size: 10px; width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(232, 206, 142, .16); color: #cbb77e;
}
.exp-seg.current .exp-idx { background: #FFD98A; color: #3A2A10; font-weight: 800; }
.exp-seg.done .exp-idx { background: #9FD98A; color: #1E2A1E; }
.exp-name { font-size: 9.5px; color: #8f9fc9; white-space: nowrap; transform: scale(.94); }
.exp-seg.current .exp-name { color: #ffe9ad; font-weight: 700; }

/* 主体 */
.ex-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 12px 8px; }

/* 主持人 */
.host-area { display: flex; gap: 9px; align-items: flex-start; }
.host-avatar {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #4a3a1e, #241c10); border: 1.5px solid #C9A24E; font-size: 16px;
}
.host-bubbles { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.host-bubble {
  background: linear-gradient(180deg, rgba(28, 38, 78, .95), rgba(18, 25, 55, .95));
  border: 1px solid rgba(232, 206, 142, .3); border-left: 3px solid #C9A24E;
  border-radius: 4px 14px 14px 14px; padding: 10px 13px; font-size: 13.5px; line-height: 1.72; color: #ded7c2;
}
.more-wrap { margin-top: 2px; }
.more-toggle {
  width: 100%; text-align: left; background: rgba(232, 206, 142, .08); border: 1px dashed rgba(232, 206, 142, .38);
  color: #e8ce8e; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; cursor: pointer;
}
.more-body {
  margin-top: 6px; padding: 11px 13px; font-size: 12.5px; line-height: 1.75; color: #b9c0d8;
  background: rgba(8, 12, 30, .7); border-radius: 10px; border: 1px solid rgba(143, 159, 201, .22);
}

/* 席位区 */
.seat-area { display: flex; flex-direction: column; gap: 7px; }
.opp-area { padding-top: 2px; }
.my-area { padding-top: 2px; }
.seat-line { display: flex; align-items: center; gap: 7px; }
.seat-av { font-size: 20px; }
.seat-nm { font-size: 14px; font-weight: 700; color: #f2e3b8; }
.seat-tag { font-size: 10.5px; color: #8f9fc9; border: 1px solid rgba(143, 159, 201, .3); border-radius: 999px; padding: 1px 8px; }
.seat-ready { font-size: 10.5px; color: #9FD98A; border: 1px solid rgba(159, 217, 138, .45); border-radius: 999px; padding: 1px 8px; }
.seat-off { font-size: 10.5px; color: #d98a8a; border: 1px solid rgba(217, 138, 138, .4); border-radius: 999px; padding: 1px 8px; }
.card-row { display: flex; gap: 7px; flex-wrap: wrap; min-height: 4px; }
.card-empty { font-size: 12px; color: #6f7ba0; padding: 8px 0; }

/* 卡牌 */
.xc { position: relative; width: 62px; flex-shrink: 0; }
.xc.small { width: 52px; }
.xc img, .xc-ph, .xc-back { width: 100%; aspect-ratio: 5/7; border-radius: 7px; display: block; object-fit: cover; }
.xc-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1.5px solid; color: #f0e6cc;
}
.xc-ph-num { font-size: 19px; font-weight: 800; letter-spacing: 1px; font-family: "Songti SC", serif; }
.xc-ph-tag { font-size: 9px; opacity: .72; }
.xc-back {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #1d2650, #1d2650 5px, #232e5e 5px, #232e5e 10px);
  border: 1.5px solid rgba(232, 206, 142, .34); color: #8f9fc9; font-size: 17px;
}
.xc-label {
  margin-top: 3px; font-size: 9.5px; text-align: center; color: #b8b39a;
  background: rgba(8, 12, 30, .7); border-radius: 6px; padding: 1px 3px; line-height: 1.3;
}
.xc.highlight .xc-ph, .xc.highlight img { box-shadow: 0 0 0 2px #FFD98A, 0 0 14px rgba(255, 217, 138, .5); }
.xc.down { opacity: .9; }

/* 中央牌堆 */
.deck-area { display: flex; justify-content: center; padding: 6px 0 2px; }
.deck {
  position: relative; width: 84px; height: 118px; border-radius: 10px; cursor: default;
  background: linear-gradient(150deg, #26305e, #141c44); border: 1.6px solid rgba(232, 206, 142, .45);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.deck::before, .deck::after {
  content: ''; position: absolute; inset: 0; border-radius: 10px; border: 1.4px solid rgba(232, 206, 142, .3);
  background: linear-gradient(150deg, #222b56, #121a40);
}
.deck::before { transform: translate(-4px, 4px); z-index: -1; }
.deck::after { transform: translate(-8px, 8px); z-index: -2; }
.deck.active { cursor: pointer; border-color: #FFD98A; box-shadow: 0 0 22px rgba(255, 217, 138, .45), 0 6px 20px rgba(0, 0, 0, .5); }
.deck.active:active { transform: scale(.97); }
.deck-star { font-size: 24px; color: #ffd98a; }
.deck-tip { font-size: 10.5px; color: #b8c3e0; text-align: center; padding: 0 6px; }

/* 彩虹卡：居中放大 */
.rainbow-slot { display: flex; align-items: center; gap: 10px; padding: 8px 0 2px; }
.rainbow-slot .xc { width: 92px; }
.rb-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 206, 142, .5), transparent); }

/* 文本对话区 */
.text-zone { display: flex; flex-direction: column; gap: 6px; }
.tz-row {
  display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 12px;
  font-size: 13px; line-height: 1.65;
}
.tz-row.my { background: rgba(232, 206, 142, .1); border: 1px solid rgba(232, 206, 142, .3); }
.tz-row.opp { background: rgba(28, 38, 78, .8); border: 1px solid rgba(143, 159, 201, .3); }
.tz-label { font-size: 10.5px; color: #9fb0d8; }
.tz-row.my .tz-label { color: #e8ce8e; }
.tz-text { color: #ded7c2; white-space: pre-wrap; word-break: break-word; }

/* R2 四扇窗造句 */
.r2-zone { display: flex; flex-direction: column; gap: 9px; }
.r2-item { background: rgba(13, 19, 48, .72); border: 1px solid rgba(232, 206, 142, .24); border-radius: 14px; padding: 10px 12px; }
.r2-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.r2-name { font-size: 13.5px; font-weight: 700; color: #ffd98a; }
.r2-done { font-size: 11px; color: #9FD98A; }
.r2-body { display: flex; gap: 9px; align-items: flex-start; }
.r2-body textarea {
  flex: 1; min-width: 0; background: rgba(8, 12, 30, .75); border: 1px solid rgba(232, 206, 142, .3);
  color: #e8e2cc; border-radius: 10px; padding: 8px 10px; font-size: 13px; line-height: 1.6; resize: vertical; outline: none;
}
.r2-body textarea:disabled { opacity: .6; }
.mini-btn {
  flex-shrink: 0; border: 1px solid rgba(232, 206, 142, .5); background: rgba(232, 206, 142, .14);
  color: #ffd98a; border-radius: 9px; padding: 8px 12px; font-size: 12.5px; cursor: pointer;
}

/* 冥想 */
.meditate-box {
  text-align: center; padding: 22px 16px; border-radius: 18px;
  background: radial-gradient(ellipse at center, rgba(60, 80, 160, .35), rgba(10, 15, 38, .6));
  border: 1px solid rgba(232, 206, 142, .3);
}
.mt-time { font-size: 42px; font-weight: 800; color: #ffe9ad; font-family: "Songti SC", serif; letter-spacing: 3px; }
.mt-text { margin-top: 10px; font-size: 13.5px; color: #b8c3e0; line-height: 1.9; }
.mt-bar { margin-top: 14px; height: 4px; border-radius: 4px; background: rgba(143, 159, 201, .25); overflow: hidden; }
.mt-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6e5a9e, #ffd98a); transition: width 1s linear; }

/* 底部操作区 */
.ex-bottom {
  flex-shrink: 0; padding: 10px 14px max(12px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  background: linear-gradient(180deg, transparent, rgba(6, 9, 24, .92) 40%);
  border-top: 1px solid rgba(232, 206, 142, .16);
}
.input-line textarea {
  width: 100%; background: rgba(8, 12, 30, .8); border: 1px solid rgba(232, 206, 142, .34);
  color: #e8e2cc; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.6; resize: vertical; outline: none;
}
.wait-line { text-align: center; font-size: 13px; color: #9fb0d8; padding: 6px 0; }
.ex-btn { width: 100%; }
.ex-btn.disabled { opacity: .5; }
.ex-hint { text-align: center; font-size: 11.5px; color: #ffd98a; }
.ex-hint.opp { color: #8f9fc9; }

/* 大厅 */
.ex-lobby { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(6, 9, 24, .86); z-index: 20; }
.lobby-card {
  width: min(94vw, 420px); background: linear-gradient(180deg, rgba(28, 38, 78, .97), rgba(14, 20, 48, .97));
  border: 1px solid rgba(232, 206, 142, .42); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.lc-title { font-size: 20px; font-weight: 800; color: #ffd98a; text-align: center; font-family: "Songti SC", serif; }
.lc-sub { text-align: center; font-size: 12.5px; color: #9fb0d8; margin-top: -6px; }
.lc-players { display: flex; flex-direction: column; gap: 7px; }
.lc-p {
  display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-radius: 13px;
  background: rgba(8, 12, 30, .6); border: 1px solid rgba(232, 206, 142, .24);
}
.lc-p.empty { border-style: dashed; color: #6f7ba0; }
.lc-av { font-size: 22px; }
.lc-nm { font-size: 14.5px; font-weight: 700; color: #f2e3b8; flex: 1; }
.lc-p.empty .lc-nm { color: #6f7ba0; font-weight: 400; font-size: 13.5px; }
.lc-role { font-size: 11px; color: #8f9fc9; }
.lc-crown { font-size: 10.5px; color: #ffd98a; border: 1px solid rgba(255, 217, 138, .45); border-radius: 999px; padding: 1px 8px; }
.lc-tip { text-align: center; font-size: 12.5px; color: #b8c3e0; }
.lc-wait { text-align: center; font-size: 13px; color: #9fb0d8; padding: 6px 0; }
.lc-ready { font-size: 10.5px; color: #9fd98a; border: 1px solid rgba(159, 217, 138, .45); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.lc-off { font-size: 10.5px; color: #e89aa8; border: 1px solid rgba(232, 154, 168, .4); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.lc-start { align-self: center; margin-top: 4px; letter-spacing: 10px; text-indent: 10px; }
.lc-startwait { text-align: center; font-size: 13px; color: #9fb0d8; padding: 4px 0; }
.lc-startwait.go { color: #9fd98a; }

/* 回看视图 */
.sum-wrap { height: 100%; overflow-y: auto; padding: 14px 12px 30px; display: flex; flex-direction: column; gap: 12px; }
.sum-title { text-align: center; font-size: 19px; font-weight: 800; color: #ffd98a; font-family: "Songti SC", serif; }
.sum-sub { text-align: center; font-size: 12px; color: #9fb0d8; margin-top: -6px; }
.sum-player { background: rgba(13, 19, 48, .78); border: 1px solid rgba(232, 206, 142, .26); border-radius: 16px; padding: 13px; display: flex; flex-direction: column; gap: 9px; }
.sum-phead { display: flex; align-items: center; gap: 8px; }
.sum-sec { font-size: 11.5px; color: #8f9fc9; margin-top: 2px; }
.sum-txt { font-size: 13px; line-height: 1.7; color: #ded7c2; white-space: pre-wrap; word-break: break-word;
  background: rgba(8, 12, 30, .55); border-radius: 10px; padding: 8px 11px; }
.sum-txt .k { color: #e8ce8e; font-size: 11.5px; display: block; margin-bottom: 2px; }

@media (min-width: 720px) {
  .ex-body { max-width: 620px; width: 100%; margin: 0 auto; }
  .ex-bottom { max-width: 620px; width: 100%; margin: 0 auto; }
  .ex-top, .ex-progress { max-width: 620px; width: 100%; margin: 0 auto; }
  .xc { width: 76px; } .xc.small { width: 62px; }
  .deck { width: 96px; height: 134px; }
}
/* ============ 插画小镇（背景图 + 门牌 + 流星） ============ */
.town-scene.art {
  background: linear-gradient(180deg, #121a36 0%, #1a2547 34%, #22292b 72%, #161a14 100%);
  position: relative;
}
.town-scene.art > svg { width: 100%; height: 100%; display: block; }

/* 门牌浮动 */
.theme-pin, .mini-pin { cursor: pointer; transform-box: fill-box; transform-origin: center; animation: pinFloat 4s ease-in-out infinite; }
.theme-pin:hover, .mini-pin:hover { filter: brightness(1.15) drop-shadow(0 0 10px rgba(255, 217, 138, .7)); }
.theme-pin:active { filter: brightness(1.3); }
@keyframes pinFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.build-pin { animation-delay: .3s; }
.plus-pulse { animation: plusPulse 1.8s ease-in-out infinite; }
@keyframes plusPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.live-dot { animation: liveBlink 1.6s ease-in-out infinite; }
@keyframes liveBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* 窄屏：右上角小屋入口 + 紧凑面板 */
.tl-toggle {
  position: absolute; top: 8px; right: 10px; z-index: 7;
  display: flex; align-items: center; gap: 6px;
  background: rgba(13, 19, 48, .88); border: 1px solid rgba(232, 206, 142, .5);
  color: #f2e3b8; border-radius: 999px; padding: 7px 13px; font-size: 14px; font-weight: 700;
  cursor: pointer; backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(4, 6, 18, .4);
}
.tl-toggle.open { border-color: #ffd98a; background: rgba(30, 42, 30, .92); }
.tlt-icon { font-size: 16px; }
.tlt-badge {
  min-width: 17px; height: 17px; border-radius: 999px; background: #9FD98A; color: #1E2A1E;
  font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}
.tlt-arrow { font-size: 10px; opacity: .7; }
.tl-toggle:active { transform: scale(.96); }

.theme-list.tr-list {
  position: absolute; top: 52px; right: 10px; z-index: 7;
  width: min(64vw, 250px); display: flex; flex-direction: column; gap: 5px;
  max-height: 58vh; overflow-y: auto; padding: 8px;
  background: rgba(10, 15, 38, .92); border: 1px solid rgba(232, 206, 142, .4);
  border-radius: 18px; backdrop-filter: blur(8px); box-shadow: 0 12px 32px rgba(4, 6, 18, .5);
}
.tlist-enter-active, .tlist-leave-active { transition: all .22s ease; }
.tlist-enter-from, .tlist-leave-to { opacity: 0; transform: translateY(-8px) scale(.96); }

.tl-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: rgba(13, 20, 48, .6); border: 1px solid rgba(232, 206, 142, .28);
  border-radius: 12px; padding: 8px 11px; cursor: pointer; color: #e8e2cc;
  transition: all .15s; text-align: left;
}
.tl-row:active { transform: scale(.98); }
.tl-row.active { border-color: #9FD98A; }
.tl-row.build { border-style: dashed; }
.tl-icon { font-size: 18px; width: 24px; text-align: center; }
.tl-name { font-size: 13.5px; font-weight: 700; color: #f2e3b8; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-status { font-size: 11px; color: #9fb0d8; white-space: nowrap; }
.tl-status.live { color: #9FD98A; }

/* 星空微闪 */
.town-twinkle { animation: twinkle 3.4s ease-in-out infinite; }

/* 流星（天空区循环划过） */
.town-meteors { position: absolute; inset: 0 0 55% 0; pointer-events: none; overflow: hidden; z-index: 2; }
.tm {
  position: absolute; top: 6%; width: 3px; height: 90px; border-radius: 3px;
  background: linear-gradient(to bottom, rgba(255, 240, 200, .95), rgba(255, 240, 200, 0));
  transform: rotate(16deg); opacity: 0;
  animation: townMeteor linear infinite;
}
.tm::before {
  content: ''; position: absolute; top: -4px; left: -2.5px; width: 8px; height: 8px; border-radius: 50%;
  background: #FFF4D0; box-shadow: 0 0 14px 5px rgba(255, 240, 200, .75);
}
.tm1 { left: 8%; animation-duration: 11s; animation-delay: 2s; }
.tm2 { left: 38%; animation-duration: 14s; animation-delay: 6s; }
.tm3 { left: 62%; animation-duration: 12s; animation-delay: 9s; }
.tm4 { left: 84%; animation-duration: 15s; animation-delay: 4s; }
@keyframes townMeteor {
  0% { transform: rotate(16deg) translate(0, -120px); opacity: 0; }
  6% { opacity: 1; }
  16% { transform: rotate(16deg) translate(120px, 70vh); opacity: 0; }
  100% { transform: rotate(16deg) translate(120px, 70vh); opacity: 0; }
}

.sum-foot { text-align: center; font-size: 12.5px; color: #8f9fc9; padding: 14px 0 6px; }

.tp-row.explore { border-color: rgba(255, 217, 138, .55); background: linear-gradient(90deg, rgba(201, 162, 78, .18), rgba(13, 20, 48, .72)); }
.tl-row.explore-row { border-color: rgba(255, 217, 138, .5); background: linear-gradient(90deg, rgba(201, 162, 78, .16), rgba(13, 20, 48, .6)); }
.explore-ring { animation: ringSpin 26s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes ringSpin { to { transform: rotate(360deg); } }

.exp-min { font-size: 8.5px; color: #6f7ba0; }
.exp-seg.current .exp-min { color: #d4b06a; }

/* ============ 管理员：拖动首页小屋图标 ============ */
.town-topbar-right { display: flex; align-items: center; gap: 10px; }
.admin-modal { min-width: min(86vw, 320px); }
.admin-input {
  width: 100%; background: rgba(8, 12, 34, .7); border: 1px solid rgba(232, 206, 142, .35); color: #e8e2cc;
  border-radius: 12px; padding: 11px 14px; font-size: 15px; outline: none;
}
.admin-input:focus { border-color: #e8ce8e; box-shadow: 0 0 0 3px rgba(232, 206, 142, .12); }
.admin-err { font-size: 13px; color: #ff9c9c; }
.admin-note { font-size: 14px; color: #d8cba8; line-height: 1.7; text-align: center; }
.admin-hint {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  background: rgba(10, 14, 36, .85); border: 1px solid rgba(232, 206, 142, .45);
  border-radius: 999px; padding: 8px 16px; color: #ffe9ad; font-size: 13px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .4); backdrop-filter: blur(4px);
  animation: fadeIn .4s ease both; pointer-events: auto;
}
.admin-hint button {
  background: rgba(232, 206, 142, .14); border: 1px solid rgba(232, 206, 142, .45); color: #e8ce8e;
  border-radius: 999px; padding: 3px 12px; font-size: 12px; cursor: pointer; transition: all .15s;
}
.admin-hint button:hover { background: rgba(232, 206, 142, .3); }
/* 首页背景音乐署名（CC BY 4.0 要求） */
.bgm-credit {
  position: absolute; left: 12px; bottom: 10px; z-index: 6; pointer-events: none;
  color: rgba(232, 226, 204, .4); font-size: 10px; letter-spacing: .3px;
}
@media (max-width: 719px) { .bgm-credit { font-size: 9px; bottom: 6px; left: 8px; } }
/* 管理员在场时光标提示；拖动中停掉悬浮动画，保证跟手 */
.town-scene.admin .theme-pin, .town-scene.admin .mini-pin { cursor: grab; touch-action: none; }
.theme-pin.dragging { cursor: grabbing !important; animation: none !important; filter: brightness(1.2) drop-shadow(0 0 12px rgba(255, 217, 138, .8)); }
@media (max-width: 919px) {
  .admin-hint { bottom: auto; top: 58px; font-size: 12px; padding: 6px 12px; gap: 8px; }
}

/* ---------- 备案号 ---------- */
#beian-footer {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  z-index: 9000; text-align: center; display: block; white-space: nowrap;
  padding: 2px 10px;
  font-size: 11px; line-height: 1.4; letter-spacing: .3px;
  color: rgba(232, 226, 204, .42); text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  transition: color .2s;
}
#beian-footer:hover { color: rgba(232, 206, 142, .85); }