/* Layout: one-screen mobile game — logo bar, prize hero line, 3×3 gift grid, attempts meter, rules footer */
:root{
  --red:#E4141B; --red-deep:#A80B12; --ribbon:#C8101A; --paper:#FFFDF8;
  --ink:#2A0507; --gold:#FFD23F; --muted:rgba(255,253,248,.72);
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--body);color:var(--paper);
  background:radial-gradient(120% 80% at 50% 0%,#FF3A2E 0%,var(--red) 42%,var(--red-deep) 100%) var(--red);
  -webkit-tap-highlight-color:transparent;
}
.wrap{max-width:440px;margin:0 auto;padding-block:16px 28px;padding-inline:16px;display:flex;flex-direction:column;gap:18px;min-height:100%}
header{display:flex;align-items:center;gap:10px}
header img{width:40px;height:40px;border-radius:11px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
header .brand{font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-.01em}
header .brand span{color:var(--gold)}
.hero{text-align:center;display:flex;flex-direction:column;gap:8px}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
h1{font-family:var(--display);font-weight:800;font-size:1.65rem;line-height:1.15;margin:0;text-wrap:balance}
.hero p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.45}
.prize-strip{display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.16);border-radius:16px;padding:10px 12px}
.prize-strip img{width:64px;height:64px;border-radius:12px;background:#fff;object-fit:contain}
.prize-strip b{display:block;font-size:.95rem}
.prize-strip small{color:var(--muted);font-size:.8rem}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:6px 4px}
.gift{appearance:none;border:0;background:none;padding:0;cursor:pointer;position:relative;aspect-ratio:1/1.08;max-width:100%}
.gift:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:12px}
.gift:disabled{cursor:default}
.gift .base{position:absolute;left:8%;right:8%;bottom:0;height:62%;background:linear-gradient(180deg,#fff,#EFE9E0);border-radius:6px 6px 10px 10px;box-shadow:0 8px 14px rgba(0,0,0,.22)}
.gift .base::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:18%;transform:translateX(-50%);background:var(--ribbon)}
.gift .lid{position:absolute;left:2%;right:2%;bottom:58%;height:20%;background:linear-gradient(180deg,#fff,#F2ECE3);border-radius:6px;box-shadow:0 3px 6px rgba(0,0,0,.18);transition:transform .55s cubic-bezier(.3,1.6,.5,1),opacity .5s;z-index:2}
.gift .lid::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:17%;transform:translateX(-50%);background:var(--ribbon)}
.gift .bow{position:absolute;left:50%;bottom:100%;width:70%;height:70%;transform:translateX(-50%)}
.gift .bow::before,.gift .bow::after{content:"";position:absolute;bottom:-4px;width:46%;height:72%;border:6px solid var(--ribbon);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:rgba(200,16,26,.12)}
.gift .bow::before{left:2%;transform:rotate(-28deg)}
.gift .bow::after{right:2%;transform:rotate(28deg)}
.gift:not(:disabled):hover .lid{transform:translateY(-4px) rotate(-3deg)}
.grid.idle .gift:not(.open):not(:disabled){animation:wiggle 2.6s ease-in-out infinite}
.grid.idle .gift:nth-child(3n+2){animation-delay:.4s}
.grid.idle .gift:nth-child(3n){animation-delay:.8s}
@keyframes wiggle{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-4deg)}94%{transform:rotate(4deg)}}
.gift.open .lid{transform:translate(28%,-120%) rotate(32deg);opacity:0}
.gift .result{position:absolute;left:0;right:0;bottom:66%;text-align:center;font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:translateY(10px);transition:all .4s .25s;z-index:1}
.gift.open.lost .result{opacity:1;transform:none;color:var(--paper)}
.gift.open.lost .base{filter:saturate(.4) brightness(.92)}
.gift .kit{position:absolute;left:50%;bottom:30%;width:170%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));transform:translate(-50%,40%) scale(.3);opacity:0;z-index:3;pointer-events:none;transition:transform 1.8s cubic-bezier(.2,1.4,.4,1),opacity .8s}
.gift.open.won .kit{opacity:1;transform:translate(-50%,-6%) scale(1)}
.gift.dim{opacity:.45}

.meter{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(0,0,0,.16);border-radius:14px;padding:10px 14px;font-size:.9rem}
.dots{display:flex;gap:6px}
.dots i{width:12px;height:12px;border-radius:50%;background:var(--gold);transition:background .3s}
.dots i.used{background:rgba(255,253,248,.28)}
.status{min-height:1.4em;text-align:center;font-weight:600;font-size:.95rem}
footer{margin-top:auto;text-align:center;font-size:.76rem;color:var(--muted);line-height:1.5;display:flex;flex-direction:column;gap:4px}
footer a{color:var(--paper)}

.sheet-bg{position:fixed;inset:0;background:rgba(30,2,4,.55);display:flex;align-items:flex-end;justify-content:center;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:10;animation:fade .3s}
.sheet{background:var(--paper);color:var(--ink);width:100%;max-width:420px;border-radius:24px;padding:22px 20px 20px;text-align:center;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.35);animation:rise .5s cubic-bezier(.2,1.3,.4,1)}
.sheet img{width:230px;max-width:80%;height:auto;margin:-90px auto 0;filter:drop-shadow(0 10px 16px rgba(0,0,0,.28))}
.sheet h2{font-family:var(--display);font-size:1.5rem;margin:0;color:var(--red)}
.sheet p{margin:0;line-height:1.5;font-size:.98rem}
.cta{display:block;text-decoration:none;font-family:var(--display);font-weight:600;font-size:1rem;color:#fff;background:var(--red);border-radius:16px;padding:16px;box-shadow:0 6px 0 var(--red-deep);transition:transform .1s}
.cta:active{transform:translateY(3px);box-shadow:0 3px 0 var(--red-deep)}
.cta:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.fee{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;background:#FBEDEE;border:1.5px dashed var(--red);border-radius:14px;padding:12px 14px;font-size:.88rem;line-height:1.4}
.fee b{font-family:var(--display);font-size:1.25rem;color:var(--red);white-space:nowrap}
.ghost{appearance:none;border:0;background:none;color:var(--ink);opacity:.6;font:600 .85rem var(--body);cursor:pointer;padding:6px}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translateY(60px);opacity:0}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:9}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Standalone hosting, small phones and accessible controls. */
[hidden]{display:none!important}
img{max-width:100%}
body{font-size:14px;min-width:280px;background-attachment:fixed;overflow-x:hidden}
.wrap{padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));overflow-x:clip}
.gift .base,.gift .lid,.gift .bow,.gift .result{display:block}
.prize-strip img{flex-shrink:0}
.prize-strip>div{min-width:0}
.footer-link{appearance:none;border:0;background:none;color:var(--paper);font:inherit;text-decoration:underline;text-underline-offset:2px;padding:6px 3px;cursor:pointer;min-height:36px}
.footer-link:focus-visible,.ghost:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.cta{appearance:none;border:0;cursor:pointer;width:100%;line-height:1.35}
.cta:disabled{opacity:.55;box-shadow:none;cursor:default}
.cta:disabled:active{transform:none}
.sheet .redirect-note{font-size:.8rem;color:#77585A;line-height:1.4}
.sheet-bg{overflow-y:auto;padding-top:110px}
.sheet{flex-shrink:0}
.sheet h2:focus{outline:none}
.modal-open{overflow:hidden}
.info-bg{align-items:center;padding-top:16px}
.info-sheet{gap:18px}
.info-sheet p{font-size:.9rem}
.noscript{text-align:center}
@media(max-width:359px){
  .wrap{padding-inline:12px;gap:15px}
  h1{font-size:1.38rem}
  .hero p{font-size:.88rem}
  .grid{gap:10px}
  .prize-strip{gap:10px;padding:10px}
  .prize-strip img{width:54px;height:54px}
  .prize-strip b{font-size:.85rem}
  .prize-strip small{font-size:.75rem}
  .sheet h2{font-size:1.25rem}
  .cta{font-size:.9rem}
}
@media(max-height:650px){
  .sheet-bg{padding-top:75px}
  .sheet{gap:10px;padding:18px 16px 16px}
  .sheet img{width:160px;margin-top:-65px}
  .sheet p{font-size:.88rem}
  .sheet .redirect-note{font-size:.76rem}
  .sheet .fee{font-size:.8rem;padding:10px}
  .sheet .cta{padding:14px}
  .info-bg{padding-top:16px}
}
@media(hover:none){.gift:not(:disabled):hover .lid{transform:none}}