/* The toy box's shapes (docs/adr/0042, docs/design-system.md, "The toy
   box"): what the brainteasers change of the pencil-puzzle kit's look and
   interface (puzzles.css, kit.css, loaded before this) once its palette is
   the toy box's (toybox.css). A puzzle book is printed: hairlines, a
   serif, a stamp. A toy is molded: rounder corners, firmer type, a lip
   under what you press, and the puzzle itself in a tray, not on a page.
   Layout, sizes and behavior stay the kit's, so a brainteaser plays like
   every other puzzle on the site; only the material changes.

   Every color here is a token (the toy box's, or the game's accent). */

:root {
  --radius: 12px;
  --house-radius: 20px;
  --house-btn-radius: 12px;
  --house-display-weight: 700;
  --house-scrim: rgba(18, 26, 38, .5);
  --house-shadow: 0 28px 70px rgba(18, 26, 38, .4);
  /* the lip under a molded button, and under a piece */
  --lip: color-mix(in srgb, var(--ink) 18%, transparent);
}

/* The ribbon is the band of color round a toy box's lid: a little wider. */
body::before { height: 6px; }

/* Titles in Rubik, bold and a touch tight, where the book had its serif. */
h1 { font-weight: 700; letter-spacing: -.015em; }
.pk .cover-title { font-weight: 700; }
.kicker { letter-spacing: .1em; }

/* Buttons are molded: a lip under each, pressed flat when pressed. */
.btn { border-radius: var(--radius); box-shadow: 0 2px 0 var(--lip); }
.btn:active { box-shadow: none; transform: translateY(2px); }
.btn.primary { box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 55%, #000); }
.btn.primary:active { transform: translateY(3px); }
.btn.quiet, .quiet, .btn[aria-disabled="true"], .btn:disabled { box-shadow: none; }
.seg { border-radius: calc(var(--radius) + 3px); background: color-mix(in srgb, var(--paper-2) 75%, transparent); }

/* ── home ───────────────────────────────────────────────────────────────── */
.pk .daily, .pk .arc-cell { border-radius: 18px; }
/* The day's puzzle sits in its own little tray on the card, not on a perforated page. */
.pk .daily-art { background: var(--desk); border-bottom: 0; }
@media (min-width: 761px) { .pk .dailies.one .daily-art { border-right: 0; } }
@media (max-width: 760px) { .pk .daily-art { border-right: 0; } }
.pk .daily-art svg { filter: drop-shadow(0 4px 6px rgba(18, 26, 38, .2)); }
.pk .daily.is-solved .daily-art { background: color-mix(in srgb, var(--good) 12%, var(--desk)); }
@media (hover: hover) { .pk a.arc-cell:hover { box-shadow: 0 10px 18px -12px rgba(18, 26, 38, .5); } }

/* ── a puzzle on its desk ───────────────────────────────────────────────── */
/* The tray the puzzle comes in: a white molding with a soft lip, in place
   of the book's printed sheet; the game draws the puzzle itself inside. */
.pk .paper {
  padding: 12px 16px 16px; border-radius: 24px; background: var(--paper-2);
  box-shadow: 0 1px 0 #fff inset, 0 4px 0 var(--lip), 0 24px 44px -24px rgba(18, 26, 38, .55);
}
.pk .folio { font: 700 12px/1 var(--ui); letter-spacing: .08em; }
/* No printed neatline: the game's tray is its own edge. */
.pk .neatline { outline: 0; margin: 4px; }
@media (max-width: 640px) {
  .pk .paper { padding: 10px 12px 12px; border-radius: 20px; }
  .pk .neatline { margin: 2px; }
  /* (a tall tray on a short phone is narrow: the folio's two ends stack rather than cut the puzzle's name short) */
  .pk .folio { flex-wrap: wrap; row-gap: 4px; }
}
.pk .zoom-btn { box-shadow: 0 2px 0 var(--lip); }

/* Solved, a sticker goes on the box where the book had an inked stamp. */
.pk .stamp {
  border: 0; border-radius: 999px; padding: 6px 16px; color: var(--accent-ink); background: var(--accent);
  mix-blend-mode: normal; opacity: 1; transform: rotate(-4deg); box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 55%, #000);
}
.pk .stamp-word { font: 700 13px var(--ui); letter-spacing: .12em; }
.pk .stamp-time { font: 700 20px var(--ui); font-variant-numeric: tabular-nums; }
/* A brainteaser that can run out (Codebreaker's rows) says so on a sticker in ink. */
.pk .stamp.out { background: var(--ink); color: var(--paper-2); box-shadow: 0 3px 0 color-mix(in srgb, var(--ink) 55%, #000); }

/* The examples in How to play sit in a tray too. */
.house-sheet .example { border-radius: 16px; }
.house-sheet .example svg { filter: drop-shadow(0 6px 8px rgba(18, 26, 38, .22)); }

/* A brainteaser's count (moves, guesses) beside the clock in the bar. */
.pk .counter { font: var(--w-tool) var(--t-tool)/1 var(--ui); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; margin-right: var(--s2); }
.pk .counter .of { color: var(--soft); font-weight: 600; }
/* A phone's bar has room for the count but not its word, and the narrowest
   not for the fewest it can be done in either (How to play and the result
   say it): the tools keep to the gutter. */
@media (max-width: 420px) { .pk .counter { margin-right: 0; } .pk .counter .word { display: none; } }
@media (max-width: 340px) { .pk .counter .of { display: none; } }
/* (a phone on its side: the rail's tools are a fixed grid, so the count takes a row of its own above them) */
@media (orientation: landscape) and (max-height: 500px) {
  .pk .play > .bar .tools > .counter { grid-column: 1 / -1; margin: 0; }
}