/* 網站上的小院子（play.js）：app 的院子顏色——白天米色天空＋淡綠草地；晚上用 app 夜晚的顏色（scene.night.*）。 */
.meyard { --sky: #F6EEDD; --ink: #4A3A2E; --soft: #7A6453; --card: #FFFBF3; --line: #E6D8C0; --coral: #D86B50;
  position: relative; width: 100%; max-width: 560px; margin: 0 auto; font: inherit; color: var(--ink); }
.meyard .sky { position: relative; height: 230px; border-radius: 22px 22px 0 0; background: var(--sky); overflow: hidden; transition: background .8s; }
.meyard .clock { position: absolute; right: 14px; top: 10px; font-size: 14px; color: var(--soft); letter-spacing: .05em; }
.meyard .moon { display: none; position: absolute; left: 46%; top: 18px; width: 34px; height: 34px; border-radius: 50%; box-shadow: -8px 4px 0 0 #F6EEDD; transform: rotate(-20deg); }
.meyard .meadow { position: absolute; left: 0; width: 100%; height: auto; pointer-events: none; transition: filter .8s; }
.meyard .meadow.back { bottom: 0; height: 74px; object-fit: cover; object-position: top; }
.meyard .meadow.front { bottom: 0; height: 38px; object-fit: cover; object-position: top; }
.meyard .shelly { position: absolute; left: 0; top: 112px; width: 120px; height: 120px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.meyard .shelly:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.meyard .bob { display: block; position: relative; width: 100%; height: 100%; }
.meyard .bob img { position: absolute; left: -25%; top: -35%; width: 150%; height: 150%; max-width: none; }
.meyard .shelly.walking .bob img { animation: me-hop .5s ease-in-out infinite; }
@keyframes me-hop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.meyard .bubble { position: absolute; top: 58px; translate: -50% 0; max-width: 220px; margin: 0; padding: 7px 14px; background: var(--card); border: 1.6px solid var(--ink); border-radius: 16px 18px 15px 17px; font-size: 15px; line-height: 1.45; text-align: center; z-index: 2; }
@media (max-width: 480px) { .meyard .bubble { font-size: 16px; } }
.meyard .bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; margin-left: -6px; background: var(--card); border-right: 1.6px solid var(--ink); border-bottom: 1.6px solid var(--ink); transform: rotate(45deg); }
.meyard .egg { position: absolute; right: 16px; top: 40px; width: 150px; text-align: center; z-index: 1; }
.meyard .egg img { width: 62px; height: auto; margin: 0 auto; }
.meyard .egg p { margin: 2px 0 0; font-size: 13px; line-height: 1.35; background: #FFFBF3e6; border-radius: 10px; padding: 3px 6px; }
.meyard .egg a { color: var(--coral); white-space: nowrap; }
.meyard .egg.pop img { animation: me-pop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes me-pop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.meyard .ask { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: end; background: var(--card); border-radius: 0 0 22px 22px; padding: 14px 16px 12px; box-shadow: 0 2px 0 var(--line); }
.meyard .ask label { display: grid; gap: 4px; }
.meyard .ask .q { font-size: 16px; font-weight: 700; }
.meyard .ask input { font: inherit; font-size: 16px; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); min-width: 0; }
.meyard .ask input:focus { outline: none; border-color: var(--coral); }
.meyard .ask button { font: inherit; font-size: 16px; border: 0; border-radius: 12px; padding: 9px 16px; background: var(--coral); color: #fff; cursor: pointer; box-shadow: 0 3px 0 #A94E38; }
.meyard .ask button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.meyard .ask small { grid-column: 1 / -1; color: var(--soft); font-size: 14px; }
.meyard .ask input, .meyard .ask button { min-height: 44px; }
/* 晚上（18:00～5:00） */
.meyard.night .sky { background: #2B3150; background-image: radial-gradient(#FBE7A6 1px, transparent 1.6px), radial-gradient(#FBE7A699 1px, transparent 1.6px); background-size: 90px 70px, 60px 90px; background-position: 12px 14px, 40px 36px; }
.meyard.night .moon { display: block; }
.meyard.night .clock { color: #C9C2DE; }
.meyard.night .meadow { filter: brightness(.42) saturate(1.3) hue-rotate(170deg); }
@media (max-width: 480px) {
  .meyard .sky { height: 210px; }
  .meyard .shelly { top: 100px; width: 104px; height: 104px; }
  .meyard .egg { width: 118px; right: 8px; top: 34px; }
  .meyard .egg img { width: 52px; }
  .meyard .ask { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .meyard * { animation: none !important; transition: none !important; } }