/* Wish cards and the crew card (WP22; core DESIGN §1, §5.12, §7.3, D-06, D-52).
   The wish sheet (wish.js): a warm paper sheet with at most three cards, each one picture, the camera and the brush (the clay
   pictures of the capture screen), and the two safety pictures with their check marks; lines and the sheet's title only in
   9-10 (.has-labels). The pressed look comes at touch-down (.is-down). No number, count, percentage or empty silhouette is ever
   drawn. Reduced motion: no rise, no squash.
   The crew card, for builds and the kitchen (markup documented here, styled once):
     <div class="crew-card" data-crew="<id>"><span class="crew-pic">icon('crew-<id>' | 'crew-colour')</span>
       <span class="crew-faces"><img class="crew-face" src="..."> …</span><span class="crew-name">t(crew.nameKey)</span></div>
   Each crew id tints its pictogram through [data-crew] (a build may set --crew itself). */

/* The "What do we need?" button when wish.js fills an empty element */
.wish-btn { appearance: none; border: 0; margin: 0; font: inherit; color: var(--ink); cursor: pointer; touch-action: manipulation; user-select: none;
  -webkit-user-select: none; min-width: 76px; min-height: 76px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow), var(--press);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 12px; font-weight: 800; font-size: var(--body);
  transition: transform var(--t-micro) var(--spring), box-shadow var(--t-micro); }
html.older .wish-btn { padding: 0 22px 0 12px; }
.wish-btn-bulb { width: 56px; height: 56px; border-radius: 50%; background: var(--butter); display: grid; place-items: center; color: var(--ink);
  box-shadow: inset 0 -4px 0 rgba(93, 63, 26, .14), inset 0 3px 0 rgba(255, 255, 255, .45); }
.wish-btn-bulb .ico { width: 34px; height: 34px; }
html:not(.older) .wish-btn-word { display: none; }
.wish-btn.is-down, .wish-btn:active { transform: scale(.94); box-shadow: var(--shadow); }

/* The sheet */
.sheet.wish-sheet { background: var(--paper); font-size: var(--body); padding-top: 14px; }
.wish-sheet .sheet-head { margin-bottom: 12px; }
.wish-top { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.wish-top-bulb { width: 60px; height: 60px; border-radius: 50%; background: var(--butter); display: grid; place-items: center; color: var(--ink);
  box-shadow: inset 0 -4px 0 rgba(93, 63, 26, .14), inset 0 3px 0 rgba(255, 255, 255, .45), var(--shadow); }
.wish-top-bulb .ico { width: 36px; height: 36px; }
.wish-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
/* 6-8: one compact card per wish, pictures only: the picture on the left, the camera and the brush beside it, the two safety
   pictures under them. 9-10 adds the line above the answers and gives the safety pictures their words in a row underneath. */
.wish-card { display: grid; grid-template-columns: 128px minmax(0, 1fr); grid-template-areas: "pic go" "pic safe"; gap: 10px 14px; align-items: center;
  background: var(--card); border-radius: 26px; box-shadow: var(--shadow); padding: 12px 14px 12px 12px;
  animation: wish-in var(--t-pop) var(--spring) both; animation-delay: calc(var(--i, 0) * 70ms); }
.has-labels .wish-card { grid-template-areas: "pic line" "pic go" "safe safe"; }
@keyframes wish-in { from { transform: translateY(18px) scale(.97); opacity: 0; } }
.wish-pic { grid-area: pic; position: relative; width: 128px; height: 128px; align-self: center; }
.wish-pic > img { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; }
/* The member a card is for (CR-5): its portrait on the picture's corner, so a non-reader sees who the hat is for. */
.wish-for { position: absolute; right: -6px; bottom: -4px; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; background: var(--sand);
  box-shadow: 0 0 0 3px var(--card), var(--shadow); }
.wish-for img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wish-line { grid-area: line; align-self: end; margin: 0; font-weight: 800; font-size: var(--body); line-height: 1.22; overflow-wrap: anywhere; }
.wish-go { grid-area: go; display: flex; gap: 12px; flex-wrap: wrap; align-self: end; }
.has-labels .wish-go { align-self: start; }
.wish-ans { appearance: none; border: 0; margin: 0; font: inherit; color: var(--ink); cursor: pointer; touch-action: manipulation; user-select: none;
  -webkit-user-select: none; width: 76px; min-height: 76px; border-radius: 22px; background: var(--paper); box-shadow: var(--shadow), var(--press);
  display: grid; place-items: center; align-content: center; gap: 2px; padding: 6px 4px; transition: transform var(--t-micro) var(--spring), background var(--t-micro); }
.wish-ans img { width: 54px; height: 54px; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.wish-ans-word { font-size: 0.8125rem; font-weight: 800; line-height: 1.1; }
.wish-ans.is-down, .wish-ans:active { transform: scale(.92); background: var(--coral-field); }
.wish-ans:focus-visible, .wish-btn:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
/* The safety pictures: the capture screen's look, smaller, each with its green check. */
.wish-safe { grid-area: safe; display: flex; align-items: center; gap: 16px; align-self: start; }
.has-labels .wish-safe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 12px; border-top: 2px dashed var(--hair); }
.wish-safe-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wish-safe-pic { position: relative; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--paper); display: grid; place-items: center; color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--hair); }
.wish-safe-pic > .ico { width: 30px; height: 30px; }
.wish-safe-mark { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: var(--green); box-shadow: 0 0 0 2px var(--card); }
.wish-safe-mark .ico { width: 13px; height: 13px; stroke-width: 3.4; }
.wish-safe-word { font-size: 0.875rem; color: var(--muted); line-height: 1.2; min-width: 0; }
@media (max-width: 359px) {
  .wish-card { grid-template-columns: 104px minmax(0, 1fr); }
  .wish-pic { width: 104px; height: 104px; }
  .wish-ans { width: 68px; min-height: 68px; }
  .wish-ans img { width: 46px; height: 46px; }
  .has-labels .wish-safe { grid-template-columns: minmax(0, 1fr); }
}

/* The crew card */
.crew-card { display: flex; align-items: center; gap: 14px; background: var(--card); border-radius: 24px; box-shadow: var(--shadow); padding: 10px 16px 10px 10px;
  --crew: var(--green); }
.crew-pic { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--crew);
  background: color-mix(in srgb, var(--crew) 16%, var(--card)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--crew) 30%, transparent); }
.crew-pic .ico { width: 34px; height: 34px; }
.crew-faces { display: flex; align-items: center; padding-left: 12px; }
.crew-face { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--sand); margin-left: -12px; box-shadow: 0 0 0 3px var(--card); }
.crew-name { font-weight: 800; font-size: var(--body); line-height: 1.2; min-width: 0; }
.crew-card[data-crew="roll"] { --crew: var(--coral-deep); }
.crew-card[data-crew="soft"] { --crew: var(--grape); }
.crew-card[data-crew="wood"] { --crew: #8A5A2B; }
.crew-card[data-crew="tall"] { --crew: var(--cobalt); }
.crew-card[data-crew="tiny"] { --crew: var(--green); }
.crew-card[data-crew="shiny"] { --crew: #5F6878; }
.crew-card[data-crew="colour:red"] { --crew: #C8372B; }
.crew-card[data-crew="colour:orange"] { --crew: #C9641A; }
.crew-card[data-crew="colour:yellow"] { --crew: #A88308; }
.crew-card[data-crew="colour:green"] { --crew: var(--green); }
.crew-card[data-crew="colour:blue"] { --crew: var(--cobalt); }
.crew-card[data-crew="colour:purple"] { --crew: var(--grape); }
.crew-card[data-crew="colour:pink"] { --crew: #C24F79; }
.crew-card[data-crew="colour:brown"] { --crew: #7A4E2A; }
.crew-card[data-crew="colour:black"] { --crew: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .wish-card { animation: none; }
  .wish-btn, .wish-ans { transition: none; }
  .wish-btn.is-down, .wish-btn:active, .wish-ans.is-down, .wish-ans:active { transform: none; filter: brightness(.94); }
}