/* Track Park (apps/park). Sits on top of apps.css: uses its variables (--line, --cyan, --muted, --font, --mono). */

.park-page .mount{height:min(74vh,640px);min-height:480px}
.park{display:flex;flex-direction:column;height:100%;background:#07070f}

.park-msg{margin:auto;padding:24px;text-align:center;color:var(--muted);font-size:.9rem}

.park-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 12px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.park-tempo,.park-volume{display:flex;align-items:center;gap:8px;font:600 .72rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.park-tempo input{width:clamp(90px,16vw,170px);accent-color:var(--cyan)}
.park-volume input{width:clamp(70px,10vw,120px);accent-color:var(--cyan)}
.park-tempo output,.park-volume output{min-width:2.4em;color:var(--text);font-variant-numeric:tabular-nums}

.park-btn{
  font:600 .72rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);cursor:pointer;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.park-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.park-btn.on,.park-btn[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:#05050c}
.park-btn:disabled{opacity:.35;cursor:not-allowed}
.park-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.park-bowl{cursor:grab;touch-action:none}

/* the stage lets a phone scroll the page vertically; cats, bowls and the active laser keep their own gestures */
.park-stage{
  position:relative;flex:1;min-height:300px;overflow:hidden;touch-action:pan-y;
  background:
    radial-gradient(ellipse at 50% 120%,rgba(0,229,255,.08),transparent 60%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 48px);
}
.park-stage.laser-on{touch-action:none}

.park-cat{
  position:absolute;left:0;top:0;border-radius:50%;cursor:grab;touch-action:none;will-change:transform;
  box-shadow:0 0 0 2px var(--glow,#888),0 0 22px -4px var(--glow,#888);
  transition:box-shadow .2s;
}
.park-cat.playing{box-shadow:0 0 0 3px var(--glow,#888),0 0 36px 2px var(--glow,#888)}
.park-cat.held{cursor:grabbing;z-index:5;box-shadow:0 12px 30px rgba(0,0,0,.6),0 0 0 3px var(--glow,#888)}
.park-cat.nip{filter:saturate(1.6) hue-rotate(12deg)}
.park-cat.asleep{opacity:.45;filter:grayscale(1)}
/* tempo families: a cat that does not fit the park tempo is dimmed and shows the tempo it needs */
.park-cat.unfit{opacity:.4;filter:grayscale(.75)}
.park-cat.nope{animation:park-nope .4s ease-in-out}
@keyframes park-nope{0%,100%{translate:0}20%{translate:-6px}40%{translate:6px}60%{translate:-4px}80%{translate:4px}}
.park-bpm{position:absolute;right:-6px;bottom:-6px;padding:1px 5px;border-radius:999px;background:var(--panel,#121216);border:1px solid var(--line,#26262E);font:600 .62rem/1.4 var(--mono,ui-monospace,monospace);color:var(--text,#f2f2ee)}
.park-bpm[hidden],.park-fitnote[hidden],.park-fit[hidden]{display:none}
.park-fit{margin-left:8px;font-size:.72rem;color:var(--muted,#8f8f99);white-space:nowrap}
.park-fitnote{margin:0;padding:7px 12px;border-bottom:1px solid var(--line);font-size:.78rem;color:var(--cyan)}
.park-cat:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.park-vid{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;pointer-events:none;background:#0b0b12}
.park-name{
  position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);white-space:nowrap;
  font:600 .62rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text);
  opacity:0;transition:opacity .15s;pointer-events:none;text-shadow:0 1px 4px #000;
}
.park-cat:hover .park-name,.park-cat:focus-visible .park-name,.park-cat.playing .park-name{opacity:1}

.park-slot{position:absolute;border:1px dashed rgba(255,255,255,.28);border-radius:50%;pointer-events:none}
.park-role{position:absolute;left:50%;top:100%;transform:translate(-50%,4px);font:600 .62rem/1 var(--mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap}
.park-laser{position:absolute;width:14px;height:14px;border-radius:50%;background:#ff3b5c;box-shadow:0 0 14px 4px rgba(255,59,92,.7);pointer-events:none;transform:translate(-50%,-50%);z-index:6}
.park-item{position:absolute;font-size:28px;line-height:1;transform:translate(-50%,-50%);pointer-events:none}
.park-ghost{position:fixed;font-size:32px;line-height:1;pointer-events:none;z-index:99;transform:translate(-50%,-50%)}

.park-roam{border-color:var(--cyan);color:var(--cyan)}
.park-note{margin:0;padding:8px 12px;border-bottom:1px solid var(--line);font-size:.78rem;line-height:1.5;color:var(--muted)}
.park-note[hidden],.park-roam[hidden]{display:none}

.park-status{margin:0;padding:7px 12px;border-bottom:1px solid var(--line);font-size:.78rem;line-height:1.5;color:var(--muted)}
.park-status.err{color:#ff9a9a}
.park-status[hidden],.park-kittens[hidden]{display:none}
.park-kittens{padding:10px 12px;border-bottom:1px solid var(--line);font-size:.8rem}
.park-kittens ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.park-kittens li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.park-onstage{display:inline-flex;align-items:center;cursor:pointer}
.park-onstage input{width:18px;height:18px;accent-color:var(--cyan,#3ff);cursor:pointer}
.park-full{margin:8px 0 0;color:#ff9a9a;font-size:.78rem}
/* summoning: a portal opens and the cat spins in through it; sending a cat away shrinks it into a fading ring.
   The cat's own transform places it on the stage every frame, so the animations run on its picture, not on the cat. */
.park-portal{position:absolute;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:1;
  border:5px solid var(--glow,#3ff);
  background:radial-gradient(circle,color-mix(in srgb,var(--glow,#3ff) 45%,transparent) 0%,transparent 65%);
  box-shadow:0 0 50px 16px var(--glow,#3ff),inset 0 0 50px 12px var(--glow,#3ff);
  animation:park-portal 1.4s ease-out forwards}
.park-portal::after{content:'';position:absolute;inset:-20%;border-radius:50%;border:2px solid var(--glow,#3ff);opacity:0;
  animation:park-burst 1.4s ease-out .25s forwards}
@keyframes park-portal{0%{scale:.05;opacity:0;rotate:0deg}20%{scale:1;opacity:1}65%{scale:1.15;opacity:.9;rotate:90deg}100%{scale:2.2;opacity:0;rotate:180deg}}
@keyframes park-burst{0%{scale:.6;opacity:.9}100%{scale:2.4;opacity:0}}
.park-cat.summon .park-vid,.park-cat.summon .park-name{animation:park-summon 1.2s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes park-summon{0%{scale:0;rotate:-540deg;opacity:0;filter:brightness(4)}45%{opacity:1;scale:1.4}75%{scale:.92}100%{scale:1;rotate:0deg;opacity:1;filter:none}}
.park-cat.summon{z-index:4;box-shadow:0 0 0 4px var(--glow,#888),0 0 80px 24px var(--glow,#888)}
.park-cat.dismiss{pointer-events:none;animation:park-dismiss .55s ease-in forwards}
.park-cat.dismiss .park-vid{animation:park-shrink .55s ease-in forwards}
@keyframes park-dismiss{0%{opacity:1;box-shadow:0 0 0 3px var(--glow,#888)}100%{opacity:0;box-shadow:0 0 0 18px transparent}}
@keyframes park-shrink{to{scale:0;rotate:200deg}}
@media (prefers-reduced-motion:reduce){.park-portal,.park-cat.summon .park-vid,.park-cat.summon .park-name,.park-cat.dismiss,.park-cat.dismiss .park-vid{animation-duration:.01s}}
.park-full[hidden]{display:none}
.park-kittens-empty{margin:0;color:var(--muted)}
.park-credit{color:var(--muted);font-size:.72rem;text-decoration:underline;text-underline-offset:2px}
.park-x{margin-left:auto;background:none;border:1px solid var(--line);border-radius:999px;color:var(--text);cursor:pointer;padding:4px 9px;font:inherit}
.park-x:hover{border-color:var(--cyan);color:var(--cyan)}
.park-stage.drop{outline:2px dashed var(--cyan);outline-offset:-8px}

.park-hint{margin:0;padding:9px 12px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted);line-height:1.5}

/* the free pstpst spot: any cat, any stem (a tap switches it) */
.park-slot.free{border:1px solid rgba(0,229,255,.55);box-shadow:0 0 18px -6px var(--cyan,#00e5ff) inset}
.park-slot.free .park-role{color:var(--cyan,#00e5ff)}

/* Waveform Tunnel behind the cats (assets/tunnel.js) */
.park-stage .sw-tunnel{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* ---- studio: sample view, loop trim, one-shot pads, step sequencer (assets/park-studio.js) ---- */
.park-studio{--glow:var(--cyan,#00e5ff);margin-top:14px;border:1px solid var(--line);border-radius:4px;background:#07070f;padding:14px;display:grid;gap:12px}
.park-studio[hidden]{display:none}
.ps-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.ps-pick{display:flex;align-items:center;gap:8px;font:600 .72rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ps-pick select{background:#0d0d18;color:var(--text);border:1px solid var(--line);border-radius:999px;padding:7px 10px;font:inherit;text-transform:none;letter-spacing:0}
.ps-title{margin:0;font-size:1rem;color:var(--glow);text-shadow:0 0 18px var(--glow)}
.ps-close{margin-left:auto}
.ps-loops,.ps-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ps-loop.viewing{outline:2px solid var(--glow);outline-offset:2px}
.ps-loop.trimmed::after{content:' ✂'}
.ps-wave{position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.ps-wave canvas{display:block;width:100%;height:150px;cursor:crosshair;touch-action:none}
.ps-wave-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;color:var(--muted);font-size:.8rem;pointer-events:none}
.ps-wave-msg[hidden]{display:none}
.ps-tip{margin:0;flex:1 1 240px;font-size:.74rem;color:var(--muted);line-height:1.45}
.ps-sub{margin:4px 0 0;font:600 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ps-pads{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ps-pad{--pad:#00e5ff;width:46px;height:46px;padding:0;border-radius:8px;border-color:var(--pad);color:var(--pad);font-size:.9rem;transition:transform .08s}
.ps-pad.empty{opacity:.45;border-style:dashed}
.ps-pad.sel{background:var(--pad);color:#05050c}
.ps-pad.hit{animation:ps-hit .18s ease-out}
@keyframes ps-hit{0%{transform:scale(.88);box-shadow:0 0 22px 4px var(--pad)}100%{transform:scale(1);box-shadow:none}}
.ps-len{display:flex;align-items:center;gap:8px;font:600 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ps-len[hidden]{display:none}
.ps-len input{width:120px;accent-color:var(--cyan)}
.ps-len output{min-width:4.2em;color:var(--text);text-transform:none}
.ps-grid{display:grid;grid-template-columns:20px repeat(16,minmax(0,1fr));gap:3px;align-items:center}
.ps-rowlab{font:600 .7rem/1 var(--mono);text-align:center}
.ps-cell{--pad:#00e5ff;aspect-ratio:1;min-width:0;max-height:30px;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:3px;background:rgba(255,255,255,.03);cursor:pointer}
.ps-cell.beat{background:rgba(255,255,255,.07)}
.ps-cell.on{background:var(--pad);border-color:var(--pad);box-shadow:0 0 10px -2px var(--pad)}
.ps-cell.now{border-color:#fff}
.ps-cell:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
.ps-teach[aria-pressed="true"]{background:#ff3b5c;border-color:#ff3b5c;color:#fff}
.park-studio.teaching .ps-pad{box-shadow:0 0 0 1px #ff3b5c}
@media (max-width:520px){
  .ps-grid{gap:2px;grid-template-columns:14px repeat(16,minmax(0,1fr))}
  .ps-pad{width:40px;height:40px}
}

@media (max-width:520px){
  .park-page .mount{height:min(70vh,560px);min-height:400px}
  .park-bar{gap:6px}
  .park-btn{padding:8px 10px}
  .park-tempo input{width:90px}
  .park-volume input{width:70px}
}
@media (prefers-reduced-motion:reduce){
  .park-cat{transition:none}
}