@font-face { font-family: KMini; src: url(assets/fonts/kenney-mini.ttf) format('truetype'); }
@font-face { font-family: KBlocks; src: url(assets/fonts/kenney-blocks.ttf) format('truetype'); }
@font-face { font-family: KRocket; src: url(assets/fonts/kenney-rocket.ttf) format('truetype'); }
@font-face { font-family: KPixel; src: url(assets/fonts/kenney-pixel.ttf) format('truetype'); }
@font-face { font-family: KHigh; src: url(assets/fonts/kenney-high.ttf) format('truetype'); }

:root {
  --bg: #f4f1ea; --ink: #241f2b; --muted: #6b6274;
  --card: #1d1824; --card-ink: #efe6d6; --card-muted: #a99d8c;
  --off: #e0605a; --on: #6cc96a; --accent: #d9a35b;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.wrap { max-width: 720px; margin: 0 auto; padding: 24px 12px 40px; }
h1, h2 { font-weight: 750; letter-spacing: -0.01em; }
h1 { font-size: 26px; line-height: 1.2; margin: 0 0 10px; }
.intro p { margin: 0 0 20px; color: var(--muted); }

.trick { background: var(--card); color: var(--card-ink); border-radius: 12px; padding: 14px 12px 12px; margin: 0 0 22px; }
.trick-head { display: flex; gap: 10px; align-items: flex-start; margin: 0 2px 10px; }
.num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--card);
  font: 700 15px/28px system-ui, sans-serif; text-align: center; }
.trick h2 { font-size: 19px; margin: 1px 0 3px; color: #fff; }
.rule { margin: 0; font-size: 14px; color: var(--card-muted); }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.side { margin: 0; min-width: 0; }
.side figcaption { font-size: 13px; margin: 0 0 4px; color: var(--card-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { display: inline-block; font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 7px; border-radius: 99px; color: #1d1824; }
.off .tag { background: var(--off); }
.on .tag { background: var(--on); }
.side canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 6px; background: #000; }
.off canvas { box-shadow: 0 0 0 2px rgba(224,96,90,0.55); }
.on canvas { box-shadow: 0 0 0 2px rgba(108,201,106,0.6); }
.stat { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--card-muted); margin-top: 5px; min-height: 1.4em; font-variant-numeric: tabular-nums; }

.shared { margin: 8px 2px 0; font-size: 12.5px; color: var(--card-muted); }
.progress { height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; margin: 8px 0 0; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.is-playing .progress i { background: var(--on); }

.caption { margin: 8px 2px 10px; min-height: 3em; font-size: 15px; line-height: 1.45; color: #fff; }
.caption.in { animation: capIn 0.35s ease-out; }
@keyframes capIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.controls button { font: inherit; font-size: 14px; padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06); color: var(--card-ink); cursor: pointer; min-height: 36px; }
.controls button:hover { background: rgba(255,255,255,0.12); }
.controls button:focus-visible, .stack:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.controls .play { background: var(--accent); color: #1d1824; border-color: transparent; font-weight: 600; }
.controls .play[aria-pressed="true"] { background: var(--on); }
.stackl { font-size: 13px; color: var(--card-muted); display: inline-flex; gap: 6px; align-items: center; margin-left: auto; cursor: pointer; }
.hint { display: none; margin: 8px 2px 0; font-size: 13px; color: var(--card-muted); }
.is-playing .hint { display: block; }
.is-playing canvas { touch-action: none; cursor: crosshair; }

.credits { font-size: 13px; color: var(--muted); text-align: center; }
.credits a { color: inherit; }

@media (max-width: 560px) {
  .pair { grid-template-columns: 1fr; gap: 10px; }
  .stackl { margin-left: 0; }
  h1 { font-size: 22px; }
}

/* ?trick=<id>&solo : just the one demo, edge to edge, for embedding */
.solo body { background: transparent; }
.solo .wrap { max-width: none; padding: 0; }
.solo .intro, .solo .credits { display: none; }
.solo .trick { margin: 0; border-radius: 0; min-height: 100vh; }