/* Pixoot tutorial page — standalone styles (game palette: #0c0f08 bg, #f2eeca text,
   #7ddf64 links, #ffd23f accent, #4a6b3c borders). Mobile-first, no hover-only UI. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #0c0f08;
  color: #f2eeca;
  font-family: "Courier New", ui-monospace, "Segoe UI Mono", monospace;
  font-size: 15px;
  line-height: 1.55;
  image-rendering: pixelated;
  overscroll-behavior: none;
}
img, canvas { image-rendering: pixelated; }

/* The UA sheet hides [hidden] elements, but author rules win at equal
   specificity — `.tut-toc { display: grid }` was overriding it, so the
   CONTENTS toggle changed the attribute and nothing else. Keep every
   hidden attribute on this page honest. */
[hidden] { display: none !important; }

/* ---------- header ---------- */
.tut-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #10180c;
  border-bottom: 2px solid #4a6b3c;
  padding: calc(8px + env(safe-area-inset-top)) 14px 6px;
  box-shadow: 0 3px 0 #0a0d07;
}
.tut-head-row { display: flex; align-items: center; gap: 12px; }
.tut-head h1 {
  flex: 1;
  margin: 0;
  font-size: 15px;
  letter-spacing: 2px;
  color: #ffd23f;
  text-shadow: 2px 2px 0 #000;
}
.tut-back {
  color: #7ddf64;
  text-decoration: none;
  font-weight: bold;
  font-size: 13px;
  padding: 6px 4px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}
.tut-back:hover, .tut-back:focus { color: #aaff99; text-decoration: underline; }
.tut-toc-btn {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 1px;
  color: #f2eeca;
  background: #1a2412;
  border: 2px solid #4a6b3c;
  padding: 8px 10px;
  min-height: 36px;
  cursor: pointer;
}
.tut-toc-btn:hover, .tut-toc-btn:focus { border-color: #7ddf64; color: #7ddf64; }
/* Lit while the index is on screen, so the button reads as a toggle. */
.tut-toc-btn[aria-expanded="true"] { border-color: #7ddf64; color: #7ddf64; background: #21331a; }
.tut-progress {
  margin-top: 6px;
  height: 6px;
  background: #0a0d07;
  border: 1px solid #2a3a22;
}
#tut-progress-fill { height: 100%; width: 0%; background: #7ddf64; transition: width .15s linear; }
.tut-readstat { font-size: 10px; color: #9db18c; margin-top: 3px; text-align: right; }

/* ---------- TOC ---------- */
.tut-toc {
  position: sticky;
  top: calc(74px + env(safe-area-inset-top));
  z-index: 39;
  background: #0f150b;
  border-bottom: 2px solid #2a3a22;
  padding: 8px 12px;
  max-height: 46vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 4px;
  /* Slide rather than snap. Visibility is held until the slide finishes so
     the links never become focusable under a panel that is collapsing. */
  transition: max-height .28s ease, opacity .22s ease, padding-top .28s ease,
              padding-bottom .28s ease, border-bottom-width .28s ease,
              visibility 0s linear 0s;
}
.tut-toc.is-closed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  transition: max-height .28s ease, opacity .22s ease, padding-top .28s ease,
              padding-bottom .28s ease, border-bottom-width .28s ease,
              visibility 0s linear .28s;
}
.tut-toc a {
  color: #9db18c;
  text-decoration: none;
  font-size: 12px;
  padding: 7px 8px;
  border: 1px solid transparent;
  display: block;
  min-height: 34px;
}
.tut-toc a:hover, .tut-toc a:focus { color: #7ddf64; border-color: #4a6b3c; }
.tut-toc a .toc-n { color: #ffd23f; margin-right: 6px; }
.tut-toc a.read { color: #7ddf64; }

/* ---------- hero ---------- */
main { max-width: 980px; margin: 0 auto; padding: 14px 14px 40px; }
.tut-hero {
  border: 2px solid #4a6b3c;
  background: rgba(16, 24, 12, .94);
  box-shadow: 4px 4px 0 #0a0d07;
  padding: 16px;
  margin-bottom: 22px;
}
.tut-hero-lead { margin: 0 0 10px; font-size: 15px; }
.tut-hero-lead strong { color: #ffd23f; }
.tut-hero-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: #9db18c; }
.chip, .tut-text kbd {
  display: inline-block;
  min-width: 26px;
  text-align: center;
  padding: 3px 6px;
  margin: 0 1px;
  font-family: inherit;
  font-size: 12px;
  color: #f2eeca;
  background: #1a2412;
  border: 2px solid #4a6b3c;
  border-bottom-width: 3px;
}
.tut-text kbd.hi { color: #ffd23f; border-color: #ffd23f; }

/* ---------- group dividers ---------- */
.tut-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 26px 0 12px;
  padding: 8px 12px;
  background: #0f150b;
  border-left: 4px solid #ffd23f;
}
.tut-group span {
  font-size: 13px;
  letter-spacing: 2px;
  color: #ffd23f;
  font-weight: bold;
}
.tut-group em { font-size: 12px; color: #9db18c; font-style: normal; }

/* ---------- sections ---------- */
.tut-sec {
  border: 2px solid #2a3a22;
  background: rgba(16, 24, 12, .94);
  box-shadow: 4px 4px 0 #0a0d07;
  margin-bottom: 26px;
  scroll-margin-top: 96px;
  overflow: hidden;
}
.tut-sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 2px solid #2a3a22;
  background: #0f150b;
}
.tut-sec-num {
  color: #0c0f08;
  background: #ffd23f;
  font-weight: bold;
  font-size: 13px;
  padding: 2px 7px;
  box-shadow: 2px 2px 0 #000;
}
.tut-sec-head h2 { margin: 0; font-size: 16px; letter-spacing: 1px; color: #f2eeca; }
.tut-stage {
  position: relative;
  background: #16210f;
  border-bottom: 2px solid #2a3a22;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tut-stage canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  background: #22371a;
}
.tut-stage-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  letter-spacing: 1px;
  color: #7ddf64;
  background: rgba(12, 15, 8, .82);
  border: 1px solid #4a6b3c;
  padding: 3px 7px;
  pointer-events: none;
}
.tut-sec.read .tut-stage-badge { color: #0c0f08; background: #7ddf64; border-color: #7ddf64; }

.tut-text { padding: 14px 16px 18px; }
.tut-lead { margin: 0 0 10px; color: #ffd23f; font-size: 14px; }
.tut-steps { margin: 0; padding-left: 22px; }
.tut-steps li { margin-bottom: 7px; font-size: 14px; }
.tut-steps li::marker { color: #7ddf64; font-weight: bold; }
.tut-steps b, .tut-steps strong { color: #ffd23f; }
.tut-steps .muted { color: #9db18c; }
.tut-note {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: #9db18c;
  background: #0d1209;
  border-left: 3px solid #4a6b3c;
}
.tut-note b { color: #7ddf64; }
.tut-keys { margin-top: 10px; font-size: 12px; color: #9db18c; }

/* controls-reference table */
.tut-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.tut-table th, .tut-table td { border: 1px solid #2a3a22; padding: 6px 8px; text-align: left; }
.tut-table th { background: #0f150b; color: #ffd23f; font-size: 12px; letter-spacing: 1px; }
.tut-table td:first-child { white-space: nowrap; color: #7ddf64; }

/* ---------- footer ---------- */
.tut-foot {
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 16px calc(34px + env(safe-area-inset-bottom));
  border-top: 2px solid #2a3a22;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.tut-foot-note { font-size: 11px; color: #9db18c; }

/* ---------- responsive ---------- */
/* Mobile: halve the top chrome (sticky header + intro frame) so the actual
   tutorial sections own the screen. Header 82→~46px, hero frame 309→~155px. */
@media (max-width: 700px) {
  .tut-head {
    padding: calc(4px + env(safe-area-inset-top)) 10px 3px;
  }
  .tut-head h1 { font-size: 11px; letter-spacing: 1px; }
  .tut-back { font-size: 11px; min-height: 28px; padding: 4px 2px; }
  .tut-toc-btn { font-size: 10px; padding: 6px 8px; min-height: 30px; }
  .tut-progress { margin-top: 3px; height: 4px; }
  .tut-readstat { display: none; }
  .tut-toc { top: calc(50px + env(safe-area-inset-top)); padding: 6px 8px; }

  .tut-hero { padding: 10px 12px; margin-bottom: 14px; }
  .tut-hero-lead { font-size: 12.5px; line-height: 1.4; margin-bottom: 6px; }
  .tut-hero-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
    font-size: 11px;
    line-height: 1.5;
  }
  .tut-hero-keys li { white-space: nowrap; }
  .chip, .tut-text kbd { font-size: 10px; padding: 1px 4px; min-width: 20px; }

  .tut-sec { scroll-margin-top: 64px; }
}

@media (min-width: 900px) {
  .tut-sec { display: grid; grid-template-columns: 46% 54%; grid-template-areas: "head head" "stage text"; }
  .tut-sec-head { grid-area: head; }
  .tut-stage { grid-area: stage; border-right: 2px solid #2a3a22; border-bottom: 0; }
  .tut-text { grid-area: text; }
  .tut-stage canvas { width: 100%; height: auto; }
  .tut-toc { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (max-width: 480px) {
  body { font-size: 14px; }
  .tut-head h1 { font-size: 13px; letter-spacing: 1px; }
  .tut-sec-head h2 { font-size: 14px; }
  .tut-text { padding: 12px 12px 15px; }
  .tut-steps li { font-size: 13.5px; }
}

/* reduced motion: stop the looping showcase animation (JS also checks this) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- static scenes & screenshot (crawlable, no-JS friendly) ----------
   Every section ships a <figure class="tut-scene"> placeholder in the HTML and
   js/tutorial.js only fills the canvas inside it. The figure reserves its box
   up front (min-height here + the canvas's 8/5 aspect-ratio above) so mounting
   the animated scene cannot move the page — this is the CLS fix. */
.tut-scene {
  margin: 0;
  min-height: 160px;
}
/* Shown only when scripting is off (noscript content never parses into the
   layout when JS runs), so it costs nothing for the animated path. */
.tut-scene noscript p {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  color: #9db18c;
  background: #16210f;
}

/* Real screenshot in the hero area — width/height attributes are set in the
   markup so the browser reserves the box before the bytes arrive. */
.tut-shot {
  margin: 0 0 22px;
  border: 2px solid #4a6b3c;
  background: rgba(16, 24, 12, .94);
  box-shadow: 4px 4px 0 #0a0d07;
  overflow: hidden;
}
.tut-shot img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
}
.tut-shot figcaption {
  padding: 9px 14px 11px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #9db18c;
  border-top: 2px solid #2a3a22;
}
@media (max-width: 700px) {
  .tut-shot { margin-bottom: 14px; }
  .tut-shot figcaption { padding: 7px 10px 9px; font-size: 11.5px; }
}