/* whimsy.css — splash, presence cursors, confetti, minimap, delights.
   Owned by agent C. */

/* =====================================================================
   SPLASH
   ===================================================================== */
#splash { display: none; }
#splash.is-open {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 300;
  padding: 24px 16px;
  overflow: auto;
  background-color: var(--paper);
  background-image: radial-gradient(circle at 1.5px 1.5px, var(--dot) 1.5px, transparent 1.8px);
  background-size: 26px 26px;
  animation: splash-in 0.45s var(--ease-out) both;
}
#splash.is-leaving { animation: splash-out 0.6s cubic-bezier(0.7, 0, 0.2, 1) both; pointer-events: none; }
#splash.is-leaving .splash-inner { animation: splash-inner-out 0.5s cubic-bezier(0.6, -0.3, 0.7, 0) both; }
@keyframes splash-in { from { opacity: 0; } }
@keyframes splash-out {
  0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); }
}
@keyframes splash-inner-out {
  to { transform: translateY(-60px) rotate(-2deg) scale(0.96); opacity: 0; }
}

.splash-inner {
  width: min(880px, 100%);
  display: flex; flex-direction: column; gap: 22px;
  animation: splash-rise 0.6s var(--ease-spring) both 0.05s;
}
@keyframes splash-rise { from { transform: translateY(24px) rotate(1deg); opacity: 0; } }

.splash-top {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
}
.splash-sq { width: 18px; height: 18px; background: var(--ink); flex: none; }
.splash-kicker { color: var(--ink-2); }
.splash-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; background: var(--ink); color: var(--paper); border-radius: 3px;
}
.splash-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: pulse 1.6s infinite; }

.splash-hero { display: flex; align-items: flex-end; gap: clamp(16px, 4vw, 48px); flex-wrap: wrap; }
.splash-hey {
  margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: clamp(110px, 20vw, 220px); line-height: 0.8; letter-spacing: -0.04em;
  color: var(--ink);
}
.splash-plus {
  flex: 1; min-width: 260px;
  display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px 0;
  font-family: var(--f-mono); font-weight: 500; font-size: clamp(12px, 1.6vw, 18px); line-height: 1.15;
  text-align: center; user-select: none;
  padding-bottom: 14px;
}
.splash-plus span { transition: color 0.25s, text-shadow 0.25s; }
.splash-plus .p0 { color: color-mix(in srgb, var(--ink) 14%, transparent); }
.splash-plus .p1 { color: color-mix(in srgb, var(--ink) 32%, transparent); }
.splash-plus .p2 { color: color-mix(in srgb, var(--ink) 58%, transparent); }
.splash-plus .p3 { color: var(--ink); }
.splash-plus .n0 { color: var(--hot); }
.splash-plus .n1 { color: var(--cyan); }
.splash-plus .n2 { color: var(--violet); }
.splash-plus .n3 { color: var(--orange); }

.splash-copy {
  margin: 0; max-width: 760px;
  font-family: var(--f-sans); font-weight: 600; font-size: clamp(22px, 3.3vw, 36px);
  line-height: 1.12; letter-spacing: -0.02em; color: var(--ink);
}
.splash-copy .w { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.12em; }
.splash-copy .w-cyan { color: #0aa9c4; }
.splash-copy .w-hot { color: var(--hot); }
.splash-copy .w-violet { color: var(--violet); }
.splash-copy .w-orange { color: var(--orange); }

.splash-me {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 14px;
  background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--shadow-hard);
  transform: rotate(-1.5deg);
}
.splash-me.is-pop { animation: sticker-pop 0.4s var(--ease-spring); }
@keyframes sticker-pop { 40% { transform: rotate(1.5deg) scale(1.06); } }
.splash-me-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); }
.splash-handle { font-family: var(--f-mono); font-size: 15px; }
.splash-av { width: 30px; height: 30px; }
.splash-reroll {
  width: 32px; height: 32px; border-radius: 50%;
  border: var(--bw) solid var(--line); background: var(--acid); color: #0e0e10;
  font-size: 17px; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
  transition: transform 0.2s var(--ease-spring);
}
.splash-reroll:hover { transform: rotate(-40deg) scale(1.08); }
.splash-reroll.is-spin { animation: spin 0.5s var(--ease-out); }
@keyframes spin { to { transform: rotate(360deg); } }

.splash-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.splash-actions .btn { height: 50px; padding: 0 24px; font-size: 15px; box-shadow: var(--shadow-hard); }
.splash-actions .btn:hover { box-shadow: 6px 6px 0 var(--line); transform: translate(-2px, -2px); }
.splash-go:hover { transform: translate(-2px, -2px) rotate(-1deg); }
.splash-actions .btn:focus-visible { outline: 3px solid var(--hot); outline-offset: 3px; }

.splash-tour {
  align-self: center; border: 0; background: none; padding: 6px 4px;
  font-family: var(--f-mono); font-size: 13px; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-decoration-style: wavy; text-decoration-color: var(--hot); text-underline-offset: 5px;
}
.splash-tour:hover { background: var(--acid); color: #0e0e10; text-decoration-color: #0e0e10; }
.splash-tour:focus-visible { outline: 3px solid var(--hot); outline-offset: 3px; }

.splash-legend {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-3); line-height: 2;
}
.splash-legend kbd { opacity: 0.9; color: var(--ink); }
.splash-legend .lk { white-space: nowrap; }

/* =====================================================================
   PRESENCE — top bar avatars + live cursors
   ===================================================================== */
.presence { align-items: center; padding-left: 8px; }
.presence-av {
  padding: 0; cursor: pointer;
  transition: transform 0.18s var(--ease-spring);
  position: relative;
}
.presence-av:hover { transform: translateY(-3px) rotate(-6deg); z-index: 2; }
.here-pill {
  margin-left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-pill);
}
.here-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #20d46b;
  box-shadow: 0 0 0 0 rgba(32, 212, 107, 0.6);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(32, 212, 107, 0.6); }
  70% { box-shadow: 0 0 0 7px rgba(32, 212, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(32, 212, 107, 0); }
}

.presence-layer {
  position: fixed; inset: calc(var(--topbar-h) + var(--filterbar-h)) 0 0 0;
  z-index: 35; pointer-events: none; overflow: hidden;
}
.presence-layer.is-hidden { visibility: hidden; }
.cursor {
  position: absolute; left: 0; top: 0;
  will-change: transform;
  filter: drop-shadow(1px 2px 0 rgba(14, 14, 16, 0.25));
}
.cursor svg { display: block; }
.cursor-tag {
  position: absolute; left: 14px; top: 20px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; white-space: nowrap;
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  background: var(--c); color: #0e0e10;
  border: 2px solid #0e0e10; border-radius: var(--r-pill);
  transform: rotate(-2deg);
}
.cursor-typing {
  display: none; align-items: center; gap: 2px;
  padding-left: 6px; border-left: 1.5px solid rgba(14, 14, 16, 0.4);
  font-weight: 500; font-style: italic;
}
.cursor-typing i { width: 3px; height: 3px; border-radius: 50%; background: #0e0e10; animation: blink 1s infinite; }
.cursor-typing i:nth-child(2) { animation-delay: 0.15s; }
.cursor-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
.cursor.is-typing .cursor-typing { display: inline-flex; }
.cursor.is-ping .cursor-tag { animation: tag-ping 0.9s var(--ease-spring); }
@keyframes tag-ping {
  30% { transform: rotate(3deg) scale(1.35); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 45%, transparent); }
}

.react {
  position: absolute; font-size: 22px; line-height: 1; pointer-events: none;
  animation: react-up 1.3s var(--ease-out) forwards;
}
@keyframes react-up {
  0% { transform: translate(-50%, 0) scale(0.3) rotate(0); opacity: 0; }
  15% { opacity: 1; transform: translate(-50%, -12px) scale(1.1) rotate(var(--rot)); }
  100% { transform: translate(calc(-50% + var(--dx)), -90px) scale(0.9) rotate(var(--rot)); opacity: 0; }
}

/* =====================================================================
   CONFETTI
   ===================================================================== */
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 400; pointer-events: none; }

/* =====================================================================
   MINIMAP
   ===================================================================== */
/* bottom-left dock: [tip pill] on top of [minimap]; one column, never overlapping */
.mm-dock {
  position: fixed; left: 20px; bottom: 20px; z-index: 45;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  pointer-events: none;
}
.mm-dock > * { pointer-events: auto; }
.minimap {
  position: relative;
  width: 184px; height: 124px;
  background: var(--card);
  border: var(--bw) solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--shadow-hard);
  transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out), box-shadow 0.2s;
}
.minimap-body { width: 180px; height: 120px; overflow: hidden; border-radius: 4px; }
.minimap-cv { display: block; width: 180px; height: 120px; cursor: pointer; touch-action: none; }
.minimap.is-drag .minimap-cv { cursor: grabbing; }
.minimap-tag {
  position: absolute; left: 8px; top: -11px; z-index: 1;
  font-family: var(--f-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; line-height: 1.5;
  padding: 1px 6px; background: var(--ink); color: var(--paper); border: 0; border-radius: 3px;
  transition: transform 0.15s var(--ease-spring);
}
.minimap-tag:hover { transform: translateY(-1px) rotate(-2deg); background: var(--acid); color: #0e0e10; }
.minimap-tag:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
/* collapsed: just the little MAP tab */
.minimap.is-collapsed { width: auto; height: auto; border: 0; box-shadow: none; background: none; }
.minimap.is-collapsed .minimap-body { display: none; }
.minimap.is-collapsed .minimap-tag { position: relative; left: 0; top: 0; display: block; padding: 3px 8px; box-shadow: 2px 2px 0 var(--acid); }
.mm-dock:has(.minimap.is-collapsed) { gap: 10px; }
@media (max-width: 900px) { .mm-dock { display: none; } }
body[data-view="list"] .mm-dock, body[data-page="top"] .mm-dock, body[data-page="how"] .mm-dock { display: none; }

/* =====================================================================
   DELIGHTS — sparkle + tip sticker
   ===================================================================== */
.sparkle {
  position: fixed; z-index: 380; pointer-events: none;
  font-size: 34px; line-height: 1; color: var(--c);
  -webkit-text-stroke: 1.5px #0e0e10;
  transform: translate(-50%, -50%);
  animation: sparkle 1s var(--ease-out) forwards;
}
.sparkle i {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px;
  background: var(--c2); border: 1px solid #0e0e10;
  animation: spark-out 0.7s var(--ease-out) forwards;
}
@keyframes sparkle {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-90deg); }
  35% { transform: translate(-50%, -50%) scale(1.25) rotate(10deg); }
  70% { opacity: 1; }
  100% { transform: translate(-50%, -70%) scale(0.9) rotate(0); opacity: 0; }
}
@keyframes spark-out { to { transform: translate(var(--tx), var(--ty)) rotate(90deg) scale(0.4); opacity: 0; } }

.tip {
  position: relative; margin-left: 4px;
  max-width: 290px;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 4px 5px 10px;
  font-family: var(--f-mono); font-size: 11px; line-height: 1.3;
  background: var(--pi-yellow); color: #0e0e10;
  border: 1.5px solid #0e0e10; border-radius: 10px;
  box-shadow: 2px 2px 0 #0e0e10;
  transform: rotate(-1.5deg); transform-origin: 0 100%;
  transition: transform 0.22s var(--ease-out), opacity 0.22s;
  animation: tip-in 0.45s var(--ease-spring) both 1.4s;
}
/* little tail pointing at the minimap it sits on */
.tip::after {
  content: ""; position: absolute; left: 18px; bottom: -7px; width: 10px; height: 10px;
  background: var(--pi-yellow); border-right: 1.5px solid #0e0e10; border-bottom: 1.5px solid #0e0e10;
  transform: rotate(45deg);
}
/* the PRO TIP label rides on the pill's top edge like a tab, so the text gets the full width */
.tip-k { position: absolute; left: 8px; top: -9px; font-size: 8.5px; line-height: 1.5; letter-spacing: 0.12em; background: #0e0e10; color: var(--pi-yellow); padding: 1px 5px; border-radius: 4px; transform: rotate(-2deg); }
.tip-text { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tip-x {
  flex: none; align-self: flex-start; width: 18px; height: 18px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; font-size: 14px; line-height: 1; color: #0e0e10; opacity: 0.5;
}
.tip-x:hover { opacity: 1; background: rgba(14, 14, 16, 0.12); }
.tip-x:focus-visible { opacity: 1; outline: 2px solid #0e0e10; }
.tip.is-flip { transform: rotate(-1.5deg) rotateX(90deg); opacity: 0.4; }
.tip.is-out { transform: rotate(-6deg) translateY(12px); opacity: 0; pointer-events: none; }
@keyframes tip-in { from { transform: rotate(-10deg) translateY(16px); opacity: 0; } }
@media (max-width: 900px) { .tip { display: none; } }
/* the tip lives over the canvas only — it would sit on top of list cards and full pages */
body[data-view="list"] .tip, body[data-page="top"] .tip, body[data-page="how"] .tip { display: none; }

/* =====================================================================
   Reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  #splash.is-open, #splash.is-leaving, #splash.is-leaving .splash-inner, .splash-inner,
  .tip, .sparkle, .sparkle i, .react { animation: none !important; }
  #splash.is-leaving { opacity: 0; transition: opacity 0.18s; }
  .here-dot, .splash-live i, .cursor-typing i { animation: none; }

  .tip, .minimap { transition: none; }
}

/* =====================================================================
   Responsive (phone <= 700, tablet 701-1024, touch)
   ===================================================================== */
/* keyboard legend means nothing without a keyboard */
@media (hover: none), (pointer: coarse) { .splash-legend { display: none; } }
#splash.is-open {
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overscroll-behavior: contain;
}
@media (max-width: 700px) {
  .splash-inner { gap: 16px; }
  .splash-top { font-size: 11px; gap: 8px; }
  .splash-kicker { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* "Hey," and the plus-grid share one row instead of stacking */
  .splash-hero { flex-wrap: nowrap; align-items: flex-end; gap: 14px; }
  .splash-hey { font-size: clamp(84px, 27vw, 120px); flex: none; }
  .splash-plus { min-width: 0; grid-template-columns: repeat(10, 1fr); font-size: 13px; line-height: 1.1; padding-bottom: 6px; }
  .splash-plus span:nth-child(n + 61) { display: none; }
  .splash-copy { font-size: clamp(19px, 5.6vw, 23px); line-height: 1.18; }
  .splash-me { max-width: 100%; padding: 6px 6px 6px 12px; gap: 8px; }
  .splash-me-label { font-size: 10px; }
  .splash-handle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .splash-reroll { width: 44px; height: 44px; }
  .splash-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .splash-actions .btn { height: 50px; padding: 0 10px; font-size: 14px; justify-content: center; }
  .splash-tour { grid-column: 1 / -1; justify-self: center; min-height: 44px; }
}
@media (max-width: 700px) and (max-height: 580px) {
  .splash-inner { gap: 12px; }
  .splash-hey { font-size: 84px; }
  .splash-plus span:nth-child(n + 41) { display: none; }
  .splash-copy { font-size: 18px; }
  .splash-actions .btn { height: 46px; }
}

/* fake cursors: board-only, never on phones (they cover cards you are trying to tap) */
.presence-layer { bottom: var(--nav-h, 0px); }
@media (max-width: 700px) { .presence-layer { display: none; } }

/* minimap: hidden on phones, tablet/desktop sits above the bottom nav */
@media (max-width: 900px) { .mm-dock { display: flex; } }
.mm-dock { bottom: calc(var(--nav-h, 0px) + 20px); }
@media (max-width: 700px) { .mm-dock { display: none !important; } }
@media (min-width: 701px) and (max-width: 1024px) {
  .mm-dock { left: 12px; bottom: calc(var(--nav-h, 0px) + 14px); }
  .minimap { width: 154px; height: 104px; }
  .minimap-body, .minimap-cv { width: 150px; height: 100px; }
  .minimap-tag { min-height: 24px; }
}
@media (pointer: coarse) { .minimap-tag { padding: 4px 10px; font-size: 10.5px; } }
/* every full page and the list view hide the canvas-only chrome */
body[data-page="mine"] .mm-dock, body[data-page="mine"] .tip { display: none; }

/* the tip sticker teaches keyboard/mouse moves: desktop only */
@media (max-width: 1024px), (hover: none) { .tip { display: none !important; } }