/* =========================================================
   Sand Toy (#play, js/play.js) and Press Kit (#press, js/press.js)
   Built from the same pieces as the rest of the site: .game
   frames, .btn, .section-head, .stat, .fact, .faq-item.
   ========================================================= */

/* notched pixel corners for the new bits */
.toy-el, .toy-frame, .pk-shot, .pk-art, .pk-logo-art, .pk-jump a, .pk-copy {
  --n: 3px;
  clip-path: polygon(
    0 var(--n), var(--n) var(--n), var(--n) 0,
    calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n),
    100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n))
  );
}

/* =========================================================
   SAND TOY
   ========================================================= */
.toy .game { --c: inherit; }

.toy-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin: -12px 0 24px;
}
.toy-lede { margin: 0; flex: 1 1 420px; color: var(--muted); }

.toy-box { margin-bottom: 24px; }
.toy-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  gap: 18px;
  padding: 16px;
  align-items: start;
}

/* the canvas sits in a gray pixel frame; its size is set in js so cells land on whole pixels */
.toy-stage { min-width: 0; display: flex; justify-content: center; }
.toy-frame {
  --n: 4px;
  max-width: 100%;
  padding: 4px;
  background: var(--line);
  line-height: 0;
}
.toy-canvas {
  display: block;
  max-width: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
  cursor: crosshair;
  background: #060609;
}

.toy-side { min-width: 0; display: flex; flex-direction: column; }
.toy-h {
  margin: 4px 0 10px;
  color: var(--c);
  font: 10px/1.5 var(--font-pixel);
  text-transform: uppercase;
}

/* element buttons: each one is the color of its stuff (like Sandboxels) */
.toy-els { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.toy-el {
  min-width: 0;
  padding: 10px 6px;
  border: 0;
  background: var(--el);
  color: var(--el-ink);
  font: 9px/1.2 var(--font-pixel);
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    inset -3px -3px 0 rgba(0, 0, 0, 0.3),
    inset 3px 3px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.15s steps(2), filter 0.1s;
}
.toy-el:hover { filter: brightness(1.15); transform: translateY(-2px); }
.toy-el[aria-pressed="true"] {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #000;
}
.toy-el:focus-visible { outline: 3px dashed var(--gold); outline-offset: 2px; }
.toy-el--erase { box-shadow: inset 0 0 0 3px var(--pink); }
.toy-el--erase[aria-pressed="true"] { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--pink); }

/* October elements only when the Halloween look is on */
.toy-h--hw, .toy-els--hw { display: none; }
[data-theme="halloween"] .toy-h--hw { display: block; margin-top: 14px; }
[data-theme="halloween"] .toy-els--hw { display: grid; }

.toy-hint {
  min-height: 3.9em;
  margin: 14px 0 12px;
  padding: 10px 12px;
  background: #000;
  box-shadow: inset 0 0 0 2px var(--line);
  color: #cfcfcf;
  font-size: 19px;
  line-height: 1.15;
}
.toy-tools { display: grid; gap: 12px; }
.toy-brush { display: grid; gap: 8px; }
.toy-brush-label { color: var(--muted); font: 9px/1 var(--font-pixel); text-transform: uppercase; }
.toy-brush-label b { color: var(--c); font-weight: normal; }
.toy-brush-in { width: 100%; margin: 0; accent-color: var(--c); }
.toy-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.toy-btns .btn { padding: 10px 11px; font-size: 9px; }
.toy-pause[aria-pressed="true"] { background: var(--c); color: #000; }
.toy-keys { margin: 12px 0 0; color: var(--muted); font-size: 17px; line-height: 1.15; }

/* the "this is just a toy" box */
.toy-cta { margin-bottom: 40px; }
.toy-cta-in {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 28px;
}
.toy-cta-text { display: flex; flex-direction: column; align-items: flex-start; }
.toy-cta-text .pitch-big { margin-top: 16px; }
.toy-cta-stats .stats--card { margin: 0; }

/* =========================================================
   PRESS KIT
   ========================================================= */
.pk-h {
  margin: 0 0 12px;
  color: var(--c, var(--gold));
  font: 11px/1.5 var(--font-pixel);
  text-transform: uppercase;
}
.pk-intro { --c: var(--gold); }
.pk-intro-in {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 30px;
  padding: 26px 28px 18px;
}
.pk-intro p { margin: 0 0 12px; color: #cfcfcf; }
.pk-intro a { color: var(--gold); }
.pk-licenses { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.pk-licenses a { font-size: 20px; }

/* jump to a game */
.pk-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 48px; padding: 0; list-style: none; }
.pk-jump a {
  display: inline-block;
  padding: 10px 12px;
  background: #000;
  color: var(--c);
  box-shadow: inset 0 0 0 3px var(--c);
  font: 9px/1 var(--font-pixel);
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.15s steps(2);
}
.pk-jump a:hover, .pk-jump a:focus-visible { background: var(--c); color: #000; transform: translateY(-2px); outline: none; }

/* one game */
.pk-game { scroll-margin-top: 110px; margin-bottom: 30px; }
.pk-game .game { --c: inherit; margin-bottom: 14px; }
.pk-kind { margin: -16px 0 18px; color: var(--muted); font: 9px/1.6 var(--font-pixel); text-transform: uppercase; }
.pk-sheet-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 28px;
  padding: 28px;
}
.pk-media { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pk-art { --n: 4px; display: block; padding: 4px; background: var(--line); }
.pk-art img { width: 100%; height: auto; }
.pk-media .game-title { margin: 4px 0 0; }
.pk-tagline { margin: 0; color: var(--c); }
.pk-short { margin: 0; color: #cfcfcf; }
.pk-links { display: flex; flex-wrap: wrap; gap: 10px; }
.pk-facts dl { display: grid; gap: 12px; margin: 0 0 18px; }
.pk-facts dd a { color: var(--c); }
.pk-copies { display: flex; flex-wrap: wrap; gap: 8px; }
.pk-copy {
  padding: 10px 12px;
  border: 0;
  background: var(--line);
  color: var(--text);
  font: 9px/1 var(--font-pixel);
  text-transform: uppercase;
  cursor: pointer;
}
.pk-copy:hover { background: var(--line-light); }
.pk-copy.is-done { background: var(--c); color: #000; }
.pk-copy:focus-visible { outline: 3px dashed var(--gold); outline-offset: 2px; }

/* long description + features fold out */
.pk-more { display: grid; gap: 10px; margin-bottom: 24px; }
.pk-more .faq-item[open] { box-shadow: inset 0 0 0 3px var(--c); }
.pk-more .faq-a p { margin: 0 0 12px; }
.pk-more .features { padding: 0 0 6px; }

/* screenshots */
.pk-shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.pk-shot { --n: 4px; display: flex; flex-direction: column; margin: 0; padding: 4px; background: var(--line); }
.pk-shot > a { display: block; line-height: 0; }
.pk-shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.pk-shot--header img { object-fit: contain; }
.pk-shot figcaption {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px 12px;
  background: var(--panel);
}
.pk-cap { color: #cfcfcf; font-size: 19px; line-height: 1.15; }
.pk-dlrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: auto; }
.pk-dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c);
  font: 9px/1.4 var(--font-pixel);
  text-transform: uppercase;
  text-decoration: none;
}
.pk-dl:hover { text-decoration: underline; }
.pk-dl .px-icon { width: 12px; }
.pk-dim { color: var(--muted); font-size: 18px; line-height: 1; }

/* logos */
.pk-logos { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; margin-bottom: 44px; }
.pk-logos .game { --c: var(--gold); margin-bottom: 0; display: flex; flex-direction: column; }
.pk-logos .pk-logo { flex: 1; }
.pk-logo { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; }
.pk-logo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pk-logo-art {
  --n: 4px;
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: 18px;
  background: #000;
  box-shadow: inset 0 0 0 3px var(--line);
}
.pk-logo-art--light { background: #efe9dc; }
.pk-logo-art img { width: 100%; max-width: 246px; height: auto; image-rendering: pixelated; }
.pk-logo-art--icon img { width: 80px; }
.pk-logo p { margin: 0; color: #cfcfcf; }
.pk-files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.pk-files a { display: inline-flex; align-items: center; gap: 8px; color: var(--c); font: 9px/1.6 var(--font-pixel); text-transform: uppercase; text-decoration: none; }
.pk-files a:hover { text-decoration: underline; }
.pk-files .px-icon { width: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .toy-in { grid-template-columns: minmax(0, 1fr); }
  .toy-els { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .toy-hint { min-height: 0; }
  .toy-cta-in { grid-template-columns: minmax(0, 1fr); }
  .pk-intro-in, .pk-sheet-in, .pk-logos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .toy-top { margin-top: -8px; }
  .pk-game { scroll-margin-top: 170px; } /* the header is taller on phones */
  .toy-top .btn { width: 100%; justify-content: center; }
  .toy-in { padding: 10px; gap: 12px; }
  .toy-els { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 5px; }
  .toy-el { padding: 9px 4px; font-size: 8px; }
  .toy-keys { display: none; } /* no keyboard on a phone */
  .toy-cta-in { padding: 18px; }
  .toy-cta .btn--big { padding: 18px 12px; font-size: 10px; }
  .pk-intro-in, .pk-sheet-in { padding: 18px; }
  .pk-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pk-shot figcaption { padding: 8px 8px 10px; }
  .pk-cap { font-size: 17px; }
  .pk-links .btn { width: 100%; justify-content: center; }
  .pk-logo { padding: 18px; }
  .pk-logo-row { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .pk-shots { grid-template-columns: minmax(0, 1fr); }
}