:root{
  --bg1:#313e46; --bg2:#51676d;
  --ink:#fff7ea; --muted:#d9cdb8;
  --accent:#e9a23b; --accent-ink:#2a1a06;
  --red:#d64545; --green:#2fbf8f;
  --card:#1f2a30f0; --line:#ffffff22;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg1);color:var(--ink);font-family:Vazirmatn,system-ui,sans-serif;overflow:hidden;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#app{position:fixed;inset:0;background:linear-gradient(var(--bg1),#4b5e65 55%,var(--bg2))}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
button,a{font-family:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-size:15px;color:var(--muted);transition:opacity .3s}
.loader.done{opacity:0;pointer-events:none}
.loader-dot{width:44px;height:44px;border-radius:50%;border:4px solid #ffffff22;border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.hud{position:absolute;top:calc(var(--safe-t) + 10px);inset-inline:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none;z-index:5}
.hud-group{display:flex;gap:6px;align-items:center;background:#0006;border-radius:999px;padding:6px 12px;min-height:40px}
.hud-timer{font-family:Lalezar,Vazirmatn,sans-serif;font-size:26px;background:#0006;border-radius:999px;padding:2px 16px;min-width:84px;text-align:center;font-variant-numeric:tabular-nums}
.hud-timer.low{color:#ffb3a8;animation:pulse .5s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(1.08)}}
.lives i,.tickles i{display:inline-block;width:26px;height:26px;background-size:contain;background-repeat:no-repeat;background-position:center;transition:filter .3s,opacity .3s,transform .3s}
.lives i{background-image:url(assets/handOpen.webp)}
.lives i.lost{filter:grayscale(1) brightness(.5);opacity:.5;transform:scale(.8)}
.tickles i{width:30px;background-image:url(assets/moustache.webp)}
.tickles i.used{opacity:.25;transform:scale(.8)}

.corner-btns{position:absolute;bottom:calc(var(--safe-b) + 92px);inset-inline-start:12px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;z-index:6}
.icon-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#0007;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.icon-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn .spk{fill:currentColor;stroke:none}
.icon-btn .mute{display:none}
.icon-btn[aria-pressed="false"] .wave{display:none}
.icon-btn[aria-pressed="false"] .mute{display:block;stroke:#ff9b8f}
.icon-btn.hint{animation:hint 1.2s ease-in-out 3}
@keyframes hint{50%{transform:scale(1.18);box-shadow:0 0 0 8px #e9a23b44}}
.menu-btn{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:800;text-decoration:none;box-shadow:0 6px 18px #0006}
.menu-btn.drop{animation:drop .7s cubic-bezier(.3,1.6,.5,1) both}
@keyframes drop{from{transform:translateY(-140px) rotate(-8deg);opacity:0}}

.tray{position:absolute;bottom:calc(var(--safe-b) + 12px);inset-inline:12px;display:flex;justify-content:center;pointer-events:none;z-index:5}
.tray ul{display:flex;gap:8px;list-style:none;margin:0;padding:8px 12px;background:#0007;border-radius:18px}
.tray li{width:54px;height:54px;border-radius:14px;background:#ffffff10 center/80% no-repeat;filter:grayscale(1) brightness(.55);opacity:.6;transition:filter .3s,opacity .3s,transform .3s;position:relative}
.tray li.got{filter:none;opacity:1;animation:got .5s cubic-bezier(.3,1.7,.5,1)}
.tray li.got::after{content:"✓";position:absolute;inset-inline-end:-4px;top:-6px;width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;font-size:13px;display:grid;place-items:center}
@keyframes got{from{transform:scale(.4)}}

.caption{position:absolute;inset-inline:16px;top:calc(var(--safe-t) + 70px);margin:auto;max-width:360px;text-align:center;font-family:Lalezar,Vazirmatn,sans-serif;font-size:26px;line-height:1.35;
  background:#fff7ea;color:#2b1b0b;border-radius:20px;padding:10px 18px;box-shadow:0 10px 30px #0007;z-index:7;pointer-events:none;transition:opacity .25s,transform .25s}
.caption.off{opacity:0;transform:translateY(-10px) scale(.96)}
.caption small{display:block;font-family:Vazirmatn,sans-serif;font-size:14px;color:#6b5636;margin-top:2px}

.sheet{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;background:#0008;z-index:10;padding:12px;padding-bottom:calc(var(--safe-b) + 12px);animation:fade .25s ease-out}
.sheet[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.sheet-card{width:100%;max-width:440px;max-height:calc(100% - 20px);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:22px 20px;text-align:center;
  box-shadow:0 20px 60px #000a;animation:rise .45s cubic-bezier(.2,1.3,.4,1)}
@keyframes rise{from{transform:translateY(60px);opacity:0}}
@media (min-width:700px){.sheet{align-items:center}}
.title{font-family:Lalezar,Vazirmatn,sans-serif;font-weight:400;font-size:36px;margin:0 0 8px;color:var(--accent);text-wrap:balance}
.lead{font-size:17px;margin:0 0 14px;color:var(--ink);text-wrap:balance}
.rules-list{text-align:start;margin:0 0 14px;padding-inline-start:22px;line-height:1.8;font-size:15px;color:var(--muted)}
.rules-list b{color:var(--ink)}
.prize-line{background:#e9a23b22;border:1px dashed var(--accent);border-radius:14px;padding:10px;margin:0 0 8px;font-weight:600}
.fine{font-size:12.5px;color:var(--muted);margin:6px 0;line-height:1.7}
.fine.warn{color:#ffd28a}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;min-width:200px;padding:0 26px;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);
  font-family:Lalezar,Vazirmatn,sans-serif;font-size:22px;cursor:pointer;text-decoration:none;box-shadow:0 8px 20px #0006;transition:transform .15s}
.cta:active{transform:scale(.95)}
.ghost{min-height:48px;padding:0 22px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:16px;cursor:pointer}
.link-btn{margin-top:10px;background:none;border:0;color:var(--muted);text-decoration:underline;font-size:14px;min-height:44px;cursor:pointer}
.result-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.result-art{height:150px;background:center/contain no-repeat;margin:-6px auto 4px}

.prize-box{background:linear-gradient(160deg,#fff7ea,#f3dfbd);color:#2b1b0b;border-radius:20px;padding:14px;margin:4px 0 12px;position:relative;overflow:hidden}
.prize-box::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,#ffffff99 50%,transparent 60%);transform:translateX(-120%);animation:shine 2.6s ease-in-out infinite}
@keyframes shine{60%,100%{transform:translateX(120%)}}
.prize-head{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:14px}
.live-dot{width:10px;height:10px;border-radius:50%;background:#e23b3b;box-shadow:0 0 0 0 #e23b3b88;animation:live 1.2s infinite}
@keyframes live{70%{box-shadow:0 0 0 10px #e23b3b00}}
.mini-moustache{width:46px;height:auto;transform-origin:50% 30%;animation:wig .9s ease-in-out infinite}
@keyframes wig{25%{transform:rotate(-7deg) scaleX(1.08)}75%{transform:rotate(7deg) scaleX(.95)}}
.prize-name{font-size:17px;font-weight:800;margin:6px 0 2px}
.prize-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:34px;font-weight:800;letter-spacing:3px;margin:4px 0;color:#7a3f00}
.prize-clock{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.prize-box .fine{color:#5c4728}

.sr-btn{position:absolute;inset-inline-end:12px;bottom:calc(var(--safe-b) + 12px);z-index:6;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#0006;color:var(--ink);font-size:14px;
  opacity:0;pointer-events:none}
.sr-btn:focus-visible{opacity:1;pointer-events:auto}
.credit{position:absolute;bottom:calc(var(--safe-b) + 2px);inset-inline-end:10px;font-size:10.5px;opacity:.5;z-index:4}
.credit a{color:var(--muted);text-decoration:none}
.noscript{position:absolute;inset:auto 0 40% 0;text-align:center}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}