*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#2a0808}body{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}:root{--cream: #fff8e6;--parchment: #f3dfb6;--gold: #c9962e;--gold-light: #f6dc9a;--gold-dark: #8a5e16;--red: #a0161a;--red-deep: #5a0f12;--dusk: #2a0808;--jade-text: #1e6f5c;--ornate-border: 2px solid var(--gold);--ornate-shadow: inset 0 0 0 2px var(--cream), inset 0 0 0 3px #e2bb63, 0 6px 18px #00000070;--parchment-fill: linear-gradient(180deg, var(--cream), var(--parchment))}#experience{position:relative;width:100%;height:100svh;margin-inline:auto;overflow:hidden;isolation:isolate;container-type:inline-size;background:#3a0b0c}@media(min-width:600px),(orientation:landscape){#experience{width:min(480px,46.21svh)}}#cookie-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;opacity:0;transition:opacity .6s}#experience:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,#0000 52%,#2a0808a6)}#experience:not([data-state=loading]):not([data-state=error]) #cookie-canvas{opacity:1}.blossom{position:absolute;z-index:3;top:-4px;width:50%;max-width:250px;pointer-events:none;filter:drop-shadow(0 4px 6px #2a080880);transition:opacity .35s}.blossom-l{left:-12px}.blossom-r{right:-12px;transform:scaleX(-1)}[data-state=slip] .blossom,[data-state=done] .blossom{opacity:.55}.wish-headline{position:absolute;inset:0 0 auto;z-index:4;padding:58px 22px 18px;text-align:center;pointer-events:none;transition:opacity .3s}.wish-headline h1{position:relative;max-width:330px;margin:0 auto;color:var(--gold-light);font:700 clamp(1.45rem,8.6cqw,2.35rem)/1.1 "Fraunces",Georgia,serif;letter-spacing:.005em;text-wrap:balance;text-shadow:0 1px 0 #c58a2a,0 2px 1px #6b3a06,0 3px 10px #2a0808b0,0 0 26px #ffb14a8c}.cloud{position:absolute;top:138px;width:64px;pointer-events:none;filter:drop-shadow(0 2px 4px #2a080899)}.cloud-l{left:8px}.cloud-r{right:8px;transform:scaleX(-1)}[data-state=lift] .wish-headline,[data-state=hold] .wish-headline,[data-state=crack] .wish-headline,[data-state=slip] .wish-headline,[data-state=done] .wish-headline{opacity:0}.message{position:absolute;z-index:6;top:clamp(176px,25svh,236px);left:26px;width:calc(100% - 52px);margin:0;padding:.7rem 1.2rem;border:var(--ornate-border);border-radius:10px;background:var(--parchment-fill);color:var(--red);font:italic 600 clamp(1.12rem,5.4cqw,1.45rem)/1.3 "Fraunces",Georgia,serif;text-align:center;pointer-events:none;box-shadow:var(--ornate-shadow),inset 0 0 30px #c9962e22;transition:opacity .35s}.message:before,.message:after{content:"";position:absolute;top:50%;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,#b41e1e 0 4px,#f3d47a 5px 8px,var(--gold) 9px 10.5px,#0000 11.5px);filter:drop-shadow(0 2px 3px #00000066);transform:translateY(-50%)}.message:before{left:-15px}.message:after{right:-15px}[data-state=hold] .message{top:auto;bottom:max(28px,env(safe-area-inset-bottom))}[data-state=loading] .message,[data-state=intro] .message,[data-state=lift] .message,[data-state=crack] .message,[data-state=slip] .message,[data-state=done] .message,[data-state=error] .message{opacity:0}.progress{position:absolute;z-index:6;top:14px;right:14px;display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .85rem .34rem .7rem;border:var(--ornate-border);border-radius:9999px;background:var(--parchment-fill);color:var(--jade-text);font:700 .78rem system-ui,sans-serif;letter-spacing:.02em;box-shadow:var(--ornate-shadow)}.progress:before{content:"";width:20px;height:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M2 13C2 6 6.5 2 12 2s10 4 10 11c0 1.4-1 2.5-2.4 2.5H4.4C3 15.5 2 14.4 2 13z' fill='%23e9b34c'/%3E%3Cpath d='M12 2c-2.6 3.2-2.6 9.8 0 13.5' fill='none' stroke='%23a9692a' stroke-width='1.6'/%3E%3Cpath d='M9.5 9.8h5' stroke='%23fff6dc' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center / contain}[data-state=loading] .progress,[data-state=intro] .progress,[data-state=error] .progress{display:none}.slip-wrap{position:absolute;z-index:7;left:50%;top:42%;width:min(86%,360px);transform:translate(-50%,-50%);pointer-events:none;perspective:700px}.slip-paper{position:relative;padding:1.2rem 1.5rem 1.1rem;border:var(--ornate-border);border-radius:6px;background:linear-gradient(90deg,#0000 0 10%,#b41e1e14 10% 10.5%,#0000 10.5%),repeating-linear-gradient(0deg,#0000 0 22px,#c9962e12 22px 23px),linear-gradient(180deg,#fffaec,#f6e6c3);color:#3a2412;text-align:center;font:italic 500 clamp(1.15rem,5.6cqw,1.45rem)/1.35 "Fraunces",Georgia,serif;text-wrap:balance;box-shadow:var(--ornate-shadow),0 16px 40px #00000080;opacity:0;transform:rotateX(78deg) scaleY(.25) rotate(0);transform-origin:50% 0;transition:transform .75s cubic-bezier(.2,.8,.2,1),opacity .4s ease}.slip-paper:before,.slip-paper:after{content:"";position:absolute;left:8%;right:8%;height:1px;background:#c9962e66}.slip-paper:before{top:10px}.slip-paper:after{bottom:10px}.slip-wrap.visible{pointer-events:auto}.slip-wrap.visible .slip-paper{opacity:1;transform:rotateX(0) scaleY(1) rotate(-2deg)}.slip-paper.waiting #slip-text:after{content:"…"}.lucky .slip-paper{border-color:#f3d479;box-shadow:var(--ornate-shadow),0 0 0 1px #f3d479,0 0 56px #ffc64acc,0 16px 40px #00000080}.lucky-banner{display:none;margin:.9rem auto 0;padding:.45rem 1rem;border:1px solid #fff0c0;border-radius:9999px;background:linear-gradient(135deg,#f9e3a0,#d8a842);color:#4a3608;font:700 .85rem system-ui,sans-serif;box-shadow:0 4px 16px #d8a84280}.lucky .lucky-banner{display:inline-block}.actions{position:absolute;z-index:7;left:50%;bottom:max(24px,env(safe-area-inset-bottom));display:none;flex-direction:column;align-items:center;gap:10px;width:min(86%,360px);transform:translate(-50%)}[data-state=slip] .actions,[data-state=done] .actions{display:flex}.pill-btn{width:100%;padding:13px 26px;border:var(--ornate-border);border-radius:30px;background:var(--parchment-fill);color:var(--red);font:italic 600 1.05rem Fraunces,Georgia,serif;letter-spacing:.01em;text-decoration:none;text-align:center;white-space:nowrap;box-shadow:var(--ornate-shadow)}.pill-btn.ghost{background:#fff8e6d9}.pill-btn[hidden]{display:none}.done-message{margin:0 0 4px;padding:.55rem 1rem;border:var(--ornate-border);border-radius:10px;background:var(--parchment-fill);color:var(--red);font:italic 600 1.05rem/1.35 Fraunces,Georgia,serif;text-align:center;text-wrap:balance;box-shadow:var(--ornate-shadow)}.done-message[hidden]{display:none}.shake-btn{position:absolute;z-index:6;left:50%;bottom:max(24px,env(safe-area-inset-bottom));display:none;align-items:center;gap:.5rem;padding:12px 22px;border:var(--ornate-border);border-radius:30px;background:var(--parchment-fill);color:var(--red);font:italic 600 1rem Fraunces,Georgia,serif;white-space:nowrap;box-shadow:var(--ornate-shadow);transform:translate(-50%)}[data-state=pick] .shake-btn{display:inline-flex}.shake-btn:before{content:"";width:20px;height:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M2 13C2 6 6.5 2 12 2s10 4 10 11c0 1.4-1 2.5-2.4 2.5H4.4C3 15.5 2 14.4 2 13z' fill='%23e9b34c'/%3E%3Cpath d='M12 2c-2.6 3.2-2.6 9.8 0 13.5' fill='none' stroke='%23a9692a' stroke-width='1.6'/%3E%3Cpath d='M9.5 9.8h5' stroke='%23fff6dc' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center / contain}.act-control{position:absolute;left:50%;top:86%;z-index:6;transform:translate(-50%,-50%);padding:10px 22px;border:var(--ornate-border);border-radius:30px;background:var(--parchment-fill);color:var(--red);font:italic 600 16px Fraunces,Georgia,serif;opacity:0;pointer-events:none}.act-control:focus-visible{opacity:1;pointer-events:auto;outline:2px solid var(--gold-light);outline-offset:4px}.act-control[hidden]{display:none}#frame{position:absolute;inset:7px;z-index:5;border-radius:16px;border:2px solid var(--gold);box-shadow:inset 0 0 0 2px var(--red-deep),inset 0 0 0 3px #e8c46a88,inset 0 0 70px #2a080866,0 0 0 2px var(--red-deep),0 0 0 9999px var(--dusk);pointer-events:none}.demo-continue{position:absolute;z-index:6;top:max(14px,env(safe-area-inset-top));left:14px;padding:7px 14px;border:var(--ornate-border);border-radius:9999px;background:var(--parchment-fill);color:var(--red);font:700 .72rem system-ui,sans-serif;letter-spacing:.02em;text-decoration:none;white-space:nowrap;box-shadow:var(--ornate-shadow)}.loading-screen{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:32px;color:var(--gold-light);text-align:center;background:radial-gradient(ellipse at 50% 40%,#8a1a16,#3a0b0c 72%)}.loading-screen[hidden]{display:none}.loading-screen p{margin:0}.loading-wish{max-width:280px;font:italic 500 1.8rem/1.3 Fraunces,Georgia,serif;text-wrap:balance;text-shadow:0 1px 0 #6b3a06,0 2px 10px #2a0808}#loading-label{min-height:2.6em;color:#f3dca8;font:1rem/1.3 Georgia,serif}.loading-cookie{width:74px;height:40px;margin-bottom:8px;border-radius:40px 40px 8px 8px/40px 40px 6px 6px;background:linear-gradient(160deg,#f1cf8e,#c98a3f);box-shadow:inset 0 -6px 10px #8a5a2244,0 6px 16px #0006,0 0 30px #ffb14a55;animation:cookie-rock 1.6s ease-in-out infinite}@keyframes cookie-rock{0%,to{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}.fallback{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px;text-align:center}.fallback[hidden]{display:none}.fallback p{max-width:300px;margin:0;color:var(--gold-light);font:italic 500 1.2rem/1.35 Fraunces,Georgia,serif;text-shadow:0 1px 0 #6b3a06,0 2px 10px #2a0808}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.slip-paper{transition:opacity .3s;transform:none}.slip-wrap.visible .slip-paper{transform:rotate(-2deg)}.loading-cookie{animation:none}}@container (max-width: 240px){.message{top:160px;padding-inline:.6rem;font-size:.95rem}.cloud,.blossom{display:none}}[data-intro="1"] :is(.wish-headline,.message,.progress,#frame,.act-control,.actions,.slip-wrap,.blossom,.shake-btn){display:none}[data-intro="1"] #cookie-canvas{touch-action:auto}
