/* ==========================================================================
   Pikett · home 04 · Divisions playground. Owner: playground section.
   Desktop: the stage (a small lit room the eight objects live in) takes 7 of
   12 columns, the list of divisions sits to the right and the two columns end
   together. Phones: stage on top (62svh), list below.
   The canvas is transparent: the wall you see is this stage's gradient; the
   scene adds the objects, their soft shadows and a faint floor.
   ========================================================================== */

.playground {
  display: grid; grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(28px, 6vw, 44px);
}

/* ---- stage ----------------------------------------------------------------- */
.playground__stage {
  position: relative; isolation: isolate; overflow: hidden;
  height: 62vh; height: 62svh; min-height: 420px; max-height: 640px;
  border-radius: 24px;
  background:
    /* key light falling from the top left */
    radial-gradient(90% 70% at 30% -8%, rgba(243, 242, 238, .085), rgba(243, 242, 238, 0) 64%),
    /* warm and cool spill from the coloured softboxes, very faint */
    radial-gradient(60% 50% at 0% 55%, rgba(255, 90, 31, .045), rgba(255, 90, 31, 0) 70%),
    radial-gradient(60% 50% at 100% 40%, rgba(59, 91, 255, .05), rgba(59, 91, 255, 0) 70%),
    /* the low wall sits in a little shade (the scene draws the floor itself) */
    radial-gradient(80% 26% at 50% 100%, rgba(0, 0, 0, .26), rgba(0, 0, 0, 0) 75%),
    linear-gradient(180deg, #18181D 0%, #131317 55%, #0F0F12 100%);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
/* hairline frame + soft inner shade, above the canvas */
.playground__stage::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(243, 242, 238, .075),
    inset 0 1px 0 rgba(243, 242, 238, .05),
    inset 0 0 80px rgba(0, 0, 0, .28);
}
.playground__scene { position: absolute; inset: 0; z-index: 1; touch-action: pan-y pinch-zoom; }

.playground__hint {
  left: 22px; top: 20px; pointer-events: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.playground__hint-touch { display: none; }
@media (pointer: coarse) {
  .playground__hint-fine { display: none; }
  .playground__hint-touch { display: inline; }
}
.playground__stage.is-played .playground__hint { opacity: 0; transform: translateY(-6px); }
html.reduced .playground__hint { display: none; }

/* no WebGL: the list does all the work, full width */
.playground__stage:has(.is-fallback) { display: none; }
.playground:has(.is-fallback) .playground__side { grid-column: 1 / -1; }

/* ---- list ------------------------------------------------------------------ */
.playground__side { display: flex; flex-direction: column; min-width: 0; }
.playground__list .div-row { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 14px; padding-block: 15px; }
.playground__list .div-row__name { font-size: clamp(24px, 2.25vw, 36px); }
.playground__list .div-row__name small { margin-top: 7px; line-height: 1.4; }
.playground__house { font-weight: 300; letter-spacing: -.02em; color: var(--fg-2); transition: color .3s var(--ease); }
.playground__list .div-row:hover .playground__house,
.playground__list .div-row.is-hot .playground__house { color: rgba(10, 10, 12, .62); }
.playground__more { margin-top: 26px; }

@media (min-width: 900px) {
  .playground { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: stretch; }
  .playground__stage {
    grid-column: 1 / span 7;
    height: auto; min-height: 78vh; min-height: 78svh; max-height: none;
  }
  .playground__side { grid-column: 8 / -1; }
  .playground__list .div-row { padding-block: 13px; }
}
@media (min-width: 900px) and (max-height: 700px) {
  .playground__stage { min-height: 540px; }
}
@media (min-width: 1500px) {
  .playground__list .div-row { padding-block: 16px; }
}