/* Layout: un cielo fijo con nubes y un globo gigante que se llena de rosa y azul con los votos. Debajo, un boleto de apuesta que se sella una sola vez y un tablero de globitos con los resultados. */
:root{
  --bg:#F3EEFF; --sky-a:#FFDDEB; --sky-b:#E4ECFF; --sky-c:#F3EEFF; --glow:rgba(255,214,140,.7); --stars:0; --cloud:rgba(255,255,255,.85);
  --ink:#26194F; --muted:#665C8E; --line:rgba(38,25,79,.16);
  --paper:#FFFFFF; --paper2:#F7F3FF; --field:#FFFFFF; --shadow:rgba(70,35,150,.28);
  --pink:#FF5C9D; --pink-fill:#D92A7C; --pink-text:#C0196A; --pink-soft:#FFD9EA;
  --blue:#3E8BFF; --blue-fill:#2A6AE8; --blue-text:#1C57C8; --blue-soft:#D6E6FF;
  --sun:#FFC94D;
  --f-display:'Bagel Fat One','Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif;
  --f-body:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
img,svg,canvas{max-width:100%}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font:400 17px/1.5 var(--f-body);overflow-x:hidden;font-synthesis:none}
body.noscroll{overflow:hidden}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue-fill);outline-offset:3px}
h1,h2,h3{font-weight:400;font-family:var(--f-display)}

/* Cielo */
.sky{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;background:radial-gradient(circle at 86% 7%,var(--glow),transparent 38%),linear-gradient(180deg,var(--sky-a) 0%,var(--sky-b) 58%,var(--sky-c) 100%)}
.stars{position:absolute;inset:0;opacity:var(--stars);background-image:
  radial-gradient(1.6px 1.6px at 7% 14%,#fff 60%,transparent),radial-gradient(1.2px 1.2px at 15% 62%,#fff 60%,transparent),
  radial-gradient(1.8px 1.8px at 24% 30%,#fff 60%,transparent),radial-gradient(1.2px 1.2px at 33% 80%,#fff 60%,transparent),
  radial-gradient(1.6px 1.6px at 41% 9%,#fff 60%,transparent),radial-gradient(1.2px 1.2px at 52% 46%,#fff 60%,transparent),
  radial-gradient(1.8px 1.8px at 61% 22%,#fff 60%,transparent),radial-gradient(1.2px 1.2px at 69% 70%,#fff 60%,transparent),
  radial-gradient(1.6px 1.6px at 78% 38%,#fff 60%,transparent),radial-gradient(1.2px 1.2px at 88% 86%,#fff 60%,transparent),
  radial-gradient(1.8px 1.8px at 94% 52%,#fff 60%,transparent),radial-gradient(1.2px 1.2px at 47% 92%,#fff 60%,transparent)}
.stars.t{background-image:
  radial-gradient(2px 2px at 11% 40%,#fff 60%,transparent),radial-gradient(2px 2px at 29% 12%,#fff 60%,transparent),
  radial-gradient(2px 2px at 57% 66%,#fff 60%,transparent),radial-gradient(2px 2px at 73% 8%,#fff 60%,transparent),
  radial-gradient(2px 2px at 91% 28%,#fff 60%,transparent),radial-gradient(2px 2px at 38% 52%,#fff 60%,transparent);
  animation:tw 5s ease-in-out infinite alternate}
@keyframes tw{from{opacity:var(--stars)}to{opacity:calc(var(--stars)*.25)}}
.par{position:absolute;left:0;width:100%;transform:translate(calc(var(--px,0)*var(--m,10)*1px),calc(var(--py,0)*var(--m,10)*.5px));transition:transform .5s ease-out}
.cloud{display:block;position:absolute;left:0;fill:var(--cloud);animation:drift linear infinite}
@keyframes drift{from{transform:translateX(-40vw)}to{transform:translateX(125vw)}}
.c1{top:6%;width:260px;height:130px;animation-duration:140s;animation-delay:-30s}
.c2{top:30%;width:180px;height:90px;animation-duration:105s;animation-delay:-70s}
.c3{top:54%;width:320px;height:160px;animation-duration:170s;animation-delay:-120s}
.c4{top:76%;width:200px;height:100px;animation-duration:120s;animation-delay:-20s}
.c5{top:18%;width:150px;height:75px;animation-duration:95s;animation-delay:-55s}

.wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding-inline:max(18px,env(safe-area-inset-left,0px));padding-block:18px 72px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font:400 1.35rem/1 var(--f-display)}
.brand svg{width:30px;height:38px}
.ghost{appearance:none;cursor:pointer;color:var(--ink);border:2px solid var(--ink);background:transparent;border-radius:999px;padding:8px 16px;font-weight:800;font-size:.9rem;transition:transform .2s,background .2s,color .2s}
.ghost:hover{background:var(--ink);color:var(--bg);transform:translateY(-2px)}

/* Héroe */
.hero{display:grid;gap:10px;margin-top:14px;grid-template-areas:"copy" "bal" "cd"}
.copy{grid-area:copy}
.kicker{margin:0 0 12px;display:inline-block;padding:6px 14px;border-radius:999px;background:var(--sun);color:#3B2600;font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-2deg)}
h1{margin:0;font-size:clamp(3.2rem,12.5vw,6.6rem);line-height:.92;letter-spacing:-.01em;text-wrap:balance}
.gp{color:var(--pink-text)}.gb{color:var(--blue-text)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .gp{background:linear-gradient(110deg,var(--pink-fill),#FF8EC1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .gb{background:linear-gradient(110deg,var(--blue-fill),#72B6FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
.sub{max-width:30rem;margin:18px 0 0;font-size:1.12rem;color:var(--muted)}
.parents{margin:10px 0 0;font-weight:800}
.bal-wrap{grid-area:bal;display:grid;place-items:center;transform:translate(calc(var(--px,0)*-12px),calc(var(--py,0)*-9px));transition:transform .5s ease-out}
.bal{width:min(76vw,340px);max-width:100%;height:auto;cursor:pointer;touch-action:manipulation;overflow:visible;filter:drop-shadow(0 28px 30px var(--shadow))}
.sway{transform-origin:150px 340px;animation:sway 6s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-3.2deg)}to{transform:rotate(3.2deg)}}
.bal.wob .sway{animation:wob .8s cubic-bezier(.3,1.6,.5,1)}
@keyframes wob{0%{transform:scale(1)}25%{transform:scale(.92,1.07)}55%{transform:scale(1.06,.95)}100%{transform:scale(1)}}
.bb-base{fill:var(--blue)}
.pinkg{transition:transform 1.5s cubic-bezier(.2,.8,.2,1)}
.wv{fill:var(--pink);animation:wave 4.5s linear infinite}
@keyframes wave{to{transform:translateY(140px)}}
.hl{fill:#fff;opacity:.55}
.knot{fill:#8B5CF6}
.str{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;opacity:.55}
.q{font-family:var(--f-display);fill:#fff;text-anchor:middle;paint-order:stroke;stroke:rgba(70,20,130,.35);stroke-width:6px;stroke-linejoin:round}
.cd{grid-area:cd}
.cd-label{margin:6px 0 10px;font-weight:800}
.cd-row{display:flex;gap:10px;flex-wrap:wrap}
.cd-row div{min-width:74px;padding:12px 12px 10px;border-radius:22px;background:var(--paper);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);text-align:center}
.cd-row b{display:block;font:400 2.2rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.cd-row span{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cd-when{margin:12px 0 0;color:var(--muted);text-transform:capitalize}
.replay{margin-top:14px}

/* Paneles */
.panels{display:grid;gap:30px;margin-top:48px}
.sec-h{margin:0 0 6px;font-size:1.9rem;line-height:1.05}
.muted{color:var(--muted)}

/* Boleto */
.ticket{filter:drop-shadow(0 20px 22px var(--shadow));min-width:0}
.t-top,.t-bot{background:var(--paper);padding:24px 24px 22px}
.t-top{border-radius:28px 28px 0 0;padding-bottom:26px;
  -webkit-mask:radial-gradient(circle 15px at 0 100%,#0000 96%,#000) left/51% 100% no-repeat,radial-gradient(circle 15px at 100% 100%,#0000 96%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 15px at 0 100%,#0000 96%,#000) left/51% 100% no-repeat,radial-gradient(circle 15px at 100% 100%,#0000 96%,#000) right/51% 100% no-repeat}
.t-bot{border-radius:0 0 28px 28px;padding-top:28px;position:relative;
  -webkit-mask:radial-gradient(circle 15px at 0 0,#0000 96%,#000) left/51% 100% no-repeat,radial-gradient(circle 15px at 100% 0,#0000 96%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 15px at 0 0,#0000 96%,#000) left/51% 100% no-repeat,radial-gradient(circle 15px at 100% 0,#0000 96%,#000) right/51% 100% no-repeat}
.t-bot::before{content:"";position:absolute;left:22px;right:22px;top:0;border-top:2.5px dashed var(--line)}
.t-kick{margin:0 0 4px;font-weight:800;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.t-top h2{margin:0;font-size:2rem;line-height:1}
.privacy{margin:8px 0 16px;font-size:.95rem;color:var(--muted)}
.field label{display:block;margin-bottom:6px;font-weight:800;font-size:.88rem}
.field input,.field textarea{width:100%;border:2px solid var(--line);background:var(--field);border-radius:16px;padding:13px 16px;font-size:1rem;transition:border-color .2s}
.field input:focus,.field textarea:focus{border-color:var(--ink);outline:none}
.field input:disabled{opacity:.85}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.8}
.field.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.t-hint{margin:0 0 14px;font-weight:600}
.stamps{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stamp{appearance:none;cursor:pointer;position:relative;border:3px solid currentColor;border-radius:20px;background:transparent;padding:18px 8px 16px;display:grid;justify-items:center;gap:6px;font:400 1.9rem/1 var(--f-display);text-transform:uppercase;transition:transform .2s,background .2s,color .2s}
.stamp::before{content:"";position:absolute;inset:6px;border:2px dashed currentColor;border-radius:14px;opacity:.45;pointer-events:none}
.stamp svg{width:44px;height:44px}
.stamp small{font:600 .8rem/1.2 var(--f-body);text-transform:none;opacity:.9}
.stamp.p{color:var(--pink-text);transform:rotate(-1.5deg)}
.stamp.b{color:var(--blue-text);transform:rotate(1.5deg)}
.stamp:hover:not(:disabled){transform:translateY(-4px) rotate(0)}
.stamp[aria-pressed="true"]{color:#fff}
.stamp[aria-pressed="true"].p{background:var(--pink-fill);border-color:var(--pink-fill)}
.stamp[aria-pressed="true"].b{background:var(--blue-fill);border-color:var(--blue-fill)}
.stamp:disabled{cursor:not-allowed;opacity:.5}
.btn{appearance:none;border:0;cursor:pointer;border-radius:999px;padding:12px 20px;font-weight:800;background:var(--ink);color:var(--bg);transition:transform .2s,opacity .2s}
.btn:hover:not(:disabled){transform:translateY(-2px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.seal{width:100%;margin-top:16px;padding:16px;font:400 1.3rem/1 var(--f-display);background:var(--ink);color:var(--bg)}
.btn.big{padding:16px 22px;font:400 1.2rem/1 var(--f-display);background:linear-gradient(100deg,var(--pink-fill),#8B5CF6 50%,var(--blue-fill));color:#fff}
.btn.big.armed{animation:pulse .8s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.04);box-shadow:0 0 0 8px rgba(139,92,246,.25)}}
.btn.line{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn.sm{padding:6px 12px;font-size:.8rem}
.vnote{margin:14px 0 0;font-weight:600;color:var(--muted)}
.vnote:empty{display:none}
.sealed{display:grid;justify-items:center;gap:12px;text-align:center}
.seal-mark{position:relative;width:168px;height:168px;display:grid;place-content:center;gap:2px;border-radius:50%;border:5px double currentColor;transform:rotate(-10deg);font:400 2.5rem/1 var(--f-display);text-transform:uppercase}
.seal-mark small{font:800 .66rem/1 var(--f-body);letter-spacing:.2em}
.seal-mark.sm-nina{color:var(--pink-text)}.seal-mark.sm-nino{color:var(--blue-text)}
.seal-mark.slam{animation:slam .75s cubic-bezier(.2,1.4,.4,1) both}
@keyframes slam{0%{transform:scale(2.6) rotate(-34deg);opacity:0}55%{transform:scale(.92) rotate(-8deg);opacity:1}100%{transform:scale(1) rotate(-10deg)}}
.sealed p{margin:0}
.sealed .res{font-weight:800}
.closed{text-align:center}
.closed .seal-mark{margin:0 auto 12px;color:var(--muted)}

/* Tablero */
.board{background:var(--paper);border:2px solid var(--ink);border-radius:28px;padding:24px;box-shadow:6px 6px 0 var(--ink);min-width:0}
.rhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.rhead h2{margin:0;font-size:1.9rem;line-height:1}
.pill{display:inline-block;border-radius:999px;padding:4px 12px;background:var(--paper2);border:2px solid var(--line);font-weight:800;font-size:.85rem}
.stats{display:flex;justify-content:space-between;gap:14px}
.stat{display:grid;line-height:1;gap:6px;transition:opacity .6s}
.stat.r{text-align:right}
.sl{font-weight:800;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase}
.stat.sp .sl,.stat.sp b{color:var(--pink-text)}
.stat.sb .sl,.stat.sb b{color:var(--blue-text)}
.stat b{font:400 4.2rem/.9 var(--f-display);font-variant-numeric:tabular-nums}
.sc{color:var(--muted);font-weight:800;font-variant-numeric:tabular-nums}
.bar{display:flex;gap:4px;height:26px;margin-top:16px;border-radius:999px;overflow:hidden}
.seg{display:block;flex:1 1 0;min-width:0;border-radius:999px;transition:flex-grow 1.1s cubic-bezier(.2,.8,.2,1),opacity .6s}
.seg.p{background:linear-gradient(90deg,#FF8EC1,var(--pink-fill))}
.seg.b{background:linear-gradient(90deg,var(--blue-fill),#72B6FF)}
.bar.empty .seg{background:var(--line)}
.bunch{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.bunch .dots{display:flex;flex-wrap:wrap;gap:8px 8px;align-content:flex-start;min-height:44px;padding-bottom:14px}
.bunch .dots.r{justify-content:flex-end}
.mb{position:relative;width:20px;height:25px;border-radius:50% 50% 48% 48%/58% 58% 42% 42%;animation:rise .8s cubic-bezier(.3,1.5,.5,1) both}
.mb::before{content:"";position:absolute;left:4px;top:4px;width:5px;height:8px;border-radius:50%;background:#fff;opacity:.6;transform:rotate(20deg)}
.mb::after{content:"";position:absolute;left:50%;top:100%;width:1.5px;height:12px;background:var(--line);transform:translateX(-50%)}
.dots.p .mb{background:radial-gradient(circle at 35% 30%,#FFB6D6,var(--pink) 55%,var(--pink-fill))}
.dots.b .mb{background:radial-gradient(circle at 35% 30%,#B5D5FF,var(--blue) 55%,var(--blue-fill))}
@keyframes rise{from{transform:translateY(34px) scale(0);opacity:0}}
.more{font-size:.85rem;font-weight:800;color:var(--muted);align-self:center}
.rnote{margin:18px 0 0;color:var(--muted);font-weight:600}
#results.win-nina .stat.sb,#results.win-nina .seg.b,#results.win-nina .dots.b{opacity:.3}
#results.win-nino .stat.sp,#results.win-nino .seg.p,#results.win-nino .dots.p{opacity:.3}

@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"copy bal" "cd bal";align-items:center;column-gap:40px;margin-top:30px}
  .panels{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;margin-top:64px}
}

/* Panel de los papás */
.sheet{position:fixed;inset:0;z-index:40;display:flex;justify-content:flex-end;background:rgba(10,6,40,.5)}
.sheet-in{width:min(470px,100%);height:100%;overflow-y:auto;background:var(--paper2);color:var(--ink);padding:max(20px,env(safe-area-inset-top,0px)) 20px max(28px,env(safe-area-inset-bottom,0px));display:grid;gap:16px;align-content:start;animation:slide .35s cubic-bezier(.2,.8,.2,1)}
@keyframes slide{from{transform:translateX(40px);opacity:0}}
.sh-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sh-head h2{margin:0;font-size:1.7rem;line-height:1.05}
.x{appearance:none;cursor:pointer;width:42px;height:42px;border-radius:50%;border:2px solid var(--ink);background:transparent;font-size:1.5rem;line-height:1}
.sec{display:grid;gap:12px;padding:18px;border-radius:22px;border:2px solid var(--line);background:var(--paper)}
.sec h3{margin:0;font-size:1.25rem;line-height:1.1}
.sec p{margin:0;font-size:.93rem;color:var(--muted)}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pick{position:relative}
.pick input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pick span{display:block;text-align:center;padding:14px 8px;border-radius:16px;border:2px solid var(--line);font-weight:800}
.pick input:checked+span.pk-p{border-color:var(--pink-fill);background:var(--pink-soft);color:var(--pink-text)}
.pick input:checked+span.pk-b{border-color:var(--blue-fill);background:var(--blue-soft);color:var(--blue-text)}
.pick input:focus-visible+span{outline:3px solid var(--blue-fill);outline-offset:2px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.st{font-weight:800;color:var(--ink)!important}
.vlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vlist li{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-radius:16px;background:var(--field);border:2px solid var(--line)}
.vn{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:600}
.chip{flex:none;border-radius:999px;padding:3px 12px;font-weight:800;font-size:.82rem}
.chip.cp{background:var(--pink-soft);color:var(--pink-text)}
.chip.cb{background:var(--blue-soft);color:var(--blue-text)}

/* Ruleta */
.wheel-stage{position:fixed;inset:0;z-index:45;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top,0px)) 18px max(18px,env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,var(--sky-a),var(--sky-b) 60%,var(--sky-c));overflow-y:auto}
.wheel-in{display:grid;justify-items:center;gap:12px;width:min(100%,760px);text-align:center;padding-block:36px 8px}
.wheel-in h2{margin:0;font-size:clamp(2rem,6vw,3rem);line-height:1}
.wheel-sub{margin:0;color:var(--muted);font-weight:600}
.wheel-box{position:relative;width:min(88vw,56vh,600px);aspect-ratio:1;margin-top:18px;filter:drop-shadow(0 22px 26px var(--shadow))}
.wheel-box canvas{display:block;width:100%;height:100%}
.wheel-ptr{display:block;position:absolute;left:50%;top:-8px;width:0;height:0;transform:translateX(-50%);border-left:18px solid transparent;border-right:18px solid transparent;border-top:38px solid var(--ink);filter:drop-shadow(0 4px 3px rgba(0,0,0,.3));z-index:2}
.spin{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:4px solid var(--ink);background:var(--sun);color:#3B2600;font:400 clamp(1rem,3.6vw,1.6rem)/1 var(--f-display);cursor:pointer;z-index:2;box-shadow:0 6px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.spin:hover:not(:disabled){transform:translate(-50%,-52%)}
.spin:active:not(:disabled){transform:translate(-50%,-46%);box-shadow:0 2px 0 var(--ink)}
.spin:disabled{opacity:.6;cursor:not-allowed}
.wheel-win{margin:0;min-height:3.2rem;font:400 clamp(1.7rem,6vw,2.8rem)/1.1 var(--f-display);text-wrap:balance}
.wheel-win.pop{animation:rise2 .8s cubic-bezier(.2,1.2,.3,1) both}
.chk{display:flex;align-items:center;gap:8px;font-weight:700}
.chk input{width:20px;height:20px;accent-color:var(--pink-fill)}
.win-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.win-list li{padding:4px 12px;border-radius:999px;background:var(--paper);border:2px solid var(--ink);font-weight:800;font-size:.9rem}
.wheel-x{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:max(16px,env(safe-area-inset-top,0px));z-index:3}

/* Escenario de la revelación */
.stage{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,var(--sky-a),var(--sky-b) 60%,var(--sky-c));color:var(--ink);overflow:hidden;text-align:center;transition:color .6s}
.stage.on{color:#fff}
.flood{position:absolute;inset:0;clip-path:circle(0% at 50% 50%);transition:clip-path 1.2s cubic-bezier(.2,.7,.1,1)}
.stage[data-g="nina"] .flood{background:radial-gradient(circle at 50% 38%,#FFA9D2,#E23A8A 58%,#9E1A63)}
.stage[data-g="nino"] .flood{background:radial-gradient(circle at 50% 38%,#A9D2FF,#2E78F0 58%,#1747A8)}
.stage.on .flood{clip-path:circle(150% at 50% 50%)}
.stage-in{position:relative;display:grid;justify-items:center;gap:14px;max-width:760px}
.skick{margin:0;font:400 clamp(1.2rem,4.5vw,1.8rem)/1.2 var(--f-display);letter-spacing:.04em;opacity:.9}
.pb{position:relative;width:min(70vw,300px);transform:scale(var(--k,1));transition:transform .9s cubic-bezier(.3,1.5,.5,1)}
.pb svg{display:block;width:100%;height:auto;animation:jit .12s linear infinite}
@keyframes jit{25%{transform:translate(1.5px,-1px)}75%{transform:translate(-1.5px,1px)}}
.pb.bang{animation:bang .35s ease-out forwards}
.pb.bang svg{animation:none}
@keyframes bang{to{transform:scale(2.2);opacity:0}}
.count{position:absolute;inset:0 0 18% 0;display:grid;place-items:center;font:400 clamp(6rem,30vw,11rem)/1 var(--f-display);color:var(--ink);text-shadow:0 6px 0 rgba(255,255,255,.7)}
.count.pop{animation:cpop .95s ease-out both}
@keyframes cpop{0%{transform:scale(.5);opacity:0}25%{transform:scale(1.1);opacity:1}75%{transform:scale(1);opacity:1}100%{transform:scale(.9);opacity:.3}}
.result{display:grid;justify-items:center;gap:12px;animation:rise2 .9s cubic-bezier(.2,1.2,.3,1) both}
@keyframes rise2{from{transform:scale(.6) translateY(30px);opacity:0}}
.result h2{margin:0;font-size:clamp(3.4rem,15vw,9rem);line-height:.92;text-wrap:balance;text-shadow:0 10px 40px rgba(0,0,0,.25)}
.result p{margin:0;font-size:1.2rem;font-weight:600}
.result .row{justify-content:center;margin-top:12px}
.stage .btn{background:#fff;color:#26194F}
.stage .btn.line{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.stage-x{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:max(16px,env(safe-area-inset-top,0px));color:inherit;border-color:currentColor;z-index:2}

#fx{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none}
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;z-index:70;max-width:min(92vw,420px);padding:12px 20px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:800;text-align:center;pointer-events:none;transition:opacity .3s,transform .3s}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:420px){
  .t-top,.t-bot,.board{padding-inline:18px}
  .stat b{font-size:3.4rem}
  .stamp{font-size:1.6rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ====== Páginas de los papás y de administración ====== */
.page{position:relative;z-index:1;max-width:1040px;margin:0 auto;padding:18px max(18px,env(safe-area-inset-left,0px)) 80px}
.page.narrow{max-width:560px}
.center-page{min-height:100vh;display:grid;place-items:center;padding:24px 18px;position:relative;z-index:1}
.card{background:var(--paper);border:2px solid var(--ink);border-radius:28px;padding:26px;box-shadow:6px 6px 0 var(--ink)}
.card h1{font-size:clamp(2.2rem,9vw,3.2rem);line-height:.95;margin:6px 0 8px}
.card p{margin:0 0 14px;color:var(--muted)}
.card .field{margin:14px 0}
.card .btn{width:100%;padding:14px;font-size:1rem}
.err{margin:10px 0 0;padding:10px 14px;border-radius:14px;background:var(--pink-soft);color:var(--pink-text);font-weight:800}
.ok{color:var(--blue-text);font-weight:800}
.bad{color:var(--pink-text);font-weight:800}
.code-input{text-transform:uppercase;letter-spacing:.2em;text-align:center;font:400 1.6rem/1 var(--f-display)!important}
.back{display:inline-block;margin-top:16px;color:var(--muted);font-weight:800;text-decoration:none}

.ptop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.ptop .row{align-items:center}
.ptitle{margin:14px 0 4px;font-size:clamp(2.2rem,8vw,3.6rem);line-height:.95}
.grid2{display:grid;gap:20px;margin-top:22px;min-width:0}
.grid2>*{min-width:0}
@media(min-width:900px){.grid2{grid-template-columns:1fr 1fr;align-items:start}.grid2 .span2{grid-column:1/-1}}
.sec.big{padding:22px}
.sec .field{margin:0}
.sec .field+.field{margin-top:2px}
.sec input[type=datetime-local],.sec input[type=text],.sec textarea{width:100%;border:2px solid var(--line);background:var(--field);border-radius:16px;padding:12px 14px;font-size:1rem}
.sec input:focus,.sec textarea:focus{border-color:var(--ink);outline:none}
.sec .hint{font-size:.85rem}
.switch{display:flex;align-items:center;gap:12px;cursor:pointer;font-weight:800}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch i{flex:none;position:relative;width:52px;height:30px;border-radius:999px;background:var(--line);transition:background .2s}
.switch i::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25);transition:transform .2s}
.switch input:checked+i{background:var(--blue-fill)}
.switch input:checked+i::after{transform:translateX(22px)}
.switch input:focus-visible+i{outline:3px solid var(--blue-fill);outline-offset:3px}
.slug-row{display:flex;align-items:stretch;border:2px solid var(--line);border-radius:16px;background:var(--field);overflow:hidden}
.slug-row:focus-within{border-color:var(--ink)}
.slug-row span{flex:none;display:flex;align-items:center;padding:0 4px 0 14px;color:var(--muted);font-weight:600;font-size:.95rem;max-width:55%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.slug-row input{border:0!important;border-radius:0!important;flex:1;min-width:0;padding-left:2px!important;background:transparent!important}
.wa{border-radius:16px;overflow:hidden;background:#fff;border:2px solid var(--line);max-width:420px}
.wa-img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;background:var(--paper2)}
.wa-body{padding:10px 14px 12px;background:#F0F4F0;color:#111}
.wa-body b{display:block;font-size:.98rem;line-height:1.25;overflow-wrap:anywhere}
.wa-body span{display:block;margin-top:2px;font-size:.85rem;line-height:1.3;color:#555;overflow-wrap:anywhere}
.wa-body small{display:block;margin-top:4px;font-size:.78rem;color:#777}
.seg2{display:inline-flex;border:2px solid var(--line);border-radius:999px;overflow:hidden}
.seg2 label{position:relative;cursor:pointer}
.seg2 input{position:absolute;opacity:0;inset:0}
.seg2 span{display:block;padding:8px 16px;font-weight:800;font-size:.9rem}
.seg2 input:checked+span{background:var(--ink);color:var(--bg)}
.seg2 input:focus-visible+span{outline:3px solid var(--blue-fill);outline-offset:-3px}
.file{display:none}
.mini-board{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini-board .stat{padding:12px 14px;border-radius:18px;background:var(--paper2)}
.mini-board .stat b{font-size:3rem}
.cd-mini{font:400 1.5rem/1.2 var(--f-display);font-variant-numeric:tabular-nums}
.secret-box{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.secret-val{font:400 1.2rem/1 var(--f-display);padding:6px 14px;border-radius:999px;background:var(--paper2);border:2px dashed var(--line)}
.stat-line{display:flex;gap:8px;flex-wrap:wrap}
.table-wrap{overflow-x:auto}
.t{width:100%;border-collapse:collapse;font-size:.95rem}
.t th{text-align:left;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:8px}
.t td{padding:10px 8px;border-top:2px solid var(--line);vertical-align:middle}
.t .acts{display:flex;gap:6px;flex-wrap:wrap}
.t a{color:var(--blue-text);font-weight:800}
.new-code{background:var(--sun);color:#3B2600;border-radius:22px;border:2px solid var(--ink);padding:18px;margin:18px 0;box-shadow:4px 4px 0 var(--ink)}
.new-code .big-code{font:400 2.4rem/1.1 var(--f-display);letter-spacing:.12em;margin:8px 0}
.new-code p{margin:4px 0;color:#3B2600}
.inline-form{display:inline}
.btn.warn{background:var(--pink-fill);color:#fff}
@media(max-width:420px){.card{padding:20px}}

.ts-box{min-height:70px;margin:12px 0 0;display:flex;justify-content:center}
.ts-box:empty{display:none}

/* Logo animado (resources/views/partials/logo-animado.blade.php): la caja se
   abre y los globos suben una sola vez al cargar, disparado por el <script>
   del propio parcial (clase .gb-open añadida 500ms después del evento load). */
.gb-intro{display:flex;justify-content:center;padding:2rem 0}
.gb-logo{width:min(300px,80vw);height:auto;font-family:var(--f-body, system-ui, -apple-system, 'Segoe UI', sans-serif);font-weight:500}
.gb-balloons{transform:translateY(160px);transition:transform 1.2s cubic-bezier(.2,.8,.2,1) .4s}
.gb-lid{transform-box:fill-box;transform-origin:100% 100%;transition:transform .6s ease}
.gb-q{opacity:0;transition:opacity .6s ease 1.4s}
.gb-open .gb-balloons{transform:translateY(0)}
.gb-open .gb-lid{transform:rotate(82deg)}
.gb-open .gb-q{opacity:1}
@media(prefers-reduced-motion:reduce){.gb-balloons,.gb-lid,.gb-q{transition:none}}