:root { --jade:#083e35; --jade-dark:#032922; --lime:#d8f269; --paper:#f5f8ef; --ink:#09352d; --red:#e7413d; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--paper); background:#021e19; font-family:"Noto Sans HK",sans-serif; }
.app-shell { width:min(100vw,506px); min-height:100svh; aspect-ratio:9 / 16; margin:auto; padding:clamp(22px,4vh,34px) 22px 22px; display:flex; flex-direction:column; align-items:center; overflow:hidden; background:radial-gradient(circle at 50% 33%,#196354 0,#083e35 38%,#032922 90%); }
header { text-align:center; z-index:3; }
.eyebrow { margin:0 0 8px; font-size:11px; letter-spacing:.23em; color:#b0d7a7; }
h1 { font:900 clamp(36px,6vw,62px)/1 "Noto Serif HK",serif; margin:0; letter-spacing:.14em; text-indent:.14em; }
.instruction { margin:13px 0 0; font-size:14px; color:#cbe0cf; }
.drawing-stage { position:relative; width:100%; flex:1; min-height:0; display:grid; place-items:center; }
.halo { position:absolute; width:85%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(216,242,105,.2),transparent 67%); filter:blur(12px); }
.machine-wrap { position:relative; height:92%; width:100%; isolation:isolate; display:flex; justify-content:center; }
.machine { height:100%; max-width:100%; object-fit:contain; position:relative; z-index:2; filter:drop-shadow(0 18px 16px rgba(0,0,0,.33)); }
/* 球池限制於透明玻璃球內，不延伸到下方機座。 */
.ball-chamber { position:absolute; z-index:3; width:56%; height:45%; top:27%; left:22%; border-radius:50%; overflow:hidden; }
.mini-ball { position:absolute; width:11.5%; height:auto; left:0; top:0; filter:drop-shadow(0 2px 2px rgba(0,0,0,.26)); transform-origin:center; will-change:transform; }
.pomelo-leaves { position:fixed; z-index:50; width:min(36vw,185px); left:0; top:0; opacity:0; transform:translate(-50%,-50%) rotate(-18deg); pointer-events:none; filter:drop-shadow(0 10px 10px rgba(0,0,0,.34)); }
.leaf-sweep { animation:sweep 2.75s cubic-bezier(.2,.8,.25,1) both; }
.result-orb { position:absolute; z-index:7; display:grid; place-items:center; top:10%; right:4%; width:clamp(92px,18vw,132px); aspect-ratio:1; opacity:0; transform:scale(.25) rotate(-25deg); filter:drop-shadow(0 18px 18px rgba(0,0,0,.35)); }
.result-orb img { width:100%; height:100%; object-fit:contain; }
.result-orb.reveal { animation:pop .5s cubic-bezier(.17,.89,.32,1.35) forwards; }
.controls { width:min(100%,620px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; margin-top:-5px; z-index:10; }
button { font:700 16px "Noto Sans HK",sans-serif; cursor:pointer; border:0; }
#drawButton { grid-column:2; min-width:210px; color:#173d20; padding:15px 28px 16px; background:var(--lime); border-radius:999px; box-shadow:0 6px 0 #7e9e2b,0 12px 22px rgba(0,0,0,.25); transition:transform .15s,box-shadow .15s; font-family:"Noto Serif HK",serif; font-size:19px; letter-spacing:.12em; text-indent:.12em; text-align:center; }
#drawButton:hover { transform:translateY(-2px); } #drawButton:active { transform:translateY(4px); box-shadow:0 2px 0 #7e9e2b; }
#drawButton:disabled { cursor:wait; filter:saturate(.5); }
#drawButton span { display:none; }
.reset { grid-column:3; justify-self:end; padding:10px 4px; background:transparent; color:#b9d1ba; text-decoration:underline; text-underline-offset:4px; font-size:13px; }
.history { margin-top:26px; width:min(100%,620px); border-top:1px solid rgba(226,250,210,.32); padding-top:13px; }
.history-heading { display:flex; justify-content:space-between; font-size:12px; letter-spacing:.1em; color:#b8d3bd; }
.history-list { display:flex; flex-wrap:wrap; gap:8px; min-height:45px; padding-top:11px; }.history-list p { margin:2px 0;color:#9fb9a4;font-size:14px; }
.history-ball { width:36px; aspect-ratio:1; object-fit:contain; }
@keyframes sweep {
  0% { opacity:0; transform:translate(calc(21.7vw - 50%),calc(26.8svh - 50%)) scale(.82) rotate(-22deg); }
  9% { opacity:1; transform:translate(calc(21.7vw - 50%),calc(26.8svh - 50%)) scale(1) rotate(-28deg); }
  16% { opacity:1; transform:translate(calc(18.7vw - 50%),calc(28.8svh - 50%)) scale(1.03) rotate(18deg); }
  23% { opacity:1; transform:translate(calc(24.7vw - 50%),calc(24.8svh - 50%)) scale(1) rotate(-25deg); }
  30% { opacity:1; transform:translate(calc(21.7vw - 50%),calc(26.8svh - 50%)) scale(1.02) rotate(15deg); }
  43% { opacity:1; transform:translate(calc(86.1vw - 50%),calc(42.8svh - 50%)) scale(1.03) rotate(25deg); }
  50% { opacity:1; transform:translate(calc(82.5vw - 50%),calc(45.2svh - 50%)) scale(1.05) rotate(-20deg); }
  57% { opacity:1; transform:translate(calc(88.5vw - 50%),calc(40.2svh - 50%)) scale(1.02) rotate(23deg); }
  64% { opacity:1; transform:translate(calc(86.1vw - 50%),calc(42.8svh - 50%)) scale(1.03) rotate(-17deg); }
  75% { opacity:1; transform:translate(calc(28vw - 50%),calc(66.2svh - 50%)) scale(1) rotate(-24deg); }
  82% { opacity:1; transform:translate(calc(25vw - 50%),calc(68.8svh - 50%)) scale(1.03) rotate(19deg); }
  89% { opacity:1; transform:translate(calc(31vw - 50%),calc(63.3svh - 50%)) scale(1) rotate(-21deg); }
  94% { opacity:1; transform:translate(calc(28vw - 50%),calc(66.2svh - 50%)) scale(.96) rotate(12deg); }
  100% { opacity:0; transform:translate(calc(28vw - 50%),calc(66.2svh - 50%)) scale(.85) rotate(0deg); }
}
@keyframes pop { to { opacity:1; transform:scale(1) rotate(0); } }
@media (min-aspect-ratio: 10/16) { body { display:grid; place-items:center; padding:12px; } .app-shell { min-height:min(100svh - 24px,900px); box-shadow:0 0 70px rgba(0,0,0,.55); } }
@media (max-width:370px) { .app-shell { padding-inline:16px; } h1 { font-size:34px; } .result-orb { width:78px; } }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
  /* 使用者明確要求嘅開運前奏必須可見。 */
  .pomelo-leaves.leaf-sweep { animation:sweep 2.75s cubic-bezier(.2,.8,.25,1) both!important; }
}