/* ==========================================================================
   Polish from first real-phone playtest (loaded last)
   ========================================================================== */

/* Intro title card: when it is taller than the phone, start at the top and scroll
   (flex centring used to cut "A 24-DAY HOLIDAY ADVENT…" off above the screen). */
.stage-intro { justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.stage-intro > * { margin-top: auto; margin-bottom: auto; flex-shrink: 0; }

/* No grey/blue Android tap flash or long-press image selection on game pieces */
button, [role="button"], .adv-window, .rm-hotspot, .rm-guest, .k-ing, .k-plate-wrap, .fin-seat, .fin-dish, .dawn-parcel {
  -webkit-tap-highlight-color: transparent;
}
.k-plate-wrap, .k-plate, .k-plate img, .k-ing, .k-stir-zone, .k-vessel, .fin-dish img, .adv-window img, .room-canvas img, .arrival-stage img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.k-plate img, .room-canvas img, .arrival-stage img { -webkit-user-drag: none; pointer-events: none; }
.k-plate-wrap:active .k-plate { transform: scale(0.97); }
.k-plate { transition: transform 0.12s ease; }

/* Phone HUD: everything fits on one row, nothing overlaps */
@media (max-width: 767px) {
  .hearth-hud { gap: 4px; padding: 6px 6px; }
  .hud-meters { gap: 2px; padding: 3px 8px; justify-content: space-around; min-width: 0; overflow: hidden; }
  .hud-meter { gap: 2px; padding: 0 1px; }
  .meter-track { display: none; }
  .meter-icon { font-size: 15px; }
  .meter-info strong { font-size: 14px; }
  .hud-actions { gap: 3px; }
  .btn-hud-icon, .btn-hud-primary.is-compact { width: 34px; height: 34px; min-width: 34px; font-size: 15px; padding: 0; }
}
@media (max-width: 359px) {
  .meter-icon { font-size: 13px; }
  .btn-hud-icon, .btn-hud-primary.is-compact { width: 31px; height: 31px; min-width: 31px; }
}

/* Winter Guestbook on phones: travelers as a row of tabs on top, the letter full-width below */
@media (max-width: 700px) {
  #guestbook-modal .ceremony-window { padding: 22px 16px !important; }
  #guestbook-modal .gb-grid { display: block !important; }
  #guestbook-modal .gb-index {
    display: flex;
    gap: 8px;
    overflow-x: auto !important;
    max-height: none !important;
    border-right: none !important;
    border-bottom: 1px solid #D6C2AC;
    padding: 0 0 10px 0 !important;
    margin-bottom: 14px;
    -webkit-overflow-scrolling: touch;
  }
  #guestbook-modal .gb-entry-row { flex: 0 0 auto; min-width: 150px; margin-bottom: 0 !important; }
  #guestbook-modal .gb-letter { padding-left: 0 !important; }
  #guestbook-modal .handwritten-letter { font-size: 22px !important; }
}

/* Install as an app (real PWA install, not a browser shortcut) */
.install-box { margin: 0 0 16px 0; }
.install-btn { width: 100%; text-align: left; border: 2px solid #244A3D; background: #E6F1EA; color: #1C3A30; border-radius: 12px; padding: 12px 14px; font-family: var(--font-ui); font-size: 16px; font-weight: 700; cursor: pointer; }
.install-btn span { display: block; font-size: 13px; font-weight: 600; color: #4F6B5E; margin-top: 2px; }
.install-help { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #FFF7E8; border: 1px dashed #C48A3A; font-family: var(--font-prose); font-size: 15px; line-height: 1.5; color: #2B1E17; }

/* Tree ornaments scale with the tree (24 must fit on a phone) */
.tree-ornament svg { display: block; width: 100%; height: auto; }
.tree-ornament.is-dragging, .tree-ornament:active { z-index: 5; }

/* Touch: scroll the page over the tree, swipe the tray sideways, drag ornaments upward */
#tree-canvas-stage { touch-action: pan-y !important; }
#tree-canvas-stage .tree-ornament-node { touch-action: none !important; }
.ornament-tray-item { touch-action: pan-x !important; }

/* Ceremony steps: one tidy row of four, no wrapping, room for the close button */
.beat-track { display: flex; justify-content: center; align-items: flex-start; gap: 0; list-style: none; margin: 0 44px 16px 44px; padding: 0; }
.beat-track li { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.beat-track li:not(:last-child)::after { content: ""; position: absolute; top: 17px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 2px; background: #E2D3BF; }
.beat-track li.is-done:not(:last-child)::after { background: #4F8A6E; }
.bt-dot { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; background: #EFE4D2; border: 2px solid #D9C8B5; color: #244A3D; font-family: var(--font-ui); font-weight: 800; }
.beat-track li.is-done .bt-dot { background: #E6F1EA; border-color: #4F8A6E; }
.beat-track li.is-active .bt-dot { background: #FFF3E6; border-color: #8F2432; box-shadow: 0 0 0 4px rgba(143, 36, 50, 0.15); }
.bt-label { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: #9C8775; white-space: nowrap; }
.beat-track li.is-active .bt-label { color: #8F2432; }
.beat-track li.is-done .bt-label { color: #244A3D; }
@media (max-width: 420px) {
  .beat-track { margin: 0 40px 14px 40px; }
  .beat-track li:not(.is-active) .bt-label { display: none; }
  .bt-dot { width: 30px; height: 30px; font-size: 14px; }
  .beat-track li:not(:last-child)::after { top: 15px; left: calc(50% + 17px); right: calc(-50% + 17px); }
}
.rp-tidy { margin: 0 0 10px 0; }