/* ============================================================
   YIZZOO - The Escape Room Builder
   The controls, then the pages' contents in em (one set of rules
   for the to-scale preview and the paper). Load after print-sheet.css.
   ============================================================ */

.yz-er__head{ padding-block: var(--sp-8) var(--sp-6); }

.yz-er__grid{
  display: grid;
  grid-template-columns: minmax(290px, 340px) 1fr;
  gap: var(--sp-8);
  align-items: start;
  padding-block: var(--sp-8);
}
@media (max-width: 900px){ .yz-er__grid{ grid-template-columns: 1fr; gap: var(--sp-6); } }

.yz-er__panel{
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card);
  position: sticky;
  top: var(--sp-4);
}
@media (max-width: 900px){ .yz-er__panel{ position: static; } }

.yz-er__group + .yz-er__group{ margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--color-border); }
.yz-er__h{
  display: block;
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--sp-3);
  color: var(--color-ink);
}
.yz-er__note{ font-size: 0.86rem; line-height: 1.5; color: var(--color-soft-ink); margin: var(--sp-2) 0 0; }
.yz-er__note.is-warn{ color: var(--color-coral-dark, #b54a33); font-weight: 700; }

/* ---- themes: five cards with the theme's own icon --------------- */
.yz-er__themes{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.yz-er__theme{
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--color-parchment);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit; font-size: 0.88rem; font-weight: 700;
  color: var(--color-ink);
  cursor: pointer; text-align: left;
  transition: background .12s, border-color .12s;
}
.yz-er__theme:hover{ border-color: var(--color-teal); }
.yz-er__theme[aria-checked="true"]{ background: var(--color-teal-08); border-color: var(--color-teal); }
.yz-er__theme img{ flex: none; }

.yz-er__ages{ display: grid; gap: var(--sp-2); }
.yz-er__age{
  display: block; padding: var(--sp-3);
  background: var(--color-parchment);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit; text-align: left; color: var(--color-ink); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.yz-er__age:hover{ border-color: var(--color-teal); }
.yz-er__age[aria-checked="true"]{ background: var(--color-midnight); border-color: var(--color-midnight); color: var(--color-parchment); }
.yz-er__age b{ display: block; font-size: 0.95rem; }
.yz-er__age span{ display: block; font-size: 0.78rem; opacity: .75; margin-top: 2px; }

.yz-er__wordrow{ display: flex; gap: var(--sp-2); }
.yz-er__word{
  flex: 1; margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 1.5rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.yz-er__suggest{
  flex: none; padding: 0 var(--sp-3);
  background: transparent; border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  font: inherit; font-size: 0.85rem; color: var(--color-teal); cursor: pointer;
}
.yz-er__suggest:hover{ border-color: var(--color-teal); background: var(--color-teal-08); }

.yz-er__actions{ margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--color-border); }

/* ---- the puzzle cards ------------------------------------------ */
.yz-er__mainhead{ display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.yz-er__history{ display: flex; gap: 6px; flex: none; }
.yz-er__hbtn{
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--color-paper); border: 1.5px solid var(--color-border); border-radius: 50%;
  color: var(--color-teal); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, opacity .12s;
}
.yz-er__hbtn:hover:not(:disabled){ background: var(--color-teal); border-color: var(--color-teal); color: var(--color-paper); }
.yz-er__hbtn:disabled{ opacity: .35; cursor: default; }

.yz-er__slots{ list-style: none; margin: 0 0 var(--sp-7); padding: 0; display: grid; gap: var(--sp-2); touch-action: none; }
.yz-er__slot{
  display: grid; grid-template-columns: 22px 44px 1fr auto auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow .12s, transform .12s;
}
.yz-er__slot.is-lifted{ box-shadow: 0 8px 22px rgba(23,49,58,.18); transform: scale(1.015); border-color: var(--color-teal); }
.yz-er__grip{ color: var(--color-soft-ink); cursor: grab; display: grid; place-items: center; height: 100%; }
.yz-er__grip svg{ fill: currentColor; }
.is-sorting, .is-sorting *{ cursor: grabbing !important; user-select: none; }
.yz-er__slotletter{
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-midnight); color: var(--color-parchment);
  font-family: var(--font-display, inherit); font-size: 1.5rem; font-weight: 700;
}
.yz-er__slotbody b{ display: block; font-size: 0.95rem; }
.yz-er__slotbody i{ display: block; font-size: 0.8rem; color: var(--color-soft-ink); font-style: normal; }
.yz-er__slotbtn{
  padding: 6px 12px;
  background: transparent; border: 1.5px solid var(--color-border); border-radius: 999px;
  font: inherit; font-size: 0.8rem; color: var(--color-teal); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.yz-er__slotbtn:hover{ background: var(--color-teal-08); border-color: var(--color-teal); }

.yz-er__pageshead{ margin-bottom: 2px; }
.yz-er__paper{ margin-top: var(--sp-3); }

/* Editable words on the preview pages: they look like text until
   pointed at, then like a field. */
.yz-er-edit{ border-radius: 3px; outline: none; cursor: text; transition: background .12s, box-shadow .12s; }
.yz-er-edit:hover{ background: rgba(36, 94, 99, .08); box-shadow: 0 0 0 2px rgba(36, 94, 99, .18); }
.yz-er-edit:focus{ background: #fff; box-shadow: 0 0 0 2px var(--color-teal); }

.yz-er__words{ max-width: var(--reading-max); margin: 0 auto; padding-block: var(--sp-8) var(--sp-10); border-top: 1px solid var(--color-border); }
.yz-er__words h2{ font-size: var(--fs-h3); line-height: var(--lh-h3); margin: var(--sp-7) 0 var(--sp-3); }
.yz-er__words h2:first-child{ margin-top: 0; }
.yz-er__words p{ margin: 0 0 var(--sp-4); line-height: var(--lh-body); }

/* ============================================================
   THE PAGES' CONTENTS, in em, for preview and paper alike.
   Everything that must print is a line or a border, never a
   background.
   ============================================================ */

.yz-er-icon{ display: block; width: 3.4em; height: auto; margin: 0 auto .5em; }
.yz-er-kicker{
  margin: 0 0 .3em;
  font-family: "Trebuchet MS", "Gill Sans", sans-serif;
  font-size: .72em; letter-spacing: .16em; text-transform: uppercase; color: #666;
}
.yz-er-line{ margin: 0 auto .5em; max-width: 32em; font-style: italic; color: #444; font-size: .95em; }
.yz-er-howto{ margin: 0 auto 1em; max-width: 32em; font-size: .95em; }
.yz-er-note{ margin: .6em auto 0; max-width: 32em; font-size: .85em; color: #444; }

.yz-er-story{ margin: .4em auto 1.2em; max-width: 30em; font-size: 1.12em; line-height: 1.55; text-align: left; }
.yz-er-how{ margin: auto auto 0; max-width: 30em; padding: .8em 1.1em; border: 0.75pt solid #999; text-align: left; font-size: .95em; }
.yz-er-how p{ margin: 0 0 .5em; }
.yz-er-how p:last-child{ margin-bottom: 0; }

.yz-er-body{ flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.1em; }

/* SIZED FOR A CHILD'S EYE, AND TO FILL THE PAGE. At one size for all,
   a four-tile pattern sat tiny in a sheet of white and a coded message
   ran as one cramped line. Each kind is scaled to its own page; the
   strips inside scale with it, and stay capped at the page's width. */
.yz-pp--cipher .yz-er-body{ font-size: 1.28em; }
.yz-pp--math   .yz-er-body{ font-size: 1.42em; }
.yz-pp--seq    .yz-er-body{ font-size: 1.75em; }
.yz-pp--spot   .yz-er-body{ font-size: 1.45em; }
.yz-pp--maze   .yz-er-maze{ max-width: 31em; }

/* THE BOX ARRIVES EMPTY: it is where an answer gets written. */
.yz-er-box{ display: inline-block; border: 0.75pt solid #444; }
.yz-er-answer{ margin-top: 1em; display: flex; flex-direction: column; align-items: center; }
.yz-er-box--answer{ width: 3.2em; height: 3.4em; border-width: 1.5pt; }

/* the coded message */
.yz-er-code{ display: flex; flex-wrap: wrap; justify-content: center; gap: 1em 1.4em; }
.yz-er-word{ display: inline-flex; gap: .22em; }
.yz-er-cell{ display: inline-flex; flex-direction: column; align-items: center; min-width: 1.9em; }
.yz-er-g{ height: 1.7em; display: flex; align-items: center; font-weight: 700; font-size: 1.1em; font-variant-numeric: tabular-nums; }
.yz-er-g.is-letter{ font-size: 1.3em; }
.yz-er-cell .yz-er-box{ width: 1.8em; height: 1.95em; margin-top: .15em; }

/* the A = 1 strip, and the plain alphabet */
.yz-er-strip{ display: grid; grid-template-columns: repeat(13, 1fr); width: 100%; max-width: 34em; font-size: .85em; }
.yz-er-strip span{ display: flex; flex-direction: column; border: 0.5pt solid #999; margin: -0.25pt; padding: .15em 0; }
.yz-er-strip b{ border-bottom: 0.5pt solid #ddd; }
.yz-er-strip.is-plain{ grid-template-columns: repeat(26, 1fr); }
.yz-er-strip.is-plain span{ padding: .25em 0; }

/* the maze */
.yz-er-maze{ width: 100%; max-width: 27em; height: auto; }
.yz-er-wall{ stroke: #1a1a1a; stroke-width: 0.085; stroke-linecap: square; }
.yz-er-mazeletter{ font-family: Georgia, serif; font-size: .52px; font-weight: 700; text-anchor: middle; fill: #1a1a1a; }
.yz-er-mazetag{ font-family: "Trebuchet MS", sans-serif; font-size: .38px; font-weight: 700; letter-spacing: .04px; text-anchor: middle; fill: #555; }

/* picture sums */
.yz-er-sums{ display: grid; gap: .8em; }
.yz-er-eq{ display: flex; align-items: center; justify-content: center; gap: .45em; font-size: 1.35em; }
.yz-er-sym svg{ display: block; width: 1.5em; height: 1.5em; fill: none; stroke: #1a1a1a; stroke-width: 1.6; }
.yz-er-sym[data-sym="star"] svg{ fill: #1a1a1a; }
.yz-er-sym[data-sym="square"] svg{ stroke-width: 2.2; }
.yz-er-op{ font-weight: 700; width: .8em; text-align: center; }
.yz-er-num{ font-weight: 700; min-width: 1.6em; text-align: left; font-variant-numeric: tabular-nums; }
.yz-er-box--num{ width: 2.2em; height: 1.7em; }

/* what comes next */
.yz-er-seq{ display: flex; gap: .7em; align-items: center; }
.yz-er-tile{ width: 2.3em; height: 2.5em; display: grid; place-items: center; border: 1pt solid #1a1a1a; font-size: 1.5em; font-weight: 700; }
.yz-er-box--tile{ width: 3.45em; height: 3.75em; border-style: dashed; border-width: 1.2pt; }

/* spot the odd one */
.yz-er-grid{ display: grid; gap: .15em .55em; font-size: 1.35em; font-weight: 700; letter-spacing: .02em; font-family: "Trebuchet MS", "Gill Sans", sans-serif; }

/* the lock */
.yz-er-lock{ display: flex; gap: .8em; justify-content: center; margin: auto 0 .5em; }
.yz-er-lockbox{ display: flex; flex-direction: column; align-items: center; gap: .3em; }
.yz-er-box--lock{ width: 3.4em; height: 3.8em; border-width: 1.6pt; }
.yz-er-lockbox i{ font-style: normal; font-family: "Trebuchet MS", sans-serif; font-size: .8em; color: #666; }
.yz-pp--lock .yz-er-note{ margin-bottom: auto; }

/* hint cards: a plain cut sheet, not a framed page */
.yz-er-hintsheet{ position: relative; min-height: 9.55in; padding-bottom: .4in; }
.yz-paper .yz-er-hintsheet{ min-height: 0; aspect-ratio: 7.5 / 9.55; padding-bottom: 2.9em; }
.yz-er-hintsheet > .yz-er-kicker{ text-align: center; margin-bottom: .8em; }
.yz-er-hints{ display: grid; grid-template-columns: 1fr 1fr; }
.yz-er-hintcard{
  border: 0.75pt dashed #aaa; margin: -0.375pt;
  padding: .8em 1em; min-height: 6.2em;
  text-align: left; font-size: .92em; line-height: 1.4;
}
.yz-er-hintcard b{
  display: block; margin-bottom: .3em;
  font-family: "Trebuchet MS", sans-serif; font-size: .78em; letter-spacing: .1em; text-transform: uppercase; color: #555;
}
.yz-paper .yz-er-hintsheet .yz-pp__slug{ left: 0; right: 0; }

/* the Game Master */
.yz-er-pass{ margin: .2em 0 1em; font-size: 1.15em; }
.yz-er-pass b{ display: block; font-size: 2em; letter-spacing: .2em; margin-top: .1em; }
.yz-er-table{ width: 100%; border-collapse: collapse; text-align: left; font-size: .9em; }
.yz-er-table td{ padding: .45em .4em; border-bottom: 0.5pt solid #ccc; vertical-align: top; }
.yz-er-table td:first-child{ width: 1.6em; color: #666; }
.yz-er-table td:nth-child(2){ width: 2em; font-size: 1.2em; }
.yz-er-ending{ margin-top: auto; padding: .8em 1em; border: 0.75pt solid #999; text-align: left; }
.yz-er-ending p{ margin: 0; }

/* ============================================================
   ON PAPER: every page on its own sheet.
   ============================================================ */
@media print{
  .yz-er-hintsheet .yz-pp__slug{ left: 0; right: 0; bottom: 0; }
}