/* ============ CONFIG VISUAL ============ */
:root{
  --sky1:#ff9de2; --sky2:#ffd166; --sky3:#7ee8fa;
  --pool:#2bd9ff; --pool2:#0aa6e8; --deep:#0b1a3a;
  --grass:#5be37b; --grass2:#2fb95d; --sand:#ffe1a8;
  --wood:#c0703a; --wood2:#8a4a22; --white:#fffbe9;
  --ink:#1b1033; --hot:#ff3d7f; --lime:#c6ff3d; --sun:#ffd23f;
  --px:4px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{display:flex;flex-direction:column;min-height:100vh}
body{
  font-family:'VT323',monospace;font-size:22px;color:var(--ink);
  background:var(--deep);overflow-x:hidden;image-rendering:pixelated;
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'><path d='M2 2h2v2H2zM4 4h2v2H4zM6 6h2v2H6zM8 8h2v2H8zM10 10h2v2h-2zM12 12h2v2h-2zM2 4h2v2H2zM2 6h2v2H2zM2 8h2v2H2zM2 10h2v2H2zM2 12h2v2H2zM4 12h2v2H4zM6 12h2v2H6zM8 12h2v2H8zM10 12h2v2h-2z' fill='%231b1033'/><path d='M4 6h2v2H4zM4 8h2v2H4zM4 10h2v2H4zM6 8h2v2H6zM6 10h2v2H6zM8 10h2v2H8z' fill='%23fffbe9'/></svg>") 2 2, auto;
}
.px{font-family:'Press Start 2P',monospace}

/* ============ SCENE (sky, sun, clouds, pool, cabin) ============ */
#scene{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(var(--sky1) 0 22%,var(--sky2) 22% 48%,var(--sky3) 48% 62%,var(--grass) 62% 66%,var(--grass2) 66% 100%);}
#scene::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 2px,transparent 2px 4px);mix-blend-mode:multiply;opacity:.6}
.sun{position:absolute;left:8%;top:9%;width:var(--px);height:var(--px);background:var(--sun);
  box-shadow:
   16px 0 0 4px var(--sun),20px 0 0 4px var(--sun),24px 0 0 4px var(--sun),
   8px 8px 0 4px var(--sun),12px 8px 0 4px var(--sun),16px 8px 0 4px var(--sun),20px 8px 0 4px var(--sun),24px 8px 0 4px var(--sun),28px 8px 0 4px var(--sun),32px 8px 0 4px var(--sun),
   4px 16px 0 4px var(--sun),8px 16px 0 4px var(--sun),12px 16px 0 4px var(--sun),16px 16px 0 4px var(--sun),20px 16px 0 4px var(--sun),24px 16px 0 4px var(--sun),28px 16px 0 4px var(--sun),32px 16px 0 4px var(--sun),36px 16px 0 4px var(--sun),
   4px 24px 0 4px var(--sun),8px 24px 0 4px var(--sun),12px 24px 0 4px var(--sun),16px 24px 0 4px var(--sun),20px 24px 0 4px var(--sun),24px 24px 0 4px var(--sun),28px 24px 0 4px var(--sun),32px 24px 0 4px var(--sun),36px 24px 0 4px var(--sun),
   8px 32px 0 4px var(--sun),12px 32px 0 4px var(--sun),16px 32px 0 4px var(--sun),20px 32px 0 4px var(--sun),24px 32px 0 4px var(--sun),28px 32px 0 4px var(--sun),32px 32px 0 4px var(--sun),
   16px 40px 0 4px var(--sun),20px 40px 0 4px var(--sun),24px 40px 0 4px var(--sun),
   12px 16px 0 4px var(--ink),28px 16px 0 4px var(--ink),
   16px 28px 0 4px var(--hot),20px 28px 0 4px var(--hot),24px 28px 0 4px var(--hot);
  transform:scale(2);animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:scale(2) translateY(6px)}}
.cloud{position:absolute;width:12px;height:12px;background:var(--white);top:12%;
  box-shadow:12px 0 var(--white),24px 0 var(--white),36px 0 var(--white),48px 0 var(--white),
   12px -12px var(--white),24px -12px var(--white),36px -12px var(--white),24px -24px var(--white),
   0 12px var(--white),12px 12px var(--white),24px 12px var(--white),36px 12px var(--white),48px 12px var(--white),60px 12px var(--white);
  animation:drift linear infinite;opacity:.95}
@keyframes drift{from{transform:translateX(-120px)}to{transform:translateX(110vw)}}
.cloud.c1{animation-duration:38s;top:14%}.cloud.c2{animation-duration:55s;top:6%;animation-delay:-20s;transform:scale(.7)}
.cloud.c3{animation-duration:46s;top:24%;animation-delay:-35s}

/* palms */
.palm{position:absolute;bottom:34%;width:16px;height:120px;background:var(--wood2)}
.palm::before{content:"";position:absolute;left:-40px;top:-30px;width:16px;height:16px;background:var(--grass2);
  box-shadow:16px 0 var(--grass2),32px 0 var(--grass2),48px 0 var(--grass2),64px 0 var(--grass2),80px 0 var(--grass2),
   -16px 16px var(--grass2),96px 16px var(--grass2),16px -16px var(--grass),32px -16px var(--grass),48px -16px var(--grass),64px -16px var(--grass),
   -16px 32px var(--grass2),112px 32px var(--grass2),32px -32px var(--grass),48px -32px var(--grass);
  animation:sway 4s ease-in-out infinite;transform-origin:48px 20px}
@keyframes sway{50%{transform:rotate(3deg)}}
.palm.p1{left:6%}.palm.p2{right:8%;transform:scaleX(-1)}.palm.p2::before{animation-delay:-2s}

/* cabin */
.cabin{position:absolute;left:50%;transform:translateX(-50%);bottom:34%;width:220px;height:110px;background:var(--wood);
  background-image:repeating-linear-gradient(0deg,transparent 0 18px,var(--wood2) 18px 22px)}
.cabin::before{content:"";position:absolute;left:-30px;top:-70px;width:280px;height:70px;
  background:var(--hot);clip-path:polygon(50% 0,100% 100%,0 100%)}
.cabin::after{content:"";position:absolute;left:90px;bottom:0;width:40px;height:64px;background:var(--ink);
  box-shadow:-60px -24px 0 0 var(--sun),60px -24px 0 0 var(--sun)}
.cabin .lamp{position:absolute;left:92px;top:-40px;width:12px;height:12px;background:#fff;animation:blink 1.2s steps(2) infinite}

/* pool */
.pool{position:absolute;left:0;right:0;bottom:0;height:34%;background:var(--pool);border-top:8px solid var(--sand);
  background-image:
   repeating-linear-gradient(90deg,transparent 0 40px,rgba(255,255,255,.35) 40px 48px),
   repeating-linear-gradient(0deg,transparent 0 28px,var(--pool2) 28px 34px);
  animation:water 2.4s steps(4) infinite}
@keyframes water{to{background-position:48px 0,0 34px}}
.floaty{position:absolute;width:56px;height:56px;border-radius:50%;
  border:14px solid var(--hot);background:var(--pool);animation:float 3.6s ease-in-out infinite;
  background-image:repeating-conic-gradient(var(--hot) 0 25%,var(--lime) 0 50%);}
.floaty.f1{left:15%;bottom:12%}.floaty.f2{right:22%;bottom:22%;animation-delay:-1.5s;border-color:var(--sun);background-image:repeating-conic-gradient(var(--sun) 0 25%,#fff 0 50%)}
.floaty.f3{left:60%;bottom:6%;animation-delay:-2.5s;width:40px;height:40px;border-width:10px}
@keyframes float{50%{transform:translateY(-10px) rotate(8deg)}}
.pancake{position:absolute;left:38%;bottom:14%;width:80px;height:18px;background:var(--wood);border-radius:10px;
  box-shadow:0 -12px 0 0 #d9873f,0 -24px 0 0 var(--wood);animation:float 4s ease-in-out infinite -0.8s}
.pancake::after{content:"";position:absolute;left:30px;top:-32px;width:20px;height:12px;background:var(--sun)}
.duck{position:absolute;right:8%;bottom:9%;width:36px;height:28px;background:var(--sun);border-radius:12px 12px 4px 4px;animation:float 3s ease-in-out infinite -1s}
.duck::before{content:"";position:absolute;left:-2px;top:-20px;width:22px;height:22px;background:var(--sun);border-radius:8px}
.duck::after{content:"";position:absolute;left:-14px;top:-10px;width:14px;height:8px;background:#ff7a1a}

/* ============ UI ============ */
#app{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;padding:40px 16px 16px}
.screen{display:none;width:100%;max-width:720px;animation:pop .35s steps(4)}
.screen.on{display:block}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.box{background:var(--white);border:var(--px) solid var(--ink);
  box-shadow:var(--px) var(--px) 0 var(--ink),calc(var(--px)*2) calc(var(--px)*2) 0 var(--hot),0 0 0 8px rgba(255,255,255,.35);
  padding:28px 28px 24px;position:relative}
.box::before{content:"";position:absolute;inset:6px;border:2px dashed rgba(27,16,51,.25);pointer-events:none}
.box.dark{background:var(--ink);color:var(--white)}
h1.px{font-size:clamp(18px,4.6vw,34px);line-height:1.5;color:var(--hot);text-shadow:3px 3px 0 var(--ink);margin-bottom:18px}
h2.px{font-size:clamp(12px,2.6vw,16px);line-height:1.8;margin-bottom:14px;color:var(--pool2)}
p{line-height:1.25;margin-bottom:10px}
.blink{animation:blink .9s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.btn{font-family:'Press Start 2P',monospace;font-size:12px;padding:16px 20px;background:var(--lime);color:var(--ink);
  border:var(--px) solid var(--ink);box-shadow:var(--px) var(--px) 0 var(--ink);cursor:pointer;transition:none;text-transform:uppercase}
.btn:hover{background:var(--sun)} .btn:active{transform:translate(var(--px),var(--px));box-shadow:none}
.btn.hot{background:var(--hot);color:#fff}.btn.ghost{background:var(--white)}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.dialog{font-size:24px;min-height:120px;white-space:pre-wrap}
.cursor::after{content:"▮";animation:blink .6s steps(2) infinite}
.tag{display:inline-block;background:var(--sun);border:3px solid var(--ink);padding:2px 8px;font-size:18px;margin:2px 4px 2px 0;box-shadow:3px 3px 0 var(--ink)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0}
.stat{border:var(--px) solid var(--ink);background:#fff;padding:12px;box-shadow:var(--px) var(--px) 0 var(--ink)}
.stat .k{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--pool2);margin-bottom:8px;letter-spacing:1px}
.stat .v{font-size:26px;line-height:1.1}
.hp{height:18px;border:3px solid var(--ink);background:#fff;margin-top:10px;position:relative}
.hp i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--hot) 0 8px,#ff7aa8 8px 12px);width:0;transition:width 1.4s steps(12)}
label{display:block;font-family:'Press Start 2P',monospace;font-size:10px;margin:16px 0 8px;color:var(--pool2)}
input,textarea,select{width:100%;font-family:'VT323',monospace;font-size:24px;padding:10px 12px;border:var(--px) solid var(--ink);
  background:#fff;box-shadow:inset 4px 4px 0 rgba(27,16,51,.12);outline:none}
input:focus,textarea:focus,select:focus{background:#fffad0}
textarea{min-height:90px;resize:vertical}
.choice{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.choice button{font-family:'Press Start 2P',monospace;font-size:10px;padding:14px 6px;border:var(--px) solid var(--ink);background:#fff;cursor:pointer;line-height:1.6}
.choice button.sel{background:var(--lime);box-shadow:inset 0 0 0 4px var(--ink)}
.choice button[data-v="no"].sel{background:#ffb3c6}.choice button[data-v="tal vez"].sel{background:var(--sun)}
.counter{display:flex;align-items:center;gap:12px}
.counter button{width:52px;height:52px;font-size:30px;border:var(--px) solid var(--ink);background:var(--sun);cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.counter span{font-family:'Press Start 2P',monospace;font-size:20px;min-width:40px;text-align:center}
.err{color:var(--hot);font-family:'Press Start 2P',monospace;font-size:10px;margin-top:10px;display:none}
.badge{position:absolute;top:-22px;right:-10px;background:var(--hot);color:#fff;font-family:'Press Start 2P',monospace;font-size:9px;padding:8px 10px;border:3px solid var(--ink);transform:rotate(6deg);box-shadow:3px 3px 0 var(--ink)}
.shake{animation:shake .4s steps(6)}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.foot{position:relative;z-index:2;padding:14px 0 18px;left:0;right:0;text-align:center;font-family:'Press Start 2P',monospace;font-size:8px;color:rgba(255,255,255,.75);z-index:2;text-shadow:2px 2px 0 var(--ink)}
.foot a{color:var(--lime);text-decoration:none;display:block;margin-top:6px;font-size:7px;opacity:.7}
.credit{display:inline-flex;align-items:center;gap:10px;background:var(--ink);border:3px solid var(--white);padding:6px 12px;box-shadow:4px 4px 0 var(--hot);font-size:9px;max-width:calc(100vw - 24px)}
.credit img{width:56px;height:56px;border:2px solid var(--white);object-fit:cover;image-rendering:auto;animation:credbob 1.4s ease-in-out infinite}
@keyframes credbob{50%{transform:translateY(-4px)}}
.credit img:last-child{animation-delay:-.7s}
#app{padding-bottom:16px;min-height:0}
table{width:100%;border-collapse:collapse;font-size:19px;background:#fff}
th,td{border:3px solid var(--ink);padding:6px 8px;text-align:left;vertical-align:top}
th{background:var(--sun);font-family:'Press Start 2P',monospace;font-size:8px}
tr.si td:nth-child(2){background:#d6ffb5}tr.no td:nth-child(2){background:#ffd0dc}tr.tv td:nth-child(2){background:#fff2b0}
.scroll{overflow-x:auto;margin-top:12px}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:5}
.cf{position:absolute;width:10px;height:10px;top:-12px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.hero{position:relative;width:96px;height:96px;margin:0 auto 14px}
.hero i{position:absolute;width:8px;height:8px;background:var(--ink)}
/* ============ HOSTS / POLAROIDS ============ */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:18px 0 6px}
.polaroid{position:relative;background:#fff;border:var(--px) solid var(--ink);box-shadow:var(--px) var(--px) 0 var(--ink);padding:8px 8px 34px;
  animation:wiggle 3s ease-in-out infinite;transform-origin:50% 100%}
.polaroid:nth-child(2){animation-delay:-1s;transform:rotate(3deg)}.polaroid:nth-child(3){animation-delay:-2s;transform:rotate(-2deg)}
@keyframes wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.polaroid .ph{position:relative;aspect-ratio:3/4;overflow:hidden;border:3px solid var(--ink);background:var(--deep)}
.polaroid img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 20%);image-rendering:auto;filter:saturate(1.15) contrast(1.05)}
.polaroid .cap{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:'Press Start 2P',monospace;font-size:8px;color:var(--ink)}
.hat{position:absolute;width:38px;height:44px;z-index:2;left:var(--hx,50%);top:var(--hy,0%);transform:translate(-50%,-70%) rotate(var(--hr,-12deg));
  animation:hatbounce 1.2s steps(3) infinite;filter:drop-shadow(2px 2px 0 var(--ink))}
.hat::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,var(--hot) 0 8px,var(--sun) 8px 16px,var(--pool) 16px 24px);
  clip-path:polygon(50% 0,100% 100%,0 100%)}
.hat::after{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;background:var(--lime);border-radius:50%;transform:translateX(-50%);border:2px solid var(--ink)}
@keyframes hatbounce{50%{transform:translate(-50%,-78%) rotate(var(--hr,-12deg))}}
.hat.s{width:26px;height:30px}
.sticker{position:absolute;z-index:3;font-size:26px;animation:spin 4s linear infinite;right:-12px;top:-14px}
@keyframes spin{to{transform:rotate(360deg)}}
.paw{display:inline-block;animation:bob 1s ease-in-out infinite}
.vip{margin-top:16px;padding:14px;border:var(--px) solid var(--ink);background:var(--sun);box-shadow:var(--px) var(--px) 0 var(--ink);font-size:23px;text-align:center}
@media(max-width:520px){.choice{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}.gallery .polaroid:nth-child(3){grid-column:span 2;max-width:60%;margin:0 auto}.box{padding:22px 16px 20px}.dialog{font-size:21px}}

/* ============ GAFAS PIXEL ============ */
.shades{position:absolute;z-index:3;left:var(--gx,50%);top:var(--gy,30%);width:6px;height:6px;transform:translate(-50%,-50%) rotate(var(--gr,0deg)) scale(var(--gs,1));
  filter:drop-shadow(2px 2px 0 rgba(0,0,0,.4));animation:shadesDrop .8s steps(4) both;animation-delay:var(--gd,.3s)}
.shades::before{content:"";position:absolute;width:6px;height:6px;background:var(--ink);
  box-shadow:6px 0 var(--ink),12px 0 var(--ink),18px 0 var(--ink),24px 0 var(--ink),30px 0 var(--ink),36px 0 var(--ink),42px 0 var(--ink),48px 0 var(--ink),54px 0 var(--ink),60px 0 var(--ink),
   -6px 6px var(--ink),0 6px var(--ink),6px 6px #4bd6ff,12px 6px #4bd6ff,18px 6px var(--ink),24px 6px var(--ink),30px 6px var(--ink),36px 6px var(--ink),42px 6px #4bd6ff,48px 6px #4bd6ff,54px 6px var(--ink),60px 6px var(--ink),66px 6px var(--ink),
   0 12px var(--ink),6px 12px #4bd6ff,12px 12px #1f8ad6,18px 12px var(--ink),42px 12px #4bd6ff,48px 12px #1f8ad6,54px 12px var(--ink),
   6px 18px var(--ink),12px 18px var(--ink),42px 18px var(--ink),48px 18px var(--ink)}
@keyframes shadesDrop{from{opacity:0;transform:translate(-50%,-160%) rotate(var(--gr,0deg)) scale(var(--gs,1))}to{opacity:1;transform:translate(-50%,-50%) rotate(var(--gr,0deg)) scale(var(--gs,1))}}
.sunshades{position:absolute;left:8%;top:9%;transform:translate(24px,32px) scale(1.6);z-index:2;width:0;height:0;pointer-events:none}
.sunshades .shades{--gd:2s}

/* ============ COUNTDOWN ============ */
.cd{display:flex;justify-content:center;gap:10px;margin:16px 0 4px;flex-wrap:wrap}
.cd div{background:var(--white);color:var(--ink);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--hot);padding:8px 10px;min-width:64px}
.cd b{display:block;font-family:'Press Start 2P',monospace;font-size:18px}
.cd small{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--pool2)}

/* ============ RAYO CORRIENDO ============ */
.runner{position:absolute;bottom:34.5%;left:-120px;width:8px;height:8px;z-index:1;animation:run 14s linear infinite;animation-delay:3s}
.runner::before{content:"";position:absolute;width:8px;height:8px;background:#d98a3a;
  box-shadow:8px 0 #d98a3a,16px 0 #d98a3a,24px 0 #d98a3a,32px 0 #d98a3a,40px -8px #d98a3a,48px -8px #d98a3a,48px -16px #d98a3a,56px -8px var(--ink),40px -16px #d98a3a,
   0 8px #d98a3a,8px 8px #d98a3a,16px 8px #d98a3a,24px 8px #d98a3a,32px 8px #d98a3a,40px 8px #d98a3a,-8px -8px #d98a3a,-16px -16px #d98a3a,
   0 16px #b06a2a,32px 16px #b06a2a,48px 0 #b06a2a,44px -12px var(--hot);
  animation:legs .25s steps(2) infinite}
.runner::after{content:"";position:absolute;left:40px;top:-40px;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:26px solid var(--lime);transform:rotate(-10deg)}
@keyframes run{to{transform:translateX(calc(100vw + 240px))}}
@keyframes legs{50%{transform:translateY(3px)}}

/* ============ AUDIO / EXTRAS ============ */
.snd{position:fixed;top:12px;left:12px;z-index:6;font-family:'Press Start 2P',monospace;font-size:9px;background:var(--ink);color:var(--lime);border:3px solid var(--white);padding:8px 10px;cursor:pointer;box-shadow:3px 3px 0 var(--hot)}
.snd.on{color:var(--sun)}
.heart{position:fixed;bottom:-20px;font-size:22px;animation:rise 4s linear forwards;pointer-events:none;z-index:4}
@keyframes rise{to{transform:translateY(-110vh) rotate(30deg);opacity:0}}
.pk{position:fixed;top:-60px;width:44px;height:14px;background:var(--wood);border-radius:8px;box-shadow:0 -8px 0 0 #d9873f,0 -16px 0 0 var(--wood);animation:fall 3s linear forwards;z-index:4;pointer-events:none}
.pk::after{content:"";position:absolute;left:16px;top:-22px;width:12px;height:8px;background:var(--sun)}

/* ============ MINIJUEGO ============ */
#game{position:relative;height:280px;border:var(--px) solid var(--ink);background:linear-gradient(var(--sky3),var(--pool));overflow:hidden;margin-top:14px;touch-action:none;cursor:none}
#basket{position:absolute;bottom:8px;left:50%;width:70px;height:26px;background:var(--wood2);border:3px solid var(--ink);transform:translateX(-50%)}
#basket::before{content:"";position:absolute;left:-3px;right:-3px;top:-10px;height:10px;background:var(--wood);border:3px solid var(--ink)}
.drop{position:absolute;top:-30px;width:34px;height:12px;background:var(--wood);border-radius:6px;box-shadow:0 -7px 0 0 #d9873f,0 -14px 0 0 var(--wood)}
.drop.bad{background:#666;border-radius:0;box-shadow:none;width:26px;height:26px;background:repeating-linear-gradient(45deg,#3a3a3a 0 4px,#777 4px 8px)}
.drop.bad::after{content:"🪳";position:absolute;inset:0;font-size:20px;line-height:26px;text-align:center}
#ghud{display:flex;justify-content:space-between;font-family:'Press Start 2P',monospace;font-size:10px;margin-top:10px}

/* ============ PODIO ============ */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin-top:16px;height:150px}
.pd{width:31%;background:var(--white);color:var(--ink);border:var(--px) solid var(--ink);box-shadow:var(--px) var(--px) 0 var(--hot);text-align:center;padding:6px 4px;
  display:flex;flex-direction:column;justify-content:flex-end;animation:grow .8s steps(8) both}
.pd .m{font-size:30px;line-height:1}.pd .n{font-family:'Press Start 2P',monospace;font-size:8px;margin:6px 0 4px;word-break:break-word}.pd .s{font-size:22px}
.pd.p1{height:100%;background:var(--sun)}.pd.p2{height:78%;animation-delay:.15s}.pd.p3{height:60%;background:#ffd9c2;animation-delay:.3s}
@keyframes grow{from{transform:scaleY(0);transform-origin:bottom}}
.prize{margin-top:14px;padding:12px;border:3px dashed var(--lime);color:var(--lime);font-family:'Press Start 2P',monospace;font-size:9px;line-height:1.8;animation:blink 2s steps(2) infinite}
.rank{font-size:20px;margin-top:10px;text-align:left;color:#fff}
.rank div{display:flex;justify-content:space-between;border-bottom:2px dotted rgba(255,255,255,.3);padding:3px 0}

/* ============ MOBILE (todos abren en celular) ============ */
@media(max-width:600px){
  body{font-size:21px}
  .btn{width:100%;text-align:center;padding:16px 12px}
  .row{flex-direction:column}
  .stats{grid-template-columns:1fr 1fr}
  .stat .v{font-size:22px}
  .cabin{width:150px;height:80px}.cabin::before{left:-20px;width:190px;top:-50px;height:50px}.cabin::after{left:58px}.cabin .lamp{left:60px;top:-30px}
  .palm{height:80px}.palm.p2{right:-20px}
  .sun{transform:scale(1.4)}@keyframes bob{50%{transform:scale(1.4) translateY(6px)}}
  .sunshades{transform:translate(18px,26px) scale(1.1)}
  .snd{font-size:8px;padding:6px 8px;top:8px;left:8px}
  .dialog{font-size:21px}
  #game{height:240px}
  .foot{font-size:7px}.credit img{width:48px;height:48px}
  table{font-size:16px}th{font-size:7px}td,th{padding:4px 6px}
}

/* Fondo con movimiento suave: nada se desplaza de lado a lado (evita mareo). Las nubes solo flotan. */
.cloud{animation:cloudbob 7s ease-in-out infinite}
.cloud.c1{left:10%;animation-delay:-1s}.cloud.c2{left:52%;animation-delay:-3s}.cloud.c3{left:76%;animation-delay:-5s}
@keyframes cloudbob{50%{translate:0 8px}}
/* Segundo perro: Terra, negro */
.runner.black{animation-duration:17s;animation-delay:11s;bottom:33.5%}
.runner.black::before{background:#2a2a35;
  box-shadow:8px 0 #2a2a35,16px 0 #2a2a35,24px 0 #2a2a35,32px 0 #2a2a35,40px -8px #2a2a35,48px -8px #2a2a35,48px -16px #2a2a35,56px -8px var(--white),40px -16px #2a2a35,
   0 8px #2a2a35,8px 8px #2a2a35,16px 8px #2a2a35,24px 8px #2a2a35,32px 8px #2a2a35,40px 8px #2a2a35,-8px -8px #2a2a35,-16px -16px #2a2a35,
   0 16px #15151f,32px 16px #15151f,48px 0 #15151f,44px -12px var(--hot)}
.runner.black::after{border-bottom-color:var(--sun)}