:root {
  --bg: #1c0f16;
  --app: #241019;
  --ink: #fff8f3;
  --muted: #e6cad2;
  --dim: #c29ba8;
  --rose: #e39aa9;
  --rose-deep: #b7637a;
  --gold: #e0b77d;
  --line: rgba(255, 255, 255, 0.16);
  --card: rgba(84, 40, 55, 0.86);
  --card-deep: rgba(54, 24, 37, 0.94);
  --shadow: 0 14px 28px rgba(0, 0, 0, 0.32);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 0%, rgba(190, 82, 117, 0.2), transparent 28rem),
    radial-gradient(circle at 96% 18%, rgba(216, 166, 105, 0.12), transparent 24rem),
    linear-gradient(160deg, #21101a 0%, #120a10 64%, #0d070b 100%);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.hidden { display: none !important; }

.app {
  width: min(100%, 430px);
  margin: 0 auto;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 0%, rgba(214, 94, 130, 0.28), transparent 30%),
    radial-gradient(circle at 92% 24%, rgba(225, 174, 118, 0.13), transparent 28%),
    radial-gradient(circle at 50% 96%, rgba(110, 50, 88, 0.24), transparent 48%),
    linear-gradient(180deg, #522138 0%, #391a29 36%, #271322 68%, #1a0c15 100%);
  position: relative;
  padding-bottom: 86px;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.5);
}

/* ---------- hero ---------- */
.hero {
  height: 326px;
  position: relative;
  padding: 18px 18px 0;
  background:
    linear-gradient(180deg, rgba(24, 10, 17, 0.08) 0%, rgba(24, 10, 17, 0.03) 34%, rgba(29, 14, 22, 0.86) 100%),
    url("assets/hero.png") center 36% / cover no-repeat;
}
.statusbar { display: flex; justify-content: space-between; padding: 2px 4px 12px; font-size: 10px; color: rgba(255, 255, 255, 0.62); }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(45, 18, 28, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffd8e0;
  font-size: 18px;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 20px rgba(0, 0, 0, 0.24);
}
.brand b { display: block; font-size: 17px; letter-spacing: 0.02em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); }
.brand small { display: block; margin-top: 4px; font-size: 10px; color: rgba(255, 240, 235, 0.8); }
.top-actions { display: flex; gap: 8px; }
.icon-btn {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(255, 240, 235, 0.86);
  font-size: 16px;
  background: rgba(30, 12, 20, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
}
.hero-copy { position: absolute; left: 18px; right: 18px; bottom: 44px; }
.hero-copy h1 {
  margin: 0 0 8px;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: 30px;
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.72);
}
.hero-copy p { margin: 0; font-size: 11px; color: rgba(255, 235, 232, 0.82); }
.badges { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.badges span {
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(33, 14, 23, 0.52);
  color: rgba(255, 242, 238, 0.9);
  font-size: 9px;
  backdrop-filter: blur(8px);
}

/* ---------- shell ---------- */
.content { padding: 0 14px; position: relative; z-index: 2; }
.random-cta {
  width: 100%;
  height: 52px;
  margin-top: -27px;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 19px;
  border-radius: 999px;
  border: 1px solid rgba(255, 199, 211, 0.55);
  background: linear-gradient(145deg, rgba(145, 61, 85, 0.98), rgba(88, 35, 53, 0.98));
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.34),
    0 0 28px rgba(190, 93, 114, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -8px 16px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(12px);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.random-left { display: flex; align-items: center; gap: 9px; font-size: 14px; letter-spacing: 0.02em; }
.spark { color: #ffd2dd; font-size: 17px; }
.random-arrow { color: #ffd2dd; font-size: 22px; }
.random-cta:active { transform: translateY(1px) scale(0.995); }

.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 16px 0 21px; }
.cat {
  min-height: 104px;
  padding: 12px 9px 11px;
  border-radius: 17px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -10px 18px rgba(0, 0, 0, 0.16);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.cat::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 55%);
  pointer-events: none;
}
.cat-play { background: linear-gradient(145deg, rgba(158, 70, 92, 0.96), rgba(92, 38, 56, 0.97)); }
.cat-know { background: linear-gradient(145deg, rgba(132, 82, 128, 0.96), rgba(76, 44, 82, 0.97)); }
.cat-experience { background: linear-gradient(145deg, rgba(166, 108, 82, 0.96), rgba(96, 58, 51, 0.97)); }
.cat:active { transform: translateY(1px) scale(0.995); }
.cat-icon {
  width: 29px; height: 29px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  color: #ffe4ea;
  font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 12px rgba(0, 0, 0, 0.18);
}
.cat b { display: block; margin-top: 7px; font-size: 14px; }
.cat small { display: block; margin-top: 4px; font-size: 9px; line-height: 1.35; color: rgba(255, 240, 235, 0.72); }

.block { margin-bottom: 22px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 10px; }
.section-head h2 { margin: 0; font-size: 15px; letter-spacing: 0.04em; }
.section-head small { font-size: 9px; color: var(--dim); }

/* ---------- hot cards ---------- */
.hot-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 2px 1px 8px;
}
.hot-row::-webkit-scrollbar { display: none; }
.hot-card {
  width: 100%;
  min-height: 146px;
  padding: 8px 8px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(145deg, rgba(93, 44, 60, 0.96), rgba(54, 25, 39, 0.98));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -10px 18px rgba(0, 0, 0, 0.18);
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.hot-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 40%);
  pointer-events: none;
}
.hot-card:active { transform: translateY(1px) scale(0.995); }
.hot-tag {
  position: absolute; right: 8px; top: 8px;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 7px;
  color: #ffd9e1;
  background: rgba(120, 40, 58, 0.75);
  border: 1px solid rgba(255, 190, 205, 0.25);
}
.hot-visual {
  height: 88px;
  display: grid;
  place-items: center;
  margin-bottom: 2px;
}
.game-glyph {
  width: 58px; height: 58px;
  border-radius: 16px;
  display: grid; place-items: center;
  color: #fff;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.04em;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.3), transparent 32%),
    linear-gradient(145deg, var(--accent, #a85f78), rgba(34, 13, 22, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 12px 18px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -8px 12px rgba(0, 0, 0, 0.22);
  transform: perspective(180px) rotateX(8deg) rotateY(-9deg);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.hot-card b { display: block; font-size: 11px; line-height: 1.28; margin: 0 3px; }
.hot-card small { display: block; font-size: 8px; line-height: 1.35; color: var(--dim); margin: 3px 3px 0; }

/* ---------- filters ---------- */
.chips { display: flex; gap: 7px; overflow-x: auto; padding: 1px 1px 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  font-size: 10px;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.chip.active {
  color: var(--ink);
  background: linear-gradient(90deg, rgba(150, 59, 82, 0.92), rgba(112, 42, 61, 0.92));
  border-color: rgba(255, 190, 205, 0.35);
  box-shadow: 0 0 18px rgba(174, 78, 100, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* ---------- compact game rows ---------- */
.game-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.game-row {
  min-height: 70px;
  padding: 9px 9px 9px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(145deg, rgba(87, 41, 56, 0.96), rgba(49, 23, 35, 0.98));
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.3),
    0 3px 0 rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -8px 14px rgba(0, 0, 0, 0.14);
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.game-row::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 48%);
  pointer-events: none;
}
.game-row:active { transform: translateY(1px) scale(0.997); }
.mini-glyph {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 600;
  color: #fff;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.28), transparent 32%),
    linear-gradient(145deg, var(--accent, #a85f78), rgba(34, 13, 22, 0.68));
  border: 1px solid rgba(255, 255, 255, 0.19);
  box-shadow:
    0 7px 12px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -6px 10px rgba(0, 0, 0, 0.2);
  transform: perspective(160px) rotateX(7deg) rotateY(-9deg);
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.35);
}
.game-row .row-text { min-width: 0; flex: 1; position: relative; z-index: 1; }
.game-row b { display: block; font-size: 11px; line-height: 1.28; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-row small { display: block; margin-top: 3px; font-size: 8px; line-height: 1.35; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.game-row .row-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 5px;
  border-radius: 999px;
  font-size: 7px;
  color: #f4c7d1;
  border: 1px solid rgba(255, 190, 205, 0.2);
  background: rgba(120, 42, 60, 0.24);
}
.game-row .chev { color: rgba(255, 220, 228, 0.38); font-size: 14px; margin-left: 1px; }

.footnote { margin: 4px 2px 0; text-align: center; font-size: 9px; line-height: 1.55; color: var(--dim); }

/* ---------- bottom nav ---------- */
.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 430px);
  height: 68px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: linear-gradient(180deg, rgba(37, 17, 27, 0.94), rgba(20, 9, 15, 0.97));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 40;
}
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #9b7a87; font-size: 9px; }
.nav-item i { font-style: normal; font-size: 17px; }
.nav-item.active { color: #ffd5de; }

/* ---------- sheet / modal ---------- */
.sheet { position: fixed; inset: 0; z-index: 80; display: grid; place-items: end center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(5, 2, 4, 0.7); backdrop-filter: blur(4px); }
.sheet-card {
  position: relative;
  width: min(100%, 430px);
  max-height: 82vh;
  overflow: auto;
  border-radius: 24px 24px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-bottom: 0;
  background: linear-gradient(180deg, #2b1621, #180c13);
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.5);
  padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0));
  animation: sheetIn 220ms var(--ease);
}
@keyframes sheetIn { from { transform: translateY(18px); opacity: 0.5; } to { transform: translateY(0); opacity: 1; } }
.sheet-close { position: absolute; right: 12px; top: 10px; width: 34px; height: 34px; font-size: 24px; color: var(--dim); }
.sheet h2 { margin: 0 0 8px; font-family: "Songti SC", "STSong", serif; font-size: 24px; }
.sheet p { margin: 0 0 14px; font-size: 12px; line-height: 1.65; color: var(--muted); }
.sheet .detail-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.sheet .detail-meta span { font-size: 9px; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px; }
.sheet-actions { display: flex; gap: 8px; margin-top: 16px; }

/* ---------- game view ---------- */
.game-view {
  position: fixed;
  inset: 0;
  z-index: 90;
  background:
    radial-gradient(circle at 70% 0%, rgba(130, 55, 78, 0.22), transparent 28rem),
    linear-gradient(180deg, #401b2a 0%, #24121d 45%, #170c13 100%);
  overflow: auto;
  width: min(100%, 430px);
  margin: 0 auto;
  padding: 0 16px 34px;
}
.game-view-top { display: flex; align-items: center; justify-content: space-between; height: 62px; padding-top: env(safe-area-inset-top, 0); }
.game-view-top #gameViewKicker { font-size: 9px; letter-spacing: 0.18em; color: var(--dim); }
.back-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.04); font-size: 18px; }
.game-view-body { padding-top: 10px; }
.game-view h2 { margin: 0 0 8px; font-family: "Songti SC", "STSong", serif; font-size: 27px; line-height: 1.25; }
.game-view .lede { margin: 0 0 18px; font-size: 12px; line-height: 1.65; color: var(--muted); }

/* ---------- play UI ---------- */
.play-shell { max-width: 390px; margin: 0 auto; }
.step-label { font-size: 9px; letter-spacing: 0.14em; color: var(--gold); margin: 0 0 9px; }
.zone-list { display: flex; flex-direction: column; gap: 9px; }
.zone-card {
  text-align: left;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(145deg, rgba(92,44,59,.96), rgba(52,25,38,.98));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.1);
}
.zone-card b { display: block; font-size: 14px; margin-bottom: 4px; }
.zone-card small { display: block; font-size: 10px; line-height: 1.45; color: var(--dim); }
.question-card {
  padding: 18px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, rgba(101,47,64,.97), rgba(56,25,39,.98));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -12px 22px rgba(0,0,0,.18);
  position: relative;
  overflow: hidden;
}
.question-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%); pointer-events: none; }
.question-card .q-index { font-size: 9px; letter-spacing: .14em; color: var(--gold); margin-bottom: 12px; }
.question-card h3 { margin: 0 0 16px; font-family: "Songti SC", "STSong", serif; font-size: 20px; line-height: 1.5; font-weight: 500; }
textarea {
  width: 100%;
  min-height: 104px;
  resize: vertical;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(12,6,10,.45);
  color: var(--ink);
  padding: 12px;
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
}
textarea:focus { outline: 2px solid rgba(227,154,169,.55); outline-offset: 1px; }
.btn-row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.btn {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--ink);
  font-size: 12px;
}
.btn.primary {
  background: linear-gradient(145deg, rgba(167,73,99,.96), rgba(108,39,60,.96));
  border-color: rgba(255,190,205,.38);
  box-shadow: 0 10px 20px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn.ghost { color: var(--muted); }
.handoff-card {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 18px;
}
.seal {
  width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px dashed rgba(227,154,169,.65);
  background: radial-gradient(circle at 40% 30%, rgba(255,180,198,.15), rgba(45,18,28,.8));
  color: var(--rose);
  font-size: 30px;
  margin-bottom: 18px;
  box-shadow: 0 14px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
.handoff-card h3 { margin: 0 0 8px; font-family: "Songti SC", "STSong", serif; font-size: 24px; }
.handoff-card p { margin: 0 0 18px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.reveal-grid { display: flex; flex-direction: column; gap: 9px; margin: 14px 0; }
.reveal-card { padding: 14px; border-radius: 15px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); }
.reveal-card b { display: block; font-size: 9px; letter-spacing: .12em; color: var(--gold); margin-bottom: 7px; }
.reveal-card p { margin: 0; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.reveal-card.skipped p { color: var(--dim); font-style: italic; }
.progress-dots { display: flex; gap: 5px; margin: 12px 0 18px; }
.progress-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.18); }
.progress-dots i.on { background: var(--rose); }

/* need cards */
.need-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.need-card {
  min-height: 104px;
  text-align: left;
  padding: 12px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(145deg, rgba(91,43,58,.96), rgba(50,23,36,.98));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.1);
}
.need-card.selected { border-color: rgba(255,190,205,.55); background: linear-gradient(145deg, rgba(135,55,78,.95), rgba(63,25,40,.96)); }
.need-card b { display: block; font-size: 14px; margin-bottom: 5px; }
.need-card small { display: block; font-size: 9px; line-height: 1.4; color: var(--dim); }
.result-card {
  padding: 16px;
  border-radius: 17px;
  border: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(145deg, rgba(98,46,63,.97), rgba(53,24,37,.98));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.12);
  margin-bottom: 9px;
}
.result-card .r-label { font-size: 9px; letter-spacing: .12em; color: var(--gold); margin-bottom: 8px; }
.result-card p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink); }
.result-card .r-sub { margin-top: 7px; font-size: 10px; line-height: 1.55; color: var(--dim); }
.divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); margin: 16px 0; }
.mini-note { font-size: 10px; line-height: 1.55; color: var(--dim); }

/* toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 86px;
  transform: translateX(-50%);
  z-index: 120;
  width: max-content;
  max-width: 86vw;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(25,12,19,.94);
  color: var(--ink);
  font-size: 11px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

/* desktop */
@media (min-width: 900px) {
  body { padding: 28px 0 48px; }
  .app { width: min(980px, calc(100% - 48px)); border-radius: 28px; overflow: hidden; }
  .hero { height: 390px; padding: 22px 28px 0; }
  .hero-copy { left: 28px; right: 28px; bottom: 28px; }
  .hero-copy h1 { font-size: 42px; }
  .hero-copy p { font-size: 13px; }
  .badges span { font-size: 10px; }
  .content { padding: 0 26px; }
  .random-cta { max-width: 520px; margin-left: auto; margin-right: auto; }
  .cats { gap: 13px; margin-top: 22px; }
  .cat { min-height: 122px; padding: 16px; }
  .cat b { font-size: 16px; }
  .cat small { font-size: 10px; }
  .hot-row { grid-template-columns: repeat(4, 1fr); }
  .hot-card { min-height: 164px; }
  .hot-visual { height: 104px; }
  .game-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .game-row { min-height: 76px; }
  .game-row b { font-size: 12px; }
  .game-row small { font-size: 9px; }
  .bottom-nav { width: min(980px, calc(100% - 48px)); border-radius: 0 0 28px 28px; }
  .sheet-card { width: min(560px, calc(100% - 48px)); border-radius: 24px; margin-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.13); }
  .game-view { width: min(720px, calc(100% - 48px)); border-radius: 24px; margin-top: 24px; margin-bottom: 24px; padding: 0 28px 44px; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
  .play-shell { max-width: 560px; }
}

@media (hover: hover) and (pointer: fine) {
  .cat:hover, .hot-card:hover, .game-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -8px 14px rgba(0,0,0,.14);
  }
  .random-cta:hover { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.empty-state {
  grid-column: 1 / -1;
  padding: 24px 16px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 16px;
  text-align: center;
  font-size: 11px;
  line-height: 1.6;
  color: var(--dim);
}


.btn[disabled] {
  opacity: .42;
  cursor: not-allowed;
  box-shadow: none;
}


/* ---------- draw card ---------- */
.card-stage {
  perspective: 1500px;
  margin: 10px auto 0;
  width: 100%;
}
.card-scene {
  width: min(100%, 310px);
  aspect-ratio: 716 / 1024;
  margin: 0 auto;
  position: relative;
}
.card-scene::before,
.card-scene::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 92%;
  height: 100%;
  transform: translateX(-50%) rotate(-1.5deg);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(96, 45, 62, 0.55), rgba(38, 17, 28, 0.8));
  border: 1px solid rgba(255, 220, 200, 0.16);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
  z-index: -1;
}
.card-scene::after {
  width: 96%;
  bottom: -12px;
  transform: translateX(-50%) rotate(1.2deg);
  opacity: .55;
}
.card {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
  border-radius: 20px;
  cursor: pointer;
  outline: none;
}
.card.is-flipped { transform: rotateY(180deg); }
.card:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.card-face {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid rgba(255, 225, 205, 0.42);
  box-shadow:
    0 30px 50px rgba(0, 0, 0, 0.42),
    0 4px 0 rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  overflow: hidden;
}
.card-back {
  background-image: url("assets/card-back.png");
}
.card-front {
  background-image: url("assets/card-front.png");
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 23% 13% 25%;
}
.card-back-hint {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 8px;
  letter-spacing: .12em;
  color: rgba(255, 240, 225, 0.8);
  background: rgba(25, 10, 17, 0.42);
  border: 1px solid rgba(255, 220, 195, 0.24);
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.card-kicker {
  position: absolute;
  top: 15.5%;
  left: 8%;
  right: 8%;
  text-align: center;
  font-size: 8px;
  letter-spacing: .13em;
  color: #8b5e45;
}
.card-text {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 18px 10px;
  border-radius: 24px;
  background: radial-gradient(ellipse at center, rgba(255, 250, 241, 0.88) 0%, rgba(255, 250, 241, 0.58) 56%, rgba(255, 250, 241, 0) 100%);
  color: #4c2b22;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: clamp(16px, 4.4vw, 21px);
  line-height: 1.75;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.card-serif-star {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(145, 92, 55, 0.55);
  font-size: 14px;
}
.draw-hint {
  margin: 16px 0 10px;
  text-align: center;
  font-size: 10px;
  line-height: 1.55;
  color: var(--dim);
}
.draw-actions { justify-content: center; }
@media (min-width: 900px) {
  .card-scene { width: 330px; }
  .card-text { font-size: 21px; }
}

/* ---------- v0.3 home hierarchy ---------- */
.hero { overflow: hidden; }
.hero-glow {
  position: absolute;
  right: 3%;
  top: 4%;
  width: 58%;
  height: 72%;
  pointer-events: none;
  background: radial-gradient(ellipse at 58% 42%, rgba(255, 196, 157, 0.38), rgba(255, 137, 125, 0.14) 36%, transparent 68%);
  filter: blur(18px);
  mix-blend-mode: screen;
  animation: lampBreathe 5.8s ease-in-out infinite;
  z-index: 1;
}
@keyframes lampBreathe {
  0%, 100% { opacity: .55; transform: scale(.98); }
  50% { opacity: .95; transform: scale(1.04); }
}
.topbar { position: relative; z-index: 2; }
.hero-copy { z-index: 2; }

.text-link {
  padding: 0;
  color: var(--dim);
  font-size: 10px;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.text-link span { color: var(--gold); font-size: 14px; }
.featured-block { margin-top: 4px; }
.spotlight-card {
  width: 100%;
  min-height: 174px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 17px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 214, 200, 0.22);
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 189, 164, 0.24), transparent 34%),
    linear-gradient(145deg, rgba(132, 53, 76, 0.96), rgba(67, 27, 44, 0.98));
  box-shadow:
    0 20px 34px rgba(0, 0, 0, 0.34),
    0 4px 0 rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -16px 30px rgba(0, 0, 0, 0.14);
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.spotlight-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.1), transparent 42%);
  pointer-events: none;
}
.spotlight-card:active { transform: translateY(2px) scale(.995); }
.spotlight-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}
.spotlight-eyebrow {
  font-size: 8px;
  letter-spacing: .16em;
  color: #ffd9c9;
  border: 1px solid rgba(255, 218, 198, .42);
  background: rgba(77, 29, 43, .4);
  border-radius: 999px;
  padding: 4px 7px;
  margin-bottom: 8px;
}
.spotlight-copy b {
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: .02em;
}
.spotlight-copy small {
  display: block;
  margin-top: 7px;
  max-width: 190px;
  font-size: 10px;
  line-height: 1.5;
  color: rgba(255, 236, 230, .78);
}
.spotlight-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 10px;
  color: #ffe4d9;
}
.spotlight-cta i { font-style: normal; font-size: 15px; color: var(--gold); }
.spotlight-art {
  width: 96px;
  flex: 0 0 96px;
  position: relative;
  display: grid;
  place-items: center;
  z-index: 1;
}
.spotlight-ring {
  position: absolute;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1px solid rgba(255, 219, 198, .22);
  box-shadow: 0 0 24px rgba(255, 183, 144, .12), inset 0 0 16px rgba(255, 213, 190, .1);
}
.spotlight-glyph {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 600;
  color: #fff8f4;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.38), transparent 32%),
    linear-gradient(145deg, var(--accent, #c46b84), rgba(76, 27, 43, .75));
  border: 1px solid rgba(255, 235, 220, .3);
  box-shadow:
    0 16px 24px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -10px 14px rgba(0,0,0,.2);
  transform: perspective(180px) rotateX(9deg) rotateY(-10deg);
  text-shadow: 0 2px 9px rgba(0,0,0,.3);
}
.featured-wrap { margin-top: 10px; }
.featured-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.featured-row::-webkit-scrollbar { display: none; }
.feature-card {
  flex: 0 0 150px;
  min-height: 164px;
  scroll-snap-align: start;
  padding: 10px 9px 11px;
  border-radius: 17px;
  border: 1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.08), transparent 45%),
    linear-gradient(145deg, rgba(83, 40, 55, 0.94), rgba(42, 18, 30, 0.97));
  box-shadow:
    0 12px 22px rgba(0,0,0,.26),
    0 3px 0 rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.13);
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.feature-card.wide { flex-basis: 206px; }
.feature-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 38%);
  pointer-events: none;
}
.feature-card:active { transform: translateY(2px) scale(.992); }
.feature-icon {
  height: 68px;
  display: grid;
  place-items: center;
  margin-bottom: 2px;
}
.feature-icon .game-glyph {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-size: 18px;
}
.feature-card b {
  display: block;
  margin: 0 3px;
  font-size: 12px;
  line-height: 1.3;
}
.feature-card small {
  display: block;
  margin: 4px 3px 0;
  font-size: 8px;
  line-height: 1.4;
  color: var(--dim);
}
.preview-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.simple-row {
  min-height: 64px;
  padding: 9px 9px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: background 160ms var(--ease), transform 160ms var(--ease);
}
.simple-row:active { transform: scale(.992); background: rgba(255,255,255,.06); }
.simple-row .mini-glyph {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 14px;
  flex: 0 0 auto;
}
.simple-row .row-text { min-width: 0; flex: 1; }
.simple-row b { display: block; font-size: 11px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simple-row small { display: block; margin-top: 3px; font-size: 8px; line-height: 1.35; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simple-row .chev { color: rgba(255,220,228,.32); font-size: 13px; }
.text-link { background: none; border: 0; }

/* library */
.library-view {
  position: fixed;
  inset: 0;
  z-index: 84;
  width: min(100%, 430px);
  margin: 0 auto;
  overflow: auto;
  padding: 0 16px 44px;
  background:
    radial-gradient(circle at 12% 0%, rgba(214,94,130,.24), transparent 32%),
    radial-gradient(circle at 92% 26%, rgba(225,174,118,.12), transparent 30%),
    linear-gradient(180deg, #4a1e32 0%, #301524 42%, #1a0d16 100%);
  transform: translateY(12px);
  transition: transform 220ms var(--ease);
}
.library-view.is-open { transform: translateY(0); }
.library-top {
  height: 62px;
  padding-top: env(safe-area-inset-top, 0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--dim);
}
.library-head { padding: 10px 2px 18px; }
.library-head h2 {
  margin: 0;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: 28px;
  line-height: 1.28;
  font-weight: 500;
}
.library-head .step-label { margin-bottom: 8px; }
.library-count { letter-spacing: 0; }
.library-view .chips { margin-bottom: 14px; }
.library-view .game-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.library-view .simple-row { animation: riseIn 360ms var(--ease) both; animation-delay: calc(var(--i) * 22ms); }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* random draw transition */
.random-overlay {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  background: rgba(8, 3, 7, 0.76);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 220ms var(--ease);
}
.random-overlay.show { opacity: 1; }
.random-overlay.done { opacity: 0; }
.random-draw-stage { text-align: center; perspective: 1200px; }
.random-draw-card {
  width: 188px;
  height: 268px;
  margin: 0 auto 16px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 620ms cubic-bezier(.2,.8,.2,1);
}
.random-draw-card.flip { transform: rotateY(180deg); }
.random-face {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid rgba(255,225,205,.4);
  box-shadow: 0 24px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.32);
  background-size: cover;
  background-position: center;
}
.random-back { background-image: url("assets/card-back.png"); }
.random-front {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 20px;
  color: #4c2b22;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,250,241,.92), rgba(255,245,230,.7) 60%, rgba(236,210,188,.65)),
    linear-gradient(145deg, #f7ead7, #d8b195);
}
.random-front .random-kicker { font-size: 8px; letter-spacing: .16em; color: #9b6a4e; }
.random-front b { font-family: "Songti SC", "STSong", serif; font-size: 20px; text-align: center; line-height: 1.35; }
.random-front small { font-size: 9px; line-height: 1.5; color: #7a5543; text-align: center; }
.random-caption { font-size: 10px; color: var(--muted); letter-spacing: .06em; }

@media (min-width: 900px) {
  .spotlight-card { min-height: 196px; padding: 22px 22px 20px 24px; }
  .spotlight-copy b { font-size: 28px; }
  .spotlight-copy small { font-size: 11px; }
  .spotlight-art { width: 132px; flex-basis: 132px; }
  .spotlight-ring { width: 124px; height: 124px; }
  .spotlight-glyph { width: 98px; height: 98px; font-size: 34px; border-radius: 28px; }
  .feature-card { flex-basis: 190px; min-height: 178px; }
  .feature-card.wide { flex-basis: 250px; }
  .feature-icon { height: 80px; }
  .feature-icon .game-glyph { width: 62px; height: 62px; font-size: 21px; }
  .feature-card b { font-size: 13px; }
  .feature-card small { font-size: 9px; }
  .preview-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .library-view { width: min(720px, calc(100% - 48px)); border-radius: 24px; margin-top: 24px; margin-bottom: 24px; padding: 0 28px 44px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
  .library-view .game-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .random-draw-card { width: 220px; height: 314px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-glow { animation: none; opacity: .72; }
  .library-view, .random-overlay, .feature-card, .spotlight-card, .simple-row { transition: none; }
  .library-view .simple-row { animation: none; }
}

/* simple rows use a flat icon; keep the 3D tilt only on featured cards */
.simple-row .mini-glyph {
  transform: none;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -5px 8px rgba(0, 0, 0, 0.16);
}

.featured-wrap { position: relative; }
.featured-wrap::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 8px;
  width: 26px;
  background: linear-gradient(90deg, transparent, rgba(40, 17, 28, 0.92));
  pointer-events: none;
}

/* ---------- v0.4 game-lobby polish ---------- */
html, body, .app, .library-view, .game-view, .featured-row, .sheet-card {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar, .app::-webkit-scrollbar,
.library-view::-webkit-scrollbar, .game-view::-webkit-scrollbar,
.featured-row::-webkit-scrollbar, .sheet-card::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

.ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: .95;
  background:
    radial-gradient(circle at 16% 64%, rgba(214, 84, 122, 0.16), transparent 30%),
    radial-gradient(circle at 88% 78%, rgba(226, 168, 104, 0.13), transparent 28%),
    radial-gradient(circle at 52% 94%, rgba(116, 60, 102, 0.18), transparent 34%);
}
.ambient::before,
.ambient::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(42px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.ambient::before {
  width: 72%;
  height: 38%;
  left: -18%;
  top: 4%;
  background: radial-gradient(circle, rgba(228, 96, 138, .34), rgba(160, 60, 94, .08) 48%, transparent 72%);
  animation: driftRose 18s ease-in-out infinite alternate;
}
.ambient::after {
  width: 64%;
  height: 40%;
  right: -20%;
  top: 34%;
  background: radial-gradient(circle, rgba(226, 167, 104, .2), rgba(128, 80, 128, .08) 46%, transparent 72%);
  animation: driftGold 23s ease-in-out infinite alternate;
}
@keyframes driftRose {
  from { transform: translate3d(-2%, 0, 0) scale(.96); opacity: .55; }
  to { transform: translate3d(8%, 12%, 0) scale(1.08); opacity: .95; }
}
@keyframes driftGold {
  from { transform: translate3d(4%, -4%, 0) scale(1.04); opacity: .4; }
  to { transform: translate3d(-10%, 10%, 0) scale(.94); opacity: .78; }
}

/* screen entrance / exit */
.game-view {
  transform: translateY(12px) scale(.985);
  transition: transform 260ms var(--ease);
  will-change: transform;
}
.game-view.is-open { transform: translateY(0) scale(1); }
.library-view { will-change: opacity, transform; }
.featured-row { scroll-behavior: smooth; overscroll-behavior-x: contain; }
.spotlight-card, .feature-card, .simple-row { -webkit-tap-highlight-color: transparent; }
.spotlight-card:focus-visible, .feature-card:focus-visible, .simple-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .ambient::before, .ambient::after { animation: none; }
  .game-view { transition: none; }
}


.feature-nav { display: flex; gap: 6px; }
.feature-nav button {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
}
.feature-nav button:active { transform: scale(.92); background: rgba(255,255,255,.1); }

/* =========================================================
   v0.5 · immersive scene cards + mood themes
   ========================================================= */
[data-theme="night"] {
  --ink: #fff4fa;
  --muted: #d9c9e3;
  --dim: #a996b9;
  --accent: #e7a0b5;
  --accent-2: #8b7bd8;
  --gold: #e3b88a;
  --card-bg: linear-gradient(145deg, rgba(61, 45, 90, 0.92), rgba(25, 22, 50, 0.96));
  --card-bg-strong: rgba(33, 26, 53, 0.82);
  --card-border: rgba(255, 203, 231, 0.42);
  --card-glow: rgba(191, 135, 235, 0.3);
  --border-1: rgba(255, 205, 231, 0.8);
  --border-2: rgba(134, 111, 220, 0.64);
  --row-bg: rgba(50, 39, 72, 0.48);
  --row-border: rgba(229, 193, 226, 0.16);
  --overlay-bg:
    radial-gradient(circle at 15% 0%, rgba(132, 87, 196, 0.28), transparent 32%),
    radial-gradient(circle at 90% 18%, rgba(226, 119, 164, 0.16), transparent 30%),
    linear-gradient(180deg, #211a33 0%, #16172b 52%, #0f1320 100%);
  --tab-bg: linear-gradient(135deg, rgba(104, 75, 158, 0.84), rgba(54, 42, 92, 0.9));
  --tab-glow: rgba(149, 117, 226, 0.28);
  --orb-a: #e7a0b5;
  --orb-b: #8b7bd8;
}
[data-theme="arcade"] {
  --ink: #f8f6ff;
  --muted: #d4c7dc;
  --dim: #a595b2;
  --accent: #ff4d9d;
  --accent-2: #00f0ff;
  --gold: #ffd36e;
  --card-bg: linear-gradient(145deg, rgba(43, 41, 57, 0.94), rgba(18, 18, 27, 0.97));
  --card-bg-strong: rgba(24, 24, 34, 0.9);
  --card-border: rgba(255, 92, 169, 0.46);
  --card-glow: rgba(255, 46, 147, 0.24);
  --border-1: rgba(255, 77, 157, 0.9);
  --border-2: rgba(0, 240, 255, 0.72);
  --row-bg: rgba(35, 33, 46, 0.62);
  --row-border: rgba(255, 126, 184, 0.18);
  --overlay-bg:
    radial-gradient(circle at 12% 0%, rgba(255, 46, 147, 0.24), transparent 30%),
    radial-gradient(circle at 88% 22%, rgba(0, 240, 255, 0.15), transparent 30%),
    linear-gradient(135deg, #121218 0%, #17131e 48%, #0d0c12 100%);
  --tab-bg: linear-gradient(135deg, rgba(197, 36, 112, 0.82), rgba(45, 41, 76, 0.9));
  --tab-glow: rgba(255, 46, 147, 0.24);
  --orb-a: #ff4d9d;
  --orb-b: #00f0ff;
}
[data-theme="daily"] {
  --ink: #fff7ef;
  --muted: #e6d0c0;
  --dim: #b99f8d;
  --accent: #f0b08a;
  --accent-2: #d98d86;
  --gold: #f3c98f;
  --card-bg: linear-gradient(145deg, rgba(82, 63, 54, 0.94), rgba(44, 33, 30, 0.97));
  --card-bg-strong: rgba(54, 41, 37, 0.88);
  --card-border: rgba(255, 218, 184, 0.44);
  --card-glow: rgba(240, 176, 138, 0.2);
  --border-1: rgba(255, 220, 180, 0.86);
  --border-2: rgba(208, 137, 118, 0.62);
  --row-bg: rgba(66, 50, 43, 0.55);
  --row-border: rgba(255, 213, 180, 0.15);
  --overlay-bg:
    radial-gradient(circle at 16% 0%, rgba(255, 208, 164, 0.2), transparent 32%),
    radial-gradient(circle at 88% 28%, rgba(228, 133, 122, 0.12), transparent 28%),
    linear-gradient(180deg, #1c1816 0%, #261e1c 58%, #15110f 100%);
  --tab-bg: linear-gradient(135deg, rgba(158, 97, 73, 0.84), rgba(75, 54, 47, 0.92));
  --tab-glow: rgba(240, 176, 138, 0.2);
  --orb-a: #f0b08a;
  --orb-b: #d98d86;
}

html, body { height: 100%; overflow: hidden; }
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(100, 55, 95, 0.22), transparent 42rem),
    #08060c;
}
.app {
  width: min(100%, 460px);
  height: 100dvh;
  min-height: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: #0b0812;
  box-shadow: 0 0 90px rgba(0, 0, 0, 0.65);
}
@media (min-width: 760px) {
  .app { height: min(920px, calc(100dvh - 48px)); border-radius: 32px; }
}
.scene-stack { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.scene-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 820ms var(--ease);
}
.scene-layer.active { opacity: 1; }
.scene-night {
  background:
    radial-gradient(circle at 18% 4%, rgba(154, 117, 255, 0.28), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(255, 145, 188, 0.16), transparent 30%),
    linear-gradient(180deg, #1a1528 0%, #14162b 48%, #0f172a 100%);
}
.scene-night::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/hero.png") center top / 100% auto no-repeat;
  opacity: .14;
  mix-blend-mode: screen;
}
.scene-arcade {
  background:
    radial-gradient(circle at 12% 2%, rgba(255, 46, 147, 0.3), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(0, 240, 255, 0.18), transparent 28%),
    linear-gradient(135deg, #121218 0%, #17131e 52%, #0d0c12 100%);
}
.scene-arcade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 34px, rgba(0, 240, 255, .035) 35px 36px);
  opacity: .8;
}
.scene-daily {
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 208, 164, 0.24), transparent 34%),
    radial-gradient(circle at 88% 26%, rgba(228, 133, 122, 0.13), transparent 30%),
    linear-gradient(180deg, #1c1816 0%, #261e1c 56%, #15110f 100%);
}
.scene-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.app-head, .stage-wrap, .theme-tabs { position: relative; z-index: 3; }

.app-head {
  height: calc(64px + env(safe-area-inset-top, 0));
  flex: 0 0 auto;
  padding: calc(14px + env(safe-area-inset-top, 0)) 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.app-head .brand b { font-size: 16px; }
.app-head .brand small { font-size: 9px; color: var(--muted); }
.app-head .brand-mark { width: 34px; height: 34px; font-size: 16px; }
.head-actions { display: flex; gap: 6px; }
.head-actions .icon-btn { width: 31px; height: 31px; font-size: 14px; }
.head-actions .icon-btn.muted { opacity: .42; }

.stage-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 4px 16px 0;
}
.stage-head { flex: 0 0 auto; padding: 2px 4px 0; }
.stage-eyebrow {
  margin: 0 0 8px;
  font-size: 8px;
  letter-spacing: .18em;
  color: var(--accent);
}
.stage-head h1 {
  margin: 0;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: 28px;
  line-height: 1.24;
  font-weight: 500;
  letter-spacing: .02em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, .35);
}
.stage-head > p:last-child {
  margin: 8px 0 0;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .03em;
}
.hero-stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  perspective: 1300px;
  touch-action: pan-y;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
.hero-stage.is-grabbing { cursor: grabbing; }
.hero-deck {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.hero-deck.deck-enter .hero-card.is-center { animation: cardEnter 480ms var(--ease) both; }
@keyframes cardEnter {
  from { opacity: 0; transform: translate3d(0, 24px, -60px) scale(.94); }
  to { opacity: 1; }
}
.hero-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(78vw, 300px);
  aspect-ratio: 3 / 4;
  translate: -50% -50%;
  border-radius: 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow:
    0 48px 84px rgba(0, 0, 0, .58),
    0 12px 0 rgba(0, 0, 0, .22),
    0 0 52px var(--card-glow),
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -20px 34px rgba(0, 0, 0, .18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform-origin: center center;
  will-change: transform, opacity;
  cursor: pointer;
}
.hero-card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 16px;
  border-radius: inherit;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 120ms linear;
}
.hero-card.is-center .hero-card-inner {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}
.hero-card-inner::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 27px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    inset 0 -1px 0 rgba(0, 0, 0, .38),
    inset 12px 0 28px rgba(255, 255, 255, .035),
    inset -12px 0 24px rgba(0, 0, 0, .1);
  pointer-events: none;
  z-index: 5;
}
.hero-card-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--border-1), transparent 38%, var(--border-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 4;
}
.hero-card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 34%, transparent 74%, rgba(255, 255, 255, .035));
  pointer-events: none;
  z-index: 0;
}
.hero-card-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
}
.hero-kicker { font-size: 8px; letter-spacing: .14em; }
.hero-mark {
  width: 25px; height: 25px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--card-border);
  color: var(--accent);
  font-size: 10px;
  background: rgba(255, 255, 255, .05);
}
.hero-art {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  margin: 4px 0;
}
.hero-orbit {
  position: absolute;
  width: 150px; height: 150px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  opacity: .55;
  box-shadow: 0 0 34px var(--card-glow), inset 0 0 28px var(--card-glow);
}
.hero-orbit::before,
.hero-orbit::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px dashed var(--card-border);
  opacity: .5;
}
.hero-orbit::after { inset: 32px; border-style: solid; opacity: .3; }
.hero-glyph {
  width: 86px; height: 86px;
  border-radius: 26px;
  display: grid; place-items: center;
  font-size: 31px;
  font-weight: 600;
  color: #fff;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.34), transparent 30%),
    linear-gradient(145deg, var(--accent), var(--accent-2));
  border: 1px solid rgba(255, 255, 255, .32);
  box-shadow:
    0 18px 26px rgba(0, 0, 0, .3),
    0 0 26px var(--card-glow),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -10px 14px rgba(0,0,0,.18);
  transform: perspective(180px) rotateX(8deg) rotateY(-9deg);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.hero-copy { position: relative; z-index: 2; flex: 0 0 auto; }
.hero-copy h2 {
  margin: 0;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 500;
}
.hero-copy p {
  margin: 6px 0 0;
  font-size: 9px;
  line-height: 1.5;
  color: var(--muted);
}
.hero-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.hero-tags span {
  padding: 3px 6px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  color: var(--dim);
  font-size: 7px;
}
.hero-play {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  height: 38px;
  margin-top: 10px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035));
  color: var(--ink);
  font-size: 10px;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 160ms var(--ease), background 160ms var(--ease);
}
.hero-play span { color: var(--accent); font-size: 17px; }
.hero-play:active { transform: scale(.96); background: rgba(255, 255, 255, .16); }
.hero-card:not(.is-center) .hero-copy,
.hero-card:not(.is-center) .hero-play,
.hero-card:not(.is-center) .hero-tags { opacity: 0; pointer-events: none; }
.hero-card:not(.is-center) .hero-art { opacity: .58; }
.hero-card.is-center {
  border-color: color-mix(in srgb, var(--card-border) 82%, white 18%);
  box-shadow:
    0 52px 88px rgba(0, 0, 0, .62),
    0 16px 0 -6px rgba(4, 2, 8, .5),
    0 0 56px var(--card-glow),
    inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 -22px 36px rgba(0, 0, 0, .18);
}
.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent 7%, transparent 86%, rgba(0, 0, 0, .22));
  pointer-events: none;
}
[data-theme="night"] .hero-card.is-center .hero-orbit { animation: nightBreathe 4.8s ease-in-out infinite; }
@keyframes nightBreathe {
  0%, 100% { transform: scale(.96); opacity: .45; }
  50% { transform: scale(1.04); opacity: .78; }
}
[data-theme="daily"] .hero-card.is-center .hero-glyph { animation: jellyIdle 5.5s ease-in-out infinite; }
@keyframes jellyIdle {
  0%, 100% { transform: perspective(180px) rotateX(8deg) rotateY(-9deg) scale(1); }
  50% { transform: perspective(180px) rotateX(8deg) rotateY(-9deg) scale(1.035, .975); }
}
[data-theme="arcade"] .hero-card.is-center .hero-glyph { animation: arcadePulse 3.4s ease-in-out infinite; }
@keyframes arcadePulse {
  0%, 100% { box-shadow: 0 18px 26px rgba(0,0,0,.3), 0 0 22px var(--card-glow), inset 0 1px 0 rgba(255,255,255,.4); }
  50% { box-shadow: 0 18px 30px rgba(0,0,0,.32), 0 0 38px var(--card-glow), inset 0 1px 0 rgba(255,255,255,.5); }
}
.hero-dots { display: flex; justify-content: center; gap: 5px; flex: 0 0 auto; height: 12px; align-items: center; }
.hero-dots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.2); transition: width 220ms var(--ease), background 220ms var(--ease); }
.hero-dots i.on { width: 15px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 10px var(--card-glow); }

.orb {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 10px;
  padding: 9px 12px;
  border-radius: 22px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 24px rgba(0,0,0,.18);
  text-align: left;
  transition: transform 160ms var(--ease), background 160ms var(--ease);
}
.orb:active { transform: scale(.985); background: rgba(255,255,255,.075); }
.orb-core {
  width: 48px; height: 48px; flex: 0 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.48), transparent 28%),
    radial-gradient(circle at 50% 55%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(145deg, var(--orb-a), var(--orb-b));
  box-shadow: 0 0 26px var(--card-glow), inset 0 1px 0 rgba(255,255,255,.42);
  animation: orbBreathe 4.6s ease-in-out infinite;
}
.orb-core i { font-style: normal; color: #fff; font-size: 19px; text-shadow: 0 2px 10px rgba(0,0,0,.3); }
@keyframes orbBreathe {
  0%, 100% { transform: scale(.95); box-shadow: 0 0 18px var(--card-glow), inset 0 1px 0 rgba(255,255,255,.42); }
  50% { transform: scale(1.06); box-shadow: 0 0 34px var(--card-glow), inset 0 1px 0 rgba(255,255,255,.52); }
}
.orb-copy b { display: block; font-size: 11px; }
.orb-copy small { display: block; margin-top: 3px; font-size: 8px; color: var(--dim); }

.theme-tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 0 14px calc(12px + env(safe-area-inset-bottom, 0));
  padding: 6px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(10, 8, 15, .62);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 35px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.1);
}
.theme-tab {
  height: 48px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--dim);
  font-size: 8px;
  transition: background 220ms var(--ease), color 220ms var(--ease), transform 160ms var(--ease);
}
.theme-tab i { font-style: normal; font-size: 16px; }
.theme-tab.active {
  color: var(--ink);
  background: var(--tab-bg);
  box-shadow: 0 0 24px var(--tab-glow), inset 0 1px 0 rgba(255,255,255,.18);
}
.theme-tab:active { transform: scale(.96); }

.theme-switch .hero-deck { animation: themeDeck 620ms var(--ease) both; }
@keyframes themeDeck {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* theme-aware library / game view */
.library-view, .game-view { background: var(--overlay-bg); }
.library-view[data-theme], .game-view[data-theme] { color: var(--ink); }
.library-view .step-label, .game-view .step-label { color: var(--accent); }
.library-view .chip.active { background: var(--tab-bg); box-shadow: 0 0 18px var(--tab-glow); }
.library-view .simple-row, .game-view .simple-row { background: var(--row-bg); border-color: var(--row-border); }
.library-view .mini-glyph, .game-view .mini-glyph { background: radial-gradient(circle at 32% 22%, rgba(255,255,255,.28), transparent 32%), linear-gradient(145deg, var(--accent), var(--accent-2)); }
[data-theme="daily"] .library-view, [data-theme="daily"] .game-view, [data-theme="daily"] .see { border-radius: 30px; }
[data-theme="arcade"] .library-view .simple-row:hover { box-shadow: 0 0 16px var(--card-glow); }

/* intro */
.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  background: transparent;
  transition: opacity 320ms var(--ease);
}
.intro.is-done { opacity: 0; pointer-events: none; }
.intro-veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 28% 16%, rgba(255, 157, 193, .14), transparent 31%),
    radial-gradient(circle at 74% 84%, rgba(126, 166, 255, .13), transparent 33%),
    radial-gradient(circle at 50% 50%, rgba(104, 74, 142, .18), transparent 46%),
    #08060c;
  animation: introVeilIn 1s var(--ease) both, veilOut 700ms 3500ms var(--ease) forwards;
}
@keyframes introVeilIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes veilOut { to { opacity: 0; } }

.intro-particles { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.intro-particle {
  position: absolute;
  left: var(--x);
  bottom: -8px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: rgba(255, 232, 242, .98);
  box-shadow: 0 0 8px rgba(255, 188, 214, .8), 0 0 18px rgba(255, 147, 195, .36);
  opacity: 0;
  animation: floatUp var(--dur) linear var(--delay) infinite;
}
@keyframes floatUp {
  0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  12% { opacity: var(--alpha); }
  72% { opacity: calc(var(--alpha) * .8); }
  100% { transform: translate3d(var(--drift), -110vh, 0) scale(1.15); opacity: 0; }
}

.intro-orbs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.intro-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 240px;
  margin-left: -120px;
  margin-top: -120px;
  border-radius: 50%;
  filter: blur(26px);
  opacity: 0;
  mix-blend-mode: screen;
}
.intro-orb-pink {
  background: radial-gradient(circle, rgba(255, 175, 203, .98), rgba(221, 90, 140, .32) 42%, transparent 70%);
  animation: introPink 1.9s cubic-bezier(.2,.8,.2,1) forwards;
}
.intro-orb-blue {
  background: radial-gradient(circle, rgba(153, 190, 255, .94), rgba(120, 92, 222, .3) 42%, transparent 70%);
  animation: introBlue 1.9s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes introPink {
  0% { transform: translate(-96%, -86%) scale(.7); opacity: 0; }
  24% { opacity: .95; }
  62% { transform: translate(0, 0) scale(1.04); opacity: .9; }
  100% { transform: translate(0, 0) scale(1.12); opacity: 0; }
}
@keyframes introBlue {
  0% { transform: translate(96%, 86%) scale(.7); opacity: 0; }
  24% { opacity: .9; }
  62% { transform: translate(0, 0) scale(1.04); opacity: .84; }
  100% { transform: translate(0, 0) scale(1.12); opacity: 0; }
}

.intro-trails { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.intro-trails i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;
  height: 2px;
  border-radius: 999px;
  filter: blur(.4px);
  opacity: 0;
  transform-origin: center;
}
.trail-a {
  background: linear-gradient(90deg, transparent, rgba(255, 166, 196, .95), transparent);
  box-shadow: 0 0 10px rgba(255, 135, 180, .6);
  animation: trailA 1.7s 1.0s cubic-bezier(.2,.8,.2,1) forwards;
}
.trail-b {
  background: linear-gradient(90deg, transparent, rgba(156, 201, 255, .95), transparent);
  box-shadow: 0 0 10px rgba(112, 163, 255, .55);
  animation: trailB 1.7s 1.05s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes trailA {
  0% { transform: translate(-170%, -55%) rotate(-19deg) scaleX(.18); opacity: 0; }
  32% { opacity: .9; }
  72% { transform: translate(-50%, -50%) rotate(-19deg) scaleX(1); opacity: .95; }
  100% { transform: translate(-50%, -50%) rotate(-19deg) scaleX(.12); opacity: 0; }
}
@keyframes trailB {
  0% { transform: translate(60%, 45%) rotate(17deg) scaleX(.18); opacity: 0; }
  32% { opacity: .85; }
  72% { transform: translate(-50%, -50%) rotate(17deg) scaleX(1); opacity: .9; }
  100% { transform: translate(-50%, -50%) rotate(17deg) scaleX(.12); opacity: 0; }
}

.intro-heart {
  display: block;
  fill: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  height: 190px;
  z-index: 2;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: heartReveal 1.55s 1.02s var(--ease) forwards;
  overflow: visible;
}
@keyframes heartReveal {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.84); }
  20% { opacity: 1; }
  68% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.06); }
}
.heart-path {
  fill: none;
  stroke: url(#heartA);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 330;
  stroke-dashoffset: 330;
  filter: drop-shadow(0 0 7px rgba(255, 163, 201, .45));
  animation: drawHeart 1.15s 1.1s ease forwards;
}
.heart-b {
  stroke: url(#heartB);
  opacity: .72;
  animation-delay: 1.28s;
  filter: drop-shadow(0 0 7px rgba(126, 178, 255, .4));
}
@keyframes drawHeart { to { stroke-dashoffset: 0; } }
.heart-star {
  fill: url(#heartA);
  opacity: 0;
  animation: starIn 500ms 1.7s ease forwards;
  filter: drop-shadow(0 0 8px rgba(255, 204, 224, .65));
}
@keyframes starIn { to { opacity: 1; } }

.intro-brand {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px) scale(.96);
  animation: brandIn 1.3s 2.2s var(--ease) forwards;
}
@keyframes brandIn {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.intro.phase-4 .intro-brand {
  animation: brandOut 700ms 3500ms var(--ease) forwards;
}
@keyframes brandOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translate(-42vw, -42vh) scale(.18); }
}
.intro-logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 34px;
  color: #ffe8f0;
  border: 1px solid rgba(255, 208, 224, .62);
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.34), rgba(192, 91, 130, .36));
  box-shadow: 0 0 44px rgba(255, 148, 188, .4), inset 0 1px 0 rgba(255,255,255,.45);
  margin-bottom: 14px;
  animation: logoBreathe 600ms 2.45s ease-in-out 2;
}
@keyframes logoBreathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 44px rgba(255, 148, 188, .4), inset 0 1px 0 rgba(255,255,255,.45); }
  50% { transform: scale(1.08); box-shadow: 0 0 58px rgba(255, 164, 199, .55), inset 0 1px 0 rgba(255,255,255,.55); }
}
.intro-brand b {
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: 23px;
  letter-spacing: .1em;
  color: #ffe9d6;
  text-shadow: 0 0 18px rgba(255, 186, 206, .32), 0 1px 0 rgba(255,255,255,.35);
}
.intro-brand small {
  margin-top: 8px;
  font-size: 9px;
  color: rgba(255, 235, 242, .6);
  letter-spacing: .2em;
}

.intro-curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 1;
  background: #08060c;
  animation: curtainOpen 700ms 3500ms var(--ease) forwards;
}
.intro-curtain-left { left: 0; transform-origin: left center; }
.intro-curtain-right { right: 0; transform-origin: right center; }
@keyframes curtainOpen {
  from { transform: scaleX(1); opacity: 1; }
  to { transform: scaleX(0); opacity: 0; }
}
.intro-skip {
  position: absolute;
  right: 18px;
  top: calc(18px + env(safe-area-inset-top, 0));
  z-index: 8;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,240,245,.62);
  background: rgba(255,255,255,.04);
  font-size: 9px;
  letter-spacing: .1em;
}
.intro.is-done .intro-skip { opacity: 0; }

.app.is-revealing .stage-wrap { animation: lobbyLift 900ms var(--ease) both; }
@keyframes lobbyLift {
  from { opacity: 0; transform: translateY(30px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.intro .intro-brand::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid rgba(255, 214, 230, .55);
  box-shadow: 0 0 30px rgba(255, 165, 197, .22), inset 0 0 24px rgba(255, 165, 197, .12);
  transform: translate(-50%, -50%) scale(.55);
  opacity: 0;
  animation: introBurst 1000ms 2200ms cubic-bezier(.2,.8,.2,1) forwards;
  pointer-events: none;
}
@keyframes introBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  24% { opacity: .85; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
}

@media (max-height: 700px) {
  .stage-head h1 { font-size: 23px; }
  .hero-card { width: min(70vw, 260px); }
  .orb { margin-bottom: 6px; }
  .theme-tab { height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-orb, .intro-brand, .intro-curtain, .intro-veil { animation: none; }
  .intro-brand { opacity: 1; }
  .hero-card.is-center .hero-orbit,
  .hero-card.is-center .hero-glyph,
  .orb-core { animation: none; }
  .theme-switch .hero-deck { animation: none; }
  .scene-layer { transition: none; }
}

/* full-surface overlays within the app column */
.game-view, .library-view { width: 100%; max-width: 460px; }
@media (min-width: 760px) {
  .game-view, .library-view { width: 100%; max-width: 460px; border-radius: 32px; }
}


.hero-stage { cursor: grab; }
.hero-stage.is-grabbing { cursor: grabbing; }
.random-overlay[data-theme="arcade"] .random-front {
  background:
    radial-gradient(circle at 50% 45%, rgba(46, 38, 62, .96), rgba(24, 21, 35, .98)),
    linear-gradient(145deg, #2a2138, #15121f);
  border-color: rgba(255, 77, 157, .5);
  box-shadow: 0 24px 44px rgba(0,0,0,.45), 0 0 28px rgba(255,46,147,.2);
  color: #f8f6ff;
}
.random-overlay[data-theme="arcade"] .random-front .random-kicker { color: #ff9ec6; }
.random-overlay[data-theme="arcade"] .random-front small { color: #b9aec9; }
.random-overlay[data-theme="daily"] .random-front {
  background: radial-gradient(circle at 50% 45%, #f3dcc8, #cfa78e);
  color: #4b3027;
}

@property --orbit-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* new night scene */
.scene-night::before {
  background-image: url("assets/night-bg.png");
  background-size: cover;
  background-position: center top;
  opacity: .2;
  mix-blend-mode: screen;
}

/* night icons */
.hero-icon-wrap {
  position: relative;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 222, .1), transparent 63%);
}
.hero-icon {
  position: relative;
  z-index: 2;
  width: 92px;
  height: 92px;
  object-fit: contain;
  border-radius: 26px;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .34));
}
.hero-halo {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid var(--border-1);
  box-shadow:
    0 0 28px var(--card-glow),
    0 0 52px rgba(255, 168, 203, .18),
    inset 0 0 26px var(--card-glow);
  animation: haloBreathe 4.2s ease-in-out infinite;
}
.hero-icon-wrap::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px dashed var(--card-border);
  opacity: .78;
  animation: haloSpin 15s linear infinite;
}
.hero-icon-wrap::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 228, 240, .78);
  box-shadow: 0 0 16px var(--card-glow), inset 0 0 12px rgba(255, 221, 237, .18);
  opacity: .7;
  animation: iconRing 3.4s ease-in-out infinite;
}
@keyframes iconRing {
  0%, 100% { opacity: .5; transform: scale(.98); }
  50% { opacity: 1; transform: scale(1.035); }
}
@keyframes haloBreathe {
  0%, 100% { transform: scale(.94); opacity: .55; }
  50% { transform: scale(1.06); opacity: 1; }
}
@keyframes haloSpin { to { transform: rotate(360deg); } }
.hero-card:not(.is-center) .hero-icon-wrap { opacity: .5; }
.hero-card:not(.is-center) .hero-halo,
.hero-card:not(.is-center) .hero-icon-wrap::before { animation-play-state: paused; }

/* selected card: travelling border light */
.hero-card.is-center .hero-card-border {
  background:
    conic-gradient(from var(--orbit-angle), transparent 0 18%, var(--border-1) 26%, #fff 31%, var(--accent) 36%, var(--border-2) 42%, transparent 53% 72%, rgba(255,255,255,.62) 80%, transparent 89% 100%),
    linear-gradient(135deg, var(--border-1), transparent 38%, var(--border-2));
  animation: orbitBorder 3.6s linear infinite;
  filter: drop-shadow(0 0 10px var(--card-glow)) drop-shadow(0 0 3px var(--border-1));
}
@keyframes orbitBorder { to { --orbit-angle: 360deg; } }

/* library icon image */
.mini-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 11px;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .26));
}

@media (prefers-reduced-motion: reduce) {
  .hero-halo, .hero-icon-wrap::before, .hero-card.is-center .hero-card-border { animation: none; }
}


.hero-play span { transition: transform 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .hero-play:hover {
    transform: translateY(-2px) scale(1.015);
    background: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07));
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28), 0 0 22px var(--card-glow);
  }
  .hero-play:hover span { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-card-inner { transition: none; }
  .hero-card.is-center .hero-card-inner { transform: none; }
}





.hero-card::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -14px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .48), transparent 70%);
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
}

/* arcade / daily scene photography */
.scene-arcade::before {
  background-image:
    repeating-linear-gradient(115deg, transparent 0 34px, rgba(0, 240, 255, .025) 35px 36px),
    url("assets/arcade-bg.png");
  background-size: auto, cover;
  background-position: center, center top;
  background-repeat: repeat, no-repeat;
  opacity: .2;
  mix-blend-mode: screen;
}
.scene-daily::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/daily-bg.png") center top / cover no-repeat;
  opacity: .18;
  mix-blend-mode: screen;
}

/* =========================================================
   v0.7 · 我也想了解你 · entry + card draw
   ========================================================= */
.game-view[data-active-game="understand"] {
  background:
    radial-gradient(circle at 78% 2%, rgba(255, 155, 198, .17), transparent 34%),
    radial-gradient(circle at 14% 82%, rgba(135, 92, 255, .13), transparent 42%),
    radial-gradient(circle at 48% 42%, rgba(82, 30, 82, .28), transparent 56%),
    linear-gradient(180deg, #1a0d24 0%, #110818 54%, #08040c 100%);
  color: #fff4f8;
}
.game-view[data-active-game="understand"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 24%, rgba(255, 235, 247, .7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 16%, rgba(255, 205, 231, .55) 0 1px, transparent 1.6px),
    radial-gradient(circle at 42% 68%, rgba(220, 205, 255, .5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 86% 78%, rgba(255, 220, 238, .45) 0 1px, transparent 1.4px);
  background-size: 170px 190px, 230px 210px, 290px 270px, 350px 310px;
  opacity: .55;
}
.game-view[data-active-game="understand"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 44%, transparent 34%, rgba(3, 1, 6, .44) 100%);
}
.game-view[data-active-game="understand"] .game-view-top,
.game-view[data-active-game="understand"] .game-view-body {
  position: relative;
  z-index: 1;
}
.game-view[data-active-game="understand"] .game-view-top { z-index: 3; }

/* entry */
.ue-entry {
  position: relative;
  width: 100%;
  max-width: 760px;
  min-height: calc(100dvh - 96px);
  margin: 0 auto;
  padding: 8px 2px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ue-fan {
  position: absolute;
  top: 0;
  right: -2px;
  width: 142px;
  height: 120px;
  pointer-events: none;
  z-index: 0;
  opacity: .78;
}
.ue-fan-card {
  position: absolute;
  width: 50px;
  height: 87px;
  border-radius: 9px;
  background: url("assets/card-back.png") center / cover no-repeat;
  border: 1px solid rgba(255, 225, 240, .42);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .4), 0 0 16px rgba(255, 145, 200, .16);
  transform-origin: 50% 100%;
}
.ue-fan-card.fan-1 { right: 38px; top: 14px; z-index: 3; transform: rotate(7deg); }
.ue-fan-card.fan-2 { right: 70px; top: 4px; z-index: 2; transform: rotate(-5deg); opacity: .7; }
.ue-fan-card.fan-3 { right: 14px; top: 30px; z-index: 1; transform: rotate(17deg); opacity: .5; }
.ue-fan-card.is-landed { animation: ueFanPop 420ms var(--ease) both; }
@keyframes ueFanPop {
  0% { transform: scale(.9) rotate(4deg); }
  65% { transform: scale(1.05) rotate(9deg); }
  100% { transform: scale(1) rotate(7deg); }
}
.ue-heading {
  position: relative;
  z-index: 1;
  max-width: 520px;
  padding: 8px 82px 0 0;
}
.ue-eyebrow {
  margin: 0 0 12px;
  font-size: 8px;
  letter-spacing: .22em;
  color: rgba(255, 188, 218, .78);
}
.ue-heading h1 {
  margin: 0;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: clamp(28px, 8vw, 44px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: .02em;
  color: #fff0f5;
  text-shadow: 0 0 24px rgba(255, 145, 195, .16);
}
.ue-sub {
  margin: 10px 0 0;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .05em;
  color: rgba(255, 222, 236, .62);
}
.ue-section {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 28px 0 10px;
  font-size: 10px;
  letter-spacing: .12em;
  color: rgba(255, 221, 236, .74);
}
.ue-section span {
  color: #ffb7d1;
  font-size: 12px;
  text-shadow: 0 0 12px rgba(255, 135, 190, .7);
}
.ue-depths {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.ue-depth-card {
  --dz: #ffb9ad;
  --dz2: #ffd9e0;
  --dz-glow: rgba(255, 142, 151, .18);
  position: relative;
  min-height: 226px;
  padding: 12px 7px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  text-align: center;
  color: #fff2f7;
  border-radius: 18px;
  border: 1px solid rgba(255, 219, 236, .2);
  background:
    radial-gradient(ellipse at 50% 0%, var(--dz-glow), transparent 56%),
    linear-gradient(165deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)),
    linear-gradient(160deg, rgba(61, 28, 50, .82), rgba(25, 14, 29, .88));
  box-shadow:
    0 16px 30px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: transform 190ms var(--ease), border-color 190ms var(--ease), box-shadow 190ms var(--ease);
}
.ue-depth-card.shallow {
  --dz: #ffc3aa;
  --dz2: #ffe0d6;
  --dz-glow: rgba(255, 151, 145, .23);
  background:
    radial-gradient(ellipse at 50% 0%, var(--dz-glow), transparent 56%),
    linear-gradient(165deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)),
    linear-gradient(160deg, rgba(107, 55, 67, .9), rgba(44, 24, 40, .9));
}
.ue-depth-card.deep {
  --dz: #ff9fbe;
  --dz2: #ffd0df;
  --dz-glow: rgba(255, 101, 157, .24);
  background:
    radial-gradient(ellipse at 50% 0%, var(--dz-glow), transparent 56%),
    linear-gradient(165deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)),
    linear-gradient(160deg, rgba(103, 44, 76, .9), rgba(37, 19, 39, .92));
}
.ue-depth-card.forbidden {
  --dz: #c4a7ff;
  --dz2: #e2d4ff;
  --dz-glow: rgba(142, 99, 255, .25);
  background:
    radial-gradient(ellipse at 50% 0%, var(--dz-glow), transparent 56%),
    linear-gradient(165deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)),
    linear-gradient(160deg, rgba(62, 40, 100, .9), rgba(24, 16, 43, .94));
}
.ue-depth-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -46%;
  width: 150%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--dz) 26%, transparent);
  box-shadow: inset 0 0 30px var(--dz-glow);
  opacity: .72;
  pointer-events: none;
}
.ue-depth-card::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dz2), transparent);
  opacity: .62;
  pointer-events: none;
}
.ue-icon {
  position: relative;
  z-index: 1;
  width: 50px;
  height: 50px;
  margin: 10px 0 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--dz) 42%, transparent);
  color: var(--dz);
  background: radial-gradient(circle at 42% 32%, rgba(255, 255, 255, .16), transparent 42%), rgba(255, 255, 255, .035);
  box-shadow: 0 0 22px var(--dz-glow), inset 0 0 16px rgba(255, 255, 255, .04);
}
.ue-icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px var(--dz-glow));
}
.ue-depth-card b {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .01em;
}
.ue-depth-card small {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  margin-top: 7px;
  font-size: 8px;
  line-height: 1.7;
  color: rgba(255, 231, 241, .58);
}
.ue-depth-card em {
  position: relative;
  z-index: 1;
  margin-top: 9px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--dz) 32%, transparent);
  color: var(--dz2);
  font-size: 8px;
  font-style: normal;
  letter-spacing: .08em;
  background: rgba(0, 0, 0, .12);
}
.ue-last {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  padding: 2px 5px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--dz) 30%, transparent);
  color: var(--dz2);
  font-size: 6px;
  letter-spacing: .08em;
  opacity: .8;
}
.ue-foot {
  position: relative;
  z-index: 1;
  margin: 16px 0 0;
  text-align: center;
  font-size: 9px;
  line-height: 1.7;
  color: rgba(255, 222, 236, .42);
}
@media (hover: hover) and (pointer: fine) {
  .ue-depth-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--dz) 48%, transparent);
    box-shadow: 0 22px 38px rgba(0, 0, 0, .32), 0 0 26px var(--dz-glow), inset 0 1px 0 rgba(255, 255, 255, .2);
  }
}
.ue-depth-card:active { transform: scale(.985); }

/* play */
.ue-play {
  width: 100%;
  max-width: 760px;
  min-height: calc(100dvh - 96px);
  margin: 0 auto;
  padding: 0 2px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ue-play-top {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 0;
}
.ue-play-eyebrow {
  margin: 0 0 4px;
  font-size: 8px;
  letter-spacing: .14em;
  color: rgba(255, 188, 218, .72);
}
.ue-play-title {
  margin: 0;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: 15px;
  color: #fff0f5;
}
.ue-play-count {
  padding-top: 2px;
  font-size: 9px;
  letter-spacing: .1em;
  color: rgba(255, 225, 238, .55);
  white-space: nowrap;
}
.ue-stage {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 8px 0 2px;
  perspective: 1200px;
}
.ue-card-scene {
  position: relative;
  width: min(72vw, 280px);
  aspect-ratio: 433 / 755;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.ue-card-scene.is-dealing { animation: ueDeal 900ms cubic-bezier(.16, .84, .24, 1) both; }
.ue-card-scene.is-leaving { animation: ueLeave 320ms cubic-bezier(.4, 0, .2, 1) both; }
@keyframes ueDeal {
  0% { opacity: 0; transform: translate3d(0, 56px, 0) rotate(-3.2deg) scale(.91); }
  48% { opacity: .9; transform: translate3d(0, -5px, 0) rotate(.6deg) scale(1.008); }
  72% { opacity: 1; transform: translate3d(0, 2px, 0) rotate(-.15deg) scale(.999); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}
@keyframes ueLeave {
  to { opacity: 0; transform: translate3d(-118%, 0, 0) rotate(-8deg) scale(.92); }
}
.ue-card {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  transform-style: preserve-3d;
  transition: transform 880ms cubic-bezier(.2, .75, .2, 1);
  cursor: pointer;
  outline: none;
  will-change: transform;
}
.ue-card.is-flipped { transform: rotateY(180deg); }
.ue-card:focus-visible { outline: 2px solid rgba(255, 204, 226, .85); outline-offset: 5px; }
.ue-card::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  z-index: 4;
  border-radius: 19.5px;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(255, 247, 252, .9), rgba(255, 159, 205, .3) 26%, rgba(195, 157, 255, .48) 52%, rgba(255, 224, 242, .88));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255, 145, 203, .48));
}
.ue-face {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow:
    0 28px 54px rgba(0, 0, 0, .48),
    0 0 0 1px rgba(255, 221, 239, .34),
    0 0 32px rgba(255, 128, 190, .16),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}
.ue-back { background-image: url("assets/card-back.png"); }
.ue-face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 2px rgba(255, 235, 248, .32),
    inset 0 0 22px rgba(255, 139, 201, .14);
  pointer-events: none;
}
.ue-front {
  background-image: url("assets/card-front.png");
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18% 11% 22%;
}
.ue-back-hint {
  position: absolute;
  left: 50%;
  bottom: 6.5%;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 232, 245, .28);
  background: rgba(24, 10, 23, .38);
  color: rgba(255, 242, 248, .8);
  font-size: 8px;
  letter-spacing: .1em;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ue-kicker {
  position: absolute;
  top: 11.8%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 82%;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(145, 88, 111, .15);
  background: rgba(255, 249, 244, .7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 3px 10px rgba(92, 48, 66, .08);
  color: #75485d;
  font-size: 7px;
  letter-spacing: .08em;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ue-text {
  width: 100%;
  max-height: 64%;
  padding: 17px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: #2b1220;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: clamp(15px, 4.2vw, 20px);
  font-weight: 600;
  line-height: 1.72;
  text-align: center;
  text-wrap: balance;
  overflow: hidden;
}
.ue-star {
  position: absolute;
  left: 50%;
  bottom: 11.5%;
  transform: translateX(-50%);
  color: rgba(143, 78, 108, .55);
  font-size: 14px;
}
.ue-hint {
  margin: 12px 0 10px;
  text-align: center;
  font-size: 9px;
  line-height: 1.6;
  color: rgba(255, 226, 238, .54);
}
.ue-actions {
  width: 100%;
  max-width: 360px;
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.ue-btn {
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 221, 237, .18);
  font-size: 11px;
  letter-spacing: .07em;
  transition: transform 150ms var(--ease), background 150ms var(--ease), box-shadow 150ms var(--ease);
}
.ue-btn:active { transform: scale(.975); }
.ue-next {
  flex: 1.35;
  color: #2b0a1a;
  border-color: rgba(255, 205, 227, .5);
  background: linear-gradient(135deg, #ffb8d1, #e184aa 58%, #c56e98);
  box-shadow: 0 8px 22px rgba(208, 86, 142, .24), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.ue-return {
  flex: 1;
  color: rgba(255, 235, 244, .76);
  background: rgba(255, 255, 255, .035);
}
@media (hover: hover) and (pointer: fine) {
  .ue-next:hover { background: linear-gradient(135deg, #ffc5d9, #e990b4 58%, #cf7ba3); box-shadow: 0 10px 28px rgba(220, 100, 156, .3), inset 0 1px 0 rgba(255, 255, 255, .6); }
  .ue-return:hover { background: rgba(255, 255, 255, .07); }
}

.understand-entry-clone {
  position: fixed;
  z-index: 160;
  pointer-events: none;
  background: url("assets/card-back.png") center / cover no-repeat;
  border: 1px solid rgba(255, 226, 242, .6);
  box-shadow: 0 42px 70px rgba(0, 0, 0, .5), 0 0 32px rgba(255, 150, 202, .26);
  will-change: left, top, width, height, transform;
}

/* desktop */
@media (min-width: 900px) {
  .game-view[data-active-game="understand"] {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    padding: 0 clamp(24px, 6vw, 88px) 34px;
    box-shadow: none;
  }
  .game-view[data-active-game="understand"] .game-view-top,
  .game-view[data-active-game="understand"] .game-view-body {
    width: min(100%, 760px);
    margin-inline: auto;
  }
  .ue-entry { min-height: calc(100dvh - 120px); padding-top: 18px; }
  .ue-heading h1 { font-size: 48px; }
  .ue-heading { padding-right: 120px; }
  .ue-fan { right: 10px; width: 190px; height: 160px; opacity: .85; }
  .ue-fan-card { width: 67px; height: 116px; }
  .ue-fan-card.fan-1 { right: 52px; top: 20px; }
  .ue-fan-card.fan-2 { right: 94px; top: 6px; }
  .ue-fan-card.fan-3 { right: 18px; top: 40px; }
  .ue-section { margin-top: 36px; font-size: 11px; }
  .ue-depths { gap: 14px; }
  .ue-depth-card { min-height: 300px; padding: 20px 14px 16px; }
  .ue-icon { width: 64px; height: 64px; margin: 18px 0 16px; }
  .ue-icon svg { width: 36px; height: 36px; }
  .ue-depth-card b { font-size: 16px; }
  .ue-depth-card small { margin-top: 10px; font-size: 9px; }
  .ue-depth-card em { margin-top: 14px; font-size: 9px; }
  .ue-card-scene { width: 320px; }
  .ue-play { min-height: calc(100dvh - 120px); }
}
@media (max-height: 700px) {
  .ue-card-scene { width: min(62vw, 230px); }
  .ue-entry { min-height: calc(100dvh - 82px); padding-bottom: 14px; }
  .ue-heading h1 { font-size: 27px; }
  .ue-depth-card { min-height: 205px; }
  .ue-icon { width: 42px; height: 42px; margin: 6px 0 9px; }
  .ue-icon svg { width: 25px; height: 25px; }
  .ue-section { margin-top: 18px; }
  .ue-foot { margin-top: 10px; }
}
@media (max-width: 350px) {
  .ue-depth-card { padding-left: 5px; padding-right: 5px; }
  .ue-depth-card b { font-size: 11px; }
  .ue-depth-card small { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .ue-card-scene.is-dealing,
  .ue-card-scene.is-leaving,
  .ue-fan-card.is-landed { animation: none; }
  /* 全局 reduce 会把所有过渡压到 .001ms；翻牌留一条短一点的，看得见但不晃 */
  .ue-card { transition-duration: 420ms !important; }
}

/* =========================================================
   v0.7 · 爱情需求翻译器
   ========================================================= */
.game-view[data-active-game="love-translator"] {
  background:
    radial-gradient(circle at 82% 3%, rgba(255, 173, 166, .15), transparent 34%),
    radial-gradient(circle at 12% 96%, rgba(177, 132, 255, .12), transparent 42%),
    linear-gradient(180deg, #281421 0%, #170c14 56%, #0b060a 100%);
}
.game-view[data-active-game="love-translator"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 232, 240, .45) 0 1px, transparent 1.4px),
    radial-gradient(circle at 75% 22%, rgba(255, 209, 224, .35) 0 1px, transparent 1.4px),
    radial-gradient(circle at 48% 76%, rgba(225, 209, 255, .35) 0 1px, transparent 1.4px);
  background-size: 210px 220px, 280px 250px, 330px 300px;
  opacity: .46;
}
.game-view[data-active-game="love-translator"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 44%, transparent 36%, rgba(3, 1, 6, .42) 100%);
}
.game-view[data-active-game="love-translator"] .game-view-top,
.game-view[data-active-game="love-translator"] .game-view-body {
  position: relative;
  z-index: 1;
}
.game-view[data-active-game="love-translator"] .game-view-top { z-index: 3; }

.lt-shell {
  width: 100%;
  max-width: 760px;
  min-height: calc(100dvh - 96px);
  margin: 0 auto;
  padding: 6px 2px 24px;
  color: #fff1f6;
}
.lt-eyebrow {
  margin: 0 0 10px;
  font-size: 8px;
  letter-spacing: .2em;
  color: rgba(255, 193, 203, .78);
}
.lt-hero h1 {
  margin: 0;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: clamp(30px, 8.4vw, 52px);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: .015em;
  color: #fff0f5;
}
.lt-sub {
  margin: 12px 0 0;
  font-size: 10px;
  line-height: 1.7;
  color: rgba(255, 228, 236, .58);
}
.lt-label {
  margin: 20px 0 8px;
  font-size: 9px;
  letter-spacing: .1em;
  color: rgba(255, 224, 235, .58);
}
.lt-deck-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 12px 13px;
  border-radius: 18px;
  border: 1px solid rgba(255, 223, 234, .15);
  background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13);
}
.lt-stack {
  position: relative;
  flex: 0 0 53px;
  width: 53px;
  height: 62px;
}
.lt-stack i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(255, 218, 235, .26);
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 194, 204, .18), transparent 48%),
    linear-gradient(150deg, rgba(119, 59, 89, .88), rgba(37, 19, 34, .94));
  box-shadow: 0 8px 18px rgba(0, 0, 0, .28);
  color: rgba(255, 227, 240, .8);
  font-family: "Songti SC", "STSong", serif;
  font-size: 18px;
}
.lt-stack i:nth-child(1) { transform: rotate(-9deg) translate(-3px, 2px); opacity: .55; }
.lt-stack i:nth-child(2) { transform: rotate(5deg) translate(2px, 1px); opacity: .75; }
.lt-stack i:nth-child(3) { transform: rotate(-1deg); }
.lt-deck-copy { min-width: 0; }
.lt-deck-copy small { display: block; font-size: 8px; color: rgba(255, 225, 237, .5); }
.lt-deck-copy b { display: block; margin-top: 3px; font-family: "Songti SC", "STSong", serif; font-size: 17px; font-weight: 500; }
.lt-counts { display: flex; gap: 4px; margin-left: auto; }
.lt-count {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  border: 1px solid rgba(255, 224, 236, .16);
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 230, 240, .62);
  font-size: 10px;
}
.lt-count.active {
  border-color: rgba(255, 191, 204, .65);
  background: linear-gradient(145deg, rgba(255, 181, 190, .3), rgba(169, 87, 121, .22));
  color: #fff0f4;
  box-shadow: 0 0 16px rgba(255, 150, 175, .15);
}
.lt-sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.lt-source {
  padding: 10px 9px;
  text-align: left;
  border-radius: 14px;
  border: 1px solid rgba(255, 224, 236, .12);
  background: rgba(255, 255, 255, .025);
  color: rgba(255, 235, 243, .64);
  transition: border-color 160ms var(--ease), background 160ms var(--ease), transform 160ms var(--ease);
}
.lt-source b { display: block; font-size: 10px; font-weight: 500; }
.lt-source small { display: block; margin-top: 3px; font-size: 7px; color: rgba(255, 226, 237, .42); }
.lt-source.active {
  border-color: rgba(255, 192, 204, .5);
  background: linear-gradient(145deg, rgba(153, 74, 102, .38), rgba(68, 31, 54, .38));
  color: #fff1f5;
  box-shadow: 0 0 18px rgba(255, 145, 170, .1), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.lt-source:active { transform: scale(.985); }
.lt-custom-wrap { margin-top: 12px; }
.lt-custom-toggle {
  width: 100%;
  height: 38px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 221, 235, .2);
  background: transparent;
  color: rgba(255, 226, 238, .56);
  font-size: 9px;
}
.lt-editor {
  margin-top: 8px;
  padding: 11px;
  border-radius: 15px;
  border: 1px solid rgba(255, 220, 235, .16);
  background: rgba(255, 255, 255, .035);
}
.lt-field { display: block; }
.lt-field > span {
  display: block;
  margin-bottom: 5px;
  font-size: 8px;
  letter-spacing: .08em;
  color: rgba(255, 226, 238, .54);
}
.lt-field textarea,
.lt-field input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 220, 235, .14);
  border-radius: 9px;
  outline: none;
  background: rgba(0, 0, 0, .16);
  color: #fff0f6;
  font: inherit;
  font-size: 10px;
  line-height: 1.5;
  padding: 9px;
  resize: vertical;
}
.lt-field textarea:focus,
.lt-field input:focus { border-color: rgba(255, 188, 204, .58); }
.lt-field textarea::placeholder,
.lt-field input::placeholder { color: rgba(255, 226, 237, .3); }
.lt-draft-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}
.lt-field-option { display: flex; align-items: center; gap: 6px; }
.lt-field-option > span { flex: 0 0 auto; margin: 0; width: 16px; font-size: 9px; color: rgba(255, 196, 207, .7); }
.lt-field-option input { min-width: 0; }
.lt-editor-actions { display: flex; gap: 6px; margin-top: 9px; }
.lt-save-custom,
.lt-cancel-custom {
  flex: 1;
  height: 33px;
  border-radius: 9px;
  border: 1px solid rgba(255, 218, 234, .18);
  font-size: 9px;
}
.lt-save-custom { background: linear-gradient(135deg, rgba(255, 184, 178, .3), rgba(166, 82, 117, .34)); color: #fff0f5; }
.lt-cancel-custom { background: transparent; color: rgba(255, 226, 238, .55); }
.lt-warning {
  margin: 7px 0 0;
  font-size: 8px;
  line-height: 1.5;
  color: #ffb3aa;
}
.lt-custom-list {
  margin-top: 9px;
  padding: 9px 10px;
  border-radius: 13px;
  border: 1px solid rgba(255, 220, 235, .1);
  background: rgba(255, 255, 255, .02);
}
.lt-custom-title { margin: 0 0 5px; font-size: 8px; letter-spacing: .08em; color: rgba(255, 201, 211, .62); }
.lt-custom-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 0;
  border-top: 1px solid rgba(255, 220, 235, .07);
}
.lt-custom-item > span { flex: 0 0 18px; font-size: 7px; color: rgba(255, 196, 207, .5); }
.lt-custom-item > p {
  flex: 1;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  color: rgba(255, 231, 240, .7);
}
.lt-custom-item > button {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 220, 235, .14);
  background: transparent;
  color: rgba(255, 205, 215, .62);
  font-size: 14px;
}
.lt-start,
.lt-next,
.lt-save {
  width: 100%;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255, 205, 220, .5);
  background: linear-gradient(135deg, #f4b4ac 0%, #e18ea9 52%, #c174a0 100%);
  color: #2c0c1b;
  font-size: 12px;
  letter-spacing: .06em;
  box-shadow: 0 10px 24px rgba(203, 84, 137, .22), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.lt-start { margin-top: 16px; }
.lt-start[disabled],
.lt-next[disabled],
.lt-save[disabled] { opacity: .38; box-shadow: none; }
.lt-note {
  margin: 12px 0 0;
  text-align: center;
  font-size: 9px;
  line-height: 1.7;
  color: rgba(255, 223, 235, .4);
}

/* answering */
.lt-answer { display: flex; flex-direction: column; }
.lt-answer-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 2px 4px 12px;
}
.lt-person-label { margin: 0 0 3px; font-size: 8px; letter-spacing: .13em; color: rgba(255, 188, 201, .76); }
.lt-progress-label { margin: 0; font-size: 10px; color: rgba(255, 228, 238, .54); }
.lt-progress {
  flex: 1 1 auto;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.lt-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffb5a9, #f3a2c0, #c3a7ff);
  transition: width 280ms var(--ease);
}
.lt-question-panel {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 0;
  padding: 6px 0 12px;
}
.lt-question-card {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 20px 16px;
  border-radius: 23px;
  border: 1px solid rgba(255, 221, 235, .17);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 178, 181, .1), transparent 52%),
    rgba(255, 255, 255, .045);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.lt-theme {
  margin: 0 0 9px;
  font-size: 8px;
  letter-spacing: .12em;
  color: rgba(255, 190, 202, .68);
}
.lt-question-card h2 {
  margin: 0;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: clamp(19px, 5.2vw, 26px);
  font-weight: 500;
  line-height: 1.5;
  color: #fff1f6;
}
.lt-options { display: flex; flex-direction: column; gap: 7px; margin-top: 17px; }
.lt-option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 10px 11px;
  border-radius: 13px;
  border: 1px solid rgba(255, 222, 235, .12);
  background: rgba(255, 255, 255, .025);
  color: rgba(255, 236, 243, .72);
  text-align: left;
  transition: border-color 150ms var(--ease), background 150ms var(--ease), transform 150ms var(--ease);
}
.lt-option > span {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 211, 223, .22);
  color: rgba(255, 208, 219, .66);
  font-size: 8px;
}
.lt-option b { font-size: 11px; line-height: 1.55; font-weight: 400; }
.lt-option.selected {
  border-color: rgba(255, 181, 196, .6);
  background: linear-gradient(135deg, rgba(154, 64, 95, .42), rgba(78, 34, 65, .4));
  color: #fff2f7;
  box-shadow: 0 0 18px rgba(255, 145, 170, .1), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.lt-option.selected > span {
  border-color: rgba(255, 208, 218, .72);
  background: rgba(255, 194, 203, .22);
  color: #fff4f8;
}
.lt-option:active { transform: scale(.99); }
.lt-answer > .lt-next,
.lt-reveal > .lt-next {
  max-width: 620px;
  margin: 2px auto 0;
}

/* handoff */
.lt-handoff {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.lt-seal {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 189, 203, .45);
  color: #ffd3d8;
  font-family: "Songti SC", "STSong", serif;
  font-size: 30px;
  background: radial-gradient(circle at 40% 30%, rgba(255, 255, 255, .16), transparent 45%), rgba(255, 255, 255, .035);
  box-shadow: 0 0 38px rgba(255, 143, 165, .16), inset 0 0 22px rgba(255, 255, 255, .04);
}
.lt-handoff h2 {
  margin: 6px 0 8px;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: clamp(28px, 8vw, 40px);
  font-weight: 500;
}
.lt-handoff-copy {
  margin: 0;
  font-size: 11px;
  line-height: 1.8;
  color: rgba(255, 226, 238, .58);
}
.lt-handoff .lt-next { max-width: 320px; margin-top: 24px; }
.lt-handoff .lt-note { margin-top: 12px; }

/* reveal */
.lt-reveal { display: flex; flex-direction: column; }
.lt-reveal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 4px;
  font-size: 8px;
  letter-spacing: .12em;
  color: rgba(255, 211, 224, .58);
}
.lt-compare {
  width: 100%;
  max-width: 620px;
  margin: 10px auto 0;
  padding: 18px 16px 16px;
  border-radius: 23px;
  border: 1px solid rgba(255, 221, 236, .17);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 178, 181, .09), transparent 54%),
    rgba(255, 255, 255, .045);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .14);
  animation: ltIn 380ms var(--ease) both;
}
@keyframes ltIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.lt-compare h2 {
  margin: 0;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: clamp(18px, 4.8vw, 24px);
  font-weight: 500;
  line-height: 1.5;
  color: #fff1f6;
}
.lt-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 16px;
}
.lt-answer-box {
  min-height: 132px;
  padding: 11px 10px;
  border-radius: 15px;
  border: 1px solid rgba(255, 222, 236, .12);
  background: rgba(255, 255, 255, .03);
}
.lt-answer-box[data-person="A"] { --person: #f1b39e; }
.lt-answer-box[data-person="B"] { --person: #cbb4ff; }
.lt-avatar {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--person);
  color: #2a1220;
  font-size: 9px;
  font-weight: 600;
}
.lt-answer-box p {
  margin: 11px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255, 238, 245, .82);
}
.lt-author-btn {
  margin-top: 13px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px dashed rgba(255, 211, 224, .28);
  background: transparent;
  color: rgba(255, 226, 238, .53);
  font-size: 8px;
}
.lt-authored {
  margin-top: 12px;
  font-size: 8px;
  color: rgba(255, 211, 224, .62);
}
.lt-reveal .lt-note { margin-top: 10px; }

/* album */
.lt-album-head { padding-top: 8px; }
.lt-album-head h1 {
  margin: 0;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: clamp(29px, 7.8vw, 42px);
  font-weight: 500;
  line-height: 1.28;
}
.lt-album-head p:last-child {
  margin: 8px 0 0;
  font-size: 9px;
  color: rgba(255, 225, 238, .5);
}
.lt-album-list { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.lt-compact { max-width: none; padding: 13px 13px 12px; border-radius: 18px; animation: none; }
.lt-compact h2 { font-size: 16px; line-height: 1.45; }
.lt-compact .lt-compare-grid { margin-top: 11px; gap: 7px; }
.lt-compact .lt-answer-box { min-height: 0; padding: 9px; }
.lt-compact .lt-answer-box p { margin-top: 8px; font-size: 10px; line-height: 1.5; }
.lt-compact .lt-avatar { width: 20px; height: 20px; font-size: 8px; }
.lt-compact .lt-theme { margin-bottom: 6px; }
.lt-compact .lt-author-btn { margin-top: 10px; }
.lt-compact .lt-authored { margin-top: 9px; }
.lt-album-actions { display: flex; gap: 8px; margin-top: 18px; }
.lt-album-actions .lt-save { flex: 1.45; }
.lt-replay {
  flex: 1;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255, 221, 235, .18);
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 233, 242, .7);
  font-size: 11px;
}
.lt-save-status { min-height: 14px; margin: 8px 0 0; text-align: center; font-size: 8px; color: rgba(255, 210, 222, .56); }

@media (hover: hover) and (pointer: fine) {
  .lt-option:hover { border-color: rgba(255, 201, 214, .35); background: rgba(255, 255, 255, .055); }
  .lt-start:hover, .lt-next:hover, .lt-save:hover { filter: brightness(1.05); box-shadow: 0 12px 28px rgba(214, 95, 145, .28), inset 0 1px 0 rgba(255, 255, 255, .6); }
  .lt-replay:hover { background: rgba(255, 255, 255, .07); }
}
@media (max-width: 380px) {
  .lt-hero h1 { font-size: 28px; }
  .lt-source { padding: 9px 6px; }
  .lt-source b { font-size: 9px; }
  .lt-option b { font-size: 10.5px; }
  .lt-compare { padding-left: 13px; padding-right: 13px; }
  .lt-answer-box p { font-size: 10px; }
}
@media (max-height: 700px) {
  .lt-shell { min-height: calc(100dvh - 82px); padding-bottom: 14px; }
  .lt-hero h1 { font-size: 28px; }
  .lt-deck-panel { margin-top: 14px; padding: 9px 11px; }
  .lt-label { margin-top: 12px; }
  .lt-sources { gap: 6px; }
  .lt-source { padding: 8px 7px; }
  .lt-custom-toggle { height: 34px; }
  .lt-start { height: 44px; margin-top: 12px; }
  .lt-note { margin-top: 8px; }
  .lt-question-card { padding: 15px 13px; }
  .lt-options { gap: 5px; margin-top: 12px; }
  .lt-option { padding: 8px 9px; }
  .lt-option b { font-size: 10.5px; line-height: 1.45; }
  .lt-question-panel { padding-top: 2px; padding-bottom: 8px; }
  .lt-handoff .lt-seal { width: 64px; height: 64px; margin-bottom: 12px; font-size: 24px; }
  .lt-handoff h2 { font-size: 28px; }
  .lt-compare { margin-top: 6px; padding: 14px 13px; }
  .lt-compare h2 { font-size: 18px; }
  .lt-answer-box { min-height: 106px; }
  .lt-answer-box p { font-size: 10px; }
  .lt-album-list { margin-top: 12px; }
}
@media (min-width: 900px) {
  .game-view[data-active-game="love-translator"] {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    padding: 0 clamp(24px, 6vw, 88px) 34px;
    box-shadow: none;
  }
  .game-view[data-active-game="love-translator"] .game-view-top,
  .game-view[data-active-game="love-translator"] .game-view-body {
    width: min(100%, 760px);
    margin-inline: auto;
  }
  .lt-shell { min-height: calc(100dvh - 120px); padding-top: 18px; }
  .lt-hero h1 { font-size: 56px; }
  .lt-sub { font-size: 11px; }
  .lt-deck-panel { margin-top: 30px; padding: 15px 18px; }
  .lt-source { padding: 13px 12px; }
  .lt-source b { font-size: 11px; }
  .lt-source small { font-size: 8px; }
  .lt-question-card { padding: 28px 28px; }
  .lt-option b { font-size: 13px; }
  .lt-compare { padding: 24px 24px 22px; }
  .lt-compare h2 { font-size: 26px; }
  .lt-answer-box { min-height: 148px; padding: 15px 14px; }
  .lt-answer-box p { font-size: 13px; }
  .lt-handoff h2 { font-size: 42px; }
  .lt-handoff .lt-next { max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .lt-compare { animation: none; }
  .lt-progress i { transition: none; }
}

/* =========================================================
   v0.8 · 禁忌问题交换局
   ========================================================= */
.game-view[data-active-game="taboo-exchange"] {
  --tc-gold: #c9a06c;
  --tc-rose: #a75e68;
  --tc-ink: #f2e6dd;
  --tc-dim: rgba(232, 207, 194, .52);
  background:
    radial-gradient(circle at 78% 0%, rgba(153, 69, 92, .16), transparent 34%),
    radial-gradient(circle at 12% 88%, rgba(92, 53, 108, .14), transparent 42%),
    radial-gradient(circle at 50% 42%, rgba(93, 30, 48, .12), transparent 54%),
    linear-gradient(180deg, #12080e 0%, #0d060b 52%, #070306 100%);
  color: var(--tc-ink);
}
.game-view[data-active-game="taboo-exchange"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 17% 24%, rgba(235, 208, 185, .3) 0 1px, transparent 1.3px),
    radial-gradient(circle at 74% 18%, rgba(201, 160, 108, .26) 0 1px, transparent 1.3px),
    radial-gradient(circle at 43% 73%, rgba(220, 185, 178, .2) 0 1px, transparent 1.4px),
    repeating-linear-gradient(114deg, transparent 0 47px, rgba(255, 235, 220, .012) 48px 49px);
  background-size: 230px 240px, 300px 280px, 370px 330px, auto;
  opacity: .62;
}
.game-view[data-active-game="taboo-exchange"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, transparent 30%, rgba(2, 1, 3, .58) 100%);
}
.game-view[data-active-game="taboo-exchange"] .game-view-top,
.game-view[data-active-game="taboo-exchange"] .game-view-body {
  position: relative;
  z-index: 1;
}
.game-view[data-active-game="taboo-exchange"] .game-view-top { z-index: 3; }

.tc-shell {
  width: 100%;
  max-width: 760px;
  min-height: calc(100dvh - 96px);
  margin: 0 auto;
  padding: 6px 2px 24px;
  color: var(--tc-ink);
}
.tc-eyebrow {
  margin: 0 0 10px;
  font-size: 8px;
  letter-spacing: .2em;
  color: rgba(201, 160, 108, .82);
}

/* intro */
.tc-intro-head { padding: 8px 2px 0; }
.tc-intro-head h1 {
  margin: 0;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: clamp(35px, 10vw, 58px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: .03em;
  color: #f6e9df;
  text-shadow: 0 0 28px rgba(166, 87, 91, .16);
}
.tc-intro-sub {
  margin: 12px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(232, 207, 194, .66);
}
.tc-letter {
  position: relative;
  margin-top: 24px;
  padding: 26px 20px 22px;
  border-radius: 4px 4px 18px 18px;
  border: 1px solid rgba(201, 160, 108, .3);
  background:
    linear-gradient(180deg, rgba(255, 235, 218, .035), transparent 32%),
    repeating-linear-gradient(0deg, transparent 0 35px, rgba(255, 237, 222, .018) 36px 37px),
    linear-gradient(155deg, rgba(45, 22, 29, .92), rgba(18, 9, 15, .96));
  box-shadow:
    0 28px 60px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 236, 218, .11);
}
.tc-letter::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 160, 108, .3), transparent);
  pointer-events: none;
}
.tc-letter-mark {
  position: absolute;
  top: -13px;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(201, 160, 108, .5);
  background: #1b0d14;
  color: #d8b283;
  font-size: 11px;
  box-shadow: 0 0 20px rgba(181, 111, 92, .2);
}
.tc-letter p {
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1.85;
  color: rgba(237, 216, 205, .7);
}
.tc-letter .tc-letter-lead {
  margin-bottom: 14px;
  font-family: "Songti SC", "STSong", serif;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(249, 231, 216, .9);
}
.tc-rule-block { margin: 20px 0 18px; }
.tc-rule {
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 0 9px;
  margin: 0 0 14px !important;
}
.tc-rule b {
  grid-row: span 2;
  font-family: "Georgia", serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(201, 160, 108, .85);
}
.tc-rule span {
  font-family: "Songti SC", "STSong", serif;
  font-size: 13px;
  color: rgba(249, 231, 216, .88);
}
.tc-rule { font-size: 10px !important; line-height: 1.7 !important; }
.tc-rule br { display: block; }
.tc-letter-note {
  padding-top: 10px;
  border-top: 1px solid rgba(201, 160, 108, .12);
  font-size: 10px !important;
  line-height: 1.8 !important;
  color: rgba(232, 207, 194, .56) !important;
}
.tc-consent {
  margin-top: 18px;
  padding: 9px 10px;
  border: 1px solid rgba(167, 94, 104, .24);
  border-radius: 8px;
  text-align: center;
  font-size: 8px;
  line-height: 1.6;
  letter-spacing: .05em;
  color: rgba(218, 176, 162, .64);
  background: rgba(126, 55, 63, .08);
}
.tc-begin {
  width: 100%;
  height: 51px;
  margin-top: 14px;
  border-radius: 999px;
  border: 1px solid rgba(232, 191, 141, .58);
  background: linear-gradient(135deg, #7e4c3d, #a75e60 48%, #5e3440);
  color: #fff0de;
  font-family: "Songti SC", "STSong", serif;
  font-size: 15px;
  letter-spacing: .12em;
  box-shadow: 0 12px 28px rgba(115, 48, 64, .3), inset 0 1px 0 rgba(255, 238, 210, .45), 0 0 28px rgba(180, 99, 82, .14);
  transition: transform 160ms var(--ease), filter 160ms var(--ease);
}
.tc-begin:active { transform: scale(.985); }
.tc-intro-foot {
  margin: 12px 0 0 !important;
  text-align: center;
  font-family: "Songti SC", "STSong", serif;
  font-size: 10px !important;
  color: rgba(201, 160, 108, .58) !important;
}

/* game */
.tc-game {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 96px);
}
.tc-top {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
}
.tc-player {
  min-width: 0;
  padding: 9px 9px 8px;
  border-radius: 13px;
  border: 1px solid rgba(201, 160, 108, .12);
  background: rgba(255, 255, 255, .022);
  transition: border-color 240ms var(--ease), background 240ms var(--ease), box-shadow 240ms var(--ease);
}
.tc-player.is-active {
  border-color: rgba(201, 160, 108, .45);
  background: linear-gradient(145deg, rgba(153, 78, 79, .16), rgba(48, 22, 34, .3));
  box-shadow: 0 0 24px rgba(163, 83, 86, .1), inset 0 1px 0 rgba(255, 231, 210, .09);
}
.tc-player-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
}
.tc-player-head b {
  font-family: "Georgia", "Songti SC", serif;
  font-size: 15px;
  font-weight: 400;
  color: rgba(246, 230, 217, .88);
}
.tc-player-head small { font-size: 7px; color: rgba(232, 207, 194, .46); white-space: nowrap; }
.tc-player.is-active .tc-player-head small { color: rgba(216, 178, 131, .8); }
.tc-token-row {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  margin-top: 7px;
  font-size: 7px;
  color: rgba(232, 207, 194, .46);
}
.tc-pips { display: inline-flex; gap: 2px; margin-right: 3px; }
.tc-pips i {
  width: 5px;
  height: 9px;
  border-radius: 50% 50% 45% 45%;
  border: 1px solid rgba(201, 160, 108, .22);
  background: rgba(255, 255, 255, .035);
}
.tc-pips i.is-on {
  border-color: rgba(216, 178, 131, .62);
  background: linear-gradient(180deg, #e0b782, #a56b4e);
  box-shadow: 0 0 7px rgba(201, 160, 108, .28);
}
.tc-embers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding-top: 12px;
}
.tc-ember {
  width: 4px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(180deg, #e8c08c, #a15b4f);
  box-shadow: 0 0 6px rgba(215, 143, 94, .35);
  opacity: .86;
  transition: opacity 300ms, background 300ms, box-shadow 300ms;
}
.tc-ember.is-spent {
  background: rgba(255, 235, 218, .1);
  box-shadow: none;
  opacity: .3;
}
.tc-ember.is-current {
  transform: scale(1.45);
  background: #f0c58d;
  box-shadow: 0 0 10px rgba(240, 180, 112, .6);
}
.tc-table {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 10px 0 2px;
  perspective: 1500px;
}
.tc-card-wrap {
  position: relative;
  width: min(70vw, 286px);
  aspect-ratio: 3 / 4.3;
  transform-style: preserve-3d;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .4));
}
.tc-card {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(.2, .75, .2, 1);
  cursor: pointer;
  outline: none;
  will-change: transform;
}
.tc-card.is-open { transform: rotateY(180deg); }
.tc-card:focus-visible { outline: 2px solid rgba(225, 186, 137, .86); outline-offset: 5px; }
.tc-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 5;
  border-radius: 19px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(230, 191, 141, .9), rgba(130, 68, 74, .4) 35%, rgba(181, 108, 92, .7) 68%, rgba(230, 191, 141, .8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(197, 126, 92, .38));
}
.tc-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 18px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid rgba(221, 180, 138, .2);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, .52),
    0 0 0 1px rgba(240, 208, 169, .12),
    inset 0 1px 0 rgba(255, 239, 220, .12);
}
.tc-back {
  background:
    radial-gradient(ellipse at 50% 36%, rgba(142, 65, 73, .16), transparent 48%),
    repeating-linear-gradient(135deg, rgba(255, 230, 205, .018) 0 1px, transparent 1px 12px),
    linear-gradient(155deg, #241019, #10070c 70%);
}
.tc-back::before,
.tc-back::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(201, 160, 108, .18);
  border-radius: 12px;
  pointer-events: none;
}
.tc-back::after { inset: 19px; border-color: rgba(201, 160, 108, .08); }
.tc-envelope-line {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 160, 108, .35), transparent);
  transform: rotate(-30deg);
}
.tc-wax {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(230, 185, 136, .55);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 226, 188, .38), transparent 26%),
    radial-gradient(circle at 50% 52%, #8f4a4e, #5b2e3b 62%, #2d141d);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .45), 0 0 24px rgba(170, 82, 77, .22), inset 0 0 16px rgba(255, 203, 155, .12);
  color: #efd6ae;
  font-family: "Songti SC", "STSong", serif;
  font-size: 22px;
}
.tc-wax::before,
.tc-wax::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(230, 185, 136, .35);
  transform: rotate(45deg);
}
.tc-wax::before { left: -14px; }
.tc-wax::after { right: -14px; }
.tc-wax i { font-style: normal; transform: rotate(-8deg); }
.tc-back > small {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  font-size: 7px;
  letter-spacing: .26em;
  color: rgba(201, 160, 108, .46);
}
.tc-front {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 17% 13% 19%;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(142, 58, 70, .16), transparent 52%),
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(255, 231, 207, .018) 33px 34px),
    linear-gradient(155deg, #2d1620, #160b11 72%);
}
.tc-category {
  position: absolute;
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 4px 9px;
  border: 1px solid rgba(201, 160, 108, .24);
  border-radius: 999px;
  color: rgba(217, 177, 128, .76);
  font-size: 7px;
  letter-spacing: .1em;
  white-space: nowrap;
  background: rgba(8, 4, 7, .24);
}
.tc-question {
  margin: 0;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: clamp(16px, 4.5vw, 21px);
  line-height: 1.78;
  text-align: center;
  color: rgba(249, 232, 216, .92);
  text-shadow: 0 0 22px rgba(169, 83, 88, .16);
}
.tc-front-seal {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  color: rgba(201, 160, 108, .48);
  font-size: 15px;
  text-shadow: 0 0 14px rgba(201, 160, 108, .3);
}
.tc-trail {
  position: absolute;
  left: -30%;
  top: 38%;
  width: 160%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 217, 174, 0) 18%, rgba(255, 218, 177, .95) 50%, rgba(255, 217, 174, 0) 82%, transparent);
  transform: rotate(-34deg) translateX(-65%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 7;
}
.tc-card.is-opening .tc-trail { animation: tcTrail 900ms ease-out both; }
@keyframes tcTrail {
  0% { opacity: 0; transform: rotate(-34deg) translateX(-65%); }
  26% { opacity: 1; }
  100% { opacity: 0; transform: rotate(-34deg) translateX(65%); }
}
.tc-smoke {
  position: absolute;
  inset: -18% -12%;
  pointer-events: none;
  opacity: 0;
  z-index: 6;
}
.tc-smoke i {
  position: absolute;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(164, 113, 108, .3), rgba(72, 45, 51, .08) 52%, transparent 70%);
  filter: blur(10px);
  opacity: 0;
}
.tc-smoke i:nth-child(1) { left: 4%; top: 18%; }
.tc-smoke i:nth-child(2) { left: 28%; top: 4%; }
.tc-smoke i:nth-child(3) { right: 20%; top: 20%; }
.tc-smoke i:nth-child(4) { left: 20%; bottom: 10%; }
.tc-smoke i:nth-child(5) { right: 5%; bottom: 16%; }
.tc-card-wrap.is-exchanging .tc-card { animation: tcShudder 680ms cubic-bezier(.2, .8, .2, 1) both; }
.tc-card-wrap.is-exchanging .tc-smoke,
.tc-card-wrap.is-skipping .tc-smoke { opacity: 1; }
.tc-card-wrap.is-exchanging .tc-smoke i,
.tc-card-wrap.is-skipping .tc-smoke i { animation: tcSmoke 760ms ease-out both; }
.tc-card-wrap.is-exchanging .tc-smoke i:nth-child(2) { animation-delay: 60ms; }
.tc-card-wrap.is-exchanging .tc-smoke i:nth-child(3) { animation-delay: 120ms; }
.tc-card-wrap.is-skipping .tc-card { animation: tcFold 620ms cubic-bezier(.4, 0, .2, 1) both; }
@keyframes tcShudder {
  0%, 100% { transform: translate3d(0, 0, 0) rotateY(180deg) scale(1); }
  18% { transform: translate3d(-4px, 2px, 0) rotateY(180deg) scale(.985); }
  38% { transform: translate3d(4px, -2px, 0) rotateY(180deg) scale(.99); }
  58% { transform: translate3d(-3px, 1px, 0) rotateY(180deg) scale(.98); }
  78% { transform: translate3d(2px, 0, 0) rotateY(180deg) scale(.99); }
}
@keyframes tcFold {
  0% { transform: rotateY(180deg) rotateX(0) scale(1); opacity: 1; }
  58% { transform: rotateY(180deg) rotateX(46deg) scale(.9); opacity: .68; }
  100% { transform: rotateY(180deg) rotateX(78deg) scale(.72); opacity: 0; }
}
@keyframes tcSmoke {
  0% { opacity: 0; transform: translateY(10px) scale(.7); }
  38% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-24px) scale(1.35); }
}
.tc-hint {
  min-height: 18px;
  margin: 9px 0 7px;
  text-align: center;
  font-size: 9px;
  line-height: 1.6;
  color: rgba(232, 207, 194, .5);
}
.tc-controls {
  min-height: 92px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.tc-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
  max-width: 420px;
  opacity: 0;
  transform: translateY(9px);
  pointer-events: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.tc-actions.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tc-seal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(232, 207, 194, .62);
}
.tc-seal-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(201, 160, 108, .25);
  background:
    radial-gradient(circle at 35% 26%, rgba(255, 228, 193, .18), transparent 32%),
    linear-gradient(150deg, rgba(106, 50, 58, .55), rgba(32, 15, 23, .7));
  box-shadow: 0 7px 15px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 232, 209, .13);
  transition: transform 160ms var(--ease), border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.tc-seal svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(201, 160, 108, .28));
}
.tc-seal b { font-size: 9px; font-weight: 500; }
.tc-seal small { font-size: 7px; color: rgba(232, 207, 194, .38); }
.tc-seal.answer { color: #d9b17f; }
.tc-seal.ask { color: #d58d91; }
.tc-seal.swap { color: #b79ac2; }
.tc-seal.skip { color: rgba(232, 207, 194, .6); }
.tc-seal:disabled { opacity: .28; }
.tc-seal:disabled .tc-seal-icon { box-shadow: none; }
.tc-seal:active:not(:disabled) .tc-seal-icon { transform: scale(.92); }
.tc-choice {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  animation: tcFadeIn 260ms var(--ease) both;
}
.tc-choice.two > * { flex: 1; }
.tc-choice-btn {
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(201, 160, 108, .3);
  font-size: 11px;
  letter-spacing: .06em;
}
.tc-choice-btn.primary {
  background: linear-gradient(135deg, #8e5844, #ae6962 55%, #71404c);
  color: #fff0de;
  border-color: rgba(232, 191, 141, .5);
  box-shadow: 0 9px 20px rgba(117, 51, 65, .26), inset 0 1px 0 rgba(255, 237, 209, .45);
}
.tc-choice-btn.ghost { background: rgba(255, 255, 255, .025); color: rgba(232, 207, 194, .62); }
@keyframes tcFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.tc-flying-seal {
  position: fixed;
  z-index: 180;
  width: 22px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 45% 45%;
  border: 1px solid rgba(232, 191, 141, .72);
  background: linear-gradient(180deg, #e7bd83, #a76651);
  color: #35161d;
  font-size: 10px;
  pointer-events: none;
  box-shadow: 0 0 18px rgba(211, 137, 88, .38);
}

/* end */
.tc-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tc-end-seal {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 50%;
  border: 1px solid rgba(201, 160, 108, .42);
  color: #d8b283;
  font-size: 27px;
  background: radial-gradient(circle at 36% 28%, rgba(255, 229, 192, .16), transparent 30%), rgba(126, 55, 63, .16);
  box-shadow: 0 0 38px rgba(170, 80, 84, .16);
}
.tc-end h1 {
  margin: 4px 0 10px;
  font-family: "Songti SC", "STSong", serif;
  font-size: clamp(30px, 8.5vw, 48px);
  font-weight: 500;
}
.tc-end-copy {
  margin: 0;
  font-size: 12px;
  line-height: 1.85;
  color: rgba(232, 207, 194, .62);
}
.tc-end-quote {
  margin: 24px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 14px;
  color: rgba(226, 190, 144, .76);
}
.tc-end-embers { display: flex; gap: 5px; margin-top: 22px; }
.tc-end-embers .tc-ember { opacity: .22; }
.tc-end-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  margin-top: 28px;
}
.tc-end-actions > * { flex: 1; }

@media (hover: hover) and (pointer: fine) {
  .tc-seal:hover:not(:disabled) .tc-seal-icon {
    transform: translateY(-2px);
    border-color: rgba(201, 160, 108, .58);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .32), 0 0 20px rgba(201, 120, 94, .18);
  }
  .tc-choice-btn.primary:hover, .tc-begin:hover { filter: brightness(1.07); }
  .tc-choice-btn.ghost:hover { background: rgba(255, 255, 255, .055); }
}
@media (max-width: 380px) {
  .tc-player { padding: 7px 7px 6px; }
  .tc-token-row { font-size: 6px; gap: 2px; }
  .tc-player-head b { font-size: 13px; }
  .tc-seal-icon { width: 42px; height: 42px; }
  .tc-seal svg { width: 21px; height: 21px; }
  .tc-card-wrap { width: min(72vw, 260px); }
}
@media (max-height: 700px) {
  .tc-shell { min-height: calc(100dvh - 82px); padding-bottom: 14px; }
  .tc-intro-head h1 { font-size: 32px; }
  .tc-letter { margin-top: 16px; padding: 18px 15px 16px; }
  .tc-card-wrap { width: min(58vw, 224px); }
  .tc-table { padding-top: 2px; }
  .tc-hint { margin: 5px 0 5px; }
  .tc-controls { min-height: 78px; }
  .tc-seal-icon { width: 41px; height: 41px; }
  .tc-seal svg { width: 20px; height: 20px; }
  .tc-seal b { font-size: 8px; }
  .tc-seal small { display: none; }
  .tc-top { gap: 4px; }
  .tc-player { padding: 6px; }
  .tc-token-row { margin-top: 4px; }
}
@media (min-width: 900px) {
  .game-view[data-active-game="taboo-exchange"] {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    padding: 0 clamp(24px, 6vw, 88px) 34px;
    box-shadow: none;
  }
  .game-view[data-active-game="taboo-exchange"] .game-view-top,
  .game-view[data-active-game="taboo-exchange"] .game-view-body {
    width: min(100%, 760px);
    margin-inline: auto;
  }
  .tc-shell { min-height: calc(100dvh - 120px); padding-top: 16px; }
  .tc-intro-head h1 { font-size: 62px; }
  .tc-letter { max-width: 700px; margin-left: auto; margin-right: auto; padding: 32px 34px 27px; }
  .tc-card-wrap { width: 300px; }
  .tc-question { font-size: 22px; }
  .tc-seal-icon { width: 52px; height: 52px; }
  .tc-seal svg { width: 26px; height: 26px; }
  .tc-seal b { font-size: 10px; }
  .tc-top { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tc-card { transition: none; }
  .tc-actions, .tc-choice { animation: none; transition: none; }
  .tc-card.is-opening .tc-trail,
  .tc-card-wrap.is-exchanging .tc-card,
  .tc-card-wrap.is-exchanging .tc-smoke i,
  .tc-card-wrap.is-skipping .tc-card,
  .tc-card-wrap.is-skipping .tc-smoke i { animation: none; }
}

/* =========================================================
   v0.11 · 情侣大富翁 · 今夜旅馆（叙事改造）
   ========================================================= */
.game-view[data-active-game="monopoly"] {
  --mp-brass: #c9a064;
  --mp-brass-soft: #e7c58e;
  --mp-wine: #743944;
  --mp-green: #19362d;
  --mp-ink: #f2e6d7;
  --mp-dim: rgba(236, 220, 198, .52);
  background:
    radial-gradient(circle at 82% 2%, rgba(198, 145, 78, .15), transparent 35%),
    radial-gradient(circle at 10% 92%, rgba(39, 93, 74, .2), transparent 42%),
    radial-gradient(circle at 50% 48%, rgba(108, 42, 50, .1), transparent 58%),
    linear-gradient(180deg, #091410 0%, #0b0d0a 55%, #070605 100%);
  color: var(--mp-ink);
}
.game-view[data-active-game="monopoly"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(244, 211, 158, .25) 0 1px, transparent 1.3px),
    radial-gradient(circle at 76% 18%, rgba(197, 153, 91, .24) 0 1px, transparent 1.3px),
    radial-gradient(circle at 44% 78%, rgba(232, 199, 157, .18) 0 1px, transparent 1.4px),
    repeating-linear-gradient(113deg, transparent 0 53px, rgba(239, 214, 174, .012) 54px 55px);
  background-size: 260px 270px, 330px 310px, 410px 370px, auto;
  opacity: .55;
}
.game-view[data-active-game="monopoly"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 43%, transparent 32%, rgba(2, 1, 2, .58) 100%);
}
.game-view[data-active-game="monopoly"] .game-view-top,
.game-view[data-active-game="monopoly"] .game-view-body { position: relative; z-index: 1; }
.game-view[data-active-game="monopoly"] .game-view-top { z-index: 3; }

.mp-shell {
  width: 100%;
  max-width: 760px;
  min-height: calc(100dvh - 96px);
  margin: 0 auto;
  padding: 4px 2px 16px;
  color: var(--mp-ink);
}
.mp-eyebrow {
  margin: 0 0 7px;
  font-size: 7px;
  letter-spacing: .2em;
  color: rgba(201, 160, 100, .78);
}

/* ---------- check-in ---------- */
.mp-entry-head { padding: 7px 2px 0; }
.mp-entry-head h1 {
  margin: 0;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: clamp(34px, 9.5vw, 52px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: .03em;
  color: #f5e7d3;
  text-shadow: 0 0 28px rgba(201, 160, 100, .13);
}
.mp-entry-sub { margin: 10px 0 0; font-size: 10px; color: rgba(236, 220, 198, .55); }
.mp-registration {
  position: relative;
  margin-top: 20px;
  padding: 22px 18px 18px;
  border-radius: 7px 7px 18px 18px;
  border: 1px solid rgba(201, 160, 100, .3);
  background:
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(250, 232, 205, .018) 35px 36px),
    radial-gradient(ellipse at 50% 0%, rgba(180, 119, 67, .1), transparent 50%),
    linear-gradient(155deg, rgba(43, 33, 24, .94), rgba(14, 14, 11, .97));
  box-shadow: 0 30px 60px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 236, 208, .1);
}
.mp-registration::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 160, 100, .34), transparent);
}
.mp-reg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 13px; }
.mp-reg-top span { font-size: 7px; letter-spacing: .13em; color: rgba(201, 160, 100, .55); }
.mp-reg-top b { font-family: "Songti SC", "STSong", serif; font-size: 17px; font-weight: 500; color: #f2dfc6; }
.mp-mode-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mp-mode-key {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 62px;
  padding: 10px;
  border-radius: 13px;
  border: 1px solid rgba(201, 160, 100, .14);
  background: rgba(255, 255, 255, .022);
  color: rgba(236, 220, 198, .56);
  text-align: left;
}
.mp-mode-key.active {
  border-color: rgba(201, 160, 100, .55);
  background: linear-gradient(145deg, rgba(121, 82, 46, .34), rgba(41, 29, 22, .44));
  color: #f4e3c8;
  box-shadow: 0 0 22px rgba(201, 160, 100, .09), inset 0 1px 0 rgba(255, 237, 208, .1);
}
.mp-mode-ring {
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(201, 160, 100, .26);
  color: #d9b67d;
  font-size: 15px;
}
.mp-mode-key.active .mp-mode-ring { border-color: rgba(231, 197, 142, .64); box-shadow: 0 0 14px rgba(201, 160, 100, .18); }
.mp-mode-key b { display: block; font-size: 11px; font-weight: 500; }
.mp-mode-key small { display: block; margin-top: 3px; font-size: 5px; letter-spacing: .08em; color: rgba(236, 220, 198, .35); }
.mp-mode-note { margin: 10px 0 0; font-size: 8px; line-height: 1.6; color: rgba(236, 220, 198, .42); }
.mp-penalty-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 17px; }
.mp-penalty-field { display: block; }
.mp-penalty-field > span { display: block; margin-bottom: 6px; font-size: 8px; color: rgba(236, 220, 198, .55); }
.mp-penalty-field input {
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  padding: 8px 9px;
  border-radius: 9px;
  border: 1px solid rgba(201, 160, 100, .2);
  background: rgba(0, 0, 0, .18);
  color: #f4e7d4;
  font: inherit;
  font-size: 10px;
}
.mp-penalty-field input:focus { outline: none; border-color: rgba(226, 185, 119, .65); }
.mp-penalty-field input::placeholder { color: rgba(236, 220, 198, .27); }
.mp-rule-card {
  margin-top: 16px;
  padding: 12px 12px 9px;
  border-top: 1px solid rgba(201, 160, 100, .12);
  border-bottom: 1px solid rgba(201, 160, 100, .12);
  background: rgba(0, 0, 0, .08);
}
.mp-rule-eyebrow { margin: 0 0 7px; font-size: 6px; letter-spacing: .18em; color: rgba(201, 160, 100, .45); }
.mp-rule-card p:not(.mp-rule-eyebrow) { margin: 0 0 5px; font-size: 8px; line-height: 1.55; color: rgba(236, 220, 198, .5); }
.mp-rule-card p b { display: inline-block; min-width: 18px; color: rgba(225, 186, 126, .9); font-family: "Georgia", serif; font-weight: 400; }
.mp-start {
  width: 100%;
  height: 47px;
  margin-top: 15px;
  border-radius: 999px;
  border: 1px solid rgba(236, 195, 129, .52);
  background: linear-gradient(135deg, #7c5635, #b4834f 52%, #694536);
  color: #fff0d9;
  font-size: 11px;
  letter-spacing: .08em;
  box-shadow: 0 10px 24px rgba(101, 69, 38, .24), inset 0 1px 0 rgba(255, 240, 206, .42);
}
.mp-start[disabled] { opacity: .36; box-shadow: none; }
.mp-start-hint { min-height: 13px; margin: 8px 0 0; text-align: center; font-size: 8px; color: rgba(236, 220, 198, .38); }
.mp-entry-foot { margin: 12px 0 0; text-align: center; font-family: "Songti SC", "STSong", serif; font-size: 10px; color: rgba(201, 160, 100, .52); }

/* ---------- game shell ---------- */
.mp-game { display: flex; flex-direction: column; }
.mp-game-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 3px 2px 0; }
.mp-game-head h1 {
  margin: 0;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: clamp(25px, 6.8vw, 36px);
  font-weight: 500;
  line-height: 1.2;
  color: #f5e7d3;
}
.mp-head-right { display: flex; align-items: center; gap: 7px; }
.mp-night-count { font-size: 8px; letter-spacing: .05em; color: rgba(236, 220, 198, .46); white-space: nowrap; }
.mp-checkout {
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(201, 160, 100, .18);
  background: transparent;
  color: rgba(236, 220, 198, .45);
  font-size: 7px;
}
.mp-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 9px 0 2px; }
.mp-player {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 7px;
  border-radius: 11px;
  border: 1px solid rgba(201, 160, 100, .1);
  background: rgba(255, 255, 255, .018);
}
.mp-player.is-active { border-color: rgba(201, 160, 100, .46); background: linear-gradient(145deg, rgba(118, 78, 49, .22), rgba(30, 25, 18, .38)); }
.mp-fob {
  flex: 0 0 auto;
  width: 24px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px 7px 4px 4px;
  border: 1px solid rgba(238, 203, 146, .42);
  background: linear-gradient(150deg, #e4bc7d, #9f674b);
  color: #341d18;
  font-family: "Georgia", serif;
  font-size: 10px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 242, 210, .48);
}
.mp-player:nth-child(2) .mp-fob { background: linear-gradient(150deg, #c7badb, #806d99); }
.mp-player.is-active .mp-fob { box-shadow: 0 0 15px rgba(230, 183, 108, .32), 0 3px 7px rgba(0, 0, 0, .28); }
.mp-fob.small { width: 18px; height: 23px; font-size: 8px; border-radius: 5px 5px 3px 3px; }
.mp-player-copy { min-width: 0; flex: 1 1 auto; }
.mp-player-copy b { display: block; font-family: "Georgia", "Songti SC", serif; font-size: 11px; font-weight: 400; }
.mp-player-copy b small { margin-left: 3px; font-family: "Songti SC", "STSong", serif; font-size: 7px; color: rgba(236, 220, 198, .4); }
.mp-player-copy p {
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 6px;
  color: rgba(236, 220, 198, .35);
}
.mp-matches { flex: 0 0 auto; display: flex; gap: 2px; }
.mp-matches i { width: 4px; height: 9px; border-radius: 50% 50% 45% 45%; border: 1px solid rgba(201, 160, 100, .22); background: rgba(255, 255, 255, .03); }
.mp-matches i.on { background: linear-gradient(180deg, #f0ca8f, #a86d4f); box-shadow: 0 0 6px rgba(201, 160, 100, .3); }

/* ---------- floor plan ---------- */
.mp-board {
  position: relative;
  width: min(100%, 500px);
  aspect-ratio: 1 / 1;
  margin: 5px auto 0;
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(255, 234, 205, .02) 50%, transparent 50%) 0 0 / 28px 28px,
    radial-gradient(ellipse at 50% 48%, rgba(55, 92, 74, .2), transparent 52%),
    linear-gradient(160deg, #0a120e, #080b08 70%);
  box-shadow: inset 0 0 75px rgba(0, 0, 0, .52), 0 22px 45px rgba(0, 0, 0, .28);
  overflow: hidden;
  perspective: 900px;
}
.mp-board::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 18px;
  border: 1px solid rgba(201, 160, 100, .11);
  pointer-events: none;
}
.mp-board::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 38%, rgba(0, 0, 0, .46) 100%);
  pointer-events: none;
}
.mp-corridor {
  position: absolute;
  inset: 5.5% 4%;
  border-radius: 22px;
  border: 1px solid rgba(201, 160, 100, .16);
  background:
    repeating-linear-gradient(90deg, rgba(255, 236, 204, .018) 0 1px, transparent 1px 18px),
    linear-gradient(100deg, rgba(98, 44, 49, .18), rgba(21, 31, 25, .32));
  box-shadow: inset 0 0 25px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.mp-corridor::before {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 14px;
  border: 1px dashed rgba(201, 160, 100, .12);
}
.mp-lobby {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 49%;
  aspect-ratio: 1 / .92;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 9px 7px;
  border-radius: 15px;
  border: 1px solid rgba(201, 160, 100, .25);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(204, 155, 91, .11), transparent 50%),
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(255, 236, 204, .018) 22px 23px),
    linear-gradient(155deg, #201b13, #0b0e0a 75%);
  box-shadow: 0 0 0 5px rgba(201, 160, 100, .025), inset 0 0 32px rgba(0, 0, 0, .45), 0 0 28px rgba(201, 160, 100, .06);
  text-align: center;
  z-index: 4;
}
.mp-lobby::before {
  content: "";
  position: absolute;
  left: 17%;
  right: 17%;
  bottom: -9px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .5), transparent 70%);
  filter: blur(5px);
}
.mp-lobby-eyebrow { margin: 0 0 3px; font-size: 5px; letter-spacing: .1em; color: rgba(201, 160, 100, .45); }
.mp-lobby h2 { margin: 0; font-family: "Songti SC", "STSong", serif; font-size: clamp(16px, 4vw, 22px); font-weight: 500; color: #f1dfc3; }
.mp-lobby-turn { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 4px 0 0; font-size: 6px; color: rgba(236, 220, 198, .42); }
.mp-die-tray { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 41px; margin-top: 6px; }
.mp-die-copy { text-align: left; }
.mp-die-copy b { display: block; font-family: "Georgia", "Songti SC", serif; font-size: 10px; font-weight: 400; color: rgba(232, 199, 146, .88); }
.mp-die-copy small { display: block; margin-top: 2px; font-size: 5px; color: rgba(236, 220, 198, .35); }
.mp-target-copy { min-height: 15px; margin: 5px 0 0; font-size: 6px; line-height: 1.5; color: rgba(236, 220, 198, .38); }

/* 3D die */
.mp-cube {
  position: relative;
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  transform-style: preserve-3d;
  transition: transform 760ms cubic-bezier(.2, .75, .2, 1);
  transform: rotateX(0deg) rotateY(0deg);
}
.mp-cube[data-value="2"] { transform: rotateX(-90deg) rotateY(0deg); }
.mp-cube[data-value="3"] { transform: rotateX(0deg) rotateY(-90deg); }
.mp-cube[data-value="4"] { transform: rotateX(0deg) rotateY(90deg); }
.mp-cube[data-value="5"] { transform: rotateX(90deg) rotateY(0deg); }
.mp-cube[data-value="6"] { transform: rotateX(0deg) rotateY(180deg); }
.mp-cube.is-rolling { animation: mpCubeRoll 780ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes mpCubeRoll {
  0% { transform: rotateX(0) rotateY(0) rotateZ(0) scale(1); }
  30% { transform: rotateX(190deg) rotateY(120deg) rotateZ(30deg) scale(.92); }
  65% { transform: rotateX(370deg) rotateY(250deg) rotateZ(-18deg) scale(1.05); }
  100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(0) scale(1); }
}
.mp-cube-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 5px;
  border: 1px solid rgba(237, 202, 143, .55);
  background: linear-gradient(145deg, #e9c58c, #a46a4d);
  box-shadow: inset 0 0 6px rgba(80, 38, 28, .45);
  backface-visibility: hidden;
}
.f1 { transform: translateZ(15.5px); }
.f2 { transform: rotateX(90deg) translateZ(15.5px); }
.f3 { transform: rotateY(90deg) translateZ(15.5px); }
.f4 { transform: rotateY(-90deg) translateZ(15.5px); }
.f5 { transform: rotateX(-90deg) translateZ(15.5px); }
.f6 { transform: rotateY(180deg) translateZ(15.5px); }
.mp-cube-pips { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; width: 100%; height: 100%; padding: 4px; box-sizing: border-box; }
.mp-cube-pips i { width: 4px; height: 4px; border-radius: 50%; justify-self: center; align-self: center; background: transparent; }
.mp-cube-pips i.on { background: #3b2117; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }

/* doors */
.mp-door {
  position: absolute;
  width: 42px;
  height: 46px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 5px 5px 3px 3px;
  border: 1px solid rgba(201, 160, 100, .2);
  background: linear-gradient(180deg, rgba(55, 40, 25, .78), rgba(16, 15, 11, .92));
  box-shadow: 0 5px 9px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 233, 199, .08);
  color: rgba(225, 198, 157, .58);
  z-index: 2;
  transition: border-color 220ms, box-shadow 220ms, transform 220ms, background 220ms;
}
.mp-door::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(232, 193, 132, .58);
  box-shadow: 0 0 5px rgba(232, 193, 132, .3);
}
.mp-door.is-event { width: 46px; height: 50px; border-color: rgba(201, 160, 100, .35); background: linear-gradient(180deg, rgba(97, 60, 35, .7), rgba(20, 17, 12, .94)); }
.mp-door.is-start { width: 50px; height: 54px; border-color: rgba(231, 194, 134, .62); background: linear-gradient(180deg, rgba(108, 78, 42, .8), rgba(27, 21, 13, .96)); color: #f1d39d; }
.mp-door.is-small { width: 36px; height: 40px; opacity: .72; }
.mp-room { font-family: "Georgia", serif; font-size: 5px; line-height: 1; color: rgba(236, 220, 198, .3); }
.mp-door-icon { font-family: "Songti SC", "STSong", serif; font-size: 13px; line-height: 1.05; color: rgba(232, 193, 132, .84); }
.mp-door.is-small .mp-door-icon { font-size: 10px; }
.mp-door b { max-width: 95%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 6px; font-weight: 400; line-height: 1.1; color: rgba(236, 220, 198, .62); }
.mp-door.is-event b { color: rgba(244, 224, 191, .82); }
.mp-door.is-start b { font-size: 7px; color: #f3d9a8; }
.mp-door.cat-rose { border-color: rgba(192, 94, 108, .4); }
.mp-door.cat-amber { border-color: rgba(211, 150, 65, .4); }
.mp-door.cat-teal { border-color: rgba(78, 167, 149, .38); }
.mp-door.cat-violet { border-color: rgba(151, 119, 185, .42); }
.mp-door.cat-pink { border-color: rgba(210, 112, 143, .4); }
.mp-door.cat-blue { border-color: rgba(97, 138, 185, .4); }
.mp-door.cat-gold { border-color: rgba(224, 181, 98, .48); }
.mp-door.is-visited { opacity: .9; }
.mp-door.is-here { border-color: rgba(244, 209, 151, .8); box-shadow: 0 0 17px rgba(228, 174, 98, .3), 0 5px 9px rgba(0, 0, 0, .34); }
.mp-door.is-target {
  border-color: rgba(245, 207, 145, .95);
  background: linear-gradient(180deg, rgba(137, 88, 45, .8), rgba(31, 23, 13, .96));
  box-shadow: 0 0 22px rgba(241, 186, 103, .48), 0 0 42px rgba(241, 186, 103, .14), 0 5px 9px rgba(0, 0, 0, .34);
  animation: mpTarget 1.4s ease-in-out infinite;
}
@keyframes mpTarget {
  0%, 100% { box-shadow: 0 0 18px rgba(241, 186, 103, .32), 0 0 35px rgba(241, 186, 103, .1), 0 5px 9px rgba(0, 0, 0, .34); }
  50% { box-shadow: 0 0 28px rgba(241, 186, 103, .58), 0 0 52px rgba(241, 186, 103, .18), 0 5px 9px rgba(0, 0, 0, .34); }
}
.mp-door.is-landed { animation: mpDoor 500ms var(--ease) both; }
@keyframes mpDoor { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 48% { transform: translate(-50%, -50%) scale(1.18); } }
.mp-door.is-open::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 60%, rgba(247, 192, 113, .4), transparent 68%);
  filter: blur(7px);
  z-index: -1;
}
.mp-token {
  position: absolute;
  width: 17px;
  height: 22px;
  transform: translate(calc(-50% - 5px), calc(-50% - 1px));
  display: grid;
  place-items: center;
  border-radius: 5px 5px 3px 3px;
  border: 1px solid rgba(255, 238, 204, .62);
  background: linear-gradient(145deg, #e9b875, #98523f);
  color: #2d1915;
  font-family: "Georgia", serif;
  font-size: 6px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, .45), 0 0 10px rgba(224, 153, 86, .26);
  z-index: 8;
  pointer-events: none;
  transition: left 170ms linear, top 170ms linear;
}
.mp-token.b { transform: translate(calc(-50% + 5px), calc(-50% + 1px)); background: linear-gradient(145deg, #c6b8d8, #78658e); }
.mp-token.is-hopping { animation: mpHop 180ms var(--ease); }
@keyframes mpHop { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }

/* actions */
.mp-actions { padding-top: 8px; text-align: center; }
.mp-hint { margin: 0 0 6px; font-size: 8px; line-height: 1.5; color: rgba(236, 220, 198, .4); }
.mp-main-btn {
  width: min(100%, 300px);
  height: 43px;
  border-radius: 999px;
  border: 1px solid rgba(236, 195, 129, .5);
  background: linear-gradient(135deg, #7a5333, #b1804e 52%, #674134);
  color: #fff0d9;
  font-size: 10px;
  letter-spacing: .06em;
  box-shadow: 0 9px 20px rgba(101, 69, 38, .22), inset 0 1px 0 rgba(255, 240, 206, .42);
}
.mp-main-btn[disabled] { opacity: .4; box-shadow: none; }
.mp-action-pair { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mp-match-btn {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(201, 160, 100, .2);
  background: transparent;
  color: rgba(236, 208, 165, .58);
  font-size: 8px;
}
.mp-match-btn[disabled] { opacity: .3; }

/* modal */
.mp-modal-holder { position: fixed; inset: 0; z-index: 160; }
.mp-modal-layer { position: absolute; inset: 0; }
.mp-modal-backdrop { position: absolute; inset: 0; background: rgba(3, 5, 4, .64); backdrop-filter: blur(5px); animation: mpFade 220ms var(--ease) both; }
@keyframes mpFade { from { opacity: 0; } to { opacity: 1; } }
.mp-event-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(342px, calc(100% - 30px));
  max-height: calc(100dvh - 56px);
  overflow-y: auto;
  transform: translate(-50%, -50%);
  padding: 20px 17px 17px;
  border-radius: 17px;
  border: 1px solid rgba(201, 160, 100, .46);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(167, 103, 59, .15), transparent 46%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(255, 234, 205, .018) 28px 29px),
    linear-gradient(155deg, #231c14, #0d0f0b 76%);
  box-shadow: 0 28px 60px rgba(0, 0, 0, .55), 0 0 40px rgba(199, 147, 82, .09);
  animation: mpCardIn 620ms cubic-bezier(.2, .8, .2, 1) both;
  scrollbar-width: none;
}
.mp-event-card::-webkit-scrollbar { display: none; }
@keyframes mpCardIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scale(.965) rotateX(5deg); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotateX(0deg); }
}
.mp-event-door {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(201, 160, 100, .18);
  font-size: 7px;
  letter-spacing: .1em;
  color: rgba(201, 160, 100, .64);
}
.mp-event-door b { font-family: "Songti SC", "STSong", serif; font-size: 11px; font-weight: 500; letter-spacing: .04em; color: #e5c28a; }
.mp-event-eyebrow { margin: 11px 0 6px; text-align: center; font-size: 6px; letter-spacing: .1em; color: rgba(236, 220, 198, .34); }
.mp-event-card h2 {
  margin: 0 0 15px;
  text-align: center;
  font-family: "Songti SC", "STSong", serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  color: #f3e3ca;
}
.mp-event-options { display: flex; flex-direction: column; gap: 6px; }
.mp-event-option {
  width: 100%;
  padding: 9px 10px;
  text-align: left;
  border-radius: 9px;
  border: 1px solid rgba(201, 160, 100, .12);
  background: rgba(255, 255, 255, .022);
  color: rgba(241, 226, 205, .62);
  font-size: 9px;
  line-height: 1.5;
  transition: border-color 140ms, background 140ms, color 140ms;
}
.mp-event-option.selected { border-color: rgba(213, 169, 98, .68); background: linear-gradient(135deg, rgba(123, 77, 42, .38), rgba(49, 33, 23, .48)); color: #fff0d8; }
.mp-event-close {
  width: 100%;
  height: 40px;
  margin-top: 12px;
  border-radius: 999px;
  border: 1px solid rgba(236, 195, 129, .44);
  background: linear-gradient(135deg, #795233, #b0804d 52%, #654033);
  color: #fff0d9;
  font-size: 9px;
}
.mp-event-close[disabled] { opacity: .3; box-shadow: none; }

.mp-penalty-card, .mp-small-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(320px, calc(100% - 34px));
  transform: translate(-50%, -50%);
  padding: 22px 19px 18px;
  border-radius: 17px;
  border: 1px solid rgba(201, 160, 100, .4);
  background: linear-gradient(155deg, #241b13, #0c0e0a 78%);
  box-shadow: 0 28px 60px rgba(0, 0, 0, .55), 0 0 36px rgba(199, 147, 82, .08);
  text-align: center;
  animation: mpCardIn 520ms cubic-bezier(.2, .8, .2, 1) both;
}
.mp-penalty-card .mp-fob { margin: 0 auto 10px; }
.mp-penalty-card h2, .mp-small-card h2 { margin: 0 0 10px; font-family: "Songti SC", "STSong", serif; font-size: 20px; font-weight: 500; color: #f3dfc2; }
.mp-penalty-text { margin: 6px 0 0; font-family: "Songti SC", "STSong", serif; font-size: 16px; line-height: 1.7; color: #e8c48d; }
.mp-penalty-note { margin: 10px 0 0; font-size: 8px; color: rgba(236, 220, 198, .4); }
.mp-small-prompt { margin: 7px 0 14px; font-size: 10px; line-height: 1.7; color: rgba(241, 226, 205, .66); }
.mp-two-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.mp-two-actions > * { width: 100%; }
.mp-ghost-btn {
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(201, 160, 100, .17);
  background: transparent;
  color: rgba(236, 220, 198, .48);
  font-size: 8px;
}
.mp-last-call { border-color: rgba(201, 160, 100, .55); }

/* end */
.mp-end { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.mp-end-key { width: 70px; height: 70px; display: grid; place-items: center; margin-bottom: 17px; border-radius: 50%; border: 1px solid rgba(201, 160, 100, .42); color: #e0b576; font-family: "Songti SC", "STSong", serif; font-size: 24px; background: radial-gradient(circle at 38% 30%, rgba(255, 232, 193, .18), transparent 40%), rgba(117, 73, 40, .16); box-shadow: 0 0 32px rgba(201, 160, 100, .13); }
.mp-end h1 { margin: 0 0 10px; font-family: "Songti SC", "STSong", serif; font-size: clamp(30px, 8vw, 44px); font-weight: 500; }
.mp-end-copy { margin: 0; font-size: 10px; line-height: 1.8; color: rgba(236, 220, 198, .52); }
.mp-route { margin-top: 19px; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; max-width: 330px; color: rgba(222, 179, 112, .7); font-family: "Songti SC", "STSong", serif; font-size: 12px; }
.mp-end-actions { display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 320px; margin-top: 24px; }

.mp-toast {
  position: fixed;
  left: 50%;
  bottom: 25px;
  z-index: 170;
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(201, 160, 100, .3);
  background: rgba(18, 20, 15, .92);
  color: rgba(241, 225, 203, .8);
  font-size: 9px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  animation: mpToast 220ms var(--ease) both;
}
.mp-toast.is-out { opacity: 0; transform: translate(-50%, 6px); transition: 220ms var(--ease); }
@keyframes mpToast { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (hover: hover) and (pointer: fine) {
  .mp-mode-key:hover, .mp-checkout:hover, .mp-match-btn:hover { border-color: rgba(201, 160, 100, .44); }
  .mp-main-btn:hover:not([disabled]), .mp-start:hover:not([disabled]), .mp-event-close:hover:not([disabled]) { filter: brightness(1.08); }
  .mp-event-option:hover { border-color: rgba(201, 160, 100, .34); color: rgba(255, 240, 219, .82); }
}
@media (max-width: 380px) {
  .mp-penalty-grid { grid-template-columns: 1fr; }
  .mp-player-copy p { display: none; }
  .mp-player { padding: 5px 6px; }
  .mp-door { width: 38px; height: 43px; }
  .mp-door.is-event { width: 42px; height: 47px; }
  .mp-door.is-small { width: 33px; height: 37px; }
  .mp-door.is-start { width: 46px; height: 50px; }
  .mp-door b { font-size: 5.5px; }
}
@media (max-height: 700px) {
  .mp-shell { min-height: calc(100dvh - 82px); padding-bottom: 8px; }
  .mp-entry-head h1 { font-size: 32px; }
  .mp-registration { margin-top: 13px; padding: 16px 14px 14px; }
  .mp-mode-key { min-height: 52px; padding: 8px; }
  .mp-mode-ring { width: 27px; height: 27px; font-size: 13px; }
  .mp-penalty-grid { margin-top: 11px; }
  .mp-rule-card { margin-top: 11px; padding: 8px 10px 5px; }
  .mp-start { height: 43px; margin-top: 11px; }
  .mp-board { width: min(100%, 350px); }
  .mp-actions { padding-top: 5px; }
  .mp-main-btn { height: 39px; }
  .mp-hint { margin-bottom: 3px; }
  .mp-event-card { max-height: calc(100dvh - 35px); }
}
@media (min-width: 900px) {
  .game-view[data-active-game="monopoly"] {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    padding: 0 clamp(24px, 6vw, 88px) 34px;
    box-shadow: none;
  }
  .game-view[data-active-game="monopoly"] .game-view-top,
  .game-view[data-active-game="monopoly"] .game-view-body { width: min(100%, 760px); margin-inline: auto; }
  .mp-shell { min-height: calc(100dvh - 120px); padding-top: 15px; }
  .mp-entry-head h1 { font-size: 58px; }
  .mp-registration { max-width: 660px; margin: 26px auto 0; padding: 28px 26px 22px; }
  .mp-board { width: 480px; }
  .mp-lobby h2 { font-size: 24px; }
  .mp-door { width: 47px; height: 51px; }
  .mp-door.is-event { width: 51px; height: 55px; }
  .mp-door.is-small { width: 40px; height: 44px; }
  .mp-door.is-start { width: 55px; height: 59px; }
  .mp-door b { font-size: 7px; }
  .mp-door-icon { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-cube, .mp-token, .mp-door { transition: none; }
  .mp-cube.is-rolling, .mp-door.is-target, .mp-door.is-landed, .mp-event-card, .mp-penalty-card, .mp-small-card, .mp-toast { animation: none; }
}

/* v0.11 corrections */
.mp-mode-key b { white-space: nowrap; }
.mp-cube-stage {
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  perspective: 320px;
  transform: rotateX(-10deg) rotateY(14deg);
}
.mp-cube-stage .mp-cube { width: 31px; height: 31px; }

/* v0.11 night floor + stronger 3D die */
.game-view[data-active-game="monopoly"][data-mode="night"] {
  background:
    radial-gradient(circle at 80% 0%, rgba(168, 72, 107, .2), transparent 36%),
    radial-gradient(circle at 10% 90%, rgba(92, 61, 146, .2), transparent 42%),
    radial-gradient(circle at 50% 48%, rgba(107, 35, 53, .13), transparent 58%),
    linear-gradient(180deg, #13080f 0%, #0d0710 55%, #070407 100%);
}
.mp-entry[data-mode="night"] .mp-registration {
  border-color: rgba(172, 103, 138, .4);
  background:
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(255, 224, 235, .016) 35px 36px),
    radial-gradient(ellipse at 50% 0%, rgba(146, 58, 96, .15), transparent 50%),
    linear-gradient(155deg, rgba(42, 24, 35, .95), rgba(14, 9, 15, .97));
}
.mp-entry[data-mode="night"] .mp-mode-key.active {
  border-color: rgba(184, 117, 148, .6);
  background: linear-gradient(145deg, rgba(112, 48, 78, .4), rgba(40, 24, 39, .5));
}
.mp-entry[data-mode="night"] .mp-start {
  border-color: rgba(198, 132, 156, .55);
  background: linear-gradient(135deg, #713b51, #a05d72 52%, #5d334b);
}
.mp-game[data-mode="night"] .mp-corridor {
  background:
    repeating-linear-gradient(90deg, rgba(255, 224, 235, .016) 0 1px, transparent 1px 18px),
    linear-gradient(100deg, rgba(94, 31, 57, .26), rgba(30, 18, 38, .38));
}
.mp-game[data-mode="night"] .mp-lobby {
  border-color: rgba(177, 104, 137, .36);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(167, 72, 113, .16), transparent 52%),
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(255, 224, 235, .014) 22px 23px),
    linear-gradient(155deg, #251723, #100912 75%);
}
.mp-game[data-mode="night"] .mp-door.is-event {
  border-color: rgba(180, 103, 139, .4);
  background: linear-gradient(180deg, rgba(95, 36, 62, .72), rgba(20, 10, 18, .95));
}
.mp-game[data-mode="night"] .mp-door.cat-rose { border-color: rgba(205, 93, 120, .46); }
.mp-game[data-mode="night"] .mp-door.cat-amber { border-color: rgba(197, 119, 91, .42); }
.mp-game[data-mode="night"] .mp-door.cat-violet { border-color: rgba(157, 106, 196, .5); }
.mp-game[data-mode="night"] .mp-door.cat-teal { border-color: rgba(119, 108, 177, .44); }
.mp-game[data-mode="night"] .mp-door.cat-pink { border-color: rgba(208, 101, 151, .46); }
.mp-event-card[data-mode="night"] {
  border-color: rgba(178, 108, 143, .5);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(145, 54, 92, .18), transparent 46%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(255, 224, 235, .016) 28px 29px),
    linear-gradient(155deg, #261521, #0f0910 76%);
}
.mp-event-card[data-mode="night"] .mp-event-door { border-color: rgba(178, 108, 143, .22); }
.mp-event-card[data-mode="night"] .mp-event-door b { color: #e0a7ba; }
.mp-event-card[data-mode="night"] .mp-event-option.selected {
  border-color: rgba(198, 132, 156, .58);
  background: linear-gradient(135deg, rgba(91, 35, 65, .5), rgba(36, 18, 33, .52));
}
.mp-game[data-player="B"] .mp-lobby { border-color: rgba(174, 164, 203, .32); }
.mp-game[data-player="B"] .mp-lobby-turn b { color: #c9bade; }
.mp-game[data-player="B"] .mp-die-copy b { color: rgba(211, 200, 226, .86); }
.mp-lobby-turn b { color: #e5c28a; font-weight: 500; }
.mp-lobby-turn span:last-child { color: rgba(236, 220, 198, .34); }
.mp-cube-stage {
  position: relative;
  width: 36px;
  height: 36px;
  perspective: 300px;
  transform: rotateX(-18deg) rotateY(27deg);
}
.mp-cube-stage .mp-cube { width: 36px; height: 36px; }
.mp-cube-stage .mp-cube-face { border-color: rgba(237, 202, 143, .62); }
.mp-cube-stage .f1 { transform: translateZ(18px); }
.mp-cube-stage .f2 { transform: rotateX(90deg) translateZ(18px); }
.mp-cube-stage .f3 { transform: rotateY(90deg) translateZ(18px); }
.mp-cube-stage .f4 { transform: rotateY(-90deg) translateZ(18px); }
.mp-cube-stage .f5 { transform: rotateX(-90deg) translateZ(18px); }
.mp-cube-stage .f6 { transform: rotateY(180deg) translateZ(18px); }
.mp-cube-stage .mp-cube-pips { padding: 5px; gap: 2px; }
.mp-cube-stage .mp-cube-pips i { width: 4px; height: 4px; }

/* stronger cube shading */
.mp-cube-stage {
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, .4));
  transform: rotateX(-22deg) rotateY(31deg);
}
.mp-cube-face {
  background: linear-gradient(145deg, #eccb93, #b67a52 72%, #8a563f);
  box-shadow: inset 0 0 7px rgba(72, 32, 23, .5), 0 0 0 1px rgba(255, 230, 190, .08);
}
.mp-cube-face.f2 { background: linear-gradient(145deg, #d2a36c, #8e5b42); }
.mp-cube-face.f3 { background: linear-gradient(145deg, #b88458, #744832); }
.mp-cube-face.f4 { background: linear-gradient(145deg, #c39362, #80523a); }
.mp-cube-face.f5 { background: linear-gradient(145deg, #a9754c, #68412d); }
.mp-cube-face.f6 { background: linear-gradient(145deg, #d8ab73, #8e5b40); }

/* =========================================================
   v0.12 · HD game shell for 今夜旅馆
   ========================================================= */
/* ---- check-in: keep the paper card, raise the type scale ---- */
.mp-entry-head h1 { font-size: clamp(40px, 11vw, 60px); letter-spacing: .04em; }
.mp-entry-sub { font-size: 13px; color: rgba(236,220,198,.66); }
.mp-registration { margin-top: 22px; padding: 26px 22px 22px; border-width: 1.5px; box-shadow: 0 34px 70px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,238,210,.13), 0 0 36px rgba(201,160,100,.06); }
.mp-reg-top span { font-size: 9px; }
.mp-reg-top b { font-size: 22px; }
.mp-mode-key { min-height: 76px; padding: 13px 12px; gap: 11px; }
.mp-mode-ring { width: 38px; height: 38px; font-size: 19px; }
.mp-mode-key b { font-size: 15px; }
.mp-mode-key small { font-size: 7px; }
.mp-mode-note { margin-top: 12px; font-size: 10px; line-height: 1.65; }
.mp-penalty-grid { margin-top: 20px; gap: 10px; }
.mp-penalty-field > span { margin-bottom: 8px; font-size: 11px; }
.mp-penalty-field input { height: 48px; padding: 10px 12px; font-size: 14px; }
.mp-rule-card { margin-top: 20px; padding: 15px 14px 11px; }
.mp-rule-eyebrow { font-size: 8px; margin-bottom: 9px; }
.mp-rule-card p:not(.mp-rule-eyebrow) { margin-bottom: 7px; font-size: 11px; line-height: 1.55; }
.mp-rule-card p b { font-size: 14px; min-width: 23px; }
.mp-start { height: 54px; margin-top: 18px; font-size: 15px; letter-spacing: .12em; }
.mp-start-hint { margin-top: 10px; font-size: 10px; }
.mp-entry-foot { margin-top: 14px; font-size: 12px; }

/* ---- game header + HUD ---- */
.mp-game-head { align-items: center; padding: 5px 2px 0; }
.mp-brand-block .mp-eyebrow { margin-bottom: 5px; font-size: 8px; }
.mp-game-head h1 { font-size: clamp(31px, 8vw, 44px); }
.mp-checkout {
  min-width: 68px;
  min-height: 44px;
  padding: 0 12px;
  border-color: rgba(201,160,100,.24);
  color: rgba(244,226,199,.65);
  font-size: 11px;
  background: rgba(255,255,255,.025);
}
.mp-hud {
  display: grid;
  grid-template-columns: minmax(0,1fr) 76px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  margin: 12px 0 8px;
}
.mp-seat {
  position: relative;
  display: grid;
  grid-template-columns: 39px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 76px;
  padding: 9px 9px 8px;
  border-radius: 14px;
  border: 1px solid rgba(201,160,100,.16);
  background:
    linear-gradient(180deg, rgba(255,240,216,.045), rgba(255,255,255,.012)),
    linear-gradient(145deg, rgba(69,48,31,.45), rgba(18,19,14,.62));
  box-shadow: inset 0 1px 0 rgba(255,238,208,.12), 0 8px 18px rgba(0,0,0,.22);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease), opacity .22s;
}
.mp-seat.is-waiting { opacity: .58; }
.mp-seat.is-active {
  opacity: 1;
  border-color: rgba(239,202,143,.72);
  background:
    linear-gradient(180deg, rgba(255,232,191,.10), rgba(255,255,255,.02)),
    linear-gradient(145deg, rgba(121,82,46,.55), rgba(27,24,16,.72));
  box-shadow: 0 0 0 1px rgba(239,202,143,.12), 0 0 24px rgba(219,164,89,.15), inset 0 1px 0 rgba(255,242,211,.22);
  transform: translateY(-1px);
}
.mp-seat-avatar {
  width: 39px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px 8px 5px 5px;
  border: 1px solid rgba(255,232,194,.55);
  background: linear-gradient(150deg, #f0ca8d, #a86a4b);
  color: #341b15;
  font-family: "Georgia", serif;
  font-size: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,247,221,.7);
}
.mp-seat:nth-child(3) .mp-seat-avatar { background: linear-gradient(150deg, #d4c9e5, #7b678f); }
.mp-seat.is-active .mp-seat-avatar { box-shadow: 0 0 18px rgba(238,190,117,.4), 0 4px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,247,221,.75); }
.mp-seat-copy { min-width: 0; }
.mp-seat-copy b { display: block; font-family: "Georgia", "Songti SC", serif; font-size: 15px; font-weight: 400; color: #f3e5d1; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.mp-seat-copy b small { margin-left: 4px; font-family: "Songti SC", "STSong", serif; font-size: 9px; color: rgba(236,220,198,.48); }
.mp-seat-copy p { margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; color: rgba(236,220,198,.42); }
.mp-seat-stock { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 28px; padding-left: 6px; border-left: 1px solid rgba(201,160,100,.12); }
.mp-seat-stock b { font-family: "Georgia", serif; font-size: 20px; font-weight: 400; line-height: 1; color: #e7c58e; }
.mp-seat-stock small { margin-top: 3px; font-size: 7px; color: rgba(236,220,198,.4); }
.mp-seat-turn {
  position: absolute;
  top: 5px;
  right: 7px;
  padding: 2px 5px;
  border-radius: 999px;
  border: 1px solid rgba(201,160,100,.18);
  color: rgba(236,220,198,.38);
  font-size: 7px;
  font-style: normal;
  letter-spacing: .06em;
}
.mp-seat.is-active .mp-seat-turn { border-color: rgba(239,202,143,.46); color: #e7c58e; background: rgba(201,160,100,.08); }
.mp-hud-emblem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 82px;
  border-radius: 15px;
  border: 1px solid rgba(231,196,139,.5);
  background:
    radial-gradient(circle at 50% 15%, rgba(255,228,177,.2), transparent 46%),
    linear-gradient(160deg, #6c4a2c, #2d2418 55%, #15140e);
  box-shadow: 0 0 22px rgba(210,158,83,.13), inset 0 1px 0 rgba(255,241,208,.32), inset 0 -8px 16px rgba(0,0,0,.26);
  text-align: center;
}
.mp-hud-emblem span { font-size: 7px; letter-spacing: .18em; color: rgba(255,226,180,.62); }
.mp-hud-emblem b { margin-top: 1px; font-family: "Georgia", serif; font-size: 25px; font-weight: 400; line-height: 1; color: #f0d19e; }
.mp-hud-emblem b i { font-style: normal; font-size: 11px; color: rgba(240,209,158,.5); }
.mp-hud-emblem small { margin-top: 4px; font-size: 7px; color: rgba(236,220,198,.45); }

/* ---- stage frame: the board becomes an object, not a page section ---- */
.mp-stage {
  position: relative;
  margin: 4px auto 0;
  padding: 9px;
  border-radius: 27px;
  border: 1px solid rgba(216,174,107,.32);
  background:
    linear-gradient(180deg, rgba(255,236,200,.08), transparent 16%),
    linear-gradient(145deg, #3c2b1b, #17150f 54%, #0d0e0a);
  box-shadow:
    0 26px 44px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,235,199,.05),
    inset 0 1px 0 rgba(255,241,208,.18),
    inset 0 -18px 30px rgba(0,0,0,.36);
  overflow: hidden;
}
.mp-stage::before,
.mp-stage::after {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(231,196,139,.35);
  pointer-events: none;
  z-index: 2;
}
.mp-stage::before { left: 10px; top: 10px; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.mp-stage::after { right: 10px; bottom: 10px; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
.mp-stage-light {
  position: absolute;
  left: 12%;
  right: 12%;
  top: -25%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,210,146,.16), transparent 68%);
  filter: blur(14px);
  pointer-events: none;
}
.mp-stage .mp-board { margin: 0 auto; width: 100%; max-width: 500px; transform: perspective(1400px) rotateX(2.4deg); transform-origin: 50% 78%; }
.mp-stage .mp-board::before { inset: 5.5%; }

/* ---- category legend: labels are readable outside the tiny map ---- */
.mp-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 7px;
  margin: 7px 0 0;
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid rgba(201,160,100,.11);
  background: rgba(255,255,255,.018);
}
.mp-legend-item { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: rgba(236,220,198,.55); }
.mp-legend-item i { font-family: "Songti SC", "STSong", serif; font-size: 12px; font-style: normal; color: #d9ac6c; }
.mp-legend-item.cat-teal i { color: #78bfa9; }
.mp-legend-item.cat-violet i { color: #b49ad9; }
.mp-legend-item.cat-pink i { color: #db92ae; }
.mp-legend-item.cat-blue i { color: #89a9ce; }
.mp-legend-item.cat-rose i { color: #d98a96; }
.mp-legend-item.cat-amber i { color: #e0ad62; }

/* ---- bottom dock ---- */
.mp-dock {
  position: relative;
  margin-top: 7px;
  padding: 9px 12px 10px;
  border-radius: 17px;
  border: 1px solid rgba(201,160,100,.19);
  background:
    linear-gradient(180deg, rgba(255,237,204,.05), transparent 38%),
    linear-gradient(145deg, rgba(49,40,26,.7), rgba(13,15,11,.8));
  box-shadow: 0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,238,210,.1);
  text-align: center;
}
.mp-dock::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,196,139,.35), transparent);
}
.mp-hint { margin: 0 0 7px; font-size: 11px; line-height: 1.45; color: rgba(236,220,198,.54); text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.mp-main-btn {
  position: relative;
  width: min(100%, 260px);
  height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(255,224,171,.65);
  background:
    linear-gradient(180deg, rgba(255,245,210,.35), transparent 30%),
    linear-gradient(135deg, #8a5b31, #c18c4f 50%, #72452f);
  color: #fff7e8;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-shadow: 0 1px 2px rgba(74,35,17,.45);
  box-shadow:
    0 7px 0 rgba(61,36,20,.48),
    0 10px 22px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,249,224,.72),
    inset 0 -4px 10px rgba(80,40,21,.24);
  overflow: hidden;
  transition: transform .14s var(--ease), filter .14s var(--ease), box-shadow .14s var(--ease);
}
.mp-main-btn::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 12px;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.18) 45%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}
.mp-main-btn:hover:not([disabled]) { filter: brightness(1.1); }
.mp-main-btn:hover:not([disabled])::after { animation: mpSheen .65s var(--ease); }
@keyframes mpSheen { to { transform: translateX(120%); } }
.mp-main-btn:active:not([disabled]) { transform: translateY(3px) scale(.995); box-shadow: 0 2px 0 rgba(61,36,20,.48), 0 4px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,249,224,.6); }
.mp-main-btn:focus-visible { outline: 2px solid #ffe0a8; outline-offset: 3px; }
.mp-main-btn[disabled] { opacity: .45; filter: grayscale(.25); box-shadow: none; transform: none; }
.mp-action-pair { gap: 6px; }
.mp-match-btn {
  min-height: 44px;
  padding: 8px 15px;
  border-color: rgba(239,202,143,.28);
  color: rgba(240,211,166,.72);
  font-size: 11px;
  background: rgba(255,255,255,.025);
  transition: background .14s, border-color .14s, transform .14s;
}
.mp-match-btn:hover:not([disabled]) { border-color: rgba(239,202,143,.55); background: rgba(201,160,100,.1); }
.mp-match-btn:active:not([disabled]) { transform: scale(.98); }
.mp-match-btn:focus-visible, .mp-checkout:focus-visible, .mp-mode-key:focus-visible, .mp-event-option:focus-visible, .mp-event-close:focus-visible, .mp-ghost-btn:focus-visible { outline: 2px solid #ffe0a8; outline-offset: 2px; }

/* ---- larger board / lobby typography and target callout ---- */
.mp-lobby h2 { font-size: clamp(22px, 5.6vw, 30px); }
.mp-lobby-eyebrow { font-size: 7px; }
.mp-lobby-turn b { font-size: 12px; }
.mp-lobby-turn span:last-child { font-size: 9px; }
.mp-die-copy b { font-size: 14px; }
.mp-die-copy small { font-size: 7px; }
.mp-target-copy { min-height: 20px; font-size: 10px; line-height: 1.5; color: rgba(236,220,198,.62); }
.mp-door b { font-size: 7px; }
.mp-door.is-event b { font-size: 7.5px; }
.mp-room { font-size: 6px; }
.mp-door-icon { font-size: 15px; }
.mp-door.is-event .mp-door-icon { font-size: 17px; }
.mp-door.is-small .mp-door-icon { font-size: 11px; }
.mp-door.is-small b { font-size: 6.5px; }
.mp-door.is-start b { font-size: 9px; }

/* ---- event card: bigger type, real selected state ---- */
.mp-event-card { width: min(370px, calc(100% - 24px)); padding: 24px 20px 20px; }
.mp-event-door { padding-bottom: 11px; font-size: 10px; }
.mp-event-door b { font-size: 14px; }
.mp-event-eyebrow { margin: 14px 0 8px; font-size: 9px; }
.mp-event-card h2 { margin-bottom: 17px; font-size: 19px; line-height: 1.65; }
.mp-event-option { min-height: 46px; padding: 12px 13px; font-size: 13px; line-height: 1.5; border-radius: 10px; }
.mp-event-close { height: 50px; margin-top: 14px; font-size: 13px; }
.mp-penalty-card, .mp-small-card { width: min(350px, calc(100% - 28px)); padding: 26px 22px 21px; }
.mp-penalty-card h2, .mp-small-card h2 { font-size: 24px; }
.mp-penalty-text { font-size: 19px; }
.mp-penalty-note, .mp-small-prompt { font-size: 12px; }
.mp-ghost-btn { min-height: 44px; font-size: 12px; }
.mp-toast { font-size: 12px; padding: 10px 16px; }

@media (max-width: 380px) {
  .mp-hud { grid-template-columns: minmax(0,1fr) 62px minmax(0,1fr); gap: 5px; }
  .mp-seat { grid-template-columns: 32px minmax(0,1fr) auto; min-height: 68px; padding: 7px 6px; gap: 6px; }
  .mp-seat-avatar { width: 32px; height: 42px; font-size: 13px; }
  .mp-seat-copy b { font-size: 13px; }
  .mp-seat-copy p { font-size: 8px; }
  .mp-seat-stock b { font-size: 17px; }
  .mp-seat-turn { display: none; }
  .mp-hud-emblem { width: 62px; height: 72px; }
  .mp-hud-emblem b { font-size: 21px; }
  .mp-legend-item { font-size: 9px; }
  .mp-game-head h1 { font-size: 28px; }
  .mp-stage { padding: 6px; border-radius: 22px; }
  .mp-stage .mp-board { width: 100%; }
}
@media (max-height: 700px) {
  .mp-entry-head h1 { font-size: 36px; }
  .mp-registration { padding: 18px 16px 16px; }
  .mp-mode-key { min-height: 64px; padding: 9px; }
  .mp-rule-card { margin-top: 13px; padding: 10px 11px 7px; }
  .mp-dock { padding: 7px 10px 8px; }
  .mp-main-btn { height: 48px; }
  .mp-legend { margin-top: 4px; padding: 5px 7px; }
  .mp-target-copy { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-seat, .mp-main-btn, .mp-match-btn { transition: none; }
  .mp-main-btn:hover:not([disabled])::after { animation: none; }
}


/* v0.12 fix: stage must participate in the column instead of shrink-to-fit */
.mp-stage { width: 100%; box-sizing: border-box; }
.mp-stage .mp-board { width: 100%; box-sizing: border-box; }
.mp-seat-copy p { line-height: 1.35; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* v0.12 layout fit: the frame hugs the board, not the whole desktop */
.mp-stage { width: min(100%, 520px); margin-left: auto; margin-right: auto; }
@media (min-width: 900px) {
  .mp-stage { width: min(100%, 470px); }
  .mp-legend, .mp-dock { width: min(100%, 620px); margin-left: auto; margin-right: auto; box-sizing: border-box; }
}
@media (max-height: 700px) {
  .mp-stage { width: min(100%, 330px); }
}

@media (min-width: 900px) {
  .mp-stage { width: min(100%, 390px); }
  .mp-legend, .mp-dock { width: min(100%, 560px); }
}

/* readable HUD microcopy */
.mp-seat-copy p { font-size: 10px; }
.mp-seat-stock small { font-size: 8px; }
.mp-lobby-eyebrow { font-size: 8px; }
.mp-die-copy small { font-size: 8px; }
.mp-target-copy { font-size: 11px; }
.mp-hint { font-size: 12px; }
.mp-legend-item { font-size: 11px; }
.mp-legend-item i { font-size: 13px; }

/* v0.13 hierarchy: board is the hero; HUD and dock are supporting chrome */
.game-view[data-active-game="monopoly"] { padding-left: 4px; padding-right: 4px; }
.mp-shell { padding: 2px 0 8px; }
.mp-game-head { padding: 2px 2px 0; }
.mp-game-head h1 { font-size: clamp(27px, 7vw, 34px); }
.mp-brand-block .mp-eyebrow { margin-bottom: 3px; }
.mp-checkout { min-width: 62px; min-height: 40px; font-size: 10px; padding: 0 10px; }
.mp-hud { grid-template-columns: minmax(0,1fr) 54px minmax(0,1fr); gap: 5px; margin: 8px 0 4px; }
.mp-seat { grid-template-columns: 31px minmax(0,1fr) auto; min-height: 54px; padding: 6px 7px; gap: 5px; border-radius: 11px; }
.mp-seat-avatar { width: 31px; height: 38px; font-size: 12px; border-radius: 6px 6px 4px 4px; }
.mp-seat-copy b { font-size: 13px; }
.mp-seat-copy b small { font-size: 8px; }
.mp-seat-copy p { margin-top: 2px; font-size: 8px; line-height: 1.25; -webkit-line-clamp: 1; }
.mp-seat-stock { min-width: 22px; padding-left: 4px; }
.mp-seat-stock b { font-size: 17px; }
.mp-seat-stock small { font-size: 6px; }
.mp-seat-turn { display: none; }
.mp-hud-emblem { width: 54px; height: 58px; border-radius: 12px; }
.mp-hud-emblem span { font-size: 6px; }
.mp-hud-emblem b { font-size: 18px; }
.mp-hud-emblem b i { font-size: 9px; }
.mp-hud-emblem small { margin-top: 2px; font-size: 6px; }
.mp-stage { width: 100%; padding: 4px; border-radius: 20px; margin: 3px auto 0; }
.mp-stage::before, .mp-stage::after { width: 30px; height: 30px; }
.mp-stage .mp-board { width: 100%; max-width: none; transform: perspective(1400px) rotateX(1.8deg); }
.mp-legend { margin-top: 4px; padding: 4px 7px; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; border-radius: 8px; }
.mp-legend::-webkit-scrollbar { display: none; }
.mp-legend-item { flex: 0 0 auto; font-size: 9px; white-space: nowrap; }
.mp-legend-item i { font-size: 11px; }
.mp-dock { margin-top: 4px; padding: 3px 0 0; border: 0; background: transparent; box-shadow: none; border-radius: 0; }
.mp-dock::before { display: none; }
.mp-hint { margin: 0 0 4px; font-size: 10px; }
.mp-main-btn { height: 46px; border-radius: 12px; font-size: 14px; }
.mp-match-btn { min-height: 38px; padding: 6px 13px; font-size: 10px; }
@media (max-height: 700px) {
  .mp-stage { padding: 3px; border-radius: 17px; }
  .mp-main-btn { height: 43px; }
  .mp-hint { font-size: 9px; margin-bottom: 3px; }
  .mp-match-btn { min-height: 34px; }
}
@media (min-width: 900px) {
  .game-view[data-active-game="monopoly"] { padding-left: clamp(24px, 6vw, 88px); padding-right: clamp(24px, 6vw, 88px); }
  .mp-stage { width: min(100%, 480px); padding: 5px; }
  .mp-legend, .mp-dock { width: min(100%, 560px); }
  .mp-main-btn { height: 48px; }
}

/* v0.13 action cards: no options, only complete / swap / skip */
.mp-directive {
  margin: 0 0 20px;
  padding: 14px 10px;
  border-top: 1px solid rgba(201,160,100,.16);
  border-bottom: 1px solid rgba(201,160,100,.16);
  text-align: center;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: 20px;
  line-height: 1.85;
  color: #f2dfc2;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
}
.mp-event-actions { display: grid; grid-template-columns: 1.35fr 1fr; gap: 7px; }
.mp-event-actions .mp-main-btn { width: 100%; height: 48px; font-size: 13px; }
.mp-event-actions .mp-ghost-btn { height: 48px; font-size: 12px; border-color: rgba(201,160,100,.24); }
.mp-skip-btn {
  grid-column: 1 / -1;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(236,220,198,.38);
  font-size: 10px;
}
.mp-skip-btn:hover { color: rgba(236,220,198,.68); }
.mp-skip-btn:focus-visible { outline: 2px solid #ffe0a8; outline-offset: 2px; }
.mp-event-note { margin: 9px 0 0; text-align: center; font-size: 9px; line-height: 1.55; color: rgba(236,220,198,.34); }
@media (max-width: 380px) {
  .mp-directive { font-size: 18px; padding: 12px 7px; }
  .mp-event-actions { grid-template-columns: 1fr; }
  .mp-skip-btn { grid-column: auto; }
}

/* v0.14: one-screen game + bolder game feel */
.mp-game { height: calc(100dvh - 62px); min-height: 0; overflow: hidden; }
.mp-game .mp-shell { min-height: 0; height: 100%; box-sizing: border-box; }
@media (max-height: 700px) {
  .mp-stage { width: min(100%, 330px); }
  .mp-game-head h1 { font-size: 26px; }
  .mp-hud { margin: 6px 0 3px; }
  .mp-legend { margin-top: 3px; padding: 3px 6px; }
  .mp-dock { margin-top: 2px; }
}
.mp-seat.is-active { animation: mpSeatIn 460ms cubic-bezier(.16,.84,.24,1) both; }
@keyframes mpSeatIn {
  0% { transform: translateY(-8px) scale(.965); opacity: .55; box-shadow: 0 0 0 rgba(239,202,143,0); }
  58% { transform: translateY(2px) scale(1.018); opacity: 1; box-shadow: 0 0 34px rgba(219,164,89,.24), 0 0 0 1px rgba(239,202,143,.12); }
  100% { transform: translateY(-1px) scale(1); }
}
.mp-stage.is-impact { animation: mpTableNudge 390ms cubic-bezier(.2,.8,.2,1); }
@keyframes mpTableNudge {
  0%, 100% { transform: translate3d(0,0,0); }
  22% { transform: translate3d(-3px,2px,0) rotate(-.12deg); }
  46% { transform: translate3d(3px,-1px,0) rotate(.1deg); }
  70% { transform: translate3d(-1px,1px,0); }
}
.mp-door.is-landed { animation: mpDoorHit 620ms cubic-bezier(.16,.84,.24,1) both; }
@keyframes mpDoorHit {
  0% { transform: translate(-50%,-50%) scale(1); filter: brightness(1); }
  30% { transform: translate(-50%,-50%) scale(1.26) rotate(-1deg); filter: brightness(1.5); }
  55% { transform: translate(-50%,-50%) scale(.98) rotate(.7deg); filter: brightness(1.14); }
  100% { transform: translate(-50%,-50%) scale(1); filter: brightness(1); }
}
.mp-token.is-hopping { animation: mpTokenHop 190ms cubic-bezier(.16,.84,.24,1); }
@keyframes mpTokenHop {
  0%, 100% { margin-top: 0; filter: brightness(1); }
  44% { margin-top: -9px; filter: brightness(1.45) drop-shadow(0 0 8px rgba(255,212,143,.75)); }
}
.mp-cube-stage.is-settled::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid rgba(255,211,145,.7);
  animation: mpDieRing 620ms cubic-bezier(.2,.8,.2,1) both;
  pointer-events: none;
}
@keyframes mpDieRing {
  0% { transform: scale(.55); opacity: 0; }
  28% { opacity: .9; }
  100% { transform: scale(1.5); opacity: 0; }
}
.mp-flying-match {
  position: fixed;
  z-index: 190;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff0bd, #e3a75f 42%, #9a5337 78%);
  color: #3a1b14;
  font-size: 8px;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(255,190,105,.9), 0 0 26px rgba(255,146,82,.55);
}
.mp-event-card { animation: mpCardIn 720ms cubic-bezier(.16,.84,.24,1) both; }
@keyframes mpCardIn {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 30px)) scale(.9) rotateX(10deg) rotateZ(-1deg); }
  58% { opacity: 1; transform: translate(-50%, calc(-50% - 4px)) scale(1.012) rotateX(-1deg) rotateZ(.2deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotateX(0) rotateZ(0); }
}
.mp-event-layer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,220,162,.85), rgba(255,156,98,.2) 38%, transparent 70%);
  box-shadow: 0 0 80px 42px rgba(255,164,99,.18);
  transform: translate(-50%,-50%);
  animation: mpRoomFlash 560ms ease-out both;
  pointer-events: none;
}
@keyframes mpRoomFlash {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
  32% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(3.4); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-seat.is-active, .mp-stage.is-impact, .mp-door.is-landed, .mp-token.is-hopping, .mp-cube-stage.is-settled::after { animation: none; }
  .mp-event-layer::before { animation: none; opacity: 0; }
}

/* compact check-in on short screens, so the rules never need a page scroll */
@media (max-height: 700px) {
  .mp-entry-head { padding-top: 2px; }
  .mp-entry-head h1 { font-size: 31px; }
  .mp-entry-sub { margin-top: 6px; font-size: 11px; }
  .mp-registration { margin-top: 10px; padding: 13px 13px 12px; }
  .mp-reg-top { padding-bottom: 8px; }
  .mp-reg-top b { font-size: 18px; }
  .mp-mode-key { min-height: 55px; padding: 7px 8px; gap: 7px; }
  .mp-mode-ring { width: 29px; height: 29px; font-size: 14px; }
  .mp-mode-key b { font-size: 13px; }
  .mp-mode-note { margin-top: 7px; font-size: 9px; }
  .mp-penalty-grid { margin-top: 10px; gap: 6px; }
  .mp-penalty-field > span { margin-bottom: 4px; font-size: 10px; }
  .mp-penalty-field input { height: 40px; font-size: 12px; padding: 7px 9px; }
  .mp-rule-card { margin-top: 9px; padding: 7px 9px 4px; }
  .mp-rule-eyebrow { margin-bottom: 4px; font-size: 7px; }
  .mp-rule-card p:not(.mp-rule-eyebrow) { margin-bottom: 3px; font-size: 9px; line-height: 1.35; }
  .mp-rule-card p b { font-size: 11px; min-width: 18px; }
  .mp-start { height: 43px; margin-top: 9px; font-size: 13px; }
  .mp-start-hint { margin-top: 5px; font-size: 8px; }
  .mp-entry-foot { margin-top: 6px; font-size: 9px; }
}


.game-view[data-active-game="monopoly"][data-screen="game"] { overflow: hidden; }

/* =========================================================
   v0.15 · 大富翁背景图：日常 / 深夜
   ========================================================= */
/* the two backgrounds are landscape; cover keeps the concierge desk centered
   while the blank wall around it becomes the ring for the doors */
.mp-game[data-mode="sweet"] .mp-board {
  background:
    linear-gradient(180deg, rgba(255, 244, 235, .04), rgba(74, 42, 42, .06)),
    url("assets/monopoly-sweet.png") center 62% / cover no-repeat,
    #ead6ce;
}
.mp-game[data-mode="night"] .mp-board {
  background:
    linear-gradient(180deg, rgba(20, 7, 20, .04), rgba(8, 3, 10, .18)),
    url("assets/monopoly-night.png") center 62% / cover no-repeat,
    #160b18;
}
.mp-game[data-mode="sweet"] .mp-board::after {
  background: radial-gradient(ellipse at 50% 45%, transparent 38%, rgba(44, 23, 27, .28) 100%);
}
.mp-game[data-mode="night"] .mp-board::after {
  background: radial-gradient(ellipse at 50% 45%, transparent 34%, rgba(3, 1, 6, .58) 100%);
}
.mp-game[data-mode="sweet"] .mp-corridor {
  border-color: rgba(125, 76, 71, .25);
  background: transparent;
  box-shadow: none;
}
.mp-game[data-mode="night"] .mp-corridor {
  border-color: rgba(215, 167, 112, .28);
  background: transparent;
  box-shadow: none;
}
.mp-game[data-mode="sweet"] .mp-corridor::before {
  border-color: rgba(125, 76, 71, .18);
}
.mp-game[data-mode="night"] .mp-corridor::before {
  border-color: rgba(215, 167, 112, .18);
}
.mp-game[data-mode="sweet"] .mp-lobby,
.mp-game[data-mode="night"] .mp-lobby {
  top: 62%;
  width: 43%;
  aspect-ratio: auto;
  min-height: 108px;
  padding: 7px 8px 8px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.mp-game[data-mode="sweet"] .mp-lobby::before,
.mp-game[data-mode="night"] .mp-lobby::before { display: none; }
.mp-game .mp-lobby h2,
.mp-game .mp-lobby-eyebrow { display: none; }
.mp-game[data-mode="sweet"] .mp-lobby-turn b { color: #593438; }
.mp-game[data-mode="sweet"] .mp-lobby-turn span:last-child { color: rgba(89, 52, 56, .58); }
.mp-game[data-mode="night"] .mp-lobby-turn b { color: #f0d09e; }
.mp-game[data-mode="sweet"] .mp-die-copy b { color: #573438; text-shadow: 0 1px 1px rgba(255,255,255,.5); }
.mp-game[data-mode="sweet"] .mp-die-copy small { color: rgba(89, 52, 56, .58); }
.mp-game[data-mode="night"] .mp-die-copy b { color: #f0d09e; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.mp-game[data-mode="night"] .mp-die-copy small { color: rgba(245, 207, 158, .5); }
.mp-game[data-mode="sweet"] .mp-target-copy { color: rgba(89, 52, 56, .7); text-shadow: 0 1px 1px rgba(255,255,255,.45); }
.mp-game[data-mode="night"] .mp-target-copy { color: rgba(245, 217, 176, .66); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.mp-game[data-mode="sweet"] .mp-seat.is-active .mp-seat-avatar { box-shadow: 0 0 18px rgba(213, 151, 112, .4), 0 4px 10px rgba(0,0,0,.28); }

/* sweet HUD is an ivory/rose hotel desk, not a dark sci-fi panel */
.game-view[data-active-game="monopoly"][data-mode="sweet"][data-screen="game"] {
  background:
    radial-gradient(circle at 85% 0%, rgba(255, 222, 208, .38), transparent 36%),
    radial-gradient(circle at 12% 92%, rgba(224, 174, 172, .25), transparent 44%),
    linear-gradient(180deg, #f7e9df 0%, #e8d1c8 56%, #d3b1aa 100%);
  color: #4a2b32;
}
.game-view[data-active-game="monopoly"][data-mode="sweet"][data-screen="game"] .game-view-top .back-btn,
.game-view[data-active-game="monopoly"][data-mode="sweet"][data-screen="game"] .game-view-top .icon-btn {
  border-color: rgba(111, 65, 66, .24);
  background: rgba(255, 248, 242, .45);
  color: #5b3438;
}
.game-view[data-active-game="monopoly"][data-mode="sweet"][data-screen="game"] #gameViewKicker { color: rgba(91, 52, 56, .58); }
.mp-game[data-mode="sweet"] .mp-eyebrow { color: rgba(143, 83, 76, .7); }
.mp-game[data-mode="sweet"] .mp-game-head h1 { color: #4a252d; text-shadow: 0 1px 1px rgba(255,255,255,.42); }
.mp-game[data-mode="sweet"] .mp-checkout { border-color: rgba(111, 65, 66, .24); color: #6b4245; background: rgba(255,248,242,.3); }
.mp-game[data-mode="sweet"] .mp-seat {
  border-color: rgba(143, 88, 79, .2);
  background: linear-gradient(180deg, rgba(255, 252, 247, .62), rgba(255, 234, 225, .25));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 7px 18px rgba(96, 56, 51, .1);
}
.mp-game[data-mode="sweet"] .mp-seat.is-active {
  border-color: rgba(167, 102, 83, .58);
  background: linear-gradient(180deg, rgba(255, 250, 242, .88), rgba(244, 210, 197, .48));
  box-shadow: 0 0 0 1px rgba(255,255,255,.42), 0 0 24px rgba(207, 140, 112, .18), inset 0 1px 0 rgba(255,255,255,.85);
}
.mp-game[data-mode="sweet"] .mp-seat-copy b { color: #4e2a31; text-shadow: none; }
.mp-game[data-mode="sweet"] .mp-seat-copy b small,
.mp-game[data-mode="sweet"] .mp-seat-copy p { color: rgba(89, 52, 56, .55); }
.mp-game[data-mode="sweet"] .mp-seat-stock { border-color: rgba(143, 88, 79, .16); }
.mp-game[data-mode="sweet"] .mp-seat-stock b { color: #9c5d51; }
.mp-game[data-mode="sweet"] .mp-seat-stock small { color: rgba(89, 52, 56, .48); }
.mp-game[data-mode="sweet"] .mp-hud-emblem {
  border-color: rgba(167, 106, 80, .52);
  background: radial-gradient(circle at 50% 12%, rgba(255,255,255,.72), transparent 48%), linear-gradient(160deg, #d8a58f, #b77566 60%, #8f544f);
  box-shadow: 0 0 22px rgba(194, 124, 102, .16), inset 0 1px 0 rgba(255,255,255,.7);
}
.mp-game[data-mode="sweet"] .mp-hud-emblem span,
.mp-game[data-mode="sweet"] .mp-hud-emblem small { color: rgba(255, 244, 232, .7); }
.mp-game[data-mode="sweet"] .mp-hud-emblem b { color: #fff3df; }
.mp-game[data-mode="sweet"] .mp-stage {
  border-color: rgba(155, 96, 82, .34);
  background: linear-gradient(180deg, rgba(255,255,255,.46), transparent 16%), linear-gradient(145deg, #e8c8bd, #c9978d 54%, #a96c68);
  box-shadow: 0 24px 44px rgba(82, 43, 42, .18), 0 0 0 1px rgba(255,255,255,.34), inset 0 1px 0 rgba(255,255,255,.62);
}
.mp-game[data-mode="sweet"] .mp-door {
  border-color: rgba(146, 88, 80, .28);
  background: linear-gradient(180deg, rgba(255, 250, 245, .8), rgba(226, 190, 180, .64));
  box-shadow: 0 4px 9px rgba(91, 48, 44, .16), inset 0 1px 0 rgba(255,255,255,.7);
  color: #5a3438;
}
.mp-game[data-mode="sweet"] .mp-door.is-event {
  border-color: rgba(160, 94, 83, .46);
  background: linear-gradient(180deg, rgba(255, 245, 237, .9), rgba(232, 186, 179, .7));
  box-shadow: 0 5px 11px rgba(91, 48, 44, .18), 0 0 14px rgba(213, 144, 119, .12), inset 0 1px 0 rgba(255,255,255,.8);
}
.mp-game[data-mode="sweet"] .mp-door.is-start {
  border-color: rgba(157, 97, 72, .58);
  background: linear-gradient(180deg, rgba(255, 247, 236, .92), rgba(213, 160, 136, .72));
  color: #6b3c37;
}
.mp-game[data-mode="sweet"] .mp-door .mp-room { color: rgba(89, 52, 56, .45); }
.mp-game[data-mode="sweet"] .mp-door .mp-door-icon { color: #a45e52; }
.mp-game[data-mode="sweet"] .mp-door b { color: rgba(76, 42, 48, .8); }
.mp-game[data-mode="sweet"] .mp-door.is-target {
  border-color: rgba(220, 151, 103, .98);
  background: linear-gradient(180deg, rgba(255, 248, 232, .98), rgba(239, 188, 148, .88));
  box-shadow: 0 0 24px rgba(255, 182, 117, .62), 0 0 50px rgba(255, 168, 105, .2), 0 5px 9px rgba(91,48,44,.2);
}
.mp-game[data-mode="sweet"] .mp-legend {
  border-color: rgba(143, 88, 79, .16);
  background: rgba(255, 250, 245, .42);
}
.mp-game[data-mode="sweet"] .mp-legend-item { color: rgba(83, 48, 53, .66); }
.mp-game[data-mode="sweet"] .mp-legend-item i { color: #9b5a50; }
.mp-game[data-mode="sweet"] .mp-hint { color: rgba(83, 48, 53, .62); text-shadow: 0 1px 1px rgba(255,255,255,.4); }
.mp-game[data-mode="sweet"] .mp-main-btn {
  border-color: rgba(255, 235, 210, .7);
  background: linear-gradient(180deg, rgba(255,250,230,.36), transparent 30%), linear-gradient(135deg, #a55d51, #c9836f 50%, #8b4d4a);
  color: #fff7e8;
  box-shadow: 0 7px 0 rgba(89, 45, 40, .38), 0 10px 22px rgba(94, 47, 43, .2), inset 0 1px 0 rgba(255,250,225,.63);
}
.mp-game[data-mode="sweet"] .mp-match-btn { border-color: rgba(143, 88, 79, .22); color: rgba(83, 48, 53, .65); background: rgba(255,250,245,.32); }
.mp-game[data-mode="sweet"] .mp-toast { background: rgba(255, 248, 239, .92); color: #5a3438; border-color: rgba(155,96,82,.28); }
.mp-game[data-mode="sweet"] .mp-token { border-color: rgba(255, 250, 225, .9); }
.mp-game[data-mode="sweet"] .mp-seat.is-active .mp-seat-avatar { box-shadow: 0 0 18px rgba(213, 151, 112, .4), 0 4px 10px rgba(0,0,0,.2); }

/* the event card follows the floor: ivory for sweet, velvet for night */
.mp-event-card[data-mode="sweet"] {
  border-color: rgba(159, 98, 82, .48);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.58), transparent 50%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(131, 83, 68, .035) 28px 29px),
    linear-gradient(155deg, #f6e6d8, #e7c9b9 62%, #d9b6ab);
  box-shadow: 0 28px 60px rgba(80,43,40,.28), 0 0 40px rgba(210,144,112,.12);
}
.mp-event-card[data-mode="sweet"] .mp-event-door { border-color: rgba(145,88,76,.24); color: rgba(116,68,64,.66); }
.mp-event-card[data-mode="sweet"] .mp-event-door b { color: #7c4841; }
.mp-event-card[data-mode="sweet"] .mp-event-eyebrow { color: rgba(112,67,62,.55); }
.mp-event-card[data-mode="sweet"] .mp-directive { color: #57313a; border-color: rgba(145,88,76,.24); text-shadow: none; }
.mp-event-card[data-mode="sweet"] .mp-event-actions .mp-ghost-btn { border-color: rgba(145,88,76,.28); color: rgba(93,54,58,.72); }
.mp-event-card[data-mode="sweet"] .mp-skip-btn { color: rgba(93,54,58,.45); }
.mp-event-card[data-mode="sweet"] .mp-event-note { color: rgba(93,54,58,.42); }
.mp-event-card[data-mode="sweet"] .mp-main-btn {
  background: linear-gradient(180deg, rgba(255,250,230,.35), transparent 30%), linear-gradient(135deg, #a45d50, #c5806e 52%, #8c4c47);
  box-shadow: 0 5px 0 rgba(89,45,40,.35), 0 9px 20px rgba(94,47,43,.18), inset 0 1px 0 rgba(255,250,225,.6);
}
.mp-modal-holder .mp-modal-backdrop { background: rgba(214, 183, 173, .38); }
.mp-game[data-mode="night"] ~ .mp-modal-holder .mp-modal-backdrop { background: rgba(3, 2, 5, .65); }

/* keep the image's own hotel sign; our duplicate title is gone */
@media (max-width: 760px) {
  .mp-game[data-mode="sweet"] .mp-lobby,
  .mp-game[data-mode="night"] .mp-lobby { width: 45%; top: 62%; min-height: 94px; padding: 5px; }
  .mp-game[data-mode="sweet"] .mp-lobby-turn,
  .mp-game[data-mode="night"] .mp-lobby-turn { font-size: 8px; }
  .mp-game[data-mode="sweet"] .mp-target-copy,
  .mp-game[data-mode="night"] .mp-target-copy { font-size: 9px; }
}

/* v0.16: the board owns the room — stretch it down to the action bar on tall phones */
@media (max-width: 760px) and (min-height: 700px) {
  .mp-game { height: calc(100dvh - 72px); }
  .mp-game .mp-stage { flex: 1 1 auto; min-height: 0; }
  .mp-game .mp-stage .mp-board { height: 100%; aspect-ratio: auto; }
  .mp-game .mp-lobby { top: 60%; }
}

/* v0.17: the photo is never cropped — full frame sits in the middle, the same
   frame blurred and darkened carries the board above and below it */
.mp-game[data-mode="sweet"] .mp-board {
  background: linear-gradient(180deg, rgba(255,244,235,.04), rgba(74,42,42,.06)), #ead6ce;
}
.mp-game[data-mode="night"] .mp-board {
  background: linear-gradient(180deg, rgba(20,7,20,.04), rgba(8,3,10,.18)), #160b18;
}
.mp-board-wash,
.mp-board-photo { position: absolute; inset: 0; pointer-events: none; }
.mp-board-wash {
  z-index: 0;
  transform: scale(1.4);
  filter: blur(26px) saturate(1.08);
  background-position: center 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
.mp-board-photo {
  z-index: 1;
  background-position: center 50%;
  background-size: contain;
  background-repeat: no-repeat;
}
.mp-game[data-mode="sweet"] .mp-board-wash {
  background-image: linear-gradient(180deg, rgba(255,238,226,.10), rgba(64,33,32,.30)), url("assets/monopoly-sweet.png");
}
.mp-game[data-mode="night"] .mp-board-wash {
  background-image: linear-gradient(180deg, rgba(24,8,20,.18), rgba(4,2,8,.52)), url("assets/monopoly-night.png");
}
.mp-game[data-mode="sweet"] .mp-board-photo { background-image: url("assets/monopoly-sweet.png"); }
.mp-game[data-mode="night"] .mp-board-photo { background-image: url("assets/monopoly-night.png"); }
.mp-game[data-mode="sweet"] .mp-board-wash { opacity: .92; }
.mp-game[data-mode="night"] .mp-board-wash { opacity: .95; }
.mp-board-photo {
  -webkit-mask-image: linear-gradient(180deg, transparent 27%, #000 37%, #000 63%, transparent 73%);
  mask-image: linear-gradient(180deg, transparent 27%, #000 37%, #000 63%, transparent 73%);
}
.mp-board-wash { transform: scale(1.9); filter: blur(16px) saturate(1.06); }
/* wallpaper texture on the blur so the top/bottom walls read as architecture */
.mp-game[data-mode="sweet"] .mp-corridor {
  background:
    repeating-linear-gradient(90deg, rgba(125, 76, 71, .045) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, rgba(255, 233, 216, .10), transparent 26%, transparent 74%, rgba(64, 33, 32, .10));
}
.mp-game[data-mode="night"] .mp-corridor {
  background:
    repeating-linear-gradient(90deg, rgba(215, 167, 112, .05) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, rgba(20, 8, 18, .22), transparent 28%, transparent 72%, rgba(3, 1, 6, .28));
}

/* v0.18: landscape hotel board — doors ring a framed 16:9 photo, like the mockup */
.mp-board { aspect-ratio: 3 / 2; width: min(100%, 560px); }
.mp-game[data-mode="sweet"] .mp-board-photo,
.mp-game[data-mode="night"] .mp-board-photo {
  inset: 20.4% 15%;
  border-radius: 10px;
  border: 1px solid rgba(226, 176, 112, .38);
  box-shadow: 0 0 0 4px rgba(20, 10, 14, .22), 0 16px 34px rgba(0, 0, 0, .34), inset 0 0 24px rgba(0, 0, 0, .28);
  -webkit-mask-image: none;
  mask-image: none;
  z-index: 1;
}
.mp-game[data-mode="sweet"] .mp-board-photo { border-color: rgba(150, 96, 82, .34); box-shadow: 0 0 0 4px rgba(255, 246, 236, .18), 0 14px 30px rgba(90, 48, 44, .26); }
.mp-game .mp-door,
.mp-game .mp-door.is-event { width: 46px; height: 36px; gap: 0; border-radius: 9px; }
.mp-game .mp-door.is-start { width: 46px; height: 36px; }
.mp-game .mp-door.is-small { width: 40px; height: 32px; }
.mp-game .mp-door .mp-room { font-size: 6.5px; }
.mp-game .mp-door-icon { font-size: 11px; }
.mp-game .mp-door.is-small .mp-door-icon { font-size: 10px; }
.mp-game .mp-door b { font-size: 6.5px; }
.mp-game .mp-door.is-start b { font-size: 7px; }
.mp-game .mp-stage { flex: 0 0 auto; }
.mp-game .mp-stage .mp-board { height: auto; aspect-ratio: 3 / 2; }

/* v0.18 turn panel + board plaque */
.mp-game { justify-content: space-between; }
.mp-board-plaque {
  position: absolute;
  left: 50%;
  bottom: 21.5%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(226, 176, 112, .28);
  background: rgba(10, 5, 9, .42);
  color: rgba(244, 219, 174, .9);
  font-family: "Songti SC", "STSong", serif;
  font-size: 9px;
  letter-spacing: .06em;
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
}
.mp-board-plaque span { font-family: "Georgia", serif; font-size: 6px; letter-spacing: .24em; color: rgba(244, 219, 174, .5); }
.mp-board-plaque b { font-weight: 500; }
.mp-game[data-mode="sweet"] .mp-board-plaque {
  border-color: rgba(150, 96, 82, .26);
  background: rgba(255, 249, 242, .7);
  color: rgba(88, 50, 52, .9);
}
.mp-game[data-mode="sweet"] .mp-board-plaque span { color: rgba(88, 50, 52, .48); }

.mp-turn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: min(100%, 560px);
  margin: 10px auto 0;
  padding: 6px 12px;
  box-sizing: border-box;
}
.mp-turn .mp-die-tray { gap: 12px; min-height: 62px; margin: 0; }
.mp-turn .mp-cube-stage { width: 52px; height: 52px; perspective: 460px; transform: rotateX(-10deg) rotateY(14deg) scale(1.42); }
.mp-turn .mp-die-copy b { font-size: 19px; }
.mp-turn .mp-die-copy small { font-size: 8px; margin-top: 4px; }
.mp-turn-side { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mp-turn-side .mp-lobby-turn { justify-content: flex-start; margin: 0; }
.mp-turn-side .mp-lobby-turn b { font-size: 13px; }
.mp-turn-side .mp-lobby-turn span:last-child { font-size: 9px; }
.mp-turn-side .mp-target-copy { margin: 0; min-height: 0; font-size: 10px; }
.mp-game[data-mode="sweet"] .mp-turn-side .mp-lobby-turn b { color: #593438; }
.mp-game[data-mode="sweet"] .mp-turn-side .mp-target-copy { color: rgba(89, 52, 56, .68); text-shadow: none; }

/* v0.18b: 4:3 board + larger turn panel */
.mp-game .mp-stage .mp-board { aspect-ratio: 4 / 3; }
.mp-game[data-mode="sweet"] .mp-board-photo,
.mp-game[data-mode="night"] .mp-board-photo { inset: 23.6% 15%; }
.mp-turn { gap: 20px; margin-top: 14px; min-height: 96px; }
.mp-turn .mp-cube-stage { width: 56px; height: 56px; perspective: 520px; transform: rotateX(-10deg) rotateY(14deg) scale(1.62); }
.mp-turn-side { gap: 2px; }
.mp-turn-points {
  margin: 0;
  font-family: "Georgia", "Songti SC", serif;
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: .02em;
  color: rgba(244, 219, 174, .94);
}
.mp-turn-who { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 0; }
.mp-turn-who b { font-family: "Songti SC", serif; font-size: 12px; font-weight: 500; color: rgba(236, 203, 152, .9); }
.mp-turn-who span { font-size: 9px; color: rgba(236, 220, 198, .42); }
.mp-turn-side .mp-target-copy { margin-top: 2px; font-size: 10px; min-height: 0; }
.mp-game[data-mode="sweet"] .mp-turn-points { color: #5b3336; }
.mp-game[data-mode="sweet"] .mp-turn-who b { color: #7a4a44; }
.mp-game[data-mode="sweet"] .mp-turn-who span { color: rgba(89, 52, 56, .5); }
.mp-game[data-mode="sweet"] .mp-turn-side .mp-target-copy { color: rgba(89, 52, 56, .66); text-shadow: none; }
.mp-game { justify-content: flex-start; }
.mp-turn { flex: 1 1 auto; align-items: center; justify-content: center; margin-top: 8px; }
.mp-game .mp-legend { margin-top: 6px; }

.mp-stakes { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 auto; width: min(100%, 560px); margin: 6px auto 0; padding: 0 2px; box-sizing: border-box; }
.mp-stake {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(201, 160, 100, .18);
  background: rgba(12, 7, 12, .34);
}
.mp-stake span { display: block; font-size: 7px; letter-spacing: .06em; color: rgba(236, 220, 198, .4); }
.mp-stake p {
  margin: 4px 0 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: "Songti SC", "STSong", serif;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(246, 226, 196, .84);
}
.mp-stake[data-player="B"] { border-color: rgba(174, 164, 203, .18); }
.mp-game[data-mode="sweet"] .mp-stake { border-color: rgba(150, 96, 82, .16); background: rgba(255, 250, 244, .42); }
.mp-game[data-mode="sweet"] .mp-stake span { color: rgba(89, 52, 56, .46); }
.mp-game[data-mode="sweet"] .mp-stake p { color: rgba(74, 42, 45, .82); }
.mp-game[data-mode="sweet"] .mp-stake[data-player="B"] { border-color: rgba(126, 108, 150, .16); }
.mp-turn { flex: 0 0 auto; }
.mp-turn { margin-top: auto; }
.mp-stakes { flex: 0 0 auto; margin-top: 10px; margin-bottom: auto; }
.mp-game[data-mode="sweet"] .mp-stake { background: rgba(255, 250, 244, .56); border-color: rgba(150, 96, 82, .22); }
.mp-stake span { color: rgba(236, 220, 198, .48); }
.mp-game[data-mode="sweet"] .mp-stake span { color: rgba(89, 52, 56, .54); }
.mp-game[data-mode="sweet"] .mp-board-photo,
.mp-game[data-mode="night"] .mp-board-photo { inset: 24.8% 15%; }

/* short screens: keep the whole table in one view */
@media (max-height: 720px) {
  .mp-game .mp-turn { min-height: 58px; margin-top: 4px; gap: 12px; }
  .mp-game .mp-turn .mp-cube-stage { width: 44px; height: 44px; perspective: 400px; transform: rotateX(-10deg) rotateY(14deg) scale(1.16); }
  .mp-turn-points { font-size: 18px; }
  .mp-turn-who b { font-size: 10px; }
  .mp-turn-who span { font-size: 8px; }
  .mp-turn-side .mp-target-copy { font-size: 9px; }
  .mp-stakes { margin-top: 5px; }
  .mp-stake { padding: 5px 9px; border-radius: 10px; }
  .mp-stake span { font-size: 6px; }
  .mp-stake p { font-size: 9.5px; line-height: 1.35; -webkit-line-clamp: 1; }
  .mp-game .mp-legend { margin-top: 4px; padding: 3px 6px; }
}
.mp-game { height: calc(100dvh - 72px); }
@media (min-width: 760px) {
  .mp-game .mp-stage { width: min(100%, 600px); }
  .mp-game .mp-stage .mp-board { width: 100%; }
}
@media (min-width: 760px) {
  .mp-game .mp-stage { width: min(100%, 540px); }
  .mp-game .mp-turn { margin-top: 10px; }
  .mp-game .mp-stakes { margin-top: 6px; }
}
.mp-game .mp-legend { flex: 0 0 auto; }
@media (min-width: 760px) {
  .mp-game .mp-stage { width: min(100%, 500px); }
}

/* v0.19: full-bleed board, traditional white die, compact stack */
@media (max-width: 760px) {
  .mp-game { padding-left: 0; padding-right: 0; }
  .mp-game .mp-stage { width: 100%; padding: 0; border-radius: 14px; }
  .mp-game .mp-stage .mp-board { width: 100%; border-radius: 14px; }
}
.mp-game .mp-cube-face {
  border-color: rgba(60, 50, 42, .16);
  background: linear-gradient(150deg, #ffffff, #ece8e1 62%, #ded8cf);
  box-shadow: inset 0 0 6px rgba(60, 40, 30, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.mp-game .mp-cube-pips i.on { background: #241f1b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.mp-game .mp-cube-stage.is-settled::after { border-color: rgba(255, 245, 225, .5); }
.mp-turn { margin-top: 12px; }
.mp-dock { margin-top: auto; }
.mp-turn { margin-top: auto; }
.mp-dock { margin-top: 10px; }
.mp-turn .mp-cube-stage { transform: rotateX(-10deg) rotateY(14deg) scale(1.75); }
.mp-game { justify-content: center; }
.mp-turn { margin-top: 10px; }
.mp-dock { margin-top: 8px; }
@media (min-width: 760px) {
  .mp-game .mp-stage { width: min(100%, 640px); }
  .mp-game .mp-door, .mp-game .mp-door.is-event, .mp-game .mp-door.is-start { width: 54px; height: 42px; }
  .mp-game .mp-door.is-small { width: 46px; height: 36px; }
  .mp-game .mp-door b { font-size: 7.5px; }
  .mp-game .mp-door .mp-room { font-size: 7px; }
  .mp-game .mp-door-icon { font-size: 13px; }
}

/* v0.20: the photo is a backdrop, not a framed picture — full-bleed and faded */
.mp-game[data-mode="sweet"] .mp-board-photo,
.mp-game[data-mode="night"] .mp-board-photo {
  inset: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-size: cover;
  background-position: center 52%;
  opacity: .5;
  -webkit-mask-image: none;
  mask-image: none;
}
.mp-game[data-mode="sweet"] .mp-board-wash,
.mp-game[data-mode="night"] .mp-board-wash { opacity: .5; }
.mp-board-plaque { bottom: 6%; }
.mp-game[data-mode="sweet"] .mp-board-photo,
.mp-game[data-mode="night"] .mp-board-photo { opacity: .42; }

/* =========================================================
   v0.21 · 真心话大冒险 · 转盘
   ========================================================= */
.tod-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 2px 0 8px;
  min-height: calc(100dvh - 110px);
  justify-content: space-between;
}
.tod-head { text-align: center; }
.tod-eyebrow { margin: 0; font-size: 8px; letter-spacing: .26em; color: rgba(226, 176, 112, .6); }
.tod-head h1 {
  margin: 7px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: .04em;
  color: #f6e3c4;
}
.tod-sub { margin: 7px 0 0; font-size: 10px; color: rgba(236, 220, 198, .44); }
.tod-stage { position: relative; display: grid; place-items: center; padding: 10px 0 6px; }
.tod-wheel {
  position: relative;
  width: min(74vw, 310px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: rotate(0deg);
  will-change: transform;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .46), inset 0 0 46px rgba(0, 0, 0, .32);
}
.tod-wheel::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(226, 176, 112, .52);
  box-shadow: 0 0 0 5px rgba(12, 6, 10, .58), 0 0 22px rgba(226, 176, 112, .12);
  pointer-events: none;
}
.tod-seg { position: absolute; inset: 0; transform: rotate(var(--a)); }
.tod-seg span {
  position: absolute;
  left: 50%;
  top: 6.4%;
  transform: translateX(-50%) rotate(var(--flip, 0deg));
  font-family: "Songti SC", "STSong", serif;
  font-size: 12px;
  letter-spacing: .14em;
  white-space: nowrap;
  color: rgba(249, 233, 204, .94);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.tod-seg span.is-dare { color: rgba(255, 224, 176, .96); }
.tod-hub {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 34% 28%, #f9e3b4, #cf9f58 58%, #8b5f2a);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .46), inset 0 2px 4px rgba(255, 255, 255, .5), inset 0 -3px 8px rgba(90, 52, 20, .4);
  font-family: "Songti SC", "STSong", serif;
  font-size: 24px;
  color: #45251b;
  pointer-events: none;
}
.tod-pointer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 21px solid #f3d096;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .5));
  z-index: 3;
}
.tod-result {
  width: 100%;
  max-width: 360px;
  min-height: 128px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(226, 176, 112, .2);
  background: rgba(14, 7, 12, .46);
  text-align: center;
  transition: border-color 220ms, background 220ms;
}
.tod-result.is-live { border-color: rgba(226, 176, 112, .46); background: rgba(26, 13, 20, .7); }
.tod-tag {
  align-self: center;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid rgba(226, 176, 112, .36);
  font-size: 9px;
  letter-spacing: .16em;
  color: #f4d9a6;
}
.tod-result[data-kind="dare"] .tod-tag { color: #ffdcae; border-color: rgba(226, 160, 90, .5); }
.tod-text {
  margin: 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(249, 232, 216, .95);
}
.tod-actions { width: 100%; max-width: 360px; }
.tod-btn {
  width: 100%;
  height: 58px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Songti SC", "STSong", serif;
  font-size: 17px;
  letter-spacing: .14em;
  color: #3c1f18;
  background: linear-gradient(180deg, #f9e3b4, #dcae63 56%, #b9853f);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .62);
  transition: transform 140ms, filter 160ms;
}
.tod-btn:active { transform: translateY(1px) scale(.995); filter: brightness(.97); }
.tod-btn:disabled { opacity: .55; cursor: default; }

@media (max-height: 720px) {
  .tod-game { gap: 10px; min-height: calc(100dvh - 96px); }
  .tod-head h1 { font-size: 25px; }
  .tod-sub { display: none; }
  .tod-wheel { width: min(66vw, 246px); }
  .tod-hub { width: 64px; height: 64px; font-size: 20px; }
  .tod-result { min-height: 104px; padding: 11px 14px; }
  .tod-text { font-size: 15px; }
  .tod-btn { height: 50px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tod-wheel { transition: none; }
}
.tod-seg span { transform: translateX(-50%) rotate(calc(-1 * var(--a))); }
.tod-seg span { transform: translateX(-50%) rotate(calc(-1 * var(--a) - var(--r, 0deg))); }
.tod-stage .tod-hub { z-index: 2; }

/* v0.22: brighter wheel + 1000-question bank */
.tod-seg span { color: #4a1622; text-shadow: 0 1px 0 rgba(255, 255, 255, .38); }
.tod-seg span.is-dare { color: #4a2a10; }
.tod-wheel { box-shadow: 0 20px 44px rgba(0, 0, 0, .46), inset 0 0 40px rgba(40, 12, 24, .18); }

/* =========================================================
   v0.23 · Midnight Aurora 转盘（覆盖 v0.21 / v0.22）
   ========================================================= */
.tod-game { gap: 15px; padding: 4px 0 8px; }
.tod-eyebrow { color: rgba(186, 196, 255, .5); letter-spacing: .34em; }
.tod-head h1 {
  color: #f1edff;
  letter-spacing: .09em;
  text-shadow: 0 0 30px rgba(140, 120, 255, .32);
}
.tod-sub { color: rgba(219, 216, 245, .40); letter-spacing: .04em; }

.tod-stage {
  --wheel: min(72vw, 300px);
  position: relative;
  display: grid;
  place-items: center;
  padding: 16px 0;
}

/* 外圈呼吸光晕 */
.tod-glow {
  position: absolute;
  width: calc(var(--wheel) + 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 98, 255, .24), rgba(70, 150, 255, .10) 46%, transparent 68%);
  filter: blur(16px);
  pointer-events: none;
  animation: todBreath 6.5s ease-in-out infinite;
}
@keyframes todBreath {
  0%, 100% { opacity: .55; transform: scale(.97); }
  50% { opacity: .9; transform: scale(1.03); }
}

/* 静止刻度环 */
.tod-ticks {
  position: absolute;
  width: calc(var(--wheel) + 24px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg,
      rgba(255, 255, 255, .40) 0deg .32deg,
      transparent .32deg 7.5deg);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 10px), #000 calc(50% - 10px) calc(50% - 4px), transparent calc(50% - 4px));
  mask: radial-gradient(circle, transparent 0 calc(50% - 10px), #000 calc(50% - 10px) calc(50% - 4px), transparent calc(50% - 4px));
  opacity: .5;
}

.tod-wheel {
  position: relative;
  width: var(--wheel);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0c0818;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, .58),
    0 0 0 1px rgba(255, 255, 255, .07);
}

/* 扇区底色层 */
.tod-wheel-fill {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
}

/* 极光叠加层 */
.tod-wheel-aurora {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    conic-gradient(from 205deg,
      rgba(150, 122, 255, .34),
      rgba(255, 128, 190, .16) 20%,
      rgba(96, 212, 255, .26) 44%,
      rgba(150, 122, 255, .08) 60%,
      transparent 76%),
    radial-gradient(circle at 50% 32%, rgba(255, 255, 255, .15), transparent 58%);
  mix-blend-mode: screen;
}

/* 扇区分隔细线 */
.tod-wheel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg,
      rgba(255, 255, 255, .22) 0deg .45deg,
      transparent .45deg 45deg);
}

/* 外环 */
.tod-wheel::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(190, 200, 255, .28);
  box-shadow: 0 0 0 4px rgba(8, 5, 16, .7), 0 0 26px rgba(120, 110, 255, .22);
  pointer-events: none;
}

.tod-seg span {
  top: 7.2%;
  font-size: 11px;
  letter-spacing: .18em;
  color: #e9e3ff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
  transform: translateX(-50%) rotate(calc(-1 * var(--a) - var(--r, 0deg)));
}
.tod-seg span.is-dare { color: #cbe9ff; }

/* 中心玻璃球 */
.tod-hub {
  width: 76px;
  height: 76px;
  font-size: 21px;
  letter-spacing: .08em;
  color: #ece8ff;
  background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .40), rgba(255, 255, 255, .08) 40%, rgba(20, 14, 36, .95) 74%);
  border: 1px solid rgba(255, 255, 255, .20);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, .5),
    inset 0 -8px 18px rgba(0, 0, 0, .55),
    0 10px 24px rgba(0, 0, 0, .55),
    0 0 30px rgba(122, 100, 255, .3);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}

/* 细针指针 */
.tod-pointer {
  top: 2px;
  width: 2px;
  height: 38px;
  border: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(232, 240, 255, .9) 42%, rgba(170, 200, 255, .55));
  border-radius: 2px;
  box-shadow: 0 0 16px rgba(170, 200, 255, .85);
  filter: none;
  z-index: 5;
}
.tod-pointer i {
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: #eef3ff;
  border-radius: 1px;
  box-shadow: 0 0 12px rgba(180, 210, 255, .95);
}

/* 结果卡 */
.tod-result {
  max-width: 360px;
  min-height: 132px;
  padding: 17px 18px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .09);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)),
    rgba(13, 9, 24, .62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: border-color 280ms, box-shadow 280ms, background 280ms;
}
.tod-result.is-live {
  border-color: rgba(186, 170, 255, .32);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)),
    rgba(18, 12, 32, .72);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .45), 0 0 38px rgba(122, 100, 255, .16);
}
.tod-result[data-kind="dare"].is-live {
  border-color: rgba(150, 210, 255, .30);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .45), 0 0 38px rgba(70, 160, 255, .16);
}
.tod-tag {
  padding: 3px 13px;
  border-radius: 999px;
  border: 1px solid rgba(186, 170, 255, .28);
  background: rgba(122, 100, 255, .10);
  font-size: 9px;
  letter-spacing: .3em;
  text-indent: .3em;
  color: #d7ceff;
}
.tod-result[data-kind="dare"] .tod-tag {
  color: #bfe6ff;
  border-color: rgba(150, 210, 255, .28);
  background: rgba(70, 160, 255, .10);
}
.tod-text {
  font-size: 16.5px;
  line-height: 1.72;
  letter-spacing: .01em;
  color: rgba(244, 240, 255, .96);
}
.tod-result.is-enter .tod-tag { animation: todTagIn 440ms cubic-bezier(.2, .8, .2, 1) both; }
.tod-result.is-enter .tod-text { animation: todTextIn 560ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes todTagIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: none; }
}
@keyframes todTextIn {
  from { opacity: 0; transform: translateY(9px); filter: blur(2px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* 停稳脉冲 */
.tod-game.is-settled .tod-stage { animation: todPulse 560ms cubic-bezier(.2, .8, .2, 1); }
@keyframes todPulse {
  0% { transform: scale(1); }
  28% { transform: scale(1.016); }
  100% { transform: scale(1); }
}

/* 按钮 */
.tod-btn {
  position: relative;
  overflow: hidden;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  font-size: 16px;
  letter-spacing: .22em;
  text-indent: .22em;
  color: #efeaff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .025)),
    linear-gradient(100deg, #2d2453, #1a2c49 62%, #241b3d);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .24);
  transition: transform 140ms, box-shadow 220ms, filter 200ms;
}
.tod-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 34%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg);
  transition: left 640ms cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
@media (hover: hover) {
  .tod-btn:hover {
    box-shadow: 0 18px 38px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 30px rgba(120, 100, 255, .22);
  }
  .tod-btn:hover::after { left: 118%; }
}
.tod-btn:active { transform: translateY(1px) scale(.995); filter: brightness(.96); }
.tod-btn:disabled { opacity: .5; cursor: default; }

@media (max-height: 720px) {
  .tod-stage { --wheel: min(64vw, 232px); padding: 12px 0; }
  .tod-hub { width: 62px; height: 62px; font-size: 18px; }
  .tod-result { min-height: 108px; padding: 13px 15px; }
  .tod-text { font-size: 14.5px; }
  .tod-btn { height: 50px; font-size: 15px; }
  .tod-head h1 { font-size: 25px; }
  .tod-sub { display: none; }
}
/* =========================================================
   v0.23.1 微调：标签避开指针、间距收紧
   ========================================================= */
.tod-game { justify-content: center; gap: 20px; }
.tod-game.is-spinning .tod-wheel { filter: blur(.5px) saturate(1.1); }
.tod-game.is-spinning .tod-glow { opacity: 1; transform: scale(1.05); }
.tod-wheel { transition: filter 260ms; }
.tod-seg span { top: 11.5%; }
.tod-pointer { height: 28px; }
.tod-pointer i { bottom: -4px; width: 7px; height: 7px; }
.tod-wheel::after {
  background: repeating-conic-gradient(from 0deg,
      rgba(255, 255, 255, .30) 0deg .5deg,
      transparent .5deg 45deg);
}

@media (prefers-reduced-motion: reduce) {
  .tod-glow,
  .tod-game.is-settled .tod-stage,
  .tod-result.is-enter .tod-tag,
  .tod-result.is-enter .tod-text { animation: none; }
  .tod-btn::after { display: none; }
}

/* =========================================================
   v0.26 · 底线交换所（暗夜磨砂纸 · 手写批卷）
   ========================================================= */
.bx {
  --paper: #1c1b22;
  --paper-2: #121117;
  --ink: #ece4d4;
  --ink-dim: #9a8f7e;
  --a: #8fb2ee;
  --b: #e2695a;
  --brass: #c9a86a;
  --hand: "Hannotate SC", "HanziPen SC", "Xingkai SC", "Kaiti SC", "STKaiti", cursive;
  width: 100%;
  padding: 0 0 24px;
  color: var(--ink);
}
.bx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 封面 ---------- */
.bx-intro { text-align: center; padding: 6px 0 4px; }
.bx-eyebrow { margin: 0; font-size: 8px; letter-spacing: .34em; color: rgba(201, 168, 106, .55); }
.bx-title {
  margin: 10px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 32px; font-weight: 500; letter-spacing: .1em;
  color: #f2ead9;
  text-shadow: 0 0 32px rgba(201, 168, 106, .28);
}
.bx-lede {
  margin: 12px auto 0; max-width: 320px;
  font-size: 12px; line-height: 1.9; color: rgba(232, 226, 214, .5);
}

.bx-sheets {
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px 13px;
  padding: 6px 2px 4px;
}
.bx-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 132px;
  padding: 15px 13px 12px;
  text-align: left;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 29px, rgba(220, 200, 170, .03) 29px 30px),
    radial-gradient(120% 80% at 30% 0%, rgba(255, 240, 215, .075), transparent 62%),
    linear-gradient(168deg, #23222a, #17161c);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 0 0 1px rgba(201, 168, 106, .16);
  transform: rotate(calc((var(--i, 0) - 2.5) * 0.8deg));
  transition: transform 300ms cubic-bezier(.2, .8, .2, 1), box-shadow 300ms;
}
.bx-sheet:nth-child(2n) { transform: rotate(calc((var(--i, 0) - 2.5) * 0.8deg + 1deg)); }
@media (hover: hover) {
  .bx-sheet:hover {
    transform: rotate(0deg) translateY(-5px) scale(1.015);
    box-shadow:
      0 26px 46px rgba(0, 0, 0, .55),
      inset 0 1px 0 rgba(255, 255, 255, .1),
      0 0 0 1px rgba(201, 168, 106, .3),
      0 0 26px rgba(201, 168, 106, .12);
    z-index: 2;
  }
}
.bx-sheet:active { transform: scale(.985); }
.bx-sheet-no { font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .2em; color: rgba(201, 168, 106, .6); }
.bx-sheet-title {
  font-family: "Songti SC", "STSong", serif;
  font-size: 18px; letter-spacing: .08em;
  color: #f0e7d6;
}
.bx-sheet-sub { flex: 1; font-size: 10px; line-height: 1.6; color: rgba(232, 222, 200, .48); }
.bx-sheet-count {
  width: 100%; padding-top: 6px;
  border-top: 1px solid rgba(201, 168, 106, .18);
  font-size: 9px; letter-spacing: .14em; color: rgba(201, 168, 106, .58);
}
.bx-foot-note { margin: 18px 0 0; font-size: 10px; letter-spacing: .06em; color: rgba(226, 216, 200, .32); }

/* ---------- 纸 ---------- */
.bx-fillview { position: relative; }
.bx-back {
  margin: 0 0 12px; padding: 6px 2px;
  border: 0; background: none; cursor: pointer;
  font-size: 11px; letter-spacing: .1em; color: rgba(226, 216, 200, .55);
  transition: color 160ms;
}
.bx-back:hover { color: #f0e6d6; }

.bx-paper,
.bx-report {
  position: relative;
  padding: 24px 19px 16px 34px;
  border-radius: 4px;
  color: var(--ink);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.05'/></svg>"),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(220, 200, 170, .022) 34px 35px),
    radial-gradient(130% 70% at 50% -10%, rgba(255, 238, 208, .09), transparent 62%),
    linear-gradient(180deg, var(--paper), var(--paper-2));
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .6),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    0 0 0 1px rgba(201, 168, 106, .14);
}
.bx-paper::after,
.bx-report::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, .035), transparent 38%);
  mix-blend-mode: screen;
}

.bx-seal {
  position: absolute;
  left: 11px; top: 26px; bottom: 26px;
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  font-size: 7px;
  letter-spacing: .22em;
  color: rgba(201, 168, 106, .4);
  border-left: 1px dashed rgba(201, 168, 106, .26);
  border-right: 1px dashed rgba(201, 168, 106, .26);
  pointer-events: none;
}

.bx-secret {
  margin: 0 0 8px;
  font-size: 8px;
  letter-spacing: .32em;
  color: rgba(226, 105, 90, .72);
}
.bx-series {
  margin: 0 0 6px;
  text-align: center;
  font-size: 9px;
  letter-spacing: .28em;
  color: rgba(201, 168, 106, .62);
}
.bx-paper-title {
  margin: 0;
  text-align: center;
  font-family: "Songti SC", "STSong", serif;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: .32em;
  text-indent: .32em;
  color: #f4ecdc;
  text-shadow: 0 0 22px rgba(201, 168, 106, .2);
}
.bx-paper-rule {
  margin: 7px 0 0;
  text-align: center;
  font-size: 9px;
  color: rgba(200, 190, 170, .44);
}
.bx-paper-meta {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 16px;
}
.bx-name {
  flex: 1;
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(201, 168, 106, .28);
}
.bx-name span { font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.bx-name.is-a span, .bx-name.is-a input { color: var(--a); }
.bx-name.is-b span, .bx-name.is-b input { color: var(--b); }
.bx-name input {
  width: 100%; border: 0; background: none; outline: none;
  font-family: var(--hand); font-size: 15px;
}
.bx-paper-sub { margin: 10px 0 0; font-size: 10.5px; color: rgba(200, 190, 170, .55); }

.bx-notice {
  margin: 12px 0 0;
  padding: 8px 10px;
  border: 1px solid rgba(201, 168, 106, .18);
  background: rgba(255, 240, 215, .02);
  font-size: 10px;
  line-height: 1.75;
  color: rgba(220, 210, 190, .62);
}
.bx-notice b { color: rgba(201, 168, 106, .8); }

.bx-section {
  margin: 18px 0 4px;
  font-family: "Songti SC", "STSong", serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .05em;
  color: rgba(240, 230, 210, .85);
}

/* ---------- 题目 ---------- */
.bx-body { padding-top: 2px; }
.bx-q {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 5px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(201, 168, 106, .12);
}
.bx-q:last-child { border-bottom: 0; }
.bx-qno { padding-top: 1px; font-size: 11px; color: rgba(201, 168, 106, .55); }
.bx-qtext { margin: 0 0 6px; font-size: 12.5px; line-height: 1.6; color: #e7dfcd; }
.bx-ansrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bx-ans { display: inline-flex; align-items: center; gap: 5px; }
.bx-ans.is-a { --who: var(--a); }
.bx-ans.is-b { --who: var(--b); }
.bx-who {
  font-family: var(--hand);
  font-size: 11px;
  font-weight: 700;
  color: var(--who);
  opacity: .78;
}
.bx-pair { display: inline-flex; gap: 5px; }

/* 手写勾叉 */
.bx-yn {
  width: 36px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid rgba(201, 168, 106, .16);
  border-radius: 3px;
  background: rgba(255, 240, 215, .02);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  filter: grayscale(1) opacity(.28);
  transition: filter 200ms, border-color 200ms, background 200ms, transform 180ms;
}
.bx-yn:active { transform: scale(.93); }
.bx-ans.is-a .bx-yn { color: var(--a); }
.bx-ans.is-b .bx-yn { color: var(--b); }
.bx-ans.is-a .bx-yn.is-on { filter: none; border-color: rgba(143, 178, 238, .4); background: rgba(143, 178, 238, .08); }
.bx-ans.is-b .bx-yn.is-on { filter: none; border-color: rgba(226, 105, 90, .4); background: rgba(226, 105, 90, .08); }
.bx-draw { width: 34px; height: 34px; display: block; overflow: visible; }
.bx-draw path {
  fill: none;
  stroke: currentColor;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  filter: url(#bxRough);
}
.bx-yn.is-done .bx-draw path { stroke-dashoffset: 0; }
.bx-yn.is-fresh .bx-draw path { animation: bxDraw .46s cubic-bezier(.45, 0, .22, 1) forwards; }
@keyframes bxDraw { to { stroke-dashoffset: 0; } }

/* 踩雷震动 */
.bx-q.is-reject { animation: bxShake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes bxShake {
  0%, 100% { transform: translateX(0) scale(1); }
  18% { transform: translateX(-5px) scale(.986); }
  40% { transform: translateX(5px) scale(.986); }
  62% { transform: translateX(-3px) scale(.993); }
  82% { transform: translateX(2px) scale(.997); }
}

/* 0-10 打分 */
.bx-scale { display: flex; gap: 2px; }
.bx-dot {
  width: 21px; height: 21px;
  display: grid; place-items: center;
  border: 1px solid rgba(201, 168, 106, .16);
  border-radius: 2px;
  background: rgba(255, 240, 215, .02);
  font-family: var(--hand);
  font-size: 10px;
  color: rgba(220, 210, 190, .5);
  cursor: pointer;
  transition: background 170ms, color 170ms, transform 140ms;
}
.bx-dot:active { transform: scale(.88); }
.bx-ans.is-a .bx-dot.is-on { background: rgba(143, 178, 238, .9); border-color: var(--a); color: #14131a; }
.bx-ans.is-b .bx-dot.is-on { background: rgba(226, 105, 90, .9); border-color: var(--b); color: #14131a; }

/* 罗盘 */
.bx-dial-ends {
  display: flex;
  justify-content: space-between;
  width: 208px;
  max-width: 100%;
  margin: 0 0 5px;
  font-size: 9px;
  color: rgba(200, 190, 170, .46);
}
.bx-dial {
  position: relative;
  display: inline-block;
  width: 92px;
  height: 92px;
}
.bx-dial-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 240, 215, .09), transparent 62%),
    linear-gradient(180deg, #1d1c24, #131218);
  border: 1px solid rgba(201, 168, 106, .24);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, .08),
    inset 0 -8px 18px rgba(0, 0, 0, .55),
    0 6px 16px rgba(0, 0, 0, .45);
}
.bx-dial-ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: repeating-conic-gradient(from -80deg,
      rgba(201, 168, 106, .5) 0deg 1.1deg,
      transparent 1.1deg 10deg);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 7px), #000 calc(50% - 7px) calc(50% - 3px), transparent calc(50% - 3px));
  mask: radial-gradient(circle, transparent 0 calc(50% - 7px), #000 calc(50% - 7px) calc(50% - 3px), transparent calc(50% - 3px));
  opacity: .5;
  pointer-events: none;
}
.bx-dial-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 106, .75);
  opacity: 0;
  pointer-events: none;
}
.bx-dial.is-snap .bx-dial-ring::after { animation: bxRipple .72s cubic-bezier(.2, .8, .2, 1); }
@keyframes bxRipple {
  0% { opacity: .85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.45); }
}
.bx-dial-needle {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 2px;
  height: 27px;
  margin-left: -1px;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--brass), rgba(201, 168, 106, .25));
  transform-origin: 50% 100%;
  transform: rotate(var(--ang, 0deg));
  transition: transform 140ms cubic-bezier(.2, .8, .2, 1);
  box-shadow: 0 0 8px rgba(201, 168, 106, .45);
}
.bx-dial-val {
  position: absolute;
  left: 0; right: 0; bottom: 13px;
  text-align: center;
  font-family: var(--hand);
  font-size: 11px;
  color: var(--who);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.bx-dial.is-extreme .bx-dial-ring { border-color: rgba(226, 105, 90, .6); box-shadow: inset 0 0 22px rgba(226, 105, 90, .18), 0 6px 16px rgba(0, 0, 0, .45); }
.bx-dial.is-extreme .bx-dial-val { color: var(--who); }
.bx-dial.is-extreme .bx-dial-needle { background: linear-gradient(180deg, #e88a72, rgba(226, 105, 90, .3)); box-shadow: 0 0 12px rgba(226, 105, 90, .7); }
.bx-dial-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: grab;
}
.bx-dial-input:active { cursor: grabbing; }

.bx-old {
  font-family: var(--hand);
  font-size: 11px;
  color: rgba(200, 190, 170, .38);
  text-decoration-color: rgba(226, 105, 90, .6);
}

/* 定级 */
.bx-ladder { position: relative; padding-left: 8px; }
.bx-ladder-rail {
  position: absolute;
  left: 1px; top: 6px; bottom: 6px;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(201, 168, 106, .12), rgba(150, 50, 40, .7));
  pointer-events: none;
}
.bx-lv {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 6px 7px 1px;
  transition: background 180ms, opacity 220ms;
}
.bx-lv[style] { }
.bx-lv.is-below { opacity: .34; }
.bx-lv.is-a { background: linear-gradient(90deg, rgba(143, 178, 238, .09), transparent 70%); }
.bx-lv.is-b { background: linear-gradient(90deg, rgba(226, 105, 90, .09), transparent 70%); }
.bx-lv-no { font-family: "Courier New", monospace; font-size: 10px; color: rgba(201, 168, 106, .48); }
.bx-lv-text { font-size: 11.5px; line-height: 1.5; color: #e2dac8; }
.bx-lv-marks { display: flex; gap: 6px; }
.bx-lv-dot {
  width: 16px; height: 16px;
  border: 1px solid rgba(201, 168, 106, .26);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: all 170ms;
}
.bx-lv-dot.is-a { border-color: rgba(143, 178, 238, .4); }
.bx-lv-dot.is-b { border-color: rgba(226, 105, 90, .4); }
.bx-lv.is-a .bx-lv-dot.is-a { background: var(--a); border-color: var(--a); box-shadow: 0 0 0 3px rgba(143, 178, 238, .12), 0 0 10px rgba(143, 178, 238, .5); }
.bx-lv.is-b .bx-lv-dot.is-b { background: var(--b); border-color: var(--b); box-shadow: 0 0 0 3px rgba(226, 105, 90, .12), 0 0 10px rgba(226, 105, 90, .5); }
.bx-ladder-sum {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 10px 12px;
  border: 1px dashed rgba(201, 168, 106, .26);
  background: rgba(255, 240, 215, .025);
  font-family: var(--hand);
  font-size: 13px;
}
.bx-sum.is-a { color: var(--a); }
.bx-sum.is-b { color: var(--b); }

/* 四选一 */
.bx-q-choice { padding-bottom: 12px; }
.bx-opts { margin-top: 3px; }
.bx-optrow {
  display: grid;
  grid-template-columns: 16px 1fr 18px 18px;
  gap: 6px;
  align-items: center;
  padding: 5px 4px;
  border-radius: 3px;
  transition: background 160ms;
}
.bx-optrow.is-a { background: rgba(143, 178, 238, .07); }
.bx-optrow.is-b:not(.is-a) { background: rgba(226, 105, 90, .07); }
.bx-optrow.is-a.is-b { background: rgba(190, 140, 180, .1); }
.bx-optlabel { font-family: "Courier New", monospace; font-size: 10px; color: rgba(201, 168, 106, .5); }
.bx-opttext { font-size: 11px; line-height: 1.5; color: rgba(226, 218, 200, .82); }
.bx-optrow.is-a .bx-lv-dot.is-a { background: var(--a); border-color: var(--a); box-shadow: 0 0 8px rgba(143, 178, 238, .5); }
.bx-optrow.is-b .bx-lv-dot.is-b { background: var(--b); border-color: var(--b); box-shadow: 0 0 8px rgba(226, 105, 90, .5); }

/* 页脚 */
.bx-paper-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(201, 168, 106, .18);
  font-size: 9px;
  color: rgba(201, 168, 106, .5);
}
.bx-page { white-space: nowrap; }
.bx-progress { flex: 1; text-align: center; font-family: var(--hand); font-size: 11px; }
.bx-submit {
  padding: 10px 26px;
  border: 1px solid rgba(201, 168, 106, .38);
  border-radius: 2px;
  cursor: pointer;
  font-family: "Songti SC", "STSong", serif;
  font-size: 14px;
  letter-spacing: .22em;
  text-indent: .22em;
  color: #1a1820;
  background: linear-gradient(180deg, #e4cd9a, #c9a86a);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform 140ms, filter 160ms, opacity 200ms;
}
.bx-submit:active { transform: translateY(1px); filter: brightness(1.08); }
.bx-submit:disabled { opacity: .28; cursor: default; box-shadow: none; }

/* ---------- 手账报告 ---------- */
.bx-reportview { position: relative; }
.bx-report { padding-top: 30px; overflow: hidden; }
.bx-report.is-sealed::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 46%, rgba(255, 220, 170, .3), transparent 62%);
  animation: bxBloom .95s ease-out forwards;
  pointer-events: none;
  z-index: 20;
}
@keyframes bxBloom {
  0% { opacity: 0; transform: scale(.85); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.25); }
}
.bx-stamp-wrap {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 25;
  opacity: 0;
  transition: opacity 120ms;
}
.bx-report.is-sealed .bx-stamp-wrap { opacity: 1; }
.bx-stamp {
  display: grid; place-items: center;
  width: 66px; height: 66px;
  border: 2px solid rgba(192, 57, 43, .75);
  border-radius: 50%;
  font-family: "Songti SC", "STSong", serif;
  font-size: 15px;
  letter-spacing: .1em;
  text-indent: .1em;
  color: #d0503f;
  opacity: 0;
  transform: rotate(-12deg) scale(1.6);
}
.bx-report.is-sealed .bx-stamp { animation: bxStamp .5s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes bxStamp {
  from { opacity: 0; transform: rotate(-26deg) scale(1.7); }
  to { opacity: .9; transform: rotate(-12deg) scale(1); }
}
.bx-report-head { padding-bottom: 14px; border-bottom: 1px solid rgba(201, 168, 106, .2); }
.bx-report-kicker { margin: 0; font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .22em; color: rgba(201, 168, 106, .66); }
.bx-report-head h2 {
  margin: 8px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 24px; font-weight: 500; letter-spacing: .1em;
  color: #f4ecdc;
}
.bx-report-sub { margin: 6px 0 0; font-size: 11px; color: rgba(200, 190, 170, .55); }
.bx-report-meta {
  display: flex; justify-content: space-between;
  margin-top: 14px;
  font-family: var(--hand);
  font-size: 12px;
  color: rgba(200, 190, 170, .7);
}
.bx-axis-legend { display: flex; gap: 14px; margin-top: 12px; font-size: 9px; letter-spacing: .2em; }
.bx-lg.is-a { color: var(--a); }
.bx-lg.is-b { color: var(--b); }
.bx-axes { margin-top: 6px; }
.bx-axis {
  display: grid;
  grid-template-columns: 1fr 104px 32px;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(201, 168, 106, .07);
}
.bx-axis-label {
  font-size: 10.5px;
  line-height: 1.45;
  color: rgba(226, 218, 200, .78);
}
.bx-axis-line {
  position: relative;
  height: 18px;
  border-radius: 9px;
  background: linear-gradient(90deg,
      rgba(226, 105, 90, .1),
      rgba(220, 210, 190, .05) 50%,
      rgba(143, 178, 238, .1));
  box-shadow: inset 0 0 0 1px rgba(201, 168, 106, .1);
}
.bx-axis-dot {
  position: absolute;
  left: var(--p);
  width: 8px; height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  transition: left 420ms cubic-bezier(.2, .8, .2, 1);
}
.bx-axis-dot.is-a { top: 4px; background: var(--a); box-shadow: 0 0 8px rgba(143, 178, 238, .7); }
.bx-axis-dot.is-b { bottom: 4px; background: var(--b); box-shadow: 0 0 8px rgba(226, 105, 90, .7); }
.bx-axis-verdict { font-family: var(--hand); font-size: 10px; text-align: right; color: rgba(200, 190, 170, .45); }
.bx-axis.is-same .bx-axis-verdict { color: rgba(150, 190, 140, .8); }

.bx-comment-wrap { margin-top: 22px; }
.bx-comment-label {
  display: block;
  margin-bottom: 8px;
  font-family: "Songti SC", "STSong", serif;
  font-size: 13px;
  color: rgba(201, 168, 106, .72);
}
.bx-comment {
  width: 100%;
  box-sizing: border-box;
  min-height: 84px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid rgba(201, 168, 106, .26);
  outline: none;
  resize: vertical;
  background:
    repeating-linear-gradient(0deg, transparent 0 29px, rgba(201, 168, 106, .14) 29px 30px);
  background-position: 0 3px;
  font-family: var(--hand);
  font-size: 17px;
  line-height: 30px;
  color: #efe6d4;
}
.bx-comment::placeholder { color: rgba(200, 190, 170, .28); }

.bx-report-foot { display: flex; gap: 10px; margin-top: 22px; }
.bx-seal-btn {
  flex: 1;
  padding: 13px 16px;
  border: 1px solid rgba(201, 168, 106, .42);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(228, 205, 154, .16), rgba(201, 168, 106, .06));
  cursor: pointer;
  font-family: "Songti SC", "STSong", serif;
  font-size: 14px;
  letter-spacing: .2em;
  text-indent: .2em;
  color: #e8d7ae;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: background 200ms, box-shadow 200ms, transform 140ms;
}
.bx-seal-btn:hover { background: linear-gradient(180deg, rgba(228, 205, 154, .26), rgba(201, 168, 106, .1)); box-shadow: 0 14px 30px rgba(0, 0, 0, .4), 0 0 26px rgba(201, 168, 106, .16), inset 0 1px 0 rgba(255, 255, 255, .18); }
.bx-seal-btn:active { transform: translateY(1px); }

@media (max-width: 360px) {
  .bx-sheets { gap: 14px 10px; }
  .bx-sheet { min-height: 122px; padding: 13px 10px 10px; }
  .bx-sheet-title { font-size: 16px; }
  .bx-paper, .bx-report { padding: 20px 14px 14px 30px; }
  .bx-dot { width: 19px; height: 19px; }
  .bx-dial { width: 82px; height: 82px; }
  .bx-axis { grid-template-columns: 1fr 84px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .bx-yn.is-fresh .bx-draw path,
  .bx-q.is-reject,
  .bx-report.is-sealed .bx-stamp,
  .bx-report.is-sealed::after,
  .bx-dial.is-snap .bx-dial-ring::after { animation: none; }
  .bx-yn.is-fresh .bx-draw path { stroke-dashoffset: 0; }
  .bx-report.is-sealed .bx-stamp { opacity: .9; transform: rotate(-12deg); }
}

/* v0.27 报告改版：先给结论，再给明细 */
.bx-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
  padding: 16px 0;
  border-top: 1px solid rgba(201, 168, 106, .16);
  border-bottom: 1px solid rgba(201, 168, 106, .16);
}
.bx-stat { text-align: center; }
.bx-stat b {
  display: block;
  font-family: "Songti SC", "STSong", serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  color: #efe6d4;
}
.bx-stat b em { font-size: 16px; font-style: normal; margin-left: 1px; opacity: .65; }
.bx-stat i {
  display: block;
  margin-top: 7px;
  font-size: 9px;
  font-style: normal;
  letter-spacing: .2em;
  text-indent: .2em;
  color: rgba(200, 190, 170, .42);
}
.bx-stat.is-rate b { color: var(--brass); }

.bx-h3 {
  margin: 22px 0 10px;
  font-family: "Songti SC", "STSong", serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  color: rgba(201, 168, 106, .78);
}
.bx-topcard {
  padding: 12px 0;
  border-bottom: 1px dashed rgba(201, 168, 106, .12);
}
.bx-topq {
  margin: 0 0 9px;
  font-size: 12px;
  line-height: 1.55;
  color: #e7dfcd;
}
.bx-top-axis {
  position: relative;
  height: 24px;
  margin: 0 8px;
}
.bx-top-axis::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(226, 105, 90, .28),
      rgba(220, 210, 190, .12) 50%,
      rgba(143, 178, 238, .28));
}
.bx-tdot {
  position: absolute;
  top: 50%;
  left: var(--p);
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.bx-tdot.is-a {
  width: 11px; height: 11px;
  background: var(--a);
  box-shadow: 0 0 10px rgba(143, 178, 238, .7);
}
.bx-tdot.is-b {
  width: 15px; height: 15px;
  border: 2px solid var(--b);
  background: transparent;
  box-shadow: 0 0 10px rgba(226, 105, 90, .45);
  z-index: 2;
}
.bx-topvals {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--hand);
  font-size: 11px;
}
.bx-topvals .is-a { color: var(--a); }
.bx-topvals .is-b { color: var(--b); }
.bx-empty {
  margin: 4px 0 0;
  font-family: var(--hand);
  font-size: 12px;
  color: rgba(200, 190, 170, .42);
}

.bx-allrows { margin-top: 2px; }
.bx-allrow {
  display: grid;
  grid-template-columns: 1fr 62px 62px 14px;
  gap: 6px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(201, 168, 106, .06);
  font-size: 10.5px;
}
.bx-allrow:not(.is-same) { background: rgba(226, 105, 90, .025); }
.bx-ar-q { line-height: 1.42; color: rgba(226, 218, 200, .7); }
.bx-ar-a { font-family: var(--hand); font-size: 11px; color: var(--a); }
.bx-ar-b { font-family: var(--hand); font-size: 11px; color: var(--b); }
.bx-ar-f { font-size: 10px; text-align: center; color: rgba(200, 190, 170, .26); }
.bx-allrow.is-same .bx-ar-f { color: rgba(150, 190, 140, .9); }

/* =========================================================
   v0.28 · 双人猜词（你说我猜）
   ========================================================= */
.gw {
  --gw-bg: #1b1814;
  --gw-bg2: #0f0d0a;
  --gw-accent: #e8a35c;
  --gw-accent-2: #f2c894;
  --gw-ink: #f6efe2;
  --gw-dim: rgba(240, 230, 214, .5);
  width: 100%;
  color: var(--gw-ink);
  min-height: calc(100dvh - 110px);
}
.gw[data-mode="night"] {
  --gw-bg: #1a0e16;
  --gw-bg2: #0b060a;
  --gw-accent: #d8556a;
  --gw-accent-2: #f2a0ae;
}

/* ---- 规则 ---- */
.gw-intro { padding: 10px 0 20px; text-align: center; }
.gw-eyebrow { margin: 0; font-size: 8px; letter-spacing: .36em; color: rgba(232, 163, 92, .55); }
.gw[data-mode="night"] .gw-eyebrow { color: rgba(216, 85, 106, .6); }
.gw-title {
  margin: 10px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--gw-ink);
  text-shadow: 0 0 34px rgba(232, 163, 92, .22);
}
.gw[data-mode="night"] .gw-title { text-shadow: 0 0 34px rgba(216, 85, 106, .3); }
.gw-lede { margin: 12px 0 0; font-size: 12px; line-height: 1.8; color: var(--gw-dim); }

.gw-rules {
  margin: 24px 0 0;
  padding: 16px 18px;
  text-align: left;
  border: 1px solid rgba(232, 163, 92, .16);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 240, 215, .035), transparent);
}
.gw[data-mode="night"] .gw-rules { border-color: rgba(216, 85, 106, .2); }
.gw-rules p {
  display: flex;
  gap: 10px;
  margin: 0 0 11px;
  font-size: 11.5px;
  line-height: 1.65;
  color: rgba(240, 230, 214, .78);
}
.gw-rules p:last-child { margin-bottom: 0; }
.gw-rules b {
  flex: none;
  width: 20px;
  font-family: "Courier New", monospace;
  font-size: 10px;
  color: rgba(232, 163, 92, .75);
  padding-top: 2px;
}
.gw-cta {
  width: 100%;
  margin-top: 22px;
  padding: 15px 20px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Songti SC", "STSong", serif;
  font-size: 16px;
  letter-spacing: .24em;
  text-indent: .24em;
  color: #211a12;
  background: linear-gradient(180deg, var(--gw-accent-2), var(--gw-accent));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform 140ms, filter 160ms;
}
.gw-cta:active { transform: translateY(1px); filter: brightness(1.06); }
.gw-foot { margin: 14px 0 0; font-size: 10px; color: rgba(240, 230, 214, .3); }

/* ---- 步骤页 ---- */
.gw-step { padding: 6px 0 20px; text-align: center; }
.gw-back {
  display: block;
  margin: 0 0 14px;
  padding: 6px 2px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(240, 230, 214, .5);
}
.gw-back:hover { color: var(--gw-ink); }
.gw-step-no {
  margin: 0;
  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: .3em;
  color: rgba(232, 163, 92, .6);
}
.gw-step-title {
  margin: 10px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: .1em;
}

/* 模式 */
.gw-modes { display: grid; gap: 14px; margin-top: 24px; }
.gw-mode {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 14px;
  padding: 20px 18px;
  text-align: left;
  border: 1px solid rgba(232, 163, 92, .2);
  border-radius: 14px;
  cursor: pointer;
  overflow: hidden;
  color: var(--gw-ink);
  background: linear-gradient(140deg, rgba(232, 163, 92, .1), rgba(255, 255, 255, .015));
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), border-color 220ms, box-shadow 220ms;
}
.gw-mode.is-night {
  border-color: rgba(216, 85, 106, .24);
  background: linear-gradient(140deg, rgba(216, 85, 106, .13), rgba(255, 255, 255, .012));
}
.gw-mode:active { transform: scale(.985); }
@media (hover: hover) {
  .gw-mode:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(0, 0, 0, .45); border-color: rgba(232, 163, 92, .45); }
  .gw-mode.is-night:hover { border-color: rgba(216, 85, 106, .5); }
}
.gw-mode-glow {
  position: absolute;
  right: -40px; top: -50px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 163, 92, .22), transparent 68%);
  filter: blur(10px);
  pointer-events: none;
}
.gw-mode.is-night .gw-mode-glow { background: radial-gradient(circle, rgba(216, 85, 106, .26), transparent 68%); }
.gw-mode-icon {
  grid-row: span 2;
  align-self: center;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(232, 163, 92, .32);
  font-size: 20px;
  color: var(--gw-accent-2);
}
.gw-mode.is-night .gw-mode-icon { border-color: rgba(216, 85, 106, .38); color: var(--gw-accent-2); }
.gw-mode-name { font-family: "Songti SC", "STSong", serif; font-size: 20px; letter-spacing: .1em; }
.gw-mode-desc { font-size: 10.5px; color: var(--gw-dim); letter-spacing: .04em; }
.gw-mode-tag {
  position: absolute;
  right: 16px; top: 16px;
  padding: 2px 7px;
  border: 1px solid rgba(216, 85, 106, .55);
  border-radius: 3px;
  font-size: 8px;
  letter-spacing: .1em;
  color: #f2a0ae;
}

/* 主题 */
.gw-topics { display: grid; gap: 11px; margin-top: 22px; }
.gw-topic {
  display: grid;
  gap: 3px;
  padding: 15px 16px;
  text-align: left;
  border: 1px solid rgba(240, 230, 214, .12);
  border-radius: 11px;
  cursor: pointer;
  color: var(--gw-ink);
  background: rgba(255, 255, 255, .02);
  transition: border-color 200ms, background 200ms, transform 180ms;
}
.gw-topic.is-on {
  border-color: rgba(232, 163, 92, .6);
  background: rgba(232, 163, 92, .09);
  box-shadow: 0 0 0 1px rgba(232, 163, 92, .16), 0 8px 22px rgba(0, 0, 0, .3);
}
.gw[data-mode="night"] .gw-topic.is-on {
  border-color: rgba(216, 85, 106, .6);
  background: rgba(216, 85, 106, .1);
  box-shadow: 0 0 0 1px rgba(216, 85, 106, .16), 0 8px 22px rgba(0, 0, 0, .3);
}
.gw-topic:active { transform: scale(.99); }
.gw-topic-name { font-family: "Songti SC", "STSong", serif; font-size: 17px; letter-spacing: .08em; }
.gw-topic-desc { font-size: 10.5px; color: var(--gw-dim); }
.gw-topic-count { margin-top: 3px; font-size: 9px; letter-spacing: .14em; color: rgba(240, 230, 214, .3); }

.gw-label { margin: 22px 0 10px; font-size: 10px; letter-spacing: .24em; color: var(--gw-dim); }
.gw-times { display: flex; gap: 9px; }
.gw-time {
  flex: 1;
  padding: 11px 0;
  border: 1px solid rgba(240, 230, 214, .14);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(240, 230, 214, .6);
  transition: all 180ms;
}
.gw-time.is-on {
  border-color: var(--gw-accent);
  color: #1c1610;
  background: var(--gw-accent);
}

/* 谁先 */
.gw-ready-hint { margin: 10px 0 0; font-size: 11px; color: var(--gw-dim); }
.gw-age {
  margin: 0 0 18px;
  padding: 9px 12px;
  border: 1px dashed rgba(216, 85, 106, .3);
  border-radius: 8px;
  font-size: 10px;
  line-height: 1.7;
  color: rgba(242, 160, 174, .8);
}
.gw-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 30px; }
.gw-pick-btn {
  display: grid;
  gap: 6px;
  place-items: center;
  padding: 28px 0;
  border: 1px solid rgba(240, 230, 214, .14);
  border-radius: 16px;
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
  color: var(--gw-ink);
  transition: transform 180ms, border-color 200ms, background 200ms;
}
.gw-pick-btn b { font-family: "Songti SC", serif; font-size: 34px; font-weight: 500; }
.gw-pick-btn span { font-size: 10px; letter-spacing: .16em; color: var(--gw-dim); }
.gw-pick-btn.is-a { border-color: rgba(143, 178, 238, .28); }
.gw-pick-btn.is-b { border-color: rgba(226, 105, 90, .28); }
.gw-pick-btn:active { transform: scale(.97); }
@media (hover: hover) {
  .gw-pick-btn.is-a:hover { background: rgba(143, 178, 238, .09); border-color: rgba(143, 178, 238, .55); }
  .gw-pick-btn.is-b:hover { background: rgba(226, 105, 90, .09); border-color: rgba(226, 105, 90, .55); }
}

/* ---- 游戏 ---- */
.gw-play {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 110px);
  padding: 2px 0 10px;
}
.gw-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 2px 8px;
}
.gw-turn { font-size: 10.5px; letter-spacing: .1em; color: var(--gw-dim); }
.gw-turn b { color: var(--gw-accent-2); font-size: 13px; }
.gw-clock {
  font-family: "Courier New", monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gw-ink);
  transition: color 200ms;
}
.gw-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(240, 230, 214, .1);
  overflow: hidden;
}
.gw-bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gw-accent-2), var(--gw-accent));
  transition: width 120ms linear;
}
.gw-play.is-urgent .gw-bar i { background: linear-gradient(90deg, #ff8a6a, #e0402f); }
.gw-play.is-urgent .gw-clock { color: #ff7a63; animation: gwPulse .7s ease-in-out infinite; }
@keyframes gwPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(1.06); }
}

.gw-stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 10px 0;
  perspective: 900px;
}
.gw-card {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 460px;
  min-height: 220px;
  padding: 26px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 240, 215, .09);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 240, 215, .07), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .008));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform 240ms cubic-bezier(.3, 0, .4, 1), opacity 220ms, filter 240ms;
}
.gw-word {
  font-family: "Songti SC", "STSong", serif;
  font-size: clamp(46px, 15vw, 86px);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.15;
  text-align: center;
  color: #fff8ea;
  text-shadow: 0 0 40px rgba(232, 163, 92, .25);
  word-break: break-all;
}
.gw[data-mode="night"] .gw-word { text-shadow: 0 0 40px rgba(216, 85, 106, .3); }

.gw-card.is-in { animation: gwIn 400ms cubic-bezier(.2, .8, .2, 1); }
@keyframes gwIn {
  from { opacity: 0; transform: translateY(26px) rotateX(12deg) scale(.92); }
  to { opacity: 1; transform: none; }
}
.gw-card.is-hit {
  transform: translateX(70%) rotate(8deg) scale(.9);
  opacity: 0;
  filter: brightness(1.5);
}
.gw-card.is-hit::after {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 24px;
  background: radial-gradient(circle, rgba(120, 240, 160, .3), transparent 66%);
  animation: gwFlash 320ms ease-out forwards;
}
.gw-card.is-skip {
  transform: translateY(-60%) scale(.88);
  opacity: 0;
  filter: grayscale(1);
}
@keyframes gwFlash {
  from { opacity: 1; }
  to { opacity: 0; }
}

.gw-mid { display: grid; place-items: center; padding: 4px 0 10px; }
.gw-hit-count { font-size: 10.5px; letter-spacing: .14em; color: var(--gw-dim); }
.gw-hit-count b { font-family: "Courier New", monospace; font-size: 15px; color: var(--gw-accent-2); }
.gw-hit-count.is-pop b { animation: gwPop 320ms cubic-bezier(.2, .8, .2, 1); display: inline-block; }
@keyframes gwPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

.gw-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 12px; }
.gw-skip,
.gw-hit {
  height: 66px;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Songti SC", "STSong", serif;
  font-size: 16px;
  letter-spacing: .2em;
  text-indent: .2em;
  transition: transform 130ms, filter 160ms;
}
.gw-skip {
  border: 1px solid rgba(240, 230, 214, .18);
  background: rgba(255, 255, 255, .03);
  color: rgba(240, 230, 214, .62);
}
.gw-hit {
  border: 0;
  color: #1e1710;
  background: linear-gradient(180deg, var(--gw-accent-2), var(--gw-accent));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.gw-skip:active,
.gw-hit:active { transform: scale(.96); }

.gw-play.is-over .gw-stage { animation: gwOver 600ms ease-out; }
@keyframes gwOver {
  0% { filter: brightness(1); }
  20% { filter: brightness(2.6); }
  100% { filter: brightness(1); }
}

/* 换人 */
.gw-handover-box { padding-top: 40px; }
.gw-handover-score {
  margin: 26px 0 0;
  font-family: var(--hand, "Songti SC", serif);
  font-size: 15px;
  color: var(--gw-dim);
}
.gw-handover-score b {
  font-size: 42px;
  color: var(--gw-accent-2);
  margin-right: 4px;
}
.gw-handover-hint { margin: 16px 0 0; font-size: 11.5px; line-height: 1.8; color: var(--gw-dim); }
.gw-handover-hint b { color: var(--gw-ink); }

/* 报告 */
.gw-report { padding-top: 30px; }
.gw-report-title {
  margin: 14px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: .08em;
}
.gw-versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
}
.gw-side { display: grid; gap: 3px; place-items: center; padding: 18px 0; border-radius: 16px; border: 1px solid transparent; }
.gw-side.is-win { border-color: rgba(232, 163, 92, .35); background: rgba(232, 163, 92, .07); }
.gw-side.is-a .gw-side-name { color: #8fb2ee; }
.gw-side.is-b .gw-side-name { color: #e2695a; }
.gw-side-name { font-family: "Songti SC", serif; font-size: 16px; letter-spacing: .1em; }
.gw-side-score { font-family: "Songti SC", serif; font-size: 54px; line-height: 1; color: var(--gw-ink); }
.gw-side-label { font-size: 9px; letter-spacing: .2em; color: var(--gw-dim); }
.gw-vs { font-family: "Courier New", monospace; font-size: 11px; letter-spacing: .1em; color: rgba(240, 230, 214, .3); }

.gw-bars { margin-top: 22px; display: grid; gap: 9px; }
.gw-barline { height: 7px; border-radius: 4px; background: rgba(240, 230, 214, .07); overflow: hidden; }
.gw-barline i { display: block; height: 100%; border-radius: 4px; transition: width 700ms cubic-bezier(.2, .8, .2, 1); }
.gw-barline.is-a i { background: linear-gradient(90deg, #6f96d8, #a8c4f2); }
.gw-barline.is-b i { background: linear-gradient(90deg, #c04d3f, #f09280); }

.gw-report-note { margin: 20px 0 0; font-size: 12px; color: rgba(240, 230, 214, .55); }
.gw-report-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 26px; }
.gw-report-actions .gw-cta { margin-top: 0; }
.gw-ghost {
  padding: 15px 20px;
  border: 1px solid rgba(240, 230, 214, .18);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: "Songti SC", "STSong", serif;
  font-size: 14px;
  letter-spacing: .16em;
  color: rgba(240, 230, 214, .68);
  transition: background 180ms, border-color 180ms;
}
.gw-ghost:hover { background: rgba(255, 255, 255, .04); border-color: rgba(240, 230, 214, .32); }

/* 横屏大字报 */
@media (orientation: landscape) and (max-height: 520px) {
  .gw-play { min-height: calc(100dvh - 78px); }
  .gw-card { min-height: 150px; padding: 14px 18px; }
  .gw-word { font-size: clamp(44px, 9vw, 110px); }
  .gw-actions { grid-template-columns: 1fr 1.4fr; }
  .gw-skip, .gw-hit { height: 54px; font-size: 15px; }
  .gw-mid { padding: 2px 0 6px; }
}

/* 横屏：猜词全屏，字更大 */
@media (orientation: landscape) and (max-height: 560px) {
  .game-view[data-active-game="word-guess"] {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0;
    margin: 0;
    padding-left: 18px;
    padding-right: 18px;
  }
  .game-view[data-active-game="word-guess"] .game-view-body { padding-top: 4px; }
  .gw-play { min-height: calc(100dvh - 96px); }
  .gw-word { font-size: clamp(52px, 11vw, 130px); }
  .gw-card { max-width: none; min-height: 168px; }
}

/* v0.28.1 日常/深夜氛围拉开 */
.gw-topic-age {
  margin-left: 7px;
  padding: 1px 5px;
  border: 1px solid rgba(216, 85, 106, .55);
  border-radius: 3px;
  font-size: 8px;
  font-style: normal;
  letter-spacing: .08em;
  color: #f2a0ae;
  vertical-align: 2px;
}
.gw-play { border-radius: 18px; }
.gw[data-mode="day"] .gw-play {
  background: radial-gradient(120% 68% at 50% 42%, rgba(150, 92, 28, .2), transparent 68%);
}
.gw[data-mode="night"] .gw-play {
  background: radial-gradient(120% 68% at 50% 42%, rgba(122, 18, 44, .34), transparent 68%);
}
.gw[data-mode="night"] .gw-card {
  border-color: rgba(216, 85, 106, .2);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(216, 85, 106, .13), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .008));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 40px rgba(216, 85, 106, .1);
}
.gw[data-mode="day"] .gw-card {
  border-color: rgba(232, 163, 92, .16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 40px rgba(232, 163, 92, .08);
}

/* =========================================================
   v0.29 · 身份交换剧场（丝绒 · 金）
   ========================================================= */
.th {
  --velvet: #2a0c12;
  --velvet-2: #460f18;
  --gold: #d4af5a;
  --gold-2: #f0d79a;
  --ivory: #f3e8d8;
  --dim: rgba(243, 232, 216, .5);
  width: 100%;
  color: var(--ivory);
  padding-bottom: 24px;
}

/* ---- 规则 ---- */
.th-intro { text-align: center; padding: 8px 0 20px; }
.th-eyebrow { margin: 0; font-size: 8px; letter-spacing: .38em; color: rgba(212, 175, 90, .6); }
.th-title {
  margin: 12px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: .14em;
  color: #f7ecdb;
  text-shadow: 0 0 36px rgba(212, 175, 90, .3);
}
.th-sub { margin: 12px auto 0; max-width: 300px; font-size: 11.5px; line-height: 1.85; color: var(--dim); }
.th-rules {
  margin: 24px 0 0;
  padding: 20px 22px 20px 40px;
  text-align: left;
  border: 1px solid rgba(212, 175, 90, .18);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(212, 175, 90, .05), transparent);
  counter-reset: r;
  list-style: none;
}
.th-rules li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 22px;
  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(243, 232, 216, .78);
}
.th-rules li:last-child { margin-bottom: 0; }
.th-rules li::before {
  counter-increment: r;
  content: counter(r, decimal-leading-zero);
  position: absolute;
  left: 0; top: 2px;
  font-family: "Courier New", monospace;
  font-size: 9px;
  color: rgba(212, 175, 90, .75);
}
.th-cta {
  width: 100%;
  margin-top: 22px;
  padding: 15px 20px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Songti SC", "STSong", serif;
  font-size: 16px;
  letter-spacing: .24em;
  text-indent: .24em;
  color: #2a1210;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  box-shadow: 0 14px 32px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform 140ms, filter 160ms;
}
.th-cta:active { transform: translateY(1px); filter: brightness(1.06); }
.th-back {
  display: block;
  margin: 0 0 14px;
  padding: 6px 2px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(243, 232, 216, .5);
}
.th-step-no {
  margin: 0;
  text-align: center;
  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: .3em;
  color: rgba(212, 175, 90, .65);
}

/* ---- 海报墙 ---- */
.th-gallery { padding: 4px 0 20px; }
.th-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 11px;
  margin-top: 18px;
}
.th-poster {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 118px;
  padding: 14px 12px 12px;
  text-align: left;
  border: 1px solid rgba(212, 175, 90, .2);
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
  color: var(--ivory);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(212, 175, 90, .12), transparent 60%),
    linear-gradient(168deg, var(--velvet-2), var(--velvet));
  box-shadow: 0 12px 26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 260ms cubic-bezier(.2, .8, .2, 1), box-shadow 260ms, border-color 260ms;
}
@media (hover: hover) {
  .th-poster:hover {
    transform: rotate(0deg) translateY(-4px);
    border-color: rgba(212, 175, 90, .5);
    box-shadow: 0 22px 42px rgba(0, 0, 0, .55), 0 0 24px rgba(212, 175, 90, .14);
    z-index: 2;
  }
}
.th-poster:active { transform: scale(.98); }
.th-poster-glyph {
  position: absolute;
  right: 8px; bottom: 4px;
  font-size: 38px;
  opacity: .14;
  pointer-events: none;
  filter: grayscale(.3);
}
.th-poster-no { font-family: "Courier New", monospace; font-size: 8.5px; letter-spacing: .2em; color: rgba(212, 175, 90, .7); }
.th-poster-title {
  font-family: "Songti SC", "STSong", serif;
  font-size: 15.5px;
  line-height: 1.3;
  letter-spacing: .05em;
  color: #f6ecdb;
}
.th-poster-pair { margin-top: auto; font-size: 9px; line-height: 1.45; color: rgba(243, 232, 216, .42); }

/* ---- 剧本页 ---- */
.th-sceneview { padding-bottom: 20px; }
.th-script-page {
  padding: 26px 22px 24px;
  border-radius: 4px;
  border: 1px solid rgba(212, 175, 90, .2);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.05'/></svg>"),
    linear-gradient(180deg, #2b1016, #1c0a0e);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.th-script-no { margin: 0; text-align: center; font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .3em; color: rgba(212, 175, 90, .65); }
.th-script-title {
  margin: 10px 0 0;
  text-align: center;
  font-family: "Songti SC", "STSong", serif;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: .1em;
  color: #f7ecdb;
}
.th-script-pair { margin: 8px 0 0; text-align: center; font-size: 10px; letter-spacing: .1em; color: rgba(243, 232, 216, .42); }
.th-scene-body {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(212, 175, 90, .16);
}
.th-scene-body p {
  margin: 0 0 11px;
  font-family: "Songti SC", "STSong", serif;
  font-size: 13px;
  line-height: 1.95;
  color: rgba(243, 232, 216, .82);
  text-indent: 2em;
}
.th-scene-body p:last-child { margin-bottom: 0; }
.th-cta-in { margin-top: 24px; }

/* ---- 选角色 ---- */
.th-pickview { padding: 12px 0 20px; text-align: center; }
.th-pick-title {
  margin: 12px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .08em;
}
.th-pick-sub { margin: 8px 0 0; font-size: 10.5px; color: var(--dim); }
.th-roles { display: grid; gap: 14px; margin-top: 26px; }
.th-rolecard {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 20px 18px 18px 58px;
  text-align: left;
  border: 1px solid rgba(212, 175, 90, .22);
  border-radius: 14px;
  cursor: pointer;
  color: var(--ivory);
  background: linear-gradient(140deg, rgba(212, 175, 90, .08), rgba(255, 255, 255, .015));
  transition: transform 200ms, border-color 220ms, box-shadow 220ms;
}
.th-rolecard:active { transform: scale(.985); }
@media (hover: hover) {
  .th-rolecard:hover { transform: translateY(-3px); border-color: rgba(212, 175, 90, .5); box-shadow: 0 20px 40px rgba(0, 0, 0, .45); }
}
.th-rolekey {
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 90, .5);
  font-family: "Songti SC", serif;
  font-size: 14px;
  color: var(--gold-2);
}
.th-rolename { font-family: "Songti SC", "STSong", serif; font-size: 19px; letter-spacing: .06em; }
.th-roledesc { font-size: 10px; line-height: 1.6; color: rgba(243, 232, 216, .45); }

/* ---- 私密页 ---- */
.th-privateview { padding: 4px 0 22px; }
.th-who { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.th-who-badge {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 90, .55);
  font-family: "Songti SC", serif;
  font-size: 13px;
  color: var(--gold-2);
}
.th-who-text { font-size: 10px; letter-spacing: .06em; color: rgba(243, 232, 216, .48); }
.th-role-name {
  margin: 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: .08em;
  color: #f8eeda;
  text-shadow: 0 0 30px rgba(212, 175, 90, .25);
}
.th-role-stance { margin: 12px 0 0; font-size: 11.5px; line-height: 1.85; color: rgba(243, 232, 216, .62); }

.th-block { margin-top: 24px; }
.th-block-label {
  display: block;
  margin-bottom: 9px;
  font-family: "Courier New", monospace;
  font-size: 8.5px;
  letter-spacing: .26em;
  color: rgba(212, 175, 90, .62);
}
.th-block-line {
  padding: 18px 18px 16px;
  border-left: 2px solid rgba(212, 175, 90, .55);
  background: linear-gradient(90deg, rgba(212, 175, 90, .07), transparent 70%);
}
.th-line {
  margin: 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 18px;
  line-height: 1.8;
  color: #f8eeda;
}

/* 蜡封 */
.th-task { margin-top: 24px; }
.th-seal {
  position: relative;
  display: grid;
  place-items: center;
  gap: 6px;
  width: 100%;
  padding: 26px 18px;
  border: 1px dashed rgba(212, 175, 90, .38);
  border-radius: 14px;
  background: radial-gradient(circle at 50% 30%, rgba(212, 175, 90, .1), rgba(60, 12, 18, .5) 70%);
  cursor: pointer;
  color: var(--gold-2);
  transition: transform 180ms, border-color 200ms, opacity 260ms;
}
.th-seal:active { transform: scale(.985); }
.th-seal-ring {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(212, 175, 90, .6);
  box-shadow: 0 0 22px rgba(212, 175, 90, .18), inset 0 0 14px rgba(212, 175, 90, .12);
}
.th-seal-ring::after {
  content: "封";
  font-family: "Songti SC", serif;
  font-size: 18px;
  color: rgba(212, 175, 90, .85);
}
.th-seal-text {
  font-family: "Songti SC", "STSong", serif;
  font-size: 15px;
  letter-spacing: .2em;
  text-indent: .2em;
}
.th-seal-hint { font-size: 9px; letter-spacing: .12em; color: rgba(243, 232, 216, .35); }
.th-seal.is-open { display: none; }
.th-task-body {
  display: none;
  padding: 18px;
  border: 1px solid rgba(212, 175, 90, .4);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(212, 175, 90, .1), rgba(212, 175, 90, .03));
  box-shadow: 0 0 30px rgba(212, 175, 90, .1);
}
.th-task.is-open .th-task-body { display: block; animation: thUnseal 460ms cubic-bezier(.2, .8, .2, 1); }
.th-task-body p {
  margin: 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 16px;
  line-height: 1.8;
  color: #f8eeda;
}
@keyframes thUnseal {
  from { opacity: 0; transform: translateY(8px) scale(.97); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}

.th-hints { margin-top: 24px; }
.th-hints ul { margin: 0; padding: 0; list-style: none; }
.th-hints li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 16px;
  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(243, 232, 216, .6);
}
.th-hints li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: rgba(212, 175, 90, .5);
}

/* ---- 交接 ---- */
.th-handover { padding: 60px 0 20px; text-align: center; }
.th-handover-eye { margin: 0; font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .4em; color: rgba(212, 175, 90, .55); }
.th-handover-title {
  margin: 16px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: .1em;
}
.th-handover-sub { margin: 14px 0 0; font-size: 11.5px; line-height: 1.8; color: var(--dim); }

/* ---- 演出中 ---- */
.th-stageview { padding: 16px 0 20px; text-align: center; }
.th-clockbox { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.th-clock {
  font-family: "Courier New", monospace;
  font-size: 46px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #f8eeda;
}
.th-stageview.is-urgent .th-clock { color: #ff8368; animation: thPulse .8s ease-in-out infinite; }
@keyframes thPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
.th-playbtn {
  padding: 9px 20px;
  border: 1px solid rgba(212, 175, 90, .4);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--gold-2);
  transition: background 180ms;
}
.th-playbtn:hover { background: rgba(212, 175, 90, .1); }
.th-stage-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 26px; }
.th-stage-role {
  display: grid;
  gap: 5px;
  place-items: center;
  padding: 18px 10px;
  border-radius: 14px;
  border: 1px solid rgba(243, 232, 216, .1);
  background: rgba(255, 255, 255, .02);
}
.th-stage-role b { font-family: "Songti SC", serif; font-size: 22px; font-weight: 500; }
.th-stage-role.is-a b { color: #8fb2ee; }
.th-stage-role.is-b b { color: #e2695a; }
.th-stage-role span { font-size: 10px; letter-spacing: .06em; color: rgba(243, 232, 216, .55); }
.th-stage-hint { margin: 24px 0 0; font-size: 11px; line-height: 1.85; color: var(--dim); }
.th-revealbox { margin-top: 32px; }

/* ---- 揭晓 ---- */
.th-revealview { padding: 16px 0 20px; text-align: center; }
.th-reveal-title {
  margin: 14px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .08em;
}
.th-revealcards { display: grid; gap: 13px; margin-top: 24px; }
.th-revealcard {
  padding: 18px;
  text-align: left;
  border-radius: 14px;
  border: 1px solid rgba(243, 232, 216, .12);
  background: rgba(255, 255, 255, .025);
  animation: thCardIn 520ms cubic-bezier(.2, .8, .2, 1) both;
}
.th-revealcard.is-b { animation-delay: 160ms; }
@keyframes thCardIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.th-reveal-who { font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .18em; }
.th-revealcard.is-a .th-reveal-who { color: #8fb2ee; }
.th-revealcard.is-b .th-reveal-who { color: #e2695a; }
.th-revealcard p {
  margin: 9px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 15px;
  line-height: 1.8;
  color: #f6ecdb;
}
.th-reveal-note { margin: 22px 0 0; font-size: 11px; color: var(--dim); }
.th-reveal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 26px; }
.th-reveal-actions .th-cta { margin-top: 0; }
.th-ghost {
  padding: 15px 20px;
  border: 1px solid rgba(243, 232, 216, .16);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: "Songti SC", "STSong", serif;
  font-size: 14px;
  letter-spacing: .14em;
  color: rgba(243, 232, 216, .65);
  transition: background 180ms;
}
.th-ghost:hover { background: rgba(255, 255, 255, .04); }

@media (max-width: 360px) {
  .th-wall { gap: 11px 9px; }
  .th-poster { min-height: 110px; padding: 12px 10px 10px; }
  .th-poster-title { font-size: 14.5px; }
  .th-role-name { font-size: 26px; }
  .th-clock { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .th-task.is-open .th-task-body,
  .th-revealcard,
  .th-stageview.is-urgent .th-clock { animation: none; }
}

/* v0.29.1 剧场底色 */
.th {
  border-radius: 18px;
  background:
    radial-gradient(120% 52% at 50% 0%, rgba(78, 16, 26, .5), transparent 72%),
    radial-gradient(90% 40% at 50% 100%, rgba(60, 12, 20, .35), transparent 70%);
}

/* =========================================================
   v0.30 · 情侣红旗绿旗
   ========================================================= */
.fg {
  --green: #4f9f72;
  --maybe: #c9a24a;
  --red: #c0503f;
  --ink: #f2ece0;
  --dim: rgba(232, 226, 212, .5);
  width: 100%;
  padding: 0 0 24px;
  color: var(--ink);
  border-radius: 18px;
  background:
    radial-gradient(110% 50% at 50% 0%, rgba(60, 90, 72, .28), transparent 70%),
    radial-gradient(90% 40% at 50% 100%, rgba(40, 60, 50, .22), transparent 70%);
}
.fg[data-mode="night"] {
  background:
    radial-gradient(110% 50% at 50% 0%, rgba(96, 30, 30, .34), transparent 70%),
    radial-gradient(90% 40% at 50% 100%, rgba(70, 20, 24, .26), transparent 70%);
}

/* ---- 规则 ---- */
.fg-intro { text-align: center; padding: 10px 0 20px; }
.fg-trio { display: flex; justify-content: center; gap: 9px; margin-bottom: 18px; }
.fg-chip { width: 9px; height: 9px; border-radius: 50%; }
.fg-chip.is-green, .fg-legend i.is-green { background: var(--green); }
.fg-chip.is-maybe, .fg-legend i.is-maybe { background: var(--maybe); }
.fg-chip.is-red, .fg-legend i.is-red { background: var(--red); }
.fg-eyebrow { margin: 0; font-size: 8px; letter-spacing: .36em; color: rgba(232, 226, 212, .38); }
.fg-title {
  margin: 10px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: .12em;
  color: #f6f0e4;
}
.fg-lede { margin: 12px auto 0; max-width: 300px; font-size: 12px; line-height: 1.85; color: var(--dim); }
.fg-legend {
  margin: 24px 0 0;
  display: grid;
  gap: 10px;
  text-align: left;
  padding: 16px 18px;
  border: 1px solid rgba(232, 226, 212, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
}
.fg-legend div { display: grid; grid-template-columns: 8px 46px 1fr; align-items: center; gap: 9px; }
.fg-legend i { width: 8px; height: 8px; border-radius: 50%; }
.fg-legend b { font-size: 11.5px; letter-spacing: .08em; }
.fg-legend span { font-size: 10.5px; color: rgba(232, 226, 212, .45); }
.fg-note { margin: 18px auto 0; max-width: 300px; font-size: 10.5px; line-height: 1.85; color: rgba(232, 226, 212, .36); }
.fg-cta {
  width: 100%;
  margin-top: 24px;
  padding: 15px 20px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Songti SC", "STSong", serif;
  font-size: 16px;
  letter-spacing: .24em;
  text-indent: .24em;
  color: #18211c;
  background: linear-gradient(180deg, #dfe9d6, #a9c4a4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform 140ms, filter 160ms;
}
.fg[data-mode="night"] .fg-cta { color: #24100e; background: linear-gradient(180deg, #efb9a6, #c97f68); }
.fg-cta:active { transform: translateY(1px); filter: brightness(1.06); }

/* ---- 模式 ---- */
.fg-step { padding: 6px 0 20px; text-align: center; }
.fg-back {
  display: block;
  margin: 0 0 14px;
  padding: 6px 2px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(232, 226, 212, .45);
}
.fg-step-no { margin: 0; font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .3em; color: rgba(232, 226, 212, .42); }
.fg-step-title {
  margin: 10px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: .08em;
}
.fg-modes { display: grid; gap: 13px; margin-top: 22px; }
.fg-mode {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  gap: 3px 13px;
  padding: 18px 16px;
  text-align: left;
  border: 1px solid rgba(232, 226, 212, .12);
  border-radius: 14px;
  cursor: pointer;
  color: var(--ink);
  background: linear-gradient(140deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  transition: transform 200ms, border-color 200ms, box-shadow 200ms;
}
.fg-mode.is-day { border-color: rgba(79, 159, 114, .28); }
.fg-mode.is-night { border-color: rgba(192, 80, 63, .3); }
.fg-mode:active { transform: scale(.985); }
@media (hover: hover) {
  .fg-mode:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(0, 0, 0, .4); }
}
.fg-mode-icon {
  grid-row: span 2;
  align-self: center;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(232, 226, 212, .18);
  font-size: 18px;
}
.fg-mode.is-day .fg-mode-icon { color: #cfd9a8; }
.fg-mode.is-night .fg-mode-icon { color: #e5a08c; }
.fg-mode-name { font-family: "Songti SC", "STSong", serif; font-size: 19px; letter-spacing: .08em; }
.fg-mode-desc { font-size: 10px; color: rgba(232, 226, 212, .45); }
.fg-mode-tag {
  position: absolute;
  right: 14px; top: 14px;
  padding: 2px 7px;
  border: 1px solid rgba(192, 80, 63, .55);
  border-radius: 3px;
  font-size: 8px;
  letter-spacing: .1em;
  color: #e5a08c;
}

/* 自定义 */
.fg-custom { margin-top: 24px; text-align: left; }
.fg-custom-label { margin: 0 0 9px; font-size: 10px; letter-spacing: .2em; color: rgba(232, 226, 212, .4); }
.fg-custom-row { display: flex; gap: 8px; }
.fg-custom-input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid rgba(232, 226, 212, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  outline: none;
  font-size: 12px;
  color: var(--ink);
}
.fg-custom-input::placeholder { color: rgba(232, 226, 212, .25); }
.fg-custom-input:focus { border-color: rgba(169, 196, 164, .5); }
.fg-custom-add {
  padding: 0 18px;
  border: 1px solid rgba(232, 226, 212, .18);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  color: rgba(232, 226, 212, .7);
}
.fg-custom-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.fg-custom-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 11px;
  border: 1px dashed rgba(232, 226, 212, .2);
  border-radius: 999px;
  font-size: 10.5px;
  color: rgba(232, 226, 212, .7);
}
.fg-custom-item button {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: rgba(232, 226, 212, .35);
}

/* ---- 游戏 ---- */
.fg-play { padding: 6px 0 20px; }
.fg-progress { display: flex; align-items: center; gap: 10px; }
.fg-pcount { font-family: "Courier New", monospace; font-size: 10px; letter-spacing: .12em; color: rgba(232, 226, 212, .45); }
.fg-pbar { flex: 1; height: 2px; border-radius: 2px; background: rgba(232, 226, 212, .1); overflow: hidden; }
.fg-pbar i { display: block; height: 100%; background: linear-gradient(90deg, #a9c4a4, #4f9f72); transition: width 300ms; }

.fg-cardwrap { margin-top: 22px; }
.fg-card {
  position: relative;
  padding: 30px 22px 28px;
  border-radius: 14px;
  color: #232b26;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.05'/></svg>"),
    linear-gradient(170deg, #f6f1e4, #e9e2d2);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .8);
  animation: fgCardIn 420ms cubic-bezier(.2, .8, .2, 1);
}
@keyframes fgCardIn {
  from { opacity: 0; transform: translateY(14px) rotate(-.6deg); }
  to { opacity: 1; transform: none; }
}
.fg[data-mode="night"] .fg-card { background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.05'/></svg>"),
    linear-gradient(170deg, #2e1518, #1d0d10);
  color: #f2e6dc;
  box-shadow: 0 20px 46px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 40px rgba(192, 80, 63, .1);
}
.fg-card-no {
  position: absolute;
  top: 14px; left: 18px;
  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: .2em;
  opacity: .4;
}
.fg-card-text {
  margin: 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 18px;
  line-height: 1.85;
  letter-spacing: .02em;
}

.fg-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.fg-seat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border: 1px solid rgba(232, 226, 212, .1);
  border-radius: 11px;
  background: rgba(255, 255, 255, .02);
  transition: border-color 220ms, background 220ms;
}
.fg-seat.is-done { border-color: rgba(169, 196, 164, .45); background: rgba(169, 196, 164, .08); }
.fg-seat-name { font-family: "Songti SC", serif; font-size: 15px; }
.fg-seat.is-a .fg-seat-name { color: #8fb2ee; }
.fg-seat.is-b .fg-seat-name { color: #e2695a; }
.fg-seat-state { font-size: 9.5px; letter-spacing: .14em; color: rgba(232, 226, 212, .35); }
.fg-seat.is-done .fg-seat-state { color: #a9c4a4; }

.fg-turn { margin: 14px 0 0; text-align: center; font-size: 10.5px; letter-spacing: .2em; color: rgba(232, 226, 212, .45); }

.fg-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 12px; }
.fg-pick {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 16px 6px 13px;
  border: 1px solid rgba(232, 226, 212, .12);
  border-radius: 13px;
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
  color: var(--ink);
  transition: transform 160ms, border-color 200ms, background 200ms, box-shadow 200ms;
}
.fg-pick.is-green { --c: var(--green); }
.fg-pick.is-maybe { --c: var(--maybe); }
.fg-pick.is-red { --c: var(--red); }
.fg-pick:active { transform: scale(.96); }
@media (hover: hover) {
  .fg-pick:hover {
    border-color: var(--c);
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 0 24px -6px var(--c);
  }
  .fg-pick:hover .fg-cloth { transform: translateY(-2px) scale(1.04); }
}
.fg-flag-svg { width: 40px; height: 46px; overflow: visible; }
.fg-pole { stroke: rgba(232, 226, 212, .55); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.fg-cloth {
  fill: var(--c);
  opacity: .82;
  transform-origin: 14px 20px;
  transition: transform 200ms cubic-bezier(.2, .8, .2, 1), opacity 200ms;
}
.fg-pick-label { font-family: "Songti SC", "STSong", serif; font-size: 13.5px; letter-spacing: .1em; }
.fg-pick-sub { font-size: 8.5px; color: rgba(232, 226, 212, .35); }
.fg-picks.is-locked { opacity: .35; pointer-events: none; filter: grayscale(.4); }

/* 揭晓 */
.fg-result { margin-top: 6px; }
.fg-result.is-in { animation: fgIn 420ms cubic-bezier(.2, .8, .2, 1); }
@keyframes fgIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.fg-fliprow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.fg-flipcard {
  display: grid;
  gap: 3px;
  place-items: center;
  padding: 16px 10px;
  border-radius: 12px;
  border: 1px solid rgba(232, 226, 212, .14);
  animation: fgFlip 460ms cubic-bezier(.2, .8, .2, 1);
}
@keyframes fgFlip {
  from { transform: rotateY(90deg); opacity: 0; }
  to { transform: rotateY(0); opacity: 1; }
}
.fg-flipcard span { font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .18em; opacity: .5; }
.fg-flipcard b { font-family: "Songti SC", serif; font-size: 17px; letter-spacing: .1em; }
.fg-flipcard.is-green { border-color: rgba(79, 159, 114, .5); background: rgba(79, 159, 114, .1); }
.fg-flipcard.is-green b { color: #7fc79a; }
.fg-flipcard.is-maybe { border-color: rgba(201, 162, 74, .5); background: rgba(201, 162, 74, .1); }
.fg-flipcard.is-maybe b { color: #e0c27a; }
.fg-flipcard.is-red { border-color: rgba(192, 80, 63, .5); background: rgba(192, 80, 63, .1); }
.fg-flipcard.is-red b { color: #e58c78; }
.fg-verdict { margin: 16px 0 0; text-align: center; font-family: "Songti SC", serif; font-size: 15px; letter-spacing: .06em; }
.fg-talk { margin: 8px 0 0; text-align: center; font-size: 10.5px; color: rgba(232, 226, 212, .42); }
.fg-next { margin-top: 18px; }

/* 结果 */
.fg-endview { padding: 20px 0 20px; text-align: center; }
.fg-endtitle { margin: 14px 0 0; font-family: "Songti SC", serif; font-size: 25px; font-weight: 500; letter-spacing: .06em; }
.fg-tally { display: flex; justify-content: center; gap: 34px; margin-top: 22px; }
.fg-tally span { font-size: 10px; letter-spacing: .16em; color: rgba(232, 226, 212, .4); }
.fg-tally b { display: block; margin-bottom: 4px; font-family: "Songti SC", serif; font-size: 34px; font-weight: 500; color: #f2ece0; }
.fg-bars { display: grid; gap: 5px; margin-top: 24px; }
.fg-row { display: grid; grid-template-columns: 18px 1fr 1fr; gap: 5px; align-items: center; }
.fg-row-no { font-family: "Courier New", monospace; font-size: 9px; color: rgba(232, 226, 212, .3); }
.fg-row i { height: 5px; border-radius: 3px; opacity: .85; }
.fg-row i.is-green { background: var(--green); }
.fg-row i.is-maybe { background: var(--maybe); }
.fg-row i.is-red { background: var(--red); }
.fg-row.is-diff i { opacity: 1; }
.fg-endnote { margin: 22px 0 0; font-size: 11px; color: rgba(232, 226, 212, .45); }
.fg-endactions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.fg-endactions .fg-cta { margin-top: 0; }
.fg-ghost {
  padding: 15px 20px;
  border: 1px solid rgba(232, 226, 212, .16);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 14px;
  letter-spacing: .14em;
  color: rgba(232, 226, 212, .6);
}

@media (max-width: 360px) {
  .fg-picks { gap: 7px; }
  .fg-pick { padding: 13px 4px 11px; }
  .fg-flag-svg { width: 34px; height: 40px; }
  .fg-pick-label { font-size: 12.5px; }
  .fg-card-text { font-size: 16.5px; }
}

/* v0.30.1 结果页改位置轴 */
.fg-lines { display: grid; gap: 4px; margin-top: 22px; }
.fg-line { display: grid; grid-template-columns: 18px 1fr; gap: 6px; align-items: center; }
.fg-line-no { font-family: "Courier New", monospace; font-size: 9px; color: rgba(232, 226, 212, .3); }
.fg-track {
  position: relative;
  height: 18px;
  border-radius: 9px;
  background: linear-gradient(90deg,
      rgba(192, 80, 63, .1),
      rgba(201, 162, 74, .08) 50%,
      rgba(79, 159, 114, .1));
  box-shadow: inset 0 0 0 1px rgba(232, 226, 212, .05);
}
.fg-dot {
  position: absolute;
  top: 50%;
  left: var(--p);
  width: 8px; height: 8px;
  margin-left: -4px;
  transform: translateY(-50%);
  border-radius: 50%;
  transition: left 420ms cubic-bezier(.2, .8, .2, 1);
}
.fg-dot.is-a { transform: translateY(-72%); }
.fg-dot.is-b { transform: translateY(-28%); }
.fg-dot.is-green { background: var(--green); box-shadow: 0 0 8px rgba(79, 159, 114, .7); }
.fg-dot.is-maybe { background: var(--maybe); box-shadow: 0 0 8px rgba(201, 162, 74, .7); }
.fg-dot.is-red { background: var(--red); box-shadow: 0 0 8px rgba(192, 80, 63, .7); }
.fg-line:not(.is-same) .fg-track { box-shadow: inset 0 0 0 1px rgba(232, 226, 212, .16); }

/* =========================================================
   v0.31 · 我们的 100 件小事（小票）
   ========================================================= */
.lt {
  --ink: #f2ece0;
  --dim: rgba(232, 226, 212, .5);
  --paper: #fdfbf4;
  --pink: #2f281e;
  width: 100%;
  padding: 0 0 24px;
  color: var(--ink);
  border-radius: 18px;
  background:
    radial-gradient(110% 50% at 50% 0%, rgba(120, 96, 56, .26), transparent 70%),
    radial-gradient(90% 40% at 50% 100%, rgba(80, 60, 34, .2), transparent 70%);
}
.lt.is-receipt, .lt.is-shop {
  background:
    radial-gradient(110% 50% at 50% 0%, rgba(120, 96, 56, .2), transparent 70%);
}

/* 规则 */
.lt-intro { text-align: center; padding: 10px 0 20px; }
.lt-eyebrow { margin: 0; font-size: 8px; letter-spacing: .36em; color: rgba(232, 220, 190, .4); }
.lt-title {
  margin: 10px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: .1em;
  color: #f7f0e2;
}
.lt-lede { margin: 12px auto 0; max-width: 300px; font-size: 12px; line-height: 1.85; color: var(--dim); }
.lt-rules {
  margin: 22px 0 0;
  padding: 18px 20px 18px 38px;
  text-align: left;
  border: 1px solid rgba(232, 220, 190, .12);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(232, 220, 190, .04), transparent);
  counter-reset: r;
  list-style: none;
}
.lt-rules li {
  position: relative;
  margin: 0 0 11px;
  padding-left: 20px;
  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(242, 236, 224, .76);
}
.lt-rules li:last-child { margin-bottom: 0; }
.lt-rules li::before {
  counter-increment: r;
  content: counter(r, decimal-leading-zero);
  position: absolute; left: 0; top: 2px;
  font-family: "Courier New", monospace;
  font-size: 9px;
  color: rgba(232, 200, 140, .7);
}
.lt-note { margin: 18px auto 0; max-width: 300px; font-size: 10.5px; line-height: 1.85; color: rgba(232, 226, 212, .34); }
.lt-cta {
  width: 100%;
  margin-top: 22px;
  padding: 15px 20px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Songti SC", "STSong", serif;
  font-size: 16px;
  letter-spacing: .22em;
  text-indent: .22em;
  color: #241d12;
  background: linear-gradient(180deg, #f0ddb2, #cdb078);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform 140ms, filter 160ms, opacity 180ms;
}
.lt-cta:active { transform: translateY(1px); filter: brightness(1.06); }
.lt-cta:disabled { opacity: .3; cursor: default; box-shadow: none; }
.lt-ghost {
  padding: 14px 18px;
  border: 1px solid rgba(232, 226, 212, .16);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 13px;
  letter-spacing: .12em;
  color: rgba(232, 226, 212, .66);
  transition: background 180ms;
}
.lt-ghost:hover { background: rgba(255, 255, 255, .05); }
.lt-ghost:disabled { opacity: .3; cursor: default; }

.lt-resume {
  width: 100%;
  margin-top: 20px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px dashed rgba(232, 200, 140, .35);
  border-radius: 12px;
  background: rgba(232, 200, 140, .05);
  cursor: pointer;
  color: rgba(242, 236, 224, .7);
  font-size: 11px;
  text-align: left;
}
.lt-resume b { font-family: "Courier New", monospace; font-size: 11px; color: #e0c68e; font-weight: 400; }

/* 主题 */
.lt-step { padding: 6px 0 20px; text-align: center; }
.lt-back {
  display: block; margin: 0 0 14px; padding: 6px 2px;
  border: 0; background: none; cursor: pointer;
  font-size: 11px; letter-spacing: .1em; color: rgba(232, 226, 212, .45);
}
.lt-step-no { margin: 0; font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .3em; color: rgba(232, 226, 212, .4); }
.lt-step-title {
  margin: 10px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 25px; font-weight: 500; letter-spacing: .08em;
}
.lt-step-sub { margin: 8px 0 0; font-size: 10.5px; color: var(--dim); }
.lt-themes { display: grid; gap: 11px; margin-top: 22px; }
.lt-theme {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 2px 11px;
  padding: 15px 16px;
  text-align: left;
  border: 1px solid rgba(232, 226, 212, .12);
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink);
  background: rgba(255, 255, 255, .02);
  transition: border-color 200ms, background 200ms, transform 160ms;
}
.lt-theme:active { transform: scale(.99); }
.lt-theme.is-on {
  border-color: rgba(232, 200, 140, .6);
  background: rgba(232, 200, 140, .08);
  box-shadow: 0 0 0 1px rgba(232, 200, 140, .14);
}
.lt-theme-check {
  grid-row: span 3;
  align-self: center;
  width: 18px; height: 18px;
  border: 1px solid rgba(232, 226, 212, .28);
  border-radius: 4px;
  transition: background 180ms, border-color 180ms;
}
.lt-theme.is-on .lt-theme-check {
  background: #e0c68e;
  border-color: #e0c68e;
  box-shadow: inset 0 0 0 2px rgba(24, 20, 14, .9);
}
.lt-theme-name { font-family: "Songti SC", serif; font-size: 17px; letter-spacing: .06em; }
.lt-theme-name em {
  margin-left: 7px;
  padding: 1px 5px;
  border: 1px solid rgba(216, 85, 106, .5);
  border-radius: 3px;
  font-size: 8px; font-style: normal;
  color: #e5a08c;
}
.lt-theme-desc { font-size: 10px; color: rgba(232, 226, 212, .45); }
.lt-theme-count { margin-top: 3px; font-size: 9px; letter-spacing: .12em; color: rgba(232, 226, 212, .28); }

/* 挑选 */
.lt-shop { padding: 6px 0 20px; }
.lt-shop-top { display: flex; align-items: baseline; justify-content: space-between; }
.lt-cartcount { font-size: 10px; letter-spacing: .1em; color: rgba(232, 226, 212, .45); }
.lt-cartcount b { font-family: "Courier New", monospace; font-size: 14px; color: #e0c68e; }
.lt-items { display: grid; gap: 8px; margin-top: 16px; }
.lt-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: center;
  padding: 13px 14px;
  text-align: left;
  border: 1px solid rgba(232, 226, 212, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .022);
  cursor: pointer;
  color: rgba(242, 236, 224, .82);
  transition: border-color 180ms, background 180ms, transform 140ms;
}
.lt-item:active { transform: scale(.992); }
.lt-item.is-on {
  border-color: rgba(232, 200, 140, .5);
  background: rgba(232, 200, 140, .08);
  color: #f7f0e2;
}
.lt-item-box {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border: 1px solid rgba(232, 226, 212, .25);
  border-radius: 4px;
  font-size: 12px;
  color: #241d12;
  transition: background 160ms, border-color 160ms;
}
.lt-item.is-on .lt-item-box { background: #e0c68e; border-color: #e0c68e; }
.lt-item-text { font-size: 12.5px; line-height: 1.5; }
.lt-shop-foot { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; margin-top: 20px; }
.lt-shop-foot .lt-cta { margin-top: 0; }

/* 小票 */
.lt-receiptview { padding: 4px 0 20px; }
.lt-paper {
  position: relative;
  padding: 30px 22px 26px;
  color: var(--pink);
  background: var(--paper);
  border-radius: 3px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
  -webkit-mask:
    radial-gradient(circle at 7px 0, transparent 6px, #000 6.5px) top left / 14px 9px repeat-x,
    radial-gradient(circle at 7px 100%, transparent 6px, #000 6.5px) bottom left / 14px 9px repeat-x,
    linear-gradient(#000, #000) center / 100% calc(100% - 18px) no-repeat;
  mask:
    radial-gradient(circle at 7px 0, transparent 6px, #000 6.5px) top left / 14px 9px repeat-x,
    radial-gradient(circle at 7px 100%, transparent 6px, #000 6.5px) bottom left / 14px 9px repeat-x,
    linear-gradient(#000, #000) center / 100% calc(100% - 18px) no-repeat;
}
.lt-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.045'/></svg>");
}
.lt-receipt-head { text-align: center; }
.lt-receipt-store {
  margin: 0;
  font-family: "Courier New", monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .16em;
}
.lt-receipt-meta { margin: 7px 0 0; font-family: "Courier New", monospace; font-size: 10px; color: #7a6a52; letter-spacing: .06em; }
.lt-receipt-sub { margin: 4px 0 0; font-size: 10px; color: #9a8a72; }
.lt-rule-dash { height: 1px; margin: 16px 0 10px; border-top: 1px dashed rgba(90, 74, 50, .45); }
.lt-receipt-items { display: grid; gap: 2px; }
.lt-receipt-item {
  display: grid;
  grid-template-columns: 22px 26px 1fr;
  gap: 6px;
  align-items: center;
  padding: 7px 2px;
  text-align: left;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--pink);
  border-radius: 4px;
  transition: background 160ms;
}
.lt-receipt-item:active { background: rgba(120, 96, 56, .08); }
.lt-cb {
  display: grid; place-items: center;
  width: 17px; height: 17px;
  border: 1.5px solid rgba(70, 58, 40, .6);
  border-radius: 2px;
}
.lt-cb svg { width: 15px; height: 15px; fill: none; stroke: #3f7a4a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lt-receipt-item.is-done .lt-cb { border-color: #3f7a4a; }
.lt-ri-no { font-family: "Courier New", monospace; font-size: 10px; color: #9a8a72; }
.lt-ri-text { font-family: "Courier New", monospace; font-size: 12px; line-height: 1.5; }
.lt-receipt-item.is-done .lt-ri-text { color: #a8a898; text-decoration: line-through; text-decoration-color: rgba(63, 122, 74, .5); }

.lt-receipt-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 12px;
  font-family: "Courier New", monospace;
  font-size: 12px;
}
.lt-receipt-total b { font-size: 22px; }
.lt-receipt-total em { margin-left: auto; font-style: normal; font-size: 10px; color: #7a6a52; }
.lt-barcode {
  height: 34px;
  margin-top: 18px;
  background: repeating-linear-gradient(90deg,
      #2f281e 0 2px, transparent 2px 5px,
      #2f281e 5px 9px, transparent 9px 12px,
      #2f281e 12px 13px, transparent 13px 18px);
  opacity: .8;
}
.lt-receipt-foot {
  margin: 8px 0 0;
  text-align: center;
  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: .08em;
  color: #9a8a72;
}
.lt-receipt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.lt-receipt-tip { margin: 14px 0 0; text-align: center; font-size: 9.5px; line-height: 1.7; color: rgba(232, 226, 212, .3); }

@media (max-width: 360px) {
  .lt-title { font-size: 26px; }
  .lt-paper { padding: 24px 16px 22px; }
  .lt-ri-text { font-size: 11px; }
  .lt-receipt-item { grid-template-columns: 20px 22px 1fr; gap: 5px; }
}

/* v0.31.1 本页全选 */
.lt-shop-tools { display: flex; align-items: center; gap: 10px; }
.lt-selectall {
  padding: 5px 12px;
  border: 1px solid rgba(232, 200, 140, .4);
  border-radius: 999px;
  background: rgba(232, 200, 140, .08);
  cursor: pointer;
  font-size: 10px;
  letter-spacing: .1em;
  color: #e0c68e;
  transition: background 160ms, border-color 160ms;
}
.lt-selectall:hover { background: rgba(232, 200, 140, .16); border-color: rgba(232, 200, 140, .6); }
.lt-selectall:active { transform: scale(.96); }

/* =========================================================
   v0.32 · 今日约会抽签筒
   ========================================================= */
.db {
  --wood: #7a4a2c;
  --paper: #f6e8c8;
  --ink: #3a2a16;
  width: 100%;
  padding: 0 0 24px;
  color: #f2ece0;
  border-radius: 18px;
  background:
    radial-gradient(110% 50% at 50% 0%, rgba(120, 74, 40, .3), transparent 70%),
    radial-gradient(90% 40% at 50% 100%, rgba(80, 48, 24, .22), transparent 70%);
}
.db-intro { text-align: center; padding: 12px 0 20px; }
.db-eyebrow { margin: 0; font-size: 8px; letter-spacing: .36em; color: rgba(232, 200, 150, .5); }
.db-title {
  margin: 10px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: .1em;
  color: #f7efdf;
}
.db-lede { margin: 12px auto 0; max-width: 280px; font-size: 12px; line-height: 1.9; color: rgba(232, 226, 212, .55); }

/* 签筒 */
.db-tube {
  position: relative;
  width: 150px;
  height: 286px;
  margin: 18px auto 0;
}
.db-sticks {
  position: absolute;
  left: 50%;
  bottom: 82px;
  width: 128px;
  height: 206px;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}
.db-sticks i {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 11px;
  height: var(--h, 175px);
  margin-left: var(--x, 0);
  border-radius: 2px 2px 1px 1px;
  background:
    repeating-linear-gradient(90deg, rgba(150, 118, 76, .14) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, #cbb083 0%, #f2e3c0 14%, #fbf0d4 38%, #ecd9b2 72%, #c8ad7e 100%);
  box-shadow:
    0 0 0 1px rgba(120, 90, 50, .28),
    inset 1.5px 0 0 rgba(255, 255, 255, .55),
    inset -1.5px 0 0 rgba(110, 82, 46, .28),
    2px 0 4px rgba(0, 0, 0, .16);
  transform-origin: 50% 100%;
  transform: rotate(var(--r, 0deg));
}
.db-sticks i::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 12px;
  border-radius: 3px 3px 0 0;
  background:
    linear-gradient(90deg, #86251b, #b0362b 36%, #962e23 72%, #701f16);
  clip-path: polygon(0 3px, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .26);
}
.db-sticks i::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 12px;
  height: 1.5px;
  background: rgba(212, 175, 90, .6);
}
.db-body {
  position: absolute;
  left: 18px; right: 18px; bottom: 0;
  height: 186px;
  z-index: 2;
  border-radius: 6px 6px 14px 14px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 15px),
    linear-gradient(90deg, #3f2415, #6f4127 22%, #8b5532 48%, #664027 74%, #341c10);
  box-shadow:
    inset 0 -14px 26px rgba(0, 0, 0, .55),
    inset 8px 0 16px rgba(255, 220, 180, .1),
    inset -8px 0 16px rgba(0, 0, 0, .35),
    0 14px 24px rgba(0, 0, 0, .45);
}
.db-body::before {
  content: "";
  position: absolute;
  left: -7px; right: -7px; top: -13px;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 40%, #3a2010 0%, #23120a 52%, #120a05 100%);
  box-shadow:
    inset 0 4px 9px rgba(0, 0, 0, .9),
    inset 0 -2px 4px rgba(255, 200, 150, .16),
    0 3px 6px rgba(0, 0, 0, .4);
}
.db-body::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px; top: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 220, 180, .14), transparent);
  pointer-events: none;
}
.db-band {
  position: absolute;
  left: 0; right: 0; top: 76px;
  height: 15px;
  background: linear-gradient(180deg, #b8402f, #882a1f);
  box-shadow:
    inset 0 1px 0 rgba(255, 180, 160, .28),
    inset 0 -1px 0 rgba(0, 0, 0, .25),
    0 2px 6px rgba(0, 0, 0, .3);
}
.db-word {
  position: absolute;
  left: 50%; top: 112px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: "Songti SC", "STSong", serif;
  font-size: 21px;
  letter-spacing: .3em;
  text-indent: .3em;
  color: rgba(255, 236, 208, .82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .65), 0 -1px 0 rgba(255, 255, 255, .08);
}
.db-shadow {
  position: absolute;
  left: 50%; bottom: -14px;
  width: 118px; height: 18px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 70%);
  filter: blur(5px);
}
.db-tube.is-shaking { animation: dbTubeShake .17s ease-in-out infinite; }
@keyframes dbTubeShake {
  0%, 100% { transform: rotate(-2.2deg); }
  50% { transform: rotate(2.2deg); }
}
.db-tube.is-shaking .db-sticks i {
  animation: dbStick .26s ease-in-out infinite;
  animation-delay: var(--d, 0ms);
}
@keyframes dbStick {
  0%, 100% { transform: rotate(var(--r)) translateY(0); }
  50% { transform: rotate(calc(var(--r) + 7deg)) translateY(-11px); }
}
.db-tube.is-flash .db-body { animation: dbFlash .5s ease-out; }
@keyframes dbFlash {
  0% { filter: brightness(1); }
  30% { filter: brightness(1.55); box-shadow: 0 0 46px rgba(255, 200, 130, .55), 0 22px 38px rgba(0, 0, 0, .55); }
  100% { filter: brightness(1); }
}

.db-cta {
  display: block;
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 54px auto 0;
  padding: 15px 20px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Songti SC", "STSong", serif;
  font-size: 16px;
  letter-spacing: .24em;
  text-indent: .24em;
  color: #2a1a0c;
  background: linear-gradient(180deg, #f2d9a8, #cfa469);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform 140ms, filter 160ms, opacity 180ms;
}
.db-cta:active { transform: translateY(1px); filter: brightness(1.06); }
.db-cta:disabled { opacity: .4; cursor: default; }
.db-note { margin: 16px auto 0; max-width: 280px; font-size: 10px; line-height: 1.8; color: rgba(232, 226, 212, .32); }

/* 结果 */
.db-result { padding: 16px 0 20px; text-align: center; }
.db-result-kicker {
  margin: 0;
  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: .28em;
  color: rgba(232, 200, 150, .62);
}
.db-slip {
  position: relative;
  max-width: 330px;
  margin: 20px auto 0;
  padding: 48px 26px 34px;
  border-radius: 3px;
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(120, 96, 60, .06) 27px 28px),
    linear-gradient(175deg, #f8ecd0, #e6d3ab);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .8);
  opacity: 0;
  transform: rotate(-6deg) scale(.86) translateY(-30px);
}
.db-slip.is-in { animation: dbSlipIn .72s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes dbSlipIn {
  0% { opacity: 0; transform: rotate(-6deg) scale(.86) translateY(-30px); }
  55% { opacity: 1; transform: rotate(.6deg) scale(1.02) translateY(0); }
  100% { opacity: 1; transform: rotate(-1deg) scale(1) translateY(0); }
}
.db-slip-top {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 26px;
  background: linear-gradient(180deg, #c94a35, #9c3223);
  border-radius: 3px 3px 0 0;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2);
}
.db-slip-top::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #7a1f16;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 200, 170, .2);
}
.db-slip-text {
  margin: 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 19px;
  line-height: 1.95;
  letter-spacing: .02em;
}
.db-slip-foot {
  display: block;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px dashed rgba(120, 96, 60, .35);
  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: .16em;
  color: rgba(120, 96, 60, .7);
}
.db-result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.db-cta-in { margin: 0; }
.db-ghost {
  padding: 15px 20px;
  border: 1px solid rgba(232, 226, 212, .18);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 14px;
  letter-spacing: .14em;
  color: rgba(232, 226, 212, .68);
  transition: background 180ms;
}
.db-ghost:hover { background: rgba(255, 255, 255, .05); }
.db-result-note { margin: 16px 0 0; font-size: 10px; color: rgba(232, 226, 212, .3); }

@media (max-width: 360px) {
  .db-title { font-size: 26px; }
  .db-slip { padding: 42px 20px 28px; }
  .db-slip-text { font-size: 17px; }
}

/* =========================================================
   v0.33 · 情侣快问快答（霓虹竞技）
   ========================================================= */
.qq {
  --a: #4fd6d2;
  --b: #ff5c9d;
  --ink: #eef2ff;
  --dim: rgba(214, 224, 255, .5);
  width: 100%;
  min-height: calc(100dvh - 110px);
  padding: 0 0 24px;
  color: var(--ink);
  border-radius: 18px;
  background:
    radial-gradient(110% 55% at 50% 0%, rgba(48, 92, 160, .32), transparent 70%),
    radial-gradient(90% 45% at 50% 100%, rgba(120, 40, 110, .24), transparent 70%);
}

/* 规则 */
.qq-intro { text-align: center; padding: 16px 0 20px; }
.qq-eyebrow { margin: 0; font-size: 8px; letter-spacing: .38em; color: rgba(140, 200, 255, .55); }
.qq-title {
  margin: 10px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: .14em;
  color: #f2f6ff;
  text-shadow: 0 0 34px rgba(79, 214, 210, .35);
}
.qq-lede { margin: 12px auto 0; max-width: 300px; font-size: 12px; line-height: 1.9; color: var(--dim); }
.qq-steps { display: grid; gap: 10px; margin-top: 26px; text-align: left; }
.qq-steps div {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(140, 190, 255, .14);
  border-radius: 11px;
  background: rgba(255, 255, 255, .022);
}
.qq-steps b { font-family: "Courier New", monospace; font-size: 11px; color: rgba(79, 214, 210, .8); }
.qq-steps span { font-size: 11.5px; line-height: 1.6; color: rgba(238, 242, 255, .76); }
.qq-note { margin: 20px auto 0; max-width: 290px; font-size: 10.5px; line-height: 1.85; color: rgba(214, 224, 255, .34); }
.qq-cta {
  width: 100%;
  margin-top: 24px;
  padding: 16px 20px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Songti SC", "STSong", serif;
  font-size: 16px;
  letter-spacing: .24em;
  text-indent: .24em;
  color: #06141c;
  background: linear-gradient(180deg, #9ef2ec, #4fd6d2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .42), 0 0 34px rgba(79, 214, 210, .22), inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: transform 140ms, filter 160ms, opacity 180ms;
}
.qq-cta:active { transform: translateY(1px); filter: brightness(1.08); }
.qq-cta:disabled { opacity: .4; cursor: default; box-shadow: none; }

/* 舞台 */
.qq-stage {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 120px);
  padding: 6px 0 14px;
}
.qq-top { display: grid; gap: 8px; }
.qq-count-label { font-family: "Courier New", monospace; font-size: 10px; letter-spacing: .16em; color: rgba(214, 224, 255, .45); }
.qq-count-label b { color: var(--a); font-size: 13px; }
.qq-dots { display: flex; gap: 3px; }
.qq-dots i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(214, 224, 255, .12);
  transition: background 240ms;
}
.qq-dots i.is-done { background: rgba(79, 214, 210, .45); }
.qq-dots i.is-now { background: var(--a); box-shadow: 0 0 10px rgba(79, 214, 210, .7); }

.qq-arena {
  flex: 1;
  display: grid;
  place-items: center;
  position: relative;
  padding: 10px 0;
}
.qq-num {
  font-family: "Songti SC", "STSong", serif;
  font-size: clamp(96px, 30vw, 170px);
  font-weight: 500;
  line-height: 1;
  color: #f2f6ff;
  text-shadow: 0 0 60px rgba(79, 214, 210, .45);
  grid-area: 1 / 1;
}
.qq-num.is-pop { animation: qqPop .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes qqPop {
  0% { opacity: 0; transform: scale(1.9); filter: blur(6px); }
  45% { opacity: 1; transform: scale(1); filter: blur(0); }
  100% { opacity: .92; transform: scale(1); }
}

.qq-pair {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  opacity: 0;
  transform: scale(.9);
}
.qq-pair.is-in { animation: qqPairIn .55s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes qqPairIn {
  0% { opacity: 0; transform: scale(.88) rotateX(16deg); }
  60% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}
.qq-opt {
  position: relative;
  display: grid;
  gap: 8px;
  place-items: center;
  min-height: 248px;
  padding: 24px 14px 20px;
  align-content: center;
  border-radius: 18px;
  border: 1px solid rgba(214, 224, 255, .12);
  background: rgba(255, 255, 255, .03);
}
.qq-opt.is-a {
  border-color: rgba(79, 214, 210, .4);
  background: linear-gradient(170deg, rgba(79, 214, 210, .14), rgba(79, 214, 210, .03));
  box-shadow: 0 0 30px rgba(79, 214, 210, .12), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.qq-opt.is-b {
  border-color: rgba(255, 92, 157, .4);
  background: linear-gradient(170deg, rgba(255, 92, 157, .14), rgba(255, 92, 157, .03));
  box-shadow: 0 0 30px rgba(255, 92, 157, .12), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.qq-tag {
  font-family: "Courier New", monospace;
  font-size: 11px;
  letter-spacing: .2em;
  opacity: .7;
}
.qq-opt.is-a .qq-tag { color: var(--a); }
.qq-opt.is-b .qq-tag { color: var(--b); }
.qq-opt b {
  font-family: "Songti SC", "STSong", serif;
  font-size: clamp(28px, 8.4vw, 40px);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: .05em;
  text-align: center;
  word-break: break-all;
}
.qq-opt.is-a b { color: #c9f7f5; text-shadow: 0 0 24px rgba(79, 214, 210, .5); }
.qq-opt.is-b b { color: #ffd0e0; text-shadow: 0 0 24px rgba(255, 92, 157, .5); }
.qq-vs {
  font-family: "Courier New", monospace;
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(214, 224, 255, .3);
}
.qq-next { margin-top: auto; }

/* 结束 */
.qq-endview { text-align: center; padding: 60px 0 20px; }
.qq-endtitle {
  margin: 14px 0 0;
  font-family: "Songti SC", serif;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: .08em;
}
.qq-endnote { margin: 18px auto 0; max-width: 300px; font-size: 11.5px; line-height: 1.9; color: var(--dim); }
.qq-endactions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }
.qq-endactions .qq-cta { margin-top: 0; }
.qq-ghost {
  padding: 16px 20px;
  border: 1px solid rgba(214, 224, 255, .16);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 14px;
  letter-spacing: .14em;
  color: rgba(214, 224, 255, .62);
}

@media (max-width: 360px) {
  .qq-opt { min-height: 190px; padding: 18px 8px 14px; }
  .qq-opt b { font-size: 20px; }
  .qq-title { font-size: 28px; }
}

/* =========================================================
   v0.34 · 情侣谁更可能（复用快问快答舞台）
   ========================================================= */
.wl-pairwrap {
  grid-area: 1 / 1;
  width: 100%;
  opacity: 0;
  transform: scale(.9);
}
.wl-pairwrap.is-in { animation: qqPairIn .55s cubic-bezier(.2, .8, .2, 1) forwards; }
.wl-pairwrap .qq-pair { opacity: 1; transform: none; }
.wl-question {
  margin: 0 0 18px;
  text-align: center;
  font-family: "Songti SC", "STSong", serif;
  font-size: clamp(17px, 4.8vw, 21px);
  line-height: 1.6;
  letter-spacing: .02em;
  color: #f2f6ff;
  text-shadow: 0 0 24px rgba(120, 170, 255, .25);
}
.wl-question:empty { display: none; }

/* 起称呼 */
.wl-nameview { padding: 6px 0 20px; }
.wl-back {
  display: block;
  margin: 0 0 14px;
  padding: 6px 2px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(214, 224, 255, .45);
}
.wl-title {
  margin: 10px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: .08em;
}
.wl-sub { margin: 10px 0 0; font-size: 11px; line-height: 1.8; color: rgba(214, 224, 255, .5); }
.wl-inputs { display: grid; gap: 14px; margin-top: 26px; }
.wl-field {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 13px;
  border: 1px solid rgba(214, 224, 255, .12);
  background: rgba(255, 255, 255, .025);
}
.wl-field.is-a { border-color: rgba(79, 214, 210, .3); }
.wl-field.is-b { border-color: rgba(255, 92, 157, .3); }
.wl-field span {
  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: .18em;
  opacity: .55;
}
.wl-field.is-a span { color: var(--a); }
.wl-field.is-b span { color: var(--b); }
.wl-field input {
  border: 0;
  background: none;
  outline: none;
  font-family: "Songti SC", "STSong", serif;
  font-size: 20px;
  letter-spacing: .06em;
  color: #f2f6ff;
}
.wl-field input::placeholder { color: rgba(214, 224, 255, .22); }

.wl-adult {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin-top: 18px;
  padding: 13px 16px;
  border: 1px solid rgba(214, 224, 255, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
  cursor: pointer;
  color: rgba(238, 242, 255, .7);
  font-size: 12.5px;
  text-align: left;
}
.wl-adult.is-on { border-color: rgba(255, 92, 157, .45); background: rgba(255, 92, 157, .07); }
.wl-adult-box {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border: 1px solid rgba(214, 224, 255, .25);
  border-radius: 4px;
  font-size: 12px;
  color: #06141c;
}
.wl-adult.is-on .wl-adult-box { background: var(--b); border-color: var(--b); }
.wl-adult-text em {
  margin-left: 7px;
  padding: 1px 5px;
  border: 1px solid rgba(255, 92, 157, .5);
  border-radius: 3px;
  font-size: 8px;
  font-style: normal;
  color: #ffa8c8;
}

/* =========================================================
   v0.35 · 心动骰子
   ========================================================= */
.dc {
  --felt: #17332c;
  --felt-2: #0d1f1a;
  --bone: #f6efdd;
  --ink: #2a2118;
  --text: #f2ece0;
  width: 100%;
  padding: 0 0 24px;
  color: var(--text);
  border-radius: 18px;
  background:
    radial-gradient(110% 55% at 50% 0%, rgba(40, 110, 90, .32), transparent 70%),
    radial-gradient(90% 45% at 50% 100%, rgba(20, 60, 50, .28), transparent 70%);
}
.dc[data-mode="desire"] {
  background:
    radial-gradient(110% 55% at 50% 0%, rgba(130, 30, 50, .34), transparent 70%),
    radial-gradient(90% 45% at 50% 100%, rgba(80, 16, 30, .28), transparent 70%);
}

/* 规则 */
.dc-intro { text-align: center; padding: 12px 0 20px; }
.dc-eyebrow { margin: 0; font-size: 8px; letter-spacing: .36em; color: rgba(150, 220, 190, .5); }
.dc[data-mode="desire"] .dc-eyebrow { color: rgba(230, 150, 170, .55); }
.dc-title {
  margin: 10px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: .12em;
  color: #f6f0e2;
}
.dc-lede { margin: 12px auto 0; max-width: 300px; font-size: 12px; line-height: 1.9; color: rgba(232, 240, 232, .55); }
.dc-legend {
  margin: 24px 0 0;
  display: grid;
  gap: 9px;
  text-align: left;
  padding: 16px 18px;
  border: 1px solid rgba(150, 220, 190, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .022);
}
.dc[data-mode="desire"] .dc-legend { border-color: rgba(230, 150, 170, .16); }
.dc-legend div { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: baseline; }
.dc-legend b { font-size: 11px; letter-spacing: .08em; color: rgba(150, 220, 190, .85); }
.dc[data-mode="desire"] .dc-legend b { color: rgba(240, 170, 185, .85); }
.dc-legend span { font-size: 10.5px; color: rgba(232, 240, 232, .42); }
.dc-note { margin: 20px auto 0; max-width: 290px; font-size: 10.5px; line-height: 1.85; color: rgba(232, 240, 232, .34); }
.dc-cta {
  width: 100%;
  margin-top: 24px;
  padding: 15px 20px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 16px;
  letter-spacing: .24em;
  text-indent: .24em;
  color: #10231c;
  background: linear-gradient(180deg, #cfefd6, #7fc4a4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform 140ms, filter 160ms, opacity 180ms;
}
.dc[data-mode="desire"] .dc-cta { color: #2a0d12; background: linear-gradient(180deg, #f0a9b6, #c9637a); }
.dc-cta:active { transform: translateY(1px); filter: brightness(1.06); }
.dc-cta:disabled { opacity: .4; cursor: default; }

/* 选版本 */
.dc-step { padding: 6px 0 20px; text-align: center; }
.dc-back {
  display: block; margin: 0 0 14px; padding: 6px 2px;
  border: 0; background: none; cursor: pointer;
  font-size: 11px; letter-spacing: .1em; color: rgba(232, 240, 232, .45);
}
.dc-step-no { margin: 0; font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .3em; color: rgba(232, 240, 232, .4); }
.dc-step-title {
  margin: 10px 0 0;
  font-family: "Songti SC", serif;
  font-size: 25px; font-weight: 500; letter-spacing: .08em;
}
.dc-modes { display: grid; gap: 14px; margin-top: 24px; }
.dc-mode {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 26px 20px;
  text-align: left;
  border: 1px solid rgba(232, 240, 232, .12);
  border-radius: 16px;
  cursor: pointer;
  color: var(--text);
  background: rgba(255, 255, 255, .025);
  transition: transform 200ms, border-color 200ms, box-shadow 200ms;
}
.dc-mode.is-day { border-color: rgba(127, 196, 164, .32); }
.dc-mode.is-night { border-color: rgba(201, 99, 122, .34); }
.dc-mode:active { transform: scale(.985); }
@media (hover: hover) {
  .dc-mode:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(0, 0, 0, .42); }
}
.dc-mode-name { font-family: "Songti SC", serif; font-size: 21px; letter-spacing: .1em; }
.dc-mode-desc { font-size: 10.5px; color: rgba(232, 240, 232, .45); }
.dc-mode-tag {
  position: absolute;
  right: 16px; top: 16px;
  padding: 2px 7px;
  border: 1px solid rgba(201, 99, 122, .5);
  border-radius: 3px;
  font-size: 8px;
  letter-spacing: .1em;
  color: #f0a9b6;
}

/* 桌面 */
.dc-table {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 120px);
  padding: 8px 0 14px;
}
.dc-dice {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 7vh;
  padding: 24px 4px 10px;
  perspective: 900px;
}
.dc-cup { display: grid; justify-items: center; gap: 10px; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .42)); }
.dc-die {
  position: relative;
  width: 100%;
  max-width: 74px;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  will-change: transform;
}
.dc-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 5px;
  border-radius: 11px;
  background: linear-gradient(160deg, #fbf6e9, #e6ddc7);
  color: var(--ink);
  font-family: "Songti SC", "STSong", serif;
  font-size: clamp(9px, 2.7vw, 12px);
  line-height: 1.25;
  text-align: center;
  letter-spacing: .02em;
  box-shadow:
    inset 0 0 0 1px rgba(160, 130, 90, .25),
    inset 0 -4px 8px rgba(160, 130, 90, .16),
    inset 0 3px 6px rgba(255, 255, 255, .9);
  backface-visibility: hidden;
}
.dc[data-mode="desire"] .dc-face {
  background: linear-gradient(160deg, #f6e6e4, #dcc0bd);
  color: #3a1a1e;
}
.dc-face.f0 { transform: translateZ(var(--d)); }
.dc-face.f1 { transform: rotateY(90deg) translateZ(var(--d)); }
.dc-face.f2 { transform: rotateY(180deg) translateZ(var(--d)); }
.dc-face.f3 { transform: rotateY(-90deg) translateZ(var(--d)); }
.dc-face.f4 { transform: rotateX(90deg) translateZ(var(--d)); }
.dc-face.f5 { transform: rotateX(-90deg) translateZ(var(--d)); }
.dc-die { --d: 37px; }
.dc-label {
  font-family: "Courier New", monospace;
  font-size: 8.5px;
  letter-spacing: .16em;
  color: rgba(232, 240, 232, .35);
}

.dc-result {
  display: grid;
  place-items: center;
  margin-bottom: auto;
  padding: 26px 10px 10px;
  text-align: center;
}
.dc-line {
  margin: 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: clamp(19px, 5.4vw, 24px);
  line-height: 1.85;
  letter-spacing: .04em;
  color: #f8f2e4;
  opacity: .55;
}
.dc-line.is-in { animation: dcLineIn .7s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes dcLineIn {
  0% { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  100% { opacity: 1; transform: none; filter: none; }
}
.dc-roll { margin-top: auto; }

@media (max-width: 360px) {
  .dc-die { --d: 31px; }
  .dc-face { font-size: 8.5px; padding: 4px; border-radius: 9px; }
  .dc-title { font-size: 27px; }
}

/* =========================================================
   v0.36 · 亲密愿望交换
   ========================================================= */
.wx {
  --paper: #f4ead6;
  --ink: #2a2118;
  --wax: #a8342a;
  --text: #f2ece0;
  width: 100%;
  padding: 0 0 24px;
  color: var(--text);
  border-radius: 18px;
  background:
    radial-gradient(110% 55% at 50% 0%, rgba(120, 78, 44, .3), transparent 70%),
    radial-gradient(90% 45% at 50% 100%, rgba(70, 42, 24, .24), transparent 70%);
}

/* 规则 */
.wx-intro { text-align: center; padding: 12px 0 20px; }
.wx-eyebrow { margin: 0; font-size: 8px; letter-spacing: .36em; color: rgba(226, 190, 140, .5); }
.wx-title {
  margin: 10px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 30px; font-weight: 500; letter-spacing: .1em;
  color: #f7efdf;
}
.wx-rules {
  margin: 24px 0 0;
  padding: 20px 20px;
  text-align: left;
  border: 1px solid rgba(226, 190, 140, .16);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(226, 190, 140, .05), transparent);
}
.wx-rules p {
  margin: 0 0 14px;
  font-family: "Songti SC", "STSong", serif;
  font-size: 12.5px;
  line-height: 1.95;
  color: rgba(242, 236, 224, .78);
}
.wx-rules p:last-child { margin-bottom: 0; }
.wx-rules-last { color: rgba(226, 190, 140, .85) !important; }
.wx-cta {
  width: 100%;
  margin-top: 24px;
  padding: 15px 20px;
  border: 0; border-radius: 999px;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 16px;
  letter-spacing: .24em; text-indent: .24em;
  color: #2a1a0c;
  background: linear-gradient(180deg, #f0dcb2, #cfa869);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform 140ms, filter 160ms, opacity 180ms;
}
.wx-cta:active { transform: translateY(1px); filter: brightness(1.06); }
.wx-cta:disabled { opacity: .32; cursor: default; }
.wx-ghost {
  padding: 15px 20px;
  border: 1px solid rgba(242, 236, 224, .18);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 14px;
  letter-spacing: .14em;
  color: rgba(242, 236, 224, .65);
}

/* 写 */
.wx-writeview { padding: 6px 0 20px; }
.wx-who { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.wx-who-badge {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(226, 190, 140, .55);
  font-family: "Songti SC", serif;
  font-size: 13px;
  color: #e8cfa0;
}
.wx-who-text { font-size: 10px; letter-spacing: .06em; color: rgba(242, 236, 224, .48); }
.wx-wtitle {
  margin: 0;
  font-family: "Songti SC", serif;
  font-size: 26px; font-weight: 500; letter-spacing: .08em;
}
.wx-wsub { margin: 10px 0 0; font-size: 12px; color: rgba(242, 236, 224, .45); letter-spacing: .04em; }

.wx-rows { display: grid; gap: 10px; margin-top: 20px; }
.wx-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(226, 190, 140, .18);
  background: rgba(255, 250, 240, .03);
}
.wx-prefix {
  font-family: "Songti SC", serif;
  font-size: 15px;
  color: rgba(242, 236, 224, .72);
  white-space: nowrap;
}
.wx-input {
  min-width: 0;
  border: 0; background: none; outline: none;
  border-bottom: 1px dashed rgba(226, 190, 140, .4);
  padding-bottom: 3px;
  font-family: "Hannotate SC", "HanziPen SC", "Kaiti SC", serif;
  font-size: 16px;
  color: #f8efdd;
}
.wx-input::placeholder { color: rgba(242, 236, 224, .22); }
.wx-del {
  width: 22px; height: 22px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  font-size: 13px; line-height: 1;
  color: rgba(242, 236, 224, .45);
}
.wx-add {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed rgba(226, 190, 140, .34);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(232, 207, 160, .8);
}
.wx-add:disabled { opacity: .3; cursor: default; }
.wx-hints { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 7px; }
.wx-hints-label { width: 100%; margin-bottom: 3px; font-size: 9.5px; letter-spacing: .16em; color: rgba(242, 236, 224, .32); }
.wx-hint {
  padding: 5px 10px;
  border: 1px solid rgba(242, 236, 224, .1);
  border-radius: 999px;
  font-size: 10px;
  color: rgba(242, 236, 224, .45);
}

/* 封存 */
.wx-sealview { text-align: center; padding: 50px 0 20px; }
.wx-envelope {
  position: relative;
  width: 190px; height: 126px;
  margin: 0 auto 26px;
  border-radius: 6px;
  background: linear-gradient(170deg, #f4ead6, #ddcaa6);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .7);
  animation: wxEnvIn .6s cubic-bezier(.2, .8, .2, 1);
}
@keyframes wxEnvIn {
  from { opacity: 0; transform: translateY(18px) rotate(-4deg); }
  to { opacity: 1; transform: none; }
}
.wx-envelope::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 62%;
  background: linear-gradient(180deg, rgba(200, 176, 132, .5), rgba(200, 176, 132, .12));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 6px 6px 0 0;
}
.wx-wax {
  position: absolute;
  left: 50%; top: 58%;
  width: 42px; height: 42px;
  margin: -21px 0 0 -21px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #c9564a, #8e2318);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4), inset 0 2px 3px rgba(255, 255, 255, .3);
  font-family: "Songti SC", serif;
  font-size: 15px;
  color: rgba(255, 230, 210, .85);
  animation: wxWax .5s cubic-bezier(.2, .8, .2, 1) .35s both;
}
@keyframes wxWax {
  from { opacity: 0; transform: scale(2.2); }
  to { opacity: 1; transform: scale(1); }
}
.wx-env-line {
  position: absolute;
  left: 18px; right: 18px; bottom: 20px;
  height: 1px;
  background: rgba(120, 96, 60, .3);
}
.wx-env-line.is-short { bottom: 32px; right: 60px; }
.wx-sealtitle {
  margin: 0;
  font-family: "Songti SC", serif;
  font-size: 26px; font-weight: 500; letter-spacing: .12em;
}
.wx-sealsub { margin: 12px 0 0; font-size: 11.5px; line-height: 1.8; color: rgba(242, 236, 224, .48); }

/* 交接 */
.wx-handover { text-align: center; padding: 70px 0 20px; }
.wx-handtitle {
  margin: 16px 0 0;
  font-family: "Songti SC", serif;
  font-size: 27px; font-weight: 500; letter-spacing: .08em;
}
.wx-handsub { margin: 16px 0 0; font-size: 11.5px; line-height: 1.9; color: rgba(242, 236, 224, .5); }

/* 拆封 */
.wx-revealview { padding: 10px 0 20px; text-align: center; }
.wx-revealtitle {
  margin: 12px 0 0;
  font-family: "Songti SC", serif;
  font-size: 26px; font-weight: 500; letter-spacing: .1em;
}
.wx-revealsub { margin: 10px 0 0; font-size: 10.5px; line-height: 1.8; color: rgba(242, 236, 224, .45); }

.wx-deckwrap { margin-top: 26px; }
.wx-deck {
  position: relative;
  height: 300px;
  max-width: 320px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px);
}
.wx-deck.is-in { animation: wxDeckIn .7s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes wxDeckIn {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
  to { opacity: 1; transform: none; }
}
.wx-card {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: translateY(calc(var(--i) * 3px)) rotate(calc((var(--i) - 1) * 0.9deg));
  transition: transform .66s cubic-bezier(.2, .8, .2, 1), opacity .4s;
}
.wx-card.is-top { z-index: 20; }
.wx-card.is-open { z-index: 30; transform: rotateY(180deg); }
.wx-card-back,
.wx-card-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  backface-visibility: hidden;
}
.wx-card-back {
  background:
    linear-gradient(160deg, #2c1c14, #1a100b);
  border: 1px solid rgba(226, 190, 140, .28);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 220, 170, .1);
}
.wx-card-wax {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #c9564a, #8e2318);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45), inset 0 2px 3px rgba(255, 255, 255, .28);
  font-family: "Songti SC", serif;
  font-size: 16px;
  color: rgba(255, 230, 210, .85);
}
.wx-card-face {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 22px;
  padding: 30px 26px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.05'/></svg>"),
    linear-gradient(175deg, #f7eeda, #e6d5b4);
  color: var(--ink);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.wx-card-who {
  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: .24em;
  color: rgba(120, 96, 60, .75);
}
.wx-card-text {
  font-family: "Hannotate SC", "HanziPen SC", "Kaiti SC", serif;
  font-size: 19px;
  line-height: 1.9;
  text-align: left;
  text-indent: 0;
}
.wx-deck-progress { margin: 14px 0 0; font-size: 10px; letter-spacing: .16em; color: rgba(242, 236, 224, .35); }
.wx-reveal-foot { margin-top: 16px; }

@media (max-width: 360px) {
  .wx-title { font-size: 26px; }
  .wx-deck { height: 260px; }
  .wx-card-text { font-size: 17px; }
  .wx-prefix { font-size: 13.5px; }
  .wx-input { font-size: 14.5px; }
}

/* v0.36.1 拆封页仪式感 */
.wx-hint.is-adult {
  border-color: rgba(216, 85, 106, .32);
  color: rgba(240, 170, 185, .72);
}
.wx-hint:active { transform: scale(.96); }

.wx-decide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-top: 16px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 260ms, transform 260ms;
}
.wx-decide.is-on { opacity: 1; transform: none; pointer-events: auto; }
.wx-decline,
.wx-accept {
  padding: 16px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 15px;
  letter-spacing: .16em;
  text-indent: .16em;
  transition: transform 140ms, filter 160ms;
}
.wx-decline {
  border: 1px solid rgba(242, 236, 224, .2);
  background: transparent;
  color: rgba(242, 236, 224, .62);
}
.wx-accept {
  border: 0;
  color: #f8efe0;
  background: linear-gradient(180deg, #b8443a, #8e2318);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.wx-decline:active,
.wx-accept:active { transform: scale(.96); }

.wx-reveal-foot.is-hidden { visibility: hidden; }

/* 盖章 */
.wx-card.is-accepted .wx-card-face::after {
  content: "答应";
  position: absolute;
  right: 22px; bottom: 22px;
  display: grid;
  place-items: center;
  width: 66px; height: 66px;
  border: 2px solid rgba(168, 52, 42, .75);
  border-radius: 50%;
  font-family: "Songti SC", serif;
  font-size: 16px;
  letter-spacing: .06em;
  text-indent: .06em;
  color: #a8342a;
  transform: rotate(-14deg) scale(2.4);
  opacity: 0;
  animation: wxStamp .42s cubic-bezier(.2, .8, .2, 1) forwards;
  box-shadow: 0 0 0 3px rgba(168, 52, 42, .12);
}
@keyframes wxStamp {
  0% { opacity: 0; transform: rotate(-26deg) scale(2.6); }
  55% { opacity: .95; transform: rotate(-13deg) scale(.94); }
  100% { opacity: .9; transform: rotate(-14deg) scale(1); }
}

/* 折起收好 */
.wx-card.is-declined {
  transform: rotateY(180deg) rotateX(-88deg) translateY(40px) scale(.9) !important;
  opacity: 0;
  transition: transform .72s cubic-bezier(.4, 0, .6, 1), opacity .72s;
}

/* 收尾统计 */
.wx-finish { padding: 30px 10px; text-align: center; opacity: 0; animation: wxFinIn .6s .1s forwards; }
@keyframes wxFinIn { to { opacity: 1; } }
.wx-finish-kicker { margin: 0; font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .26em; color: rgba(242, 236, 224, .4); }
.wx-finish-nums { display: flex; justify-content: center; gap: 40px; margin-top: 20px; }
.wx-finish-nums span { font-size: 10px; letter-spacing: .16em; color: rgba(242, 236, 224, .42); }
.wx-finish-nums b {
  display: block;
  margin-bottom: 5px;
  font-family: "Songti SC", serif;
  font-size: 38px;
  font-weight: 500;
  color: #f4ead6;
}
.wx-finish-note { margin: 20px 0 0; font-size: 11px; color: rgba(242, 236, 224, .45); }

/* v0.36.2 两封信交换 */
.wx-swapview { padding: 34px 0 20px; text-align: center; }
.wx-swaptitle {
  margin: 12px 0 0;
  font-family: "Songti SC", serif;
  font-size: 30px; font-weight: 500; letter-spacing: .24em; text-indent: .24em;
}
.wx-swapsub { margin: 12px 0 0; font-size: 11.5px; line-height: 1.8; color: rgba(242, 236, 224, .5); }
.wx-letters {
  position: relative;
  height: 210px;
  margin: 34px auto 0;
  max-width: 320px;
}
.wx-letter {
  position: absolute;
  left: 50%; top: 50%;
  width: 150px; height: 100px;
  margin: -50px 0 0 -75px;
  border-radius: 6px;
  background: linear-gradient(170deg, #f4ead6, #ddcaa6);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .7);
  display: grid;
  place-items: center;
  gap: 6px;
  opacity: 0;
}
.wx-letter::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(200, 176, 132, .45), rgba(200, 176, 132, .1));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 6px 6px 0 0;
}
.wx-letter-wax {
  position: relative;
  z-index: 2;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #c9564a, #8e2318);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4), inset 0 1px 2px rgba(255, 255, 255, .3);
  font-family: "Songti SC", serif;
  font-size: 12px;
  color: rgba(255, 230, 210, .85);
}
.wx-letter-who {
  position: absolute;
  left: 0; right: 0; bottom: 9px;
  font-family: "Courier New", monospace;
  font-size: 8.5px;
  letter-spacing: .18em;
  color: rgba(120, 96, 60, .7);
}
.wx-letter.is-a { --dir: -1; }
.wx-letter.is-b { --dir: 1; }

.wx-letters.is-swapping .wx-letter.is-a {
  animation: wxSwapA 2.6s cubic-bezier(.45, .05, .3, 1) forwards;
}
.wx-letters.is-swapping .wx-letter.is-b {
  animation: wxSwapB 2.6s cubic-bezier(.45, .05, .3, 1) forwards;
}
@keyframes wxSwapA {
  0%   { opacity: 0; transform: translateX(-150px) translateY(0) rotate(-14deg); }
  16%  { opacity: 1; transform: translateX(-62px) translateY(0) rotate(-6deg); }
  30%  { opacity: 1; transform: translateX(-62px) translateY(0) rotate(-6deg); }
  62%  { opacity: 1; transform: translateX(34px) translateY(-44px) rotate(10deg); }
  82%  { opacity: 1; transform: translateX(4px) translateY(-2px) rotate(-2deg); }
  100% { opacity: 1; transform: translateX(2px) translateY(-4px) rotate(-3deg); }
}
@keyframes wxSwapB {
  0%   { opacity: 0; transform: translateX(150px) translateY(0) rotate(14deg); }
  16%  { opacity: 1; transform: translateX(62px) translateY(0) rotate(6deg); }
  30%  { opacity: 1; transform: translateX(62px) translateY(0) rotate(6deg); }
  62%  { opacity: 1; transform: translateX(-34px) translateY(44px) rotate(-10deg); }
  82%  { opacity: 1; transform: translateX(-4px) translateY(2px) rotate(2deg); }
  100% { opacity: 1; transform: translateX(-2px) translateY(4px) rotate(3deg); }
}
.wx-swap-note {
  margin: 20px 0 0;
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(242, 236, 224, .45);
  transition: color 300ms;
}
.wx-swapfoot { margin-top: 22px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 400ms, transform 400ms; }
.wx-swapfoot.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* =========================================================
   v0.37 · 情侣七日挑战（撕日历）
   ========================================================= */
.wk {
  --paper: #f6eeda;
  --ink: #2d2418;
  --night: #33181f;
  --text: #f2ece0;
  width: 100%;
  padding: 0 0 24px;
  color: var(--text);
  border-radius: 18px;
  background:
    radial-gradient(110% 55% at 50% 0%, rgba(110, 82, 48, .28), transparent 70%),
    radial-gradient(90% 45% at 50% 100%, rgba(60, 44, 26, .22), transparent 70%);
}

/* 规则 */
.wk-intro { text-align: center; padding: 14px 0 20px; }
.wk-eyebrow { margin: 0; font-size: 8px; letter-spacing: .38em; color: rgba(226, 196, 150, .5); }
.wk-title {
  margin: 10px 0 0;
  font-family: "Songti SC", serif;
  font-size: 30px; font-weight: 500; letter-spacing: .1em;
  color: #f7efdf;
}
.wk-lede { margin: 12px auto 0; max-width: 290px; font-size: 12px; line-height: 1.85; color: rgba(240, 232, 216, .55); }
.wk-rules {
  margin: 24px 0 0;
  padding: 18px 20px;
  text-align: left;
  border: 1px solid rgba(226, 196, 150, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}
.wk-rules p {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  margin: 0 0 11px;
  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(240, 232, 216, .76);
}
.wk-rules p:last-child { margin-bottom: 0; }
.wk-rules b { font-family: "Courier New", monospace; font-size: 9px; color: rgba(226, 196, 150, .75); padding-top: 2px; }
.wk-cta {
  width: 100%;
  margin-top: 24px;
  padding: 15px 20px;
  border: 0; border-radius: 999px;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 16px;
  letter-spacing: .24em; text-indent: .24em;
  color: #2a1d10;
  background: linear-gradient(180deg, #f0d9ac, #cfa76c);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform 140ms, filter 160ms;
}
.wk-cta:active { transform: translateY(1px); filter: brightness(1.06); }

/* 选版本 */
.wk-step { padding: 6px 0 20px; text-align: center; }
.wk-back {
  display: block; margin: 0 0 14px; padding: 6px 2px;
  border: 0; background: none; cursor: pointer;
  font-size: 11px; letter-spacing: .1em; color: rgba(240, 232, 216, .45);
}
.wk-step-no { margin: 0; font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .3em; color: rgba(240, 232, 216, .4); }
.wk-step-title {
  margin: 10px 0 0;
  font-family: "Songti SC", serif;
  font-size: 25px; font-weight: 500; letter-spacing: .08em;
}
.wk-modes { display: grid; gap: 13px; margin-top: 24px; }
.wk-mode {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 22px 20px;
  text-align: left;
  border-radius: 14px;
  cursor: pointer;
  color: var(--text);
  border: 1px solid rgba(240, 232, 216, .12);
  background: rgba(255, 255, 255, .025);
  transition: transform 200ms, border-color 200ms, box-shadow 200ms;
}
.wk-mode.is-day { border-color: rgba(207, 167, 108, .32); }
.wk-mode.is-night { border-color: rgba(201, 99, 122, .34); }
.wk-mode.is-mix { border-color: rgba(150, 170, 210, .3); }
.wk-mode:active { transform: scale(.985); }
@media (hover: hover) {
  .wk-mode:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(0, 0, 0, .4); }
}
.wk-mode-name { font-family: "Songti SC", serif; font-size: 20px; letter-spacing: .1em; }
.wk-mode-name em {
  margin-left: 8px;
  padding: 1px 5px;
  border: 1px solid rgba(201, 99, 122, .5);
  border-radius: 3px;
  font-size: 8px; font-style: normal;
  color: #f0a9b6;
}
.wk-mode-desc { font-size: 10.5px; color: rgba(240, 232, 216, .45); }
.wk-mode-note { margin: 16px 0 0; font-size: 10px; color: rgba(240, 232, 216, .32); }

/* 日历 ✅ */
.wk-boardview { padding: 6px 0 20px; }
.wk-board-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2px 12px;
}
.wk-left { font-size: 11px; letter-spacing: .1em; color: rgba(240, 232, 216, .5); }
.wk-left b { font-family: "Courier New", monospace; font-size: 16px; color: #e8cb96; }
.wk-redraw {
  padding: 6px 14px;
  border: 1px solid rgba(240, 232, 216, .16);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: rgba(240, 232, 216, .6);
}
.wk-cards { display: grid; gap: 10px; }

.wk-card {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 18px 18px 16px;
  text-align: left;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(120, 96, 60, .05) 26px 27px),
    linear-gradient(172deg, #f8f1df, #e9e0c9);
  border-radius: 3px 3px 5px 5px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: transform 160ms, box-shadow 200ms;
}
.wk-card.is-night {
  color: #f4e6dd;
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(255, 200, 190, .05) 26px 27px),
    linear-gradient(172deg, #3a1a22, #261118);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.wk-card:active { transform: scale(.99); }
.wk-tear {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 6px;
  background:
    repeating-linear-gradient(90deg,
      rgba(120, 96, 60, .18) 0 4px,
      transparent 4px 8px);
  -webkit-mask: radial-gradient(circle at 4px 0, transparent 3px, #000 3.5px) repeat-x 0 0 / 8px 7px;
  mask: radial-gradient(circle at 4px 0, transparent 3px, #000 3.5px) repeat-x 0 0 / 8px 7px;
}
.wk-card.is-night .wk-tear {
  background: repeating-linear-gradient(90deg, rgba(255, 200, 190, .16) 0 4px, transparent 4px 8px);
}
.wk-day {
  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: .24em;
  color: rgba(120, 92, 56, .7);
}
.wk-card.is-night .wk-day { color: rgba(240, 170, 185, .65); }
.wk-task {
  font-family: "Songti SC", serif;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .02em;
}

.wk-card.is-tearing { animation: wkTear .78s cubic-bezier(.4, 0, .55, 1) forwards; z-index: 5; }
@keyframes wkTear {
  0% { transform: none; box-shadow: 0 10px 22px rgba(0, 0, 0, .34); }
  10% { transform: translateY(-9px) rotate(-1.5deg) scale(1.015); box-shadow: 0 22px 34px rgba(0, 0, 0, .42); }
  38% { transform: translateY(-4px) rotate(2deg) scale(1.01); }
  100% { transform: translateY(150px) rotate(13deg) scale(.62); opacity: 0; }
}
.wk-card.is-gone { display: none; }

.wk-addrow { display: flex; gap: 9px; margin-top: 14px; }
.wk-input {
  flex: 1;
  min-width: 0;
  padding: 12px 15px;
  border: 1px dashed rgba(240, 232, 216, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  outline: none;
  font-size: 12px;
  color: var(--text);
}
.wk-input::placeholder { color: rgba(240, 232, 216, .25); }
.wk-addbtn {
  padding: 0 18px;
  border: 1px solid rgba(240, 232, 216, .2);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  color: rgba(240, 232, 216, .68);
}
.wk-hint { margin: 14px 0 0; text-align: center; font-size: 10px; color: rgba(240, 232, 216, .3); }

@media (max-width: 360px) {
  .wk-title { font-size: 26px; }
  .wk-task { font-size: 14px; }
}

/* v0.37.1 确认 / 正式日历 / 庆祝 */
.wk-resume {
  width: 100%;
  margin-top: 20px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px dashed rgba(226, 196, 150, .35);
  border-radius: 12px;
  background: rgba(226, 196, 150, .06);
  cursor: pointer;
  color: rgba(240, 232, 216, .7);
  font-size: 11px;
  text-align: left;
}
.wk-resume b { font-family: "Courier New", monospace; font-size: 10.5px; font-weight: 400; color: #e8cb96; }

/* 草稿卡 */
.wk-card.is-draftcard {
  cursor: default;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.wk-cards.is-draft .wk-card:nth-child(2n) { transform: rotate(.35deg); }
.wk-cards.is-draft .wk-card:nth-child(3n) { transform: rotate(-.4deg); }

/* 正式日历 */
.wk-plan-head { text-align: center; padding: 6px 0 20px; }
.wk-plan-kicker { margin: 0; font-family: "Courier New", monospace; font-size: 8px; letter-spacing: .34em; color: rgba(226, 196, 150, .5); }
.wk-plan-title {
  margin: 10px 0 0;
  font-family: "Songti SC", serif;
  font-size: 28px; font-weight: 500; letter-spacing: .2em; text-indent: .2em;
  color: #f7efdf;
}
.wk-plan-range { margin: 10px 0 0; font-family: "Courier New", monospace; font-size: 10.5px; letter-spacing: .1em; color: rgba(240, 232, 216, .45); }
.wk-cards.is-plan .wk-card { padding: 20px 20px 18px; }
.wk-cards.is-plan .wk-card::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 8px;
  height: 1px;
  background: linear-gradient(90deg, rgba(120, 96, 60, .18), transparent);
}
.wk-cards.is-plan .wk-card.is-night::after {
  background: linear-gradient(90deg, rgba(255, 200, 190, .16), transparent);
}

/* 庆祝 */
.wk-celebrate {
  position: relative;
  padding: 70px 10px 30px;
  text-align: center;
  overflow: hidden;
  min-height: calc(100dvh - 120px);
}
.wk-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wk-confetti i {
  position: absolute;
  top: -20px;
  left: var(--l);
  width: var(--s);
  height: calc(var(--s) * 1.6);
  background: var(--c);
  border-radius: 1px;
  opacity: 0;
  animation: wkFall var(--t) linear var(--d) infinite;
  transform: rotate(var(--r));
}
@keyframes wkFall {
  0% { opacity: 0; transform: translateY(0) rotate(var(--r)); }
  8% { opacity: .9; }
  100% { opacity: 0; transform: translateY(105vh) rotate(calc(var(--r) + 540deg)); }
}
.wk-cele-kicker { position: relative; margin: 0; font-family: "Courier New", monospace; font-size: 8.5px; letter-spacing: .36em; color: rgba(226, 196, 150, .6); }
.wk-cele-title {
  position: relative;
  margin: 18px 0 0;
  font-family: "Songti SC", serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .16em;
  color: #faf3e4;
  text-shadow: 0 0 44px rgba(232, 203, 150, .4);
  animation: wkCeleIn .9s cubic-bezier(.2, .8, .2, 1);
}
@keyframes wkCeleIn {
  from { opacity: 0; transform: scale(.86); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
.wk-cele-sub { position: relative; margin: 24px auto 0; max-width: 290px; font-size: 11.5px; line-height: 1.9; color: rgba(240, 232, 216, .5); }
.wk-celebrate .wk-cta { position: relative; margin-top: 44px; }

/* =========================================================
   v0.38 · 情侣荒诞法庭
   ========================================================= */
.ct {
  --wood: #1d1610;
  --gold: #c9a86a;
  --gold2: #efd9a8;
  --paper: #f8f1e2;
  --ink: #2a2118;
  --text: #f2e9d8;
  width: 100%;
  padding: 0 0 24px;
  color: var(--text);
  border-radius: 18px;
  background:
    radial-gradient(110% 55% at 50% 0%, rgba(120, 86, 44, .3), transparent 70%),
    radial-gradient(90% 45% at 50% 100%, rgba(70, 46, 22, .24), transparent 70%);
}
.ct-eyebrow { margin: 0; font-size: 8px; letter-spacing: .38em; color: rgba(201, 168, 106, .55); }
.ct-title {
  margin: 10px 0 0;
  font-family: "Songti SC", serif;
  font-size: 30px; font-weight: 500; letter-spacing: .14em;
  color: #f7efdf;
}
.ct-lede { margin: 12px auto 0; font-size: 12px; line-height: 1.85; color: rgba(242, 233, 216, .52); }
.ct-sect {
  margin: 26px 0 12px;
  font-family: "Courier New", monospace;
  font-size: 9px; letter-spacing: .3em;
  color: rgba(201, 168, 106, .6);
}
.ct-cta {
  width: 100%;
  margin-top: 22px;
  padding: 15px 20px;
  border: 0; border-radius: 999px;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 16px;
  letter-spacing: .22em; text-indent: .22em;
  color: #2a1d10;
  background: linear-gradient(180deg, var(--gold2), var(--gold));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform 140ms, filter 160ms;
}
.ct-cta:active { transform: translateY(1px); filter: brightness(1.06); }
.ct-cta-sm { margin-top: 0; padding: 12px 18px; font-size: 14px; width: auto; }
.ct-ghost {
  padding: 14px 20px;
  border: 1px solid rgba(242, 233, 216, .18);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 14px;
  letter-spacing: .12em;
  color: rgba(242, 233, 216, .65);
}

/* 立案 */
.ct-lobby { text-align: center; padding: 12px 0 20px; }
.ct-cases { display: grid; gap: 8px; text-align: left; }
.ct-case {
  padding: 14px 16px;
  border: 1px solid rgba(242, 233, 216, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .022);
  cursor: pointer;
  color: rgba(242, 233, 216, .8);
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
  transition: border-color 180ms, background 180ms, transform 140ms;
}
.ct-case:active { transform: scale(.992); }
.ct-case:hover { border-color: rgba(201, 168, 106, .5); background: rgba(201, 168, 106, .07); }
.ct-custom { display: flex; gap: 9px; margin-top: 16px; }
.ct-input {
  flex: 1; min-width: 0;
  padding: 13px 15px;
  border: 1px dashed rgba(201, 168, 106, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  outline: none;
  font-size: 12px;
  color: var(--text);
}
.ct-input::placeholder { color: rgba(242, 233, 216, .25); }

/* 身份 */
.ct-step { padding: 6px 0 20px; text-align: center; }
.ct-back {
  display: block; margin: 0 0 14px; padding: 6px 2px;
  border: 0; background: none; cursor: pointer;
  font-size: 11px; letter-spacing: .1em; color: rgba(242, 233, 216, .45);
}
.ct-step-no { margin: 0; font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .3em; color: rgba(201, 168, 106, .6); }
.ct-step-title { margin: 10px 0 0; font-family: "Songti SC", serif; font-size: 25px; font-weight: 500; letter-spacing: .08em; }
.ct-case-line { margin: 10px 0 0; font-size: 11px; color: rgba(242, 233, 216, .45); }
.ct-sides { display: grid; gap: 13px; margin-top: 24px; text-align: left; }
.ct-side {
  display: grid;
  gap: 7px;
  padding: 16px 18px;
  border-radius: 13px;
  border: 1px solid rgba(242, 233, 216, .12);
  background: rgba(255, 255, 255, .025);
}
.ct-side.is-p { border-color: rgba(143, 178, 238, .3); }
.ct-side.is-d { border-color: rgba(226, 105, 90, .3); }
.ct-side span { font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .2em; opacity: .6; }
.ct-side.is-p span { color: #8fb2ee; }
.ct-side.is-d span { color: #e2695a; }
.ct-side input {
  border: 0; background: none; outline: none;
  font-family: "Songti SC", serif;
  font-size: 20px;
  color: #f7efdf;
}
.ct-side input::placeholder { color: rgba(242, 233, 216, .22); }
.ct-side em { font-size: 9.5px; font-style: normal; color: rgba(242, 233, 216, .32); }

/* 法庭 */
.ct-court { padding: 6px 0 18px; }
.ct-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  font-family: "Courier New", monospace;
  font-size: 9px; letter-spacing: .1em;
  color: rgba(242, 233, 216, .4);
}
.ct-sides-mini { font-family: "Songti SC", serif; font-size: 10px; }
.ct-sides-mini .is-p { color: #8fb2ee; }
.ct-sides-mini .is-d { color: #e2695a; }
.ct-progress { height: 2px; margin-top: 10px; border-radius: 2px; background: rgba(242, 233, 216, .1); overflow: hidden; }
.ct-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold2), var(--gold)); transition: width 400ms; }

.ct-stage { display: grid; place-items: center; gap: 14px; padding: 34px 0 10px; text-align: center; }
.ct-stage-label {
  margin: 0;
  font-family: "Songti SC", serif;
  font-size: 24px; font-weight: 500; letter-spacing: .12em;
  color: #f8f0de;
}
.ct-stage-who { margin: -4px 0 0; font-size: 11px; color: rgba(242, 233, 216, .45); }
.ct-stage-who b { color: var(--gold2); }
.ct-stage-tip { margin: 0; max-width: 270px; font-size: 11px; line-height: 1.8; color: rgba(242, 233, 216, .42); }
.ct-dial { margin: 6px 0; }
.ct-dial:empty { display: none; }
.ct-dialwrap {
  position: relative;
  width: 154px; height: 154px;
  display: grid; place-items: center;
}
.ct-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(var(--gold2) calc(var(--p) * 360deg), rgba(242, 233, 216, .08) 0);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%);
  mask: radial-gradient(circle, transparent 62%, #000 63%);
  transition: background 120ms linear;
}
.ct-time {
  position: relative;
  z-index: 2;
  font-family: "Courier New", monospace;
  font-size: 30px;
  font-weight: 700;
  color: #f8f0de;
  letter-spacing: .04em;
}
.ct-dial.is-urgent .ct-ring { background: conic-gradient(#ff8a6a calc(var(--p) * 360deg), rgba(242, 233, 216, .08) 0); }
.ct-dial.is-urgent .ct-time { color: #ff8a6a; animation: ctPulse .7s ease-in-out infinite; }
@keyframes ctPulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

.ct-stage-body { width: 100%; }
.ct-evi { display: grid; gap: 10px; margin-top: 10px; }
.ct-evi-input {
  width: 100%;
  min-height: 92px;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(242, 233, 216, .14);
  border-radius: 11px;
  background: rgba(255, 255, 255, .025);
  outline: none;
  resize: none;
  font-family: "Songti SC", serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
}
.ct-evi-input::placeholder { color: rgba(242, 233, 216, .25); }
.ct-evi-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ct-event {
  margin-top: 12px;
  padding: 22px 18px;
  border-radius: 13px;
  border: 1px solid rgba(201, 168, 106, .4);
  background: linear-gradient(180deg, rgba(201, 168, 106, .1), rgba(201, 168, 106, .02));
  opacity: 0;
  transform: translateY(12px) scale(.97);
}
.ct-event.is-in { animation: ctEventIn .6s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes ctEventIn { to { opacity: 1; transform: none; } }
.ct-event-kind {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid rgba(201, 168, 106, .5);
  border-radius: 3px;
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--gold2);
}
.ct-event-text {
  margin: 14px 0 0;
  font-family: "Songti SC", serif;
  font-size: 15px;
  line-height: 1.85;
  text-align: left;
  color: #f8f0de;
}

.ct-foot { margin-top: 12px; }

/* 敲锤 */
.ct-hammer { text-align: center; padding: 60px 0 20px; }
.ct-gavel {
  position: relative;
  width: 120px; height: 120px;
  margin: 0 auto 26px;
  transform-origin: 70% 30%;
  transform: rotate(-32deg);
}
.ct-gavel span {
  position: absolute;
  left: 22px; top: 54px;
  width: 76px; height: 22px;
  border-radius: 4px;
  background: linear-gradient(180deg, #8a5a2f, #5c3a1c);
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, .35), 0 6px 14px rgba(0, 0, 0, .45);
}
.ct-gavel span::after {
  content: "";
  position: absolute;
  right: 8px; top: 8px; bottom: 8px;
  width: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, #a8713e, #7a4a24);
}
.ct-gavel.is-bang { animation: ctBang .55s cubic-bezier(.6, 0, .4, 1) forwards; }
@keyframes ctBang {
  0% { transform: rotate(-32deg); }
  55% { transform: rotate(12deg); }
  70% { transform: rotate(6deg); }
  100% { transform: rotate(8deg); }
}
.ct-hammer-title { margin: 0; font-family: "Songti SC", serif; font-size: 30px; font-weight: 500; letter-spacing: .16em; }
.ct-hammer-sub { margin: 14px 0 0; font-size: 11.5px; color: rgba(242, 233, 216, .45); }

/* 判决 */
.ct-verdictview { padding: 6px 0 20px; text-align: center; }
.ct-verdict-title { margin: 10px 0 0; font-family: "Songti SC", serif; font-size: 26px; font-weight: 500; letter-spacing: .1em; }
.ct-verdict-sub { margin: 10px 0 0; font-size: 11px; color: rgba(242, 233, 216, .45); }
.ct-verdicts { display: grid; gap: 9px; margin-top: 22px; }
.ct-verdict {
  padding: 15px 16px;
  border: 1px solid rgba(242, 233, 216, .14);
  border-radius: 11px;
  background: rgba(255, 255, 255, .022);
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 15px;
  letter-spacing: .04em;
  color: rgba(242, 233, 216, .82);
  transition: border-color 180ms, background 180ms;
}
.ct-verdict.is-on {
  border-color: var(--gold);
  background: rgba(201, 168, 106, .12);
  color: #f8f0de;
  box-shadow: 0 0 0 1px rgba(201, 168, 106, .18);
}
.ct-agree { display: grid; gap: 8px; margin-top: 20px; text-align: left; }
.ct-agree span { font-size: 9.5px; letter-spacing: .16em; color: rgba(242, 233, 216, .35); }
.ct-agree input {
  padding: 13px 15px;
  border: 1px dashed rgba(242, 233, 216, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .022);
  outline: none;
  font-size: 12px;
  color: var(--text);
}

/* 结案书 */
.ct-closedview { padding: 6px 0 20px; }
.ct-paper {
  position: relative;
  padding: 30px 24px 26px;
  border-radius: 3px;
  color: var(--ink);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='150' height='150' filter='url(%23n)' opacity='.045'/></svg>"),
    linear-gradient(178deg, #fbf5e8, #eee3cd);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .8);
  opacity: 0;
  transform: translateY(16px);
}
.ct-paper.is-in { animation: ctPaperIn .8s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes ctPaperIn { to { opacity: 1; transform: none; } }
.ct-paper-head { text-align: center; padding-bottom: 16px; border-bottom: 1px solid rgba(120, 96, 60, .25); }
.ct-paper-brand { margin: 0; font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .3em; color: #8a755b; }
.ct-paper-head h2 { margin: 8px 0 0; font-family: "Songti SC", serif; font-size: 26px; font-weight: 500; letter-spacing: .3em; text-indent: .3em; }
.ct-paper-no { margin: 8px 0 0; font-family: "Courier New", monospace; font-size: 9.5px; color: #9a8a72; }
.ct-paper-row { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px dashed rgba(120, 96, 60, .18); font-size: 12px; }
.ct-paper-row span { flex: none; width: 32px; color: #8a755b; }
.ct-paper-row b { font-weight: 500; line-height: 1.6; }
.ct-paper-block { padding: 13px 0; border-bottom: 1px dashed rgba(120, 96, 60, .18); }
.ct-paper-block > span { display: block; margin-bottom: 7px; font-size: 9.5px; letter-spacing: .18em; color: #8a755b; }
.ct-paper-block p { margin: 0; font-size: 11.5px; line-height: 1.8; color: #3a2f24; }
.ct-paper-verdict { font-family: "Songti SC", serif; font-size: 19px !important; color: #a8342a !important; letter-spacing: .06em; }
.ct-paper-end { margin: 22px 0 0; font-family: "Songti SC", serif; font-size: 14px; letter-spacing: .1em; }
.ct-paper-sign {
  display: flex; justify-content: space-between;
  margin-top: 30px;
  font-family: "Songti SC", serif;
  font-size: 11px;
  color: #7a6750;
}
.ct-paper-date { margin: 20px 0 0; text-align: center; font-family: "Courier New", monospace; font-size: 10px; color: #9a8a72; }
.ct-stamp {
  position: absolute;
  right: 20px; bottom: 70px;
  display: grid; place-items: center;
  width: 72px; height: 72px;
  border: 2px solid rgba(168, 52, 42, .72);
  border-radius: 50%;
  font-family: "Songti SC", serif;
  font-size: 17px;
  letter-spacing: .1em; text-indent: .1em;
  color: #a8342a;
  transform: rotate(-13deg);
  opacity: .9;
}
.ct-closed-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.ct-closed-acts .ct-cta { margin-top: 0; }

@media (max-width: 360px) {
  .ct-title { font-size: 26px; }
  .ct-ring { width: 128px; height: 128px; }
  .ct-time { font-size: 26px; }
  .ct-paper { padding: 24px 18px 22px; }
}

/* v0.38.1 仿真结案书 */
.ct-paper {
  position: relative;
  padding: 34px 28px 30px;
  border-radius: 2px;
  color: #2b2115;
  background: #f4e9d0;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .55),
    0 2px 0 rgba(255, 255, 255, .6) inset,
    inset 0 0 60px rgba(150, 118, 70, .16);
  opacity: 0;
  transform: translateY(18px) rotate(-.4deg);
  overflow: hidden;
}
.ct-paper.is-in { animation: ctPaperIn 1s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes ctPaperIn { to { opacity: 1; transform: rotate(-.4deg); } }

/* 纸纹 */
.ct-paper-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23g)' opacity='.14'/></svg>");
  mix-blend-mode: multiply;
}
/* 淡红格线 */
.ct-paper-lines {
  position: absolute;
  inset: 26px 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 33px, rgba(176, 90, 70, .1) 33px 34px);
  -webkit-mask: linear-gradient(180deg, #000, transparent 96%);
  mask: linear-gradient(180deg, #000, transparent 96%);
  opacity: .7;
}
/* 暗角 */
.ct-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 52%, rgba(150, 120, 70, .16) 100%);
}

.ct-ph { position: relative; z-index: 2; text-align: center; }
.ct-court-name {
  margin: 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 13px;
  letter-spacing: .42em;
  text-indent: .42em;
  color: #8e2f24;
  font-weight: 600;
}
.ct-rule-double { display: grid; gap: 2px; margin: 10px 0 16px; }
.ct-rule-double i { height: 2px; background: #a8342a; opacity: .78; }
.ct-rule-double i:last-child { height: 1px; opacity: .5; }
.ct-ph-title {
  margin: 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: .5em;
  text-indent: .5em;
  color: #241a10;
}
.ct-ph-no {
  margin: 14px 0 0;
  font-family: "Kaiti SC", "STKaiti", "Songti SC", serif;
  font-size: 12px;
  letter-spacing: .08em;
  color: #6b5a44;
}

.ct-pb {
  position: relative;
  z-index: 2;
  margin-top: 24px;
  padding-top: 6px;
}
.ct-pb p {
  margin: 0 0 13px;
  font-family: "Songti SC", "STSong", serif;
  font-size: 13px;
  line-height: 2;
  text-align: justify;
  text-indent: 2em;
  color: #32271a;
}
.ct-em { font-weight: 600; color: #241a10; padding: 0 1px; }
.ct-quote { color: #3a2c1c; }
.ct-bh {
  margin: 20px 0 8px !important;
  text-indent: 0 !important;
  font-size: 13px !important;
  letter-spacing: .12em;
  color: #8e2f24 !important;
  font-weight: 600;
}
.ct-ind { padding-left: 2em; }
.ct-small { font-size: 11.5px !important; color: #5a4a36 !important; }
.ct-ruling {
  margin: 6px 0 0 !important;
  padding: 14px 0 !important;
  text-align: center !important;
  text-indent: 0 !important;
  font-family: "Songti SC", "STSong", serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  color: #a8342a !important;
  border-top: 1px solid rgba(140, 100, 60, .3);
  border-bottom: 1px solid rgba(140, 100, 60, .3);
  text-shadow: 0 0 1px rgba(168, 52, 42, .5);
}
.ct-endp { margin-top: 26px !important; text-align: right !important; text-indent: 0 !important; }

.ct-pf { position: relative; z-index: 2; margin-top: 28px; }
.ct-signrow { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ct-sign { display: grid; gap: 6px; }
.ct-sign span { font-size: 10px; letter-spacing: .2em; color: #7a6750; }
.ct-sign i {
  display: block;
  height: 34px;
  font-family: "Hannotate SC", "HanziPen SC", "Kaiti SC", cursive;
  font-size: 21px;
  font-style: normal;
  line-height: 34px;
  color: #1f3a6b;
  border-bottom: 1px solid rgba(90, 70, 44, .4);
  transform: rotate(-1.2deg);
}
.ct-sign:last-child i { transform: rotate(.8deg); text-align: right; }
.ct-pdate {
  margin: 18px 0 0;
  text-align: right;
  font-family: "Kaiti SC", "STKaiti", serif;
  font-size: 12px;
  letter-spacing: .06em;
  color: #5a4a36;
}
.ct-pfoot {
  margin: 20px 0 0;
  text-align: center;
  font-size: 9px;
  letter-spacing: .16em;
  color: rgba(120, 96, 60, .55);
}

/* 印章 */
.ct-seal {
  position: absolute;
  right: 8px; bottom: 36px;
  width: 112px; height: 112px;
  color: #a8342a;
  opacity: .72;
  transform: rotate(-12deg);
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: multiply;
  animation: ctSealIn .5s cubic-bezier(.2, .8, .2, 1) .7s both;
}
@keyframes ctSealIn {
  0% { opacity: 0; transform: rotate(-30deg) scale(2); }
  60% { opacity: .8; transform: rotate(-11deg) scale(.95); }
  100% { opacity: .72; transform: rotate(-12deg) scale(1); }
}
.ct-seal-arc {
  font-family: "Songti SC", serif;
  font-size: 11px;
  letter-spacing: .14em;
  fill: currentColor;
}
.ct-seal-big {
  font-family: "Songti SC", serif;
  font-size: 22px;
  font-weight: 600;
  fill: currentColor;
}

/* =========================================================
   v0.39 · 未来交换信箱
   ========================================================= */
.ml {
  --text: #f2ece0;
  --dim: rgba(240, 232, 216, .5);
  width: 100%;
  padding: 0 0 24px;
  color: var(--text);
  border-radius: 18px;
  background:
    radial-gradient(110% 55% at 50% 0%, rgba(110, 86, 54, .28), transparent 70%),
    radial-gradient(90% 45% at 50% 100%, rgba(60, 46, 28, .22), transparent 70%);
}
.ml-eyebrow { margin: 0; font-size: 8px; letter-spacing: .38em; color: rgba(220, 190, 140, .5); }
.ml-title { margin: 10px 0 0; font-family: "Songti SC", serif; font-size: 30px; font-weight: 500; letter-spacing: .1em; color: #f7efdf; }
.ml-lede { margin: 12px auto 0; max-width: 300px; font-size: 12px; line-height: 1.9; color: var(--dim); }
.ml-cta {
  width: 100%;
  margin-top: 24px;
  padding: 15px 20px;
  border: 0; border-radius: 999px;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 16px;
  letter-spacing: .24em; text-indent: .24em;
  color: #2a1d10;
  background: linear-gradient(180deg, #f0dcb2, #cfa869);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform 140ms, filter 160ms, opacity 180ms;
}
.ml-cta:active { transform: translateY(1px); filter: brightness(1.06); }
.ml-cta:disabled { opacity: .32; cursor: default; }
.ml-ghost {
  padding: 15px 20px;
  border: 1px solid rgba(240, 232, 216, .18);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 14px;
  letter-spacing: .12em;
  color: rgba(240, 232, 216, .65);
}
.ml-back {
  display: block; margin: 0 0 14px; padding: 6px 2px;
  border: 0; background: none; cursor: pointer;
  font-size: 11px; letter-spacing: .1em; color: rgba(240, 232, 216, .45);
}
.ml-step-no { margin: 0; font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .3em; color: rgba(220, 190, 140, .55); }
.ml-step-title { margin: 10px 0 0; font-family: "Songti SC", serif; font-size: 24px; font-weight: 500; letter-spacing: .08em; }

.ml-intro { text-align: center; padding: 14px 0 20px; }
.ml-rules {
  margin: 24px 0 0; padding: 18px 20px; text-align: left;
  border: 1px solid rgba(220, 190, 140, .14); border-radius: 12px;
  background: rgba(255, 255, 255, .022);
}
.ml-rules p { display: grid; grid-template-columns: 24px 1fr; gap: 8px; margin: 0 0 11px; font-size: 11.5px; line-height: 1.7; color: rgba(240, 232, 216, .76); }
.ml-rules p:last-child { margin-bottom: 0; }
.ml-rules b { font-family: "Courier New", monospace; font-size: 9px; color: rgba(220, 190, 140, .75); padding-top: 2px; }

/* 选样式 */
.ml-step { padding: 6px 0 20px; }
.ml-styles { display: grid; gap: 14px; margin-top: 20px; }
.ml-style {
  display: grid;
  gap: 10px;
  padding: 0 0 12px;
  border: 1px solid rgba(240, 232, 216, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: transform 180ms, border-color 200ms, box-shadow 200ms;
}
.ml-style:active { transform: scale(.99); }
@media (hover: hover) {
  .ml-style:hover { border-color: rgba(220, 190, 140, .45); box-shadow: 0 16px 34px rgba(0, 0, 0, .38); }
}
.ml-style-prev {
  display: block;
  height: 170px;
  overflow: hidden;
  pointer-events: none;
  position: relative;
}
.ml-style-prev > * { transform: scale(.447); transform-origin: top left; }
.ml-style-meta { display: grid; gap: 3px; padding: 0 14px; }
.ml-style-meta b { font-family: "Songti SC", serif; font-size: 15px; letter-spacing: .06em; color: #f4ecdc; }
.ml-style-meta em { font-size: 10px; font-style: normal; color: rgba(240, 232, 216, .4); }

/* 写 */
.ml-composeview { padding: 6px 0 20px; }
.ml-preview {
  margin-top: 16px;
  max-height: 300px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .4);
  position: relative;
}
.ml-preview > * { transform: scale(.47); transform-origin: top left; }
.ml-fields { display: grid; gap: 12px; margin-top: 18px; }
.ml-field { display: grid; gap: 7px; }
.ml-field span { font-size: 9.5px; letter-spacing: .18em; color: rgba(240, 232, 216, .4); }
.ml-field input,
.ml-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(240, 232, 216, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
  outline: none;
  font-family: "Songti SC", serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  resize: none;
}
.ml-field input::placeholder,
.ml-field textarea::placeholder { color: rgba(240, 232, 216, .22); }

/* 投递 */
.ml-sending { min-height: calc(100dvh - 140px); display: grid; place-items: center; align-content: center; gap: 30px; padding: 40px 0; }
.ml-env {
  position: relative;
  width: 170px; height: 116px;
  transition: transform .9s cubic-bezier(.5, 0, .3, 1), opacity .9s;
}
.ml-env-body {
  position: absolute; inset: 0;
  border-radius: 6px;
  background: linear-gradient(170deg, #f4ead6, #ddcaa6);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.ml-env-flap {
  position: absolute; left: 0; right: 0; top: 0; height: 62%;
  background: linear-gradient(180deg, rgba(200, 176, 132, .5), rgba(200, 176, 132, .1));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 6px 6px 0 0;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  transform-origin: top center;
}
.ml-env-wax {
  position: absolute; left: 50%; top: 58%;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #c9564a, #8e2318);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4), inset 0 2px 3px rgba(255, 255, 255, .3);
  font-family: "Songti SC", serif; font-size: 14px;
  color: rgba(255, 230, 210, .85);
  transition: transform .4s;
}
.ml-env.is-fly { transform: translateY(-120px) scale(.35) rotate(-8deg); opacity: 0; }
.ml-env.is-fly .ml-env-flap { transform: rotateX(-160deg); }
.ml-env.is-fly .ml-env-wax { transform: scale(0); }
.ml-sending-txt { margin: 0; font-size: 12px; letter-spacing: .2em; color: rgba(240, 232, 216, .45); }

/* 成品 */
.ml-doneview { text-align: center; padding: 10px 0 20px; }
.ml-done-title { margin: 12px 0 0; font-family: "Songti SC", serif; font-size: 26px; font-weight: 500; letter-spacing: .12em; }
.ml-done-sub { margin: 10px 0 0; font-size: 11px; color: rgba(240, 232, 216, .42); }
.ml-paper {
  position: relative;
  margin-top: 20px;
  height: 470px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateY(14px);
}
.ml-paper > * { transform: scale(.47); transform-origin: top left; }
.ml-paper.is-in { animation: mlPaper .8s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes mlPaper { to { opacity: 1; transform: none; } }
.ml-done-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.ml-done-acts .ml-cta { margin-top: 0; }

/* ---- 五套信纸 ---- */
.ml-journal,
.ml-letter,
.ml-ticket,
.ml-minimal,
.ml-archive {
  width: 760px;
  height: 1000px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transform-origin: top left;
}

/* 手账 */
.ml-journal {
  padding: 120px 100px;
  background:
    repeating-linear-gradient(0deg, transparent 0 43px, rgba(120, 140, 170, .16) 43px 44px),
    #fbf6e9;
  font-family: "Hannotate SC", "Kaiti SC", serif;
  color: #3a3226;
}
.ml-tape { position: absolute; width: 130px; height: 36px; background: rgba(230, 215, 180, .78); }
.ml-tape.t1 { left: 60px; top: 52px; transform: rotate(-12deg); }
.ml-tape.t2 { right: 54px; top: 84px; transform: rotate(10deg); background: rgba(210, 225, 235, .72); }
.ml-doodle { position: absolute; right: 120px; top: 200px; font-size: 34px; color: #d08a9a; transform: rotate(12deg); }
.ml-j-to { margin: 0 0 22px; font-size: 26px; }
.ml-j-body { margin: 0; font-size: 22px; line-height: 44px; white-space: pre-wrap; word-break: break-word; }
.ml-j-foot { position: absolute; right: 100px; bottom: 130px; text-align: right; }
.ml-j-sign { display: block; font-size: 24px; color: #2f4f86; }
.ml-j-date { display: block; margin-top: 10px; font-size: 18px; color: #7a6750; }
.ml-sticker { position: absolute; left: 96px; bottom: 120px; font-size: 26px; color: #c9a24a; }

/* 旧信 */
.ml-letter {
  padding: 150px 100px 120px;
  background:
    radial-gradient(120% 90% at 50% 50%, #f6e9cf 30%, #e8d6ae 100%);
  font-family: "Kaiti SC", "Songti SC", serif;
  color: #3a2c1c;
}
.ml-letter::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.07'/></svg>");
  pointer-events: none;
}
.ml-l-postmark {
  position: absolute; right: 90px; top: 90px;
  width: 84px; height: 84px;
  display: grid; place-items: center;
  border: 3px solid rgba(150, 40, 35, .45);
  border-radius: 50%;
  font-family: "Courier New", monospace;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: rgba(150, 40, 35, .55);
  transform: rotate(-7deg);
}
.ml-l-to { margin: 0 0 24px; font-size: 24px; }
.ml-l-body { margin: 0; font-size: 21px; line-height: 40px; white-space: pre-wrap; word-break: break-word; }
.ml-l-sign { margin: 40px 0 0; text-align: right; font-size: 21px; }
.ml-l-wax {
  position: absolute; right: 96px; bottom: 92px;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #c9564a, #8e2318);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .4), inset 0 2px 3px rgba(255, 255, 255, .28);
  font-family: "Songti SC", serif; font-size: 18px;
  color: rgba(255, 230, 210, .85);
}

/* 车票 */
.ml-ticket {
  padding: 70px 70px;
  background: #f7f2e6;
  font-family: "Songti SC", serif;
  color: #2a2118;
  border: 2px solid #8a7a5c;
  margin: 0;
}
.ml-ticket::before {
  content: "";
  position: absolute; inset: 20px;
  border: 1px solid rgba(138, 122, 92, .4);
  border-radius: 2px;
  pointer-events: none;
}
.ml-tk-brand { font-family: "Courier New", monospace; font-size: 15px; letter-spacing: .14em; color: #5a4a36; }
.ml-tk-row { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 70px; }
.ml-tk-row b { display: block; font-size: 46px; font-weight: 500; letter-spacing: .04em; }
.ml-tk-row em { display: block; margin-top: 8px; font-size: 16px; font-style: normal; color: #7a6750; }
.ml-tk-arrow { flex: none; margin: 0 20px 26px; font-size: 26px; color: #8a7a5c; }
.ml-tk-pass { margin: 50px 0 0; font-size: 19px; }
.ml-tk-note { position: absolute; left: 70px; right: 70px; top: 460px; margin: 0; font-family: "Kaiti SC", serif; font-size: 20px; line-height: 36px; white-space: pre-wrap; }
.ml-tk-sign { position: absolute; right: 90px; bottom: 110px; font-family: "Hannotate SC", "Kaiti SC", serif; font-size: 22px; color: #2f4f86; }
.ml-tk-code { position: absolute; left: 70px; bottom: 76px; font-family: "Courier New", monospace; font-size: 13px; color: #9a8a72; }

/* 极简 */
.ml-minimal {
  padding: 0 120px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 40px;
  background: #fff;
  color: #111;
  font-family: "Songti SC", serif;
  text-align: center;
}
.ml-min-dot { width: 8px; height: 8px; border-radius: 50%; background: #111; }
.ml-min-body { margin: 0; font-size: 30px; line-height: 1.9; white-space: pre-wrap; word-break: break-word; }
.ml-min-line { width: 80px; height: 1px; background: #ddd; }
.ml-min-sign { margin: 0; font-family: "Courier New", monospace; font-size: 15px; letter-spacing: .16em; color: #888; }

/* 档案 */
.ml-archive {
  padding: 80px 70px;
  background: #15181c;
  color: #efe6d4;
  font-family: "Courier New", monospace;
  border: 1px solid rgba(200, 190, 160, .25);
  margin: 0;
}
.ml-ar-head { margin: 0; font-size: 14px; letter-spacing: .2em; color: rgba(200, 190, 160, .6); }
.ml-ar-rows { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(200, 190, 160, .2); display: grid; gap: 14px; }
.ml-ar-rows div { display: grid; grid-template-columns: 120px 1fr; font-size: 14px; }
.ml-ar-rows span { color: rgba(200, 190, 160, .45); }
.ml-ar-rows b { font-weight: 400; color: #efe6d4; }
.ml-ar-rows b.is-sealed { color: #e2695a; }
.ml-ar-to { margin: 40px 0 0; font-size: 13px; color: rgba(200, 190, 160, .45); }
.ml-ar-body { margin: 18px 0 0; font-family: "Songti SC", serif; font-size: 22px; line-height: 1.9; white-space: pre-wrap; word-break: break-word; }
.ml-ar-sign { position: absolute; left: 70px; bottom: 90px; margin: 0; font-size: 13px; color: rgba(200, 190, 160, .5); }
.ml-ar-stamp {
  position: absolute; right: 60px; bottom: 86px;
  padding: 10px 18px;
  border: 3px solid rgba(226, 105, 90, .55);
  font-size: 16px;
  letter-spacing: .1em;
  color: rgba(226, 105, 90, .6);
  transform: rotate(-9deg);
}

/* v0.39.1 未来信箱工作台 */
.ml-stage {
  position: relative;
  height: 40vh;
  min-height: 280px;
  margin: 0 -19px;
  overflow: hidden;
  background-image: var(--ml-bg);
  background-size: cover;
  background-position: center;
}
.ml-fog {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(255, 250, 238, .9) 0,
      rgba(255, 249, 236, .68) 18%,
      rgba(255, 246, 231, .3) 52%,
      rgba(252, 239, 215, .26) 84%,
      rgba(250, 236, 209, .34) 100%),
    radial-gradient(120% 90% at 18% 0%, rgba(255, 232, 178, .12), transparent 58%);
  backdrop-filter: blur(.6px) saturate(112%);
  -webkit-backdrop-filter: blur(.6px) saturate(112%);
  pointer-events: none;
}
.ml-sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 760px;
  height: 1000px;
  transform: translate(-50%, -50%) scale(.36);
  transform-origin: center center;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 18px 46px rgba(60, 40, 18, .38);
  --ml-font: "Kaiti SC", serif;
}
.ml-sheet > * { width: 100%; height: 100%; }

.ml-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ml-tools { display: grid; gap: 10px; margin-top: 16px; }
.ml-tool { display: grid; gap: 7px; }
.ml-tool-label { font-size: 9px; letter-spacing: .2em; color: rgba(240, 232, 216, .38); }
.ml-opts { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.ml-opts::-webkit-scrollbar { display: none; }
.ml-opt {
  flex: none;
  padding: 7px 13px;
  border: 1px solid rgba(240, 232, 216, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: rgba(240, 232, 216, .66);
  transition: border-color 180ms, background 180ms, color 180ms;
}
.ml-opt.is-on {
  border-color: rgba(220, 190, 140, .7);
  background: rgba(220, 190, 140, .12);
  color: #f4ead6;
}
.ml-opt.is-bg {
  width: 52px; height: 36px;
  padding: 0;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.ml-opt.is-bg.is-on { box-shadow: 0 0 0 2px rgba(220, 190, 140, .85); }

.ml-studio { padding-bottom: 6px; }
.ml-sending, .ml-doneview { position: relative; }
.ml-sending {
  background-image: var(--ml-bg);
  background-size: cover;
  background-position: center;
  margin: 0 -19px;
  border-radius: 12px;
}
.ml-sending::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 10, .5);
  backdrop-filter: blur(3px);
  border-radius: 12px;
}
.ml-sending > * { position: relative; z-index: 2; }
.ml-doneview::before {
  content: "";
  position: absolute;
  inset: -19px -19px auto;
  height: 260px;
  z-index: -1;
  background-image: var(--ml-bg);
  background-size: cover;
  background-position: center;
  opacity: .35;
  filter: blur(3px);
  -webkit-mask: linear-gradient(180deg, #000, transparent);
  mask: linear-gradient(180deg, #000, transparent);
}

/* =========================================================
   v0.40 未来信箱 · 纸即编辑器
   ========================================================= */
.ml2 { width: 100%; padding: 0 0 20px; color: #f2ece0; }
.ml2-editor { display: grid; gap: 10px; }

.ml2-page {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 58vh;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 20px 46px rgba(0, 0, 0, .5);
  background: #f8f1e2;
  font-family: var(--ml-font);
  color: #32271a;
  isolation: isolate;
}
.ml2-tex {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .72;
  z-index: 0;
}
.ml2-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--ml-tint, rgba(250,246,236,.84));
  pointer-events: none;
}
.ml2-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 52%, rgba(150, 120, 70, .14) 100%);
}

.ml2-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 7% 7.5%;
  box-sizing: border-box;
  font-family: var(--ml-font);
}

.ml2-head { display: flex; align-items: baseline; gap: 8px; }
.ml2-label { font-size: 13px; color: #8a755b; letter-spacing: .1em; }
.ml2-to {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--ml-font);
  font-size: 26px;
  color: #2a2118;
  letter-spacing: .04em;
}
.ml2-to::placeholder { color: rgba(90, 74, 50, .28); }
.ml2-v { font-size: 26px; color: #2a2118; }

.ml2-body {
  flex: 1;
  margin-top: 4%;
  padding-top: 3%;
  border-top: 1px solid rgba(120, 96, 60, .22);
  outline: none;
  overflow-y: auto;
  font-family: var(--ml-font);
  font-size: 17px;
  line-height: 1.9;
  color: #32271a;
  white-space: pre-wrap;
  word-break: break-word;
  caret-color: #2f4f86;
}
.ml2-body.is-empty::before {
  content: attr(data-ph);
  color: rgba(90, 74, 50, .3);
  pointer-events: none;
}
.ml2-body::-webkit-scrollbar { width: 2px; }
.ml2-body::-webkit-scrollbar-thumb { background: rgba(120, 96, 60, .3); border-radius: 2px; }

.ml2-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(120, 96, 60, .18);
}
.ml2-sign {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  text-align: right;
  font-family: var(--ml-font);
  font-size: 20px;
  color: #2f4f86;
}
.ml2-sign::placeholder { color: rgba(60, 90, 140, .28); }
.ml2-date { flex: none; font-size: 11px; color: #7a6750; letter-spacing: .04em; }

/* 皮肤 */
.ml2-page.skin-letter { background: #f2e4c8; }
.ml2-page.skin-letter .ml2-tex { filter: sepia(.3); }
.ml2-page.skin-ticket .ml2-content { border: 1px solid rgba(138, 122, 92, .35); }
.ml2-page.skin-ticket .ml2-label { font-family: "Courier New", monospace; }
.ml2-page.skin-archive { background: #15181c; color: #efe6d4; }
.ml2-page.skin-archive .ml2-tex { opacity: .12; }
.ml2-page.skin-archive::before { background: rgba(21, 24, 28, .88); }
.ml2-page.skin-archive .ml2-body { color: #efe6d4; border-top-color: rgba(200, 190, 160, .2); }
.ml2-page.skin-archive .ml2-to { color: #efe6d4; }
.ml2-page.skin-archive .ml2-v { color: #efe6d4; }
.ml2-page.skin-archive .ml2-sign { color: #e2695a; }
.ml2-page.skin-archive .ml2-date { color: rgba(200, 190, 160, .5); }

/* 选项条 */
.ml2-bar { display: grid; gap: 7px; }
.ml2-group { display: flex; align-items: center; gap: 9px; }
.ml2-gl { flex: none; width: 14px; font-size: 10px; color: rgba(240, 232, 216, .38); }
.ml2-opts { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ml2-opts::-webkit-scrollbar { display: none; }
.ml2-chip {
  flex: none;
  padding: 6px 12px;
  border: 1px solid rgba(240, 232, 216, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .05em;
  color: rgba(240, 232, 216, .62);
  transition: border-color 160ms, background 160ms, color 160ms;
}
.ml2-chip.is-on { border-color: rgba(220, 190, 140, .68); background: rgba(220, 190, 140, .13); color: #f4ead6; }

.ml2-send {
  width: 100%;
  padding: 14px 20px;
  border: 0; border-radius: 999px;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 15px;
  letter-spacing: .3em; text-indent: .3em;
  color: #2a1d10;
  background: linear-gradient(180deg, #f0dcb2, #cfa869);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.ml2-send:disabled { opacity: .3; cursor: default; box-shadow: none; }
.ml2-send-sm { width: auto; padding: 14px 22px; }
.ml2-ghost {
  padding: 14px 22px;
  border: 1px solid rgba(240, 232, 216, .18);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 14px;
  letter-spacing: .1em;
  color: rgba(240, 232, 216, .66);
}

/* 投递 */
.ml2-sending { min-height: 60vh; display: grid; place-items: center; align-content: center; gap: 26px; }
.ml2-env { position: relative; width: 160px; height: 110px; transition: transform .9s cubic-bezier(.5,0,.3,1), opacity .9s; }
.ml2-env-body { position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(170deg, #f4ead6, #ddcaa6); box-shadow: 0 20px 44px rgba(0,0,0,.5); }
.ml2-env-flap { position: absolute; left: 0; right: 0; top: 0; height: 62%; background: linear-gradient(180deg, rgba(200,176,132,.5), rgba(200,176,132,.1)); clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 6px 6px 0 0; transition: transform .5s cubic-bezier(.2,.8,.2,1); transform-origin: top center; }
.ml2-env-wax { position: absolute; left: 50%; top: 58%; width: 38px; height: 38px; margin: -19px 0 0 -19px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #c9564a, #8e2318); font-family: "Songti SC", serif; font-size: 13px; color: rgba(255,230,210,.85); transition: transform .4s; }
.ml2-env.is-fly { transform: translateY(-120px) scale(.35) rotate(-8deg); opacity: 0; }
.ml2-env.is-fly .ml2-env-flap { transform: rotateX(-160deg); }
.ml2-env.is-fly .ml2-env-wax { transform: scale(0); }
.ml2-sending-txt { margin: 0; font-size: 11px; letter-spacing: .2em; color: rgba(240,232,216,.45); }

/* 成品 */
.ml2-doneview { text-align: center; padding: 4px 0 10px; }
.ml2-kicker { margin: 0; font-size: 8px; letter-spacing: .38em; color: rgba(220,190,140,.5); }
.ml2-donetitle { margin: 10px 0 12px; font-family: "Songti SC", serif; font-size: 24px; font-weight: 500; letter-spacing: .12em; }
.ml2-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.ml2-acts .ml2-send { margin: 0; }

/* 内嵌字体 */
@font-face {
  font-family: 'WenKai';
  src: url('assets/fonts/LXGWWenKaiLite-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'MaShan';
  src: url('assets/fonts/MaShanZheng.ttf') format('truetype');
  font-display: swap;
}

/* v0.40.1 四套版式 */
.ml2-content { position: relative; }

/* 旧信 */
.ml2-head.is-letter { gap: 2px; }
.ml2-colon { font-size: 22px; color: #2a2118; }
.ml2-foot.is-letter { justify-content: flex-end; border-top: 0; padding-top: 0; margin-top: 0; gap: 4px; }
.ml2-dash { font-size: 18px; color: #5a4a36; }
.ml2-sign { text-align: right; }
.ml2-foot.is-letter .ml2-sign { flex: 0 1 auto; width: auto; min-width: 60px; }
.ml2-datesub {
  display: block;
  margin-top: 6px;
  text-align: right;
  font-size: 11px;
  color: #7a6750;
}

/* 车票 */
.ml2-tk-brand {
  margin: 0 0 4%;
  font-family: "Courier New", monospace;
  font-size: 12px;
  letter-spacing: .16em;
  color: #5a4a36;
}
.ml2-tk-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.ml2-tk-side { display: grid; gap: 3px; flex: 1; min-width: 0; }
.ml2-tk-side.is-end { text-align: right; }
.ml2-tk-big {
  width: 100%;
  border: 0;
  border-bottom: 1px dashed rgba(120, 96, 60, .35);
  background: none;
  outline: none;
  font-family: var(--ml-font);
  font-size: 26px;
  color: #2a2118;
  padding-bottom: 2px;
}
.ml2-tk-side.is-end .ml2-tk-big { text-align: right; }
.ml2-tk-big::placeholder { color: rgba(90, 74, 50, .25); }
.ml2-tk-side em { font-size: 10px; font-style: normal; color: #7a6750; letter-spacing: .1em; }
.ml2-tk-arrow { flex: none; font-size: 20px; color: #8a7a5c; padding-bottom: 18px; }
.ml2-tk-pass {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 5% 0 0;
  font-size: 11px;
  color: #5a4a36;
}
.ml2-tk-in {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--ml-font);
  font-size: 17px;
  color: #2a2118;
}
.ml2-tk-in::placeholder { color: rgba(90, 74, 50, .25); }
.ml2-foot.is-ticket { border-top: 1px dashed rgba(120, 96, 60, .3); }
.ml2-foot.is-ticket .ml2-sign { flex: 1; }

/* 档案 */
.ml2-page.skin-archive .ml2-ar-head {
  margin: 0 0 4%;
  font-family: "Courier New", monospace;
  font-size: 11px;
  letter-spacing: .22em;
  color: rgba(200, 190, 160, .6);
}
.ml2-ar-rows {
  display: grid;
  gap: 7px;
  padding-bottom: 4%;
  border-bottom: 1px solid rgba(200, 190, 160, .18);
}
.ml2-ar-rows div { display: grid; grid-template-columns: 62px 1fr; align-items: baseline; }
.ml2-ar-rows span { font-family: "Courier New", monospace; font-size: 10px; letter-spacing: .12em; color: rgba(200, 190, 160, .45); }
.ml2-ar-rows b { font-family: "Courier New", monospace; font-size: 12px; font-weight: 400; color: #efe6d4; letter-spacing: .08em; }
.ml2-ar-rows b.is-sealed { color: #e2695a; }
.ml2-ar-in {
  border: 0;
  border-bottom: 1px dashed rgba(200, 190, 160, .3);
  background: none;
  outline: none;
  font-family: "Courier New", monospace;
  font-size: 12px;
  color: #efe6d4;
  letter-spacing: .08em;
}
.ml2-ar-in::placeholder { color: rgba(200, 190, 160, .22); }
.ml2-ar-to {
  margin: 5% 0 2px;
  font-family: "Courier New", monospace;
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(200, 190, 160, .45);
}
.ml2-ar-to-in {
  width: 100%;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--ml-font);
  font-size: 20px;
  color: #efe6d4;
}
.ml2-page.skin-archive .ml2-body { border-top: 0; }
.ml2-foot.is-archive { border-top: 0; justify-content: flex-start; gap: 6px; }
.ml2-foot.is-archive span { font-family: "Courier New", monospace; font-size: 10px; letter-spacing: .18em; color: rgba(200, 190, 160, .45); }
.ml2-foot.is-archive .ml2-sign { flex: 0 1 auto; width: auto; text-align: left; min-width: 70px; }
.ml2-ar-stamp {
  position: absolute;
  right: 10%;
  bottom: 12%;
  padding: 5px 10px;
  border: 2px solid rgba(226, 105, 90, .5);
  font-family: "Courier New", monospace;
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(226, 105, 90, .55);
  transform: rotate(-9deg);
  pointer-events: none;
}

/* =========================================================
   v0.41 双人回忆胶囊
   ========================================================= */
.cp {
  --amber: #d9a95e;
  --amber2: #f2d9a8;
  --text: #f2ece0;
  --dim: rgba(240, 232, 216, .5);
  width: 100%;
  padding: 0 0 24px;
  color: var(--text);
  border-radius: 18px;
  background:
    radial-gradient(110% 55% at 50% 0%, rgba(110, 80, 40, .3), transparent 70%),
    radial-gradient(90% 45% at 50% 100%, rgba(60, 44, 24, .24), transparent 70%);
}
.cp-eyebrow { margin: 0; font-size: 8px; letter-spacing: .36em; color: rgba(217, 169, 94, .55); }
.cp-title { margin: 10px 0 0; font-family: "Songti SC", serif; font-size: 30px; font-weight: 500; letter-spacing: .1em; color: #f7efdf; }
.cp-lede { margin: 12px auto 0; max-width: 290px; font-size: 12px; line-height: 1.9; color: var(--dim); }
.cp-sub { margin: 8px auto 0; max-width: 290px; font-size: 11px; line-height: 1.8; color: rgba(240, 232, 216, .34); }

/* 胶囊 */
.cp-capsule { position: relative; width: 74px; height: 132px; margin: 0 auto 22px; }
.cp-cap-top {
  position: absolute; left: 0; right: 0; top: 0; height: 46%;
  border-radius: 37px 37px 0 0;
  background: linear-gradient(180deg, #f2d9a8, #c99a56);
  box-shadow: inset 0 3px 8px rgba(255, 255, 255, .5), inset 0 -6px 12px rgba(120, 80, 30, .3), 0 10px 24px rgba(0, 0, 0, .4);
}
.cp-cap-body {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56%;
  border-radius: 0 0 37px 37px;
  background: linear-gradient(180deg, rgba(240, 226, 200, .35), rgba(200, 175, 130, .55));
  border: 1px solid rgba(255, 240, 210, .3);
  box-shadow: inset 0 8px 18px rgba(255, 255, 255, .2), inset 0 -10px 20px rgba(90, 60, 20, .3);
  backdrop-filter: blur(2px);
}
.cp-capsule.is-half .cp-cap-top { animation: cpCapOpen .8s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes cpCapOpen {
  0% { transform: none; }
  100% { transform: translateY(-26px) rotate(-6deg); }
}

.cp-intro { text-align: center; padding: 26px 0 20px; }
.cp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 9px 16px;
  border: 1px solid rgba(240, 232, 216, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
  font-size: 11px;
  color: rgba(240, 232, 216, .62);
}
.cp-toggle.is-on { border-color: rgba(217, 169, 94, .55); background: rgba(217, 169, 94, .1); color: #f2d9a8; }
.cp-toggle-box {
  display: grid; place-items: center;
  width: 17px; height: 17px;
  border: 1px solid rgba(240, 232, 216, .25);
  border-radius: 4px;
  font-size: 11px;
  color: #241d12;
}
.cp-toggle.is-on .cp-toggle-box { background: var(--amber); border-color: var(--amber); }

.cp-shelf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px dashed rgba(217, 169, 94, .35);
  border-radius: 12px;
  background: rgba(217, 169, 94, .06);
  cursor: pointer;
  font-size: 11px;
  color: rgba(240, 232, 216, .68);
}
.cp-shelf b { font-family: "Courier New", monospace; font-size: 10.5px; font-weight: 400; color: #e8c68e; }

.cp-cta {
  width: 100%;
  margin-top: 20px;
  padding: 15px 20px;
  border: 0; border-radius: 999px;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 16px;
  letter-spacing: .24em; text-indent: .24em;
  color: #2a1d10;
  background: linear-gradient(180deg, var(--amber2), var(--amber));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.cp-cta:disabled { opacity: .32; cursor: default; box-shadow: none; }
.cp-ghost {
  padding: 13px 16px;
  border: 1px solid rgba(240, 232, 216, .18);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 13px;
  letter-spacing: .1em;
  color: rgba(240, 232, 216, .66);
}
.cp-ghost:disabled { opacity: .45; cursor: default; }

/* 写 */
.cp-writeview { padding: 6px 0 20px; }
.cp-whobar { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.cp-who-badge {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(217, 169, 94, .55);
  font-family: "Songti SC", serif; font-size: 13px; color: #f2d9a8;
}
.cp-who-text { font-size: 10px; color: rgba(240, 232, 216, .45); }
.cp-qcard {
  padding: 20px 18px;
  border-radius: 14px;
  border: 1px solid rgba(217, 169, 94, .25);
  background: linear-gradient(160deg, rgba(217, 169, 94, .1), rgba(255, 255, 255, .02));
}
.cp-qno { font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .2em; color: rgba(217, 169, 94, .7); }
.cp-qtext { margin: 10px 0 0; font-family: "Songti SC", serif; font-size: 17px; line-height: 1.8; color: #f8f0de; }
.cp-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 150px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(240, 232, 216, .14);
  border-radius: 13px;
  background: rgba(255, 255, 255, .025);
  outline: none;
  resize: none;
  font-family: "Songti SC", serif;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
}
.cp-input::placeholder { color: rgba(240, 232, 216, .22); }

/* 封存 */
.cp-sealview { text-align: center; padding: 46px 0 20px; }
.cp-sealtitle { margin: 0; font-family: "Songti SC", serif; font-size: 24px; font-weight: 500; letter-spacing: .08em; }
.cp-sealsub { margin: 12px 0 0; font-size: 11px; color: rgba(240, 232, 216, .45); }

/* 交接 */
.cp-handover { text-align: center; padding: 60px 0 20px; }
.cp-handtitle { margin: 14px 0 0; font-family: "Songti SC", serif; font-size: 26px; font-weight: 500; letter-spacing: .08em; }
.cp-handsub { margin: 14px 0 0; font-size: 11.5px; line-height: 1.85; color: rgba(240, 232, 216, .5); }

/* 打开 */
.cp-openview { text-align: center; padding: 6px 0 20px; }
.cp-opentitle { margin: 10px 0 0; font-family: "Songti SC", serif; font-size: 25px; font-weight: 500; letter-spacing: .1em; }
.cp-openpair { display: grid; gap: 12px; margin-top: 22px; text-align: left; }
.cp-page {
  padding: 18px;
  border-radius: 13px;
  border: 1px solid rgba(240, 232, 216, .1);
  background: rgba(255, 255, 255, .025);
  animation: cpPageIn .6s cubic-bezier(.2, .8, .2, 1) both;
}
.cp-page.is-b { animation-delay: .18s; }
@keyframes cpPageIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cp-pwho { display: block; margin-bottom: 9px; font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .2em; }
.cp-page.is-a .cp-pwho { color: #8fb2ee; }
.cp-page.is-b .cp-pwho { color: #e2695a; }
.cp-page p { margin: 0; font-family: "Songti SC", serif; font-size: 14px; line-height: 1.85; color: #f0e8d8; white-space: pre-wrap; }
.cp-open-note { margin: 18px 0 0; font-size: 10.5px; color: rgba(240, 232, 216, .38); }

/* 留言 */
.cp-notesview { padding: 6px 0 20px; text-align: center; }
.cp-notestitle { margin: 10px 0 0; font-family: "Songti SC", serif; font-size: 21px; font-weight: 500; line-height: 1.5; }
.cp-notessub { margin: 10px 0 0; font-size: 10.5px; color: rgba(240, 232, 216, .42); }
.cp-notepair { display: grid; gap: 11px; margin-top: 20px; text-align: left; }
.cp-note { display: grid; gap: 7px; }
.cp-note span { font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .18em; }
.cp-note.is-a span { color: #8fb2ee; }
.cp-note.is-b span { color: #e2695a; }
.cp-note input {
  padding: 13px 15px;
  border: 1px solid rgba(240, 232, 216, .14);
  border-radius: 11px;
  background: rgba(255, 255, 255, .025);
  outline: none;
  font-family: "Songti SC", serif;
  font-size: 13px;
  color: var(--text);
}
.cp-note input::placeholder { color: rgba(240, 232, 216, .22); }

/* 回忆卡 */
.cp-final {
  position: relative;
  padding: 30px 24px 26px;
  border-radius: 3px;
  color: #32271a;
  background: linear-gradient(178deg, #f8f1e2, #ece0c9);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .8);
  text-align: left;
  opacity: 0;
  transform: translateY(16px);
}
.cp-final.is-in { animation: cpFinalIn .8s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes cpFinalIn { to { opacity: 1; transform: none; } }
.cp-f-grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.05'/></svg>");
}
.cp-f-head { margin: 0; font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .24em; color: #8a755b; }
.cp-f-q { margin: 14px 0 0; font-family: "Songti SC", serif; font-size: 17px; line-height: 1.75; color: #2a2118; }
.cp-f-block { margin-top: 22px; }
.cp-f-block span { display: block; margin-bottom: 8px; font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .18em; }
.cp-f-block.is-a span { color: #2f4f86; }
.cp-f-block.is-b span { color: #a8342a; }
.cp-f-block p { margin: 0; font-family: "Songti SC", serif; font-size: 14px; line-height: 1.9; color: #3a2f24; white-space: pre-wrap; }
.cp-f-rule { height: 1px; margin: 22px 0; border-top: 1px dashed rgba(120, 96, 60, .35); }
.cp-f-now > span { display: block; margin-bottom: 9px; font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .18em; color: #8a755b; }
.cp-f-now p { margin: 0 0 6px; font-family: "Songti SC", serif; font-size: 13.5px; line-height: 1.8; color: #3a2f24; }
.cp-f-date { margin: 24px 0 0; font-size: 10px; letter-spacing: .1em; color: #8a755b; }
.cp-f-seal {
  position: absolute;
  right: 20px; bottom: 22px;
  display: grid; place-items: center;
  width: 62px; height: 62px;
  border: 2px solid rgba(168, 52, 42, .7);
  border-radius: 50%;
  font-family: "Songti SC", serif;
  font-size: 15px;
  letter-spacing: .08em; text-indent: .08em;
  color: #a8342a;
  transform: rotate(-12deg);
  opacity: .9;
}
.cp-card-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.cp-again { margin-top: 10px; }

/* 收藏夹 */
.cp-shelfview { padding: 6px 0 20px; }
.cp-back {
  display: block; margin: 0 0 14px; padding: 6px 2px;
  border: 0; background: none; cursor: pointer;
  font-size: 11px; letter-spacing: .1em; color: rgba(240, 232, 216, .45);
}
.cp-shelftitle { margin: 10px 0 0; font-family: "Songti SC", serif; font-size: 24px; font-weight: 500; letter-spacing: .1em; }
.cp-shelfsub { margin: 8px 0 0; font-size: 10.5px; color: rgba(240, 232, 216, .42); }
.cp-shelf-list { display: grid; gap: 11px; margin-top: 18px; }
.cp-shelf-card {
  padding: 15px 16px;
  border-radius: 12px;
  border: 1px solid rgba(240, 232, 216, .1);
  background: rgba(255, 255, 255, .022);
}
.cp-sc-no { font-family: "Courier New", monospace; font-size: 8.5px; letter-spacing: .2em; color: rgba(217, 169, 94, .7); }
.cp-sc-q { margin: 8px 0 10px; font-family: "Songti SC", serif; font-size: 14px; line-height: 1.6; color: #f4ecdc; }
.cp-sc-a, .cp-sc-b { margin: 0 0 4px; font-family: "Songti SC", serif; font-size: 11.5px; line-height: 1.6; }
.cp-sc-a { color: #8fb2ee; }
.cp-sc-b { color: #e2695a; }
.cp-sc-date { display: block; margin-top: 8px; font-size: 9px; color: rgba(240, 232, 216, .3); }

/* =========================================================
   v0.42 你到底懂不懂我（刮刮乐）
   ========================================================= */
.gm {
  --rose: #c98fa6;
  --rose2: #f0d2dd;
  --text: #f2ece0;
  width: 100%;
  padding: 0 0 24px;
  color: var(--text);
  border-radius: 18px;
  background:
    radial-gradient(110% 55% at 50% 0%, rgba(120, 70, 90, .3), transparent 70%),
    radial-gradient(90% 45% at 50% 100%, rgba(66, 40, 52, .24), transparent 70%);
}
.gm-eyebrow { margin: 0; font-size: 8px; letter-spacing: .36em; color: rgba(201, 143, 166, .6); }
.gm-title { margin: 10px 0 0; font-family: "Songti SC", serif; font-size: 30px; font-weight: 500; letter-spacing: .1em; color: #f7eff4; }
.gm-lede { margin: 12px auto 0; max-width: 300px; font-size: 12px; line-height: 1.9; color: rgba(240, 232, 236, .55); }
.gm-rules {
  margin: 22px 0 0;
  padding: 18px 20px;
  text-align: left;
  border: 1px solid rgba(240, 232, 236, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .022);
}
.gm-rules p { display: grid; grid-template-columns: 24px 1fr; gap: 8px; margin: 0 0 10px; font-size: 11.5px; line-height: 1.7; color: rgba(240, 232, 236, .72); }
.gm-rules p:last-child { margin-bottom: 0; }
.gm-rules b { font-family: "Courier New", monospace; font-size: 9px; color: rgba(201, 143, 166, .8); padding-top: 2px; }

.gm-two { margin: 24px 0 10px; font-size: 10px; letter-spacing: .2em; color: rgba(240, 232, 236, .42); }
.gm-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.gm-pickbtn {
  display: grid;
  gap: 4px;
  place-items: center;
  padding: 20px 0;
  border: 1px solid rgba(240, 232, 236, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
  color: var(--text);
  transition: border-color 200ms, background 200ms, transform 160ms;
}
.gm-pickbtn:active { transform: scale(.98); }
.gm-pickbtn b { font-family: "Songti SC", serif; font-size: 26px; font-weight: 500; }
.gm-pickbtn span { font-size: 10px; color: rgba(240, 232, 236, .42); }
.gm-pickbtn.is-a.is-on { border-color: rgba(143, 178, 238, .6); background: rgba(143, 178, 238, .1); }
.gm-pickbtn.is-b.is-on { border-color: rgba(226, 105, 90, .6); background: rgba(226, 105, 90, .1); }

.gm-count { margin: 18px 0 0; font-size: 10.5px; color: rgba(240, 232, 236, .4); }
.gm-count b { color: var(--rose2); font-family: "Courier New", monospace; font-size: 14px; }

.gm-cta {
  width: 100%;
  margin-top: 20px;
  padding: 15px 20px;
  border: 0; border-radius: 999px;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 16px;
  letter-spacing: .24em; text-indent: .24em;
  color: #2a1520;
  background: linear-gradient(180deg, var(--rose2), var(--rose));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.gm-cta:disabled { opacity: .3; cursor: default; box-shadow: none; }
.gm-ghost {
  padding: 14px 18px;
  border: 1px solid rgba(240, 232, 236, .16);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 13px;
  letter-spacing: .1em;
  color: rgba(240, 232, 236, .62);
}

.gm-intro { text-align: center; padding: 12px 0 20px; }

/* 卡 */
.gm-play { padding: 6px 0 16px; }
.gm-top { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .1em; color: rgba(240, 232, 236, .45); }
.gm-top b { color: var(--rose2); font-family: "Courier New", monospace; font-size: 13px; }

.gm-card {
  position: relative;
  margin-top: 16px;
  min-height: 300px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 46px rgba(0, 0, 0, .45);
  touch-action: none;
}
.gm-card-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 28px 24px;
  background:
    repeating-linear-gradient(0deg, transparent 0 33px, rgba(150, 120, 130, .07) 33px 34px),
    linear-gradient(175deg, #fbf6ee, #f0e4e4);
  color: #3a2a30;
}
.gm-card-no { font-family: "Courier New", monospace; font-size: 9px; letter-spacing: .22em; color: #a0808c; }
.gm-card-q {
  margin: 0;
  font-family: "Songti SC", serif;
  font-size: 18px;
  line-height: 1.9;
  color: #3a2a30;
}
.gm-scratch {
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: none;
}
.gm-scratch:active { cursor: grabbing; }

.gm-tip { margin: 16px 0 0; text-align: center; font-size: 10.5px; color: rgba(240, 232, 236, .42); }
.gm-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 16px; }
.gm-next { margin-top: 0; }

.gm-endview { text-align: center; padding: 60px 0 20px; }
.gm-endtitle { margin: 14px 0 0; font-family: "Songti SC", serif; font-size: 25px; font-weight: 500; letter-spacing: .08em; }
.gm-endsub { margin: 14px 0 0; font-size: 11px; color: rgba(240, 232, 236, .45); }

/* v0.42.1 移动端适配（只调尺寸，不动布局） */
@media (max-width: 480px) {
  /* 我也想了解你 */
  .ue-fan { transform: scale(.78); transform-origin: top right; opacity: .72; }
  .ue-heading h1 { font-size: clamp(30px, 8.6vw, 40px); }
  .ue-sub { font-size: 11px; margin-top: 10px; }
  .ue-section { margin: 18px 0 10px; }
  .ue-depths { gap: 7px; }
  .ue-depth-card { padding: 14px 9px 12px; }
  .ue-depth-card h3 { font-size: 14px; letter-spacing: .02em; }
  .ue-depth-card p { font-size: 9.5px; line-height: 1.6; }
  .ue-depth-card .ue-count { font-size: 10px; padding: 4px 8px; }

  /* 禁忌问题交换局 */
  .tc-intro-head h1 { font-size: 30px; line-height: 1.2; }
  .tc-intro-sub { font-size: 11px; margin-top: 9px; }
  .tc-letter { margin-top: 14px; padding: 16px 14px 14px; }
  .tc-letter p { font-size: 11.5px; line-height: 1.85; }
  .tc-rule-row { padding: 9px 0; }
  .tc-rule-row b { font-size: 12px; }
  .tc-rule-row span { font-size: 10px; line-height: 1.6; }
}

/* v0.42.2 补数量提示 */
.tod-count, .db-count {
  margin: 6px 0 0;
  font-size: 10px;
  letter-spacing: .06em;
  color: rgba(232, 226, 212, .34);
}
.ml2-tip {
  margin: 0 0 10px;
  font-size: 10.5px;
  line-height: 1.7;
  color: rgba(240, 232, 216, .4);
}

/* v0.43 统一规则页 */
.rl {
  width: 100%;
  padding: 26px 0 20px;
  color: #f2ece0;
  text-align: center;
}
.rl-eyebrow { margin: 0; font-size: 8px; letter-spacing: .36em; color: rgba(226, 200, 160, .5); }
.rl-title {
  margin: 12px 0 0;
  font-family: "Songti SC", serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: .1em;
  color: #f7efdf;
}
.rl-lede {
  margin: 14px auto 0;
  max-width: 300px;
  font-size: 12px;
  line-height: 1.9;
  color: rgba(240, 232, 216, .55);
}
.rl-list {
  margin: 24px 0 0;
  padding: 18px 20px;
  text-align: left;
  border: 1px solid rgba(240, 232, 216, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .022);
}
.rl-list p {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  margin: 0 0 11px;
  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(240, 232, 216, .74);
}
.rl-list p:last-child { margin-bottom: 0; }
.rl-list b {
  font-family: "Courier New", monospace;
  font-size: 9px;
  color: rgba(226, 200, 160, .72);
  padding-top: 2px;
}
.rl-count {
  margin: 18px 0 0;
  font-size: 10px;
  letter-spacing: .06em;
  color: rgba(240, 232, 216, .34);
}
.rl-cta {
  width: 100%;
  margin-top: 22px;
  padding: 15px 20px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 16px;
  letter-spacing: .26em;
  text-indent: .26em;
  color: #2a1d10;
  background: linear-gradient(180deg, #f0dcb2, #cfa869);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform 140ms, filter 160ms;
}
.rl-cta:active { transform: translateY(1px); filter: brightness(1.06); }

/* v0.43.1 禁忌规则页压到一屏 */
@media (max-width: 480px) {
  .tc-intro .tc-letter { padding: 14px 13px 12px; margin-top: 10px; }
  .tc-intro .tc-letter-lead { font-size: 11px; line-height: 1.7; margin-bottom: 6px; }
  .tc-intro .tc-letter p { font-size: 10.5px; line-height: 1.75; }
  .tc-intro .tc-rule { padding: 7px 0; }
  .tc-intro .tc-rule b { font-size: 10px; }
  .tc-intro .tc-rule span { font-size: 11px; }
  .tc-intro .tc-letter-note { font-size: 10px; line-height: 1.7; }
  .tc-intro .tc-consent { margin-top: 10px; font-size: 9px; }
  .tc-intro .tc-begin { margin-top: 12px; }
  .tc-shell.tc-intro { min-height: auto; padding-bottom: 12px; }
}

/* 规则块（底线 / 法庭） */
.bx-rules, .ct-rules {
  margin: 18px 0 0;
  padding: 14px 16px;
  text-align: left;
  border: 1px solid rgba(240, 232, 216, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .022);
}
.bx-rules p, .ct-rules p {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  margin: 0 0 9px;
  font-size: 11px;
  line-height: 1.65;
  color: rgba(240, 232, 216, .72);
}
.bx-rules p:last-child, .ct-rules p:last-child { margin-bottom: 0; }
.bx-rules b, .ct-rules b {
  font-family: "Courier New", monospace;
  font-size: 9px;
  color: rgba(226, 200, 160, .7);
  padding-top: 2px;
}
.mp-count, .ct-count {
  margin: 8px 0 0;
  font-size: 9.5px;
  letter-spacing: .06em;
  color: rgba(240, 232, 216, .32);
}

/* 规则页分离补充 */
.bx-back {
  display: block;
  margin: 0 0 12px;
  padding: 6px 2px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(240, 232, 216, .45);
}
.bx-cta {
  width: 100%;
  margin-top: 22px;
  padding: 15px 20px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 16px;
  letter-spacing: .24em;
  text-indent: .24em;
  color: #2a1d10;
  background: linear-gradient(180deg, #f0dcb2, #cfa869);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.ct-lobby.is-cases { padding-top: 4px; }
@media (max-width: 480px) {
  /* 禁忌标题再小一档 */
  .tc-intro-head h1 { font-size: 26px; letter-spacing: 0; }
  /* 谁更可能：名字卡缩小、题目放大 */
  .wl-question { font-size: clamp(19px, 5.6vw, 24px); line-height: 1.55; }
  .qq.wl .qq-opt { min-height: 150px; padding: 16px 10px 14px; }
  .qq.wl .qq-opt b { font-size: clamp(20px, 6.4vw, 28px); }
}

/* 题数小字 */
.th-count, .qq-wnum, .wk-count {
  margin: 14px 0 0;
  font-size: 10px;
  letter-spacing: .06em;
  color: rgba(240, 232, 216, .34);
}

/* v0.44.1 三态选择 */
.bx-tri { display: inline-flex; gap: 5px; }
.bx-tribtn {
  padding: 5px 11px;
  border: 1px solid rgba(201, 168, 106, .28);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: var(--hand);
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(220, 210, 190, .62);
  transition: all 170ms;
}
.bx-tribtn:active { transform: scale(.95); }
.bx-ans.is-a .bx-tribtn.is-on { border-color: var(--a); color: #14131a; background: rgba(143, 178, 238, .9); }
.bx-ans.is-b .bx-tribtn.is-on { border-color: var(--b); color: #14131a; background: rgba(226, 105, 90, .9); }
.bx-tribtn.is-0.is-on { filter: saturate(.7) brightness(.92); }

/* =========================================================
   v0.45 入场公告
   ========================================================= */
.notice {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 18px;
  align-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.notice.is-in { opacity: 1; pointer-events: auto; }
.notice.is-out { opacity: 0; }
.notice-veil {
  position: absolute;
  inset: 0;
  background: rgba(12, 8, 14, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.notice-paper {
  position: relative;
  width: 100%;
  max-width: 344px;
  max-height: min(78vh, 600px);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: linear-gradient(178deg, #faf4e6, #eee2c9);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .8);
  transform: translateY(16px) scale(.98);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  overflow: hidden;
}
.notice.is-in .notice-paper { transform: none; }
.notice-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.05'/></svg>");
}
.notice-head {
  padding: 26px 24px 16px;
  text-align: center;
  border-bottom: 1px solid rgba(120, 96, 60, .22);
}
.notice-kicker {
  margin: 0;
  font-family: "Courier New", monospace;
  font-size: 8px;
  letter-spacing: .34em;
  color: #a08a6d;
}
.notice-head h1 {
  margin: 12px 0 0;
  font-family: "Songti SC", serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .06em;
  color: #2a2118;
}
.notice-body {
  flex: 1;
  overflow-y: auto;
  -webkit-mask: linear-gradient(180deg, #000 calc(100% - 22px), transparent);
  mask: linear-gradient(180deg, #000 calc(100% - 22px), transparent);
  padding: 20px 24px;
  font-family: "Songti SC", serif;
  font-size: 13px;
  line-height: 1.95;
  color: #3a2f24;
}
.notice-body p { margin: 0 0 13px; }
.notice-lines { color: #5a4430; }
.notice-quote {
  margin: 18px 0 !important;
  padding: 12px 0;
  text-align: center;
  font-size: 15px;
  color: #8e2f24;
  border-top: 1px solid rgba(140, 96, 60, .2);
  border-bottom: 1px solid rgba(140, 96, 60, .2);
}
.notice-adult {
  margin: 18px 0;
  padding: 14px 15px;
  border: 1px dashed rgba(168, 52, 42, .4);
  border-radius: 10px;
  background: rgba(168, 52, 42, .04);
}
.notice-adult p { font-size: 12px; margin: 0 0 8px; color: #6b4a3a; }
.notice-adult-title {
  font-family: "Courier New", monospace !important;
  font-size: 10px !important;
  letter-spacing: .16em;
  color: #a8342a !important;
}
.notice-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 12px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.6;
  color: #4a3b2a;
}
.notice-check input { position: absolute; opacity: 0; pointer-events: none; }
.notice-box {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1.5px solid rgba(120, 96, 60, .5);
  border-radius: 3px;
  position: relative;
}
.notice-check input:checked + .notice-box {
  background: #a8342a;
  border-color: #a8342a;
}
.notice-check input:checked + .notice-box::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #faf4e6;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.notice-foot {
  padding: 14px 24px 20px;
  border-top: 1px solid rgba(120, 96, 60, .2);
}
.notice-btn {
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Songti SC", serif;
  font-size: 15px;
  letter-spacing: .2em;
  text-indent: .2em;
  color: #f7f1e2;
  background: linear-gradient(180deg, #b8443a, #8e2318);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: opacity .2s, transform .14s;
}
.notice-btn:disabled { opacity: .35; cursor: default; }
.notice-btn:active:not(:disabled) { transform: translateY(1px); }