/* Court goods at home: the flower book, the topiary shapes, the Starlight Fountain (see shared/courtfarm.ts) */

/* the flower book: a tab for each kind of hybrid, then a card for each (a page, or its silhouette) */
.cf-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 8px; }
.cf-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cf-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 8px 6px 9px; border-radius: 10px;
  background: linear-gradient(#fffaf0, #fff4e0); border: 2px solid var(--paper2); box-shadow: inset 0 0 0 3px #fffdf8; }
.cf-card b { font-size: 14.5px; }
.cf-card .sub { font-size: 12px; line-height: 1.3; }
.cf-page { width: 64px; height: 84px; image-rendering: pixelated; margin-bottom: 2px; }
.cf-card.unknown { background: repeating-linear-gradient(135deg, #f6efe2 0 6px, #f2e9d8 6px 12px); }
.cf-card.unknown b { color: #8a7a6a; letter-spacing: 2px; }
.cf-card.unknown .cf-page { opacity: 0.55; }
.cf-hint { font-style: italic; color: #7a6a5a; }
.cf-parents { color: #8a6038; font-weight: 600; }
.cf-by { color: #6a7a5a; margin-top: 3px; }
.cf-note { grid-column: 1 / -1; align-items: flex-start; text-align: left; background: #f4f0ff; border-color: #c8c0e8; }
.cf-how { margin-top: 10px; }
.cf-how summary { cursor: pointer; font-weight: 600; color: #6a4a8a; }
.cf-how p { margin: 4px 0 0 4px; }

/* topiary: a button for each shape, drawn */
.cf-shapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0; }
.cf-shape { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 9px; border: 2px solid var(--wood2); background: #f4fbe8; font: inherit; font-size: 12.5px; cursor: pointer; }
.cf-shape:hover:not(:disabled) { background: #e8f6d4; }
.cf-shape.now { border-color: #e8b030; background: #fff6d8; }
.cf-shape.locked { opacity: 0.5; cursor: default; background: #eee8dc; }
.cf-shape-img { width: 36px; height: 52px; image-rendering: pixelated; }

/* the fountain */
.cf-fountain { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cf-fount-img { width: 96px; height: 108px; image-rendering: pixelated; border-radius: 10px; background: radial-gradient(#3a3a6a, #1e1e3a); padding: 4px; }
.cf-fountain .btns { justify-content: center; flex-wrap: wrap; }

@media (max-width: 520px) {
  .cf-cards { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .cf-page { width: 56px; height: 74px; }
  .cf-shapes { grid-template-columns: repeat(3, 1fr); }
}