/* Guhit Mo, Hula Ko — Kilig Sketchbook (v107). Original Puso styling:
   warm paper page on plum night, rose + coral inks, gold ocean-wave
   divider, sampaguita-white margins. Every rule is scoped to guhit
   classes; no global rules. Fit is CSS specs only (phone, folded,
   unfolded, desktop breakpoints below) — no device test is claimed.
   Contrasts are package-computed (ink on paper, muted on paper,
   light on plum), not live-verified. */
.guhit-wrap { background: #fff8e6; color: #241026; border-radius: 18px; padding: 16px; }
.guhit-wrap.guhit-dark { background: #2b1230; color: #fff8e6; }
.guhit-wrap.guhit-dark .guhit-card { background: #3d1a3e; color: #fff8e6; border-color: #6b4a5e; }
.guhit-wrap.guhit-contrast { background: #ffffff; color: #000000; }
.guhit-wave { height: 10px; max-width: 420px; margin: 14px auto; border-radius: 99px;
  background: linear-gradient(90deg, #d9a441, #e86a7c, #ff8a6b, #d9a441); }
.guhit-card { border: 2px solid #e6d3a8; background: #fffdf2; border-radius: 18px; padding: 16px; }
.guhit-card.deck-food { border-top: 8px solid #c96a2b; }
.guhit-card.deck-places { border-top: 8px solid #2f7d5b; }
.guhit-card.deck-hugot { border-top: 8px solid #e86a7c; }
.guhit-card.deck-everyday { border-top: 8px solid #7a5bd6; }
.guhit-card.deck-own { border-top: 8px solid #d9a441; }
.guhit-prompt-card { cursor: pointer; text-align: left; width: 100%; }
.guhit-prompt-card:hover { outline: 3px solid #d9a441; }
.guhit-decktag { font-size: 13px; font-weight: 800; text-transform: uppercase; color: #6b4a5e; }
.guhit-q { font-size: 22px; font-weight: 800; }
.guhit-tip { font-size: 15px; color: #6b4a5e; }
.guhit-canvas { width: 100%; height: 340px; background: #fffef7; border: 2px solid #241026;
  border-radius: 16px; touch-action: none; display: block; }
.guhit-canvas-mini { height: 180px; }
.guhit-wrap.guhit-large .guhit-canvas { height: 420px; }
.guhit-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.guhit-swatch { width: 48px; height: 48px; min-height: 48px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0; }
.guhit-swatch[aria-pressed="true"] { border-color: #241026; outline: 3px solid #d9a441; }
.guhit-swatch-label { font-size: 14px; }
.guhit-timer { font-size: 28px; font-weight: 900; }
.guhit-blanks { font-size: 26px; font-weight: 900; letter-spacing: .18em; word-break: break-word; }
.guhit-score { font-size: 20px; font-weight: 800; }
.guhit-badge { display: inline-block; background: #e86a7c; color: #ffffff; border-radius: 99px; padding: 6px 14px; font-weight: 800; }
.guhit-badge.green { background: #2f7d5b; }
.guhit-note { background: #f3e6ff; border: 1px solid #c9a8e8; border-radius: 12px; padding: 12px; }
.guhit-warn { background: #fff1c9; border: 1px solid #d9a441; border-radius: 12px; padding: 12px; }
.guhit-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.guhit-gitem { border: 2px solid #e6d3a8; border-radius: 16px; padding: 10px; background: #fffdf2; }
.guhit-gitem canvas { width: 100%; height: 130px; }
.guhit-small { font-size: 14px; color: #6b4a5e; }
.guhit-wrap.guhit-dark .guhit-small, .guhit-wrap.guhit-dark .guhit-tip, .guhit-wrap.guhit-dark .guhit-decktag { color: #e8cfe0; }
.guhit-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.guhit-wrap button:focus-visible, .guhit-wrap input:focus-visible, .guhit-wrap select:focus-visible, .guhit-wrap canvas:focus-visible { outline: 3px solid #d9a441; outline-offset: 2px; }
.guhit-wrap input, .guhit-wrap select { font-size: 17px; padding: 11px; border: 2px solid #241026; border-radius: 12px; min-height: 48px; }
.guhit-wrap table { width: 100%; border-collapse: collapse; }
.guhit-wrap th, .guhit-wrap td { text-align: left; padding: 8px; border-bottom: 1px solid #e6d3a8; }
@media (max-width: 480px) {
  .guhit-wrap { padding: 14px; border-radius: 18px; }
  .guhit-canvas { height: 260px; }
  .guhit-blanks { font-size: 22px; }
  .guhit-timer { font-size: 22px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .guhit-canvas { height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .guhit-wrap * { animation: none !important; transition: none !important; }
}