/* The ShapeCut board, plus the page furniture every game shares: header, gate,
   status line, result, rules and note. The furniture is wordguess.css's,
   deliberately, because the games are one product (see the note there). What is new is the
   board: a dark well, like the acrostic's, so the reference's "lit half / dark
   half" reads the same in both themes. Every colour comes from tokens.css. */

#line{
  position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);
  z-index:9;transition:width .35s var(--ease);
}
#line.go{width:100%}

/* ---------------- header ---------------- */
.wrap header{
  padding:26px 0 14px;margin-bottom:20px;border-bottom:1px solid var(--rule);
  display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;
}
.wrap h1{
  font-family:var(--display);font-weight:700;font-size:clamp(26px,4.4vw,36px);
  letter-spacing:-.035em;line-height:1.05;margin:0;
}
.wrap h1 em{font-style:normal;color:var(--accent-ink)}
.dateline{
  flex-basis:100%;margin:6px 0 0;font-size:12px;letter-spacing:.01em;color:var(--dim);
}

/* ---------------- the board ----------------
   Square, as wide as the panel allows up to 460px. touch-action:none is what
   lets a finger drag a cut instead of scrolling the page; the user-select and
   callout lines stop a long press from selecting or opening a menu. */
.board{display:flex;justify-content:center;padding:0 0 14px}
#board{
  display:block;width:min(100%,460px);height:auto;aspect-ratio:1;
  background:var(--board);border-radius:var(--radius-card);
  touch-action:none;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  cursor:crosshair;
}
#board.is-cut{cursor:default}
.sc-ring{fill:none;stroke:var(--board-line);stroke-width:6}

.sc-shape,.sc-piece polygon{
  fill:var(--accent);fill-opacity:.55;
  stroke:var(--accent);stroke-width:10;stroke-linejoin:round;
}
.sc-piece .sc-edge{stroke:var(--accent);stroke-width:20;stroke-linecap:round}
/* The larger side goes dark with a light rim, as in the reference: the lit
   side is the one that came up short. */
.sc-piece.is-large polygon{fill:var(--board);fill-opacity:1;stroke:var(--accent-panel-ink)}
.sc-piece.is-large .sc-edge{stroke:var(--accent-panel-ink)}
.sc-slide{transition:transform .4s var(--spring)}

.sc-guide line{
  stroke:var(--accent-panel-ink);stroke-width:7;stroke-dasharray:26 18;stroke-linecap:round;
}
.sc-guide circle{fill:var(--board);stroke:var(--accent-panel-ink);stroke-width:6}
.sc-guide[hidden]{display:none}

/* ---------------- the gate ---------------- */
body.is-gated .playfield,
body.is-gated .rules,
body.is-gated .note{display:none}
body:not(.is-gated) .gate{display:none}

.gate{
  min-height:300px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;
}
.gate-in{
  width:100%;max-width:460px;text-align:center;
  padding:30px 26px;border:1px solid var(--rule-firm);border-radius:var(--radius-card);
  background:var(--card);
}
.gate-kicker{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);
  margin-bottom:10px;
}
.gate-in h2{
  font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.02em;
  margin:0 0 10px;
}
#gateNote{margin:0 0 18px;font-size:14px;color:var(--slate);line-height:1.5}
.gate-rules{
  text-align:left;margin:0 0 20px;padding:16px 18px;
  border:1px solid var(--rule);border-radius:var(--radius-card);
  background:var(--page);
}
.gate-rules-head{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  margin-bottom:8px;
}

.btn{
  font:inherit;font-family:var(--ui);font-weight:700;font-size:15px;
  padding:11px 26px;cursor:pointer;color:var(--on-accent);background:var(--accent);
  border:1px solid var(--accent-deep);border-radius:var(--radius-pill);
}
.btn:hover{background:var(--accent-deep)}

/* ---------------- the status line and the result ---------------- */
.entry{margin-bottom:26px}
.status{
  text-align:center;font-size:14px;color:var(--slate);min-height:22px;
  padding:0 10px;line-height:1.5;
}
/* After the cut the status line still carries the result in words, so it is
   hidden from sight only: display:none would drop the very sentence its
   aria-live region was written to announce. */
.entry.done .status{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;min-height:0;
}

.result{display:none}
.entry.done .result{
  display:block;text-align:center;
  padding:22px 22px 20px;border:1px solid var(--accent-deep);border-radius:var(--radius-card);
  background:var(--accent-soft);
}
.result .eyebrow{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);
}
.result .final{
  font-family:var(--serif);font-weight:900;font-size:40px;line-height:1.1;
  font-variant-numeric:tabular-nums;color:var(--ink);margin:6px 0 2px;
}
.result .flabel{
  font-size:15px;font-weight:700;color:var(--slate);font-variant-numeric:tabular-nums;
}

/* ---------------- the rules under the board, and the note ---------------- */
.rules{margin-bottom:26px}
.section-head{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  font-weight:700;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--rule);
}
.rules-list{margin:0;padding-left:22px;font-size:14px;color:var(--slate);line-height:1.7}
.rules-list li{margin-bottom:4px}
.rules-list b{color:var(--ink)}

.note{
  font-size:13px;color:var(--slate);line-height:1.7;
  padding:16px 18px;border:1px solid var(--rule);border-radius:var(--radius-card);
  background:var(--card);margin:0 0 26px;
}
.note b{color:var(--ink)}