:root{--bg:#fff;--panel:#f6f6f6;--line:#ddd;--muted:#626262;--lime:#d92532;--red:#d92532;--ink:#171717}body{color:var(--ink)}[hidden]{display:none!important}button{touch-action:manipulation}header{border-bottom:3px solid var(--ink)}.brand{color:var(--ink);white-space:nowrap}.ball{display:block;width:35px;height:35px;object-fit:contain;flex-shrink:0;border:0;border-radius:0;background:none}.hero-art{background:radial-gradient(ellipse,#d9253214,transparent 65%)}.hero-art img{transform:none;filter:drop-shadow(0 16px 18px #0002)}.orbit{border-color:#d9253238;outline-color:#17171720}.mode-picker{display:inline-flex;padding:4px;border:1px solid var(--line);background:#f4f4f4;border-radius:9px;gap:4px}.mode-picker button{min-height:44px;padding:10px 25px;border:0;border-radius:6px;color:var(--muted);background:transparent;font-size:13px;font-weight:700}.mode-picker button[aria-pressed=true]{background:var(--red);color:#fff}#modeDescription{font-size:12px;color:var(--muted);margin:12px 0 25px}.level{border-color:#bbb;color:#454545;min-height:44px;font-size:12px}.level.active{background:var(--ink);border-color:var(--ink);color:#fff}.game{background:var(--panel);border-top:4px solid var(--red)}.counter strong span{color:#888}.progress{background:#ddd}.legend{flex-wrap:wrap}.solved-legend{color:#176c30}.cell{min-width:0;min-height:150px;border-color:#d0d0d0;background:#fff}.cell:hover:not(.locked),.cell.searching{border-color:var(--red)}.cell.searching{z-index:10}.cell .types{color:#4d4d4d;flex-wrap:wrap}.cell .placeholder{color:#aaa}.cell input{min-width:0;min-height:44px;border-bottom-color:#bbb;color:var(--ink)}.cell input::placeholder{color:#737373}.cell input[aria-invalid=true]{border-bottom-color:var(--red)}.cell.locked{background:repeating-linear-gradient(135deg,#eee,#eee 5px,#f5f5f5 5px,#f5f5f5 7px);border-color:#ddd;opacity:1}.cell.locked small{color:#666}.cell.done,.cell.done:hover{border-color:#21823d;background:#edf8ef}.cell.done .tick{color:#176c30}.tick{font-weight:700}.suggestions{left:0;right:auto;top:calc(100% - 3px);min-width:230px;width:100%;background:#fff;border:1px solid #aaa;border-radius:8px;z-index:11;max-height:260px;overscroll-behavior:contain;box-shadow:0 10px 28px #0003;scroll-padding:4px}.cell:nth-child(6n) .suggestions{left:auto;right:0}.suggestions button{display:flex;gap:8px;align-items:center;color:var(--ink);min-height:52px;padding:5px 10px;font-size:12px;border-bottom:1px solid #eee}.suggestions button:last-child{border-bottom:0}.suggestions button:hover,.suggestions button:focus{background:#ffedf0;outline:2px solid var(--red);outline-offset:-2px}.pixel-sprite{width:40px;height:40px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}.suggestions span{overflow-wrap:anywhere}#next{color:#fff;min-height:46px}#next:disabled{background:#ddd;color:#777}#notice{color:#a51420}.note strong{color:var(--ink)}footer{border-top:2px solid var(--ink)}footer .ball{width:26px;height:26px}dialog{background:#fff;color:var(--ink);border-color:#aaa;border-top:4px solid var(--red);max-height:85dvh;overflow:auto}.quiet{min-height:44px}
@media(max-width:1000px){.cell:nth-child(6n) .suggestions{left:0;right:auto}.cell:nth-child(4n) .suggestions{left:auto;right:0}}
@media(max-width:650px){header{padding:16px 18px;gap:12px}main{padding:0 16px}.intro{gap:8px}.hero-art{flex-shrink:0}.art-label{font-size:7px;letter-spacing:.8px;text-align:center}.intro p{font-size:12px}.game{padding:18px 10px}.game-heading{gap:8px}.cell{min-height:150px}.cell .types{font-size:9px}.cell input{font-size:16px}.cell input::placeholder{font-size:10px}.cell:nth-child(4n) .suggestions,.cell:nth-child(6n) .suggestions{left:0;right:auto}.cell:nth-child(3n) .suggestions{left:auto;right:0}.suggestions{min-width:210px;max-width:calc(100vw - 52px)}.suggestions button{font-size:13px}.counter{flex-shrink:0}.counter>span{font-size:7px;letter-spacing:.5px}.legend{font-size:9px;gap:8px}.level{padding:10px 12px}.mode-picker{display:flex}.mode-picker button{flex:1}footer{padding:25px 18px}footer div{max-width:100%;overflow-wrap:anywhere}dialog{width:calc(100% - 32px);padding:22px}}
@media(max-width:400px){h1{font-size:35px}.intro{min-height:245px}.hero-art{width:110px}.hero-art img{width:130px;height:140px}.hero-art .orbit{width:85px;height:85px}.brand{font-size:20px}.ball{width:30px;height:30px}.quiet{font-size:11px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cell:nth-child(3n) .suggestions,.cell:nth-child(4n) .suggestions,.cell:nth-child(6n) .suggestions{left:0;right:auto}.cell:nth-child(2n) .suggestions{left:auto;right:0}.cell .types{font-size:10px}.cell input::placeholder{font-size:11px}h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.rail{position:fixed;top:0;bottom:0;width:calc((100vw - 1320px)/2);display:flex;justify-content:space-evenly;overflow:hidden;pointer-events:none;z-index:0;contain:strict;background:linear-gradient(90deg,#d925320d,#d9253203);-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}.rail.left{left:0}.rail.right{right:0;background:linear-gradient(270deg,#d925320d,#d9253203)}.rail-col{width:64px;overflow:hidden}.rail-track{display:flex;flex-direction:column;gap:22px;animation:rail-up linear infinite;will-change:transform}.rail-track.down{animation-name:rail-down}.rail img{width:64px;height:64px;image-rendering:pixelated;opacity:.85;filter:drop-shadow(0 4px 3px #0002)}.rail-col:nth-child(2) img{opacity:.6}header,main,footer{position:relative;z-index:1}@keyframes rail-up{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 11px))}}@keyframes rail-down{from{transform:translateY(calc(-50% - 11px))}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.rail-track{animation:none}}
/* ---------- Visual refresh ---------- */
header{border-bottom:4px solid;border-image:linear-gradient(90deg,#85c36d,#70a7ed,#f28c58,#edcf60,#e882a2,#8f87e9,#d92532) 1}
footer{border-top:3px solid;border-image:linear-gradient(90deg,#d92532,#8f87e9,#e882a2,#edcf60,#f28c58,#70a7ed,#85c36d) 1}
h1 em{background:linear-gradient(90deg,var(--red),#ff7a3d);-webkit-background-clip:text;background-clip:text;color:transparent}
#help{display:inline-flex;align-items:center;gap:8px;padding:6px 16px 6px 6px;border-radius:999px;background:var(--red);color:#fff;font-size:13px;font-weight:700;box-shadow:0 3px 0 #9e1520;transition:transform .15s,box-shadow .15s}
#help .q{width:28px;height:28px;border-radius:50%;background:#fff;color:var(--red);display:grid;place-items:center;font-weight:800;font-size:15px}
#help:hover{transform:translateY(-1px);box-shadow:0 5px 0 #9e1520}#help:active{transform:translateY(2px);box-shadow:0 1px 0 #9e1520}
.mode-picker,.mode-picker button{border-radius:999px}.mode-picker button[aria-pressed=true]{box-shadow:0 3px 0 #9e1520}
.level{display:inline-flex;align-items:center;gap:7px;border:2px solid #e2e2e2;border-radius:999px;background:#fff;font-weight:600;transition:border-color .15s,transform .15s}
.level::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--t,#ccc);flex-shrink:0}
.level:not(:disabled):hover{border-color:var(--t,#bbb)}.level.active{box-shadow:0 0 0 3px color-mix(in srgb,var(--t,#ccc) 55%,transparent)}
.game{border:2px solid #e8e8e8;border-top:6px solid var(--accent);border-radius:22px;background:radial-gradient(#00000009 1px,transparent 1.5px) 0 0/16px 16px,#fafafa;box-shadow:0 14px 40px #0000000f}
.progress{height:10px;border-radius:999px;background:#e8e8e8;box-shadow:inset 0 1px 2px #0000001a}
.progress div{border-radius:999px;background:linear-gradient(90deg,var(--red),#ff7a3d);background-size:auto}
.grid{gap:12px}
.cell{border:2px solid #e6e6e6;border-radius:16px;background:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--t,#ccc) 16%,#fff),#fff 60%);box-shadow:0 2px 0 #0000000d;transition:border-color .15s,transform .15s,box-shadow .15s}
.cell::before{content:'';position:absolute;left:14px;right:14px;top:-2px;height:5px;border-radius:0 0 6px 6px;background:var(--t,#ccc)}
.cell.locked::before{display:none}.cell.locked{border-radius:16px;box-shadow:none}
.cell .types{background:#fff;border:1px solid #e4e4e4;border-radius:999px;padding:3px 9px;font-weight:600}
.cell .placeholder{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:700;color:color-mix(in srgb,var(--t,#999) 70%,#222);border:2px dashed color-mix(in srgb,var(--t,#ccc) 75%,#fff);background:#fff}
.cell.locked .placeholder{width:auto;height:auto;border:0;background:none;color:#bbb;font-weight:400}
.cell input{border:2px solid transparent;border-radius:12px;background:#f2f2f5;padding:8px 6px;font-weight:600;transition:border-color .15s,background .15s,box-shadow .15s}
.cell input:focus{outline:none;background:#fff;border-color:color-mix(in srgb,var(--t,#d92532) 85%,#222);box-shadow:0 0 0 4px color-mix(in srgb,var(--t,#d92532) 30%,transparent)}
.cell input[aria-invalid=true]{border-color:var(--red);background:#fff1f2;animation:shake .35s}
.cell.searching,.cell:hover:not(.locked){border-color:color-mix(in srgb,var(--t,#d92532) 80%,#222)}
@media(hover:hover){.cell:not(.locked):hover{transform:translateY(-3px);box-shadow:0 10px 22px #0000001a}}
.cell.done,.cell.done:hover{border-color:#2f9e4f;background:linear-gradient(180deg,#d9f4df,#f7fdf8 70%)}
.cell.done img{filter:drop-shadow(0 6px 5px #0002)}.cell.fresh img{animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
.cell.done .tick{width:20px;height:20px;border-radius:50%;background:#2f9e4f;color:#fff;display:grid;place-items:center;font-size:11px;right:8px;top:8px}
.suggestions{border:2px solid color-mix(in srgb,var(--t,#d92532) 80%,#222);border-radius:14px;box-shadow:0 16px 34px #00000030;padding:4px}
.suggestions button{border-radius:10px;border-bottom:0}.suggestions button:hover,.suggestions button:focus{background:color-mix(in srgb,var(--t,#d92532) 18%,#fff);outline:2px solid color-mix(in srgb,var(--t,#d92532) 80%,#222)}
#next{border-radius:999px;background:linear-gradient(135deg,var(--red),#ff5a3c);box-shadow:0 4px 0 #9e1520;transition:transform .15s}
#next:not(:disabled):hover{transform:translateY(-1px)}#next:disabled{box-shadow:none}
#notice{font-weight:600}
dialog{border:0;border-top:6px solid var(--red);border-radius:22px;box-shadow:0 30px 80px #0006}dialog h2{color:var(--red)}
dialog p strong{color:var(--red)}#close{border-radius:999px;background:#f2f2f2;padding:6px 14px;color:var(--ink)}
@keyframes pop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:650px){#help{font-size:12px;padding:5px 12px 5px 5px}#help .q{width:24px;height:24px}.grid{gap:8px}.cell::before{left:10px;right:10px}.game{border-radius:18px}}
@media(prefers-reduced-motion:reduce){.cell.fresh img,.cell input[aria-invalid=true]{animation:none}}
.art-label{left:50%;bottom:4px;transform:translateX(-50%);z-index:2;white-space:nowrap;padding:6px 14px;border-radius:999px;background:#fff;border:2px solid var(--red);color:var(--red);font-size:13px;font-weight:700;letter-spacing:0;box-shadow:0 3px 0 #9e1520}
@media(max-width:650px){.art-label{font-size:10px;padding:4px 9px;bottom:0;letter-spacing:0}}
/* ---------- Mascot stage ---------- */
.hero-art{background:none}
.hero-art::before{content:'';position:absolute;width:215px;height:215px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,color-mix(in srgb,var(--accent) 30%,#fff) 45%,color-mix(in srgb,var(--accent) 65%,#fff) 100%);box-shadow:0 0 0 12px color-mix(in srgb,var(--accent) 14%,transparent),0 0 0 26px color-mix(in srgb,var(--accent) 7%,transparent)}
.hero-art::after{content:'';position:absolute;bottom:34px;width:110px;height:14px;border-radius:50%;background:radial-gradient(#0000003a,transparent 70%);animation:mascot-shadow 3.2s ease-in-out infinite}
.hero-art img{position:relative;z-index:1;animation:mascot-bob 3.2s ease-in-out infinite}
.orbit{width:270px;height:270px;border:2px dashed color-mix(in srgb,var(--accent) 70%,#999);outline:0;animation:orbit-spin 28s linear infinite}
.orbit::before,.orbit::after{content:'';position:absolute;top:50%;border-radius:50%;box-sizing:border-box}
.orbit::before{left:-9px;width:16px;height:16px;margin-top:-8px;border:2px solid #222;background:linear-gradient(var(--red) 0 43%,#222 43% 57%,#fff 57%)}
.orbit::after{right:-6px;width:10px;height:10px;margin-top:-5px;background:var(--accent);box-shadow:0 0 0 3px #fff}
@keyframes mascot-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes mascot-shadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.8);opacity:.6}}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
@media(max-width:650px){.hero-art::before{width:122px;height:122px;box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 14%,transparent),0 0 0 14px color-mix(in srgb,var(--accent) 7%,transparent)}.hero-art::after{bottom:22px;width:70px;height:10px}.hero-art img{width:135px;height:135px}.orbit{width:150px;height:150px;outline:0}}
@media(max-width:400px){.hero-art::before{width:104px;height:104px}.hero-art img{width:118px;height:118px}.orbit{width:126px;height:126px}}
@media(prefers-reduced-motion:reduce){.hero-art img,.hero-art::after,.orbit{animation:none}}
/* ---------- Solved cells glow in the level's type color ---------- */
.cell.done,.cell.done:hover{border-color:color-mix(in srgb,var(--accent) 80%,#222);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 38%,#fff),color-mix(in srgb,var(--accent) 8%,#fff) 75%);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent),0 0 18px color-mix(in srgb,var(--accent) 55%,transparent)}
.cell.done .tick{background:color-mix(in srgb,var(--accent) 75%,#222)}
.cell.fresh{animation:cell-glow 1s ease-out}
.solved-legend{color:color-mix(in srgb,var(--accent) 65%,#000)}
@keyframes cell-glow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 80%,transparent),0 0 0 transparent}40%{box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 45%,transparent),0 0 34px color-mix(in srgb,var(--accent) 80%,transparent)}}
@media(prefers-reduced-motion:reduce){.cell.fresh{animation:none}}
/* ---------- Hero: stats, start button, floating type bubbles ---------- */
html{scroll-behavior:smooth}#juego{scroll-margin-top:16px}
.intro{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text art" "extra art";column-gap:40px;row-gap:24px;align-items:center}
.intro-text{grid-area:text;align-self:end}.intro-text p{margin-bottom:0}.hero-art{grid-area:art}
.hero-extra{grid-area:extra;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:18px;position:relative;z-index:2}
.hero-stats{display:flex;flex-wrap:wrap;gap:10px}
.stat{display:grid;grid-template-columns:auto auto;column-gap:10px;align-items:center;padding:10px 16px 10px 12px;background:#fff;border:2px solid #ececec;border-bottom:4px solid var(--c);border-radius:16px}
.stat:nth-child(1){--c:#f28c58}.stat:nth-child(2){--c:#70a7ed}.stat:nth-child(3){--c:#85c36d}
.stat-icon{grid-row:span 2;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:color-mix(in srgb,var(--c) 22%,#fff)}
.stat strong{font-family:'Space Grotesk',sans-serif;font-size:22px;line-height:1.05}.stat span:last-child{font-size:11px;color:var(--muted)}
.start{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;background:linear-gradient(135deg,var(--red),#ff6a3d);color:#fff;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 4px 0 #9e1520;transition:transform .15s,box-shadow .15s}
.start span{display:inline-block;animation:nudge 1.6s ease-in-out infinite}
.start:hover{transform:translateY(-2px);box-shadow:0 6px 0 #9e1520}.start:active{transform:translateY(2px);box-shadow:0 1px 0 #9e1520}
.type-bubbles{display:none;position:absolute;inset:0;pointer-events:none}
.type-bubbles span{position:absolute;padding:6px 13px;border-radius:999px;background:color-mix(in srgb,var(--t) 22%,#fff);border:2px solid var(--t);color:color-mix(in srgb,var(--t) 45%,#000);font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 6px 14px color-mix(in srgb,var(--t) 35%,transparent);animation:bubble 4.2s ease-in-out infinite;animation-delay:var(--d)}
.type-bubbles span:nth-child(1){top:14%;left:43%}.type-bubbles span:nth-child(2){top:30%;left:55%}.type-bubbles span:nth-child(3){top:47%;left:44%}
.type-bubbles span:nth-child(4){top:63%;left:57%}.type-bubbles span:nth-child(5){top:78%;left:47%}.type-bubbles span:nth-child(6){top:6%;left:58%}
@media(min-width:1224px){.type-bubbles{display:block}}
@keyframes bubble{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.level:disabled{opacity:.55;background:#f7f7f7}
@media(max-width:650px){.intro{grid-template-areas:"text art" "extra extra";column-gap:8px;row-gap:20px;padding-bottom:28px}
.hero-extra{flex-direction:column;align-items:stretch;gap:14px}.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat{grid-template-columns:1fr;justify-items:center;text-align:center;padding:10px 4px;row-gap:3px}.stat-icon{grid-row:auto;width:32px;height:32px;font-size:17px}.stat strong{font-size:19px}.stat span:last-child{font-size:10px;line-height:1.2}
.start{justify-content:center;padding:14px}}
@media(prefers-reduced-motion:reduce){.type-bubbles span,.start span{animation:none}}
/* ---------- Official type icons ---------- */
.type-icon{width:14px;height:14px;border-radius:3px;flex-shrink:0;display:inline-block;vertical-align:-2px}
.cell .types{gap:5px}.level::before{content:none}.level .type-icon{width:20px;height:20px;border-radius:5px}
.type-bubbles span{display:inline-flex;align-items:center;gap:7px;padding:5px 13px 5px 5px}.type-bubbles img{width:24px;height:24px;border-radius:6px}
.cell .types .type-icon{width:14px;height:14px;filter:none;animation:none;object-fit:contain}
/* ---------- Celebrations ---------- */
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
#next:not(:disabled){animation:next-pulse 1.8s ease-in-out infinite}
@keyframes next-pulse{0%,100%{box-shadow:0 4px 0 #9e1520,0 0 0 0 #d9253255}50%{box-shadow:0 4px 0 #9e1520,0 0 0 10px #d9253200}}
.level.cleared{background:color-mix(in srgb,var(--t) 22%,#fff);border-color:color-mix(in srgb,var(--t) 70%,#fff);color:color-mix(in srgb,var(--t) 45%,#000)}
.level.cleared.active{background:var(--ink);color:#fff;border-color:var(--ink)}
dialog.victory{max-width:560px;width:calc(100% - 32px);text-align:center;padding:34px 30px 28px;border-top:0;overflow:visible;background:radial-gradient(circle at 50% 0,#fff3d6,#fff 55%)}
dialog.victory::backdrop{background:radial-gradient(circle,#1d0b0bcc,#000d)}
.v-mascot{width:150px;height:150px;margin:-100px auto 6px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff,#ffd98a);box-shadow:0 0 0 8px #fff,0 0 0 14px #ffcf5a,0 18px 40px #0004}
.v-mascot img{width:130px;height:130px;object-fit:contain;animation:mascot-bob 2.4s ease-in-out infinite}
dialog.victory h2{font-size:30px;margin:8px 0 6px;color:var(--ink)}dialog.victory p{margin:0 0 18px;color:var(--muted)}dialog.victory p strong{color:var(--red);font-size:18px}
.v-types{display:grid;grid-template-columns:repeat(9,1fr);gap:8px;margin:0 auto 22px;max-width:420px}
.v-types span{animation:v-pop .5s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(var(--i)*70ms + .2s)}
.v-types .type-icon{width:100%;height:auto;aspect-ratio:1;border-radius:8px;box-shadow:0 3px 0 #0002}
.v-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.v-actions button{float:none;min-height:46px;padding:12px 22px;border-radius:999px;font-weight:700;font-size:14px;border:0}
.v-primary{background:linear-gradient(135deg,var(--red),#ff6a3d);color:#fff;box-shadow:0 4px 0 #9e1520}.v-secondary{background:#f1f1f1;color:var(--ink)}
@keyframes v-pop{from{transform:scale(0) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
@media(max-width:650px){dialog.victory{padding:30px 18px 22px}.v-mascot{width:120px;height:120px;margin-top:-80px}.v-mascot img{width:104px;height:104px}dialog.victory h2{font-size:24px}.v-types{grid-template-columns:repeat(6,1fr)}.v-actions button{flex:1}}
@media(prefers-reduced-motion:reduce){#next:not(:disabled),.v-types span,.v-mascot img{animation:none}}
@media(max-width:650px){dialog.victory h2{line-height:1.2}.v-actions button{font-size:13px;padding:12px 8px;white-space:nowrap}}