/* Pouncio mark, toasts, status and the auto-buy moment (js/pouncio-mark.js).
   Colours are the app's tokens (app.css, landing.css), so the dark theme needs no
   overrides of its own; the hex fallbacks are the light theme's values.
   Needs the Silkscreen font for the BOUGHT! bubble:
   <link href="https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap" rel="stylesheet"> */

pouncio-mark { display: inline-block; line-height: 0; flex: none; --pm-body: var(--accent-ink, #4a6b45); --pm-pupil: var(--accent-ink, #4a6b45); }
pouncio-mark .pm-body { fill: var(--pm-body); transition: fill .2s; }
pouncio-mark .pm-ring { stroke: var(--pm-body); transition: stroke .2s; }
pouncio-mark .pm-pupil { fill: var(--pm-pupil); transition: fill .2s; }
pouncio-mark[tone="night"] { --pm-body: var(--accent, #8fae86); --pm-pupil: var(--second, #f3e27a); }
pouncio-mark[tone="tile"] { --pm-body: var(--accent-text, #1e2f1f); --pm-pupil: var(--accent-text, #1e2f1f); }
pouncio-mark[state="paused"] { --pm-body: var(--faint, #8a978e); --pm-pupil: var(--faint, #8a978e); }

/* sidebar brand */
.pc-tile { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, var(--accent-lit, #bcd2b0), var(--accent, #8fae86)); transition: background .2s; }
.pc-tile[data-paused] { background: var(--surface-3, #edf2ee); }
.pc-status { display: inline-flex; gap: 6px; align-items: center; font-size: 11px; font-weight: 600; color: var(--good, #4f7d4a); }
.pc-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; animation: pc-pulse 1.8s ease-in-out infinite; }
.pc-status[data-state="paused"] { color: var(--warn, #8a6d00); }
.pc-status[data-state="paused"]::before { animation: none; background: var(--second, #f3e27a); }
.pc-paused-banner { display: flex; gap: 8px; align-items: center; background: var(--warn-bg, #fdf8d2); border: 1px solid var(--warn-line, #f1e59c); border-radius: 10px; padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--warn, #8a6d00); }
.pc-paused-banner[hidden] { display: none; }
.pc-paused-banner button { margin-left: auto; border: 0; background: var(--warn, #8a6d00); color: var(--surface, #fff); font: inherit; font-size: 11px; border-radius: 999px; padding: 3px 9px; cursor: pointer; }

/* toasts */
.pc-toasts { position: fixed; top: 16px; right: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.pc-toast { pointer-events: auto; position: relative; display: flex; gap: 12px; align-items: center; padding: 12px 14px; overflow: hidden; box-sizing: border-box;
  background: var(--surface, #fff); color: var(--ink, #152018); text-decoration: none; border: 1px solid var(--line, #dbe4dc); border-radius: 14px;
  box-shadow: 0 16px 40px -18px rgba(21, 32, 24, .35);
  transform: translateX(calc(100% + 24px)); transition: transform .32s cubic-bezier(.2, .9, .25, 1.1), height .22s ease, padding .22s ease, margin .22s ease, opacity .22s;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.pc-toast:hover { text-decoration: none; color: var(--ink, #152018); }
.pc-toast.is-in { transform: none; }
/* being swiped away: it follows the pointer, no easing behind it (beats the reduced-motion rules) */
.pc-toasts .pc-toast.is-dragging { transition: none; cursor: grabbing; }
.pc-toast-close { flex: none; align-self: flex-start; display: grid; place-items: center; width: 24px; height: 24px; margin: -5px -7px 0 -4px; padding: 0;
  border: 0; border-radius: 7px; background: none; color: var(--faint, #8a978e); cursor: pointer; transition: background .15s, color .15s; }
.pc-toast-close:hover { background: var(--surface-3, #edf2ee); color: var(--ink, #152018); }
.pc-toast-close:focus-visible { outline: 2px solid var(--accent, #8fae86); outline-offset: 1px; }
.pc-toast.is-gone { height: 0 !important; padding-top: 0; padding-bottom: 0; margin-bottom: -10px; opacity: 0; border-width: 0; }
.pc-toast-icon { width: 40px; height: 40px; flex: none; border-radius: 11px; background: var(--night, #182420); display: grid; place-items: center; }
.pc-toast-text { flex: 1; display: grid; gap: 2px; min-width: 0; }
.pc-toast-title { font-size: 14px; font-weight: 600; }
.pc-toast-sub { font-size: 12px; color: var(--muted, #687869); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-toast-sub:empty { display: none; }
.pc-chip { margin-left: auto; flex: none; font: 500 11px/1.4 var(--mono, ui-monospace), monospace; border-radius: 999px; padding: 2px 8px; }
.pc-chip[hidden] { display: none; }
.pc-chip[data-tone="good"] { background: var(--good-bg, #e6f0e2); color: var(--good, #4f7d4a); }
.pc-chip[data-tone="offer"], .pc-chip[data-tone="warn"] { background: var(--second-bg, #fdf8d2); color: var(--second-ink, #7a6300); }
.pc-chip[data-tone="bad"] { background: var(--bad-bg, #fbecea); color: var(--bad, #c8453d); }
.pc-toast-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--surface-3, #edf2ee); }
.pc-toast-timer i { display: block; height: 100%; background: var(--accent, #8fae86); transform-origin: 0 0; }

/* auto-buy pop: pixel art keeps its own fixed palette in both themes */
.pc-pop { position: fixed; inset: 0; z-index: 1001; pointer-events: none; }
.pc-pop-dim { position: absolute; inset: 0; background: #152018; opacity: 0; }
.pc-pop canvas { position: absolute; left: 0; top: 0; width: 120px; height: 140px; image-rendering: pixelated; transform-origin: 60px 70px; }
.pc-pop-bubble { position: absolute; transform-origin: 100% 100%; transform: scale(0); background: #fff; color: #152018; border: 3px solid #152018; box-shadow: 5px 5px 0 #152018;
  padding: 12px 16px; display: grid; gap: 4px; white-space: nowrap; font-family: "Silkscreen", ui-monospace, monospace; }
.pc-pop-bubble b { font-size: 30px; line-height: 1; white-space: pre; }
/* a dry run's bubble: butter, and the P did not really buy anything */
.pc-pop-bubble.is-dry { background: #f3e27a; }
.pc-pop-bubble.is-dry b { font-size: 26px; }
.pc-pop-bubble.is-dry span { color: #152018; }
.pc-pop-bubble span { font-size: 14px; line-height: 1; color: #4a6b45; }
.pc-spark { position: absolute; left: 0; top: 0; width: 10px; height: 10px; background: #f3e27a; box-shadow: 0 0 0 2px #152018; opacity: 0; }
.pc-spark:nth-of-type(odd) { width: 8px; height: 8px; background: #8fae86; }

@keyframes pc-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes pc-pulse { 50% { opacity: .4; } }

/* Reduced motion, from the OS unless the setting says Always, or from the
   setting (Off) whatever the OS says: toasts fade in place, nothing pulses. */
html.pc-motion-reduced .pc-toast { transition: opacity .2s; transform: none; opacity: 0; }
html.pc-motion-reduced .pc-toast.is-in { opacity: 1; }
html.pc-motion-reduced .pc-status::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html:not(.pc-motion-full) .pc-toast { transition: opacity .2s; transform: none; opacity: 0; }
  html:not(.pc-motion-full) .pc-toast.is-in { opacity: 1; }
  html:not(.pc-motion-full) .pc-status::before { animation: none; }
}
@media print { .pc-toasts, .pc-pop { display: none; } }