@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;700&display=swap');:root{--paper:#f6f1e7;--ink:#23443d;--green:#719b78;--red:#bc5148;--line:#d9cdbd}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}.page{max-width:720px;margin:auto;min-height:100vh;padding:20px 22px 28px;background:radial-gradient(circle at 87% 22%,#d7e5d266,transparent 28%),var(--paper)}header img{display:block;width:142px;height:72px;object-fit:contain;object-position:left center}.intro{padding:36px 0 24px}.intro h1{font:700 clamp(42px,10vw,68px)/1.16 "Noto Serif SC",serif;letter-spacing:.03em;margin:0}.intro em{font-style:normal;color:var(--green)}.intro p{margin:20px 0 0;color:#63766d;font-size:14px}.draw-area{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0 24px;text-align:center}.cards{height:285px;position:relative;max-width:470px;margin:auto}.gift-card{position:absolute;left:50%;top:18px;width:150px;height:224px;padding:13px;background:#fffdf8;border:1px solid #ded4c6;box-shadow:0 8px 20px #53665b1b;transform-origin:50% 94%;transition:transform .75s cubic-bezier(.2,.8,.2,1),opacity .35s;display:flex;align-items:center;justify-content:center}.gift-card img{max-width:100%;max-height:100%;object-fit:contain}.gift-card:nth-child(1){transform:translateX(-50%) rotate(-17deg) translateY(13px)}.gift-card:nth-child(2){transform:translateX(-50%) rotate(-11deg) translateY(5px)}.gift-card:nth-child(3){transform:translateX(-50%) rotate(-5deg)}.gift-card:nth-child(4){transform:translateX(-50%) rotate(2deg) translateY(-3px)}.gift-card:nth-child(5){transform:translateX(-50%) rotate(8deg) translateY(2px)}.gift-card:nth-child(6){transform:translateX(-50%) rotate(14deg) translateY(8px)}.gift-card:nth-child(7){transform:translateX(-50%) rotate(20deg) translateY(16px)}.gift-card.revealed{z-index:9!important;transform:translateX(-50%) translateY(-8px) rotate(0);box-shadow:0 16px 35px #53665b35;border:2px solid var(--red)}.gift-card.dim{opacity:.22;filter:grayscale(1)}.draw-button{display:block;border:0;background:none;width:108px;height:108px;padding:0;margin:-7px auto 12px;position:relative;z-index:12;cursor:pointer;filter:drop-shadow(0 8px 8px #53665b28)}.draw-button img{width:100%;height:100%;object-fit:contain}.draw-button:active{transform:scale(.95)}.draw-button:disabled{opacity:.65}.draw-area>p{font-size:12px;color:#728078;margin:0}.result{margin:24px auto 0;padding:22px;background:#fffdf8;text-align:center;box-shadow:0 8px 22px #53665b16}.result p{font-size:11px;color:var(--red);letter-spacing:.2em;margin:0 0 10px}.result h2{font:700 30px "Noto Serif SC",serif;margin:0}.result span{display:block;color:#748179;font-size:11px;margin-top:10px}.history{padding-top:30px}.history-head{display:flex;justify-content:space-between;align-items:baseline}.history h2{font:700 25px "Noto Serif SC",serif;margin:0}.history-head button{border:0;background:none;color:var(--red);font-size:11px;cursor:pointer}.history-track{display:flex;gap:10px;overflow-x:auto;padding:16px 0 5px;scrollbar-width:none}.history-track::-webkit-scrollbar{display:none}.history-track article{flex:0 0 190px;padding:14px;background:#fffdf8;border:1px solid #e7ded3;font-size:12px;line-height:1.7}.history-track strong{display:block;color:var(--red);font-size:14px}.history-track small,.all-history small{display:block;color:#87948c;font-size:10px;margin-top:4px}.all-history{max-height:220px;overflow:auto;border-top:1px solid var(--line);margin-top:10px}.all-history div{display:flex;justify-content:space-between;padding:11px 2px;border-bottom:1px solid #e7ded3;font-size:12px}footer{text-align:center;color:#829088;font:12px "Noto Serif SC",serif;letter-spacing:.3em;padding-top:28px}[hidden]{display:none!important}@media(max-width:520px){.page{padding:14px 18px 24px}.intro{padding-top:28px}.cards{height:250px}.gift-card{width:132px;height:205px}.draw-button{width:96px;height:96px}}
/* handwritten title and prize reveal */
header{justify-content:center}header img{object-position:center}.intro{text-align:center}.intro>img{display:block;width:min(92%,500px);height:auto;margin:0 auto}.intro h1{display:none}.result h2{display:none}.result img{display:block;width:min(100%,430px);height:90px;object-fit:contain;margin:auto;opacity:0;animation:fadeIn .9s ease forwards}.result span{display:block;color:#748179;font-size:11px;margin-top:10px}@keyframes fadeIn{to{opacity:1}}
.intro{padding-bottom:10px}.draw-area{padding-top:10px}.draw-button{width:180px;height:98px;margin:4px auto 10px}.draw-button img{object-fit:contain}.cards{height:330px}.gift-card{width:190px;height:280px;padding:20px;background:#fff;border:1px solid #d9d1c5}.gift-card img{width:100%;height:100%;object-fit:contain}.gift-card.revealed{width:245px;height:320px;transform:translateX(-50%) translateY(-12px) rotate(0);z-index:20}.cards.shuffling .gift-card{animation:pageShuffle .42s ease-in-out 3 alternate}.result{display:none!important}.draw-area>p{display:none}@keyframes pageShuffle{0%{transform:translateX(-50%) rotate(-8deg) translateY(4px)}50%{transform:translateX(-43%) rotate(5deg) translateY(-7px)}100%{transform:translateX(-57%) rotate(-4deg) translateY(2px)}}@media(max-width:520px){.cards{height:310px}.gift-card{width:164px;height:245px;padding:16px}.gift-card.revealed{width:225px;height:295px}.draw-button{width:190px;height:104px}}
.draw-area{display:flex;flex-direction:column}.draw-button{order:1}.cards{order:2}
.intro p{display:none}.draw-area{border:0}.gift-card{border:0;box-shadow:0 12px 28px #53665b20}.history{border-top:0}
.gift-card{background:transparent;border:0;box-shadow:none;padding:0}.gift-card.revealed{box-shadow:none;border:0}.gift-card.dim{opacity:.2}
.gift-card{background:#fff;border-radius:10px;overflow:hidden}.gift-card img{background:#fff;opacity:1}.result img{background:#fff}.intro>img,header img{background:#fff}
.cards{height:360px}.gift-card{display:none;background:transparent!important;box-shadow:none!important;border:0!important;padding:0;width:min(92vw,420px);height:330px;left:50%;top:10px;transform:translateX(-50%)!important}.gift-card.revealed{display:flex;align-items:center;justify-content:center;opacity:1}.gift-card img{background:transparent!important;width:100%;height:100%;object-fit:contain}.draw-button{margin-top:0}@media(max-width:520px){.cards{height:330px}.gift-card{width:94vw;height:300px}}
.page,body{background:#fff}.page{padding-top:12px}.intro{padding:14px 0 8px}.draw-area{padding:0;border:0}.draw-button{height:84px;width:170px;margin:0 auto 2px}.cards{height:285px;margin:0 auto}.gift-card{top:0;height:270px}.gift-card.revealed{height:270px}@media(max-width:520px){.draw-button{height:84px;width:175px}.cards{height:270px}.gift-card{height:255px}.gift-card.revealed{height:255px}}
.intro{padding-bottom:2px}.draw-area{margin-top:0}.cards{height:245px}.gift-card{height:235px}.gift-card.revealed{height:235px}@media(max-width:520px){.cards{height:230px}.gift-card{height:220px}.gift-card.revealed{height:220px}}
.page>header{display:block;width:100%;text-align:center}.page>header img{display:block;width:180px;height:auto;max-width:70%;margin:0 auto;object-fit:contain;object-position:center}
.cards{height:315px;margin-top:-38px}.gift-card{height:305px}.gift-card.revealed{height:305px}@media(max-width:520px){.cards{height:295px;margin-top:-34px}.gift-card{height:286px}.gift-card.revealed{height:286px}}
.cards{position:relative;top:-50px;margin-bottom:-50px}.gift-card.revealed{top:0}@media(max-width:520px){.cards{top:-45px;margin-bottom:-45px}}
/* final mobile layout */
.page{padding-top:34px}
.intro>img{width:100%;max-width:600px}
.draw-button{width:210px;height:118px}
.gift-card.revealed{height:305px}
footer img{display:block;width:120px;height:68px;object-fit:contain;margin:22px auto 0}
footer img{content:url('./assets/monkey-logo.png')}
@media(max-width:520px){
  .page{padding-top:32px}
  .intro>img{width:100%;max-width:560px}
  .draw-button{width:220px;height:122px}
  .cards{height:300px;top:-45px;margin-bottom:-45px}
  .gift-card,.gift-card.revealed{width:100vw;max-width:420px;height:300px}
}