/* Chapter 3: The Tea Salon puzzles. Laid out for landscape screens first (phones are played sideways). */
@keyframes wobble { 20% { transform: rotate(-6deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .tc-saucer.wrong, .mad-chip.wrong { animation: none !important; } }

/* Teacups */
.teacups .modal-card { max-width: 760px; }
.tc-label { margin: 6px 0 2px; font-weight: 700; color: #7a3b1e; font-size: .9rem; }
.tc-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; min-height: 72px; }
.tc-cup, .tc-saucer { width: 76px; height: 68px; border: 3px solid transparent; border-radius: 14px; background: #f3e9d6; padding: 2px; }
.tc-cup svg, .tc-saucer svg { width: 100%; height: 100%; display: block; }
.tc-cup.picked { border-color: var(--accent); background: #ffe2d6; transform: translateY(-4px); }
.tc-saucer.full { background: #fff7e6; }
.tc-saucer.wrong { border-color: #e74c3c; background: #fde2dd; animation: wobble .5s 2; }
.tc-empty { width: 76px; height: 68px; border: 2px dashed #e0c9a0; border-radius: 14px; }

/* Stopped clock */
.clockp .modal-card { max-width: 700px; }
.clock-wrap { display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; }
.clock-face { width: min(240px, 52vh); height: auto; flex: none; }
.clock-ctrl { flex: 1 1 240px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.clock-ctrl p { margin: 0; }
.clock-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.clock-btns .btn { min-height: 44px; padding: 8px 10px; }

/* Madeleines */
.madeleinesp .modal-card { max-width: 860px; }
.mad-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; text-align: left; align-items: start; }
.mad-card { background: #fff7e6; border: 2px dashed #e0c9a0; border-radius: 14px; padding: 10px 14px; font-family: 'Fredoka', cursive; }
.mad-card h3 { margin: 0 0 4px; }
.mad-card p { margin: 0 0 6px; }
.mad-card ul { margin: 0; padding-left: 18px; }
.mad-card li { margin: 4px 0; line-height: 1.3; }
.mad-things { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mad-thing { border: none; border-radius: 12px; background: #eadfcd; color: var(--card-ink); min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .78rem; font-weight: 600; padding: 4px; }
.mad-thing span { font-size: 1.4rem; line-height: 1.1; }
.mad-thing:active { transform: translateY(2px); }
.mad-bowl { margin: 8px 0 4px; min-height: 52px; border-radius: 0 0 40px 40px; background: #dff3ff; border: 3px solid #9fc7e0; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; justify-content: center; padding: 6px; }
.mad-chip { font-size: 1.5rem; }
.mad-chip.wrong { display: inline-block; animation: wobble .5s 3; filter: drop-shadow(0 0 4px #e74c3c); }
.madeleinesp .row { margin-top: 6px; }
.madeleinesp .msg { margin: 6px 0 0; text-align: center; }

/* Henri's recipe book page */
.recipe-book .modal-card { max-width: 520px; background: #fbf3df; }
.recipe-page .rb-time { font-size: 1.15rem; font-family: 'Fredoka', cursive; }
.rb-card { background: #fff; border-radius: 12px; padding: 8px 12px; margin: 10px 0; }

/* Short landscape screens (phones held sideways): tighter so nothing needs scrolling. */
@media (orientation: landscape) and (max-height: 540px) {
  .teacups h2, .clockp h2, .madeleinesp h2 { font-size: 1.1rem; margin-bottom: 4px; }
  .madeleinesp .modal-card { padding: 12px 52px 12px 16px; } /* room for the ✕ beside the ingredients */
  .teacups .round-title { font-size: .95rem; }
  .tc-label { margin: 2px 0; font-size: .8rem; }
  .tc-cup, .tc-saucer, .tc-empty { width: 64px; height: 56px; }
  .tc-row { min-height: 58px; gap: 6px; }
  .teacups .msg { margin: 4px 0; font-size: .9rem; }
  .teacups .row { margin-top: 4px; }
  .clock-face { width: min(220px, 62vh); }
  .mad-card { font-size: .85rem; padding: 6px 10px; }
  .mad-card li { margin: 2px 0; }
  .mad-thing { min-height: 44px; font-size: .7rem; }
  .mad-bowl { min-height: 44px; margin: 6px 0 2px; }
  .madeleinesp .row .btn { padding: 6px 12px; min-height: 40px; font-size: .9rem; }
}