/* 直播互动悬浮窗 —— 响应式重设计
   布局策略：
   - .app-shell 竖向 flex 流：topbar(sticky) + stage(滚动)
   - 尺寸自适应用容器查询单位 cqw（随容器宽度缩放）而非固定 px
   - 视口高用 dvh，客户端任意窗口大小下自动重排
   - client=1（客户端窗口）：圆角卡片壳；overlay（浏览器源）：全屏透明悬浮
*/

:root {
  --bg-card: rgba(17, 20, 28, .78);
  --line: rgba(255, 255, 255, .12);
  --txt: #e6eaf4;
  --txt-dim: #8b93a7;
  --accent: #6a5cff;
  --gold: #ffd76a;
  --sweet-cream: #fff8ee;
  --sweet-blush: #fff0f6;
  --sweet-pink: #ea6397;
  --sweet-edge: #efadca;
  --sweet-gold: #edbd56;
  --sweet-ink: #613548;
  --sweet-muted: #865c6d;
}

html, body {
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  user-select: none;
}
body.client { background: transparent; }

/* 容器查询单位：字号/尺寸随容器宽缩放，天然响应式 */
.app-shell {
  container-type: inline-size;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--txt);
}
.hidden { display: none !important; }

/* ── 顶栏 ── */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--bg-card);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #666; flex: none; }
.status-dot.online { background: #2ecc71; box-shadow: 0 0 6px #2ecc71; }
.status-dot.connecting { background: #f1c40f; animation: pulse 1.2s infinite; }
.status-dot.offline, .status-dot.error { background: #e74c3c; }
@keyframes pulse { 50% { opacity: .35; } }

.anchor-name { font-size: 13px; font-weight: 600; max-width: 30cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode-hint { font-size: 11px; color: var(--txt-dim); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mode-tabs { display: flex; gap: 4px; margin-left: auto; }
.mode-btn {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--txt-dim); font-size: 12px;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  transition: all .15s;
}
.mode-btn:hover { background: rgba(255,255,255,.14); color: var(--txt); }
.mode-btn.active {
  background: linear-gradient(135deg, var(--accent), #a04cff);
  border-color: transparent; color: #fff; font-weight: 600;
}

/* ── 主体 ── */
.stage { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
.panel { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 14px 12px 20px; gap: 10px; }

.dim { color: var(--txt-dim); }
.idle-tip {
  margin: auto; text-align: center; line-height: 2.1;
  font-size: max(13px, 3.6cqw); color: var(--txt);
  background: var(--bg-card); border: 1px solid var(--line);
  padding: 18px 26px; border-radius: 14px;
}

.link-btn {
  background: none; border: none; color: var(--txt-dim);
  font-size: 12px; cursor: pointer; text-decoration: underline;
}
.link-btn:hover { color: var(--txt); }

/* Fixed eight hollow slots on equal 3x3 tracks; no card/pseudo backing. */
#panel-wheel {
  --cream: #fff8ec;
  --candy-ink: #fff8ec;
  --candy-muted: #edbdcc;
  --candy-active: #ffd76a;
  font-family: "YouYuan", "Yuanti SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  height: 100%; overflow: hidden;
}
.wheel-wrap {
  --ring-gap: clamp(4px, 1.4cqw, 14px);
  --ring-tracks-x: repeat(3, minmax(0, 1fr));
  --ring-tracks-y: repeat(3, minmax(0, 1fr));
  position: relative; width: 100%; flex: 1; min-height: 0; display: grid;
  grid-template-columns: var(--ring-tracks-x);
  grid-template-rows: var(--ring-tracks-y); gap: var(--ring-gap);
}
.slot-grid {
  grid-area: 1 / 1 / -1 / -1; min-width: 0; min-height: 0;
  display: grid; grid-template-columns: var(--ring-tracks-x);
  grid-template-rows: var(--ring-tracks-y); gap: var(--ring-gap);
  align-content: stretch;
}
.slot-cell {
  min-width: 0; min-height: 0; box-sizing: border-box; overflow: hidden;
  padding: clamp(4px, 1.4cqw, 14px);
  border: 3px solid #edbdcc; border-radius: 22px;
  background: transparent; box-shadow: none;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  color: var(--candy-ink);
}
.slot-number {
  flex: none; color: var(--candy-muted);
  font-size: clamp(9px, 2cqw, 12px); font-weight: 700; line-height: 1.3;
}
.slot-label {
  font-size: clamp(12px, 4.2cqw, 32px);
  font-weight: 700; line-height: 1.35; overflow-wrap: anywhere;
  min-height: 0; overflow: hidden; scrollbar-width: none;
}
.slot-prize + .slot-prize { margin-top: .4em; }
.decorative .slot-label { text-align: center; }
.slot-cell.lit { border-color: var(--candy-active); color: var(--candy-active); }
.slot-cell.lit .slot-number { color: var(--candy-active); }
.wheel-heading { position: absolute; top: 70px; left: 12px; right: 12px; z-index: 12; padding: 12px 18px; border: 1px solid #edbdcc; border-radius: 16px; background: #191d2c; }
.wheel-hub {
  grid-area: 2 / 2 / 3 / 3; min-width: 0; min-height: 0; z-index: 61;
  container-type: size; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 10px; overflow: hidden; pointer-events: none;
  background: transparent; text-align: center;
}
.hub-copy { width: 100%; min-height: 0; animation: hubFloat 3s ease-in-out infinite; }
.hub-text {
  font-family: "YouYuan", "Yuanti SC", "Arial Rounded MT Bold", "Microsoft YaHei", sans-serif;
  color: #edbdcc; font-size: min(32px, var(--hub-font-size, 14cqi), 24cqb);
  font-weight: 900; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere;
  -webkit-text-stroke: 1px #fff8ec; paint-order: stroke fill;
  text-shadow: none; background: transparent;
}
.wheel-empty { margin-top: 8px; font-size: 12px; color: var(--candy-muted); }
@keyframes hubFloat { 50% { transform: translateY(-3px); } }
.wheel-kicker { font-family: "Trebuchet MS", sans-serif; font-size: 10px; letter-spacing: .12em; color: var(--candy-muted); }
.wheel-meta {
  background: #191d2c; border: 1px solid #edbdcc;
  color: var(--candy-ink); font-size: max(11px, 3cqw);
  padding: 6px 16px; border-radius: 999px; text-align: center;
}
.winner-banner {
  position: absolute; left: 12px; right: 12px; bottom: 4px;
  max-height: 52px; overflow-y: auto; padding: 4px 8px;
  background: transparent; border: 2px solid var(--candy-active); border-radius: 12px;
  color: var(--candy-active); font-size: clamp(16px, 4cqw, 28px); font-weight: 800;
  text-align: center; overflow-wrap: anywhere; box-sizing: border-box;
  z-index: 60; box-shadow: none; text-shadow: none;
}
@keyframes winnerPop { from { transform: scale(.3); opacity: 0; } }

/* ── Agent 对话 ── */
.agent-tip { color: var(--txt-dim); font-size: max(12px, 3cqw); text-align: center; }
.agent-tip b { color: var(--gold); }
.agent-bubbles {
  width: min(94cqw, 420px);
  display: flex; flex-direction: column; gap: 8px;
  margin: 0 auto;
}
.bubble {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 14px;
  animation: rowIn .35s ease;
}
.bubble.thinking { opacity: .75; }
.bubble .q { font-size: max(12px, 3.2cqw); color: #cfd6e4; margin-bottom: 4px; }
.bubble .a {
  font-size: max(13px, 3.6cqw); color: #ffd76a; font-weight: 600; line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.7);
}
.bubble .a:empty::after { content: '…'; }
.agent-empty { color: var(--txt-dim); font-size: 13px; text-align: center; padding: 16px; }

/* ── 选店 ── */
.shops-gate {
  margin: auto; text-align: center;
  background: var(--bg-card); border: 1px solid var(--line);
  padding: 26px 24px; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: min(88cqw, 360px);
}
.gate-btn {
  padding: 14px 44px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, #2fbf9b, #1d9e8a);
  color: #fff; font-size: max(15px, 4cqw); font-weight: 800;
  box-shadow: 0 8px 26px rgba(47,191,155,.4);
  animation: gatePulse 2s infinite;
}
@keyframes gatePulse { 50% { box-shadow: 0 8px 40px rgba(47,191,155,.75); } }
.gate-btn:active { transform: scale(.97); }
.gate-hint { color: var(--txt-dim); font-size: 12.5px; }

#shops-board {
  width: min(94cqw, 400px);
  display: flex; flex-direction: column; gap: 8px; margin: 0 auto;
}
.shops-title {
  display: flex; align-items: center; gap: 8px;
  font-size: max(13px, 3.4cqw); font-weight: 700;
  padding: 8px 14px; background: var(--bg-card);
  border-radius: 12px; border: 1px solid var(--line);
}
.phase-badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 8px;
  background: rgba(255,255,255,.12); color: #b9c1d4;
}
.phase-badge.running { background: rgba(46,204,113,.25); color: #7df0ac; }
.phase-badge.finished { background: rgba(241,196,15,.25); color: #ffdd7a; }
.llm-pending { color: #f1c40f; font-size: 11px; margin-left: auto; }

.shops-list {
  list-style: none; margin: 0; padding: 4px;
  display: flex; flex-direction: column; gap: 6px;
}
.shop-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 12px;
  animation: rowIn .35s ease;
}
@keyframes rowIn { from { transform: translateY(-8px); opacity: 0; } }
.shop-row.flash { animation: flashHit 1s ease; }
@keyframes flashHit {
  0% { background: rgba(106,92,255,.85); border-color: #a04cff; }
  100% { background: var(--bg-card); }
}
.shop-row .rank {
  flex: none; width: 24px; height: 24px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #39405a;
  background: rgba(255,255,255,.85);
}
.shop-row:nth-child(1) .rank { background: var(--gold); }
.shop-row:nth-child(2) .rank { background: #d7dbe6; }
.shop-row:nth-child(3) .rank { background: #eba96b; }
.shop-row .name {
  flex: 1; font-size: max(13px, 3.4cqw); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shop-row .count { color: var(--txt-dim); font-size: 12px; flex: none; }
.shop-row .count b { color: var(--gold); font-size: 15px; margin-right: 2px; }
.shop-row .row-ops { display: none; gap: 4px; }
.shop-row:hover .row-ops { display: flex; }
.shop-row .row-ops button {
  border: none; border-radius: 6px; cursor: pointer;
  font-size: 11px; padding: 3px 7px;
  background: rgba(255,255,255,.14); color: #dfe4ef;
}
.shops-empty {
  color: var(--txt-dim); font-size: 13px; text-align: center;
  padding: 18px 0; background: var(--bg-card);
  border: 1px dashed var(--line); border-radius: 12px;
}
.shops-winner {
  padding: 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,175,64,.92), rgba(255,90,64,.92));
  color: #fff; font-size: max(15px, 4cqw); font-weight: 800; text-align: center;
  animation: winnerPop .5s cubic-bezier(.2,1.6,.4,1);
}
.shops-actions { display: flex; gap: 8px; }
.shops-actions .act-btn {
  flex: 1; padding: 10px; border: none; border-radius: 10px; cursor: pointer;
  font-size: 13.5px; font-weight: 700;
}
.act-btn.stop { background: linear-gradient(135deg, #e8567b, #d94f8e); color: #fff; }
.act-btn.reset { background: rgba(255,255,255,.1); color: var(--txt-dim); border: 1px solid var(--line); }

/* ── 房间绑定 ── */
.room-setup {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  container-type: inline-size;
}
.setup-card {
  width: min(86cqw, 380px); padding: 30px 28px;
  background: rgba(17,20,28,.92);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px; text-align: center;
}
.setup-title { font-size: max(17px, 5cqw); font-weight: 800; margin-bottom: 6px; }
.setup-sub { font-size: 12.5px; color: var(--txt-dim); margin-bottom: 20px; }
.setup-input {
  width: 100%; padding: 12px 14px; box-sizing: border-box;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07); color: #fff; font-size: 14px;
  outline: none; margin-bottom: 12px;
}
.setup-input:focus { border-color: var(--accent); }
.setup-btn {
  width: 100%; padding: 12px; border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), #a04cff);
  color: #fff; font-size: 15px; font-weight: 700;
}
.setup-btn:disabled { opacity: .6; }
.setup-msg { margin-top: 12px; font-size: 13px; color: #ff9a9a; min-height: 18px; }

.shop-dialog {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(8, 10, 16, .72);
  pointer-events: auto;
}
.shop-dialog-card {
  width: min(88cqw, 360px); padding: 18px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 16px;
  background: #191d2c; box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.shop-dialog-title { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.shop-dialog-message { color: #d9deeb; font-size: 13px; line-height: 1.6; word-break: break-word; }
.shop-dialog-input {
  width: 100%; box-sizing: border-box; margin-top: 12px; padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 9px;
  background: rgba(255,255,255,.08); color: #fff; outline: none;
}
.shop-dialog-input:focus { border-color: #a04cff; }
.shop-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.shop-dialog-btn { border: 0; border-radius: 9px; padding: 8px 16px; cursor: pointer; font-weight: 700; }
.shop-dialog-btn.cancel { color: #c7cede; background: rgba(255,255,255,.1); }
.shop-dialog-btn.ok { color: #fff; background: linear-gradient(135deg, #6a5cff, #a04cff); }

/* ── Toast / 彩带 ── */
.toasts {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 6px; align-items: center; z-index: 90;
  width: max-content; max-width: 92vw;
}
.toast {
  background: rgba(17,20,28,.85); border: 1px solid rgba(255,255,255,.14);
  color: #e6eaf4; font-size: 12.5px;
  padding: 8px 16px; border-radius: 999px;
  animation: toastIn .25s ease, toastOut .4s ease 2.6s forwards;
  max-width: 92vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.toast.gift { border-color: rgba(255,215,106,.65); }
@keyframes toastIn { from { transform: translateY(16px); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(16px); opacity: 0; } }

.confetti {
  position: fixed; top: -12px; z-index: 200;
  width: 9px; height: 15px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall { to { transform: translateY(110vh) rotate(720deg); opacity: .6; } }

/* Controls float over content: hover never changes primary layout. */
.app-shell { position: relative; max-width: none; background: transparent; }
.topbar { position: absolute; left: 0; right: 0; top: 0; z-index: 30; background: #191d2c; backdrop-filter: none; }
.stage { min-height: 0; }
.panel { position: relative; box-sizing: border-box; padding: clamp(8px, 2cqw, 20px); min-height: 100%; }
#shops-board { width: 100%; position: relative; margin: 0; }
.shops-list { padding: 0; gap: clamp(4px, 1cqw, 8px); }
.shop-row { position: relative; min-height: clamp(40px, 9cqw, 64px); box-sizing: border-box; padding: 8px 12px; background: #191d2c; }
.shop-row .name { font-size: clamp(14px, 3.2cqw, 26px); }
.shop-row .rank { width: 24px; height: 24px; font-size: 13px; }
.shop-row .count { font-size: clamp(11px, 2.2cqw, 15px); }
.shop-row .count b { font-size: clamp(15px, 3.2cqw, 24px); }
#panel-shops { padding-top: 36px; }
.shops-title { position: static; background: #191d2c; }
.shops-actions { position: fixed; bottom: 12px; left: 12px; right: 12px; z-index: 35; background: #191d2c; padding: 8px; border-radius: 12px; }
.shop-row .row-ops { position: absolute; right: 8px; bottom: 2px; z-index: 10; background: #191d2c; border-radius: 6px; }
#wheel-meta, #wheel-clear { position: absolute; bottom: 64px; z-index: 15; background: #191d2c; color: var(--candy-ink); }
#wheel-clear { right: 20px; padding: 8px 12px; border: 1px solid #edbdcc; border-radius: 12px; }
#wheel-clear:hover { color: var(--candy-active); }
#wheel-meta { left: 20px; }
.shops-winner { position: static; flex: none; }
#panel-wheel {
  padding: 0;
  margin: 0;
  width: 100%;
}
body:not(.hover) :is(.topbar, .wheel-heading, #wheel-meta, #wheel-clear, .shops-title, .shops-actions, .shops-winner, .row-ops, .agent-tip, .toasts, .confetti) { visibility: hidden; pointer-events: none; }
/* 选店未开始时保留入口，避免失焦后整个面板变成空白。 */
body:not(.hover) .shops-gate { visibility: visible; pointer-events: auto; }
body.hover .app-shell { background: rgba(17,20,28,.7); }
body:not(.hover) .shop-row { background: transparent; border-color: transparent; }
.shop-row .name, .shop-row .count { text-shadow: 0 1px 2px #111; }
/* WinForms color-key is binary, NOT desktop alpha. Opaque surfaces avoid
   magenta mixing; only empty pixels use the native key. Browser stays alpha. */
body.native-overlay.hover .app-shell { background: #11141c; }
body.native-overlay :is(.topbar, .wheel-heading) { cursor: move; }
/* Binary color key: solid outlines/text, no backing, blur or glow.
   Glyph/rounded-edge antialiasing remains WebView2/host-dependent. */
body.native-overlay .slot-cell {
  background: transparent; border-radius: 0;
  box-shadow: none; text-shadow: none; filter: none;
}
body.native-overlay .hub-text {
  background: transparent; text-shadow: none; filter: none;
}
body.native-overlay .hub-copy { animation: none; }
body.native-overlay .shop-row { border-radius: 0; box-shadow: none; text-shadow: none; }
body.native-overlay:not(.hover) .shop-row { background: #191d2c; }
/* Floating particles have no opaque backing for their antialiased edges. */
body.native-overlay .confetti { display: none; }
@media (max-height: 420px) {
  .slot-number { font-size: 9px; }
  .slot-cell { padding: 6px; }
  .slot-label { font-size: clamp(11px, 3.8cqw, 22px); }
}
/* Image wheel shares the calibrated artwork geometry with wheel-demo.html. */
#panel-wheel { justify-content: center; align-items: center; padding: 0; }
.wheel-wrap {
  display: block; flex: none; width: 100%; max-width: calc((100dvh - 12px) * 1312 / 1199);
  aspect-ratio: 1312 / 1199; container-type: inline-size;
  --wheel-x: 59.541235%; --wheel-y: 48.887656%;
}
.wheel-frame { position: relative; z-index: 2; display: block; width: 100%; height: auto; pointer-events: none; }
.wheel-projection {
  position: absolute; left: var(--wheel-x); top: var(--wheel-y); width: 58.255335%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(1.76471deg) scaleY(.932383457);
  border-radius: 50%; overflow: hidden; z-index: 1;
}
.slot-grid {
  position: absolute; inset: 0; display: block; border-radius: 50%; will-change: transform;
  background: #fff3df;
}
.slot-cell {
  position: absolute; inset: 0; display: block; padding: 0; border: 0; border-radius: 0;
  overflow: visible; transform: rotate(var(--angle)); pointer-events: none;
}
.wheel-prize-copy {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateY(-18cqw) scale(var(--copy-scale, 1));
  display: flex; flex-direction: column; align-items: center; gap: .55cqw;
  width: 12cqw; text-align: center;
}
.slot-number, .slot-cell.lit .slot-number {
  position: relative; flex: none; font-size: var(--main-size, 8.4cqw); font-weight: 900; line-height: 1;
  color: #d94f87; background-image: linear-gradient(180deg, #f879aa 0%, #c93673 100%);
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-stroke: .12cqw #fff8ed;
  text-shadow: .16cqw .16cqw 0 rgba(126, 42, 82, .42), 0 0 .22cqw rgba(255,255,255,.72);
}
.slot-number::before { content: attr(data-t); position: absolute; inset: 0; z-index: 0; color: transparent; -webkit-text-stroke: .34cqw #fff8ed; text-shadow: none; }
.slot-number::after { content: attr(data-t); position: absolute; inset: 0; z-index: 1; color: transparent; background-image: linear-gradient(180deg, #ff8fba 0%, #d13d78 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-stroke: 0; }
.slot-label { width: 100%; max-height: 9cqw; overflow: hidden; pointer-events: auto; color: #895539; font-size: calc(var(--label-size, 3.25cqw) * .9); font-weight: 900; line-height: 1.05; text-align: center; white-space: pre-line; scrollbar-width: none; }
.slot-label::-webkit-scrollbar { display: none; }
.slot-prize { overflow-wrap: anywhere; }
.slot-cell.decorative .slot-label { font-size: 2cqw; }
.slot-cell.lit .slot-label { color: #9d345b; }
.wheel-hub {
  position: absolute; grid-area: auto; left: var(--wheel-x); top: var(--wheel-y);
  transform: translate(-50%, -50%); width: 16%; aspect-ratio: 1; z-index: 3;
  padding: 7%; box-sizing: border-box; container-type: normal;
  border: .7cqw solid #ffdd89; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #ffb7d4, #f76fa5 70%, #ef5f98);
  box-shadow: inset 0 0 0 .3cqw #fff; overflow: hidden;
}
.wheel-hub { padding: .8cqw; }
.wheel-heart { flex: none; width: 3.8cqw; height: 3.8cqw; }
.hub-copy { animation: none; width: 100%; }
.hub-text { display: inline-block; max-width: 100%; color: #fff; font-size: var(--hub-font-size, 2cqw); line-height: 1.1; -webkit-text-stroke: 0; text-shadow: none; }
.wheel-empty { margin: 0; font-size: 1.6cqw; color: #fff; }
#wheel-winner { background: #fff3df; color: #895539; border-color: #edbdcc; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  /* Wheel idle/spin transitions are explicit state presentation, not decorative motion. */
}

/* Text remains vector content; the host must be DPI aware to avoid bitmap scaling. */
.slot-label { color: #63402d; text-shadow: none; }
body.native-overlay .topbar { cursor: move; }
body.native-overlay.edge-top { cursor: ns-resize; }
body.native-overlay.edge-bottom { cursor: ns-resize; }
body.native-overlay.edge-left { cursor: ew-resize; }
body.native-overlay.edge-right { cursor: ew-resize; }
body.native-overlay.edge-top-left, body.native-overlay.edge-bottom-right { cursor: nwse-resize; }
body.native-overlay.edge-top-right, body.native-overlay.edge-bottom-left { cursor: nesw-resize; }
.mode-tabs { flex-wrap: wrap; }
/* Shared candy surfaces retain opaque pixels for the native color-key host. */
.topbar { background: var(--sweet-cream); border-bottom: 2px solid var(--sweet-edge); color: var(--sweet-ink); }
.mode-hint, .mode-btn { color: var(--sweet-muted); }
.mode-btn { background: var(--sweet-blush); border-color: var(--sweet-edge); }
.mode-btn:hover { background: #ffe0ed; color: var(--sweet-ink); }
.mode-btn.active { background: linear-gradient(#ffa8c8, var(--sweet-pink)); border-color: var(--sweet-gold); color: #fff; }
#panel-likes { padding: 74px 16px 20px; gap: 8px; }
.likes-heading { font-family: 'YouYuan', 'Microsoft YaHei', sans-serif; font-size: 32px; font-weight: 900; color: var(--sweet-pink); -webkit-text-stroke: 3px var(--sweet-cream); paint-order: stroke fill; text-align: center; }
.likes-summary { color: var(--sweet-ink); padding: 6px 18px; background: var(--sweet-cream); border: 2px solid var(--sweet-gold); border-radius: 12px; font-weight: 800; font-size: 18px; }
.likes-session { color: var(--sweet-muted); background: var(--sweet-blush); padding: 3px 10px; border-radius: 8px; font-size: 12px; }
.likes-list { list-style: none; padding: 0; margin: 4px 0 0; width: 100%; overflow-y: auto; }
.like-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; min-height: 66px; box-sizing: border-box; padding: 12px 16px; background: var(--sweet-blush); color: var(--sweet-ink); border: 2px solid var(--sweet-edge); border-radius: 14px; box-shadow: inset 0 0 0 2px #fff; font-size: 24px; }
.like-row:first-child { background: #fff0cb; border-color: var(--sweet-gold); }
.like-rank { display: grid; place-items: center; font-weight: 900; color: var(--sweet-pink); min-width: 1.5em; }
.like-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--sweet-cream); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--sweet-edge); }
.like-avatar.hidden { display: none; }
.like-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.like-row strong { flex: none; font-size: 22px; }
.likes-empty { padding: 20px; color: var(--sweet-ink); background: var(--sweet-cream); border: 2px solid var(--sweet-edge); border-radius: 12px; text-align: center; }
:is(.idle-tip, .shops-gate, .shops-title, .shops-empty, .bubble, .agent-empty) { background: var(--sweet-cream); color: var(--sweet-ink); border-color: var(--sweet-edge); }
:is(.shop-row, body.native-overlay .shop-row, body.native-overlay:not(.hover) .shop-row) { background: var(--sweet-blush); border: 2px solid var(--sweet-edge); border-radius: 12px; color: var(--sweet-ink); }
body:not(.hover) .shop-row { background: var(--sweet-blush); border-color: var(--sweet-edge); }
.shop-row:first-child { background: #fff0cb !important; border-color: var(--sweet-gold) !important; }
.shop-row .name, .shop-row .count, .bubble .a { text-shadow: none; }
.shop-row .count, .bubble .q, .gate-hint, .idle-tip .dim { color: var(--sweet-muted); }
.shop-row .count b, .bubble .a { color: var(--sweet-ink); }
:is(.gate-btn, .act-btn.stop, .shops-winner) { background: linear-gradient(#ffa8c8, var(--sweet-pink)); color: #fff; box-shadow: none; }
.shops-actions, .shop-row .row-ops { background: var(--sweet-cream); }
.shop-row .row-ops button, .act-btn.reset { background: var(--sweet-blush); color: var(--sweet-ink); border-color: var(--sweet-edge); }
.phase-badge { background: #ffe0ed; color: var(--sweet-ink); }
  .agent-tip { color: var(--sweet-ink); background: var(--sweet-cream); padding: 6px 12px; border-radius: 8px; }
  .agent-tip b { color: #b93c6a; }

  /* 紧凑默认：悬浮窗通常只占屏幕很小区域，优先保证一屏信息密度。 */
  .topbar { gap: 4px; padding: 5px 8px; }
  .status-dot { width: 7px; height: 7px; }
  .anchor-name { font-size: 11px; }
  .mode-hint { font-size: 9px; }
  .mode-tabs { gap: 2px; }
  .mode-btn { font-size: 10px; padding: 3px 7px; }
  .panel { padding: 6px 7px 8px; gap: 5px; }
  #panel-wheel { padding-top: 6px; }
  .wheel-wrap { --ring-gap: clamp(3px, .8cqw, 8px); }
  .slot-cell { padding: clamp(3px, .8cqw, 8px); border-width: 2px; border-radius: 14px; gap: 2px; }
  .wheel-meta { font-size: max(9px, 2.2cqw); padding: 3px 9px; }
  .winner-banner { left: 7px; right: 7px; bottom: 2px; max-height: 34px; padding: 2px 5px; border-width: 1px; border-radius: 8px; font-size: clamp(11px, 2.8cqw, 20px); }
  #panel-likes { padding: 38px 7px 8px; gap: 4px; }
  .likes-heading { font-size: clamp(18px, 5.8cqw, 30px); -webkit-text-stroke-width: 2px; }
  .likes-summary { padding: 3px 9px; border-width: 1px; border-radius: 8px; font-size: clamp(11px, 3.2cqw, 17px); }
  .likes-session { padding: 2px 7px; border-radius: 6px; font-size: 10px; }
  .likes-list { margin-top: 1px; }
  .like-row { gap: 6px; margin: 3px 0; min-height: 34px; padding: 5px 7px; border-width: 1px; border-radius: 8px; box-shadow: inset 0 0 0 1px #fff; font-size: clamp(13px, 4.2cqw, 22px); }
  .like-avatar { width: clamp(24px, 7cqw, 36px); height: clamp(24px, 7cqw, 36px); border-width: 1px; }
  .like-row strong { font-size: clamp(12px, 3.8cqw, 20px); }
  .likes-empty { padding: 9px; border-width: 1px; border-radius: 8px; font-size: 11px; }
  #shops-board { gap: 4px; }
  .shops-title { gap: 5px; font-size: clamp(11px, 2.8cqw, 16px); padding: 4px 7px; border-radius: 8px; }
  .shops-list { gap: 2px; padding: 2px; }
  .shop-row { gap: 5px; min-height: 0; padding: 3px 6px; border-radius: 7px; }
  .shop-row .rank { width: 17px; height: 17px; border-radius: 5px; font-size: 10px; }
  .shop-row .name { font-size: clamp(11px, 2.8cqw, 17px); line-height: 1.1; }
  .shop-row .count { font-size: 10px; }
  .shop-row .count b { font-size: 13px; }
  .shops-actions { gap: 4px; }
  .shops-actions .act-btn { padding: 6px; font-size: 11px; border-radius: 7px; }
  .shops-winner { padding: 7px; font-size: clamp(12px, 3.2cqw, 19px); border-radius: 8px; }
  .agent-bubbles { gap: 4px; }
  .bubble { padding: 6px 8px; border-radius: 8px; }
  .bubble .q { font-size: 10px; margin-bottom: 2px; }
  .bubble .a { font-size: clamp(11px, 3cqw, 17px); line-height: 1.35; }

  @media (min-width: 800px) {
    /* 大窗口只略微放松密度，不恢复旧的超大榜单行。 */
    .panel { padding: 8px 10px 10px; }
    #panel-likes { padding: 10px 10px 10px; }
    .like-row { min-height: 42px; padding: 6px 9px; }
  }


.bet-board { position: fixed; z-index: 36; left: 3%; right: 3%; top: 8%; padding: 10px 12px; border: 2px solid #edbdcc; border-radius: 14px; background: rgba(255,243,223,.96); color: #63402d; pointer-events: none; }
.bet-head { display: flex; gap: 8px; align-items: center; font-size: clamp(11px, 2.6cqw, 17px); font-weight: 800; }
.bet-head span:last-child { margin-left: auto; color: #b24370; }
.bet-question { margin-top: 5px; font-size: clamp(13px, 3.2cqw, 21px); font-weight: 900; line-height: 1.3; overflow-wrap: anywhere; }
.bet-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 7px; margin-top: 8px; }
.bet-option { min-width: 0; padding: 7px 8px; border: 1px solid #edbdcc; border-radius: 9px; background: rgba(255,255,255,.58); }
.bet-option.winner { border-color: #d4932c; box-shadow: 0 0 0 2px rgba(237,189,86,.28); }
.bet-option-title { display: flex; justify-content: space-between; gap: 6px; font-weight: 800; font-size: clamp(12px, 3cqw, 20px); }
.bet-option-title span { flex: none; font-size: clamp(10px, 2cqw, 14px); font-weight: 600; color: #8f6474; }
.bet-bar { height: 5px; margin-top: 6px; overflow: hidden; border-radius: 99px; background: #f0dbe3; }
.bet-bar i { display: block; height: 100%; border-radius: inherit; background: #ea6397; transition: width .25s ease; }
.bet-result { margin-top: 7px; text-align: center; font-weight: 800; color: #b24370; }
.agent-reply { position: fixed; z-index: 40; left: 3%; right: 3%; bottom: 3%; padding: 10px 14px; border: 2px solid #edbdcc; border-radius: 14px; background: #fff3df; color: #63402d; font-size: clamp(12px, 3cqw, 20px); white-space: pre-line; overflow-wrap: anywhere; pointer-events: none; opacity: 1; transition: opacity .35s ease, transform .35s ease; }
.agent-reply.agent-reply-fade { opacity: 0; transform: translateY(6px); }

.agent-notice { position: fixed; top: 12%; left: 4%; right: 4%; z-index: 41; background: #fff3df; color: #963f59; border: 2px solid #edbdcc; border-radius: 12px; padding: 8px 12px; font-size: clamp(11px, 3cqw, 18px); pointer-events: none; }

/* Keep dianzan2.jpg as one continuous canvas; every live field shares this coordinate system. */
#panel-likes { padding: 3px; gap: 0; justify-content: center; }
.likes-art { width: 100%; max-width: min(100%, calc((100dvh - 8px) / 1.02)); container-type: inline-size; flex: none; }
.likes-podium { position: relative; width: 100%; aspect-ratio: 1315 / 1197; }
.likes-podium-art { display: block; width: 100%; height: 100%; pointer-events: none; }
.likes-title { position: absolute; left: 49%; top: 12.7%; transform: translate(-50%, -50%); font-family: 'YouYuan', 'Microsoft YaHei', sans-serif; font-size: 4.4cqw; font-weight: 900; letter-spacing: .6cqw; color: #fff8f2; text-shadow: 0 .35cqw .1cqw #d0568b, 0 0 .8cqw #e97ba6; pointer-events: none; }
.like-podium-place { position: absolute; inset: 0; pointer-events: none; }
.like-podium-place .like-avatar-holder { position: absolute; left: var(--avatar-x); top: var(--avatar-y); width: var(--avatar-size); aspect-ratio: 1; transform: translate(-50%, -50%); border: .35cqw solid #fff8ef; }
.like-avatar-holder { display: grid; place-items: center; position: relative; flex: none; overflow: hidden; border-radius: 50%; background: #fff4ef; color: #b84070; }
.like-avatar-fallback { font-size: 5cqw; font-weight: 800; }
.like-avatar-holder .like-avatar { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; box-shadow: none; object-fit: cover; }
.like-podium-place .like-name { position: absolute; left: var(--name-x); top: var(--name-y); transform: translate(-50%, -50%); width: var(--name-width); text-align: center; color: #7b3157; font-size: 2.8cqw; line-height: 1.15; font-weight: 900; text-shadow: 0 .12cqw #fff7f3; overflow: hidden; white-space: nowrap; }
.like-podium-place .like-count::before { content: '♥ '; }
.like-podium-place .like-count { position: absolute; left: var(--count-x); top: var(--count-y); width: 12%; transform: translate(-50%, -50%); text-align: center; color: #b93c6a; font-size: 3cqw; line-height: 1.2; font-weight: 800; text-shadow: 0 .1cqw #fff3f6; overflow: hidden; white-space: nowrap; }
.place-1 { --avatar-x: 49.05%; --avatar-y: 27.45%; --avatar-size: 12.8%; --name-x: 49.05%; --name-y: 34.85%; --name-width: 27%; --count-x: 49.05%; --count-y: 39.45%; }
.place-2 { --avatar-x: 25.55%; --avatar-y: 33.95%; --avatar-size: 12%; --name-x: 25.55%; --name-y: 40.9%; --name-width: 25%; --count-x: 25.55%; --count-y: 45.5%; }
.place-3 { --avatar-x: 74%; --avatar-y: 34.45%; --avatar-size: 12%; --name-x: 74%; --name-y: 41.4%; --name-width: 25%; --count-x: 74%; --count-y: 46%; }
.likes-board { position: absolute; inset: 0; pointer-events: none; }
.likes-list { position: absolute; left: 10.6%; right: 10.6%; top: 54.3%; width: auto; margin: 0; padding: 0; overflow: visible; }
.likes-list .like-row { display: flex; align-items: center; gap: .9cqw; height: 3.82cqw; min-height: 0; margin: .38cqw 0; padding: .18cqw 1.1cqw; border: .2cqw solid #edabc4; border-radius: 1.65cqw; background: linear-gradient(90deg, rgba(255, 235, 244, .98), rgba(255, 247, 250, .96)); box-shadow: inset 0 .12cqw 0 rgba(255,255,255,.95), 0 .12cqw .42cqw rgba(199, 101, 139, .18); font-size: 2.9cqw; }
.likes-list .like-rank { flex: none; display: grid; place-items: center; min-width: 3.9cqw; height: 2.85cqw; padding: 0 .3cqw; box-sizing: border-box; border-radius: 1.45cqw; background: #fd92b7; color: #fff; font-size: 2.5cqw; font-weight: 800; }
.likes-list .like-avatar-holder { width: 3.4cqw; height: 3.4cqw; border: .22cqw solid #fff; }
.likes-list .like-avatar-fallback { font-size: 2.2cqw; }
.likes-list .like-name { flex: 1; min-width: 0; color: #8a4a58; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.likes-list strong { flex: none; font-size: 2.8cqw; color: #d75385; }
.likes-caption { display: flex; justify-content: center; align-items: center; gap: 1cqw; padding-top: .5cqw; }
.likes-caption :is(.likes-summary, .likes-session) { margin: 0; padding: .4cqw 1.5cqw; font-size: 2.8cqw; line-height: 1.4; border: 1px solid #edbdcc; border-radius: 2cqw; white-space: nowrap; }
.likes-empty { width: max-content; max-width: 90%; margin: 0 auto; padding: 1.5cqw 3cqw; font-size: 3.1cqw; }