@font-face{font-family:Sweet;src:url('assets/nunito.ttf') format('truetype');font-weight:400 700;font-display:swap}@font-face{font-family:Sweet;src:url('assets/nunito-heavy.ttf') format('truetype');font-weight:800 1000;font-display:swap}
:root{--cocoa:#492e24;--muted:#795e55;--pink:#eb8294;--cream:#fff8ec;--edge:#ddd0bf;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--cocoa);font-family:Sweet,'Trebuchet MS',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #973f58;outline-offset:5px}::selection{background:#f8bfcd;color:#492e24}.game{max-width:650px;margin:0 auto;padding:32px 24px 20px;text-align:center}header{position:relative}h1{font-weight:900;font-size:clamp(34px,7vw,57px);line-height:1.08;letter-spacing:-.035em;margin:0 30px 8px;text-shadow:0 2px 0 #bd948066,0 4px 7px #6a392418}header p{margin:0;color:var(--muted);font-size:17px}.sound{position:absolute;right:-4px;top:7px;border:0;background:transparent;width:40px;height:40px;border-radius:50%;display:grid;place-items:center}.sound:hover{background:#fff0f3}.sound svg{width:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.sizes{display:inline-flex;background:#f6f2ee;padding:4px;border-radius:30px;margin:24px 0 22px;box-shadow:inset 0 1px 3px #4a2b1912}.sizes button{border:0;background:transparent;border-radius:26px;padding:10px 27px;font-size:19px;font-weight:800;transition:background .2s,color .2s}.sizes button[aria-pressed=true]{background:#ee91a1;color:#492e24;box-shadow:inset 0 2px 2px #ffffff60,0 2px 5px #85364c18}.sizes button:hover{background:#f4c4ce}.stats{display:grid;grid-template-columns:repeat(3,1fr);margin:0 10px 23px}.stats>div+div{border-left:1px solid #e6d8d0}.stats span{display:block;text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:800;color:var(--muted)}.stats strong{display:block;font-size:27px;line-height:1.35;font-weight:800;font-variant-numeric:tabular-nums}.board{--cols:4;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:13px;perspective:1000px}.card{position:relative;aspect-ratio:1;border:0;padding:0;background:none;border-radius:19px;perspective:800px;touch-action:manipulation}.card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.75,.2,1);border-radius:inherit}.card.is-open .card-inner,.card.matched .card-inner{transform:rotateY(180deg)}.face{position:absolute;inset:0;display:block;border-radius:inherit;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 2px 3px 4px #ffffff9c,inset -2px -4px 4px #8e5c3430,0 5px 0 #d4c5b5,0 9px 13px #4a311d23}.back{background:linear-gradient(145deg,#f9a3b1,#e88197);transform:translateZ(2px)}.front{background:linear-gradient(145deg,#fffdf7,#f1e9dc);transform:rotateY(180deg) translateZ(2px)}.sweet{display:block;position:absolute;inset:8%;background-image:url('assets/sweets-atlas.png');background-size:400% 300%;background-repeat:no-repeat;pointer-events:none}.back .sweet{inset:17%;filter:drop-shadow(0 3px 2px #9f42552e)}.card:not(.matched):not(.is-open):hover .card-inner{transform:translateY(-3px) rotateX(4deg)}.card:disabled{cursor:default}.matched .front{box-shadow:inset 2px 3px 4px #ffffff9c,inset -2px -4px 4px #8e5c3430,0 4px 0 #b8c5a4,0 7px 12px #4a311d16}.check{display:none;position:absolute;top:6px;right:6px;width:22px;height:22px;background:#5b873c;border:2px solid #f8ffed;border-radius:50%;color:white;align-items:center;justify-content:center}.check svg{width:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.matched .check{display:flex}.matched{animation:pair .38s .18s ease-out}@keyframes pair{50%{transform:translateY(-5px)}100%{transform:translateY(0)}}.free{position:relative;aspect-ratio:1;display:grid;place-items:center}.free .sweet{inset:26%;opacity:.6}.free small{position:absolute;bottom:8px;color:var(--muted);font-size:11px}.restart{margin-top:29px;border:0;border-radius:25px;background:linear-gradient(#674436,#42291f);color:#fff9ef;font-weight:800;font-size:19px;min-height:50px;padding:12px 42px;box-shadow:inset 0 2px 2px #c0a89988,0 5px 9px #5736221c;transition:transform .2s}.restart:hover{transform:translateY(-2px)}.restart:disabled{opacity:.65;cursor:wait}.help{color:var(--muted);font-size:14px;margin:17px 0 0;min-height:20px}.result{margin-top:25px}.result[hidden]{display:none}.result h2{font-size:28px;margin:0 0 5px}.result p{margin:0;color:var(--muted)}footer{margin-top:22px}footer a{font-size:11px;color:#866c61;text-underline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}.board[aria-busy=true]{opacity:.5;pointer-events:none}@media(min-width:700px) and (min-height:900px){.game{padding-top:42px}}@media(max-width:480px){.game{padding:25px 18px 16px}h1{font-size:36px;margin:0 24px 8px 0}header p{font-size:14px}.sound{right:-8px;top:0}.sizes{margin:22px 0 20px}.sizes button{padding:9px 23px;font-size:17px}.stats{margin:0 0 20px}.stats strong{font-size:23px}.stats span{font-size:10px}.board{gap:10px}.card{border-radius:14px}.check{width:18px;height:18px;top:4px;right:4px}.restart{margin-top:25px;font-size:17px}.help{font-size:12px}.free small{font-size:10px;bottom:3px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.stats>div{padding:0 6px}@media(max-width:480px){.stats span,.free small{font-size:11px}}
.sweet{clip-path:inset(2% 4%)}.back .sweet{clip-path:inset(3% 8%)}
@media(min-width:700px) and (max-height:850px){.game{max-width:440px;padding-top:18px}h1{font-size:39px}header p{font-size:14px}.sizes{margin:16px 0}.sizes button{padding:8px 22px;font-size:16px}.stats{margin-bottom:17px}.stats strong{font-size:23px}.board{gap:11px}.restart{margin-top:24px}.help{margin-top:12px}footer{margin-top:14px}}
/* A lilac confectionery world: the ivory fronts remain distinct at every angle. */
body{background:#e7ddeb;isolation:isolate;min-height:100svh}
.game{position:relative;z-index:1}
.candy-world{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:strict}
.candy-layer{position:absolute;inset:0}
.floating-dessert{position:absolute;display:block;width:190px;aspect-ratio:1;background-image:url('assets/sweets-atlas.png');background-size:400% 300%;background-repeat:no-repeat;clip-path:inset(3% 6%);will-change:translate;filter:drop-shadow(0 14px 12px #69487122)}
.far{opacity:.22;filter:blur(1.3px)}.near{opacity:.42}
.macaron{background-position:66.6667% 50%;left:calc(50% - 510px);top:7%;width:170px;rotate:-18deg}
.bonbon{background-position:0% 50%;left:calc(50% + 350px);top:43%;width:120px;rotate:14deg;animation-delay:-5s}
.heart{background-position:100% 100%;left:calc(50% - 480px);top:74%;width:95px;rotate:-22deg;animation-delay:-9s}
.donut{background-position:0% 0%;left:calc(50% + 340px);top:3%;width:210px;rotate:20deg;animation-delay:-6s}
.candy{background-position:33.3333% 100%;left:calc(50% - 560px);top:44%;width:185px;rotate:-24deg;animation-delay:-3s}
.cherries{background-position:33.3333% 50%;left:calc(50% + 310px);top:74%;width:170px;rotate:15deg;animation-delay:-10s}

.board{isolation:isolate}.board::before{content:"";position:absolute;inset:-10px;z-index:-1;background:#d7c8de;border-radius:25px;box-shadow:inset 0 2px 4px #795c8512}
.front{background:linear-gradient(145deg,#fffef9,#f3eadb);box-shadow:inset 2px 3px 4px #fff,inset -2px -4px 4px #8e5c3430,0 5px 0 #b8a693,0 10px 14px #3e294335}
.matched .front{box-shadow:inset 2px 3px 4px #fff,inset -2px -4px 4px #8e5c3425,0 4px 0 #9daa86,0 8px 12px #3e294328}
.stats>div+div{border-left-color:#cbb8cc}footer a{color:#715668}
@media(max-width:700px){.near{opacity:.22}.far{opacity:.15}.macaron{left:-25px;top:0;width:120px}.donut{left:auto;right:-45px;top:6%;width:140px}.candy{left:-85px;top:48%;width:150px}.bonbon{left:auto;right:-65px;top:48%}.cherries{left:auto;right:-45px;top:85%;width:140px}.heart{left:-15px;top:89%;width:80px}.board::before{inset:-8px;border-radius:20px}}
@media(prefers-reduced-motion:reduce){.candy-layer{transform:none!important;will-change:auto}.floating-dessert{animation:none;will-change:auto}}
:root{--muted:#6d514b}

#timer.urgent{color:#a02745}

/* Plataforma: formato vertical 9:16 como los demás juegos, con recuadro de marca arriba a la derecha.
   Todo dentro del marco se mide en cqw/cqh para que escale con su tamaño. */
html,body{height:100%}
body{display:grid;place-items:center;min-height:100svh;background:#4a3550;overflow:hidden}
.stage{position:relative;width:min(100vw,450px,calc(100svh * .5625));aspect-ratio:9/16;overflow:hidden;isolation:isolate;container-type:size;background:#e7ddeb}
.stage .candy-world{position:absolute}
.stage .floating-dessert{width:30cqw}
.stage .macaron{left:-6cqw;top:0;width:28cqw}
.stage .donut{left:auto;right:-10cqw;top:6%;width:32cqw}
.stage .candy{left:-20cqw;top:48%;width:34cqw}
.stage .bonbon{left:auto;right:-14cqw;top:48%;width:27cqw}
.stage .cherries{left:auto;right:-10cqw;top:85%;width:32cqw}
.stage .heart{left:-4cqw;top:89%;width:20cqw}
.stage .far{opacity:.15}
.stage .near{opacity:.22}
.stage .game{position:absolute;inset:0;max-width:none;margin:0;padding:4cqw 6cqw 3cqw;display:flex;flex-direction:column;align-items:center}
.stage header{width:100%}
.stage .topbar{display:flex;align-items:center;justify-content:space-between;height:10cqw;margin-bottom:1.5cqw}
.stage .sound{position:static;width:10cqw;height:10cqw}
.stage .sound svg{width:6cqw}
.stage h1{font-size:10cqw;margin:0 0 1cqw}
.stage header p{font-size:3.6cqw}
.stage .sizes{margin:3.5cqw 0 3cqw;padding:1cqw}
.stage .sizes button{padding:1.8cqw 5.5cqw;font-size:4cqw}
.stage .stats{width:100%;margin:0 0 3.5cqw}
.stage .stats span{font-size:2.5cqw}
.stage .stats strong{font-size:5.4cqw}
.stage .board{--rows:4;width:min(86cqw,47cqh * var(--cols) / var(--rows));gap:2.4cqw;flex:none}
.stage .board:has(>:nth-child(17)){--rows:5}
.stage .board:not(:has(>:nth-child(10))){--rows:3}
.stage .board::before{inset:-2cqw;border-radius:5cqw}
.stage .card{border-radius:3.6cqw}
.stage .check{width:4.4cqw;height:4.4cqw;top:1cqw;right:1cqw}
.stage .free small{font-size:2.4cqw;bottom:.8cqw}
.stage .restart{margin-top:auto;font-size:4.2cqw;min-height:11cqw;padding:0 9cqw}
.stage .help{font-size:3cqw;margin:2.5cqw 0 0;min-height:4cqw}
.stage .result{position:absolute;left:10cqw;right:10cqw;top:50%;transform:translateY(-50%);z-index:2;margin:0;padding:6cqw 5cqw;border-radius:5cqw;background:#fff8ecf2;box-shadow:0 10px 30px #3e294340}
.stage .result h2{font-size:6.4cqw}
.stage .result p{font-size:3.6cqw}
.brand-slot{display:flex;align-items:center;justify-content:center;width:27cqw;height:10cqw;border-radius:3cqw;border:2px dashed #c9a9b9;background:#fff8ecb3;color:var(--muted);font-size:2.4cqw;font-weight:900;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;overflow:hidden}
.brand-slot.has-logo{border:0;background:transparent}
.brand-slot img{max-width:100%;max-height:100%;object-fit:contain}

/* Plataforma: «Tu logo aquí» en verde brillante con un pulso suave, para que se note. */
.brand-slot:not(.has-logo){background:#22c55e;border:2px solid #15803d;color:#052e16;text-shadow:none;animation:brand-slot-pulse 2.2s ease-in-out infinite}
@keyframes brand-slot-pulse{0%,100%{box-shadow:0 0 0 0 #22c55eb3}50%{box-shadow:0 0 0 7px #22c55e00}}
@media(prefers-reduced-motion:reduce){.brand-slot:not(.has-logo){animation:none}}