/* Header, footer, themes and mobile navigation use the shared /styles.css.
   Keep all activity styling scoped so it cannot override the site chrome. */
.playground-page .intro { padding: 65px 0 45px; text-align: center; }
.playground-page .intro h1 { font-family: Georgia, serif; font-size: clamp(32px, 5.6vw, 62px); font-weight: 500; margin: 18px 0; letter-spacing: 2px; color: var(--ink); }
.playground-page .intro > p:last-child { font-size: 14px; color: var(--muted); line-height: 1.8; }
.playground-page .destinations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; perspective: 1100px; padding-bottom: 15px; }
.playground-page .destination { --edge: #dbc7c5; --tint: #f1e5e3; --ink: #9b7779; position: relative; border: 0; border-radius: 14px; background: transparent; box-shadow: none; transform-style: preserve-3d; transition: transform .25s, background .25s; color: var(--ink); text-decoration: none; }
.playground-page .racer { --tint: #e5eced; --edge: #c6d4d6; --ink: #6c8c90; }
.playground-page .words { --tint: #e9edde; --edge: #cdd7bc; --ink: #819169; }
.playground-page .doll { --tint: #eee4f0; --edge: #d8c7df; --ink: #98809f; }
.playground-page .destination:hover { transform: translateY(-5px) rotateX(2deg) rotateY(-2deg); background: #ffffff26; }
.playground-page .destination:active { transform: translateY(2px); }
.playground-page .destination:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.playground-page .art { height: 245px; position: relative; width: 100%; }
.playground-page .art canvas { width: 100%; height: 100%; display: block; position: relative; opacity: 0; transition: opacity .3s; }
.playground-page .art.ready canvas { opacity: 1; }
.playground-page .fallback { position: absolute; inset: 0; display: grid; place-items: center; font-family: Georgia, serif; font-size: 80px; color: var(--ink); text-shadow: 5px 7px var(--edge); }
.playground-page .art.ready .fallback { visibility: hidden; }
.playground-page .art::before { content: ''; position: absolute; inset: 14% 6%; border-radius: 50%; background: radial-gradient(ellipse, var(--tint), transparent 70%); opacity: .6; pointer-events: none; }
.playground-page .card-copy { padding: 0 28px 27px; }
.playground-page .card-copy h2 { font-family: Georgia, serif; font-size: 31px; font-weight: 500; margin: 13px 0 9px; color: var(--ink); }
.playground-page .card-copy p { font-size: 13px; color: var(--muted); margin: 0; }
.playground-page .enter { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #8a95751c; margin-top: 25px; padding-top: 17px; font-size: 12px; color: var(--ink); }
.playground-page .enter b { font-size: 23px; font-weight: 400; }
[data-theme="dark"] .playground-page .destination { --ink: #d4aaa8; }
[data-theme="dark"] .playground-page .racer { --ink: #a9c8cc; }
[data-theme="dark"] .playground-page .words { --ink: #bccca3; }
[data-theme="dark"] .playground-page .doll { --ink: #cbb4d2; }
[data-theme="dark"] .playground-page .art::before { opacity: .16; }
@media (max-width: 900px) {
  .playground-page .destinations { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .playground-page .art { height: 200px; }
  .playground-page .card-copy { padding-inline: 20px; }
  .playground-page .card-copy h2 { font-size: 26px; }
}
@media (max-width: 640px) {
  .playground-page .intro { padding: 37px 0 20px; }
  .playground-page .intro h1 { font-size: clamp(28px, 8vw, 38px); letter-spacing: 1px; }
  .playground-page .intro > p:last-child { font-size: 12px; }
  .playground-page .destinations { grid-template-columns: 1fr; gap: 14px; }
  .playground-page .destination { display: grid; grid-template-columns: 42% 58%; align-items: center; min-height: 195px; }
  .playground-page .art { height: 185px; }
  .playground-page .card-copy { padding: 22px 8px 22px 5px; }
  .playground-page .card-copy h2 { font-size: 27px; }
  .playground-page .enter { margin-top: 18px; padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .playground-page .destination, .playground-page .art canvas { transition: none; }
  .playground-page .destination:hover { transform: none; }
}