/* mesh-cards: hide DOM card visuals when WebGL mesh is active */
body.mesh-cards .card-slot .card-flip{visibility:hidden}
body.mesh-cards .card-slot .card-confirm .co-actions{visibility:visible;position:relative;z-index:60}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%;overflow:hidden}
body{
  font-family:Georgia,'Times New Roman',serif;
  background:var(--scene-bg-color, #0d0d0d);color:#e8e0d4;
  height:100%;height:100dvh;
  display:flex;flex-direction:column;
  align-items:center;
  overflow:hidden;
  overscroll-behavior:none;
  position:fixed;width:100%;
}

/* ===== SCREENS ===== */
.screen{display:none;width:100%;flex-direction:column;align-items:center;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
.screen.on{display:flex}

/* ===== DEV ===== */
.fb-dot{
  position:fixed;top:22px;right:50px;z-index:100;
  width:7px;height:7px;border-radius:50%;
  background:#555;cursor:pointer;
  transition:background .3s;
  display:none;
}
.fb-dot.dev-visible{display:block}
.fb-dot.ok{background:#4c4}
.fb-dot.err{background:#f44}
.fb-dot-tip{
  display:none;position:fixed;top:34px;right:44px;z-index:101;
  padding:3px 7px;border-radius:4px;
  background:rgba(17,17,17,.95);border:1px solid #333;
  font-family:monospace;font-size:.5rem;color:#aaa;
  white-space:nowrap;
}
.fb-dot-tip.on{display:block}
.dance-toast{
  position:fixed;bottom:72px;left:50%;transform:translateX(-50%);z-index:10002;
  background:rgba(0,0,0,.88);border:1px solid rgba(255,255,255,.15);border-radius:12px;
  padding:7px 14px;font-family:monospace;color:#fff;text-align:center;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .2s;pointer-events:none;max-width:80vw;
}
.dance-toast.on{opacity:1}
.dance-toast .dt-name{font-size:.7rem;font-weight:bold;margin-bottom:2px}
.dance-toast .dt-desc{font-size:.5rem;color:rgba(255,255,255,.6);line-height:1.3}
.dance-toast .dt-stems{font-size:.45rem;color:rgba(255,255,255,.4);margin-top:2px}
.dance-toast .dt-intensity{font-size:.5rem;color:#fc0;margin-top:1px}
.sync-toast{
  display:none;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:200;
  max-width:92vw;width:340px;
  background:rgba(20,0,0,.95);border:1px solid #f44;border-radius:8px;
  padding:10px 12px;
  font-family:monospace;font-size:.55rem;color:#f88;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.sync-toast.on{display:block}
.sync-toast-msg{margin-bottom:6px}
.sync-toast-detail{
  display:none;margin:6px 0;padding:6px;
  background:#1a1a1a;border:1px solid #333;border-radius:4px;
  color:#999;font-size:.5rem;word-break:break-all;
  max-height:120px;overflow-y:auto;
}
.sync-toast-detail.on{display:block}
.sync-toast-actions{display:flex;gap:6px;justify-content:flex-end}
.sync-toast-actions button{
  padding:3px 8px;border-radius:3px;border:1px solid #333;
  background:#1a1a1a;color:#aaa;font-family:monospace;font-size:.5rem;cursor:pointer;
}
.sync-toast-actions button:active{background:#333}
/* === DEV FAB === */
.dev-fab{
  position:fixed;top:8px;right:8px;z-index:100;
  width:36px;height:36px;border-radius:50%;
  background:rgba(17,17,17,.8);border:1px solid #222;
  color:#444;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
  transition:all .2s ease;padding:0;
}
.dev-fab.on{border-color:#f44;color:#f44;box-shadow:0 0 12px rgba(255,68,68,.2)}
@keyframes fab-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.dev-fab.on.beat{animation:fab-pulse .12s ease-out}
.dev-fab svg{width:18px;height:18px}
.pause-btn{
  position:fixed;top:6px;left:6px;z-index:100;
  background:none;border:none;cursor:pointer;
  font-size:1.1rem;color:#333;padding:4px;line-height:1;
}
.pause-btn:active{color:#fff}

/* === DEV OVERRIDE CHIPS === */
.dev-chips{
  position:fixed;top:48px;right:8px;z-index:99;
  display:flex;gap:5px;pointer-events:none;opacity:0;transition:opacity .2s ease;
}
.dev-chips.visible{opacity:1;pointer-events:auto}
.dev-chip{
  padding:4px 10px;border-radius:10px;
  background:rgba(255,68,68,.12);border:1px solid rgba(255,68,68,.25);
  color:#f88;font-family:monospace;font-size:.52rem;white-space:nowrap;
  letter-spacing:.02em;cursor:pointer;-webkit-tap-highlight-color:transparent;
}

/* === DEV BOTTOM SHEET === */
.dev-sheet-backdrop{
  display:none;position:fixed;inset:0;z-index:98;
  background:rgba(0,0,0,.4);-webkit-tap-highlight-color:transparent;
}
.dev-sheet-backdrop.on{display:block}
.dev-sheet{
  position:fixed;bottom:0;left:0;right:0;z-index:99;
  background:rgba(17,17,17,.97);
  border-top:1px solid #333;border-radius:16px 16px 0 0;
  max-height:72vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-family:monospace;color:#888;
  padding-bottom:env(safe-area-inset-bottom,0);
}
.dev-sheet.on{transform:translateY(0)}
.dev-sheet-handle{width:36px;height:4px;border-radius:2px;background:#444;margin:10px auto 6px}

/* summary strip — always visible at top of sheet */
.dev-summary{
  padding:8px 18px 0;font-family:monospace;font-size:.5rem;
  color:#555;letter-spacing:.02em;line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dev-summary span{color:#e85;font-weight:600}

/* tabs */
.dev-tabs{
  display:flex;border-bottom:1px solid #222;padding:0 16px;
  position:sticky;top:0;background:rgba(17,17,17,.97);z-index:1;
}
.dev-tab{
  flex:1;padding:11px 0 9px;background:none;border:none;border-bottom:2px solid transparent;
  color:#444;font-family:monospace;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all .15s ease;
  position:relative;
}
.dev-tab.active{color:#f44;border-bottom-color:#f44}
/* tab state dot — shows when that tab has live overrides */
.dev-tab .tab-dot{
  display:none;width:5px;height:5px;border-radius:50%;
  background:#f44;position:absolute;top:6px;right:calc(50% - 18px);
}
.dev-tab .tab-dot.on{display:inline-block}
.dev-tab-panel{display:none;padding:16px 18px 24px}
.dev-tab-panel.active{display:block}

/* sections */
.dev-section{margin-bottom:20px}
.dev-section:last-child{margin-bottom:0}
.dev-section-label{
  font-size:.5rem;color:#444;text-transform:uppercase;letter-spacing:.12em;
  margin-bottom:10px;font-weight:600;
}

/* pill buttons — location scrolls horizontal, time/day wrap */
.dev-pill-group{display:flex;flex-wrap:wrap;gap:7px}
.dev-pill-group.scroll{
  flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:4px;margin:0 -18px;padding-left:18px;padding-right:18px;
  scrollbar-width:none;
}
.dev-pill-group.scroll::-webkit-scrollbar{display:none}
.dev-pill{
  padding:9px 14px;border-radius:20px;
  background:#141414;border:1px solid #2a2a2a;
  color:#666;font-family:monospace;font-size:.58rem;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:all .15s ease;min-height:36px;display:flex;align-items:center;
  white-space:nowrap;flex-shrink:0;
}
.dev-pill.active{background:rgba(255,68,68,.1);border-color:rgba(255,68,68,.5);color:#f66}
@keyframes pill-spring{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.dev-pill.pop{animation:pill-spring .25s cubic-bezier(.34,1.56,.64,1)}
.dev-pill:active{transform:scale(.92)}

/* slider */
.dev-slider-wrap{padding:6px 0}
.dev-slider{
  width:100%;height:6px;-webkit-appearance:none;appearance:none;
  background:#1a1a1a;border-radius:3px;outline:none;
}
.dev-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:#f44;cursor:pointer;border:2px solid #111;box-shadow:0 0 8px rgba(255,68,68,.3);
}
.dev-slider-labels{display:flex;justify-content:space-between;font-size:.48rem;color:#444;margin-top:6px}
.dev-slider-val{color:#f44;font-weight:600}

/* tier buttons */
.dev-tier-group{display:flex;gap:7px}
.dev-tier{
  flex:1;padding:11px 0;background:#141414;border:1px solid #2a2a2a;border-radius:8px;
  color:#555;font-family:monospace;font-size:.62rem;cursor:pointer;min-height:42px;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;transition:all .15s ease;
}
.dev-tier.active{border-color:#f44;color:#f44;background:rgba(255,68,68,.08)}
.dev-tier:active{transform:scale(.95)}

/* stem readout — grid of meter rows */
.dev-readout{
  background:#0a0a0a;border:1px solid #1a1a1a;border-radius:8px;
  padding:10px 12px;font-family:monospace;
}
.dev-stem-row{
  display:flex;align-items:center;gap:6px;
  padding:3px 0;font-size:.52rem;
}
.dev-stem-row+.dev-stem-row{border-top:1px solid #151515}
.dev-stem-name{width:48px;color:#555;text-align:right;flex-shrink:0}
.dev-stem-bar{flex:1;height:4px;background:#1a1a1a;border-radius:2px;overflow:hidden}
.dev-stem-fill{height:100%;border-radius:2px;transition:width .15s ease-out,background .15s ease-out,box-shadow .15s ease-out;min-width:0}
.dev-stem-fill.hot{box-shadow:0 0 6px 1px currentColor}
.dev-stem-val{width:30px;color:#444;text-align:right;flex-shrink:0;font-size:.48rem;transition:color .15s ease}
.dev-stem-fx{font-size:.42rem;color:#333;width:44px;flex-shrink:0;transition:color .15s ease}
.dev-stem-row.active .dev-stem-name{color:#888}
.dev-stem-row.active .dev-stem-fx{color:#555}

/* music status */
.dev-music-status{
  padding:10px 12px;background:#0a0a0a;border:1px solid #1a1a1a;border-radius:8px;
  font-size:.55rem;color:#555;font-family:monospace;margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.dev-music-status .play-dot{
  width:6px;height:6px;border-radius:50%;background:#333;flex-shrink:0;
  transition:background .2s ease;
}
.dev-music-status .play-dot.playing{background:#4c4}
.dev-music-status .play-dot.paused{background:#f44}

/* tier badge — color shifts with tier */
.dev-tier-badge{
  display:inline-block;padding:5px 12px;border-radius:12px;
  font-family:monospace;font-size:.58rem;font-weight:600;
  margin-bottom:12px;transition:all .3s ease;
}
.dev-tier-badge.t0{background:rgba(100,100,100,.1);border:1px solid rgba(100,100,100,.2);color:#666}
.dev-tier-badge.t1{background:rgba(232,180,60,.1);border:1px solid rgba(232,180,60,.25);color:#da4}
.dev-tier-badge.t2{background:rgba(255,140,40,.12);border:1px solid rgba(255,140,40,.3);color:#f84}
.dev-tier-badge.t3{background:rgba(255,68,68,.15);border:1px solid rgba(255,68,68,.35);color:#f44;
  box-shadow:0 0 12px rgba(255,68,68,.15)}

/* action buttons */
.dev-action-btn{
  width:100%;padding:13px;margin-bottom:10px;
  background:#141414;border:1px solid #2a2a2a;border-radius:10px;
  color:#888;font-family:monospace;font-size:.62rem;
  cursor:pointer;min-height:46px;-webkit-tap-highlight-color:transparent;transition:all .15s ease;
}
.dev-action-btn:active{background:#2a2a2a}
.dev-action-btn.danger{background:rgba(50,0,0,.6);border-color:rgba(255,68,68,.2);color:#f66}
.dev-action-btn.danger:active{background:#500}

/* pose slider rows */
.pose-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.pose-label{width:48px;flex-shrink:0;font-size:.5rem;color:#666;text-align:right;font-family:monospace}
.pose-row .dev-slider{flex:1;margin:0}
.pose-val{width:36px;flex-shrink:0;font-size:.48rem;color:#888;text-align:right;font-family:monospace}
.pose-auto{font-size:.4rem;font-family:monospace;background:none;border:1px solid #333;border-radius:3px;color:#555;padding:1px 5px;cursor:pointer;flex-shrink:0;transition:all .15s;-webkit-tap-highlight-color:transparent}
.pose-auto.active{border-color:#0af;color:#0af}
/* pose preview large mode — fills main pane, sits behind dev panel */
#posePreview.large{
  position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:90;
  background:#0a0a0a;border:none;border-radius:0;margin:0;
  display:flex;align-items:center;justify-content:center;
}
#posePreview.large #poseCanvas{
  width:auto;height:auto;max-width:100vw;max-height:100vh;object-fit:contain;
}
/* view mode toggles */
.pose-view-toggles{display:flex;gap:4px;margin-bottom:6px;flex-wrap:wrap}
/* move grid */
.move-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;max-height:220px;overflow-y:auto;margin-bottom:8px;-webkit-overflow-scrolling:touch}
.move-btn{background:#111;border:1px solid #333;border-radius:6px;padding:5px 8px;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all .15s;-webkit-tap-highlight-color:transparent;font-family:monospace}
.move-btn:active{transform:scale(0.97)}
.move-btn.selected{background:#1a1a1a;border-width:2px;box-shadow:0 0 8px rgba(255,150,50,0.3)}
.move-name{font-size:.45rem;color:#aaa;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.move-btn.selected .move-name{color:#fff}
.move-energy{font-size:.5rem;font-weight:bold;font-family:monospace;margin-left:4px;flex-shrink:0}
.move-info{min-height:0;transition:min-height .2s}
.move-info:not(:empty){min-height:32px;padding:6px 0}
.move-mono{font-size:.5rem;color:#888;font-style:italic;margin-bottom:2px}
.move-detail{font-size:.42rem;opacity:0.7}
#poseModePlay.active{background:#f84;color:#000;border-color:#f84}

/* firebase status */
.dev-fb-status{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;background:#0a0a0a;border-radius:8px;border:1px solid #1a1a1a;
  font-size:.55rem;
}
.dev-fb-dot{width:8px;height:8px;border-radius:50%;background:#555;flex-shrink:0;transition:background .2s ease}
.dev-fb-dot.ok{background:#4c4}
.dev-fb-dot.err{background:#f44}

/* debug payload */
.dev-debug-payload{
  background:#0a0a0a;border:1px solid #1a1a1a;border-radius:8px;
  padding:10px 12px;font-size:.48rem;color:#555;line-height:1.6;
  white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto;
  font-family:monospace;
}

/* live context */
.dev-live-ctx{
  margin-top:14px;padding:10px 12px;
  background:#0a0a0a;border:1px solid #1a1a1a;border-radius:8px;
  font-size:.48rem;color:#555;line-height:1.6;font-family:monospace;
}

/* stem visualizer — compact right-side panel, not a full-screen overlay */
.stem-viz{
  display:none;position:fixed;bottom:72px;right:0;z-index:55;
  width:280px;max-height:calc(100vh - 140px);overflow-y:auto;
  background:rgba(0,0,0,.82);padding:6px 10px 5px;
  font-family:monospace;font-size:.55rem;color:#888;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-radius:6px 0 0 6px;border-left:1px solid #333;border-top:1px solid #333;border-bottom:1px solid #333;
}
.stem-viz.on{display:block}
.stem-viz-row{display:flex;align-items:center;margin-bottom:2px;height:13px}
.stem-viz-label{width:50px;text-align:right;padding-right:5px;color:#666;font-size:.5rem;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0}
.stem-viz-track{flex:1;height:8px;background:#1a1a1a;border-radius:2px;overflow:hidden;position:relative}
.stem-viz-bar{height:100%;border-radius:2px;transition:width .05s linear;position:absolute;left:0;top:0}
.stem-viz-val{width:34px;text-align:right;padding-left:4px;font-size:.5rem;color:#999;flex-shrink:0;font-weight:bold}
.stem-viz-tier{text-align:center;margin-top:3px;font-size:.6rem;font-weight:bold;letter-spacing:.15em}
.stem-viz-solo{width:18px;height:14px;border:1px solid #333;border-radius:2px;background:none;
  color:#555;font-size:.4rem;font-family:monospace;cursor:pointer;padding:0;margin-left:3px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;text-transform:uppercase;line-height:1}
.stem-viz-solo.on{border-color:#f44;color:#f44;background:rgba(255,68,68,.15)}
.stem-viz-group{border-left:2px solid #222;margin-left:2px;padding-left:0;margin-bottom:1px}
.stem-viz .sv-scrub-wrap{position:relative;margin-top:4px}
.stem-viz .sv-scrub-label{position:absolute;top:-1px;left:0;font-size:.45rem;color:#666;text-transform:uppercase;letter-spacing:.06em;pointer-events:none}

/* live note display */
.note-row{display:flex;align-items:center;height:18px;margin-bottom:2px}
.note-label{width:50px;text-align:right;padding-right:5px;flex-shrink:0;
  font-size:.55rem;font-weight:bold;letter-spacing:.06em;
  transition:opacity .15s,color .15s;opacity:.25;color:#666}
.note-label.on{opacity:1}
.note-strip{flex:1;height:16px;background:#111;border-radius:3px;position:relative;overflow:hidden}
.note-strip-range{position:absolute;top:0;bottom:0;border-radius:2px;opacity:.12;transition:opacity .15s}
.note-strip-range.on{opacity:.4}
.note-dot{position:absolute;top:2px;width:3px;height:12px;border-radius:2px;
  transition:left .08s linear,opacity .15s;opacity:0}
.note-dot.on{opacity:1}
.note-name{width:32px;text-align:right;padding-left:4px;font-size:.55rem;font-weight:bold;
  letter-spacing:.04em;transition:opacity .15s;opacity:0}
.note-name.on{opacity:1}

/* ghost trail for recent notes */
.note-ghost{position:absolute;top:3px;width:2px;height:10px;border-radius:1px;opacity:0;
  transition:opacity .5s}

/* ===== HOME ===== */
.home-body{
  flex:1;width:100%;
  display:flex;align-items:center;justify-content:center;
  padding:10px 10px 100px;
  overflow:visible;
}

/* stacked history cards behind main */
.hand-area{
  position:relative;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;
}
/* collapsed mode */
.hand-area:not(.fanned){
  justify-content:center;
}
.hand-area:not(.fanned) .stack-card{
  position:absolute;left:50%;margin-left:-130px;
  width:260px;aspect-ratio:5/7;border-radius:12px;overflow:hidden;
  transition:transform .35s cubic-bezier(.4,0,.2,1);z-index:1;
}
.hand-area:not(.fanned) .stack-card:nth-of-type(1){transform:translateX(-20px) rotate(-2deg)}
.hand-area:not(.fanned) .stack-card:nth-of-type(2){transform:translateX(-38px) rotate(-3.5deg)}
.hand-area:not(.fanned) .stack-card:nth-of-type(3){transform:translateX(-54px) rotate(-5deg)}
.hand-area:not(.fanned) .stack-card:nth-of-type(4){transform:translateX(-68px) rotate(-6deg)}
.hand-area:not(.fanned) .stack-card .sc-back{opacity:1}
.hand-area:not(.fanned) .stack-card .sc-front{opacity:0;pointer-events:none}
.card-wrap{display:flex;flex-direction:column;align-items:center;position:relative;z-index:10}
.hand-area:not(.fanned) .last-card{position:relative}
.hand-area:not(.fanned) .stack-count{
  position:absolute;bottom:-20px;left:50%;transform:translateX(-90px);
  font-size:.42rem;color:#333;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}

/* celebratory dicks around card */
.cele-dick{
  position:absolute;z-index:5;
  color:#fff;pointer-events:none;
  animation:dickFloat 3s ease-in-out infinite alternate;
}
.cele-dick svg{width:100%;height:auto}
@keyframes dickFloat{
  0%{transform:translate(var(--dx),var(--dy)) rotate(var(--r1)) scale(var(--s))}
  100%{transform:translate(var(--dx),calc(var(--dy) + var(--bob))) rotate(var(--r2)) scale(var(--s))}
}

/* fanned mode: horizontal scroll row */
.hand-area.fanned{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:35;
  background:rgba(0,0,0,.88);
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding:0 20px;gap:14px;
  justify-content:flex-start;
}
.hand-area.fanned::-webkit-scrollbar{display:none}
.hand-area.fanned .stack-card{
  position:relative;
  width:220px;min-width:220px;aspect-ratio:5/7;border-radius:12px;overflow:hidden;
  flex-shrink:0;transform:none;
}
.hand-area.fanned .stack-card .sc-back{opacity:0;pointer-events:none}
.hand-area.fanned .stack-card .sc-front{opacity:1}
.hand-area.fanned .last-card{
  position:relative;z-index:10;flex-shrink:0;min-width:220px;
}
.hand-area.fanned .card-wrap{z-index:10;flex-shrink:0}
.hand-area.fanned .reflect-tap{display:none}
.hand-area.fanned .stack-count{display:none}
.hand-area.fanned .cele-dick{display:none}

.stack-card{border-radius:12px;overflow:hidden}
.stack-card .sc-back{
  position:absolute;inset:0;
  background:linear-gradient(145deg,#151515,#0a0a0a);
  border:1.5px solid #222;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;transition:opacity .3s;
}
.stack-card .sc-back svg{width:34px;height:auto;opacity:.08}
.stack-card .sc-front{
  position:absolute;inset:0;
  background:#f5f2ea;border:2px solid #d5d0c8;border-radius:12px;
  padding:12px 14px;display:flex;flex-direction:column;
  transition:opacity .3s;
  font-family:'Outfit',sans-serif;
}
/* --- unified card face classes (c-*) — sized by parent --- */
.c-icon{text-align:center;line-height:1;flex-shrink:0}
.c-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.c-title-row{display:flex;align-items:center;justify-content:center}
.c-title{font-weight:800;color:#0d0d0d}
.c-body{color:#555}
.c-body em{color:#1a1a1a;font-style:normal;font-weight:700}
.c-bottom{display:flex;justify-content:space-between;align-items:flex-end}
.c-effort{text-transform:uppercase;color:#aaa;display:inline-flex;align-items:center}
.c-time{color:#aaa}
.c-debug{font-size:.45rem;letter-spacing:.04em;color:#f44;font-family:monospace;margin-left:auto;white-space:nowrap}
/* stack card sizes */
.stack-card .c-icon{font-size:1.8rem}
.stack-card .c-center{padding:0}
.stack-card .c-title-row{gap:4px}
.stack-card .c-title{font-size:.9rem;margin-bottom:4px}
.stack-card .c-body{font-size:.62rem;line-height:1.35;max-width:180px}
.stack-card .c-effort{font-size:.44rem;letter-spacing:.06em}
.stack-card .c-time{font-size:.44rem}

/* main card — BIG for portrait */
.last-card{
  position:relative;z-index:10;
  width:260px;aspect-ratio:5/7;
  background:#f5f2ea;border-radius:12px;border:2px solid #d5d0c8;
  padding:14px 16px;display:flex;flex-direction:column;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  animation:cardPop .3s ease both;
  font-family:'Outfit',sans-serif;
}
@keyframes cardPop{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:none}}
/* last card sizes */
.last-card .c-icon{font-size:2.6rem}
.last-card .c-center{padding:0}
.last-card .c-title-row{gap:5px}
.last-card .c-title{font-size:1.1rem;margin-bottom:6px}
.last-card .c-body{font-size:.78rem;line-height:1.45;max-width:210px}
.last-card .c-effort{font-size:.52rem;letter-spacing:.08em}
.last-card .c-time{font-size:.52rem}

/* crew card input overlay */
.crew-overlay{
  display:none;position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.88);z-index:45;
  flex-direction:column;align-items:center;justify-content:center;
  padding:20px;
}
.crew-overlay.on{display:flex}
.crew-overlay .co-label{
  font-family:'Outfit',sans-serif;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:#555;margin-bottom:12px;
}
.crew-overlay .co-input{
  width:100%;max-width:340px;padding:14px 16px;
  background:#1a1a1a;border:2px solid #333;border-radius:10px;
  color:#fff;font-family:Georgia,serif;font-size:.9rem;
  text-align:left;outline:none;resize:none;
  line-height:1.4;
}
.crew-overlay .co-input:focus{border-color:#666}
.crew-overlay .co-input::placeholder{color:#444;font-size:.8rem}
.crew-overlay .co-added{
  width:100%;max-width:340px;margin-top:8px;
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
}
.crew-overlay .co-chip{
  background:#1a1a1a;border:1px solid #333;border-radius:6px;
  padding:4px 10px;font-family:Georgia,serif;font-size:.7rem;
  color:#888;max-width:200px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
  transform:scale(0);animation:co-pop .3s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes co-pop{to{transform:scale(1)}}
.crew-overlay .co-chip.pending{animation:co-pop .3s cubic-bezier(.34,1.56,.64,1) forwards,co-pulse 1.5s ease .3s infinite}
@keyframes co-pulse{0%,100%{opacity:.6}50%{opacity:1}}
.crew-overlay .co-count{
  font-family:'Outfit',sans-serif;font-size:.55rem;letter-spacing:.1em;
  text-transform:uppercase;color:#666;margin-top:6px;
  transition:color .2s;
}
.crew-overlay .co-count.flash{color:#fff}
.crew-overlay.co-flash .co-input{border-color:#666;transition:border-color .15s}
.crew-overlay .co-input{transition:border-color .4s}
.crew-overlay .co-btns{display:flex;gap:12px;margin-top:14px}
.crew-overlay .co-btn{
  padding:10px 24px;border-radius:8px;border:none;
  font-family:'Outfit',sans-serif;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;
}
.crew-overlay .co-save{background:#fff;color:#0d0d0d;font-weight:600}
.crew-overlay .co-another{background:transparent;color:#888;border:1px solid #444}
.crew-overlay .co-another:active{border-color:#666;color:#fff}
.crew-overlay .co-cancel{background:transparent;color:#555;border:1px solid #333}
.crew-overlay .co-status{
  margin-top:10px;font-family:'Outfit',sans-serif;font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:#555;
  min-height:1em;
}
.add-btn{
  position:absolute;right:14px;bottom:16px;
  width:36px;height:36px;border-radius:50%;
  background:transparent;border:1px solid #333;
  color:#555;font-size:1.2rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  z-index:11;
}
.add-btn:active{border-color:#666;color:#fff}

/* bottom bar: Stay 🍆 Go */
.home-bar{
  position:fixed;bottom:0;left:0;width:100%;
  padding:12px 20px 16px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(transparent,#0d0d0d 35%);
  z-index:10;
}
.deck-btn{
  flex:1;max-width:130px;padding:14px 8px;
  border:none;border-radius:12px;
  background:transparent;
  text-align:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.deck-btn:active .db-label{opacity:.5}
.deck-btn .db-label{font-family:'Outfit',sans-serif;font-size:.9rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:600}
.bar-icon{
  flex-shrink:0;color:#fff;opacity:.9;
  position:relative;
  width:56px;min-height:56px;
  display:flex;align-items:center;justify-content:center;
}
.bar-icon svg{width:56px;height:auto;transition:width .5s cubic-bezier(.4,0,.2,1),height .5s cubic-bezier(.4,0,.2,1),transform .06s ease-out;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.15))}
/* music mode: mascot dances to all instruments */
.bar-icon.sax-mode{opacity:1}
.bar-icon.sax-mode canvas{width:48px;height:70px}
.bar-icon.sax-mode svg{width:120px}

/* rising dick transition */
.home-body.fading{opacity:0;transition:opacity .4s ease}
.bar-icon.rising{
  position:fixed !important;z-index:40;
  transition:all .65s cubic-bezier(.4,0,.2,1);
  opacity:1 !important;
}
.home-bar.fading .deck-btn{opacity:0;transition:opacity .3s ease}
.home-bar.fading .bar-icon{opacity:1}

/* deal screen: content hidden until .reveal */
.deal-screen .deal-vis,.deal-screen .deal-text,.deal-screen .deal-sub{
  opacity:0;transition:opacity .5s ease;
}
.deal-screen.reveal .deal-vis,.deal-screen.reveal .deal-text,.deal-screen.reveal .deal-sub{
  opacity:1;
}

/* context strip — always visible at top */
.ctx-strip{
  position:fixed;top:0;left:0;width:100%;z-index:50;
  padding:6px 10px 5px;text-align:center;
  font-family:'Outfit',sans-serif;font-size:.52rem;font-weight:400;
  color:rgba(255,255,255,.35);letter-spacing:.04em;
  pointer-events:none;
  line-height:1.4;
}
.ctx-strip.dev-override{color:#f44;font-weight:600}

/* deal screen location line */
.deal-loc{
  font-family:'Outfit',sans-serif;font-size:.6rem;font-weight:400;
  color:rgba(255,255,255,.4);letter-spacing:.04em;
  margin-top:12px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.deal-loc:active{color:rgba(255,255,255,.6)}

/* footer meta */
.home-footer{
  position:fixed;bottom:68px;left:0;width:100%;
  padding:0 14px;
  display:flex;justify-content:center;align-items:center;gap:10px;
  z-index:11;
}
.home-ctx{display:none}


.debug-ctx{
  position:fixed;bottom:0;left:0;width:100%;
  padding:8px 12px;
  font-family:monospace;font-size:.42rem;line-height:1.5;
  color:#888;letter-spacing:.02em;
  white-space:pre-wrap;word-break:break-all;
  z-index:98;
  background:rgba(0,0,0,.85);
  border-top:1px solid #333;
  display:none;
}
.debug-ctx.on{display:none}

/* expanded history overlay */
.hist-expanded{
  display:none;position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.92);z-index:40;
  flex-direction:row;align-items:center;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding:20px 14px;gap:14px;
}
.hist-expanded.on{display:flex}
.hist-expanded::-webkit-scrollbar{display:none}
.hist-close{
  position:fixed;top:12px;right:14px;z-index:41;
  font-family:Georgia,serif;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color:#555;background:none;border:none;cursor:pointer;
}
.hist-close:active{color:#fff}
.h-card{
  width:180px;min-width:180px;aspect-ratio:5/7;flex-shrink:0;
  background:#f5f2ea;border-radius:10px;border:2px solid #d5d0c8;
  padding:10px 12px;display:flex;flex-direction:column;
  box-shadow:0 3px 12px rgba(0,0,0,.3);
  font-family:'Outfit',sans-serif;
}
/* history card sizes */
.h-card .c-icon{font-size:1.4rem}
.h-card .c-center{padding:0}
.h-card .c-title-row{gap:3px}
.h-card .c-title{font-size:.78rem;margin-bottom:4px}
.h-card .c-body{font-size:.55rem;line-height:1.4;max-width:150px}
.hc-sticky{
  width:180px;margin-top:-4px;
  font-family:'Outfit',sans-serif;font-size:.48rem;line-height:1.35;
  color:#6b6040;font-style:italic;
  background:linear-gradient(180deg,#f0e8c4 0%,#f7f0d0 100%);
  padding:5px 10px 4px;border-radius:0 0 3px 3px;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
  text-align:center;flex-shrink:0;
}
.hc-sticky.hc-reflect-tap{
  font-style:normal;color:#998e60;cursor:pointer;
}
.h-card .c-effort{font-size:.38rem;letter-spacing:.08em}
.h-card .c-time{font-size:.38rem}

/* ===== DEAL SCREEN ===== */
.deal-screen{
  display:none;width:100%;
  flex-direction:column;align-items:center;justify-content:center;
  height:100%;text-align:center;
}
.deal-screen.on{display:flex}
.deal-vis{position:relative;width:180px;height:280px}
.deal-logo{position:absolute;bottom:0;left:50%;transform:translateX(-50%);color:#fff;animation:logoPulse 1.5s ease-in-out infinite}
.deal-logo svg{width:140px;height:auto;transition:width .5s cubic-bezier(.4,0,.2,1),transform .06s ease-out}
.deal-logo.sax-mode{animation:none;opacity:1}
.deal-logo.sax-mode svg{width:160px}
@keyframes logoPulse{0%,100%{opacity:.3}50%{opacity:.8}}

/* === BEAT SYSTEM === */

/* base beat target — duration + scale driven by mode beat profile */
.beat-target{transition:transform var(--beat-dur-s,.12s) ease-out}
.beat-target.beat{transform:scale(var(--beat-scale,1.15))}

/* home: mascot bounce — slightly larger than base */
.bar-icon.beat-target.beat{transform:scale(calc(var(--beat-scale,1.15) + 0.05))}

/* home: STAY/GO button text breathe */
.deck-btn{transition:opacity var(--beat-dur-s,.12s) ease-out}
.deck-btn.beat .db-label{opacity:.6}

/* home: main card glow on beat */
.last-card{transition:box-shadow var(--beat-dur-s,.15s) ease-out}
.last-card.beat{box-shadow:0 6px 24px rgba(0,0,0,.35),0 0 30px 6px rgba(232,224,212,.15)}

/* home: background pulse — color tinted per mode via --beat-bg */
.beat-bg{transition:background var(--beat-dur-s,.15s) ease-out}
.beat-bg.beat{background:var(--beat-bg,#131313)}

/* deal: logo bounce */
.deal-logo.beat-target.beat{transform:translateX(-50%) scale(calc(var(--beat-scale,1.15) + 0.03))}
/* deal: loading text breathe */
.deal-text{transition:opacity var(--beat-dur-s,.12s) ease-out}
.deal-text.beat{opacity:1;color:#888}

/* hand: card glow — micro scale + suit-colored shadow */
.card-slot.beat-target.beat{transform:scale(1.008)}
.card-slot.beat.suit-dare{box-shadow:0 0 40px 8px rgba(255,68,68,.4);filter:brightness(1.04)}
.card-slot.beat.suit-mouth{box-shadow:0 0 40px 8px rgba(232,152,48,.4);filter:brightness(1.04)}
.card-slot.beat.suit-eyes{box-shadow:0 0 40px 8px rgba(119,153,187,.4);filter:brightness(1.04)}
.card-slot.beat.suit-wild{box-shadow:0 0 40px 8px rgba(204,204,204,.3);filter:brightness(1.04)}
.card-slot.beat.suit-feed{box-shadow:0 0 40px 8px rgba(232,152,48,.4);filter:brightness(1.04)}
.card-slot.beat.suit-pour{box-shadow:0 0 40px 8px rgba(180,119,204,.4);filter:brightness(1.04)}
.card-slot.beat.suit-sound{box-shadow:0 0 40px 8px rgba(68,187,153,.4);filter:brightness(1.04)}
.card-slot.beat.suit-drift{box-shadow:0 0 40px 8px rgba(119,153,187,.4);filter:brightness(1.04)}
.card-slot.beat.suit-crew{box-shadow:0 0 40px 8px rgba(232,224,212,.3);filter:brightness(1.04)}

/* hand: swipe hint breathe */
.swipe-hint{transition:opacity var(--beat-dur-s,.12s) ease-out}
.swipe-hint.beat{opacity:.7}

/* confirm: check/x button pulse */
.co-lock{transition:transform var(--beat-dur-s,.12s) ease-out}
.co-lock.beat{transform:scale(var(--beat-scale,1.15))}
.co-nah{transition:transform var(--beat-dur-s,.12s) ease-out}
.co-nah.beat{transform:scale(calc(var(--beat-scale,1.15) - 0.05))}

/* vibe: mascot + option buttons */
.vibe-card .vc-mascot{transition:transform var(--beat-dur-s,.12s) ease-out}
.vibe-card .vc-mascot.beat{transform:scale(var(--beat-scale,1.15))}
.vibe-btn.beat{border-color:#555;box-shadow:0 0 12px 2px rgba(255,255,255,.06)}

/* context strip breathe */
.ctx-strip{transition:opacity var(--beat-dur-s,.12s) ease-out}
.ctx-strip.beat{opacity:1}

/* === STEM-REACTIVE LAYER === */
/* Each musical element drives a different visual property.            */
/* Total energy (sum of active stems) escalates intensity in tiers.   */
/* Tier 0 = subtle breathing. Tier 3 = ludicrous.                    */

body{
  --kick-e:0;--snare-e:0;--hat-e:0;
  --bass-e:0;--fg-vocal-e:0;--bg-vocal-e:0;
  --wind-e:0;--keys-e:0;
  --drum-e:0;--bright:0;
  --total-e:0;--tier:0;
  /* MIDI note hues — populated when *_notes data exists */
  --wind-hue:0;--bass-hue:0;--vocal-hue:0;--keys-hue:0;
  --wind-vel:0;--bass-vel:0;--vocal-vel:0;--keys-vel:0;
  --wind-playing:0;--bass-playing:0;--vocal-playing:0;--keys-playing:0;
  /* chord tracking */
  --chord-q:0;--chord-density:0;--chord-vel:0;--chord-hue:0;
  /* dance mode scene vars — exported by current mode, consumed by all elements */
  --d-rot:0;--d-sc:0;--d-tx:0;--d-ty:0;
  --d-hue:0;--d-sat:50;--d-bright:1;
  --d-glow:0;--d-glowA:0;--d-inv:0;
  --d-skew:0;--d-blur:0;--d-con:0;
  /* scene colors — set by applyFxPreset per dance mode */
  --scene-bg-color:#0d0d0d;
  --scene-flash-color:white;--scene-flash-max:0.08;
  --scene-bass-hue:15;--scene-bass-opacity:0.8;
  --scene-wash-hue:25;
  /* beat response — set by applyFxPreset per mode, makes each mode feel different */
  --beat-scale:1.15;--beat-flash-mul:1;--beat-bg:#131313;--beat-dur-s:0.12s;
}

/* --- BASS: radial glow rising from below — color set by --scene-bass-hue --- */
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 90%,
    hsla(var(--dg-card-hue, 30), calc(50% * var(--bass-e, 0)), calc(14% * var(--bass-e, 0) + 3%),
      calc(var(--bass-e, 0) * var(--scene-bass-opacity, 0.8))) 0%,
    transparent 65%);
}

/* --- BG VOCAL: full-screen wash overlay — color set by --scene-wash-hue --- */
body::before{
  content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,
    hsla(var(--dg-card-hue, 30), 60%, 25%, calc(var(--bg-vocal-e, 0) * 0.25 + 0.04)) 0%,
    transparent 80%);
  opacity:1;
}

/* --- SNARE: flash overlay — color set by --scene-flash-color, intensity by --scene-flash-max --- */
.clap-flash{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:var(--scene-flash-color, white);
  opacity:0;
  transition:opacity var(--scene-flash-dur, 0.04s) ease-out;
}
.clap-flash.on{opacity:calc(var(--snare-e)*var(--scene-flash-max,0.08)*var(--beat-flash-mul,1))}

/* --- BASS + CHORDS: card shadow breathes, chord density amplifies glow --- */
.last-card{box-shadow:0 4px 20px rgba(0,0,0,.3),
  0 0 calc(10px + 30px*var(--bass-e) + var(--chord-density)*2px) calc(1px + 8px*var(--bass-e))
    rgba(232,224,212,calc(0.04 + 0.18*var(--bass-e))),
  0 0 calc(18px*var(--bass-playing) + var(--chord-density)*3px) calc(4px*var(--bass-playing))
    hsla(var(--chord-hue),calc(50% + var(--chord-density)*5%),50%,
      calc(var(--bass-vel)*0.25 + var(--chord-vel)*0.1)),
  0 0 calc(var(--dg-card-glow, 4) * 1px) hsla(var(--dg-card-hue, 30), 70%, 60%, var(--dg-card-glowA, 0.2));
  transition:box-shadow .15s ease-out}

/* --- LEAD VOCAL: card text breathes, tints with vocal MIDI --- */
.last-card .c-body{
  transition:opacity .15s ease-out,transform .3s ease-out,color .2s ease-out;
  opacity:calc(0.7 + 0.3*var(--fg-vocal-e));
  transform:translateY(calc(var(--fg-vocal-e)*1px))
    scaleX(calc(1 + var(--fg-vocal-e)*0.01));
  color:hsl(calc(40 + var(--vocal-hue)*var(--vocal-playing)*0.8 + var(--chord-q)*-15),
    calc(8% + var(--vocal-vel)*12% + var(--chord-density)*1%),
    calc(75% + var(--vocal-vel)*8%))}

/* --- LEAD VOCAL + WIND MIDI: upper elements lift, brighten, hue-shift --- */
.bar-icon{transition:transform .2s ease-out,filter .2s ease-out;
  filter:brightness(calc(1 + var(--fg-vocal-e)*0.15))
    hue-rotate(calc(var(--wind-hue)*var(--wind-playing)*1deg))}
.ctx-strip{opacity:calc(0.4 + 0.6*var(--fg-vocal-e));
  transition:opacity .15s ease-out,filter .15s ease-out,border-color .2s ease-out;
  filter:brightness(calc(1 + var(--fg-vocal-e)*0.1));
  border-bottom:1px solid hsla(var(--bass-hue),50%,55%,calc(var(--bass-playing)*var(--bass-vel)*0.3))}
.deal-text{opacity:calc(0.3 + 0.7*var(--fg-vocal-e)) !important}

/* --- WIND: hue rotation on interactive elements, MIDI-colored when playing --- */
.deck-btn{
  filter:hue-rotate(calc(var(--wind-hue)*var(--wind-playing)*1deg + var(--wind-e)*15deg))
    brightness(calc(1 + var(--wind-vel)*0.15 + var(--wind-e)*0.1));
  transition:filter .15s ease-out}
.vibe-btn{filter:hue-rotate(calc(var(--wind-hue)*var(--wind-playing)*1deg + var(--wind-e)*10deg))}

/* --- KEYS + CHORDS: background gradient — warm on major, cool on minor --- */
body.beat-bg{
  background:linear-gradient(
    calc(180deg + var(--keys-e)*40deg + var(--chord-hue)*0.3deg),
    hsl(calc(var(--chord-hue) + var(--chord-q)*-120),
      calc(var(--chord-vel)*10% + var(--chord-density)*1.5%),
      calc(6% + var(--keys-e)*2%)),
    hsl(calc(var(--chord-q)*-20),
      calc(var(--chord-vel)*3%),
      calc(4% + var(--keys-e)*1%)));
  transition:background .3s ease-out}

/* --- KEYS: card border shimmer --- */
.last-card{border:1px solid hsla(var(--dg-card-hue, 30), 60%, 70%, calc(var(--keys-e, 0) * 0.3 + 0.08));
  transition:border-color .1s ease-out,box-shadow .1s ease-out}
.deck-btn{box-shadow:inset 0 0 calc(8px*var(--keys-e)) rgba(255,240,200,calc(var(--keys-e)*0.08)),
  0 0 calc(var(--dg-nav-glow, 2) * 1px) hsla(var(--dg-nav-hue, 30), 60%, 55%, var(--dg-nav-glowA, 0.15))}

/* --- KEYS: warm saturation + MIDI hue on text elements --- */
.c-title{filter:saturate(calc(1 + var(--keys-e)*0.4)) brightness(calc(1 + var(--keys-e)*0.06))
  hue-rotate(calc(var(--keys-hue)*var(--keys-playing)*0.5deg));
  transition:filter .15s ease-out}
.db-label{filter:brightness(calc(1 + var(--keys-e)*0.1))
  hue-rotate(calc(var(--keys-hue)*var(--keys-playing)*0.3deg))}

/* --- BG VOCAL: everything scales up + saturation cranks --- */
.chorus-active .beat-target{transform:scale(calc(1 + var(--bg-vocal-e)*0.04))}
.chorus-active .deck-btn{filter:hue-rotate(calc(var(--wind-e)*35deg))
  brightness(calc(1 + var(--bg-vocal-e)*0.12))
  saturate(calc(1 + var(--bg-vocal-e)*0.5))}
.chorus-active .last-card{
  box-shadow:0 4px 20px rgba(0,0,0,.3),
    0 0 calc(15px + 40px*var(--bg-vocal-e)) calc(2px + 12px*var(--bg-vocal-e))
      rgba(255,200,100,calc(0.1 + 0.2*var(--bg-vocal-e)));
  transform:scale(calc(1 + var(--bg-vocal-e)*0.015))}

/* --- TIER ESCALATION: progressive intensity unlock --- */
/* tier 1: elements start moving */
.tier-1 .deck-btn .db-label{text-shadow:0 0 calc(4px*var(--total-e)) rgba(255,255,255,calc(var(--total-e)*0.15))}
.tier-1 .last-card .c-title{text-shadow:0 0 calc(6px*var(--bass-e)) rgba(232,224,212,calc(var(--bass-e)*0.2))}

/* tier 2: screen gets physical (filter moved to JS applyBodyFilter) */
.tier-2{}
.tier-2 .card-slot{box-shadow:0 0 calc(12px*var(--drum-e)) calc(3px*var(--drum-e)) rgba(255,255,255,calc(0.05*var(--drum-e)))}

/* tier 3: ludicrous — screen shake, max saturation, everything breathing hard */
/* (filter moved to JS applyBodyFilter — animation stays here) */
.tier-3{
  animation:screenShake .08s infinite alternate}
.tier-3 .last-card{
  animation:cardBreath .3s ease-in-out infinite alternate}
.tier-3 .deck-btn .db-label{
  animation:textGlow .2s ease-in-out infinite alternate}

@keyframes screenShake{
  0%{transform:translate(0,0)}
  100%{transform:translate(calc(var(--kick-e)*1.5px),calc(var(--kick-e)*-1px))}
}
@keyframes cardBreath{
  0%{transform:scale(1) rotate(calc(var(--wind-e)*-0.3deg))}
  100%{transform:scale(calc(1 + var(--bg-vocal-e)*0.02)) rotate(calc(var(--wind-e)*0.3deg))}
}
@keyframes textGlow{
  0%{text-shadow:0 0 4px rgba(255,200,100,0.3)}
  100%{text-shadow:0 0 calc(8px + 8px*var(--bg-vocal-e)) rgba(255,200,100,calc(0.3 + 0.4*var(--bg-vocal-e)))}
}
/* ===== SCENE EFFECTS: dance mode cascades via group-specific --dg-GROUP-* vars ===== */
/* Each element group has its own set: --dg-card-*, --dg-nav-*, --dg-stage-*, --dg-vibe-*
   with 7 vars each: rot, sc, ty, tx, glow, glowA, hue.
   Shared body-level vars remain as --d-*: sat, bright, inv, skew, blur, con. */

/* 1. CARD — tilts, scales, bounces, glows with dance mode + stems */
.last-card{
  transform:rotate(calc(var(--dg-card-rot)*1deg + var(--wind-e)*1deg))
    scale(calc(1 + var(--dg-card-sc)*0.01 + var(--bg-vocal-e)*0.015))
    translateY(calc(var(--dg-card-ty)*1px + var(--kick-e)*-2px))
    skewX(calc(var(--d-skew)*0.2deg));
  transform-origin:50% 100%;
  filter:brightness(calc(var(--d-bright)*0.3 + 0.7))
    hue-rotate(calc(var(--dg-card-hue)*0.3deg))
    drop-shadow(0 0 calc(var(--dg-card-glow)*0.6px)
      hsla(var(--dg-card-hue),calc(var(--d-sat)*1%),55%,calc(var(--dg-card-glowA)*0.4)));
  transition:transform .12s ease-out,filter .12s ease-out}

/* 2. CARD TITLE — stretches with dance energy (scaleX avoids text rewrap) */
.c-title{
  transform:scaleX(calc(1 + var(--bg-vocal-e)*0.03 + var(--dg-card-sc)*0.0004))
    skewX(calc(var(--d-skew)*0.15deg));
  text-shadow:0 0 calc(var(--dg-card-glow)*0.4px)
    hsla(var(--dg-card-hue),60%,60%,calc(var(--dg-card-glowA)*0.3))}

/* 3. CARD ICON — spins and scales with dance mode */
.c-icon{
  transition:transform .1s ease-out,filter .1s ease-out;
  transform:rotate(calc(var(--dg-card-rot)*0.5deg + var(--wind-e)*8deg))
    scale(calc(1 + var(--dg-card-sc)*0.004 + var(--bass-e)*0.15));
  filter:drop-shadow(0 0 calc(var(--dg-card-glow)*0.3px)
    hsla(var(--dg-card-hue),70%,55%,calc(var(--dg-card-glowA)*0.5)))}

/* 4. (suit label removed — icon carries it now) */

/* 5. DECK BUTTONS — bounce, spread, glow with dance mode */
.deck-btn{
  transform:translateY(calc(var(--dg-nav-ty)*0.3px + var(--kick-e)*-3px))
    scale(calc(1 + var(--dg-nav-sc)*0.002 + var(--bass-e)*0.05));
  box-shadow:inset 0 0 calc(8px*var(--keys-e)) rgba(255,240,200,calc(var(--keys-e)*0.08)),
    0 0 calc(var(--dg-nav-glow)*0.5px) hsla(var(--dg-nav-hue),50%,55%,calc(var(--dg-nav-glowA)*0.25));
  transition:transform .08s ease-out,filter .12s ease-out,box-shadow .12s ease-out}
#deckNow{transform:translateY(calc(var(--dg-nav-ty)*0.3px + var(--kick-e)*-3px))
  translateX(calc(var(--dg-nav-tx)*-0.3px + var(--bass-e)*-4px))
  rotate(calc(var(--dg-nav-rot)*-0.1deg))
  scale(calc(1 + var(--dg-nav-sc)*0.002))}
#deckNext{transform:translateY(calc(var(--dg-nav-ty)*0.3px + var(--kick-e)*-3px))
  translateX(calc(var(--dg-nav-tx)*0.3px + var(--bass-e)*4px))
  rotate(calc(var(--dg-nav-rot)*0.1deg))
  scale(calc(1 + var(--dg-nav-sc)*0.002))}

/* 6. BUTTON LABELS — text breathes, shadow glows */
.db-label{
  transform:scale(calc(1 + var(--fg-vocal-e)*0.06))
    skewX(calc(var(--d-skew)*0.1deg));
  text-shadow:0 0 calc(var(--dg-nav-glow)*0.3px)
    hsla(var(--dg-nav-hue),50%,60%,calc(var(--dg-nav-glowA)*0.25));
  transition:transform .1s ease-out,filter .12s ease-out}

/* 7. CONTEXT STRIP — slides, border glows with dance color */
.ctx-strip{
  transform:translateX(calc(var(--dg-stage-tx)*0.2px + var(--wind-e)*-4px));
  border-bottom:1px solid hsla(var(--dg-stage-hue),50%,55%,calc(var(--dg-stage-glowA)*0.35));
  letter-spacing:calc(var(--fg-vocal-e)*0.3px);
  box-shadow:0 0 calc(var(--dg-stage-glow, 2) * 1px) hsla(var(--dg-stage-hue, 30), 50%, 50%, var(--dg-stage-glowA, 0.15))}

/* 8. EFFORT BADGE — throbs with dance + bass */
.c-effort{
  transition:transform .08s ease-out,filter .08s ease-out;
  transform:scale(calc(1 + var(--dg-card-sc)*0.003 + var(--bass-e)*0.12))
    rotate(calc(var(--dg-card-rot)*0.2deg + var(--kick-e)*4deg));
  filter:brightness(calc(var(--d-bright)*0.5 + 0.5))
    drop-shadow(0 0 calc(var(--dg-card-glow)*0.2px) hsla(var(--dg-card-hue),60%,50%,calc(var(--dg-card-glowA)*0.3)))}

/* 9. CARD BODY — 3D perspective driven by dance mode */
.last-card .c-body{perspective:200px;transform-style:preserve-3d}
.last-card .c-center{
  transform:rotateX(calc(var(--dg-card-rot)*0.08deg + var(--keys-e)*1.5deg))
    rotateY(calc(var(--d-skew)*0.1deg + var(--wind-e)*1deg));
  transition:transform .15s ease-out}

/* 10. HOME BAR — border glows dance color, lifts with kicks */
.home-bar{
  border-top:1px solid hsla(var(--dg-nav-hue),
    calc(30% + var(--dg-nav-glowA)*40%),
    calc(25% + var(--dg-nav-glowA)*25%),
    calc(var(--dg-nav-glowA)*0.5));
  transform:translateY(calc(var(--dg-nav-ty)*0.1px));
  transition:border-color .15s ease-out}

/* 11. ADD BUTTON — orbits with dance rotation, flashes with snare */
.add-btn{
  transition:transform .06s ease-out,filter .06s ease-out;
  transform:rotate(calc(var(--dg-nav-rot)*0.4deg + var(--hat-e)*6deg - var(--snare-e)*10deg))
    scale(calc(1 + var(--dg-nav-sc)*0.002 + var(--snare-e)*0.12));
  filter:brightness(calc(1 + var(--snare-e)*0.5))
    drop-shadow(0 0 calc(var(--dg-nav-glow)*0.2px) hsla(var(--dg-nav-hue),60%,55%,calc(var(--dg-nav-glowA)*0.3)))}

/* 12. VIBE BUTTONS — each reacts differently, all colored by dance */
.vibe-btn{transition:transform .1s ease-out,filter .1s ease-out,box-shadow .1s ease-out}
.vibe-btn:nth-child(1){transform:translateY(calc(var(--kick-e)*-4px + var(--dg-vibe-ty)*0.2px))
  scale(calc(1 + var(--kick-e)*0.06));
  box-shadow:0 0 calc(var(--dg-vibe-glow)*0.3px) hsla(var(--dg-vibe-hue),60%,55%,calc(var(--dg-vibe-glowA)*0.2))}
.vibe-btn:nth-child(2){transform:translateX(calc(var(--wind-e)*4px + var(--dg-vibe-tx)*0.2px))
  rotate(calc(var(--dg-vibe-rot)*0.15deg));
  box-shadow:0 0 calc(var(--dg-vibe-glow)*0.3px) hsla(calc(var(--dg-vibe-hue)+60),60%,55%,calc(var(--dg-vibe-glowA)*0.2))}
.vibe-btn:nth-child(3){transform:scale(calc(1 + var(--bass-e)*0.08 + var(--dg-vibe-sc)*0.002))
  skewX(calc(var(--d-skew)*0.15deg));
  box-shadow:0 0 calc(var(--dg-vibe-glow)*0.3px) hsla(calc(var(--dg-vibe-hue)+120),60%,55%,calc(var(--dg-vibe-glowA)*0.2))}
.vibe-btn:nth-child(4){transform:translateY(calc(var(--fg-vocal-e)*-3px + var(--dg-vibe-ty)*0.15px));
  filter:hue-rotate(calc(var(--dg-vibe-hue)*0.5deg)) brightness(calc(1 + var(--fg-vocal-e)*0.15));
  box-shadow:0 0 calc(var(--dg-vibe-glow)*0.3px) hsla(calc(var(--dg-vibe-hue)+180),60%,55%,calc(var(--dg-vibe-glowA)*0.2))}

/* 13. DEAL LOGO — massive throb + dance glow (CSS var fallback when JS dance not active) */
.deal-logo:not(.sax-mode){
  transform:translateX(-50%) scale(calc(1 + var(--dg-stage-sc)*0.004 + var(--bass-e)*0.15))
    rotate(calc(var(--dg-stage-rot)*0.4deg + var(--wind-e)*8deg));
  filter:hue-rotate(calc(var(--dg-stage-hue)*0.8deg))
    drop-shadow(0 0 calc(var(--dg-stage-glow)*1px + var(--total-e)*15px)
      hsla(var(--dg-stage-hue),70%,50%,calc(var(--dg-stage-glowA)*0.6)));
  transition:transform .1s ease-out,filter .12s ease-out}

/* 14. DEAL TEXT — shakes with dance + drums */
.deal-text{
  transform:translateX(calc(var(--dg-stage-tx)*0.2px + var(--drum-e)*(var(--snare-e) - 0.5)*3px))
    scale(calc(1 + var(--dg-stage-sc)*0.001));
  text-shadow:0 0 calc(var(--dg-stage-glow)*0.3px) hsla(var(--dg-stage-hue),50%,60%,calc(var(--dg-stage-glowA)*0.3));
  transition:transform .06s ease-out}

/* 15. STACK CARDS — glow with dance color, tilt */
.stack-card{
  transition:transform .15s ease-out,filter .12s ease-out;
  filter:brightness(calc(1 + var(--dg-card-sc)*0.001))
    drop-shadow(0 0 calc(var(--dg-card-glow)*0.2px) hsla(var(--dg-card-hue),50%,55%,calc(var(--dg-card-glowA)*0.15)))}

/* 16. HAND TITLE — breathes with dance energy */
.hand-title{
  letter-spacing:calc(1px + var(--fg-vocal-e)*1.5px + var(--dg-stage-sc)*0.02px);
  filter:brightness(calc(1 + var(--dg-stage-sc)*0.002));
  text-shadow:0 0 calc(var(--dg-stage-glow)*0.3px) hsla(var(--dg-stage-hue),50%,60%,calc(var(--dg-stage-glowA)*0.2));
  transition:letter-spacing .15s ease-out,filter .15s ease-out}

/* 17. CARD BACK — hue-shifts with dance color */
.card-back{
  filter:hue-rotate(calc(var(--dg-card-hue)*0.5deg))
    brightness(calc(1 + var(--dg-card-sc)*0.002))
    drop-shadow(0 0 calc(var(--dg-card-glow)*0.3px) hsla(var(--dg-card-hue),50%,50%,calc(var(--dg-card-glowA)*0.2)));
  transition:filter .12s ease-out}

/* 18. REFLECT BAR — slides with dance, border colored */
.reflect-bar{
  transform:translateY(calc(var(--dg-stage-ty)*0.1px + var(--fg-vocal-e)*-2px));
  border-top:1px solid hsla(var(--dg-stage-hue),40%,50%,calc(var(--dg-stage-glowA)*0.25));
  transition:transform .15s ease-out,border-color .15s ease-out}

/* 19. PAUSE BUTTON — pulses with dance glow */
.pause-btn{
  transition:transform .12s ease-out,filter .12s ease-out;
  transform:scale(calc(1 + var(--dg-nav-sc)*0.001))
    rotate(calc(var(--dg-nav-rot)*0.05deg));
  filter:brightness(calc(1 + var(--dg-nav-sc)*0.002))
    drop-shadow(0 0 calc(var(--dg-nav-glow)*0.25px)
      hsla(var(--dg-nav-hue),50%,60%,calc(var(--dg-nav-glowA)*0.2)))}

/* 20. WHO BADGE — jitters + dance color */
.who-badge{
  transition:transform .06s ease-out,filter .08s ease-out;
  transform:translate(calc(var(--dg-nav-tx)*0.1px + var(--hat-e)*(var(--snare-e) - 0.3)*2px),
    calc(var(--dg-nav-ty)*0.08px));
  filter:hue-rotate(calc(var(--dg-nav-hue)*0.2deg))
    brightness(calc(1 + var(--dg-nav-sc)*0.001))
    drop-shadow(0 0 calc(var(--dg-nav-glow)*0.15px) hsla(var(--dg-nav-hue),40%,55%,calc(var(--dg-nav-glowA)*0.15)))}

/* === SCENE-WIDE DROP SHADOW: everything gets colored shadow from dance mode === */
.card-slot{
  filter:drop-shadow(0 calc(2px + var(--dg-card-sc)*0.05px) calc(4px + var(--dg-card-glow)*0.5px)
    hsla(var(--dg-card-hue),40%,30%,calc(0.15 + var(--dg-card-glowA)*0.15)));
  transition:filter .12s ease-out}

/* === BACKGROUND: extra radial glow from dance mode === */
body.beat-bg::after{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse at 50% 80%,
    hsla(var(--dg-stage-hue),calc(var(--d-sat)*0.8%),calc(var(--dg-stage-glowA)*15%),calc(var(--dg-stage-glowA)*0.2)),
    transparent 70%);
  transition:background .2s ease-out}

/* === TIER ESCALATION: multiplies dance effects === */
.tier-2 .last-card{
  transform:rotate(calc(var(--dg-card-rot)*0.5deg + var(--wind-e)*2deg))
    scale(calc(1 + var(--dg-card-sc)*0.005 + var(--bg-vocal-e)*0.02))
    translateY(calc(var(--dg-card-ty)*0.6px + var(--kick-e)*-4px))
    skewX(calc(var(--d-skew)*0.3deg))}
.tier-2 #deckNow{transform:translateY(calc(var(--dg-nav-ty)*0.5px + var(--kick-e)*-5px))
  translateX(calc(var(--dg-nav-tx)*-0.5px + var(--bass-e)*-8px))}
.tier-2 #deckNext{transform:translateY(calc(var(--dg-nav-ty)*0.5px + var(--kick-e)*-5px))
  translateX(calc(var(--dg-nav-tx)*0.5px + var(--bass-e)*8px))}

/* tier 3: ludicrous — everything cranked, 3D card, massive glows */
.tier-3 .last-card{
  transform:rotate(calc(var(--dg-card-rot)*0.8deg + var(--wind-e)*3deg + var(--kick-e)*2deg))
    scale(calc(1 + var(--dg-card-sc)*0.008 + var(--bg-vocal-e)*0.03))
    translateY(calc(var(--dg-card-ty)*0.8px + var(--kick-e)*-6px))
    perspective(300px) rotateX(calc(var(--dg-card-rot)*0.15deg))
    skewX(calc(var(--d-skew)*0.5deg))}
.tier-3 .c-icon{
  transform:rotate(calc(var(--dg-card-rot)*1deg + var(--wind-e)*20deg))
    scale(calc(1 + var(--dg-card-sc)*0.006 + var(--bass-e)*0.3))}
.tier-3 .add-btn{
  transform:rotate(calc(var(--dg-nav-rot)*0.6deg + var(--hat-e)*12deg - var(--snare-e)*15deg))
    scale(calc(1 + var(--dg-nav-sc)*0.004 + var(--snare-e)*0.25))}

/* === CHOREOGRAPHY HOOK: lyrics-driven one-shot animations === */
@keyframes choreo-bounce-kf{0%{transform:translateY(0)}30%{transform:translateY(-8px) scale(1.08)}100%{transform:translateY(0) scale(1)}}
@keyframes choreo-exhale-kf{0%{transform:translateX(0)}25%{transform:translateX(var(--choreo-spread,10px))}100%{transform:translateX(0)}}
@keyframes choreo-glow-burst-kf{0%{filter:drop-shadow(0 0 4px #ffa830)}50%{filter:drop-shadow(0 0 25px #ffa830) brightness(1.6)}100%{filter:drop-shadow(0 0 4px #ffa830)}}
.choreo-bounce{animation:choreo-bounce-kf .4s ease-out!important}
.choreo-exhale{animation:choreo-exhale-kf .5s ease-out!important}
#deckNow.choreo-exhale{--choreo-spread:-10px}
#deckNext.choreo-exhale{--choreo-spread:10px}
.choreo-glow-burst{animation:choreo-glow-burst-kf .6s ease-out!important}

/* ===== FX LAB: toggleable visual experiments ===== */
/* Each effect activated by body.fx-* class. They layer on top of each other. */

/* --- FX 1: CHROMATIC SPLIT — red/blue channel offset on kicks --- */
.fx-chroma .last-card{
  box-shadow:
    calc(var(--kick-e)*-4px) calc(var(--kick-e)*2px) 0 rgba(255,0,50,calc(var(--kick-e)*0.35)),
    calc(var(--kick-e)*4px) calc(var(--kick-e)*-2px) 0 rgba(0,100,255,calc(var(--kick-e)*0.35)),
    0 4px 20px rgba(0,0,0,.3) !important}
.fx-chroma .deck-btn{
  box-shadow:
    calc(var(--kick-e)*-3px) calc(var(--kick-e)*1px) 0 rgba(255,0,50,calc(var(--kick-e)*0.25)),
    calc(var(--kick-e)*3px) calc(var(--kick-e)*-1px) 0 rgba(0,100,255,calc(var(--kick-e)*0.25)) !important}
.fx-chroma .c-title,.fx-chroma .db-label{
  text-shadow:
    calc(var(--kick-e)*-2px) 0 rgba(255,0,50,calc(var(--kick-e)*0.4)),
    calc(var(--kick-e)*2px) 0 rgba(0,100,255,calc(var(--kick-e)*0.4)) !important}
.fx-chroma .c-icon{
  filter:drop-shadow(calc(var(--kick-e)*-3px) 0 0 rgba(255,0,50,calc(var(--kick-e)*0.5)))
    drop-shadow(calc(var(--kick-e)*3px) 0 0 rgba(0,100,255,calc(var(--kick-e)*0.5))) !important}
.fx-chroma .deal-logo{
  filter:drop-shadow(calc(var(--kick-e)*-4px) 0 0 rgba(255,0,50,calc(var(--kick-e)*0.4)))
    drop-shadow(calc(var(--kick-e)*4px) 0 0 rgba(0,100,255,calc(var(--kick-e)*0.4))) !important}

/* --- FX 2: BEAT RIPPLES — expanding rings from screen center on beats --- */
.fx-ripple-pool{
  display:none;position:fixed;inset:0;z-index:9995;
  pointer-events:none;overflow:hidden}
.fx-ripple .fx-ripple-pool{display:block}
.fx-ring{
  position:absolute;left:50%;top:50%;
  width:20px;height:20px;border-radius:50%;
  border:2px solid hsla(var(--chord-hue,30),70%,60%,0.8);
  transform:translate(-50%,-50%) scale(1);
  opacity:0;will-change:transform,opacity}
.fx-ring.expanding{animation:rippleExpand .8s ease-out forwards}
@keyframes rippleExpand{
  0%{transform:translate(-50%,-50%) scale(1);opacity:.7;border-width:3px}
  100%{transform:translate(-50%,-50%) scale(25);opacity:0;border-width:.5px}}

/* --- FX 3: SCREEN WARP — SVG turbulence displacement (filter applied in JS) --- */
/* no CSS rules needed — filter is composed in applyBodyFilter() */

/* --- FX 4: BASS ZOOM — perspective bulge toward viewer --- */
.fx-zoom .screen.on{
  transform:scale(calc(1 + var(--bass-e)*0.025));
  transform-origin:50% 60%;
  transition:transform .06s ease-out}

/* --- FX 5: SCAN LINES — CRT horizontal lines --- */
.fx-scanlines{
  display:none;position:fixed;inset:0;z-index:9996;
  pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    transparent 0px,transparent 2px,
    rgba(0,0,0,.15) 2px,rgba(0,0,0,.15) 4px);
  mix-blend-mode:multiply;
  animation:scanScroll 8s linear infinite}
.fx-scan .fx-scanlines{
  display:block;
  opacity:calc(0.3 + var(--total-e)*0.5)}
@keyframes scanScroll{
  0%{background-position:0 0}
  100%{background-position:0 200px}}

/* --- FX 6: PRISM ECHO — rainbow dispersion shadows on cards --- */
.fx-prism .last-card{
  box-shadow:
    calc(var(--wind-e)*-6px) calc(var(--wind-e)*-3px) calc(var(--wind-e)*8px) rgba(255,0,0,calc(var(--wind-e)*0.2)),
    calc(var(--wind-e)*-3px) calc(var(--wind-e)*3px) calc(var(--wind-e)*8px) rgba(255,165,0,calc(var(--wind-e)*0.15)),
    0 calc(var(--wind-e)*5px) calc(var(--wind-e)*8px) rgba(255,255,0,calc(var(--wind-e)*0.12)),
    calc(var(--wind-e)*3px) calc(var(--wind-e)*3px) calc(var(--wind-e)*8px) rgba(0,255,0,calc(var(--wind-e)*0.1)),
    calc(var(--wind-e)*6px) calc(var(--wind-e)*-3px) calc(var(--wind-e)*8px) rgba(0,100,255,calc(var(--wind-e)*0.15)),
    calc(var(--wind-e)*4px) calc(var(--wind-e)*-5px) calc(var(--wind-e)*8px) rgba(148,0,211,calc(var(--wind-e)*0.12)) !important;
  transition:box-shadow .15s ease-out}
.fx-prism .deck-btn{
  box-shadow:
    calc(var(--wind-e)*-4px) calc(var(--wind-e)*-2px) calc(var(--wind-e)*5px) rgba(255,0,0,calc(var(--wind-e)*0.15)),
    calc(var(--wind-e)*4px) calc(var(--wind-e)*2px) calc(var(--wind-e)*5px) rgba(0,100,255,calc(var(--wind-e)*0.15)),
    0 calc(var(--wind-e)*3px) calc(var(--wind-e)*5px) rgba(0,255,0,calc(var(--wind-e)*0.1)) !important}
.fx-prism .c-title{
  text-shadow:
    calc(var(--wind-e)*-2px) calc(var(--wind-e)*-1px) rgba(255,0,0,calc(var(--wind-e)*0.3)),
    calc(var(--wind-e)*2px) calc(var(--wind-e)*1px) rgba(0,100,255,calc(var(--wind-e)*0.3)),
    0 calc(var(--wind-e)*2px) rgba(0,255,0,calc(var(--wind-e)*0.2)) !important}

/* --- FX 7: VOCAL AURORA — northern lights gradient at top of screen --- */
.fx-aurora-overlay{
  display:none;position:fixed;top:0;left:-20%;right:-20%;height:45vh;
  z-index:9997;pointer-events:none;
  background:
    radial-gradient(ellipse at 30% 0%,
      hsla(var(--fx-aurora-hue1,280),60%,40%,calc(var(--fg-vocal-e)*0.3)) 0%,
      transparent 60%),
    radial-gradient(ellipse at 70% 10%,
      hsla(var(--fx-aurora-hue2,180),50%,35%,calc(var(--fg-vocal-e)*0.25)) 0%,
      transparent 50%),
    radial-gradient(ellipse at 50% -10%,
      hsla(var(--fx-aurora-hue3,120),55%,45%,calc(var(--fg-vocal-e)*0.2)) 0%,
      transparent 70%);
  mix-blend-mode:screen;
  animation:auroraShift 12s ease-in-out infinite alternate}
.fx-aurora .fx-aurora-overlay{
  display:block;
  opacity:calc(var(--fg-vocal-e)*0.8)}
@keyframes auroraShift{
  0%{transform:translateX(-5%) scaleY(.8)}
  50%{transform:translateX(5%) scaleY(1.1)}
  100%{transform:translateX(-3%) scaleY(.9)}}

/* --- FX 8: PARTICLE BURST — starburst explosion on high-energy beats --- */
.fx-particle-pool{
  display:none;position:fixed;inset:0;z-index:43;
  pointer-events:none;overflow:hidden}
.fx-burst .fx-particle-pool{display:block}
.fx-particle{
  position:absolute;width:4px;height:4px;
  border-radius:50%;opacity:0;
  will-change:transform,opacity}
.fx-particle.bursting{animation:particleBurst var(--p-dur,.8s) ease-out forwards}
@keyframes particleBurst{
  0%{transform:translate(0,0) scale(1);opacity:.9}
  30%{opacity:.7}
  100%{transform:translate(var(--p-dx,50px),var(--p-dy,-80px)) scale(.2);opacity:0}}

/* ===== SONG ARC: narrative color world ===== */
.arc-world{
  position:fixed;inset:0;z-index:9997;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,
    hsla(var(--arc-hue,210),50%,30%,calc(var(--total-e,0)*0.08)) 0%,
    transparent 75%);
  mix-blend-mode:soft-light;
  transition:background .5s ease-out}
.arc-shift .arc-world{animation:arcShift .4s ease-out}
@keyframes arcShift{
  0%{box-shadow:inset 0 0 80px 20px hsla(var(--arc-hue,210),60%,50%,0.15)}
  100%{box-shadow:inset 0 0 80px 20px transparent}}

/* ===== TRUMPET DICK: hidden flying version (mascot at bottom is the trumpet now) ===== */
.sax-dick{display:none}
.sax-ribbon{display:none}
/* note drops */
.sax-drop-pool{position:fixed;inset:0;z-index:9;pointer-events:none;overflow:hidden}
.sax-note-drop{position:absolute;pointer-events:none;opacity:0;will-change:transform,opacity;
  filter:drop-shadow(0 0 4px var(--drop-color,#fc0)) drop-shadow(0 0 8px var(--drop-color,#fc0))}
.sax-note-drop svg{width:100%;height:100%;transform:rotate(180deg)}
.sax-note-drop.falling{animation:saxNoteFall var(--drop-dur,1.5s) ease-out forwards}
@keyframes saxNoteFall{
  0%{opacity:0;transform:translate(0,0) scale(.3)}
  8%{opacity:var(--drop-opacity,.8);transform:translate(0,-4px) scale(var(--drop-scale,1))}
  60%{opacity:calc(var(--drop-opacity,.8)*.5);transform:translate(var(--drop-dx,0px),var(--drop-dy,80px)) scale(var(--drop-scale,1))}
  100%{opacity:0;transform:translate(var(--drop-dx,0px),calc(var(--drop-dy,80px) + 30px)) scale(.5)}
}

/* ===== MOMENTS: one-shot visual events from musical structure ===== */
.shockwave{position:fixed;top:50%;left:50%;width:0;height:0;
  border-radius:50%;pointer-events:none;z-index:300;
  border:2px solid hsla(var(--d-hue,30),60%,60%,0.6);opacity:0}
.shockwave.fire{animation:shockExpand 0.6s ease-out forwards}
@keyframes shockExpand{
  0%{width:0;height:0;margin:0;opacity:0.8;border-width:3px}
  100%{width:80vw;height:80vw;margin:-40vw;opacity:0;border-width:1px}}
.bar-icon.sustained::after,.deal-logo.sustained::after{content:'';position:absolute;inset:-8px;
  border-radius:50%;border:1px solid hsla(var(--d-hue,30),50%,60%,0.4);
  animation:haloGrow 2s ease-out forwards;pointer-events:none}
@keyframes haloGrow{
  0%{inset:-4px;opacity:0.6;border-width:2px}
  100%{inset:-30px;opacity:0;border-width:1px}}
body.register-shift{animation:zoomPulse 0.25s ease-out}
@keyframes zoomPulse{0%{transform:scale(1)}40%{transform:scale(1.02)}100%{transform:scale(1)}}
body.peak-moment{animation:peakShake 0.1s infinite alternate}
body.peak-moment .last-card{box-shadow:0 0 40px 10px hsla(var(--d-hue,30),80%,50%,0.4) !important}
@keyframes peakShake{0%{transform:translate(-1px,1px)}100%{transform:translate(1px,-1px)}}
.mote-pool{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.mote{position:absolute;border-radius:50%;pointer-events:none;opacity:0;will-change:transform,opacity}
.mote.rising{animation:moteRise var(--mote-dur,4s) ease-in-out forwards}
@keyframes moteRise{
  0%{opacity:0;transform:translateY(0) scale(0.5)}
  15%{opacity:var(--mote-opacity,0.4)}
  80%{opacity:calc(var(--mote-opacity,0.4)*0.3)}
  100%{opacity:0;transform:translateY(var(--mote-dy,-200px)) translateX(var(--mote-dx,0px)) scale(0.3)}}
/* ===== HONG KONG ANIMATIONS: neon rain, harbour reflection, neon flicker ===== */

/* --- NEON RAIN: vertical streaks fall during wind/trumpet, density tied to tier --- */
.rain-pool{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.rain-streak{position:absolute;top:-10%;pointer-events:none;opacity:0;will-change:transform,opacity;
  border-radius:0 0 2px 2px}
.rain-streak.falling{animation:rainFall var(--rain-dur,1.5s) linear forwards}
@keyframes rainFall{
  0%{opacity:0;transform:translateY(0) scaleY(0.5)}
  8%{opacity:var(--rain-opacity,0.3)}
  85%{opacity:calc(var(--rain-opacity,0.3)*0.4)}
  100%{opacity:0;transform:translateY(var(--rain-dy,110vh)) scaleY(1.2)}}

/* --- HARBOUR REFLECTION: glowing mirrored band at screen bottom, ripples with bass --- */
.harbour-glow{position:fixed;bottom:0;left:0;right:0;height:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    hsla(var(--d-hue,30),50%,40%,var(--harbour-alpha,0)) 0%,
    transparent 100%);
  transition:height .3s ease-out,background .3s ease-out}
.harbour-glow::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,
    transparent 0%,
    hsla(calc(var(--d-hue,30)+40),60%,50%,calc(var(--harbour-alpha,0)*0.5)) 30%,
    hsla(var(--d-hue,30),70%,45%,calc(var(--harbour-alpha,0)*0.7)) 50%,
    hsla(calc(var(--d-hue,30)-30),60%,50%,calc(var(--harbour-alpha,0)*0.5)) 70%,
    transparent 100%);
  animation:harbourRipple 3s ease-in-out infinite alternate}
@keyframes harbourRipple{
  0%{transform:scaleX(1) translateX(-2%)}
  100%{transform:scaleX(1.04) translateX(2%)}}

/* --- NEON FLICKER: text buzz on high-energy moments --- */
@keyframes neonFlicker{
  0%{opacity:1}
  4%{opacity:0.6}
  6%{opacity:1}
  12%{opacity:0.85}
  14%{opacity:1}
  40%{opacity:1}
  42%{opacity:0.7}
  43%{opacity:1}
  100%{opacity:1}}
.tier-2 .c-title{animation:neonFlicker 3s ease-in-out infinite;
  text-shadow:0 0 calc(6px*var(--total-e)) hsla(var(--d-hue,30),60%,60%,calc(var(--total-e)*0.2)),
    0 0 calc(15px*var(--total-e)) hsla(var(--d-hue,30),50%,50%,calc(var(--total-e)*0.1))}
.tier-3 .c-title{animation:neonFlicker 1.5s ease-in-out infinite;
  text-shadow:0 0 calc(8px*var(--total-e)) hsla(var(--d-hue,30),70%,60%,calc(var(--total-e)*0.3)),
    0 0 calc(20px*var(--total-e)) hsla(var(--d-hue,30),60%,50%,calc(var(--total-e)*0.15)),
    0 0 calc(35px*var(--total-e)) hsla(var(--d-hue,30),50%,40%,calc(var(--total-e)*0.08))}
.tier-3 .db-label{animation:neonFlicker 2s ease-in-out infinite .5s}

/* --- VERTICAL LIGHT BARS: shoot up on kick at tier 2+ --- */
.light-bar-pool{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.light-bar{position:absolute;bottom:0;pointer-events:none;opacity:0;will-change:transform,opacity;
  border-radius:2px 2px 0 0}
.light-bar.shoot{animation:lightBarShoot var(--bar-dur,0.6s) ease-out forwards}
@keyframes lightBarShoot{
  0%{opacity:0;transform:translateY(0) scaleY(0)}
  15%{opacity:var(--bar-opacity,0.4);transform:translateY(0) scaleY(1)}
  60%{opacity:calc(var(--bar-opacity,0.4)*0.3);transform:translateY(var(--bar-dy,-40vh)) scaleY(0.6)}
  100%{opacity:0;transform:translateY(var(--bar-dy,-40vh)) scaleY(0.2)}}

.grain-overlay{position:fixed;inset:0;z-index:400;pointer-events:none;
  opacity:calc(var(--tier,0) * 0.02);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.4'/%3E%3C/svg%3E");
  background-size:150px 150px}

/* === LYRIC LAYER: full-screen word scatter === */
.lyric-layer{position:fixed;inset:0;z-index:5;pointer-events:none;
  overflow:hidden;opacity:0;transition:opacity .3s}
.lyric-layer.on{opacity:1}

/* base word element (pool slot) */
.lyric-word{position:absolute;
  font-family:'Bebas Neue','Outfit',Arial Black,sans-serif;
  text-transform:uppercase;letter-spacing:.06em;
  pointer-events:none;opacity:0;
  will-change:transform,opacity;
  transform:translate(-50%,-50%);white-space:nowrap}

/* --- NORMAL: subliminal whispers scattered across screen --- */
.lyric-word.lw-normal{font-size:clamp(.9rem,3vw,1.6rem);font-weight:400;
  color:rgba(255,200,140,.6);
  -webkit-text-stroke:.5px rgba(255,160,48,.15);
  text-shadow:0 0 4px rgba(255,136,0,.1)}
.lyric-word.lw-normal.lw-enter{animation:wordWhisper 1.6s ease-out forwards}
@keyframes wordWhisper{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7);filter:blur(4px)}
  15%{opacity:.5;filter:blur(1px)}
  40%{opacity:.7;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
  70%{opacity:.5}
  100%{opacity:0;transform:translate(-50%,calc(-50% - 10px)) scale(.95);filter:blur(2px)}}

/* --- ANTHEM: DICKS OUT FOR NOLA — screen-filling neon --- */
.lyric-word.lw-anthem{font-size:clamp(3rem,14vw,6rem);font-weight:400;
  color:#ffb840;
  -webkit-text-stroke:2px rgba(255,200,70,.8);
  letter-spacing:.12em;
  text-shadow:0 0 8px #ff8800,0 0 20px rgba(255,110,20,.8),
    0 0 40px rgba(255,70,0,.4),0 0 80px rgba(255,40,0,.2)}
.lyric-word.lw-anthem.lw-enter{animation:anthemSlam 2.2s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes anthemSlam{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-5deg);
    filter:brightness(.3) blur(6px)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(1deg);
    filter:brightness(1.8) drop-shadow(0 0 30px rgba(255,170,50,.9)) blur(0)}
  25%{transform:translate(-50%,-50%) scale(.95) rotate(-.5deg);filter:brightness(1.2)}
  40%{transform:translate(-50%,-50%) scale(1.02);filter:brightness(1)}
  75%{opacity:1}
  100%{opacity:0;transform:translate(-50%,calc(-50% + 5px)) scale(.98);
    filter:brightness(.8) blur(3px)}}
.tier-2 .lyric-word.lw-anthem,.tier-3 .lyric-word.lw-anthem{
  text-shadow:0 0 8px #ff8800,0 0 20px rgba(255,110,20,.9),
    0 0 45px rgba(255,70,0,.6),0 0 100px rgba(255,40,0,.3),
    2px 0 8px rgba(0,200,255,.1),-2px 0 8px rgba(255,0,100,.1)}

/* --- WOO: smoke drifting upward --- */
.lyric-word.lw-woo{font-size:clamp(1.5rem,6vw,3rem);font-weight:400;
  color:rgba(255,220,180,.5);
  letter-spacing:calc(.1em + var(--wind-e,0) * .5em);
  text-shadow:0 0 6px rgba(255,160,80,.3),0 0 20px rgba(255,100,40,.15)}
.lyric-word.lw-woo.lw-enter{animation:wooSmoke 3.5s ease-out forwards}
@keyframes wooSmoke{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.8);filter:blur(3px)}
  10%{opacity:.6;filter:blur(1px)}
  30%{opacity:.5;transform:translate(-50%,calc(-50% - 15vh)) scale(1.1);filter:blur(0)}
  60%{opacity:.3;transform:translate(-50%,calc(-50% - 35vh)) scale(1.3);letter-spacing:.3em}
  100%{opacity:0;transform:translate(-50%,calc(-50% - 55vh)) scale(1.5);
    filter:blur(6px);letter-spacing:.5em}}

/* --- CHANT: pulsing cluster --- */
.lyric-word.lw-chant{font-size:clamp(1.2rem,5vw,2.4rem);font-weight:400;
  color:rgba(255,180,60,.8);
  -webkit-text-stroke:1px rgba(255,160,48,.4);
  text-shadow:0 0 6px rgba(255,136,0,.4),0 0 14px rgba(255,80,0,.2)}
.lyric-word.lw-chant.lw-enter{animation:chantPulse 1.2s ease-in-out forwards}
@keyframes chantPulse{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  15%{opacity:.9;transform:translate(-50%,-50%) scale(1.1)}
  30%{transform:translate(-50%,-50%) scale(.95)}
  50%{opacity:.8;transform:translate(-50%,-50%) scale(1.05)}
  70%{transform:translate(-50%,-50%) scale(.98)}
  85%{opacity:.6}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
.lyric-word.lw-chant.beat{transform:translate(-50%,-50%) scale(1.15) !important;
  text-shadow:0 0 10px rgba(255,136,0,.8),0 0 25px rgba(255,80,0,.5) !important;
  transition:transform .06s,text-shadow .06s}

/* --- shared exit --- */
.lyric-word.lw-exit{opacity:0 !important;
  transform:translate(-50%,-50%) scale(.85) !important;
  filter:blur(4px) !important;
  transition:opacity .35s,transform .35s,filter .35s !important}

/* tier intensity scaling */
.tier-0 .lyric-word{opacity:.6}
.tier-2 .lyric-word.lw-normal{font-size:clamp(1rem,3.5vw,1.8rem)}
.tier-3 .lyric-word.lw-normal{font-size:clamp(1.1rem,4vw,2rem);color:rgba(255,200,140,.8)}
.tier-3 .lyric-word.lw-anthem{font-size:clamp(3.5rem,16vw,7rem)}

/* === LYRIC FX: word-driven visual behaviors === */

/* lx-drops: words fire from mascot tip */
.lx-word-drop{position:fixed;pointer-events:none;
  font-family:'Bebas Neue','Outfit',Arial Black,sans-serif;
  font-size:clamp(.7rem,2.5vw,1.2rem);font-weight:400;
  text-transform:uppercase;letter-spacing:.08em;
  opacity:0;transform:translate(-50%,-50%);white-space:nowrap;
  text-shadow:0 0 6px currentColor,0 0 14px currentColor;
  z-index:6;will-change:transform,opacity}
.lx-word-drop.dropping{animation:wordDrop 1.4s ease-out forwards}
@keyframes wordDrop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  10%{opacity:.9;transform:translate(-50%,-50%) scale(1.1)}
  30%{opacity:.7;transform:translate(calc(-50% + var(--drop-dx)*.3),calc(-50% + var(--drop-dy)*.4)) scale(1)}
  70%{opacity:.3;transform:translate(calc(-50% + var(--drop-dx)*.8),calc(-50% + var(--drop-dy)*.8)) scale(.9)}
  100%{opacity:0;transform:translate(calc(-50% + var(--drop-dx)),calc(-50% + var(--drop-dy))) scale(.7)}}

/* lx-glow: cards glow gold during anthem */
.lx-glow[data-lyric-type="anthem"] .card-slot,
.lx-glow[data-lyric-type="anthem"] .last-card{
  box-shadow:0 0 20px rgba(255,170,50,.3),inset 0 0 12px rgba(255,136,0,.1);
  transition:box-shadow .3s ease-out}
.lx-glow[data-lyric-type="anthem"] .deck-btn{
  box-shadow:0 0 12px rgba(255,170,50,.2);transition:box-shadow .3s ease-out}

/* lx-shadow: anthem words deepen all shadows */
.lx-shadow .card-slot,.lx-shadow .last-card{
  box-shadow:0 calc(4px + var(--lx-shadow-depth,0)*1px) calc(12px + var(--lx-shadow-depth,0)*2px) rgba(0,0,0,calc(.2 + var(--lx-shadow-depth,0)*.03));
  transition:box-shadow .4s ease-out}

/* lx-grain: boost grain overlay during lyrics */
.lx-grain .grain-overlay{
  opacity:calc(var(--tier,0) * 0.02 + var(--lx-grain-boost,0));
  transition:opacity .3s}

.deal-text{font-family:'Outfit',sans-serif;font-size:.85rem;color:#555;letter-spacing:.08em;margin-top:16px}
.deal-sub{font-family:'Outfit',sans-serif;font-size:.6rem;color:#444;letter-spacing:.04em;margin-top:4px}

/* ===== HAND (swipe single card) ===== */
.hand-title{font-family:'Outfit',sans-serif;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:#555;font-weight:600;margin-top:8px}
.swipe-area{
  position:relative;flex:1;width:100%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none;
  padding:8px 20px 0;
}

/* card */
.card-slot{
  position:absolute;
  width:calc(100% - 40px);max-width:380px;
  aspect-ratio:4/5;
  perspective:800px;
  border-radius:12px;
  transform-origin:center center;
  transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s ease,box-shadow .12s ease-out,filter .12s ease-out;
  will-change:transform,opacity;
}
.card-slot.fly-left{transform:translateX(-120%) rotate(-15deg)!important;opacity:0;transition:transform .35s ease,opacity .3s ease}
.card-slot.fly-up{transform:translateY(-120%) scale(.9)!important;opacity:0;transition:transform .35s ease,opacity .3s ease}
.card-slot.fly-right{transform:translateX(120%) rotate(15deg)!important;opacity:0;transition:transform .35s ease,opacity .3s ease}
.card-slot.enter-right{animation:enterRight .3s ease forwards}
.card-slot.enter-left{animation:enterLeft .3s ease forwards}
.card-slot.enter-up{animation:enterUp .3s ease forwards}
@keyframes enterRight{0%{opacity:0;transform:translateX(80%) rotate(8deg)}100%{opacity:1;transform:translateX(0) rotate(0)}}
@keyframes enterLeft{0%{opacity:0;transform:translateX(-80%) rotate(-8deg)}100%{opacity:1;transform:translateX(0) rotate(0)}}
@keyframes enterUp{0%{opacity:0;transform:scale(.9) translateY(30px)}100%{opacity:1;transform:scale(1) translateY(0)}}
/* warm → fresh card swap */
.card-swap{animation:cardSwapOut .3s ease forwards}
.card-swap-in{animation:cardSwapIn .35s ease forwards}
@keyframes cardSwapOut{0%{opacity:1;filter:brightness(1)}100%{opacity:.4;filter:brightness(1.6)}}
@keyframes cardSwapIn{0%{opacity:.4;filter:brightness(1.6)}100%{opacity:1;filter:brightness(1)}}

/* === CARD DESTRUCTION EFFECTS === */

/* destroy toast */
.destroy-toast{
  position:fixed;bottom:100px;left:50%;transform:translateX(-50%);z-index:10001;
  background:rgba(0,0,0,.92);border:1px solid rgba(255,255,255,.15);border-radius:12px;
  padding:8px 18px;font-family:Georgia,'Times New Roman',serif;font-style:italic;
  color:rgba(255,255,255,.85);font-size:.7rem;text-align:center;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .2s ease;pointer-events:none;white-space:nowrap;
}
.destroy-toast.on{opacity:1}

/* screen shake */
.screen-shake{animation:screenShake .3s ease-out}
@keyframes screenShake{
  0%,100%{transform:translate(0)}
  15%{transform:translate(-5px,3px)}
  30%{transform:translate(4px,-4px)}
  45%{transform:translate(-3px,2px)}
  60%{transform:translate(3px,-2px)}
  75%{transform:translate(-2px,1px)}
}

/* flash on explode */
.destroy-flash{animation:destroyFlash .12s ease-out}
@keyframes destroyFlash{
  0%{filter:brightness(3);opacity:1}
  100%{filter:brightness(1);opacity:1}
}

/* burn: fire overlay climbs, card chars, embers rise */
.destroy-flush,.destroy-crumple{transform-style:flat !important}
.destroy-flush .card-flip,.destroy-crumple .card-flip{transform:rotateY(180deg) !important;transform-style:flat !important}
.destroy-fire{
  background:linear-gradient(to top,
    rgba(255,220,80,0.95) 0%,
    rgba(255,130,0,0.92) 8%,
    rgba(255,60,0,0.8) 22%,
    rgba(220,20,0,0.6) 42%,
    rgba(80,0,0,0.3) 62%,
    transparent 82%);
  clip-path:inset(100% 0 0 0);
}
@keyframes burnFireClimb{
  0%{clip-path:inset(100% 0 0 0);opacity:0.8}
  15%{clip-path:inset(78% 0 0 0);opacity:1}
  40%{clip-path:inset(40% 0 0 0);opacity:1}
  70%{clip-path:inset(8% 0 0 0);opacity:0.9}
  100%{clip-path:inset(0);opacity:0.5}
}
.destroy-flame{
  background:linear-gradient(to top,
    rgba(255,255,120,0.6) 0%,
    rgba(255,180,40,0.45) 18%,
    rgba(255,80,0,0.25) 42%,
    transparent 68%);
}
@keyframes flameFlicker{
  0%{opacity:0.4;transform:scaleX(0.92) scaleY(0.95) translateY(2%)}
  100%{opacity:0.9;transform:scaleX(1.08) scaleY(1.05) translateY(-2%)}
}
@keyframes burnGlow{
  0%{opacity:0;transform:scale(0.7)}
  20%{opacity:1;transform:scale(1.15)}
  60%{opacity:0.7;transform:scale(1.05)}
  100%{opacity:0;transform:scale(0.5)}
}

/* vaporize: white-hot flash */
@keyframes vapFlash{
  0%{opacity:0;transform:scale(0.8)}
  25%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.4)}
}

/* flush: spiral down the drain */
.destroy-flush{
  animation:flushSpiral var(--flush-dur,800ms) ease-in forwards;
  transform-origin:center center;
}
@keyframes flushSpiral{
  0%{transform:rotate(0) scale(1);opacity:1}
  30%{transform:rotate(180deg) scale(.75);opacity:.9}
  60%{transform:rotate(540deg) scale(.4);opacity:.6}
  85%{transform:rotate(900deg) scale(.15);opacity:.3}
  100%{transform:rotate(1080deg) scale(0) translateY(80px);opacity:0}
}

/* flush vortex */
.destroy-vortex{
  border-radius:50%;
  background:radial-gradient(circle,rgba(100,140,200,.15) 0%,rgba(60,80,120,.08) 40%,transparent 70%);
  animation:vortexSpin var(--flush-dur,800ms) linear forwards;
}
@keyframes vortexSpin{
  0%{transform:rotate(0) scale(.5);opacity:0}
  20%{opacity:1}
  80%{opacity:.6}
  100%{transform:rotate(720deg) scale(1.2);opacity:0}
}

/* crumple: squish + toss */
.destroy-crumple{
  animation:crumpleToss var(--crumple-dur,750ms) ease-in forwards;
  transform-origin:center bottom;
}
@keyframes crumpleToss{
  0%{transform:scale(1,1) rotate(0);filter:brightness(1)}
  25%{transform:scale(.7,.85) rotate(-3deg);filter:brightness(.9)}
  45%{transform:scale(.5,.6) rotate(-8deg);filter:brightness(.7)}
  100%{transform:scale(.3,.35) rotate(-35deg) translateX(-250px) translateY(120px);filter:brightness(.5);opacity:0}
}

/* dots */

.card-flip{
  width:100%;height:100%;position:relative;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.card-flip.flipped{transform:rotateY(180deg)}
.card-back,.card-face{
  position:absolute;top:0;left:0;width:100%;height:100%;
  border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.card-back{
  background:linear-gradient(145deg,#111,#0a0a0a);
  border:2px solid #222;display:flex;align-items:center;justify-content:center;color:#fff;
}
.card-back svg{width:40px;height:auto;opacity:.12}
.card-face{
  background:#f5f2ea;border:2px solid #d5d0c8;transform:rotateY(180deg);
  display:flex;flex-direction:column;padding:28px 28px 22px;
  box-shadow:0 6px 24px rgba(0,0,0,.5);overflow:hidden;
  font-family:'Outfit',sans-serif;
}
/* swipe card face sizes */
.card-face .c-icon{font-size:2.8rem;padding:12px 0 8px}
.card-face .c-title-row{gap:6px}
.card-face .c-center{padding:0 16px}
.card-face .c-title{font-size:1.35rem;line-height:1.25;margin-bottom:10px}
.card-face .c-body{font-size:1.02rem;line-height:1.6;color:#444}
.card-face .c-bottom{margin-top:auto;padding-top:10px}
.card-face .c-effort{font-size:.52rem;letter-spacing:.06em}

/* === DIRECTION FLIP — location pin flips card to show walking directions === */
.dir-flip-wrap{
  flex:1;position:relative;
  perspective:600px;
}
.dir-flip-inner{
  width:100%;height:100%;position:relative;
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.dir-flip-inner.dir-flipped{transform:rotateY(180deg)}
.dir-front,.dir-back{
  position:absolute;top:0;left:0;width:100%;height:100%;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.dir-front{display:flex;flex-direction:column;transform:rotateY(0deg)}
.dir-back{
  transform:rotateY(180deg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:20px 16px;text-align:center;
  background:#f5f2ea;border-radius:inherit;
}
.dir-back-label{
  font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:#aaa;margin-bottom:10px;
}
.dir-back-text{
  font-size:.82rem;line-height:1.5;color:#333;max-width:220px;
  font-family:'Outfit',sans-serif;
}
.dir-back-pin{
  margin-top:auto;padding-top:12px;
  font-size:1rem;cursor:pointer;opacity:.5;
  transition:opacity .2s;
}
.dir-back-pin:hover{opacity:.8}
/* location pin icon — lower-left of card front */
.loc-pin{
  cursor:pointer;font-size:.75rem;line-height:1;
  color:#aaa;opacity:.7;transition:opacity .2s,color .2s;
  position:absolute;bottom:10px;left:12px;z-index:2;
}
.loc-pin:hover,.loc-pin:active{opacity:1;color:#e44}
/* inside card-face (swipe cards) */
.card-face .loc-pin{bottom:22px;left:28px}
/* inside history expanded cards */
.h-card .loc-pin{bottom:8px;left:10px}
/* inside stack cards */
.stack-card .loc-pin{bottom:8px;left:10px;font-size:.6rem}

/* inline location pin — sits next to effort text */
.loc-pin-inline{
  cursor:pointer;display:inline-flex;align-items:center;
  vertical-align:middle;margin-right:3px;
  color:#aaa;opacity:.7;transition:opacity .2s,color .2s;
}
.loc-pin-inline:hover,.loc-pin-inline:active{opacity:1;color:#e44}
.loc-pin-inline svg{width:.65em;height:.9em;vertical-align:-.05em;fill:currentColor}

/* suit colors */
/* suit label removed — suit identity carried by emoji + color */


.swipe-hint{font-family:'Outfit',sans-serif;font-size:.44rem;letter-spacing:.12em;text-transform:uppercase;color:#333;text-align:center;padding:4px 0}
.hand-bottom{display:flex;flex-direction:column;align-items:center;gap:6px;padding-bottom:12px}

/* vibe card in swipe stream */
.vibe-card{
  width:calc(100% - 40px);max-width:380px;aspect-ratio:4/5;
  background:linear-gradient(165deg,#151515,#0d0d0d);
  border:1.5px solid #2a2a2a;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 28px;text-align:center;
  font-family:'Outfit',sans-serif;
  box-shadow:0 8px 32px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03);
  animation:enterUp .4s ease forwards;
}
.vibe-card .vc-mascot{color:#fff;opacity:.15;margin-bottom:16px}
.vibe-card .vc-mascot svg{width:36px;height:auto}
.vibe-card .vc-pair{width:100%;margin-bottom:18px}
.vibe-card .vc-q{
  font-size:1.1rem;font-weight:800;letter-spacing:-.01em;
  color:#eee;margin-bottom:10px;line-height:1.3;
}
.vibe-card .vc-opts{display:flex;justify-content:center;gap:12px}
.vibe-card .vc-input{
  width:100%;max-width:280px;padding:14px 18px;margin-top:4px;
  background:rgba(0,0,0,.3);border:1px solid #2a2a2a;border-radius:12px;
  font-family:'Outfit',sans-serif;font-size:.85rem;color:#ccc;
  outline:none;text-align:center;
}
.vibe-card .vc-input::placeholder{color:#444}
.vibe-card .vc-input:focus{border-color:#555}
.vibe-btn{
  font-family:'Outfit',sans-serif;font-size:.85rem;font-weight:600;
  letter-spacing:.02em;color:#ccc;
  background:rgba(255,255,255,.03);border:1.5px solid #3a3a3a;border-radius:24px;
  padding:14px 22px;cursor:pointer;
  transition:all .15s ease;
  flex:1 1 0;min-width:100px;max-width:160px;
  -webkit-tap-highlight-color:transparent;
}
.vibe-btn:active{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
.vibe-btn.picked{border-color:#fff;color:#fff;transform:scale(1.05);background:rgba(255,255,255,.1)}
.vibe-btn.faded{opacity:.2;transform:scale(.95);pointer-events:none}
.splat{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;pointer-events:none;animation:splatOut .45s ease-out forwards}
@keyframes splatOut{0%{opacity:.9;transform:scale(1) translate(0,0)}100%{opacity:0;transform:scale(.5) translate(var(--sx),var(--sy))}}

.hand-close{
  display:none;position:fixed;top:12px;right:14px;z-index:41;
  font-family:Georgia,serif;font-size:.9rem;
  color:#444;background:none;border:none;cursor:pointer;
  padding:4px 8px;
}
.hand-close:hover{color:#fff}

/* === DESKTOP: show all cards + vibe at once === */
@media(min-width:900px){
  .swipe-area{
    flex-direction:row;gap:16px;justify-content:center;align-items:center;
    overflow:visible;padding:20px 24px;
  }
  .swipe-area .card-slot{
    position:relative;
    width:0;flex:1 1 0;max-width:300px;
  }
  .swipe-area .vibe-card{
    width:0;flex:1 1 0;max-width:300px;
    aspect-ratio:4/5;
  }
  .card-face .c-icon{font-size:1.8rem;padding:4px 0 4px}
  .card-face .c-title{font-size:1.1rem;margin-bottom:8px}
  .card-face .c-body{font-size:.82rem;line-height:1.5}
  .card-face .c-center{padding:0 8px}
  .card-face{padding:20px 20px 16px}
  .hand-bottom{display:none}
  .hand-close{display:block}
  /* dev sheet: side panel on desktop */
  .dev-sheet{
    bottom:auto;top:40px;right:8px;left:auto;
    width:320px;max-height:calc(100vh - 60px);
    border-radius:12px;border:1px solid #333;
    transform:translateY(-10px);opacity:0;
    transition:transform .2s ease,opacity .2s ease;
  }
  .dev-sheet.on{transform:translateY(0);opacity:1}
  .dev-sheet-backdrop{display:none !important}
  .dev-sheet-handle{display:none}
}

/* celebration */
.cele{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:50}
.cele-dick{position:absolute;color:#222;opacity:0;transform-origin:center}
.cele-dick svg{width:36px;height:auto}
.cele-dick.appear{animation:dickAppear .5s ease forwards}
.cele-dick.burst{animation:dickBurst .4s ease forwards}
.cele-dick:nth-child(1){--ox:-70px;--ang:-18deg}
.cele-dick:nth-child(2){--ox:0px;--ang:0deg}
.cele-dick:nth-child(3){--ox:70px;--ang:18deg}
@keyframes dickAppear{
  0%{opacity:0;transform:translate(var(--ox),-80px) scale(.3) rotate(var(--ang))}
  100%{opacity:.9;transform:translate(var(--ox),-20px) scale(1) rotate(var(--ang))}
}
@keyframes dickBurst{
  0%{opacity:.9;transform:translate(var(--ox),-20px) scale(1) rotate(var(--ang))}
  100%{opacity:0;transform:translate(var(--ox),-20px) scale(2) rotate(var(--ang))}
}
.cele-drop{position:absolute;opacity:0;width:10px;height:14px}
.cele-drop svg{width:100%;height:100%;fill:#222;transform:rotate(180deg)}
.cele-drop.fall{animation:celeDrop 1.4s ease-out forwards;animation-delay:var(--del)}
@keyframes celeDrop{
  0%{opacity:0;transform:translate(0,0) scale(.5) rotate(0deg)}
  12%{opacity:.7;transform:translate(0,-5px) scale(1) rotate(var(--rot))}
  70%{opacity:.3;transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--rot))}
  100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) - 8px)) scale(.7) rotate(var(--rot))}
}

/* reflection — sticky note below card + bottom bar */
.reflect-tap{
  text-align:center;
  margin-top:-4px;position:relative;z-index:5;
  font-family:'Outfit',sans-serif;font-size:.78rem;color:#7a7050;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  line-height:1.45;width:200px;
  padding:10px 16px 9px;
  background:linear-gradient(180deg,#f5edd0 0%,#faf3d8 100%);
  border-radius:0 0 3px 3px;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  transition:transform .15s;
  transform:rotate(-.4deg);
}
.reflect-tap:active{transform:rotate(-.4deg) scale(.97)}
.reflect-tap.has-note{
  color:#5c5230;font-style:italic;
  background:linear-gradient(180deg,#f0e8c0 0%,#f7f0cc 100%);
}
/* bottom bar — warm paper input, keyboard-friendly */
.reflect-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:70;
  background:linear-gradient(180deg,#f7f0d0 0%,#faf4da 100%);
  border-top:1px solid #e5ddb8;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:6px;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  font-family:'Outfit',sans-serif;
  box-shadow:0 -4px 16px rgba(0,0,0,.3);
}
.reflect-bar.open{transform:translateY(0)}
.reflect-bar .rb-prompt{
  font-size:1.05rem;color:#5c5230;line-height:1.35;text-align:left;
  font-weight:500;letter-spacing:-.01em;
}
.reflect-bar .rb-icon{margin-right:2px}
.reflect-bar .rb-row{display:flex;align-items:center;gap:10px}
.reflect-bar .rb-input{
  flex:1;min-width:0;
  background:rgba(255,255,255,.5);border:1px solid #d5cc9e;border-radius:20px;
  color:#3a3520;font-family:'Outfit',sans-serif;font-size:.9rem;
  padding:11px 18px;outline:none;
}
.reflect-bar .rb-input::placeholder{color:#c5b890;font-style:italic}
.reflect-bar .rb-input:focus{border-color:#a89860;background:rgba(255,255,255,.7)}
.reflect-bar .rb-send{
  background:none;border:1.5px solid #c5b880;border-radius:50%;
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  color:#8a7e58;cursor:pointer;flex-shrink:0;padding:0;
}
.reflect-bar .rb-send .rb-mascot{display:flex;align-items:center;justify-content:center}
.reflect-bar .rb-send .rb-mascot svg{width:22px;height:auto;color:#8a7e58}
.reflect-bar .rb-send:active{background:rgba(255,255,255,.3);border-color:#a89860}
.reflect-bar .rb-send:active .rb-mascot svg{color:#5c5230}

/* identity picker — first load */
.id-pick{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:80;
  background:#0d0d0d;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;
  font-family:'Outfit',sans-serif;
}
.id-pick .id-q{font-size:1.1rem;color:#666;font-weight:600;letter-spacing:.02em}
.id-pick .id-btn{
  font-family:'Outfit',sans-serif;font-size:1.3rem;font-weight:800;
  color:#ccc;background:none;border:1.5px solid #333;border-radius:28px;
  padding:16px 44px;cursor:pointer;
  transition:all .15s;min-width:180px;
  text-transform:lowercase;
}
.id-pick .id-btn:active{background:#222;color:#fff;border-color:#555}

/* confirm face — card flips back to reveal */
.card-confirm{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:28px 24px;
  font-family:'Outfit',sans-serif;
}
.card-confirm .co-icon{font-size:3.2rem;margin-bottom:16px}
.card-confirm .co-title{font-size:1.4rem;font-weight:800;color:#eee;line-height:1.3;margin-bottom:14px}
.card-confirm .co-nudge{font-size:1rem;color:#999;line-height:1.5;max-width:260px;margin-bottom:28px;font-style:italic}
.card-confirm .co-actions{display:flex;align-items:center;gap:32px}
.card-confirm .co-lock{
  background:none;border:none;cursor:pointer;
  color:#4caf50;padding:16px;
  font-family:'Outfit',sans-serif;font-size:3rem;
  transition:all .15s;line-height:1;
}
.card-confirm .co-lock:active{color:#2e7d32}
.card-confirm .co-nah{
  font-family:'Outfit',sans-serif;font-size:3rem;
  color:#e53935;background:none;border:none;cursor:pointer;
  padding:16px;line-height:1;
}
.card-confirm .co-nah:active{color:#b71c1c}

/* who badge on home — next to dev fab */
.who-badge{
  position:fixed;top:12px;right:52px;z-index:100;
  font-family:'Outfit',sans-serif;font-size:.55rem;font-weight:600;
  color:#444;letter-spacing:.1em;text-transform:lowercase;
  cursor:pointer;padding:4px 12px;
  border:1px solid #1a1a1a;border-radius:10px;background:#0d0d0d;
}
.who-badge:active{color:#888;border-color:#333}

/* === DIAGNOSTIC MODE === */
.diag-tag{
  position:fixed;z-index:99999;pointer-events:none;
  font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;line-height:1;
  color:#fff;background:#0af;
  border-radius:3px;padding:3px 6px 2px;white-space:nowrap;
  box-shadow:0 1px 4px rgba(0,0,0,.5);
  transform:translate(-50%,-50%);
}
.diag-tag::before{
  content:attr(data-num);
  display:inline-block;margin-right:4px;
  background:rgba(0,0,0,.3);border-radius:2px;padding:1px 4px;
  font-size:9px;
}
.diag-ring{
  position:fixed;z-index:99998;pointer-events:none;
  border:2px solid #0af;border-radius:4px;
  box-shadow:0 0 0 1px rgba(0,0,0,.4),inset 0 0 0 1px rgba(0,0,0,.2);
}
.diag-nav{
  position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:100000;
  display:flex;align-items:center;gap:8px;
  background:rgba(0,0,0,.92);border:1px solid #0af;border-radius:20px;
  padding:6px 14px;
  font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;color:#0af;
  box-shadow:0 4px 16px rgba(0,0,0,.6);
  pointer-events:auto;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.diag-nav button{
  background:none;border:1px solid #0af;border-radius:12px;
  color:#0af;font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;
  padding:4px 12px;cursor:pointer;
}
.diag-nav button:active{background:#0af;color:#000}
.diag-nav .diag-title{
  min-width:140px;text-align:center;letter-spacing:.04em;
}
.diag-nav .diag-close{
  border:none;font-size:16px;padding:2px 6px;margin-left:4px;color:#666;
}

/* === NOTICE TOOL === */
.notice-actions{display:flex;gap:6px;flex-wrap:wrap}
.notice-target{
  font-family:'Outfit',monospace;font-size:.6rem;color:#f84;
  padding:6px 8px;background:#1a1200;border:1px solid #332800;border-radius:4px;
  margin-bottom:6px;word-break:break-all;line-height:1.4;
}
.notice-target .nt-selector{color:#888;display:block;margin-top:2px;font-size:.5rem}
.notice-target .nt-css-vars{color:#666;display:block;margin-top:4px;font-size:.5rem;font-family:monospace}
.notice-input{
  width:100%;background:#111;border:1px solid #333;border-radius:4px;
  color:#ddd;font-family:'Outfit',sans-serif;font-size:.75rem;
  padding:8px;resize:vertical;outline:none;
}
.notice-input:focus{border-color:#f84}
.notice-meta{
  font-size:.5rem;color:#555;margin:4px 0 6px;font-family:monospace;
}
.notice-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto}
.notice-card{
  background:#111;border:1px solid #222;border-radius:4px;padding:8px;
  font-size:.65rem;line-height:1.4;
}
.notice-card .nc-text{color:#ddd;margin-bottom:4px;white-space:pre-wrap}
.notice-card .nc-element{color:#f84;font-family:monospace;font-size:.55rem}
.notice-card .nc-time{color:#555;font-family:monospace;font-size:.5rem;margin-top:4px}
.notice-card .nc-song{color:#88f;font-size:.5rem}
.notice-card .nc-delete{
  float:right;background:none;border:none;color:#555;cursor:pointer;font-size:.6rem;padding:2px 4px;
}
.notice-card .nc-delete:hover{color:#f44}

/* selection overlay */
.notice-selecting{cursor:crosshair!important}
.notice-selecting *{cursor:crosshair!important}
.notice-highlight{
  outline:2px solid #f84!important;
  outline-offset:2px!important;
  box-shadow:0 0 12px rgba(255,136,68,.4)!important;
}
.notice-select-banner{
  position:fixed;top:0;left:0;right:0;z-index:100001;
  background:#f84;color:#000;text-align:center;
  font-family:'Outfit',sans-serif;font-size:.7rem;font-weight:700;
  padding:6px;letter-spacing:.08em;
}

/* ─── Turn overlay (owl-style build card) ─── */
.turn-overlay{
  display:none;position:fixed;inset:0;z-index:10000;
  background:rgba(0,0,0,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  align-items:center;justify-content:center;
  transition:opacity .3s ease;
}
.turn-overlay.on{display:flex}
.turn-overlay.hiding{opacity:0;pointer-events:none}
.turn-card{
  background:#111;border:1px solid rgba(255,255,255,.1);border-radius:16px;
  padding:24px 26px 20px;max-width:380px;width:90vw;max-height:85vh;overflow-y:auto;
  font-family:'Outfit',sans-serif;
}
.turn-version{
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.turn-version h1{
  font-family:'Bebas Neue',sans-serif;font-size:1.3rem;color:#fff;
  letter-spacing:.08em;margin:0;
}
.turn-version .turn-scope{
  font-size:.5rem;padding:3px 8px;background:rgba(255,136,68,.15);
  color:#f84;border-radius:6px;font-weight:600;letter-spacing:.05em;
}
.turn-section{margin-bottom:16px}
.turn-label{
  font-size:.5rem;font-weight:600;color:rgba(255,255,255,.35);
  text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px;
}
.turn-quote{
  font-size:.7rem;color:rgba(255,255,255,.5);line-height:1.6;
  padding-left:10px;border-left:2px solid rgba(255,136,68,.3);
  font-style:italic;
}
.turn-changes{
  font-size:.65rem;color:rgba(255,255,255,.75);line-height:1.6;
  list-style:none;padding:0;margin:0;
}
.turn-changes li{margin-bottom:5px;padding-left:12px;position:relative}
.turn-changes li::before{content:'→';position:absolute;left:0;color:#f84;font-size:.55rem}
.turn-reflection{
  font-size:.65rem;color:#f84;background:rgba(255,136,68,.08);
  padding:8px 12px;border-radius:8px;line-height:1.5;font-style:italic;
}
.turn-footer{display:flex;gap:8px;margin-top:16px}
.turn-footer button{
  flex:1;padding:10px;border-radius:8px;border:none;cursor:pointer;
  font-family:'Outfit',sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:.06em;transition:all .2s;
}
#turnShow{background:#f84;color:#000}
#turnShow:active{transform:scale(.97)}
#turnDismiss{background:rgba(255,255,255,.08);color:rgba(255,255,255,.5)}
#turnDismiss:hover{color:#fff}
.dev-fab .new-dot{
  position:absolute;top:-2px;right:-2px;width:7px;height:7px;
  border-radius:50%;background:#f84;
}
/* ─── Changelog tab ─── */
.log-version{
  font-family:'Bebas Neue',sans-serif;font-size:.8rem;color:#f84;
  letter-spacing:.08em;margin-bottom:10px;
}
.cl-loading{font-size:.55rem;color:rgba(255,255,255,.3);padding:20px 0}
.cl-day{margin-bottom:14px}
.cl-date{
  font-size:.45rem;color:rgba(255,255,255,.25);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:6px;padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.cl-row{
  padding:6px 8px;margin-bottom:4px;
  border-radius:6px;cursor:pointer;
  border-left:2px solid rgba(255,255,255,.08);
  transition:border-color .15s,background .15s;
}
.cl-row:hover{background:rgba(255,255,255,.04);border-left-color:rgba(255,255,255,.15)}
.cl-row.cl-new{border-left-color:#f84;background:rgba(255,136,68,.05)}
.cl-pr{
  font-size:.4rem;color:rgba(255,136,68,.5);font-weight:700;
  margin-bottom:2px;
}
.cl-label{
  font-size:.4rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;margin-right:4px;
  opacity:.5;
}
.cl-asked{
  font-size:.55rem;color:#f84;font-weight:600;
  line-height:1.3;margin-bottom:2px;
}
.cl-asked .cl-label{color:#f84}
.cl-title{
  font-size:.55rem;font-weight:700;color:#fff;
  line-height:1.3;
}
.cl-title .cl-label{color:rgba(255,255,255,.4)}
.cl-summary{
  display:none;
  font-size:.48rem;color:rgba(255,255,255,.45);
  line-height:1.5;margin-top:4px;
}
.cl-row.expanded .cl-summary{display:block}

/* idle mascot watermark on empty hand */
.idle-mascot{color:#fff;opacity:.12;display:flex;align-items:center;justify-content:center}
.idle-mascot svg{width:140px;height:auto}

/* version stamp — only visible when dev panel is open */
.version-stamp{
  position:fixed;bottom:6px;left:8px;
  font:10px/1 'Courier New',monospace;
  color:#666;pointer-events:none;z-index:9999;
  letter-spacing:.02em;opacity:0;transition:opacity .2s;
}

/* === YUCK: fly-down + undo toast === */
.card-slot.fly-down{transform:translateY(120%) scale(.9)!important;opacity:0;transition:transform .35s ease,opacity .3s ease}
.yuck-undo-toast{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);z-index:200;
  background:rgba(30,10,10,.92);border:1px solid rgba(229,57,53,.4);border-radius:20px;
  padding:8px 18px;
  font-family:'Outfit',sans-serif;font-size:.75rem;color:#e88;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .25s ease,transform .25s ease;
  display:flex;align-items:center;gap:12px;white-space:nowrap;
}
.yuck-undo-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.yuck-undo-btn{
  background:none;border:1px solid rgba(229,57,53,.5);border-radius:12px;
  color:#f66;font-family:'Outfit',sans-serif;font-size:.7rem;font-weight:600;
  padding:4px 14px;cursor:pointer;transition:all .15s;
}
.yuck-undo-btn:active{background:rgba(229,57,53,.2);color:#fff}

/* === VIBE PULSE — compost/drift/loved indicator === */
.vibe-pulse-dot{
  text-align:center;color:#444;font-size:1.2rem;letter-spacing:.3em;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  padding:6px 0 2px;transition:color .2s;
}
.vibe-pulse-dot.open{color:#888}
.vibe-pulse-panel{
  max-height:0;overflow:hidden;
  transition:max-height .3s ease,opacity .3s ease;
  opacity:0;padding:0 12px;
}
.vibe-pulse-panel.open{max-height:200px;opacity:1;padding:8px 12px}
.vp-line{
  font-family:'Outfit',sans-serif;font-size:.68rem;color:#777;
  line-height:1.5;margin-bottom:4px;
}
.vp-label{
  display:inline-block;font-size:.55rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:#555;margin-right:6px;min-width:48px;
}