/* ============================================================
   xplay · excalidraw-style playable diagram engine
   TheTestingAcademy · standalone, embeddable pages
   Fonts expected on page: Caveat, Instrument Sans, IBM Plex Mono
   ============================================================ */

:root {
  --xp-ink: #1e1e1e;
  --xp-soft: #5c5f66;
  --xp-paper: #ffffff;
  --xp-accent: #e8590c;
  --xp-accent-soft: #ffd8bf;
  --xp-yellow: #fff3bf; --xp-green: #d3f9d8; --xp-blue: #d0ebff;
  --xp-red: #ffe3e3;    --xp-purple: #e5dbff; --xp-gray: #f1f3f5;
  --hand: "Caveat", cursive;
  --body: "Instrument Sans", "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body.xplay {
  font-family: var(--body); color: var(--xp-ink); background: var(--xp-paper);
  background-image: radial-gradient(rgba(30,30,30,.10) 1px, transparent 1px);
  background-size: 22px 22px;
  min-height: 100vh; line-height: 1.55;
}

/* wobbly hand-drawn box helper */
.sketch {
  border: 2px solid var(--xp-ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

/* ---------- header strip ---------- */
.xh { max-width: 1240px; margin: 0 auto; padding: 30px 26px 6px; }
.xh .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.xh .tag {
  font-family: var(--mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 12px; background: var(--xp-yellow);
  border: 2px solid var(--xp-ink);
  border-radius: 225px 15px 255px 15px / 15px 255px 15px 225px;
}
.xh .tag.alt { background: var(--xp-blue); }
.xh h1 {
  font-family: var(--hand); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.02; margin: 14px 0 6px;
}
.xh h1 em { font-style: normal; color: var(--xp-accent); }
.xh .end {
  font-size: 1.02rem; color: var(--xp-soft); max-width: 60em;
}
.xh .end b { color: var(--xp-ink); }

/* ---------- player ---------- */
.xctl {
  max-width: 1240px; margin: 20px auto 0; padding: 0 26px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.xbtn2 {
  font-family: var(--hand); font-weight: 700; font-size: 1.12rem;
  padding: 6px 20px; cursor: pointer; background: #fff; color: var(--xp-ink);
  border: 2px solid var(--xp-ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 3px 3px 0 rgba(30,30,30,.85);
  transition: transform .1s, box-shadow .1s;
}
.xbtn2:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(30,30,30,.85); }
.xbtn2:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(30,30,30,.85); }
.xbtn2:disabled { opacity: .35; cursor: not-allowed; }
.xbtn2.primary { background: var(--xp-accent); color: #fff; }
.xstep {
  font-family: var(--mono); font-size: .8rem; font-weight: 600;
  background: var(--xp-gray); border: 2px solid var(--xp-ink);
  border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
  padding: 8px 16px; min-width: 104px; text-align: center;
}
.xmode { display: flex; }
.xmode button {
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  border: 2px solid var(--xp-ink); padding: 8px 14px; cursor: pointer;
  background: #fff; color: var(--xp-soft);
}
.xmode button:first-child { border-radius: 225px 0 0 15px / 15px 0 0 225px; border-right-width: 1px; }
.xmode button:last-child { border-radius: 0 15px 255px 0 / 0 225px 15px 0; border-left-width: 1px; }
.xmode button.on { background: var(--xp-ink); color: #fff; }

/* ---------- caption ---------- */
.xcap { max-width: 1240px; margin: 16px auto 0; padding: 0 26px; }
.xcap .inner {
  font-size: 1rem; background: #fffdf4;
  border: 2px solid var(--xp-ink);
  border-radius: 15px 255px 15px 225px / 225px 15px 255px 15px;
  padding: 14px 20px; min-height: 3.4em; position: relative;
}
.xcap .inner b:first-child, .xcap .inner .lead {
  font-family: var(--hand); font-weight: 700; font-size: 1.35rem; color: var(--xp-accent);
  margin-right: 6px;
}

/* ---------- map ---------- */
.xmapwrap { max-width: 1240px; margin: 18px auto 40px; padding: 0 26px; }
.xmap {
  position: relative; background: #fff;
  border: 2px solid var(--xp-ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 26px 22px 34px; overflow-x: auto;
  background-image: radial-gradient(rgba(30,30,30,.07) 1px, transparent 1px);
  background-size: 22px 22px;
}
.xcanvas { position: relative; min-width: 940px; }
.xsvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.xrows { position: relative; z-index: 2; display: grid; gap: 26px; }
.xrow { display: flex; gap: 26px; align-items: stretch; justify-content: center; }
.xgroup {
  border: 2px dashed rgba(30,30,30,.45); border-radius: 14px;
  padding: 34px 14px 14px; position: relative; flex: 1 1 auto;
  display: flex; gap: 12px; flex-wrap: wrap; align-content: flex-start; justify-content: center;
}
.xgroup > .gt {
  position: absolute; top: 4px; left: 16px;
  font-family: var(--hand); font-weight: 700; font-size: 1.15rem; color: var(--xp-soft);
}
.xnode {
  background: var(--xp-gray); border: 2px solid var(--xp-ink);
  padding: 9px 14px; text-align: center;
  min-width: 130px; max-width: 200px; flex: 0 1 auto;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  transition: opacity .3s, transform .3s, box-shadow .3s, border-color .3s;
}
.xnode:nth-child(even) { border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px; transform: rotate(.35deg); }
.xnode:nth-child(odd) { transform: rotate(-.3deg); }
.xnode .t { font-family: var(--hand); font-weight: 700; font-size: 1.18rem; line-height: 1.1; }
.xnode .d { font-family: var(--mono); font-size: .6rem; color: var(--xp-soft); line-height: 1.5; }
.xnode.c-yellow { background: var(--xp-yellow); } .xnode.c-green { background: var(--xp-green); }
.xnode.c-blue { background: var(--xp-blue); }   .xnode.c-red { background: var(--xp-red); }
.xnode.c-purple { background: var(--xp-purple); } .xnode.c-gray { background: var(--xp-gray); }
.xcanvas.stepping .xnode { opacity: .32; }
.xcanvas.stepping .xnode.lit {
  opacity: 1; border-color: var(--xp-accent);
  box-shadow: 0 0 0 4px var(--xp-accent-soft), 5px 5px 0 rgba(30,30,30,.25);
  transform: translateY(-3px) rotate(0deg); z-index: 5;
}
.xcanvas.stepping .xnode.was { opacity: .82; }
.xedge { stroke: rgba(30,30,30,.35); stroke-width: 2; fill: none; transition: stroke .3s, stroke-width .3s; }
.xedge.lit { stroke: var(--xp-accent); stroke-width: 3; }
.xedge.was { stroke: #f4a582; stroke-width: 2.5; }
.xhead-lit { fill: var(--xp-accent); } .xhead-was { fill: #f4a582; } .xhead-dim { fill: rgba(30,30,30,.35); }

.xwm {
  position: absolute; right: 20px; bottom: 10px; z-index: 3;
  font-family: var(--hand); font-weight: 700; font-size: 1.05rem;
  color: rgba(30,30,30,.4); pointer-events: none;
}

/* ---------- footer links ---------- */
.xfoot {
  max-width: 1240px; margin: 0 auto 40px; padding: 0 26px;
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  font-family: var(--mono); font-size: .72rem; color: var(--xp-soft);
}
.xfoot a { color: var(--xp-accent); text-decoration: none; font-weight: 600; }
.xfoot .spacer { flex: 1; }

@media (max-width: 760px) {
  .xrow { flex-direction: column; }
  .xcanvas { min-width: 0; }
  .xsvg { display: none; }
}