/* =========================================================
   Playground page: a wall of projects to try
   ========================================================= */
.pg-wall{height:calc(100vh - 67px);height:calc(100svh - 67px);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;
  padding-block:6px calc(6px + env(safe-area-inset-bottom,0px))}
@media (max-width:640px) and (orientation:portrait){
  .pg-wall{grid-template-columns:1fr;grid-template-rows:repeat(4,minmax(150px,1fr));height:auto;min-height:calc(100svh - 67px)}
}

/* End credits tile: a slow credits roll behind the name */
.mini-roll{position:absolute;left:0;right:0;top:0;display:grid;justify-items:center;gap:14px;padding:30px 12px;text-align:center;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);opacity:.6;animation:miniRoll 26s linear infinite}
.mini-roll b{display:block;margin-top:4px;font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.02em;text-transform:none;color:var(--dim)}
@keyframes miniRoll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce){.mini-roll{animation:none}}

/* Multiphone Broadcast tile: four little camera feeds, tally passing between them */
.mini-mv{position:absolute;inset:18px 18px 12px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:5px;opacity:.55}
.mv-cam{position:relative;border:1px solid #1f1f1f;background:#050505;overflow:hidden;animation:mvTally 8s steps(1) infinite}
.mv-cam::before{content:"";position:absolute;inset:0;opacity:.09;background:repeating-linear-gradient(0deg,var(--bone) 0 1px,transparent 1px 3px)}
.mv-cam b{position:absolute;left:6px;bottom:5px;font-weight:400;font-size:8px;letter-spacing:.16em;color:var(--faint)}
.mv-cam:nth-child(2){animation-delay:-2s}.mv-cam:nth-child(3){animation-delay:-4s}.mv-cam:nth-child(4){animation-delay:-6s}
@keyframes mvTally{0%{border-color:var(--tally);box-shadow:inset 0 0 0 1px var(--tally)}25%{border-color:#1f1f1f;box-shadow:none}
  75%{border-color:#19C24A;box-shadow:inset 0 0 0 1px #19C24A}}
@media (prefers-reduced-motion:reduce){.mv-cam{animation:none}.mv-cam:first-child{border-color:var(--tally)}}

/* Lower thirds tile: a name strap wiping on and off over a green screen */
.mini-lt{position:absolute;inset:0;background:linear-gradient(180deg,#03140a,#020a05);opacity:.75}
.mini-lt .b,.mini-lt .p{position:absolute;bottom:26%;height:44px}
.mini-lt .b{left:9%;width:4px;background:var(--tally);animation:ltBar 6s ease-in-out infinite;transform-origin:center}
.mini-lt .p{left:calc(9% + 4px);display:grid;align-content:center;gap:4px;padding:0 14px;background:#0b0b0b;white-space:nowrap;
  animation:ltPlate 6s ease-in-out infinite}
.mini-lt b{font-family:var(--body);font-weight:600;font-size:14px;color:var(--bone);letter-spacing:.01em}
.mini-lt em{font-style:normal;font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
@keyframes ltBar{0%,6%{transform:scaleY(0)}14%,82%{transform:scaleY(1)}90%,100%{transform:scaleY(0)}}
@keyframes ltPlate{0%,10%{clip-path:inset(0 100% 0 0)}22%,76%{clip-path:inset(0 0 0 0)}88%,100%{clip-path:inset(0 100% 0 0)}}
@media (prefers-reduced-motion:reduce){.mini-lt .b,.mini-lt .p{animation:none}}