/* ==========================================================================
   PC Pals: THE POT + REVEAL (owned by the pot builder)
   Styled only with the design lead's tokens (css/tokens.css). All classes are
   prefixed pp- so nothing collides with site.css / mint.css.
   Animations move transform + opacity; reduced motion slows loops (--loop), never hides art.
   ========================================================================== */

/* ---------- shared: sprites, windows, buttons ---------- */
.pp-sprite { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.pp-sprite, .pp-st__svg { shape-rendering: crispEdges; }
.pp-blink { transform-box: fill-box; transform-origin: center; animation: pp-blink calc(4.2s * var(--loop, 1)) steps(1, end) infinite; }
.pp-bob { animation: pp-bob calc(1.2s * var(--loop, 1)) steps(1, end) infinite; }
@keyframes pp-blink { 0%, 93%, 100% { transform: scaleY(1); } 94%, 97% { transform: scaleY(.15); } }
@keyframes pp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--px, 4px) * -1)); } }

.pp-root { container-type: inline-size; container-name: pot; }
.pp-win { position: relative; background: var(--c-panel); box-shadow: var(--ring-drop); color: var(--c-ink); container-type: inline-size; min-width: 0; }
.pp-win__bar {
  display: flex; align-items: center; gap: var(--s3); min-height: var(--s6);
  padding: var(--s1) var(--s3); background: var(--c-titlebar); color: var(--c-ink-inv);
  font: 400 var(--t-pixel)/1 var(--f-pixel); letter-spacing: .02em;
  box-shadow: inset 0 calc(var(--px) * -1) 0 0 var(--k);
}
.pp-win__bar--you { background: var(--blue); }
.pp-win__dots { display: inline-flex; gap: var(--s1); }
.pp-win__dots i { width: var(--s2); height: var(--s2); background: var(--paper); box-shadow: 0 0 0 2px var(--k); }
.pp-win__dots i:nth-child(1) { background: var(--red); }
.pp-win__dots i:nth-child(2) { background: var(--yellow); }
.pp-win__dots i:nth-child(3) { background: var(--green); }
.pp-win__title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-win__addr { font-size: var(--t-pixel-s); opacity: .9; white-space: nowrap; }

.pp-live { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-pixel-s); letter-spacing: .08em; }
.pp-live__dot { display: inline-block; width: var(--s2); height: var(--s2); background: var(--c-live); box-shadow: 0 0 0 2px var(--k), 0 0 10px var(--c-live); animation: pp-live calc(1.4s * var(--loop, 1)) steps(1, end) infinite; }
@keyframes pp-live { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.pp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--s7); padding: var(--s3) var(--s5); border: 0; border-radius: var(--r-0);
  font: var(--f-btn); text-transform: uppercase; letter-spacing: .02em; text-decoration: none;
  background: var(--c-cta); color: var(--c-cta-ink); box-shadow: var(--ring), var(--drop);
  cursor: pointer; transition: transform var(--dur-1) var(--steps-px), background var(--dur-1);
  -webkit-tap-highlight-color: transparent;
}
.pp-btn:hover:not(:disabled) { background: var(--c-cta-hover); transform: translateY(calc(var(--px) * -1)); }
.pp-btn:active:not(:disabled) { transform: translateY(var(--px)); box-shadow: var(--ring); }
.pp-btn:focus-visible, .pp-link:focus-visible, .pp-thumb__a:focus-visible, .pp-vlink:focus-visible, .pp-rv__x:focus-visible { outline: var(--px) solid var(--c-focus); outline-offset: var(--s2); }
.pp-btn:disabled { background: var(--c-panel-2); color: var(--c-ink-soft); cursor: default; box-shadow: var(--ring); }
.pp-btn--alt { background: var(--c-alt); }
.pp-btn--alt:hover:not(:disabled) { background: var(--cream); }
.pp-btn--x { background: var(--sky); color: var(--c-ink); }
.pp-btn--x:hover:not(:disabled) { background: var(--cyan); }
.pp-link { padding: 0; border: 0; background: none; color: var(--blue-deep); font: 700 var(--t-sm)/1.3 var(--f-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pp-link:hover { color: var(--purple); }

.pp-msg { margin: 0; min-height: 1.5em; font: 500 var(--t-sm)/1.45 var(--f-body); color: var(--c-ink-soft); }
.pp-msg b { color: var(--green-deep); }
.pp-msg a { color: var(--blue-deep); font-weight: 700; }
.pp-msg.is-err { color: var(--c-err); font-weight: 700; }

/* ---------- layout ---------- */
.pp-pot { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); }
@container pot (min-width: 860px) {
  .pp-pot { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .pp-fine { grid-column: 1 / -1; }
}

/* ---------- THE POT: live vault window ---------- */
.pp-vault__body { display: grid; gap: var(--s5); padding: var(--s5); grid-template-columns: minmax(0, 1fr); }
@container (min-width: 680px) {
  .pp-vault__body { grid-template-columns: minmax(240px, 1fr) minmax(0, 1fr); align-items: center; }
  .pp-weth, .pp-vault__foot { grid-column: 1 / -1; }
}

/* the Pot itself: a gold PC Pal whose screen is the live meter */
.pp-meter { position: relative; padding-top: var(--s7); justify-self: center; width: 100%; max-width: 360px; container-type: inline-size; }
.pp-meter__rain { position: absolute; top: 0; left: 50%; width: var(--s5); height: var(--s7); transform: translateX(-50%); pointer-events: none; }
.pp-meter__rain i { position: absolute; left: 0; top: 0; width: var(--s5); height: var(--s5); opacity: 0; animation: pp-rain calc(3.6s * var(--loop, 1)) linear infinite; }
.pp-meter__rain i:nth-child(2) { animation-delay: calc(.5s * var(--loop, 1)); }
.pp-meter__rain i:nth-child(3) { animation-delay: calc(1s * var(--loop, 1)); }
.pp-meter__rain svg { display: block; width: 100%; height: 100%; }
@keyframes pp-rain {
  0% { opacity: 0; transform: translateY(-8px); }
  6% { opacity: 1; }
  30% { opacity: 1; transform: translateY(40px); }
  34%, 100% { opacity: 0; transform: translateY(44px); }
}
.pp-meter__case {
  position: relative; display: grid; grid-template-columns: var(--s6) minmax(0, 1fr); gap: var(--s3);
  padding: var(--s4) var(--s3) var(--s3); background: #FFC72C; box-shadow: var(--ring), var(--drop);
}
.pp-meter__case::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--s2); background: #FFE680; }
.pp-meter__case::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--s1); background: #C98F00; }
.pp-meter__slot { position: absolute; left: 50%; top: calc(var(--px) * -1); width: var(--s7); height: var(--s2); background: var(--k); transform: translateX(-50%); z-index: 1; }
.pp-meter__side { display: grid; align-content: center; gap: var(--s3); padding-left: var(--s1); }
.pp-meter__side i { display: block; width: var(--s5); height: var(--s1); background: var(--glow-red); box-shadow: 0 0 0 2px rgba(10,10,12,.35); animation: pp-led calc(2.4s * var(--loop, 1)) steps(1, end) infinite; }
.pp-meter__side i:nth-child(2) { background: var(--glow-green); animation-delay: calc(.8s * var(--loop, 1)); }
.pp-meter__side i:nth-child(3) { background: var(--glow-cyan); animation-delay: calc(1.6s * var(--loop, 1)); }
@keyframes pp-led { 0%, 100% { opacity: 1; } 60% { opacity: .35; } }
.pp-meter__screen {
  position: relative; z-index: 1; display: grid; gap: var(--s1); padding: var(--s4) var(--s3);
  background: var(--c-screen); color: var(--glow); font-family: var(--f-pixel); text-shadow: var(--glow-text);
  box-shadow: var(--ring); overflow: hidden; min-width: 0;
}
.pp-meter__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 4px); }
.pp-meter__k { font-size: var(--t-pixel-s); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.pp-meter__row { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.pp-meter__v { font: 700 clamp(24px, 12cqw, 40px)/1 var(--f-display); color: var(--glow-yellow); --glow: var(--glow-yellow); text-shadow: 0 0 10px color-mix(in srgb, var(--glow-yellow) 55%, transparent); white-space: nowrap; }
.pp-meter__u { font-size: var(--t-pixel); color: var(--glow-yellow); }
.pp-meter__usd { font-size: var(--t-pixel-s); color: var(--c-ink-inv-soft); letter-spacing: .06em; }
.pp-meter__legs { display: flex; justify-content: space-around; padding: 0 22%; height: var(--s5); }
.pp-meter__legs i { position: relative; width: var(--s2); height: var(--s3); background: var(--k); }
.pp-meter__legs i::after { content: ""; position: absolute; left: calc(var(--px) * -2); top: var(--s3); width: var(--s6); height: var(--s3); background: var(--shoe); box-shadow: var(--ring); }
.pp-meter__legs i::before { content: ""; position: absolute; left: calc(var(--px) * -1); top: var(--s3); width: var(--s2); height: var(--s1); background: var(--pink); z-index: 1; }

.pp-stats { display: grid; gap: var(--s3); margin: 0; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 400px) { .pp-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pp-stat--hero { grid-column: 1 / -1; } }
.pp-stat { display: grid; align-content: start; gap: 2px; padding: var(--s3) var(--s4); background: var(--c-panel-2); box-shadow: var(--ring); min-width: 0; }
.pp-stat dt { font: 400 var(--t-pixel-s)/1.4 var(--f-pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-soft); }
.pp-stat dd { margin: 0; font: 500 var(--t-sm)/1.2 var(--f-body); color: var(--c-ink); min-width: 0; overflow-wrap: anywhere; }
.pp-stat dd b { font: 700 var(--t-xl)/1.1 var(--f-display); display: inline-block; }
.pp-stat .pp-stat__usd { font-size: var(--t-xs); color: var(--c-ink-soft); }
.pp-stat--hero { background: var(--mint); }
.pp-stat--hero dd b { font-size: clamp(28px, 7cqw, 40px); }
.pp-stat--hero dt, .pp-stat--hero .pp-stat__usd { color: var(--k); }
.is-bump { animation: pp-bump var(--dur-3) var(--steps-px); }
@keyframes pp-bump { 0% { transform: translateY(0); } 40% { transform: translateY(calc(var(--px) * -1)); color: var(--green-deep); } 100% { transform: translateY(0); } }
.pp-meter__v.is-bump { animation-name: pp-bump-scr; }
@keyframes pp-bump-scr { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(calc(var(--px) * -1)); } }

.pp-weth { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s2) var(--s3); background: var(--cream); box-shadow: var(--ring); font: 500 var(--t-sm)/1.4 var(--f-body); }
.pp-weth[hidden] { display: none; }
.pp-vault__foot { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); font: 500 var(--t-xs)/1.4 var(--f-body); color: var(--c-ink-soft); }
.pp-vlink { color: var(--blue-deep); font: 400 var(--t-pixel-s)/1.6 var(--f-pixel); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.pp-vlink:hover { text-decoration: underline; }
.pp-upd { font-variant-numeric: tabular-nums; }
.pp-vault.is-empty .pp-meter__v { color: var(--grey); }

/* ---------- MY_PALS window ---------- */
.pp-you__body { display: grid; gap: var(--s4); padding: var(--s5); }
.pp-you__hi { display: grid; grid-template-columns: var(--s9) minmax(0, 1fr); align-items: center; gap: var(--s4); }
.pp-you__pal { width: var(--s9); }
.pp-you__txt { margin: 0; font: 500 var(--t-md)/var(--lh-body) var(--f-body); }
.pp-you__txt b { font-weight: 700; }
.pp-you__body > .pp-btn { justify-self: start; }

.pp-scan { display: grid; gap: var(--s3); padding: var(--s4); background: var(--c-screen); color: var(--glow); box-shadow: var(--ring); }
.pp-scan__txt { margin: 0; font: 400 var(--t-pixel)/1.2 var(--f-pixel); text-shadow: var(--glow-text); }
.pp-scan__track { height: var(--s4); background: var(--screen-2); box-shadow: var(--ring); overflow: hidden; }
.pp-scan__bar { height: 100%; width: 100%; background: repeating-linear-gradient(90deg, var(--glow-green) 0 12px, transparent 12px 16px); transform-origin: left center; transform: scaleX(max(.06, var(--k, 0))); transition: transform var(--dur-3) var(--steps-px); }

.pp-sum { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s3); }
.pp-sum__cell { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); padding: var(--s3) var(--s4); background: var(--c-panel-2); box-shadow: var(--ring); min-width: 0; }
.pp-sum__cell--eth { background: var(--c-screen); color: var(--glow-green); text-shadow: 0 0 8px color-mix(in srgb, var(--glow-green) 50%, transparent); }
.pp-sum__k { flex: 1 0 100%; font: 400 var(--t-pixel-s)/1.6 var(--f-pixel); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.pp-sum__v { font: 700 var(--t-xl)/1.1 var(--f-display); }
.pp-sum__u { font: 400 var(--t-pixel-s)/1 var(--f-pixel); }
.pp-sum__usd { flex: 1 0 100%; font: 500 var(--t-xs)/1.4 var(--f-body); color: var(--c-ink-inv-soft); text-shadow: none; }

.pp-thumbs { list-style: none; margin: 0; padding: var(--s1); display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.pp-thumb { position: relative; aspect-ratio: 1; background: var(--c-panel-2); box-shadow: var(--ring); animation: pp-thumb-in var(--dur-3) var(--ease-snap) both; }
.pp-thumb:nth-child(2n) { animation-delay: 40ms; } .pp-thumb:nth-child(3n) { animation-delay: 80ms; } .pp-thumb:nth-child(4n) { animation-delay: 120ms; }
@keyframes pp-thumb-in { from { opacity: 0; transform: translateY(var(--s2)); } to { opacity: 1; transform: none; } }
.pp-thumb__a { display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; }
.pp-thumb__art { position: absolute; inset: 0; overflow: hidden; }
.pp-thumb__art img, .pp-thumb__art svg { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.pp-thumb__id { position: absolute; left: 0; bottom: 0; padding: 2px var(--s1); background: var(--k); color: var(--paper); font: 400 var(--t-pixel-s)/1.2 var(--f-pixel); letter-spacing: .04em; }
.pp-thumb.is-loading .pp-thumb__art { background: repeating-linear-gradient(90deg, var(--c-panel-2) 0 8px, #DCDCE6 8px 16px); animation: pp-scan-bg 1s steps(4, end) infinite; }
@keyframes pp-scan-bg { to { background-position: 16px 0; } }
.pp-thumb__a:hover { transform: translateY(calc(var(--px) * -1)); }
.pp-thumb--more { display: grid; place-content: center; text-align: center; background: var(--yellow); font: 700 var(--t-lg)/1 var(--f-display); }
.pp-thumb--more small { font: 400 var(--t-pixel-s)/1.6 var(--f-pixel); text-transform: uppercase; }

.pp-claim { position: relative; display: grid; gap: var(--s2); }
.pp-claim .pp-btn { width: 100%; }
.pp-claim[data-phase="wallet"] .pp-btn, .pp-claim[data-phase="pending"] .pp-btn { background: var(--c-screen); color: var(--glow); box-shadow: var(--ring); animation: pp-live 1s steps(1, end) infinite; }
.pp-claim[data-phase="done"] .pp-btn { background: var(--c-ok); color: var(--k); }
.pp-burst { position: absolute; left: 50%; top: var(--s5); width: 0; height: 0; pointer-events: none; z-index: 3; }
.pp-burst i { position: absolute; left: -12px; top: -12px; width: var(--s5); height: var(--s5); animation: pp-burst 1.2s var(--ease-out) forwards; }
.pp-burst svg { display: block; width: 100%; height: 100%; }
@keyframes pp-burst { 0% { transform: translate(0, 0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) translateY(40px); opacity: 0; } }

.pp-fine { margin: 0; justify-self: start; padding: var(--s2) var(--s3); background: var(--c-panel); box-shadow: var(--ring); font: 500 var(--t-xs)/1.5 var(--f-body); color: var(--c-ink-soft); }

/* ---------- THE LOOP: trade -> 5% -> pot -> every Pal earns -> claim ---------- */
.pp-loop-slot { margin-bottom: var(--s6); }
.pp-loop { --cyc: calc(8s * var(--loop, 1)); container-type: inline-size; container-name: loop; }
.pp-loop__row { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.pp-st { position: relative; display: grid; grid-template-columns: 144px minmax(0, 1fr); align-items: center; gap: var(--s4); }
.pp-st--1 { --d: calc(var(--cyc) * -1); }
.pp-st--2 { --d: calc(var(--cyc) * -.8); }
.pp-st--3 { --d: calc(var(--cyc) * -.6); }
.pp-st--4 { --d: calc(var(--cyc) * -.4); }
.pp-st--5 { --d: calc(var(--cyc) * -.2); }
.pp-st__art { position: relative; z-index: 1; background: var(--c-panel); box-shadow: var(--ring-drop); padding: 0; animation: pp-st-on var(--cyc) var(--d) infinite; }
.pp-st__art::after { content: ""; position: absolute; inset: 0; box-shadow: 0 0 0 var(--px) var(--yellow), 0 0 18px 4px color-mix(in srgb, var(--yellow) 70%, transparent); opacity: 0; animation: pp-st-glow var(--cyc) var(--d) infinite; pointer-events: none; }
.pp-st__svg { display: block; width: 100%; height: auto; }
.pp-st__txt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s1) var(--s3); }
.pp-st__n { grid-row: span 2; display: grid; place-items: center; width: var(--s6); height: var(--s6); background: var(--c-screen); color: var(--glow); font: 400 var(--t-pixel)/1 var(--f-pixel); box-shadow: var(--ring); animation: pp-st-n var(--cyc) var(--d) infinite steps(1, end); }
/* loop captions sit on the design lead's section colour: inherit its text colour (white on purple, ink on light) */
.pp-st__t { font: 700 var(--t-lg)/1.1 var(--f-display); color: inherit; }
.pp-st__s { font: 500 var(--t-sm)/1.35 var(--f-body); color: inherit; opacity: .86; }
@keyframes pp-st-on { 0% { transform: translateY(0); } 3%, 17% { transform: translateY(calc(var(--px) * -2)); } 20%, 100% { transform: translateY(0); } }
@keyframes pp-st-glow { 0% { opacity: 0; } 3%, 17% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes pp-st-n { 0% { background: var(--yellow); color: var(--k); } 20%, 100% { background: var(--c-screen); color: var(--glow); } }

/* wires (vertical by default): a dotted cable with a coin riding it */
.pp-wire { position: absolute; left: 70px; top: 100%; width: var(--px); height: var(--s5); background: repeating-linear-gradient(180deg, var(--k) 0 4px, transparent 4px 8px); }
.pp-wire__run { position: absolute; left: 50%; top: 0; width: 0; height: calc(100% - 16px); animation: pp-wire-y var(--cyc) var(--d) infinite linear; }
.pp-wire__run i { position: absolute; left: -8px; top: 0; width: var(--s4); height: var(--s4); }
.pp-wire__run svg { display: block; width: 100%; height: 100%; }
@keyframes pp-wire-y { 0%, 15% { transform: translateY(0); opacity: 0; } 16% { opacity: 1; transform: translateY(0); } 21% { opacity: 1; transform: translateY(100%); } 22%, 100% { opacity: 0; transform: translateY(100%); } }
@keyframes pp-wire-x { 0%, 15% { transform: translateX(0); opacity: 0; } 16% { opacity: 1; transform: translateX(0); } 21% { opacity: 1; transform: translateX(100%); } 22%, 100% { opacity: 0; transform: translateX(100%); } }

@container loop (min-width: 760px) {
  .pp-loop__row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s6); }
  .pp-st { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--s4); }
  .pp-st__art { width: 100%; max-width: 192px; }
  .pp-wire { left: calc(100% + 4px); top: 34%; width: calc(var(--s6) - 8px); height: var(--px); background: repeating-linear-gradient(90deg, var(--k) 0 4px, transparent 4px 8px); }
  .pp-wire__run { left: 0; top: 50%; width: calc(100% - 16px); height: 0; animation-name: pp-wire-x; }
  .pp-wire__run i { left: 0; top: -8px; }
  .pp-st__txt { grid-template-columns: auto minmax(0, 1fr); }
}

/* in-scene motion (SVG groups; px = art pixels) */
.pp-pct, .pp-cursor, .pp-cbtn, .pp-earner, .pp-potpal, .pp-happy, .pp-walk { transform-box: fill-box; transform-origin: center bottom; }
.pp-pct { transform-origin: center; }
.pp-cursor { transform-origin: left top; }
.pp-walk { animation: pp-bob calc(1s * var(--loop, 1)) steps(1, end) infinite; }
.pp-walk--b { animation-delay: calc(.5s * var(--loop, 1)); }
.pp-hop { opacity: 0; animation: pp-hop var(--cyc) var(--d) infinite; }
@keyframes pp-hop {
  0% { opacity: 1; transform: translate(-9px, 5px); }
  5% { transform: translate(-5px, -2px); }
  10% { transform: translate(0, -4px); }
  15% { transform: translate(5px, -2px); }
  19% { opacity: 1; transform: translate(9px, 5px); }
  20%, 100% { opacity: 0; transform: translate(9px, 5px); }
}
.pp-tag { opacity: 0; animation: pp-tag var(--cyc) var(--d) infinite steps(1, end); }
@keyframes pp-tag { 0%, 8% { opacity: 0; } 9%, 19% { opacity: 1; } 20%, 100% { opacity: 0; } }
.pp-pile { animation: pp-jig var(--cyc) var(--d) infinite steps(1, end); }
@keyframes pp-jig { 0% { transform: translateY(0); } 2% { transform: translateY(-1px); } 4%, 100% { transform: translateY(0); } }
.pp-slice { opacity: 0; animation: pp-slice var(--cyc) var(--d) infinite; }
@keyframes pp-slice { 0%, 3% { opacity: 0; transform: translate(-10px, -4px); } 5% { opacity: 1; transform: translate(-8px, -6px); } 12% { transform: translate(-2px, -2px); } 18% { opacity: 1; transform: translate(6px, 2px); } 20%, 100% { opacity: 0; transform: translate(8px, 2px); } }
.pp-pct { animation: pp-pct var(--cyc) var(--d) infinite steps(1, end); }
@keyframes pp-pct { 0%, 3% { transform: scale(1); } 4%, 10% { transform: scale(1.15); } 11%, 100% { transform: scale(1); } }
.pp-drop { opacity: 0; animation: pp-drop var(--cyc) var(--d) infinite; }
.pp-drop--2 { animation-name: pp-drop2; }
@keyframes pp-drop { 0% { opacity: 0; transform: translateY(-2px); } 2% { opacity: 1; } 9% { opacity: 1; transform: translateY(10px); } 10%, 100% { opacity: 0; transform: translateY(12px); } }
@keyframes pp-drop2 { 0%, 7% { opacity: 0; transform: translateY(-2px); } 9% { opacity: 1; } 16% { opacity: 1; transform: translateY(10px); } 17%, 100% { opacity: 0; transform: translateY(12px); } }
.pp-potpal { animation: pp-happy var(--cyc) var(--d) infinite steps(1, end); }
.pp-pop { opacity: 0; animation: pp-pop var(--cyc) var(--d) infinite; }
@keyframes pp-pop { 0% { opacity: 0; transform: translateY(5px); } 4% { opacity: 1; transform: translateY(0); } 8% { transform: translateY(-2px); } 16% { opacity: 1; transform: translateY(-3px); } 19%, 100% { opacity: 0; transform: translateY(-5px); } }
.pp-earner { animation: pp-happy2 var(--cyc) var(--d) infinite steps(1, end); }
@keyframes pp-happy2 { 0%, 5% { transform: translateY(0); } 6%, 9% { transform: translateY(-2px); } 10%, 100% { transform: translateY(0); } }
.pp-cursor { animation: pp-cursor var(--cyc) var(--d) infinite; }
@keyframes pp-cursor { 0% { transform: translate(9px, 8px); } 5% { transform: translate(0, 0); } 6% { transform: translate(0, 0) scale(.85); } 8% { transform: translate(0, 0) scale(1); } 20% { transform: translate(0, 0); } 30%, 100% { transform: translate(9px, 8px); } }
.pp-cbtn { animation: pp-press var(--cyc) var(--d) infinite steps(1, end); }
@keyframes pp-press { 0%, 5% { transform: translateY(0); } 6%, 8% { transform: translateY(1px); } 9%, 100% { transform: translateY(0); } }
.pp-fly { opacity: 0; animation: pp-fly var(--cyc) var(--d) infinite; }
@keyframes pp-fly { 0%, 6% { opacity: 0; transform: translate(0, 8px); } 8% { opacity: 1; transform: translate(4px, 0); } 12% { transform: translate(14px, -3px); } 16% { opacity: 1; transform: translate(24px, 2px); } 18%, 100% { opacity: 0; transform: translate(25px, 6px); } }
.pp-happy { animation: pp-happy var(--cyc) var(--d) infinite steps(1, end); }
@keyframes pp-happy { 0%, 14% { transform: translateY(0); } 15%, 18% { transform: translateY(-2px); } 19%, 100% { transform: translateY(0); } }
.pp-svgtxt { font-family: var(--f-pixel); font-size: 5px; fill: var(--k); }
.pp-svgtxt--xs { font-size: 4px; }

/* ---------- REVEAL modal ---------- */
html.pp-lock { overflow: hidden; }
.pp-rv { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--s4); }
.pp-rv__backdrop {
  position: absolute; inset: 0; cursor: pointer;
  background-color: color-mix(in srgb, var(--blue) 86%, transparent);
  background-image: radial-gradient(rgba(255,255,255,.18) 1.5px, transparent 1.6px);
  background-size: 16px 16px; animation: pp-fade var(--dur-2) ease-out both;
}
@keyframes pp-fade { from { opacity: 0; } to { opacity: 1; } }
.pp-rv__win {
  position: relative; display: flex; flex-direction: column; width: min(100%, 1040px); max-height: calc(100dvh - 32px);
  background: var(--c-panel); box-shadow: var(--ring-2), var(--drop); outline: none;
  animation: pp-win-in var(--dur-3) var(--ease-snap) both;
}
.pp-rv--one .pp-rv__win { width: min(100%, 760px); }
.pp-rv--few .pp-rv__win { width: min(100%, 1000px); }
@keyframes pp-win-in { from { opacity: 0; transform: translateY(var(--s6)) scale(.96); } to { opacity: 1; transform: none; } }
.pp-rv.is-closing .pp-rv__win, .pp-rv.is-closing .pp-rv__backdrop { opacity: 0; transition: opacity 160ms; }
.pp-rv__x { width: var(--s6); height: var(--s6); margin-left: auto; border: 0; background: var(--red); color: var(--paper); font: 700 var(--t-lg)/1 var(--f-display); cursor: pointer; box-shadow: 0 0 0 2px var(--k); }
.pp-rv__x:hover { background: var(--pink); }
.pp-rv__body { overflow: auto; overscroll-behavior: contain; padding: var(--s5); display: grid; gap: var(--s5); }
.pp-rv__head { display: grid; gap: var(--s2); }
.pp-rv__kicker { margin: 0; display: inline-flex; align-items: center; gap: var(--s2); font: 400 var(--t-pixel-s)/1.6 var(--f-pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-soft); }
.pp-rv__title { margin: 0; font: 700 clamp(24px, 4vw, 40px)/var(--lh-tight) var(--f-display); color: var(--c-ink); }
.pp-rv__grid { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); padding: var(--s1); }
.pp-rv--few .pp-rv__grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pp-rv--one .pp-rv__grid { grid-template-columns: minmax(0, 1fr); }
.pp-rv__foot { display: grid; gap: var(--s4); padding: var(--s4) var(--s5); background: var(--c-panel-2); box-shadow: inset 0 var(--px) 0 0 var(--k); }
.pp-rv__sum { display: flex; flex-wrap: wrap; gap: var(--s3); }
.pp-rv__sum[hidden] { display: none; }
.pp-rv__chip { display: grid; gap: 2px; padding: var(--s2) var(--s3); background: var(--c-panel); box-shadow: var(--ring); animation: pp-thumb-in var(--dur-3) var(--ease-snap) both; flex: 1 1 180px; }
.pp-rv__chip span { font: 400 var(--t-pixel-s)/1.6 var(--f-pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-soft); }
.pp-rv__chip b { font: 700 var(--t-lg)/1.15 var(--f-display); }
.pp-rv__chip em { font: 500 var(--t-xs)/1.4 var(--f-body); font-style: normal; color: var(--c-ink-soft); }
.pp-rv__chip--pot { background: var(--mint); }
.pp-rv__chip--pot span, .pp-rv__chip--pot em { color: var(--k); }
.pp-rv__acts { display: flex; gap: var(--s4); }
.pp-rv__acts .pp-btn { flex: 1 1 0; min-width: 0; padding-inline: var(--s3); }

/* a booting card = a little PC: screen on top, terminal below */
.pp-card { position: relative; display: grid; gap: var(--s2); padding: var(--s2); background: var(--c-panel-2); box-shadow: var(--ring), var(--drop); min-width: 0; }
.pp-card__crt { position: relative; aspect-ratio: 1; background: var(--c-screen); overflow: hidden; box-shadow: var(--ring); }
.pp-card__crt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(10,10,12,.16) 0 2px, transparent 2px 4px); }
.pp-card__art { position: absolute; inset: 0; opacity: 0; }
.pp-card__art img, .pp-card__art svg { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.pp-card__noise { position: absolute; inset: -8px; opacity: 0; background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 2px, transparent 2px 5px),
  repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 3px, transparent 3px 7px); }
.pp-card.is-waiting .pp-card__noise, .pp-card.is-lost .pp-card__noise { opacity: 1; animation: pp-noise .22s steps(2, end) infinite; }
@keyframes pp-noise { 0% { transform: translate(0, 0); } 50% { transform: translate(-3px, 2px); } 100% { transform: translate(2px, -3px); } }
.pp-card.is-waiting .pp-card__crt::before { content: "WAITING FOR SIGNAL"; position: absolute; left: 0; right: 0; top: 50%; z-index: 2; transform: translateY(-50%); text-align: center; color: var(--glow); font: 400 var(--t-pixel-s)/1.4 var(--f-pixel); letter-spacing: .1em; animation: pp-live 1s steps(1, end) infinite; }
.pp-card__flash { position: absolute; inset: 0; z-index: 3; background: #F4FBFF; opacity: 0; transform: scale(0, .01); pointer-events: none; }
.pp-card.is-booting .pp-card__flash { animation: pp-crt-on .52s linear forwards; }
@keyframes pp-crt-on { 0% { opacity: 1; transform: scale(0, .01); } 30% { opacity: 1; transform: scale(1, .01); } 62% { opacity: .95; transform: scale(1, 1); } 100% { opacity: 0; transform: scale(1, 1); } }
.pp-card.is-on .pp-card__art { opacity: 1; animation: pp-flicker .6s steps(1, end); }
.pp-card.is-lost .pp-card__art { opacity: .55; }
@keyframes pp-flicker { 0% { opacity: .2; } 15% { opacity: 1; } 30% { opacity: .5; } 45%, 100% { opacity: 1; } }
.pp-card.is-done { animation: pp-done var(--dur-3) var(--ease-snap); }
@keyframes pp-done { 0% { transform: translateY(0); } 40% { transform: translateY(calc(var(--px) * -2)); } 100% { transform: translateY(0); } }
.pp-card__term { min-height: 64px; padding: var(--s2) var(--s3); background: var(--c-screen); color: var(--glow); font: 400 var(--t-pixel-s)/1.9 var(--f-pixel); letter-spacing: .04em; text-shadow: var(--glow-text); box-shadow: var(--ring); overflow: hidden; }
.pp-rv--one .pp-card__term, .pp-rv--few .pp-card__term { font-size: var(--t-pixel-s); min-height: 220px; }
.pp-card__lines { display: grid; }
.pp-ln { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); min-width: 0; }
.pp-ln__v, .pp-ln--ok .pp-ln__k, .pp-ln--err .pp-ln__k, .pp-ln--rank .pp-ln__k { font: 700 var(--t-md)/1.4 var(--f-display); letter-spacing: 0; }
.pp-rv--many .pp-ln__v, .pp-rv--many .pp-ln--ok .pp-ln__k, .pp-rv--many .pp-ln--rank .pp-ln__k { font-size: var(--t-sm); }
.pp-rv--many .pp-ln__v { white-space: normal; overflow: visible; }
.pp-ln__k { opacity: .75; white-space: nowrap; }
.pp-ln__v { color: var(--paper); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-ln--ok .pp-ln__k { opacity: 1; }
.pp-ln--ok .pp-ln__v { color: var(--glow-green); }
.pp-ln--err .pp-ln__v { color: var(--glow-red); }
.pp-ln--rank { margin-top: var(--s1); }
.pp-ln--rank .pp-ln__k { opacity: 1; color: var(--glow-yellow); text-shadow: 0 0 8px color-mix(in srgb, var(--glow-yellow) 55%, transparent); white-space: normal; }
.pp-caret { display: inline-block; width: var(--s2); height: var(--s3); margin-top: var(--s1); background: var(--glow); animation: pp-live .8s steps(1, end) infinite; }
.pp-card.is-done .pp-caret { visibility: hidden; }
.pp-card__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 720px) {
  .pp-rv--one .pp-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .pp-rv--one .pp-card__term { font-size: var(--t-pixel); line-height: 1.7; }
}
@media (max-width: 560px) {
  .pp-rv { padding: var(--s2); }
  .pp-rv__body { padding: var(--s4); }
  .pp-rv__foot { padding: var(--s3) var(--s4) var(--s4); }
  .pp-rv__grid { gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-rv--one .pp-rv__grid { grid-template-columns: minmax(0, 1fr); }
  .pp-rv--one .pp-card__term, .pp-rv--few .pp-card__term { min-height: 0; }
  .pp-rv__chip { flex-basis: 140px; padding: var(--s1) var(--s2); }
  .pp-rv__chip b { font-size: var(--t-md); }
  .pp-rv__chip--pot { display: none; }
  .pp-rv__foot { padding: var(--s3); }
  .pp-rv__acts { gap: var(--s3); }
}

/* ---------- dev/pot.html harness only (pp-harness is never used on the real page) ---------- */
.pp-harness { margin: 0; background: var(--sky); color: var(--c-ink); font: 400 var(--t-md)/var(--lh-body) var(--f-body); }
.pp-harness__nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); padding: var(--s3) var(--gutter); background: var(--c-panel); box-shadow: inset 0 calc(var(--px) * -1) 0 0 var(--k); font: 400 var(--t-pixel-s)/1.8 var(--f-pixel); }
.pp-harness__nav a { color: var(--blue-deep); }
.pp-harness__mint { padding: var(--s6) var(--gutter); background: var(--blue); color: var(--paper); font: 400 var(--t-pixel-s)/1.6 var(--f-pixel); }
.pp-harness__sec { padding: var(--s9) 0; background: var(--mint); }
.pp-harness__wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.pp-harness__head p { margin: 0 0 var(--s2); font: 400 var(--t-pixel)/1.2 var(--f-pixel); text-transform: uppercase; }
.pp-harness__head h2 { margin: 0 0 var(--s7); font: 700 var(--t-3xl)/var(--lh-tight) var(--f-display); }
.pp-harness__grid { display: grid; gap: var(--s7); }