:root { color-scheme: light; background: #3a3936; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { touch-action: none; user-select: none; }
canvas { display: block; width: 100%; height: 100%; }

/* Text over the painting. Sizes follow the screen height: --u is 1 at 1080 px. */
#ui { --u: 1; position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif; }
.pop { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; transition: opacity .45s ease, transform .45s ease; }
.pop[hidden] { display: none; }
.pop.show { opacity: 1; }
#wish, #toast, #card { font-family: KaiTi, STKaiti, "Kaiti SC", serif; }

/* Cat */
#bubble { translate: -50% -100%; transform: translateY(calc(var(--u) * 8px)) scale(.9);
  padding: calc(var(--u) * 7px) calc(var(--u) * 16px); border-radius: calc(var(--u) * 18px);
  background: #fffaf2; color: #5c4a3e; font-size: calc(var(--u) * 22px); letter-spacing: .04em; white-space: nowrap;
  box-shadow: 0 calc(var(--u) * 4px) calc(var(--u) * 14px) rgba(60, 40, 28, .2); }
#bubble::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--u) * -6px);
  width: calc(var(--u) * 13px); height: calc(var(--u) * 13px); background: inherit;
  translate: -50% 0; rotate: 45deg; border-radius: 0 0 calc(var(--u) * 3px) 0; }
#bubble.show { transform: none; }

/* Wish on a shooting star: rises and fades by itself. */
#wish { translate: -50% -100%; color: #fff4d4; font-size: calc(var(--u) * 30px); letter-spacing: .14em; white-space: nowrap;
  text-shadow: 0 0 calc(var(--u) * 8px) rgba(255, 222, 150, .9), 0 0 calc(var(--u) * 22px) rgba(255, 196, 110, .5); }
#wish.show { animation: wish 2.4s ease-out both; }
@keyframes wish {
  from { opacity: 0; transform: translateY(calc(var(--u) * 12px)); }
  18% { opacity: 1; }
  70% { opacity: 1; }
  to { opacity: 0; transform: translateY(calc(var(--u) * -22px)); }
}

/* Season change: a vermilion seal and a line */
#toast { translate: -50% -50%; display: flex; align-items: center; gap: calc(var(--u) * 16px);
  padding: calc(var(--u) * 11px) calc(var(--u) * 30px) calc(var(--u) * 11px) calc(var(--u) * 11px);
  border-radius: calc(var(--u) * 6px); background: rgba(250, 246, 237, .88); color: #3f3631; white-space: nowrap;
  box-shadow: 0 calc(var(--u) * 10px) calc(var(--u) * 32px) rgba(48, 34, 24, .18), 0 0 0 1px rgba(150, 118, 88, .2);
  transform: translateY(calc(var(--u) * -10px)); }
#toast.show { transform: none; }
#toast.night { background: rgba(26, 30, 48, .74); color: #f0e7d6;
  box-shadow: 0 calc(var(--u) * 10px) calc(var(--u) * 32px) rgba(0, 0, 0, .3), 0 0 0 1px rgba(230, 210, 180, .16); }
#toast-glyph, .seal { display: grid; place-items: center; line-height: 1; background: #b3382b; color: #fff4e8;
  box-shadow: inset 0 0 0 calc(var(--u) * 2px) #b3382b, inset 0 0 0 calc(var(--u) * 3.5px) rgba(255, 240, 225, .75); }
#toast-glyph { width: calc(var(--u) * 56px); height: calc(var(--u) * 56px); border-radius: calc(var(--u) * 6px); font-size: calc(var(--u) * 36px); }
#toast-line { font-size: calc(var(--u) * 27px); letter-spacing: .16em; }

/* Tea card: rice paper, the poem in columns read right to left */
#card { translate: -50% -50%; width: calc(var(--u) * 320px); display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--u) * 30px) calc(var(--u) * 30px) calc(var(--u) * 26px); border-radius: calc(var(--u) * 4px); color: #3d3530;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .7), transparent 70%), linear-gradient(#fbf7ee, #f1e9d8);
  box-shadow: 0 calc(var(--u) * 16px) calc(var(--u) * 44px) rgba(36, 26, 18, .3), 0 0 0 1px rgba(150, 116, 84, .22);
  transform: translateY(calc(var(--u) * 16px)) rotate(-1deg); }
#card.show { transform: rotate(-1deg); }
#card::before { content: ""; position: absolute; inset: calc(var(--u) * 10px); border: 1px solid rgba(165, 125, 88, .38); border-radius: 2px; }
#card-date { margin: 0; font-size: calc(var(--u) * 16px); letter-spacing: .3em; color: #9a6a4c; }
#card-poem { margin: calc(var(--u) * 20px) 0 calc(var(--u) * 16px); writing-mode: vertical-rl;
  font-size: calc(var(--u) * 32px); line-height: 1.9; letter-spacing: .16em; color: #2f2925; }
#card-poem span { display: block; }
#card-by { margin: 0; font-size: calc(var(--u) * 16px); letter-spacing: .06em; text-align: center; text-wrap: balance; color: #7d6a5b; }
#card-note { width: 100%; margin: calc(var(--u) * 14px) 0 0; padding-top: calc(var(--u) * 13px); border-top: 1px dashed rgba(150, 112, 80, .4);
  font-size: calc(var(--u) * 17px); text-align: center; text-wrap: balance; color: #54463c; }
.yi { display: flex; align-items: center; gap: calc(var(--u) * 8px); margin: calc(var(--u) * 10px) 0 0; font-size: calc(var(--u) * 18px); color: #54463c; }
.seal { width: calc(var(--u) * 26px); height: calc(var(--u) * 26px); border-radius: calc(var(--u) * 3px); font-size: calc(var(--u) * 17px); }

#error { position: absolute; inset: auto 20px 20px; margin: 0; padding: 16px; color: #3d3530; background: #f6f0e4; font: 15px/1.6 "Microsoft YaHei", sans-serif; }
#error[hidden] { display: none; }