/* ==========================================================================
   The three shapes for Tonight (features/shapes/index.js).
   Deliberately three separate visual languages: a board, a deck and a room must not
   share a look, or we repeat the mistake that made the app feel the same everywhere.
   ========================================================================== */

.shape-lede { color: var(--muted); margin: 0 0 var(--s2); }
.shape-note { margin-top: var(--s2); }
.shape-back { display: inline-block; margin-top: var(--s3); color: var(--muted); font-size: 14px; }

.shape-switch { display: flex; gap: 6px; margin: 0 0 var(--s2); }
.shape-switch a {
  flex: 1; text-align: center; padding: 7px 4px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); font-size: 14px; font-weight: 500;
}
.shape-switch a[aria-current="page"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.shape-empty { padding: var(--s3) 0; }

/* ---------- The chooser ---------- */

.shape-menu { display: grid; gap: var(--s2); }
.shape-pick {
  display: block; padding: var(--s2); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface); color: inherit;
}
.shape-pick strong { display: block; font-size: 18px; margin: var(--s1) 0 2px; }
.shape-pick > span:last-child { display: block; color: var(--muted); font-size: 14.5px; }
.shape-pick-art { display: flex; gap: 5px; align-items: flex-end; height: 34px; }
.shape-pick-art i { display: block; border-radius: 3px; background: var(--muted); opacity: 0.5; }
.shape-pick-board .shape-pick-art i { width: 15px; height: 15px; }
.shape-pick-deck .shape-pick-art i { width: 22px; height: 32px; border-radius: 4px; }
.shape-pick-deck .shape-pick-art i:nth-child(1) { transform: rotate(-8deg); }
.shape-pick-deck .shape-pick-art i:nth-child(3) { transform: rotate(8deg); }
.shape-pick-room .shape-pick-art i:first-child { width: 60px; height: 8px; }
.shape-pick-room .shape-pick-art i:last-child { width: 18px; height: 30px; }

/* ==========================================================================
   1. The board — flat, gridded, top-down. A puzzle you can see all of at once.
   ========================================================================== */

.bd-h { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s1); }
.bd-h-dishes { margin-top: var(--s3); }

.bd-counter {
  background: repeating-linear-gradient(90deg, var(--surface) 0 23px, color-mix(in srgb, var(--primary) 4%, var(--surface)) 23px 24px),
    repeating-linear-gradient(0deg, var(--surface) 0 23px, color-mix(in srgb, var(--primary) 4%, var(--surface)) 23px 24px);
  border: 2px solid color-mix(in srgb, var(--primary) 16%, transparent);
  border-radius: 4px; padding: var(--s2);
}
.bd-pieces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.bd-piece {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 78px; padding: 7px 4px; border-radius: 3px;
  background: var(--surface); border: 2px solid var(--line);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--primary) 12%, transparent);
  transition: transform 0.12s, opacity 0.12s, border-color 0.12s;
}
.bd-piece.is-hot { border-color: var(--job-hot, #c0392b); }
.bd-piece.is-warm { border-color: var(--job-warm, #d68910); }
.bd-piece-food { font-size: 21px; line-height: 1.1; }
.bd-piece-name { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.2; }
.bd-piece-day { font-size: 10.5px; color: var(--muted); }
.bd-piece.is-lit { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--job-new, #2f6b55); border-color: var(--job-new, #2f6b55); }
.bd-piece.is-dim { opacity: 0.32; }

.bd-dishes { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.bd-dish {
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  padding: 11px 12px; border-radius: 4px;
  background: var(--surface); border: 2px solid var(--line);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--primary) 10%, transparent);
}
.bd-dish.is-on { border-color: var(--job-new, #2f6b55); box-shadow: 3px 3px 0 var(--job-new, #2f6b55); }
.bd-dish-top { display: flex; align-items: center; gap: 6px; }
.bd-dish-emoji { font-size: 19px; }
.bd-dish-role { font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.bd-dish-name { font-size: 15.5px; line-height: 1.2; }
.bd-slots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.bd-slot {
  width: 21px; height: 21px; border-radius: 3px; font-style: normal; font-size: 12px;
  display: grid; place-items: center;
  border: 2px dashed color-mix(in srgb, var(--primary) 25%, transparent); background: transparent;
}
.bd-slot.is-filled { border-style: solid; border-color: var(--job-new, #2f6b55); background: color-mix(in srgb, var(--job-new, #2f6b55) 12%, var(--surface)); }
.bd-dish-line { font-size: 12.5px; color: var(--muted); }
.bd-hint { font-size: 13.5px; color: var(--muted); margin: var(--s2) 0 0; }

/* ==========================================================================
   2. The deck — physical cards. Depth, a printed back, a real turn.
   ========================================================================== */

.dk-lede { color: var(--muted); margin: 0 0 var(--s2); }
.dk-hand { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dk-slot { perspective: 1100px; transition: opacity 0.25s, transform 0.25s; }
.dk-slot.is-gone { opacity: 0.25; transform: scale(0.94) rotate(-2deg); }

.dk-card {
  position: relative; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.4, 0.1, 0.2, 1);
  min-height: 172px;
}
.dk-card.is-flipped { transform: rotateY(180deg); }
.dk-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.12);
  display: flex; flex-direction: column;
}
.dk-back {
  cursor: pointer; border: none; padding: 0;
  background: var(--primary); align-items: center; justify-content: center;
}
.dk-back-art {
  position: absolute; inset: 9px; border-radius: 7px;
  border: 1.5px solid color-mix(in srgb, var(--bg) 40%, transparent);
  background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--bg) 14%, transparent) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--bg) 14%, transparent) 0 6px, transparent 6px 12px);
}
.dk-front {
  transform: rotateY(180deg); background: var(--surface);
  border: 1px solid var(--line); padding: 14px 16px; gap: 3px;
}
.dk-role { font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.dk-emoji { font-size: 30px; line-height: 1.1; }
.dk-emoji:empty { display: none; }
.dk-name { font-size: 20px; line-height: 1.15; }
.dk-line { font-size: 14px; color: var(--muted); }
.dk-tear {
  font: inherit; font-size: 12.5px; color: var(--job-warm, #d68910); margin-top: 3px; text-align: left;
  background: none; border: none; padding: 2px 0; cursor: pointer; text-decoration: underline dotted;
}
.dk-acts { margin-top: auto; display: flex; gap: 8px; align-items: center; padding-top: 8px; }
.dk-no {
  font: inherit; font-size: 13.5px; cursor: pointer; color: var(--muted);
  background: none; border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px;
}
.dk-yes {
  font-size: 13.5px; font-weight: 600; padding: 6px 14px; border-radius: 999px;
  background: var(--primary); color: var(--on-primary); opacity: 0.45;
}
/* A dish that is one ingredient short has the corner torn off. */
.dk-card.is-torn .dk-front {
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
}
.dk-redeal {
  font: inherit; font-size: 14px; cursor: pointer; margin-top: var(--s2);
  background: none; border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; color: var(--muted);
}

/* ==========================================================================
   3. The room — one drawing. No cards at all.
   ========================================================================== */

.rm-room {
  --rm-night-top: #10141f;
  --rm-night-bot: #1d2331;
  --rm-window: #070a12;
  --rm-line: #0b0e16;
  --rm-moon: #f0e6c8;
  --rm-fridge: #cfd6dd;
  --rm-fridge-in: #fdf6e0;
  --rm-door: #b9c1c9;
  --rm-glow: #ffe9a8;
  --rm-counter: #6b5545;
  --rm-cupboard: #3f3a38;
  --rm-hob: #23262e;
  --rm-pan: #4a4f58;
  --rm-steam: #e8e4d8;
  --rm-packet: #d9cdb5;
  border-radius: var(--r-md); overflow: hidden; line-height: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.rm-svg { width: 100%; height: auto; display: block; }
.rm-hot { cursor: pointer; }
.rm-hot:focus-visible { outline: 2px solid var(--rm-glow); outline-offset: 2px; }
.rm-hot:hover { filter: brightness(1.12); }
.rm-food.is-hot { filter: drop-shadow(0 0 5px #ff8a6b); }
.rm-food.is-warm { filter: drop-shadow(0 0 4px #ffc46b); }
.rm-steam { opacity: 0.55; animation: rm-rise 3.4s ease-in-out infinite; }
@keyframes rm-rise {
  0%, 100% { opacity: 0.2; transform: translateY(2px); }
  50% { opacity: 0.65; transform: translateY(-3px); }
}
.rm-says { margin: var(--s2) 0 0; font-size: 15.5px; line-height: 1.45; }
.rm-says strong { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .dk-card, .dk-slot, .bd-piece { transition: none; }
  .rm-steam { animation: none; }
}

/* ---------- The example kitchen (so an empty kitchen can still be judged) ---------- */

.shape-demo {
  margin: 0 0 var(--s3); padding: 7px 12px; border-radius: 999px; font-size: 13.5px;
  background: color-mix(in srgb, var(--job-warm) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--job-warm) 35%, transparent);
  color: color-mix(in srgb, var(--job-warm) 55%, var(--text));
}
.shape-demo b { font-weight: 700; }
.shape-demo button, .shape-demo-line button, .shape-demo-on {
  font: inherit; cursor: pointer; color: inherit; background: none;
  border: none; text-decoration: underline; padding: 0;
}
.shape-demo-line { margin: var(--s3) 0 0; font-size: 14px; color: var(--muted); }
.shape-demo-line button { color: var(--text); font-weight: 600; }
.shape-demo-on {
  display: inline-block; margin: var(--s2) 0; padding: 10px 18px; border-radius: 999px;
  background: var(--primary); color: var(--on-primary); text-decoration: none; font-weight: 600; font-size: 15px;
}
.shape-or { margin-top: var(--s2); }