/* 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{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-tempo 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)}
.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-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-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}

@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}
}
@media (prefers-reduced-motion:reduce){
  .park-cat{transition:none}
}