:root {
  --bg-deep: #0c0a08;
  --bg: #14110e;
  --bg-elevated: #1c1814;
  --bg-panel: #221e19;
  --border: rgba(212, 175, 100, 0.18);
  --border-strong: rgba(212, 175, 100, 0.35);
  --gold: #d4af64;
  --gold-bright: #f0d78c;
  --gold-dim: #9a7b3c;
  --text: #f2ebe0;
  --text-muted: #a89a88;
  --danger: #e07a6a;
  --ok: #7ec99a;
  --accent: #e8a0b0;
  --clip: #5a8fbf;
  --qte: #d4af64;
  --gate: #c47a3a;
  --pose2: #b07ec9;
  --revive: #e07a6a;
  --merge: #7ec99a;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --font: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --right-w: 340px;
  --node-w: 168;
  --node-h: 78;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  height: 100dvh;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #1a1612, #120f0c);
  flex-wrap: wrap;
  z-index: 10;
}

.brand h1 {
  font-size: 1.05rem;
  color: var(--gold-bright);
  letter-spacing: 0.06em;
  font-weight: 650;
}
.brand-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }

.toolbar-main, .toolbar-view {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.toolbar-main { flex: 1; }
.toolbar-view { margin-left: auto; }

.btn, .btn-icon, .sel {
  appearance: none;
  font-family: inherit;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(212,175,100,0.14), rgba(212,175,100,0.04));
  color: var(--text);
  min-height: 36px;
  touch-action: manipulation;
}
.btn { padding: 0 12px; font-size: 0.8rem; }
.btn.primary {
  background: linear-gradient(180deg, rgba(212,175,100,0.32), rgba(212,175,100,0.1));
  color: var(--gold-bright);
  border-color: var(--gold);
}
.btn.ghost { background: transparent; opacity: 0.85; }
.btn.danger-block {
  width: 100%;
  margin-top: 10px;
  border-color: rgba(224,122,106,0.5);
  color: #f0b0a4;
  background: rgba(224,122,106,0.12);
}
.btn-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elevated);
}
.btn-icon.danger { border-color: rgba(224,122,106,0.5); color: #f0b0a4; }
.btn-icon:disabled, .btn:disabled { opacity: 0.35; cursor: not-allowed; }
.sel {
  padding: 0 8px;
  background: var(--bg-elevated);
  font-size: 0.78rem;
  max-width: 140px;
}

.schema-badge {
  font-size: 0.68rem;
  color: var(--gold-dim);
  border: 1px solid var(--border);
  padding: 4px 8px;
  border-radius: 999px;
  font-family: var(--mono);
}
.zoom-label {
  min-width: 48px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: var(--mono);
}

.workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr var(--right-w);
}

.canvas-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background:
    radial-gradient(900px 400px at 20% 0%, rgba(212,175,100,0.06), transparent 55%),
    var(--bg);
}

.rail-legend {
  display: flex;
  gap: 14px;
  padding: 8px 14px 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.leg::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
}
.leg.main::before { background: var(--gold); }
.leg.spur::before { background: var(--accent); }
.leg.edge::before { background: var(--ok); }

.canvas-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background-image:
    linear-gradient(rgba(212,175,100,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,100,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
.canvas-wrap.panning { cursor: grabbing; }

.edges-layer, .nodes-layer, .rail-guide {
  position: absolute;
  left: 0; top: 0;
  transform-origin: 0 0;
}
.edges-layer {
  width: 8000px;
  height: 4000px;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.edges-layer .edge-hit { pointer-events: stroke; cursor: pointer; }
.nodes-layer {
  width: 8000px;
  height: 4000px;
  z-index: 2;
}
.rail-guide {
  width: 8000px;
  height: 4px;
  top: 0;
  background: linear-gradient(90deg, transparent, rgba(212,175,100,0.22), transparent);
  z-index: 0;
  pointer-events: none;
}

.canvas-foot {
  padding: 6px 14px;
  font-size: 0.68rem;
  color: var(--text-muted);
  border-top: 1px solid rgba(255,255,255,0.04);
}

.status-toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: rgba(34,30,25,0.96);
  border: 1px solid var(--border-strong);
  color: var(--gold-bright);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  max-width: min(90vw, 520px);
  text-align: center;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}
.status-toast.show { opacity: 1; }

/* —— Nodes —— */
.graph-node {
  position: absolute;
  width: calc(var(--node-w) * 1px);
  min-height: calc(var(--node-h) * 1px);
  border-radius: 12px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-panel);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}
.graph-node.selected {
  box-shadow: 0 0 0 2px var(--gold), 0 10px 28px rgba(0,0,0,0.45);
}
.graph-node.spur {
  border-style: dashed;
  opacity: 0.95;
}
.graph-node .n-type {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dim);
  font-family: var(--mono);
}
.graph-node .n-title {
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 2px;
  line-height: 1.25;
}
.graph-node .n-meta {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.graph-node .n-chip {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(126,201,154,0.15);
  color: var(--ok);
  font-family: var(--mono);
}
.graph-node[data-type="clip"] { border-color: rgba(90,143,191,0.55); }
.graph-node[data-type="clip"] .n-type { color: #8eb8e0; }
.graph-node[data-type="qte"] { border-color: rgba(212,175,100,0.65); }
.graph-node[data-type="qte"] .n-type { color: var(--qte); }
.graph-node[data-type="gate"] { border-color: rgba(196,122,58,0.7); }
.graph-node[data-type="gate"] .n-type { color: #e0a060; }
.graph-node[data-type="pose2"] { border-color: rgba(176,126,201,0.65); }
.graph-node[data-type="pose2"] .n-type { color: #c9a0e0; }
.graph-node[data-type="revive"] { border-color: rgba(224,122,106,0.7); }
.graph-node[data-type="revive"] .n-type { color: var(--revive); }
.graph-node[data-type="merge"] { border-color: rgba(126,201,154,0.7); }
.graph-node[data-type="merge"] .n-type { color: var(--merge); }

/* —— Edges —— */
.edge-path {
  fill: none;
  stroke: rgba(212,175,100,0.45);
  stroke-width: 2;
  pointer-events: none;
}
.edge-path.spur-edge { stroke: rgba(232,160,176,0.55); stroke-dasharray: 6 4; }
.edge-path.selected { stroke: var(--gold-bright); stroke-width: 2.5; }
.edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
}
.edge-label {
  fill: var(--ok);
  font-size: 11px;
  font-family: var(--mono);
  pointer-events: none;
}

/* —— Right panel —— */
.right-panel {
  border-left: 1px solid var(--border);
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 5;
}

.phone-section {
  padding: 12px 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.phone-label {
  align-self: flex-start;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.phone-frame {
  width: 200px;
  height: 356px;
  border-radius: 22px;
  border: 2px solid rgba(212,175,100,0.35);
  background: #0a0806;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.phone-notch {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 8px;
  border-radius: 999px;
  background: #1a1612;
  z-index: 2;
}
.phone-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(160deg, #2a1a28 0%, #1a2230 55%, #14110e 100%);
}
.hud {
  padding: 22px 10px 6px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
}
.pleasure-wrap { flex: 1; }
.pleasure-label { font-size: 0.62rem; color: var(--accent); margin-bottom: 3px; }
.pleasure-bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}
.pleasure-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #e8a0b0, #d4af64);
  border-radius: 999px;
  transition: width 0.2s;
}

/* Comfort / enjoyment HUD */
.comfort-hud .pleasure-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  color: #f2c4d0;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.comfort-hud .comfort-icon {
  font-size: 0.92rem;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(232,160,176,0.45));
  transition: transform 0.2s ease;
}
/* pleasure3: HUD is label「舒服」+ number + bar only — no heart/emoji icons */
.comfort-hud .comfort-icon,
.comfort-mini .comfort-icon {
  display: none !important;
}
.comfort-delta-chip {
  display: none !important;
}
.comfort-hud[data-tier="1"] .comfort-icon { transform: scale(1.05); }
.comfort-hud[data-tier="2"] .comfort-icon { transform: scale(1.12); }
.comfort-hud[data-tier="3"] .comfort-icon {
  transform: scale(1.2);
  filter: drop-shadow(0 0 8px rgba(255,200,120,0.65));
}
.comfort-hud .comfort-text { opacity: 0.9; }
.comfort-hud .comfort-num {
  font-variant-numeric: tabular-nums;
  color: #ffe8b0;
  font-size: 0.85rem;
  margin-left: 2px;
}
.comfort-hud[data-tier="0"] .pleasure-fill { background: linear-gradient(90deg, #9a8a90, #c4a090); }
.comfort-hud[data-tier="1"] .pleasure-fill { background: linear-gradient(90deg, #e8a0b0, #d4af64); }
.comfort-hud[data-tier="2"] .pleasure-fill { background: linear-gradient(90deg, #f0a0c0, #f0c878); }
.comfort-hud[data-tier="3"] .pleasure-fill { background: linear-gradient(90deg, #ff9ec0, #ffe08a); }

.comfort-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  flex-wrap: wrap;
  max-width: 160px;
}
.comfort-mini .comfort-icon { font-size: 12px; }
.comfort-mini-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.comfort-mini-bar {
  display: block;
  width: 72px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  flex: 0 0 auto;
}
.comfort-mini-bar .pleasure-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8a0b0, #d4af64);
  transition: width 0.12s linear;
}
.comfort-mini[data-tier="1"] .pleasure-fill { background: linear-gradient(90deg, #e8a0b0, #d4af64); }
.comfort-mini[data-tier="2"] .pleasure-fill { background: linear-gradient(90deg, #f0a0c0, #f0c878); }
.comfort-mini[data-tier="3"] .pleasure-fill { background: linear-gradient(90deg, #ff9ec0, #ffe08a); }
.comfort-mini.is-bump .comfort-mini-bar .pleasure-fill {
  filter: brightness(1.15);
}

.comfort-hud,
.comfort-mini,
.pleasure-wrap {
  position: relative;
}
.pleasure-wrap.hidden,
.comfort-hud.hidden,
.comfort-mini.hidden {
  display: none !important;
}

.comfort-hud.is-bump .comfort-num,
.comfort-mini.is-bump b,
.comfort-mini.is-bump .comfort-num {
  transform: scale(1.12);
  text-shadow: 0 0 10px rgba(255, 220, 140, 0.75);
  transition: transform 0.15s ease, text-shadow 0.15s ease;
}
.comfort-hud.is-bump .comfort-icon,
.comfort-mini.is-bump .comfort-icon {
  transform: scale(1.18);
  filter: drop-shadow(0 0 8px rgba(255, 180, 160, 0.7));
}
.comfort-hud.is-bump .pleasure-fill,
.comfort-hud.is-bump .pleasure-bar .pleasure-fill {
  transition: none !important;
}

.comfort-delta-chip {
  position: absolute;
  right: 0;
  top: -14px;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  animation: comfort-chip-float 0.8s ease-out forwards;
  z-index: 2;
}
.comfort-delta-chip.pos { color: #ffe08a; }
.comfort-delta-chip.neg { color: #ff9a9a; }
@keyframes comfort-chip-float {
  0% { opacity: 0; transform: translateY(4px) scale(0.9); }
  20% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-12px) scale(1.05); }
}

/* Skirt media panel in inspector */
.skirt-media-panel {
  margin: 10px 0 12px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(212,175,100,0.35);
  background: linear-gradient(180deg, rgba(64,40,56,0.55), rgba(32,24,36,0.4));
}
.skirt-media-panel.hidden { display: none !important; }
.skirt-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.skirt-panel-head strong { color: #f0d78c; font-size: 0.82rem; }
.skirt-path-line {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin: 0 0 6px;
  word-break: break-all;
}
.skirt-miss {
  font-size: 0.72rem;
  color: #e8a0a0;
  background: rgba(120,40,40,0.25);
  border: 1px dashed rgba(200,100,100,0.5);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.skirt-miss.hidden { display: none !important; }
.skirt-prev-box {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 220px;
  border-radius: 8px;
  overflow: hidden;
  background: #111;
  margin-bottom: 8px;
}
.skirt-insp-prev {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #111;
}
.skirt-insp-prev.hidden { display: none !important; }
.skirt-prev-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  pointer-events: none;
}
.skirt-prev-empty.hidden { display: none !important; }
.skirt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.scene-tag {
  font-size: 0.58rem;
  font-family: var(--mono);
  color: var(--gold-dim);
  border: 1px solid var(--border);
  padding: 2px 5px;
  border-radius: 4px;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pv-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
}
.pv-title { font-size: 0.95rem; color: var(--gold-bright); font-weight: 600; }
.pv-sub { font-size: 0.68rem; color: var(--text-muted); margin-top: 8px; line-height: 1.45; }
.pv-type-badge {
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
}

.inspector {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 20px;
}
.inspector-empty {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.6;
  padding-top: 12px;
}
.inspector-empty code, .ref-hint code {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--gold-bright);
  background: rgba(212,175,100,0.08);
  padding: 1px 4px;
  border-radius: 4px;
}
.muted { color: var(--text-muted); }
.muted.tiny, .tiny { font-size: 0.7rem; }
.hidden { display: none !important; }

.insp-title {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  font-size: 0.78rem;
}
.field > span { color: var(--text-muted); font-size: 0.7rem; }
.field input, .field textarea, .field select {
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  resize: vertical;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--gold);
}
.ref-hint {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin: -4px 0 10px;
}
.type-panel { margin-top: 2px; }
.type-panel.hidden { display: none !important; }

@media (max-width: 980px) {
  .workspace { grid-template-columns: 1fr; }
  .right-panel {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: min(var(--right-w), 100%);
    max-height: 100%;
  }
}

.pleasure-wrap.hidden { display: none !important; }
.graph-node[data-type="clip"] { border-color: rgba(120, 180, 220, 0.55); }
.graph-node[data-type="clip"] .n-type { color: #8ec5e8; }
.field.hidden { display: none !important; }


.graph-node { cursor: grab; touch-action: none; user-select: none; }
.graph-node:active, .graph-node.dragging { cursor: grabbing; }
.modal.hidden { display: none !important; }
.modal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-card {
  background: #1a1612; color: #f2e8d8; border: 1px solid rgba(212,175,100,0.35);
  border-radius: 12px; max-width: 560px; width: 100%; padding: 16px 18px 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}
.modal-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.modal-card-head h3 { margin: 0; font-size: 16px; }
.shortcuts-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.shortcuts-table th, .shortcuts-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.shortcuts-table kbd {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  background: #2a241c; border: 1px solid rgba(255,255,255,0.15); font-size: 12px;
}
.modal-actions { margin-top: 12px; text-align: right; }
.muted.tiny { opacity: 0.7; font-size: 12px; margin-top: 10px; }

/* —— 侧栏媒体预览 —— */
.pv-media { position:absolute; inset:0; background:#0a0806; z-index:0; overflow:hidden; }
.pv-video, .pv-image { width:100%; height:100%; object-fit:cover; display:block; }
.pv-image.hidden, .pv-video.hidden, .pv-media-miss.hidden { display:none !important; }
.pv-media-miss {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(242,232,216,0.65); font-size:12px; text-align:center; padding:16px;
  background: repeating-linear-gradient(45deg,#1a1410,#1a1410 8px,#221c16 8px,#221c16 16px);
}
.phone-stage .hud, .phone-stage .pv-body, .phone-stage .pv-type-badge { position:relative; z-index:2; }
.phone-stage .pv-body { pointer-events:none; text-shadow:0 1px 4px #000; }
.phone-actions { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.btn.tiny { padding:4px 10px; font-size:12px; }
.phone-hint { margin:6px 0 0; }

/* —— 试玩全屏 —— */
.playtest-shell {
  background:#120e0b; color:#f2e8d8; border:1px solid rgba(212,175,100,0.35);
  border-radius:14px; width:min(960px,96vw); max-height:92vh; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(0,0,0,0.5);
}
.playtest-bar {
  position: relative; z-index: 20;
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  pointer-events: auto;
}
.playtest-bar-actions, .playtest-bar-actions button {
  position: relative; z-index: 21; pointer-events: auto;
}
.playtest-bar strong { font-size:14px; }
.pt-status { flex:1; opacity:0.75; font-size:12px; }
/* playtest-only build stamp (not on phone screen art) */
.pt-hud-build {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(240, 215, 140, 0.85);
  background: rgba(40, 28, 18, 0.55);
  border: 1px solid rgba(212, 175, 100, 0.35);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 8px;
  white-space: nowrap;
  user-select: none;
}

.playtest-bar-actions { display:flex; gap:8px; align-items:center; }
.playtest-body { display:flex; gap:16px; padding:16px; overflow:auto; }
.pt-phone {
  position:relative; width:320px; height:568px; flex:0 0 auto;
  border-radius:28px; overflow:hidden; background:#000;
  border:2px solid rgba(212,175,100,0.35);
}
.pt-hud { position:absolute; top:0; left:0; right:0; z-index:12; padding:10px 10px 0;
  background:transparent; pointer-events:none; }
.pt-media { position:absolute; inset:0; background:#0a0806; }
.pt-video, .pt-image { width:100%; height:100%; object-fit:cover; }
.pt-image.hidden, .pt-video.hidden, .pt-hold.hidden { display:none !important; }
.pt-hold {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1; pointer-events: none;
  background: #0a0806;
}
.pt-placeholder {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:20px; text-align:center; color:rgba(242,232,216,0.7); font-size:13px;
  background: repeating-linear-gradient(45deg,#1a1410,#1a1410 10px,#221c16 10px,#221c16 20px);
}
.pt-placeholder.hidden { display:none !important; }
.pt-overlay {
  position:absolute; left:0; right:0; bottom:0; z-index:4; padding:14px 12px 18px;
  background:linear-gradient(to top, rgba(0,0,0,0.82), transparent);
}
.pt-title { font-size:15px; font-weight:600; }
.pt-sub { font-size:12px; opacity:0.85; margin-top:4px; min-height:1.2em; }
.pt-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.pt-actions .btn { flex:1 1 auto; min-width:80px; }

.pt-subtitle {
  position: absolute; left: 10px; right: 10px; bottom: 88px; z-index: 7;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.62);
  color: #f2e8d8; text-align: center; line-height: 1.35;
  font-size: 16px; pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
  max-height: 30%; overflow: auto;
}
.pt-subtitle.hidden { display: none !important; }
.pt-tap-hint {
  position: absolute; left: 50%; bottom: 52px; z-index: 8;
  transform: translateX(-50%);
  padding: 6px 14px; border-radius: 999px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(242,232,216,0.28);
  color: rgba(242,232,216,0.88);
  font-size: 12px; letter-spacing: 0.06em;
  pointer-events: none;
  animation: pt-tap-pulse 1.6s ease-in-out infinite;
}
.pt-tap-hint.hidden { display: none !important; }
@keyframes pt-tap-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.field.check-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.field.check-row span { flex: 1; }
.field.check-row input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }
.pt-log-wrap { flex:1; min-width:200px; }
.pt-log-wrap h4 { margin:0 0 8px; font-size:13px; }
.pt-log { margin:0; padding-left:18px; font-size:12px; max-height:420px; overflow:auto; line-height:1.5; }
.pt-log li { margin-bottom:4px; opacity:0.9; }
.pt-log li.fail { color:#f0a0a0; }
.pt-log li.ok { color:#a8e0b8; }

.save-status {
  font-size: 11px;
  font-family: var(--mono);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--bg-elevated);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.save-status.dirty {
  color: #e8c07a;
  border-color: rgba(232, 192, 122, 0.55);
  background: rgba(232, 192, 122, 0.12);
}
.save-status.ok {
  color: #a8e0b8;
  border-color: rgba(168, 224, 184, 0.45);
  background: rgba(168, 224, 184, 0.10);
}
.save-status.hidden, #btn-restore-draft.hidden { display: none !important; }

.media-bind-status { font-size: 11px; opacity: 0.8; margin-right: 6px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-upload-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.file-btn { cursor: pointer; display: inline-flex; align-items: center; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 0; z-index: 2;
}


/* QTE host overlays phone media during playtest */
#pt-qte-host {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: auto;
}
#pt-qte-host.hidden { display: none !important; }
.pt-overlay.pt-qte-active {
  z-index: 6;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 55%);
}
.pt-overlay.pt-qte-active .pt-actions { display: none; }


/* Q1 video delivery slots in inspector */
.q1-media-slots {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(212,175,100,0.25);
}
.q1-media-slots .slot-heading {
  margin: 0 0 4px;
  font-size: 13px;
  color: #e8d5b5;
}
.slot-group {
  margin: 10px 0;
  padding: 8px;
  border-radius: 10px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.06);
}
.slot-group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(242,232,216,0.75);
  margin-bottom: 8px;
}
.qte-slot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 6px;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.qte-slot:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.slot-meta {
  grid-column: 1 / -1;
  font-size: 11px;
  color: rgba(242,232,216,0.9);
}
.slot-meta code {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  opacity: 0.7;
}
.qte-slot .slot-path {
  width: 100%;
  font-size: 11px;
  padding: 5px 7px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  color: #f2e8d8;
}
.slot-status {
  grid-column: 1 / -1;
  font-size: 10px;
  opacity: 0.7;
}
.slot-status.ok { color: #8fd9a8; opacity: 1; }
.slot-status.miss { color: #e0a0a0; opacity: 1; }


/* ===== Q1 可视化投放板 ===== */
.q1-board-shell {
  background: #120e0b; color: #f2e8d8;
  border: 1px solid rgba(212,175,100,0.4);
  border-radius: 14px; width: min(980px, 96vw); max-height: 92vh;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.q1-board-bar {
  position: relative; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.08);
  pointer-events: auto;
}
.q1-board-bar button { position: relative; z-index: 21; pointer-events: auto; }
.q1-board-bar strong { flex: 0 0 auto; }
.q1-board-bar .muted { flex: 1; }
.q1-board-body {
  display: flex; gap: 18px; padding: 16px; overflow: auto; align-items: flex-start;
}
.q1-phone-preview {
  width: 280px; flex: 0 0 auto;
  aspect-ratio: 9 / 16;
  background: #000; border-radius: 22px; overflow: hidden;
  border: 2px solid rgba(212,175,100,0.35);
  display: flex; flex-direction: column;
}
.q1-win-top {
  flex: 0 0 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative; background: #0a0806;
}
.q1-win-bottom-row {
  flex: 0 0 50%;
  display: flex; flex-direction: row; min-height: 0;
}
.q1-win-controls-pad {
  flex: 1; background: #000; color: rgba(242,232,216,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; text-align: center; line-height: 1.4;
}
.q1-win {
  position: relative; overflow: hidden; background: #1a1218;
}
.q1-win-top .q1-win, .q1-win-top {
  /* top window itself is the face frame */
}
.q1-win-top {
  /* the top half IS the 1x1 face area centered */
}
.q1-win-top::after {
  content: "";
}
/* Make top content a 1x1 box centered */
.q1-win-top {
  justify-content: center;
}
.q1-win-face-box, .q1-win-top > .q1-prev-video,
.q1-win-top > .q1-win-miss {
  position: absolute;
}
.q1-win-top .q1-prev-video,
.q1-win-top .q1-win-miss {
  /* square centered in top half */
  height: 100%;
  aspect-ratio: 1 / 1;
  width: auto;
  max-width: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  object-fit: cover;
}
.q1-win-waist {
  height: 100%;
  aspect-ratio: 1 / 1;
  width: auto;
  margin-left: auto;
  flex: 0 0 auto;
  position: relative;
}
.q1-win-waist .q1-prev-video,
.q1-win-waist .q1-win-miss {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.q1-prev-video { background: #111; }
.q1-win-miss {
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 8px; font-size: 11px;
  color: rgba(245,230,208,0.55);
  background: repeating-linear-gradient(45deg,#2a1a22,#2a1a22 8px,#22141c 8px,#22141c 16px);
}
.q1-win-miss.hidden { display: none !important; }
.q1-prev-video.hidden { display: none !important; }
.q1-win-label {
  position: absolute; top: 6px; left: 6px; z-index: 3;
  font-size: 10px; padding: 2px 6px; border-radius: 999px;
  background: rgba(0,0,0,0.65); color: #f2e8d8; pointer-events: none;
}
.q1-slot-list { flex: 1; min-width: 280px; }
.q1-slot-list h4 { margin: 8px 0 6px; font-size: 12px; color: #d4af64; }
.q1-board-slot {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 4px 6px;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.06);
}
.q1-board-slot .slot-meta { grid-column: 1 / -1; font-size: 11px; }
.q1-board-slot .slot-meta code { margin-left: 6px; opacity: 0.65; font-size: 10px; }
.q1-board-slot .slot-path {
  grid-column: 1 / -1;
  width: 100%; font-size: 11px; padding: 6px 8px;
  border-radius: 6px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35); color: #f2e8d8;
}
.q1-board-slot .slot-status { grid-column: 1 / -1; font-size: 10px; }
.q1-board-slot .slot-status.ok { color: #8fd9a8; }
.q1-board-slot .slot-status.miss { color: #e0a0a0; }
.q1-media-slots .btn.primary { margin-top: 4px; }


/* Q1 board modal layout (final) */
#modal-q1-board.modal:not(.hidden) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 80;
}
.q1-board-shell {
  background: #120e0b; color: #f2e8d8;
  border: 1px solid rgba(212,175,100,0.45);
  border-radius: 14px; width: min(980px, 96vw); max-height: 92vh;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.q1-board-bar {
  position: relative; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.08);
  pointer-events: auto;
}
.q1-board-bar button { position: relative; z-index: 21; pointer-events: auto; }
.q1-board-bar strong { flex: 0 0 auto; font-size: 14px; }
.q1-board-bar .muted, #q1-board-node { flex: 1; }
.q1-board-body {
  display: flex; gap: 18px; padding: 16px; overflow: auto; align-items: flex-start;
}
@media (max-width: 800px) {
  .q1-board-body { flex-direction: column; align-items: center; }
}
.q1-phone-preview {
  width: 280px; flex: 0 0 auto; height: 498px;
  background: #000; border-radius: 22px; overflow: hidden;
  border: 2px solid rgba(212,175,100,0.35);
  display: flex; flex-direction: column;
}
.q1-win-top {
  flex: 0 0 50%; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: #0a0806; overflow: hidden;
}
.q1-win-top .q1-prev-video,
.q1-win-top .q1-win-miss {
  height: 100%; aspect-ratio: 1/1; width: auto; max-width: 100%;
  object-fit: cover;
}
.q1-win-top .q1-win-miss {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  height: 100%; aspect-ratio: 1/1;
}
.q1-win-top .q1-prev-video {
  position: relative; z-index: 1;
}
.q1-win-bottom-row {
  flex: 0 0 50%; display: flex; flex-direction: row; min-height: 0;
}
.q1-win-controls-pad {
  flex: 1; background: #000; color: rgba(242,232,216,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; text-align: center; line-height: 1.4;
}
.q1-win-waist {
  height: 100%; aspect-ratio: 1/1; width: auto;
  margin-left: auto; flex: 0 0 auto; position: relative; overflow: hidden;
  background: #1a1218;
}
.q1-win-waist .q1-prev-video,
.q1-win-waist .q1-win-miss {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.q1-win-label {
  position: absolute; top: 6px; left: 6px; z-index: 3;
  font-size: 10px; padding: 2px 6px; border-radius: 999px;
  background: rgba(0,0,0,0.65); color: #f2e8d8; pointer-events: none;
}
.q1-win-miss {
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 8px; font-size: 11px;
  color: rgba(245,230,208,0.55);
  background: repeating-linear-gradient(45deg,#2a1a22,#2a1a22 8px,#22141c 8px,#22141c 16px);
  z-index: 0;
}
.q1-win-miss.hidden { display: none !important; }
.q1-prev-video.hidden { display: none !important; }
.q1-slot-list { flex: 1; min-width: 280px; width: 100%; }
.q1-slot-list h4 { margin: 8px 0 6px; font-size: 12px; color: #d4af64; }
.q1-board-slot {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 4px 6px; align-items: center; margin-bottom: 10px; padding: 8px;
  border-radius: 10px; background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.06);
}
.q1-board-slot .slot-meta { grid-column: 1 / -1; font-size: 11px; }
.q1-board-slot .slot-meta code { margin-left: 6px; opacity: 0.65; font-size: 10px; }
.q1-board-slot .slot-path {
  grid-column: 1 / -1; width: 100%; font-size: 11px; padding: 6px 8px;
  border-radius: 6px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35); color: #f2e8d8;
}
.q1-board-slot .slot-status { grid-column: 1 / -1; font-size: 10px; }
.q1-board-slot .slot-status.ok { color: #8fd9a8; }
.q1-board-slot .slot-status.miss { color: #e0a0a0; }
#btn-q1-media { border-color: rgba(212,175,100,0.55); color: #f0d78c; }


/* Q1 editable layers */
.q1-stage-col { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; }
.q1-phone-preview {
  position: relative;
  width: 280px; height: 498px;
  background: #000; border-radius: 22px; overflow: hidden;
  border: 2px solid rgba(212,175,100,0.35);
  user-select: none;
  display: flex; flex-direction: column;
}
/* neutralize legacy fixed top-half face window */
.q1-win-top {
  position: static !important;
  left: auto !important; right: auto !important; top: auto !important;
  height: auto !important;
  display: contents;
  overflow: visible;
  background: transparent;
  justify-content: unset; align-items: unset;
}
.q1-win-top .q1-prev-video,
.q1-win-top .q1-win-miss {
  height: auto; aspect-ratio: auto; width: auto; max-width: none;
  transform: none; left: auto; top: auto;
}
.q1-top-stage {
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
  background: #0a0806;
  min-height: 0;
}
.q1-bottom-stage {
  flex: 0 0 50%;
  position: relative;
  background: #000;
  min-height: 0;
  overflow: hidden;
}
.q1-layer {
  position: absolute;
  box-sizing: border-box;
  border: 1px dashed rgba(212,175,100,0.45);
  cursor: move;
  touch-action: none;
}
.q1-layer:hover, .q1-layer.active {
  border-color: #f0d78c;
  box-shadow: 0 0 0 1px rgba(240,215,140,0.35);
}
.q1-layer-face,
.q1-layer-waist {
  overflow: hidden;
  background: #1a1218;
  border-radius: 4px;
}
.q1-layer-face .q1-prev-video,
.q1-layer-face .q1-win-miss,
.q1-layer-waist .q1-prev-video,
.q1-layer-waist .q1-win-miss {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: none; left: 0; top: 0; aspect-ratio: auto; max-width: none; height: 100%;
}
.q1-layer-face .q1-win-miss,
.q1-layer-waist .q1-win-miss {
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 11px; color: rgba(245,230,208,0.55);
  background: repeating-linear-gradient(45deg,#2a1a22,#2a1a22 8px,#22141c 8px,#22141c 16px);
}
.q1-layer-btn {
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,16,12,0.25);
  border-radius: 50%;
  border-style: dashed;
}
.q1-hold-ring {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.q1-hold-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.q1-hold-track {
  fill: none; stroke: rgba(255,255,255,0.18); stroke-width: 6;
}
.q1-hold-fill {
  fill: none; stroke: #f0d78c; stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 264;
  stroke-dashoffset: 80; /* demo partial fill */
}
.q1-hold-label {
  position: relative; z-index: 1;
  text-align: center; font-size: clamp(8px, 18%, 14px); font-weight: 700;
  color: #f2e8d8; line-height: 1.25;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
}
.q1-resize {
  position: absolute; right: -5px; bottom: -5px;
  width: 14px; height: 14px;
  background: #f0d78c; border: 2px solid #1a1410;
  border-radius: 3px; cursor: nwse-resize; z-index: 5;
}
.q1-win-label {
  position: absolute; top: 4px; left: 4px; z-index: 3;
  font-size: 10px; padding: 2px 6px; border-radius: 999px;
  background: rgba(0,0,0,0.65); color: #f2e8d8; pointer-events: none;
}
.q1-win-miss.hidden, .q1-prev-video.hidden { display: none !important; }
.q1-layout-tools {
  width: 280px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
}
.q1-layout-row {
  display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center;
  margin-bottom: 6px;
}
.q1-layout-row > span { width: 32px; color: #d4af64; font-weight: 700; }
.q1-layout-row label {
  display: inline-flex; align-items: center; gap: 2px; color: rgba(242,232,216,0.75);
}
.q1-layout-row input[type="number"] {
  width: 48px; padding: 3px 4px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  background: #1a1410; color: #f2e8d8; font-size: 11px;
}
.q1-layout-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }


.q1-file-input {
  /* must NOT be display:none — Safari needs a "real" file input for label[for] */
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0.01;
  overflow: hidden;
  z-index: -1;
}
label.q1-upload-label {
  cursor: pointer;
  user-select: none;
}
label.q1-upload-label:active {
  filter: brightness(1.1);
}

.q1-upload-banner {
  display: none;
  margin: 8px 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(212,175,100,0.18);
  border: 1px solid rgba(212,175,100,0.45);
  color: #f2e8d8;
  font-size: 12px;
}
.q1-upload-banner.show { display: block; }
.q1-upload-banner.err {
  background: rgba(196,92,92,0.2);
  border-color: rgba(196,92,92,0.5);
}
.q1-upload-banner.ok {
  background: rgba(126,201,154,0.18);
  border-color: rgba(126,201,154,0.45);
}


.q1-file-input-visible {
  display: inline-block;
  max-width: 148px;
  font-size: 11px;
  color: #f2e8d8;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(212,175,100,0.45);
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
}
.q1-file-input-visible::file-selector-button {
  margin-right: 6px;
  padding: 3px 8px;
  border: 0;
  border-radius: 4px;
  background: #c9a24d;
  color: #1a1410;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}


/* Q2 禁声投放板 */
.q2-board-shell { max-width: 980px; }
.q2-phone-preview { position: relative; }
.q2-win {
  position: relative; width: 100%; aspect-ratio: 9/16;
  background: #111; border-radius: 12px; overflow: hidden;
}
.q2-win .q1-prev-video { width: 100%; height: 100%; object-fit: cover; }
.q2-mock-overlay {
  position: absolute; inset: auto 0 12% 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
.q2-mock-overlay .countdown { font-size: 2rem; color: #fff; font-weight: 700; text-shadow: 0 2px 8px #000; }
.q2-mock-overlay .swipe-hint { color: #ffe08a; font-size: .9rem; }
.q2-mock-revive {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(to top, rgba(0,0,0,.5), transparent 50%);
}
.q2-preview-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }


#modal-q2-board.modal:not(.hidden) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 80;
}
.q1-board-bar, .q1-board-bar button,
.q2-preview-tools, .q2-preview-tools button,
.q1-slot-list .btn, .q1-board-slot .btn {
  position: relative;
  z-index: 21;
  pointer-events: auto;
}


/* —— Q2 试玩：对齐 densha-gameplay-ui 手机框 —— */
.q2-stage-col { align-items: center; }
.gp-phone-frame {
  width: 280px;
  height: 498px;
  border-radius: 26px;
  border: 3px solid #3a3228;
  background: #000;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}
.gp-phone-notch {
  position: absolute;
  top: 7px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 16px;
  background: #1a1510;
  border-radius: 10px;
  z-index: 40;
  pointer-events: none;
}
.gp-stage {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  background: #120e0c;
}
.gp-stage-idle { position: absolute; inset: 0; }
.gp-stage-idle .q1-prev-video,
.gp-stage-idle video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.gp-qte-host {
  position: absolute; inset: 0; z-index: 6;
  background: #000;
}
.gp-qte-host.hidden { display: none !important; }
.gp-qte-host .qte-root,
.gp-qte-host .hush-stage { width: 100%; height: 100%; }
.gp-try-hud {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 6px 10px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.72));
  font-size: 0.72rem;
  color: #f0d78c;
  pointer-events: none;
  text-align: center;
}
.q2-mock-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; background: rgba(0,0,0,0.28);
  pointer-events: none;
}
.q2-mock-overlay .countdown {
  font-size: 2.2rem; font-weight: 800; color: #ffb0a0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  text-shadow: 0 0 18px rgba(224,122,106,0.5);
}
.q2-mock-overlay .swipe-hint {
  font-size: 1rem; color: #fff; display: flex; align-items: center; gap: 8px;
}
.q2-mock-overlay .swipe-arrows {
  font-size: 1.5rem; letter-spacing: -0.15em; color: #f0d78c;
  animation: q2pulse 0.8s ease infinite;
}
.q2-mock-overlay .swipe-zone {
  margin-top: 8px; padding: 14px 18px; border: 1px dashed rgba(240,215,140,0.45);
  border-radius: 12px; color: #cbb896; font-size: 0.78rem;
}
@keyframes q2pulse { 50% { opacity: 0.45; transform: translateX(-4px); } }
.q2-mock-revive {
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.45);
}
.q2-mock-revive .revive-card {
  background: rgba(28,20,24,0.95);
  border: 1px solid rgba(212,175,100,0.35);
  border-radius: 16px; padding: 18px 16px; text-align: center; max-width: 220px;
}
.q2-mock-revive .revive-title {
  font-size: 1.15rem; font-weight: 700; color: #f0d78c; margin-bottom: 6px;
}
.q2-mock-revive .revive-msg {
  font-size: 0.75rem; color: #a89a88; margin-bottom: 12px; line-height: 1.4;
}
.q2-mock-revive .btn-revive,
.hush-revive .btn-revive {
  font: inherit; cursor: pointer;
  border-radius: 10px; border: 1px solid transparent;
  padding: 10px 16px; background: linear-gradient(180deg,#f0d78c,#c9a24d);
  color: #1a1208; font-weight: 700;
}
.q2-preview-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; max-width: 300px; }


/* —— Q2 试玩手机框：强制固定尺寸，禁止视频把板撑爆 —— */
#modal-q2-board .q2-stage-col {
  align-items: center;
  flex: 0 0 auto;
  max-width: 260px;
}
#modal-q2-board .gp-phone-frame,
#q2-phone-frame {
  width: 240px !important;
  height: 426px !important;
  max-width: 240px !important;
  max-height: 426px !important;
  flex: 0 0 auto !important;
  border-radius: 22px;
  border: 3px solid #3a3228;
  background: #000;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  position: relative;
  overflow: hidden !important;
}
#modal-q2-board .gp-phone-notch {
  position: absolute;
  top: 6px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 14px;
  background: #1a1510;
  border-radius: 10px;
  z-index: 40;
  pointer-events: none;
}
#modal-q2-board .gp-stage,
#q2-phone-stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #0a0806;
}
#modal-q2-board .gp-stage-idle,
#q2-stage-idle,
#modal-q2-board .gp-qte-host,
#q2-try-host {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
#modal-q2-board .gp-qte-host .qte-root,
#q2-try-host .qte-root {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
#modal-q2-board .gp-qte-host .hush-stage,
#q2-try-host .hush-stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
#modal-q2-board #q2-prev-video,
#modal-q2-board .gp-stage-idle video,
#modal-q2-board .hush-vid,
#q2-try-host video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block;
}
#modal-q2-board .q1-win-label,
#modal-q2-board .q1-win-miss {
  position: absolute;
  z-index: 2;
  left: 8px; right: 8px;
  pointer-events: none;
}
#modal-q2-board .q1-win-label { top: 28px; font-size: 11px; }
#modal-q2-board .q1-win-miss { top: 40%; text-align: center; font-size: 12px; color: rgba(255,255,255,.7); }
#modal-q2-board .gp-try-hud {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 6px 8px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  font-size: 11px; color: #f0d78c; text-align: center;
  pointer-events: none;
}
#modal-q2-board .q2-preview-tools {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 8px; max-width: 260px; justify-content: center;
}
/* 预播期也可见的试玩指引（非操作窗） */
#q2-try-host .hush-prep {
  position: absolute; left: 0; right: 0; bottom: 12%; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
  padding: 0 12px;
}
#q2-try-host .hush-prep.hidden { display: none !important; }
#q2-try-host .hush-prep .prep-bar {
  width: 78%; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.18); overflow: hidden;
}
#q2-try-host .hush-prep .prep-fill {
  height: 100%; width: 0%; background: linear-gradient(90deg,#f0d78c,#e07a6a);
}
#q2-try-host .hush-prep .prep-label {
  font-size: 11px; color: #f2e8d8; text-shadow: 0 1px 4px #000;
}
#q2-try-host .hush-overlay {
  z-index: 6;
}
#q2-try-host .hush-overlay .swipe-zone {
  width: min(86%, 200px);
  min-height: 64px;
  border: 1.5px dashed rgba(255,224,138,.85);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(0,0,0,.35);
  touch-action: none;
  font-size: 12px;
  pointer-events: auto;
}
#q2-try-host .hush-overlay .countdown {
  font-size: 2rem; font-weight: 800; color: #ffb0a0;
  text-shadow: 0 0 12px rgba(0,0,0,.8);
}


#q2-try-hud .q2-try-pleasure-wrap {
  margin-left: 10px;
  font-size: 11px;
  color: rgba(242,232,216,0.85);
  vertical-align: middle;
}
#q2-try-hud .q2-try-pleasure-wrap b,
#q2-try-hud .q2-try-pleasure-wrap .comfort-num {
  color: #ffe8b0;
  font-variant-numeric: tabular-nums;
}
#q2-try-hud .q2-try-pleasure-wrap[data-tier="2"] b,
#q2-try-hud .q2-try-pleasure-wrap[data-tier="2"] .comfort-num,
#q2-try-hud .q2-try-pleasure-wrap[data-tier="3"] b,
#q2-try-hud .q2-try-pleasure-wrap[data-tier="3"] .comfort-num { color: #ffd89a; }
#q2-try-hud .comfort-mini-bar { width: 64px; height: 4px; }


/* Connect-nodes mode */
.canvas-wrap.connect-mode { cursor: crosshair; }
.canvas-wrap.connect-mode .graph-node { cursor: pointer; }
.graph-node.connect-source {
  box-shadow: 0 0 0 2px #f0d78c, 0 0 14px rgba(240,215,140,0.45);
  border-color: #f0d78c;
}
.btn.connect-active {
  background: #3a2e1a;
  border-color: #f0d78c;
  color: #f0d78c;
}


/* pleasure5: heart burst + bar always above QTE */
.pt-fx-layer {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  overflow: visible; /* rail hearts live here, beside bar — must not clip */
}
.fx-hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
}
.fx-heart {
  position: absolute;
  bottom: 32%;
  font-size: 22px;
  opacity: 0;
  transform: translate(-50%, 0) scale(0.6);
  animation: fx-heart-fly linear forwards;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
}
@keyframes fx-heart-fly {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.5); }
  10%  { opacity: 1; transform: translate(calc(-50% + var(--dx, 0px) * 0.2), -12px) scale(1.05); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -180px) scale(1.2); }
}

/* Rail heart burst — hosted on #pt-fx-layer / .fx-comfort-overlay (NOT inside thin rail wrap) */
.fx-hearts.fx-hearts--rail {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  pointer-events: none;
  z-index: 45;
  overflow: visible;
}
/* Legacy: if anything still nests under .comfort-hud, don't clip */
.comfort-hud > .fx-hearts {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 45;
}
.fx-heart.fx-heart--rail,
.comfort-hud .fx-heart {
  font-size: 15px;
  line-height: 1;
  color: rgba(255, 120, 150, 0.55);
  opacity: 0.55;
  filter: blur(0.55px) drop-shadow(0 0 6px rgba(255, 120, 150, 0.4));
  text-shadow: 0 0 10px rgba(255, 120, 150, 0.45), 0 0 4px rgba(255, 200, 180, 0.35);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 32%, transparent 76%);
  mask-image: radial-gradient(ellipse at center, #000 32%, transparent 76%);
  animation-name: fx-heart-rail-fly;
  will-change: transform, opacity;
}
.fx-heart.fx-heart--rail.soft-a {
  opacity: 0.42; color: rgba(255, 120, 150, 0.5);
  filter: blur(0.7px) drop-shadow(0 0 5px rgba(255, 120, 150, 0.35));
  font-size: 18px;
}
.fx-heart.fx-heart--rail.soft-b {
  opacity: 0.36; color: rgba(180, 70, 100, 0.55);
  filter: blur(0.9px) drop-shadow(0 0 4px rgba(180, 70, 100, 0.3));
  font-size: 13px;
}
.fx-heart.fx-heart--rail.soft-c {
  opacity: 0.5; color: rgba(255, 140, 160, 0.6);
  filter: blur(0.4px) drop-shadow(0 0 7px rgba(255, 140, 160, 0.4));
  font-size: 15px;
}
.fx-heart.fx-heart--rail.soft-d {
  opacity: 0.3; color: rgba(255, 200, 180, 0.45);
  filter: blur(1.1px) drop-shadow(0 0 4px rgba(255, 200, 180, 0.25));
  font-size: 12px;
}
@keyframes fx-heart-rail-fly {
  0%   { opacity: 0; transform: translate(-50%, 4px) scale(0.4); }
  18%  { opacity: 0.55; transform: translate(calc(-50% + var(--dx, 0px) * 0.35), -10px) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -48px) scale(0.75); }
}
.comfort-hud, .comfort-mini, #q2-try-host {
  position: relative;
}
/* pleasure6: compact translucent chip — only visible while changing */
.pt-hud {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.pt-hud .scene-tag,
.pt-hud #pt-tag {
  align-self: flex-start;
  opacity: 0.75;
  font-size: 11px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.pt-hud .comfort-hud {
  width: 46%;
  max-width: 150px;
  margin-left: auto;
  background: rgba(12, 8, 10, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 4px 8px 5px;
  border: 1px solid rgba(255, 210, 180, 0.22);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
  transition: opacity 0.22s ease, transform 0.22s ease, border-color 0.2s ease;
}
.pt-hud .comfort-hud.is-shown,
.pt-hud .comfort-hud:not(.hidden) {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.pt-hud .comfort-hud .pleasure-label {
  font-size: 0.58rem;
  margin-bottom: 2px;
  gap: 3px;
}
.pt-hud .comfort-hud .comfort-num {
  font-size: 0.72rem;
}
.pt-hud .comfort-hud .pleasure-bar {
  height: 3px;
}
.pt-hud .comfort-hud.is-bump {
  border-color: rgba(255, 220, 140, 0.55);
  background: rgba(20, 10, 14, 0.42);
}
/* style variants via .pt-phone[data-comfort-style] */
.pt-phone[data-comfort-style="slim"] .pt-hud {
  align-items: stretch;
}
.pt-phone[data-comfort-style="slim"] .pt-hud .comfort-hud {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 8px;
  padding: 3px 6px 4px;
  background: rgba(0,0,0,0.22);
}
.pt-phone[data-comfort-style="left"] .pt-hud {
  align-items: flex-start;
}
.pt-phone[data-comfort-style="left"] .pt-hud .comfort-hud {
  margin-left: 0;
  margin-right: auto;
}
.pt-phone[data-comfort-style="tiny"] .pt-hud .comfort-hud {
  width: 34%;
  max-width: 110px;
  padding: 3px 6px 4px;
  background: rgba(12, 8, 10, 0.24);
}
.pt-phone[data-comfort-style="tiny"] .pt-hud .comfort-hud .comfort-text {
  display: none;
}

/* pleasure7: more presentation schemes */
.pt-phone[data-comfort-style="br"] .pt-hud {
  position: absolute;
  top: auto;
  bottom: 64px;
  left: 0;
  right: 0;
  padding: 0 10px;
  align-items: flex-end;
}
.pt-phone[data-comfort-style="br"] .pt-hud .scene-tag,
.pt-phone[data-comfort-style="br"] .pt-hud #pt-tag {
  position: absolute;
  top: 10px;
  left: 10px;
}
.pt-phone[data-comfort-style="br"] .pt-hud .comfort-hud {
  width: 42%;
  max-width: 140px;
  background: rgba(12, 8, 10, 0.28);
}

.pt-phone[data-comfort-style="ghost"] .pt-hud {
  align-items: stretch;
}
.pt-phone[data-comfort-style="ghost"] .pt-hud .comfort-hud {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 6px;
  padding: 2px 6px 3px;
  background: rgba(0, 0, 0, 0.14);
  border-color: rgba(255, 210, 180, 0.12);
  box-shadow: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.pt-phone[data-comfort-style="ghost"] .pt-hud .comfort-hud .pleasure-label {
  font-size: 0.5rem;
  opacity: 0.7;
}
.pt-phone[data-comfort-style="ghost"] .pt-hud .comfort-hud .pleasure-bar {
  height: 2px;
}

.pt-phone[data-comfort-style="badge"] .pt-hud {
  align-items: flex-end;
}
.pt-phone[data-comfort-style="badge"] .pt-hud .comfort-hud {
  width: auto;
  min-width: 52px;
  max-width: 88px;
  border-radius: 14px;
  padding: 5px 8px 6px;
  background: rgba(16, 10, 12, 0.38);
}
.pt-phone[data-comfort-style="badge"] .pt-hud .comfort-hud .comfort-text {
  display: none;
}
.pt-phone[data-comfort-style="badge"] .pt-hud .comfort-hud .pleasure-label {
  justify-content: center;
  margin-bottom: 3px;
}
.pt-phone[data-comfort-style="badge"] .pt-hud .comfort-hud .comfort-num {
  font-size: 0.9rem;
  font-weight: 700;
}
.pt-phone[data-comfort-style="badge"] .pt-hud .comfort-hud .pleasure-bar {
  height: 3px;
}

.pt-phone[data-comfort-style="toast"] .pt-hud {
  align-items: center;
  padding-top: 18%;
}
.pt-phone[data-comfort-style="toast"] .pt-hud .scene-tag,
.pt-phone[data-comfort-style="toast"] .pt-hud #pt-tag {
  position: absolute;
  top: 10px;
  left: 10px;
}
.pt-phone[data-comfort-style="toast"] .pt-hud .comfort-hud {
  width: 58%;
  max-width: 180px;
  margin: 0 auto;
  border-radius: 12px;
  padding: 6px 10px 7px;
  background: rgba(10, 6, 8, 0.48);
  border-color: rgba(255, 200, 160, 0.28);
}
.pt-phone[data-comfort-style="toast"] .pt-hud .comfort-hud.is-shown {
  transform: translateY(0) scale(1);
}

/* pleasure8: right rail — form reacts to pleasure tier */
.pt-phone[data-comfort-style="rail"] .pt-hud,
.phone-stage[data-comfort-style="rail"] .hud{
  position: absolute;
  top: 18%;
  right: 6px;
  left: auto;
  width: 22px;
  padding: 0;
  align-items: stretch;
  pointer-events: none;
}.pt-phone[data-comfort-style="rail"] .pt-hud .scene-tag,
.phone-stage[data-comfort-style="rail"] .hud .scene-tag,
.pt-phone[data-comfort-style="rail"] .pt-hud #pt-tag,
.phone-stage[data-comfort-style="rail"] .hud #pt-tag{
  position: absolute;
  top: -14%;
  right: 26px;
  left: auto;
  white-space: nowrap;
}.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud,
.phone-stage[data-comfort-style="rail"] .hud .comfort-hud{
  width: 12px;
  max-width: 12px;
  height: 148px;
  margin: 0;
  border-radius: 999px;
  padding: 3px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(8, 6, 8, 0.28);
  border: 1px solid rgba(255, 200, 170, 0.2);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2), 0 4px 14px rgba(0,0,0,0.25);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: width 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
}
/* rail: keep label for numeric readout (text/icon hidden below) */
.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud .pleasure-bar,
.phone-stage[data-comfort-style="rail"] .hud .comfort-hud .pleasure-bar{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
}.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud .pleasure-fill,
.phone-stage[data-comfort-style="rail"] .hud .comfort-hud .pleasure-fill{
  width: 100% !important;
  height: var(--comfort-pct, 0%);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 999px;
  background: linear-gradient(to top, #c4a090, #e8a0b0);
  box-shadow: 0 0 8px rgba(232, 160, 176, 0.35);
  transition: height 0.12s linear, background 0.3s ease, box-shadow 0.3s ease;
}

/* Tier morphology: color / glow / thickness */
.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud[data-tier="0"],
.phone-stage[data-comfort-style="rail"] .hud .comfort-hud[data-tier="0"]{
  width: 10px; max-width: 10px;
  border-color: rgba(200, 180, 170, 0.18);
}.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud[data-tier="0"] .pleasure-fill,
.phone-stage[data-comfort-style="rail"] .hud .comfort-hud[data-tier="0"] .pleasure-fill{
  background: linear-gradient(to top, #8a7a80, #c4a090);
  box-shadow: none;
}.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud[data-tier="1"],
.phone-stage[data-comfort-style="rail"] .hud .comfort-hud[data-tier="1"]{
  width: 12px; max-width: 12px;
  border-color: rgba(232, 160, 176, 0.35);
}.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud[data-tier="1"] .pleasure-fill,
.phone-stage[data-comfort-style="rail"] .hud .comfort-hud[data-tier="1"] .pleasure-fill{
  background: linear-gradient(to top, #e8a0b0, #d4af64);
  box-shadow: 0 0 10px rgba(232, 160, 176, 0.4);
}.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud[data-tier="2"],
.phone-stage[data-comfort-style="rail"] .hud .comfort-hud[data-tier="2"]{
  width: 14px; max-width: 14px;
  border-color: rgba(240, 160, 192, 0.5);
  box-shadow: 0 0 12px rgba(240, 160, 192, 0.25);
}.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud[data-tier="2"] .pleasure-fill,
.phone-stage[data-comfort-style="rail"] .hud .comfort-hud[data-tier="2"] .pleasure-fill{
  background: linear-gradient(to top, #f0a0c0, #f0c878);
  box-shadow: 0 0 14px rgba(240, 200, 120, 0.5);
}.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud[data-tier="3"],
.phone-stage[data-comfort-style="rail"] .hud .comfort-hud[data-tier="3"]{
  width: 16px; max-width: 16px;
  border-color: rgba(255, 180, 140, 0.7);
  box-shadow: 0 0 18px rgba(255, 160, 140, 0.4);
}.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud[data-tier="3"] .pleasure-fill,
.phone-stage[data-comfort-style="rail"] .hud .comfort-hud[data-tier="3"] .pleasure-fill{
  background: linear-gradient(to top, #ff9ec0, #ffe08a 70%, #fff6d0);
  box-shadow: 0 0 18px rgba(255, 200, 140, 0.7);
  animation: rail-tier3-pulse 1.1s ease-in-out infinite;
}
@keyframes rail-tier3-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud.is-bump,
.phone-stage[data-comfort-style="rail"] .hud .comfort-hud.is-bump{
  border-color: rgba(255, 230, 160, 0.85);
  box-shadow: 0 0 20px rgba(255, 190, 150, 0.45);
}.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud.is-bump .pleasure-fill,
.phone-stage[data-comfort-style="rail"] .hud .comfort-hud.is-bump .pleasure-fill{
  transition: none !important;
}

/* Numeric readout sits left of the rail — always on while HUD is shown */
.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud,
.phone-stage[data-comfort-style="rail"] .hud .comfort-hud{
  overflow: visible;
}.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud .pleasure-label,
.phone-stage[data-comfort-style="rail"] .hud .comfort-hud .pleasure-label{
  display: block !important;
  position: absolute;
  left: auto;
  right: calc(100% + 6px);
  bottom: 4px;
  top: auto;
  width: auto;
  margin: 0;
  padding: 0;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud .comfort-text,
.phone-stage[data-comfort-style="rail"] .hud .comfort-hud .comfort-text,
.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud .comfort-icon,
.phone-stage[data-comfort-style="rail"] .hud .comfort-hud .comfort-icon{
  display: none !important;
}.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud .comfort-num,
.phone-stage[data-comfort-style="rail"] .hud .comfort-hud .comfort-num{
  position: static;
  display: inline-block !important;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 236, 210, 0.95);
  text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 0 8px rgba(255, 160, 140, 0.35);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud.is-bump .comfort-num,
.phone-stage[data-comfort-style="rail"] .hud .comfort-hud.is-bump .comfort-num{
  color: #ffe9b0;
  transform: scale(1.08);
  transition: transform 0.15s ease, color 0.15s ease;
}.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .comfort-num,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .comfort-num{
  font-size: 0.84rem;
}



/* pleasure9: tide morph — soft organic breathing rail linked to pleasure */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud{
  width: 14px;
  max-width: 14px;
  height: 156px;
  border-radius: 40% / 18%;
  padding: 4px 3px;
  background: rgba(18, 8, 14, 0.22);
  border: 1px solid rgba(255, 180, 170, 0.18);
  box-shadow:
    0 0 12px rgba(255, 140, 160, 0.12),
    inset 0 0 10px rgba(255, 200, 180, 0.06);
  overflow: visible;
  animation: tide-breathe-0 2.8s ease-in-out infinite;
}.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .pleasure-bar,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .pleasure-bar{
  border-radius: 40% / 16%;
  background: rgba(255, 220, 210, 0.06);
  overflow: hidden;
}.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .pleasure-fill,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .pleasure-fill{
  border-radius: 40% / 14% 14% 40% 40%;
  background: linear-gradient(
    to top,
    rgba(180, 90, 110, 0.85) 0%,
    rgba(232, 140, 160, 0.9) 45%,
    rgba(255, 200, 180, 0.75) 100%
  );
  box-shadow:
    0 0 10px rgba(255, 150, 170, 0.35),
    inset 0 0 8px rgba(255, 230, 210, 0.25);
  filter: blur(0.2px);
}

/* tideheart2: unmistakable vs old — ♥ watermark in fill + slightly stronger glow */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .pleasure-fill,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .pleasure-fill{
  box-shadow:
    0 0 14px rgba(255, 150, 170, 0.5),
    0 0 22px rgba(255, 120, 150, 0.22),
    inset 0 0 8px rgba(255, 230, 210, 0.28);
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .pleasure-fill::before,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .pleasure-fill::before{
  content: "♥";
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  font-size: 8px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.42);
  text-shadow: 0 0 5px rgba(255, 180, 200, 0.55);
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .pleasure-fill::after,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .pleasure-fill::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 70% 40% at 50% 30%, rgba(255,255,255,0.28), transparent 65%);
  pointer-events: none;
  mix-blend-mode: soft-light;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud{
  box-shadow:
    0 0 16px rgba(255, 140, 160, 0.22),
    inset 0 0 10px rgba(255, 200, 180, 0.08);
}

/* Tier: breathe faster / swell wider / warmer */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="0"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="0"]{
  width: 11px; max-width: 11px;
  animation-name: tide-breathe-0;
  animation-duration: 3.2s;
  border-color: rgba(200, 170, 170, 0.14);
}.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="0"] .pleasure-fill,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="0"] .pleasure-fill{
  background: linear-gradient(to top, #7a6068, #c4a098);
  box-shadow: 0 0 6px rgba(180, 140, 140, 0.2);
}

.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="1"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="1"]{
  width: 13px; max-width: 13px;
  animation-name: tide-breathe-1;
  animation-duration: 2.4s;
  border-color: rgba(232, 160, 176, 0.32);
}.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="1"] .pleasure-fill,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="1"] .pleasure-fill{
  background: linear-gradient(to top, #c07088, #e8a0b0 55%, #f0c8a8);
  box-shadow: 0 0 12px rgba(232, 160, 176, 0.4);
}

.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="2"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="2"]{
  width: 15px; max-width: 15px;
  animation-name: tide-breathe-2;
  animation-duration: 1.8s;
  border-color: rgba(255, 160, 180, 0.45);
  box-shadow: 0 0 16px rgba(255, 140, 170, 0.28);
}.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="2"] .pleasure-fill,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="2"] .pleasure-fill{
  background: linear-gradient(to top, #e878a0, #f0a0c0 50%, #ffe0a8);
  box-shadow: 0 0 16px rgba(255, 180, 160, 0.55);
}

.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="3"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="3"]{
  width: 17px; max-width: 17px;
  animation-name: tide-breathe-3;
  animation-duration: 1.25s;
  border-color: rgba(255, 200, 160, 0.65);
  box-shadow: 0 0 22px rgba(255, 160, 150, 0.42);
}.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="3"] .pleasure-fill,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="3"] .pleasure-fill{
  background: linear-gradient(to top, #ff6e9c, #ffb0c8 40%, #ffe8a0 75%, #fff6e0);
  box-shadow: 0 0 20px rgba(255, 200, 150, 0.75);
  filter: saturate(1.15);
}

/* Climbing: quicker swell */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud.is-bump,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud.is-bump{
  animation-duration: 0.7s !important;
  border-color: rgba(255, 230, 180, 0.8);
  box-shadow: 0 0 24px rgba(255, 180, 160, 0.55);
}.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud.is-bump .pleasure-fill,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud.is-bump .pleasure-fill{
  filter: brightness(1.12) saturate(1.2);
}

@keyframes tide-breathe-0 {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  50% { transform: scaleX(1.06) scaleY(1.01); }
}
@keyframes tide-breathe-1 {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  50% { transform: scaleX(1.1) scaleY(1.015); }
}
@keyframes tide-breathe-2 {
  0%, 100% { transform: scaleX(1) scaleY(1); opacity: 1; }
  50% { transform: scaleX(1.14) scaleY(1.02); opacity: 0.96; }
}
@keyframes tide-breathe-3 {
  0%, 100% { transform: scaleX(1) scaleY(1); filter: brightness(1); }
  50% { transform: scaleX(1.18) scaleY(1.025); filter: brightness(1.08); }
}

/* Soft halo behind fill at high tide */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="2"]::after,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="2"]::after,
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="3"]::after,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="3"]::after{
  content: "";
  position: absolute;
  inset: -6px -8px;
  border-radius: 40% / 20%;
  background: radial-gradient(ellipse at center bottom, rgba(255, 140, 160, 0.22), transparent 70%);
  pointer-events: none;
  z-index: -1;
  animation: tide-halo 2s ease-in-out infinite;
}
@keyframes tide-halo {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}


/* ========== comfort style: hearts (爱心条) ========== */
/* Compact 5-heart row, fill L→R via --comfort-n (0–100). Partial fill on active heart. */
.pt-phone[data-comfort-style="hearts"] .pt-hud,
.phone-stage[data-comfort-style="hearts"] .hud {
  align-items: flex-end;
}
.pt-phone[data-comfort-style="hearts"] .pt-hud .comfort-hud,
.phone-stage[data-comfort-style="hearts"] .hud .comfort-hud {
  width: auto;
  max-width: none;
  margin-left: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 7px;
  border-radius: 999px;
  background: rgba(12, 8, 10, 0.36);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 170, 180, 0.28);
  box-shadow: 0 2px 10px rgba(0,0,0,0.28);
}
.pt-phone[data-comfort-style="hearts"] .pt-hud .comfort-hud .pleasure-label,
.phone-stage[data-comfort-style="hearts"] .hud .comfort-hud .pleasure-label {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  order: 2;
  white-space: nowrap;
}
.pt-phone[data-comfort-style="hearts"] .pt-hud .comfort-hud .comfort-text,
.phone-stage[data-comfort-style="hearts"] .hud .comfort-hud .comfort-text {
  font-size: 0.52rem;
  opacity: 0.72;
  letter-spacing: 0.04em;
}
.pt-phone[data-comfort-style="hearts"] .pt-hud .comfort-hud .comfort-num,
.phone-stage[data-comfort-style="hearts"] .hud .comfort-hud .comfort-num {
  display: inline-block !important;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 236, 210, 0.96);
  text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 0 8px rgba(255, 140, 160, 0.3);
  font-variant-numeric: tabular-nums;
  min-width: 1.4em;
  text-align: right;
}
.pt-phone[data-comfort-style="hearts"] .pt-hud .comfort-hud.is-bump .comfort-num,
.phone-stage[data-comfort-style="hearts"] .hud .comfort-hud.is-bump .comfort-num {
  color: #ffe9b0;
  transform: scale(1.08);
  transition: transform 0.15s ease, color 0.15s ease;
}

/* Hearts row replaces the old bar */
.pt-phone[data-comfort-style="hearts"] .comfort-hearts,
.phone-stage[data-comfort-style="hearts"] .comfort-hearts {
  order: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: auto;
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.pt-phone[data-comfort-style="hearts"] .comfort-hearts .pleasure-fill,
.phone-stage[data-comfort-style="hearts"] .comfort-hearts .pleasure-fill {
  display: none !important;
}

/* Single heart: ghost outline + clipped warm fill */
.pt-phone[data-comfort-style="hearts"] .comfort-hearts .ch,
.phone-stage[data-comfort-style="hearts"] .comfort-hearts .ch {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 12px;
  flex: 0 0 auto;
  /* fill fraction for this heart: each covers 20 pleasure pts */
  --heart-fill: clamp(0%, calc((var(--comfort-n, 0) - var(--i, 0) * 20) * 5%), 100%);
}
.pt-phone[data-comfort-style="hearts"] .comfort-hearts .ch-ghost,
.pt-phone[data-comfort-style="hearts"] .comfort-hearts .ch-fill,
.phone-stage[data-comfort-style="hearts"] .comfort-hearts .ch-ghost,
.phone-stage[data-comfort-style="hearts"] .comfort-hearts .ch-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 13px;
  height: 12px;
  display: block;
  /* CSS heart via clip-path */
  clip-path: path("M6.5 11.2 C6.5 11.2 0.4 7.2 0.4 3.6 C0.4 1.6 1.9 0.3 3.5 0.3 C4.7 0.3 5.7 0.95 6.5 2 C7.3 0.95 8.3 0.3 9.5 0.3 C11.1 0.3 12.6 1.6 12.6 3.6 C12.6 7.2 6.5 11.2 6.5 11.2 Z");
  -webkit-clip-path: path("M6.5 11.2 C6.5 11.2 0.4 7.2 0.4 3.6 C0.4 1.6 1.9 0.3 3.5 0.3 C4.7 0.3 5.7 0.95 6.5 2 C7.3 0.95 8.3 0.3 9.5 0.3 C11.1 0.3 12.6 1.6 12.6 3.6 C12.6 7.2 6.5 11.2 6.5 11.2 Z");
}
.pt-phone[data-comfort-style="hearts"] .comfort-hearts .ch-ghost,
.phone-stage[data-comfort-style="hearts"] .comfort-hearts .ch-ghost {
  background: rgba(255, 190, 200, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 180, 190, 0.42);
}
.pt-phone[data-comfort-style="hearts"] .comfort-hearts .ch-fill-clip,
.phone-stage[data-comfort-style="hearts"] .comfort-hearts .ch-fill-clip {
  position: absolute;
  inset: 0;
  width: var(--heart-fill);
  overflow: hidden;
  transition: width 0.14s linear;
}
.pt-phone[data-comfort-style="hearts"] .comfort-hearts .ch-fill,
.phone-stage[data-comfort-style="hearts"] .comfort-hearts .ch-fill {
  background: linear-gradient(180deg, #ff8fb0 0%, #ff4d7a 55%, #e8325c 100%);
  box-shadow: 0 0 6px rgba(255, 90, 130, 0.45);
}

/* Tier tint on filled hearts */
.pt-phone[data-comfort-style="hearts"] .comfort-hud[data-tier="0"] .ch-fill,
.phone-stage[data-comfort-style="hearts"] .comfort-hud[data-tier="0"] .ch-fill {
  background: linear-gradient(180deg, #e8b0bc, #c48a96);
  box-shadow: none;
}
.pt-phone[data-comfort-style="hearts"] .comfort-hud[data-tier="1"] .ch-fill,
.phone-stage[data-comfort-style="hearts"] .comfort-hud[data-tier="1"] .ch-fill {
  background: linear-gradient(180deg, #ff9eb8, #f06088);
}
.pt-phone[data-comfort-style="hearts"] .comfort-hud[data-tier="2"] .ch-fill,
.phone-stage[data-comfort-style="hearts"] .comfort-hud[data-tier="2"] .ch-fill {
  background: linear-gradient(180deg, #ffb0c8, #ff5a8a 60%, #ffc078);
  box-shadow: 0 0 8px rgba(255, 140, 160, 0.55);
}
.pt-phone[data-comfort-style="hearts"] .comfort-hud[data-tier="3"] .ch-fill,
.phone-stage[data-comfort-style="hearts"] .comfort-hud[data-tier="3"] .ch-fill {
  background: linear-gradient(180deg, #ffc0d4, #ff5a8a 50%, #ffe08a);
  box-shadow: 0 0 10px rgba(255, 180, 140, 0.65);
  animation: hearts-tier3-glow 1.1s ease-in-out infinite;
}
@keyframes hearts-tier3-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}
.pt-phone[data-comfort-style="hearts"] .pt-hud .comfort-hud.is-bump,
.phone-stage[data-comfort-style="hearts"] .hud .comfort-hud.is-bump {
  border-color: rgba(255, 200, 170, 0.7);
  box-shadow: 0 0 14px rgba(255, 140, 160, 0.35);
}
.pt-phone[data-comfort-style="hearts"] .comfort-hud.is-bump .ch-fill-clip,
.phone-stage[data-comfort-style="hearts"] .comfort-hud.is-bump .ch-fill-clip {
  transition: none !important;
}

/* Keep HUD above QTE (pt-hud already z-index:12 > qte:5) */
.pt-phone[data-comfort-style="hearts"] .pt-hud {
  z-index: 12;
}


/* ========== tideheart3: hung number ON liquid + locked tide palette ========== */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud {
  overflow: visible;
  width: 22px;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud {
  overflow: visible;
  border: 1px solid rgba(255, 180, 170, 0.28);
  box-shadow:
    0 0 14px rgba(255, 120, 150, 0.22),
    inset 0 0 10px rgba(255, 200, 180, 0.08);
  background: rgba(18, 8, 14, 0.28);
}
/* Locked liquid fill (all tiers stay in tide pinks) */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .pleasure-fill,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .pleasure-fill {
  background: linear-gradient(
    to top,
    rgba(180, 70, 100, 0.95) 0%,
    rgba(255, 120, 150, 0.92) 45%,
    rgba(255, 200, 180, 0.8) 100%
  ) !important;
  box-shadow:
    0 0 12px rgba(255, 140, 160, 0.55),
    inset 0 0 8px rgba(255, 230, 210, 0.3) !important;
  filter: none;
}
/* Surface shimmer (::before) + faint ♥ watermark (::after) — match accept mockup */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .pleasure-fill::before,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .pleasure-fill::before {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: -6px;
  height: 14px;
  transform: none;
  font-size: 0;
  color: transparent;
  text-shadow: none;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255, 230, 210, 0.9) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 40%, rgba(255, 180, 200, 0.7) 0%, transparent 50%);
  opacity: 1;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: normal;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .pleasure-fill::after,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .pleasure-fill::after {
  content: "♥";
  position: absolute;
  left: 50%;
  top: 35%;
  inset: auto;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  font-size: 9px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.35);
  background: none;
  mix-blend-mode: normal;
  pointer-events: none;
  border-radius: 0;
}
/* Soft outer glow behind rail */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud::after,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud::after {
  content: "";
  position: absolute;
  inset: -8px -10px;
  border-radius: 40% / 22%;
  background: radial-gradient(ellipse at center bottom, rgba(255, 120, 150, 0.28), transparent 70%);
  z-index: -1;
  pointer-events: none;
  animation: none;
}
/* Label host covers rail so hung number can ride fill% */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .pleasure-label,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .pleasure-label {
  display: block !important;
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  margin: 0;
  padding: 0;
  pointer-events: none;
  white-space: nowrap;
  z-index: 6;
}
/* Capsule number hung ON liquid surface (bottom: fill%) */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .comfort-num,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .comfort-num {
  position: absolute !important;
  left: 50%;
  bottom: calc(var(--comfort-pct, 0%) - 2px);
  top: auto;
  right: auto;
  transform: translate(-50%, 50%);
  z-index: 7;
  display: inline-block !important;
  min-width: 28px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(20, 8, 12, 0.72);
  border: 1px solid rgba(255, 160, 180, 0.55);
  box-shadow: 0 0 10px rgba(255, 100, 140, 0.45), 0 2px 6px rgba(0, 0, 0, 0.5);
  color: #ffd0e0;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px rgba(255, 80, 130, 0.8);
  letter-spacing: 0.02em;
  transition: bottom 0.12s linear, transform 0.15s ease, color 0.15s ease;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .comfort-num::after,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .comfort-num::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(255, 160, 180, 0.55);
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud.is-bump .comfort-num,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud.is-bump .comfort-num {
  color: #ffe0ec;
  transform: translate(-50%, 50%) scale(1.06);
}
/* Label「舒服」under the rail — no +N chips */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .comfort-text,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .comfort-text {
  display: block !important;
  position: absolute;
  left: 50%;
  bottom: -18px;
  top: auto;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 208, 224, 0.88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .comfort-icon,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .comfort-icon {
  display: none !important;
}
/* Tier widths stay; fill color locked above. Soften tier borders into tide pinks */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="0"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="0"] {
  border-color: rgba(200, 150, 160, 0.22);
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="1"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="1"] {
  border-color: rgba(255, 160, 180, 0.35);
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="2"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="2"] {
  border-color: rgba(255, 140, 170, 0.48);
  box-shadow: 0 0 16px rgba(255, 120, 150, 0.28), inset 0 0 10px rgba(255, 200, 180, 0.08);
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="3"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="3"] {
  border-color: rgba(255, 180, 190, 0.6);
  box-shadow: 0 0 22px rgba(255, 120, 150, 0.4), inset 0 0 10px rgba(255, 200, 180, 0.1);
}
/* Breathe closer to accept mockup */
@keyframes tide-breathe-0 {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  50% { transform: scaleX(1.1) scaleY(1.015); }
}
@keyframes tide-breathe-1 {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  50% { transform: scaleX(1.14) scaleY(1.02); }
}
@keyframes tide-breathe-2 {
  0%, 100% { transform: scaleX(1) scaleY(1); opacity: 1; }
  50% { transform: scaleX(1.16) scaleY(1.02); opacity: 0.97; }
}
@keyframes tide-breathe-3 {
  0%, 100% { transform: scaleX(1) scaleY(1); filter: brightness(1); }
  50% { transform: scaleX(1.18) scaleY(1.025); filter: brightness(1.06); }
}
/* Ensure FX hearts never clipped by rail wrap */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud {
  overflow: visible !important;
}
.pt-fx-layer, .fx-comfort-overlay, #pv-fx-layer {
  overflow: visible !important;
}


/* ========== tideheart4: playtest visibility — wider rail, clearer capsule, stronger hearts ========== */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud {
  overflow: visible !important;
  width: 28px;
  z-index: 14; /* above QTE host (5) and fx-layer (11) */
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud {
  width: 16px !important;
  max-width: 16px !important;
  height: 168px;
  opacity: 1; /* never stay at base opacity:0 when shown */
  overflow: visible !important;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="0"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="0"] {
  width: 14px !important; max-width: 14px !important;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="1"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="1"] {
  width: 16px !important; max-width: 16px !important;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="2"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="2"] {
  width: 18px !important; max-width: 18px !important;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="3"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="3"] {
  width: 20px !important; max-width: 20px !important;
}
/* Capsule rides fill%; park slightly LEFT of rail so 28px chip isn't crushed in 16px column */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .comfort-num,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .comfort-num {
  left: 50%;
  bottom: calc(var(--comfort-pct, 0%) - 2px);
  transform: translate(-50%, 50%);
  min-width: 30px;
  padding: 3px 7px;
  font-size: 13px;
  background: rgba(18, 6, 12, 0.82);
  border: 1px solid rgba(255, 160, 180, 0.7);
  box-shadow:
    0 0 12px rgba(255, 100, 140, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.55);
  color: #ffe0ec;
  z-index: 8;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .comfort-text,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .comfort-text {
  display: block !important;
  bottom: -20px;
  font-size: 10px;
  color: rgba(255, 210, 224, 0.95);
}
/* Soft hearts: still feathered, but readable in playtest */
.fx-heart.fx-heart--rail {
  opacity: 0.7 !important;
  filter: blur(0.35px) drop-shadow(0 0 7px rgba(255, 120, 150, 0.55)) !important;
}
.fx-heart.fx-heart--rail.soft-a { opacity: 0.65 !important; font-size: 18px; }
.fx-heart.fx-heart--rail.soft-b { opacity: 0.5 !important; font-size: 14px; }
.fx-heart.fx-heart--rail.soft-c { opacity: 0.72 !important; font-size: 16px; }
.fx-heart.fx-heart--rail.soft-d { opacity: 0.45 !important; font-size: 13px; }
/* When .hidden removed, force visible even if base chip rule left opacity 0 */
.pt-hud .comfort-hud.is-shown,
.pt-hud .comfort-hud:not(.hidden) {
  opacity: 1 !important;
  visibility: visible !important;
}
/* tide: leave transform to breathe keyframes */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud.is-shown,
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud:not(.hidden) {
  animation-play-state: running;
}


/* ========== tideheart5: lock live HUD to accepted mockup (tide-heart-accept) ==========
   Mockup: ~22px vertical tide pill, breathe, pink fill
   rgba(180,70,100)→rgba(255,120,150)→rgba(255,200,180), liquid surface glow,
   dark capsule hung ON fill surface, label「舒服」, soft feathered ♥ on FX layer.
   Keeps tideheart4 no-auto-hide during playtest (JS). */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud {
  overflow: visible !important;
  width: 22px !important;
  right: 10px;
  top: 18%;
  bottom: auto;
  height: auto;
  z-index: 14;
  pointer-events: none;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud {
  width: 22px !important;
  max-width: 22px !important;
  min-width: 22px;
  height: 168px;
  margin: 0;
  padding: 3px;
  border-radius: 40% / 18%;
  background: rgba(18, 8, 14, 0.28) !important;
  border: 1px solid rgba(255, 180, 170, 0.28) !important;
  box-shadow:
    0 0 14px rgba(255, 120, 150, 0.22),
    inset 0 0 10px rgba(255, 200, 180, 0.08) !important;
  overflow: visible !important;
  opacity: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: tide-breathe-accept 2s ease-in-out infinite;
  animation-play-state: running;
}
/* Flat width across tiers — mockup is a fixed ~22px pill, not tier-thinning */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="0"],
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="1"],
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="2"],
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="3"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="0"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="1"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="2"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="3"] {
  width: 22px !important;
  max-width: 22px !important;
  animation-name: tide-breathe-accept;
  animation-duration: 2s;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="0"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="0"] {
  border-color: rgba(200, 150, 160, 0.22) !important;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="1"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="1"] {
  border-color: rgba(255, 160, 180, 0.35) !important;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="2"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="2"] {
  border-color: rgba(255, 140, 170, 0.48) !important;
  box-shadow: 0 0 16px rgba(255, 120, 150, 0.28), inset 0 0 10px rgba(255, 200, 180, 0.08) !important;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="3"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="3"] {
  border-color: rgba(255, 180, 190, 0.6) !important;
  box-shadow: 0 0 22px rgba(255, 120, 150, 0.4), inset 0 0 10px rgba(255, 200, 180, 0.1) !important;
}
@keyframes tide-breathe-accept {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  50% { transform: scaleX(1.16) scaleY(1.02); }
}
/* Soft outer glow behind rail (mockup .rail::after) */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud::after,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud::after {
  content: "";
  position: absolute;
  inset: -8px -10px;
  border-radius: 40% / 22%;
  background: radial-gradient(ellipse at center bottom, rgba(255, 120, 150, 0.28), transparent 70%);
  z-index: -1;
  pointer-events: none;
  animation: none !important;
}
/* Inner well = mockup .rail-inner */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .pleasure-bar,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .pleasure-bar {
  position: absolute;
  inset: 3px;
  width: auto;
  height: auto;
  border-radius: 40% / 16%;
  overflow: hidden;
  background: rgba(255, 220, 210, 0.06);
}
/* Locked tide fill gradient + surface glow */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .pleasure-fill,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .pleasure-fill {
  width: 100% !important;
  height: var(--comfort-pct, 0%);
  left: 0; right: 0; bottom: 0;
  border-radius: 40% / 14% 14% 40% 40%;
  background: linear-gradient(
    to top,
    rgba(180, 70, 100, 0.95) 0%,
    rgba(255, 120, 150, 0.92) 45%,
    rgba(255, 200, 180, 0.8) 100%
  ) !important;
  box-shadow:
    0 0 12px rgba(255, 140, 160, 0.55),
    inset 0 0 8px rgba(255, 230, 210, 0.3) !important;
  filter: none !important;
  animation: none !important;
}
/* Liquid surface shimmer (::before) — mockup */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .pleasure-fill::before,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .pleasure-fill::before {
  content: "" !important;
  position: absolute;
  left: -20%;
  right: -20%;
  top: -6px;
  height: 14px;
  width: auto;
  inset: auto;
  transform: none !important;
  font-size: 0 !important;
  color: transparent !important;
  text-shadow: none !important;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255, 230, 210, 0.9) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 40%, rgba(255, 180, 200, 0.7) 0%, transparent 50%) !important;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: normal;
}
/* Faint ♥ watermark inside fill (::after) — mockup */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .pleasure-fill::after,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .pleasure-fill::after {
  content: "♥" !important;
  position: absolute;
  left: 50%;
  top: 35%;
  inset: auto;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  font-size: 9px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.35);
  background: none !important;
  mix-blend-mode: normal;
  pointer-events: none;
  border-radius: 0;
  text-shadow: none;
}
/* Label host covers rail so hung number rides fill% */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .pleasure-label,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .pleasure-label {
  display: block !important;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
  white-space: nowrap;
  z-index: 6;
}
/* Capsule hung ON liquid surface (bottom: fill% − 2px) — mockup .num-hang */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .comfort-num,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .comfort-num {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(var(--comfort-pct, 0%) - 2px) !important;
  top: auto !important;
  right: auto !important;
  transform: translate(-50%, 50%) !important;
  z-index: 7;
  display: inline-block !important;
  min-width: 28px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(20, 8, 12, 0.72) !important;
  border: 1px solid rgba(255, 160, 180, 0.55) !important;
  box-shadow: 0 0 10px rgba(255, 100, 140, 0.45), 0 2px 6px rgba(0, 0, 0, 0.5) !important;
  color: #ffd0e0 !important;
  font-weight: 800;
  font-size: 12px !important;
  line-height: 1.2;
  text-align: center;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px rgba(255, 80, 130, 0.8);
  letter-spacing: 0.02em;
  transition: bottom 0.12s linear, transform 0.15s ease, color 0.15s ease;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .comfort-num::after,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .comfort-num::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(255, 160, 180, 0.55);
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud.is-bump .comfort-num,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud.is-bump .comfort-num {
  color: #ffe0ec !important;
  transform: translate(-50%, 50%) scale(1.06) !important;
}
/* Label「舒服」under the rail */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .comfort-text,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .comfort-text {
  display: block !important;
  position: absolute;
  left: 50%;
  bottom: -18px;
  top: auto;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 208, 224, 0.88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .comfort-icon,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .comfort-icon {
  display: none !important;
}
/* Soft ♥ beside bar — mockup soft-a/b/c/d (transparent + edge feather) */
.fx-heart.fx-heart--rail {
  color: rgba(255, 120, 150, 0.55) !important;
  opacity: 0.55 !important;
  filter: blur(0.55px) drop-shadow(0 0 6px rgba(255, 120, 150, 0.4)) !important;
  text-shadow: 0 0 10px rgba(255, 120, 150, 0.45), 0 0 4px rgba(255, 200, 180, 0.35) !important;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 32%, transparent 76%);
  mask-image: radial-gradient(ellipse at center, #000 32%, transparent 76%);
}
.fx-heart.fx-heart--rail.soft-a {
  opacity: 0.42 !important;
  color: rgba(255, 120, 150, 0.5) !important;
  filter: blur(0.7px) drop-shadow(0 0 5px rgba(255, 120, 150, 0.35)) !important;
  font-size: 18px !important;
}
.fx-heart.fx-heart--rail.soft-b {
  opacity: 0.36 !important;
  color: rgba(180, 70, 100, 0.55) !important;
  filter: blur(0.9px) drop-shadow(0 0 4px rgba(180, 70, 100, 0.3)) !important;
  font-size: 13px !important;
}
.fx-heart.fx-heart--rail.soft-c {
  opacity: 0.5 !important;
  color: rgba(255, 140, 160, 0.6) !important;
  filter: blur(0.4px) drop-shadow(0 0 7px rgba(255, 140, 160, 0.4)) !important;
  font-size: 15px !important;
}
.fx-heart.fx-heart--rail.soft-d {
  opacity: 0.3 !important;
  color: rgba(255, 200, 180, 0.45) !important;
  filter: blur(1.1px) drop-shadow(0 0 4px rgba(255, 200, 180, 0.25)) !important;
  font-size: 12px !important;
}
/* Visibility: never clipped; stay shown in playtest */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud,
.pt-fx-layer, .fx-comfort-overlay, #pv-fx-layer, .fx-hearts.fx-hearts--rail {
  overflow: visible !important;
}
.pt-hud .comfort-hud.is-shown,
.pt-hud .comfort-hud:not(.hidden) {
  opacity: 1 !important;
  visibility: visible !important;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud.is-shown,
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud:not(.hidden) {
  /* don't override breathe with scale(1) from base chip rule */
  transform: none;
  animation: tide-breathe-accept 2s ease-in-out infinite;
}


/* ========== tideheart6: un-collapse rail (flex-shrink was crushing height:168px → ~8px)
   + match accept mockup geometry (top:18% / bottom:28%, width 22px).
   Evidence: CDP computed height 8px despite matched height:168px; flex item min-size
   with only abspos children shrinks to padding+border. flex-shrink:0 + definite
   top/bottom chain restores tall tide pill. ========== */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud {
  position: absolute;
  top: 18%;
  bottom: 28%;
  right: 10px;
  left: auto;
  width: 22px !important;
  height: auto !important;
  min-height: 0;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: visible !important;
  z-index: 14;
  pointer-events: none;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud {
  position: relative;
  flex: 1 0 auto;
  flex-shrink: 0 !important;
  align-self: stretch;
  width: 22px !important;
  max-width: 22px !important;
  min-width: 22px !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0;
  padding: 0 !important; /* mockup: rail has no padding; inner uses inset:3px */
  box-sizing: border-box;
  border-radius: 40% / 18%;
  background: rgba(18, 8, 14, 0.28) !important;
  border: 1px solid rgba(255, 180, 170, 0.28) !important;
  box-shadow:
    0 0 14px rgba(255, 120, 150, 0.22),
    inset 0 0 10px rgba(255, 200, 180, 0.08) !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: tide-breathe-accept 2s ease-in-out infinite;
}
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="0"],
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="1"],
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="2"],
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud[data-tier="3"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="0"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="1"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="2"],
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud[data-tier="3"] {
  width: 22px !important;
  max-width: 22px !important;
  min-width: 22px !important;
  height: 100% !important;
  flex-shrink: 0 !important;
  animation-name: tide-breathe-accept;
  animation-duration: 2s;
}
/* Inner well — mockup .rail-inner inset:3px (parent padding cleared above) */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud .pleasure-bar,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud .pleasure-bar {
  position: absolute;
  inset: 3px;
  width: auto !important;
  height: auto !important;
  border-radius: 40% / 16%;
  overflow: hidden;
  background: rgba(255, 220, 210, 0.06);
}
/* Shown state: never let base chip transform/scale kill height or breathe */
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud.is-shown,
.pt-phone[data-comfort-style="rail"][data-comfort-morph="tide"] .pt-hud .comfort-hud:not(.hidden),
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud.is-shown,
.phone-stage[data-comfort-style="rail"][data-comfort-morph="tide"] .hud .comfort-hud:not(.hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  height: 100% !important;
  flex-shrink: 0 !important;
  transform: none;
  animation: tide-breathe-accept 2s ease-in-out infinite;
}

/* station7: 到站布局板沿用 Q1 投放板弹层样式 */
#modal-station-board.modal:not(.hidden) { display: flex; z-index: 90; }
/* station7: 到站布局板 · 提示层示意 */
.stb-tip { z-index: 6; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); border-color: rgba(242,232,216,0.55); }
.stb-tip-sample { color: #f2e8d8; text-align: center; line-height: 1.3; pointer-events: none; }
.q1-phone-preview > .stb-tip-full { z-index: 7; }

/* ===== station7: 舒服条下掉反馈（潮汐条 + 同色淡心；克制）===== */
/* 液面下沉：下掉时不用 is-bump(亮)，改 is-drop：偏冷变暗 + 轻微下抖；填充高度有 0.5s 下沉过渡 */
.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud.is-drop .pleasure-fill {
  filter: saturate(0.3) brightness(0.8) hue-rotate(-12deg);
  box-shadow: 0 0 6px rgba(150, 165, 200, 0.28);
  transition: height 0.5s cubic-bezier(.3,.7,.3,1), filter 0.15s ease !important;
}
.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud.is-drop {
  border-color: rgba(160, 175, 210, 0.42);
}
.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud.is-drop .comfort-num {
  color: #b7c3dc;
  opacity: 0.85;
  animation: comfort-drop-shake 0.5s ease-out;
}
.pt-phone[data-comfort-style="rail"] .pt-hud .comfort-hud.is-drop .pleasure-bar {
  animation: comfort-drop-shake 0.5s ease-out;
}
@keyframes comfort-drop-shake {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(2px); }
  55%  { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}
/* 灰心向下飘散（同 .fx-heart--rail 淡心风格，只是偏灰蓝、向下） */
.fx-heart.fx-heart--rail.fx-heart--drop {
  animation-name: fx-heart-drop-fall;
  color: rgba(170, 160, 190, 0.5);
  text-shadow: 0 0 8px rgba(150, 150, 190, 0.35);
  filter: blur(0.7px) grayscale(0.6) drop-shadow(0 0 4px rgba(150, 150, 190, 0.25));
}
.fx-heart.fx-heart--rail.drop-a { opacity: 0.4; font-size: 14px; }
.fx-heart.fx-heart--rail.drop-b { opacity: 0.32; font-size: 11px; color: rgba(140, 135, 165, 0.5); }
.fx-heart.fx-heart--rail.drop-c { opacity: 0.36; font-size: 12px; color: rgba(190, 175, 195, 0.45); }
@keyframes fx-heart-drop-fall {
  0%   { opacity: 0; transform: translate(-50%, -4px) scale(0.8); }
  20%  { opacity: 0.5; transform: translate(calc(-50% + var(--dx, 0px) * 0.3), 4px) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), 44px) scale(0.7) rotate(-14deg); }
}

/* ===== station7: 舒服条 阈值刻度 / 危险闪烁 / 浮动 -N ===== */
.comfort-gate-tick { position: absolute; left: -2px; right: -2px; height: 2px; z-index: 3; pointer-events: none; border-radius: 1px; }
.comfort-gate-tick.gate-a { background: rgba(255, 224, 140, 0.95); box-shadow: 0 0 4px rgba(255, 224, 140, 0.8); }
.comfort-gate-tick.gate-b { background: rgba(120, 200, 255, 0.95); box-shadow: 0 0 4px rgba(120, 200, 255, 0.8); }
.pt-phone .comfort-hud.is-danger { animation: comfort-danger-blink 0.5s ease-in-out infinite !important; }
@keyframes comfort-danger-blink {
  0%, 100% { filter: brightness(1); opacity: 1; }
  50% { filter: brightness(0.55) saturate(0.6); opacity: 0.55; }
}
.fx-minus {
  position: absolute; z-index: 50; pointer-events: none;
  font: 800 17px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.02em;
  color: #9fc4ff; text-shadow: 0 0 8px rgba(80, 130, 255, 0.85), 0 1px 3px rgba(0,0,0,0.8);
  animation: fx-minus-fall 0.95s ease-out forwards;
}
@keyframes fx-minus-fall {
  0%   { opacity: 0; transform: translate(0, -6px) scale(0.8); }
  18%  { opacity: 1; transform: translate(0, 0) scale(1.15); }
  100% { opacity: 0; transform: translate(4px, 34px) scale(0.9); }
}

/* station7 · 玩法提示窗（clip 节点 tip 字段）：试玩 #pt-cliptip 与检查器小预览共用 .st-tip 外观 */
.pt-cliptip { z-index: 9; }
.pt-cliptip .st-tip-text, .cliptip-prev .st-tip-text { white-space: pre-wrap; word-break: break-word; overflow: hidden; }
.cliptip-panel { margin: 10px 0; padding: 10px; border: 1px solid rgba(212,175,100,0.25); border-radius: 10px; }
.cliptip-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cliptip-grid .field span { font-size: 11px; }
.cliptip-grid input { width: 100%; padding: 4px; }
.cliptip-prev { position: relative; width: 135px; height: 240px; margin: 8px auto 2px; background: #0a0806 linear-gradient(160deg,#241c14,#0a0806);
  border: 1px solid rgba(212,175,100,0.35); border-radius: 12px; overflow: hidden; touch-action: none; }
.cliptip-prev .st-tip { pointer-events: auto; cursor: move; }

/* station10：到站布局板 — 数值区放在预览右侧（原先堆在 498px 手机下面，保存按钮掉出窗口），视频铺满上下屏 */
#modal-station-board .q1-board-shell { width: min(1080px, 96vw); height: min(860px, 92vh); }
#modal-station-board .q1-board-body { flex: 1; min-height: 0; }
#modal-station-board .q1-stage-col { flex-direction: row; align-items: flex-start; gap: 14px; flex: 1; min-width: 0; }
#modal-station-board .q1-layout-tools { width: auto; flex: 1; min-width: 320px; max-height: min(640px, 72vh); overflow: auto; }
#modal-station-board .stb-vid-row select { background:#1a1410; color:#f2e8d8; border:1px solid rgba(255,255,255,.15); border-radius:4px; font-size:11px; padding:2px 4px; }
#modal-station-board .q1-layer-face .q1-prev-video,
#modal-station-board .q1-layer-waist .q1-prev-video { z-index: 1; background:#000; }
#modal-station-board .q1-win-miss { z-index: 2; }
#modal-station-board .q1-win-miss.hidden { display: none !important; }

/* station11：B 旁人走过失败 · 上屏替换入口 */
#modal-station-board .stb-bfail-row { flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px; margin-bottom: 8px; border: 1px solid rgba(212,175,100,.5); border-radius: 8px; background: rgba(212,175,100,.06); }
#modal-station-board .stb-bfail-row > span { width: auto; }
#modal-station-board .stb-bfail-meta { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
#modal-station-board .stb-bfail-meta code { font-size: 11px; opacity: .85; }

/* station12：到站视频清单。清单自己滚，保存按钮钉在右侧底部 */
#modal-station-board .q1-layout-tools { display:flex; flex-direction:column; overflow:hidden; max-height:min(760px, calc(92vh - 88px)); }
#modal-station-board .stb-vid-list { flex:1 1 auto; min-height:168px; overflow:auto; border:1px solid rgba(212,175,100,.35); border-radius:8px; margin-bottom:8px; }
#modal-station-board .stb-clip { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:4px 8px; align-items:center; padding:4px 8px; border-bottom:1px solid rgba(255,255,255,.06); cursor:pointer; }
#modal-station-board .stb-clip.on { background:rgba(212,175,100,.12); }
#modal-station-board .stb-clip-name { font-size:12px; color:#f2e8d8; }
#modal-station-board .stb-clip-file { font-size:10px; opacity:.7; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#modal-station-board .stb-clip-replace { margin:0; }
#modal-station-board .stb-fields { flex:0 1 auto; max-height:240px; overflow:auto; }
#modal-station-board .q1-layout-actions { flex:0 0 auto; padding-top:6px; }


/* Pose2 布局板入口：选中时闪一下，避免「找不到按钮」 */
#btn-open-pose2-board.pose2-board-btn-flash {
  box-shadow: 0 0 0 2px rgba(240, 215, 140, 0.85), 0 0 18px rgba(176, 126, 201, 0.55);
  animation: pose2BtnPulse 0.8s ease-in-out 2;
}
@keyframes pose2BtnPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}


/* station28：Pose2 选项叠在尾帧/静帧上 — host 勿遮底 */
#pt-qte-host.pose2-clear-bg {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#pt-qte-host.pose2-clear-bg .pose2-stage {
  background: transparent;
}

#btn-open-q5-mash-board.q5-mash-btn-flash {
  box-shadow: 0 0 0 2px rgba(240, 215, 140, 0.85), 0 0 18px rgba(232, 160, 176, 0.45);
  animation: pose2BtnPulse 0.8s ease-in-out 2;
}