/* Heart-sealed stationery gives this game its own visual identity. */
.brand-mark { color: #b6819d; font-size: 34px; line-height: 1; }
.board { gap: 16px 13px; padding: 23px 0; }
.box-button { padding: 5px 0 7px; border-radius: 16px; }
.box-button:not(:disabled):hover { background: #f4e7f047; }
.envelope-svg {
  display: block; width: 100%; max-width: 96px; height: auto; overflow: visible;
  transform-origin: 50% 80%;
  transition: transform .35s ease, opacity .35s ease, filter .35s ease;
}
.envelope-body { transition: transform .35s ease; }
.envelope-flap { transform-origin: 60px 46px; transition: transform .4s ease, opacity .25s ease; }
.envelope-open-flap { opacity: 0; transition: opacity .3s ease; }
.envelope-note { opacity: 0; transform: translateY(22px); transition: opacity .3s ease, transform .4s ease; }
.envelope-seal { transform-origin: 60px 77px; transition: opacity .25s ease, transform .3s ease; }
.box-button:not(:disabled):hover .envelope-svg,
.box-button:not(:disabled):focus-visible .envelope-svg { transform: translateY(-5px) rotate(-3deg); }
.box-button:not(:disabled):hover .envelope-seal { transform: scale(1.07); }
.box-number {
  padding: 3px 9px; margin-top: 1px; border-radius: 30px; min-height: 21px;
  border: 1px solid #dcdbe67a; background: #fffafcc9; color: #76869a;
  font-size: 9px; letter-spacing: 1.3px;
}
.box-button.used .envelope-svg { opacity: .78; filter: saturate(.72); }
.box-button.used .envelope-open-flap,
.box-button.used .envelope-note { opacity: 1; }
.box-button.used .envelope-note { transform: translateY(0); }
.box-button.used .envelope-flap { opacity: 0; transform: scaleY(-1); }
.box-button.used .envelope-seal { opacity: 0; transform: scale(.6); }
.box-button.used .box-number { color: #8b7c90; background: #efe8f2a6; border-style: dashed; font-size: 9px; }
.box-button.just-opened .envelope-note { animation: note-peek .55s ease both; }
.hero-fallback .envelope-svg { max-width: none; width: 195px; left: 30%; top: 14%; filter: drop-shadow(0 18px 15px #a987a725); transform: rotate(-9deg); }
.hero-fallback .envelope-svg:nth-child(2) { width: 132px; left: 4%; top: 0; transform: rotate(-24deg); opacity: .9; }
.hero-fallback .envelope-svg:nth-child(3) { width: 124px; left: 69%; top: 43%; transform: rotate(17deg); }
.hero-art .orbit { border-style: dashed; opacity: .55; }
@keyframes note-peek { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) {
  .board { gap: 17px 12px; padding: 20px 0; }
  .hero-fallback .envelope-svg { width: 139px; left: 25%; top: 18%; }
  .hero-fallback .envelope-svg:nth-child(2) { width: 94px; left: 0; top: 5%; }
  .hero-fallback .envelope-svg:nth-child(3) { width: 87px; left: 68%; top: 48%; }
}
@media (max-width: 480px) {
  .board { gap: 14px 6px; padding: 17px 0; }
  .box-button { padding: 2px 0 5px; }
  .box-number { padding: 2px 6px; min-height: 18px; font-size: 8px; }
  .box-button.used .box-number { font-size: 8px; }
  .hero-art { width: 169px; height: 182px; bottom: 9px; }
  .hero-fallback .envelope-svg { width: 105px; left: 19%; top: 20%; }
  .hero-fallback .envelope-svg:nth-child(2) { width: 70px; left: 0; top: 9%; }
  .hero-fallback .envelope-svg:nth-child(3) { width: 63px; left: 63%; top: 49%; }
  .question-dialog { padding: 35px 20px 23px; }
  .question-dialog h2 { font-size: clamp(23px, 6.4vw, 29px); line-height: 1.32; }
  .question-dialog .question-ornament { font-size: 42px; margin: 16px 0 10px; }
  .question-dialog .question-box-label { margin-bottom: 13px; }
  .question-dialog .question-divider { margin: 19px auto; }
}
@media (prefers-reduced-motion: reduce) {
  .envelope-svg, .envelope-body, .envelope-flap, .envelope-note,
  .envelope-open-flap, .envelope-seal { transition: none !important; animation: none !important; }
}