: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}}
.rail img{width:48px;height:48px;opacity:.9}.rail-col{display:flex;justify-content:center}
/* ---------- Details ---------- */
::selection{background:#d9253233}
.brand .ball{transition:transform .6s cubic-bezier(.3,1.4,.5,1)}.brand:hover .ball{transform:rotate(360deg)}
.level:disabled .type-icon{filter:grayscale(1);opacity:.55}
.level-head{display:flex;align-items:center;gap:16px}
.level-icon{width:58px;height:58px;border-radius:16px;flex-shrink:0;box-shadow:0 6px 0 color-mix(in srgb,var(--accent) 55%,#000),0 12px 24px color-mix(in srgb,var(--accent) 45%,transparent);transform:rotate(-6deg)}
.level-icon.pop{animation:icon-pop .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes icon-pop{from{transform:scale(.2) rotate(-60deg);opacity:0}to{transform:rotate(-6deg);opacity:1}}
.game{position:relative}.game::after{content:'';position:absolute;top:18px;right:150px;width:150px;height:150px;background:var(--wm) center/contain no-repeat;opacity:.06;transform:rotate(12deg);pointer-events:none;border-radius:30px}
.game>*{position:relative;z-index:1}
#count.bump{animation:count-bump .45s cubic-bezier(.2,1.8,.4,1)}#count{display:inline-block;color:color-mix(in srgb,var(--accent) 55%,#000)}
@keyframes count-bump{40%{transform:scale(1.3)}}
.progress div{position:relative;overflow:hidden;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 85%,#000),var(--accent))}
.progress div::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff99 50%,transparent 70%);transform:translateX(-100%);animation:shine 2.4s ease-in-out infinite}
@keyframes shine{60%,100%{transform:translateX(100%)}}
.legend span{background:#fff;border:1px solid #e6e6e6;border-radius:999px;padding:3px 10px}
#notice:not(:empty){display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 10px;border-radius:999px;font-size:13px;animation:toast-in .35s cubic-bezier(.2,1.5,.4,1)}
#notice::before{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800;flex-shrink:0}
#notice.ok{background:#e9f8ee;color:#176c30;border:2px solid #9fd8b0}#notice.ok::before{content:'✓';background:#21823d}
#notice.bad{background:#fff0f1;color:#a51420;border:2px solid #f3a6ad}#notice.bad::before{content:'!';background:#d92532}
#notice.win{background:color-mix(in srgb,var(--accent) 20%,#fff);color:color-mix(in srgb,var(--accent) 40%,#000);border:2px solid var(--accent)}#notice.win::before{content:'★';background:color-mix(in srgb,var(--accent) 70%,#222)}
@keyframes toast-in{from{transform:translateY(8px) scale(.9);opacity:0}}
.note{margin-top:22px;padding:22px 24px;border-radius:20px;background:linear-gradient(120deg,#fff7ec,#fff 60%);border:2px solid #f6dfbf}
.note-badge{width:52px;height:52px;flex-shrink:0;border-radius:16px;display:grid;place-items:center;font-size:26px!important;color:#fff!important;background:linear-gradient(135deg,var(--red),#ff8a3d);box-shadow:0 4px 0 #9e1520}
.type-strip{flex-basis:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding-bottom:6px}
.type-strip .type-icon{width:26px;height:26px;border-radius:7px;transition:transform .2s}.type-strip .type-icon:hover{transform:translateY(-4px) rotate(-8deg)}
@media(max-width:650px){.level-icon{width:46px;height:46px;border-radius:13px}.level-head{gap:12px}.game::after{right:10px;top:70px;width:110px;height:110px}.note{padding:18px}.note-badge{width:44px;height:44px}.type-strip .type-icon{width:22px;height:22px}#notice:not(:empty){border-radius:16px}}
@media(prefers-reduced-motion:reduce){.progress div::after,.level-icon.pop,#count.bump,#notice:not(:empty){animation:none}}
.game>#grid{z-index:3}
/* ---------- Bigger logo ---------- */
header .brand{font-size:36px;letter-spacing:-1.5px;gap:10px;line-height:1}
header .brand .ball{width:52px;height:52px;filter:drop-shadow(0 4px 0 #0000001f)}
.brand>span:last-child{background:linear-gradient(90deg,var(--red),#ff6a3d);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:2px}
header .brand{text-shadow:none;position:relative}
header .brand::after{content:'';position:absolute;left:62px;right:2px;bottom:-7px;height:5px;border-radius:999px;background:linear-gradient(90deg,#85c36d,#70a7ed,#f28c58,#edcf60,#e882a2,#8f87e9);opacity:.85}
header .brand:hover .ball{transform:rotate(360deg)}
footer .brand{font-size:20px}footer .brand .ball{width:28px;height:28px}
@media(max-width:650px){header .brand{font-size:26px;letter-spacing:-1px;gap:7px}header .brand .ball{width:36px;height:36px}header .brand::after{left:43px;bottom:-5px;height:4px}}
@media(max-width:400px){header .brand{font-size:23px}header .brand .ball{width:32px;height:32px}header .brand::after{left:39px}}
.brand,header .brand{gap:0}.brand .ball{margin-right:8px}header .brand .ball{margin-right:10px}@media(max-width:650px){header .brand .ball{margin-right:7px}}
/* Suggestion list scrollbar in the combination's type color */
.suggestions{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--t,#d92532) 80%,#222) color-mix(in srgb,var(--t,#d92532) 12%,#fff)}
.suggestions::-webkit-scrollbar{width:8px}.suggestions::-webkit-scrollbar-track{background:color-mix(in srgb,var(--t,#d92532) 12%,#fff);border-radius:8px}
.suggestions::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--t,#d92532) 80%,#222);border-radius:8px}
/* Logo uses the pixel Poké Ball sprite (24px) at crisp integer scales */
.ball{image-rendering:pixelated}
header .brand .ball{width:48px;height:48px}header .brand::after{left:58px}
footer .brand .ball{width:24px;height:24px}
@media(max-width:650px){header .brand .ball{width:48px;height:48px;margin-right:6px}header .brand::after{left:54px}}
@media(max-width:400px){header .brand .ball{width:48px;height:48px}header .brand::after{left:54px}}
/* Page scrollbar follows the current level's type color */
html{scrollbar-color:color-mix(in srgb,var(--accent) 80%,#333) color-mix(in srgb,var(--accent) 12%,#fff)}
/* "Siguiente tipo" button takes the current type's color once the level is cleared */
#next:not(:disabled){background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 80%,#fff),var(--accent));color:color-mix(in srgb,var(--accent) 25%,#000);box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 60%,#000);animation:next-pulse-type 1.8s ease-in-out infinite}
@keyframes next-pulse-type{0%,100%{box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 60%,#000),0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}50%{box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 60%,#000),0 0 0 11px transparent}}
@media(prefers-reduced-motion:reduce){#next:not(:disabled){animation:none}}
.progress{margin-bottom:24px}
/* ---------- Sun / moon switch ---------- */
.theme-toggle{position:relative;flex-shrink:0;width:70px;height:36px;margin-right:12px;padding:0 9px;border-radius:999px;border:2px solid #e2e2e2;background:#f1f3f5;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background .3s,border-color .3s}
.tt-icon{position:relative;z-index:1;width:17px;height:17px;display:grid;place-items:center;color:#a3abb4;transition:color .3s}.tt-icon svg{width:100%;height:100%}
.tt-sun{color:#f39c12}
.tt-knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #00000030;transition:transform .3s cubic-bezier(.3,1.4,.5,1),background .3s}
.theme-toggle:hover{border-color:#cfcfcf}
[data-theme=dark] .theme-toggle{background:#1d2228;border-color:#353c45}[data-theme=dark] .tt-knob{transform:translateX(34px);background:#3a424d}
[data-theme=dark] .tt-sun{color:#5d6670}[data-theme=dark] .tt-moon{color:#ffd84d}
header .quiet#help{margin-left:0}header .theme-toggle{margin-left:auto}
@media(max-width:650px){.theme-toggle{width:60px;height:32px;margin-right:8px;padding:0 7px}.tt-icon{width:15px;height:15px}.tt-knob{width:22px;height:22px}[data-theme=dark] .tt-knob{transform:translateX(28px)}}
@media(max-width:480px){#help .help-text{display:none}#help{padding:5px}}
body{transition:background-color .3s,color .3s}

/* ---------- Dark mode ---------- */
[data-theme=dark]{color-scheme:dark;--bg:#111418;--panel:#181c21;--line:#2b3138;--muted:#9aa4af;--ink:#eef1f4;--card:#1d2228;--card2:#252b33;scrollbar-color:color-mix(in srgb,var(--accent) 75%,#fff) #181c21}
[data-theme=dark] body{background:var(--bg);color:var(--ink)}
[data-theme=dark] .hero-art::before{background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 22%,#1d2228) 0,color-mix(in srgb,var(--accent) 34%,#1d2228) 50%,color-mix(in srgb,var(--accent) 55%,#1d2228) 100%)}
[data-theme=dark] .orbit::after{box-shadow:0 0 0 3px var(--bg)}
[data-theme=dark] .type-bubbles span{background:color-mix(in srgb,var(--t) 25%,#1d2228);color:color-mix(in srgb,var(--t) 70%,#fff)}
[data-theme=dark] .mode-picker{background:var(--card);border-color:var(--line)}
[data-theme=dark] .level{background:var(--card);border-color:var(--line);color:#c9d0d7}
[data-theme=dark] .level:disabled{background:#16191d}
[data-theme=dark] .level.active,[data-theme=dark] .level.cleared.active{background:#eef1f4;border-color:#eef1f4;color:#111418}
[data-theme=dark] .level.cleared{background:color-mix(in srgb,var(--t) 22%,#1d2228);border-color:color-mix(in srgb,var(--t) 55%,#1d2228);color:color-mix(in srgb,var(--t) 70%,#fff)}
[data-theme=dark] .game{background:radial-gradient(#ffffff0c 1px,transparent 1.5px) 0 0/16px 16px,var(--panel);border-color:var(--line);box-shadow:0 14px 40px #0006}
[data-theme=dark] .game::after{opacity:.08}
[data-theme=dark] #count{color:color-mix(in srgb,var(--accent) 75%,#fff)}[data-theme=dark] .counter strong span{color:#6b737c}
[data-theme=dark] .progress{background:#2b3138}
[data-theme=dark] .cell{background:linear-gradient(180deg,color-mix(in srgb,var(--t,#888) 18%,#1d2228),#1d2228 60%);border-color:var(--line);box-shadow:0 2px 0 #0004}
[data-theme=dark] .cell .types{background:var(--card2);border-color:var(--line);color:#c9d0d7}
[data-theme=dark] .cell .placeholder{background:var(--card);border-color:color-mix(in srgb,var(--t,#888) 60%,#1d2228);color:color-mix(in srgb,var(--t,#999) 75%,#fff)}
[data-theme=dark] .cell input{background:#2a3038;color:var(--ink)}[data-theme=dark] .cell input::placeholder{color:#8b949e}
[data-theme=dark] .cell input:focus{background:#232930}
[data-theme=dark] .cell input[aria-invalid=true]{background:#3a1d21}
[data-theme=dark] .cell.locked{background:repeating-linear-gradient(135deg,#171a1e,#171a1e 5px,#1c2025 5px,#1c2025 7px);border-color:var(--line)}
[data-theme=dark] .cell.locked small{color:#7d868f}[data-theme=dark] .cell.locked .placeholder{color:#4a525b}
[data-theme=dark] .cell.done,[data-theme=dark] .cell.done:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 35%,#1d2228),color-mix(in srgb,var(--accent) 10%,#1d2228) 75%)}
[data-theme=dark] .suggestions{background:var(--card2);scrollbar-color:color-mix(in srgb,var(--t,#d92532) 75%,#fff) var(--card2)}
[data-theme=dark] .suggestions button{color:var(--ink);border-bottom-color:var(--line)}
[data-theme=dark] .suggestions button:hover,[data-theme=dark] .suggestions button:focus{background:color-mix(in srgb,var(--t,#d92532) 25%,#252b33)}
[data-theme=dark] #next:disabled{background:#2b3138;color:#6b737c}
[data-theme=dark] #notice.ok{background:#15301f;color:#8fe0a8;border-color:#2c6b40}
[data-theme=dark] #notice.bad{background:#3a1d21;color:#ff9aa3;border-color:#7a2e36}
[data-theme=dark] #notice.win{background:color-mix(in srgb,var(--accent) 20%,#1d2228);color:color-mix(in srgb,var(--accent) 70%,#fff)}
[data-theme=dark] .note{background:linear-gradient(120deg,#2a2118,#1d2228 60%);border-color:#4a3a25}
[data-theme=dark] dialog{background:var(--card);color:var(--ink);border-color:var(--line)}
[data-theme=dark] #close{background:#2a3038;color:var(--ink)}
[data-theme=dark] dialog.victory{background:radial-gradient(circle at 50% 0,#3a2f17,#1d2228 55%)}
[data-theme=dark] .v-mascot{box-shadow:0 0 0 8px #1d2228,0 0 0 14px #ffcf5a,0 18px 40px #0008}
[data-theme=dark] .v-secondary{background:#2a3038;color:var(--ink)}
[data-theme=dark] footer .brand,[data-theme=dark] header .brand{color:var(--ink)}
[data-theme=dark] .rail{background:linear-gradient(90deg,#d925321a,#d9253205)}[data-theme=dark] .rail.right{background:linear-gradient(270deg,#d925321a,#d9253205)}