/* Marco común de los juegos Velvet */
:root{
  --cream:#FCF4E8; --ink:#3A2A2E; --muted:#8c7d76;
  --teal:#0F4C44; --teal2:#2C7C7D; --pink:#EE7DA0; --gold:#E0A92E; --sun:#F2C84B;
  --purple:#8455A6; --blue:#48A6C7; --red:#E5544B; --orange:#F5972B; --green:#5FAE5F;
  --ease:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --fd:"Fraunces",serif; --fb:"Nunito",system-ui,sans-serif; --fs:"Dancing Script",cursive;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:var(--fb); color:var(--ink); overflow-x:hidden;
  background-image:
    radial-gradient(1000px 460px at 82% -8%, #FBD9E6 0%, transparent 60%),
    radial-gradient(820px 420px at -6% 0%, #DFF0EC 0%, transparent 55%),
    linear-gradient(180deg,#FDF6EC 0%, #FCF1E5 100%);
  background-attachment:fixed; -webkit-tap-highlight-color:transparent;
  display:flex; flex-direction:column; min-height:100dvh}
img{display:block; max-width:100%}
.gtop{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:.6rem;
  padding:.6rem clamp(.8rem,3vw,1.4rem); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  background:rgba(253,246,236,.75); border-bottom:1px solid rgba(120,80,40,.08)}
.gback{display:inline-flex; align-items:center; gap:.35em; font-weight:800; font-size:.9rem; color:var(--teal2);
  text-decoration:none; background:#fff; padding:.5em .9em; border-radius:100px; box-shadow:0 8px 16px -12px rgba(0,0,0,.35);
  transition:transform .2s var(--spring)}
.gback:active{transform:scale(.93)}
.gtitle{font-family:var(--fd); font-weight:700; color:var(--teal); font-size:clamp(1.05rem,3.6vw,1.35rem); margin:0 auto 0 .2rem; flex:1}
.gact{display:flex; gap:.5rem}
.gbtn{border:0; cursor:pointer; font-family:var(--fb); font-weight:800; font-size:.86rem; color:#fff; background:var(--pink);
  padding:.55em 1em; border-radius:100px; box-shadow:0 10px 20px -12px rgba(0,0,0,.4); transition:transform .2s var(--spring), filter .2s}
.gbtn:active{transform:scale(.93)} .gbtn:hover{filter:brightness(1.05)}
.gbtn--ghost{background:#fff; color:var(--teal2)}
.gbtn--gold{background:var(--gold); color:var(--teal)}

.gstage{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(.8rem,3vw,1.4rem); padding:clamp(1rem,4vw,2rem) clamp(.8rem,3vw,1.4rem) 2rem; width:100%; max-width:640px; margin:0 auto}
.gstatus{font-weight:800; color:var(--teal); font-size:clamp(1rem,3.4vw,1.25rem); text-align:center; min-height:1.4em}
.gstatus b{color:var(--pink)}

/* overlay de victoria */
.win{position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; padding:1.4rem;
  background:rgba(30,20,24,.42); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}
.win.show{display:flex; animation:winfade .3s ease}
@keyframes winfade{from{opacity:0}to{opacity:1}}
.win__card{background:#fff; border-radius:26px; padding:clamp(1.6rem,5vw,2.4rem); text-align:center; max-width:340px; width:100%;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.5); animation:winpop .5s var(--spring)}
@keyframes winpop{from{transform:scale(.7) translateY(20px); opacity:0}to{transform:none; opacity:1}}
.win__emoji{font-size:3.2rem; line-height:1}
.win__title{font-family:var(--fd); font-weight:700; color:var(--teal); font-size:1.8rem; margin:.4rem 0 .2rem}
.win__sub{color:var(--muted); font-weight:600; margin-bottom:1.2rem}
.win__btns{display:flex; flex-direction:column; gap:.6rem}
.win__btns .gbtn{width:100%; padding:.8em 1em; font-size:1rem}

/* confeti */
.confetti{position:fixed; top:-12px; width:11px; height:16px; z-index:55; pointer-events:none; border-radius:2px; will-change:transform}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@media(prefers-reduced-motion:reduce){ .confetti{display:none} }