@font-face { font-family:"Nunito"; src:url(assets/fonts/Nunito-Regular.ttf) format("truetype"); font-weight:400 600; font-display:swap; }
@font-face { font-family:"Nunito"; src:url(assets/fonts/Nunito-Bold.ttf) format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Nunito"; src:url(assets/fonts/Nunito-ExtraBold.ttf) format("truetype"); font-weight:800 900; font-display:swap; }
/* Coloring Lab — estilo "candy": colores vivos, bordes gruesos, botones brillantes */
:root { --ink:#3a2a6b; --cream:#fff7e0; --line:#0002; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; }
body { font:700 15px/1.25 "Nunito",ui-rounded,"Baloo 2","Segoe UI Rounded","Trebuchet MS",system-ui,sans-serif; color:var(--ink); background:#6a2bd6; overflow-x:hidden; }
button { font:inherit; color:inherit; cursor:pointer; }
select, input[type=number] { font:inherit; padding:6px 8px; border-radius:12px; border:3px solid #e6d9a8; background:#fff; color:var(--ink); }

/* ---------- Botones brillantes ---------- */
.gb { --c1:#ffe27a; --c2:#ffc93c; position:relative; width:76px; height:76px; padding:0; border-radius:50%; border:5px solid #fff; background:linear-gradient(180deg,var(--c1),var(--c2)); box-shadow:0 4px 0 rgba(0,0,0,.13),0 8px 16px rgba(0,0,0,.2); font-size:34px; line-height:1; display:grid; place-items:center; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.22); transition:transform .08s; flex:none; }
.gb::after { content:""; position:absolute; top:7px; left:11px; width:22px; height:11px; border-radius:50%; background:rgba(255,255,255,.7); transform:rotate(-28deg); }
.gb:active { transform:translateY(3px) scale(.97); }
.gb.sq { border-radius:24px; }
.gb.purple { --c1:#c4a0ff; --c2:#8b5cf6; } .gb.green { --c1:#86e872; --c2:#2fb34a; } .gb.pink { --c1:#ff9acb; --c2:#ff3d9a; }
.gb.blue { --c1:#7cc8ff; --c2:#2f8cf0; } .gb.grey { --c1:#ececec; --c2:#cdcdcd; text-shadow:none; color:#fafafa; }
.gb.active { outline:5px solid #ffd447; outline-offset:2px; }
.gb[disabled] { filter:grayscale(.9); opacity:.55; pointer-events:none; }
.gb.rainbow { background:linear-gradient(135deg,#00c2ff 0 20%,#22cc44 20% 40%,#ffd400 40% 60%,#ff5fa2 60% 80%,#b66cff 80%); }
.pill { padding:12px 26px; border-radius:40px; border:5px solid #fff; background:linear-gradient(180deg,#ff8cc6,#ff3d9a); color:#fff; font-size:22px; text-shadow:0 2px 0 rgba(0,0,0,.2); box-shadow:0 4px 0 rgba(0,0,0,.14),0 8px 16px rgba(0,0,0,.2); }
.pill:active { transform:translateY(3px); }
.chipbtn { padding:10px 16px; border-radius:18px; border:4px solid #f0dca0; background:#fff; color:var(--ink); }
.chipbtn.on { background:#ffd447; border-color:#f5b800; }

/* ---------- Pantallas ---------- */
#app { min-height:100%; }
.screen { min-height:100vh; min-height:100dvh; position:relative; }
.corner { position:absolute; z-index:3; top:16px; }
.corner.l { left:16px; } .corner.r { right:16px; }

/* Inicio: morado con colinas */
.home { background:radial-gradient(circle at 20% 15%,#9d52ff 0,transparent 40%),radial-gradient(circle at 85% 80%,#ff4fa0 0,transparent 35%),linear-gradient(180deg,#5a1fc2,#8a3ef0); overflow:hidden; }
.home::before { content:""; position:absolute; inset:0; background-image:radial-gradient(circle,#fff7 2px,transparent 3px),radial-gradient(circle,#fff5 3px,transparent 4px); background-size:140px 140px,230px 230px; background-position:20px 30px,90px 110px; opacity:.55; pointer-events:none; }
.home::after { content:""; position:absolute; left:-10%; right:-10%; bottom:-80px; height:240px; background:radial-gradient(ellipse at 20% 100%,#4b149f 0 45%,transparent 46%),radial-gradient(ellipse at 70% 100%,#5d1fc0 0 40%,transparent 41%); pointer-events:none; }
.home .title { position:absolute; top:22px; left:50%; transform:translateX(-50%); margin:0; color:#fff; font-size:clamp(22px,4vw,38px); text-shadow:0 4px 0 rgba(0,0,0,.25); letter-spacing:1px; z-index:2; white-space:nowrap; }
.rail { position:absolute; left:0; right:0; top:110px; bottom:clamp(70px,15vh,150px); z-index:2; display:grid; grid-auto-flow:column; grid-template-rows:repeat(2,minmax(0,1fr)); grid-auto-columns:clamp(210px,26vw,330px); gap:22px; padding:10px 28px 18px; overflow-x:auto; scroll-snap-type:x proximity; align-content:center; }
.rail::-webkit-scrollbar { height:0; }
.mode { --bc:#f5a623; --tab:#e08b12; --lbl:#e08b12; position:relative; scroll-snap-align:start; display:flex; flex-direction:column; padding:0; border:8px solid var(--bc); border-radius:30px; background:var(--cream); box-shadow:0 8px 0 rgba(0,0,0,.18); min-height:0; overflow:visible; text-align:center; }
.mode::before { content:""; position:absolute; top:-18px; left:12%; right:12%; height:20px; border-radius:18px 18px 0 0; background:var(--tab); z-index:-1; }
.mode:active { transform:translateY(4px); }
.mode .pic { flex:1; min-height:0; margin:8px 8px 0; border-radius:18px; border:4px solid color-mix(in srgb,var(--bc) 35%,#fff); background:#fff; overflow:hidden; display:grid; place-items:center; }
.mode .pic img, .mode .pic canvas { width:100%; height:100%; object-fit:contain; display:block; }
.mode b { display:block; padding:8px 6px 4px; color:var(--lbl); font-size:clamp(14px,1.9vw,21px); text-transform:uppercase; letter-spacing:.5px; }
.mode small { display:block; padding:0 8px 10px; color:#8a7a50; font-weight:600; font-size:12px; }
.c1 { --bc:#5ccd3c; --tab:#3eae27; --lbl:#3eae27; background:#fff; } .c2 { --bc:#ff6fae; --tab:#e84a8f; --lbl:#e84a8f; } .c3 { --bc:#41b0ff; --tab:#1f8fe0; --lbl:#1f8fe0; } .c4 { --bc:#b57cff; --tab:#8f52e6; --lbl:#8f52e6; background:#fff; }

/* Galería: menta con tarjetas blancas */
.gal { background:radial-gradient(circle at 80% 10%,#c8ffe6 0,transparent 40%),linear-gradient(180deg,#8ff0c8,#a5f7d6); }
.gal .title { position:absolute; top:26px; left:50%; transform:translateX(-50%); margin:0; color:#1a8f6b; font-size:clamp(20px,3.4vw,32px); text-shadow:0 3px 0 #fff8; white-space:nowrap; }
.cats { position:absolute; top:104px; left:0; right:0; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding:0 16px; z-index:2; }
.cats .chipbtn { border-color:#1ec79a; }
.cats .chipbtn.on { background:#1ec79a; color:#fff; border-color:#13a47c; }
.grid { padding:150px 24px 36px; display:grid; grid-template-columns:repeat(auto-fill,minmax(clamp(150px,22vw,230px),1fr)); gap:22px; max-width:1100px; margin:0 auto; }
.gal.nocats .grid { padding-top:120px; }
.card { position:relative; padding:0; border:7px solid #1ec79a; border-radius:28px; background:#fff; box-shadow:0 6px 0 rgba(0,0,0,.12); overflow:visible; text-align:center; }
.card:active { transform:translateY(3px); }
.card .pic { margin:6px; border-radius:18px; overflow:hidden; border:4px solid #b9f3de; aspect-ratio:4/3; background:#fff; }
.card .pic img, .card .pic canvas { width:100%; height:100%; object-fit:cover; display:block; }
.card .cap { padding:2px 6px 10px; color:#16a47c; font-size:clamp(13px,1.6vw,18px); text-transform:uppercase; }
.card .done { position:absolute; right:-12px; bottom:-12px; width:46px; height:46px; display:grid; place-items:center; font-size:24px; background:linear-gradient(180deg,#ffe27a,#ffbf1f); clip-path:polygon(50% 0,62% 33%,98% 35%,70% 56%,80% 91%,50% 71%,20% 91%,30% 56%,2% 35%,38% 33%); }
.card .pct { position:absolute; left:10px; bottom:46px; padding:2px 10px; border-radius:12px; background:#ffffffd8; color:#16a47c; font-size:12px; }
.heart { position:absolute; top:-8px; right:-8px; width:44px; height:44px; padding:0; border-radius:50%; border:4px solid #fff; background:linear-gradient(180deg,#ff9acb,#ff3d9a); color:#fff; font-size:20px; box-shadow:0 3px 8px #0003; }
.empty { grid-column:1/-1; text-align:center; color:#1a8f6b; padding:40px 10px; }
.fav-view .grid { padding-top:120px; }

/* Juego inmersivo */
.game-screen { background:radial-gradient(circle at 50% 0,#fff 0,#f1f5ff 70%); }
.play { position:relative; height:100vh; height:100dvh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.stage-wrap { position:relative; width:min(calc(100vw - 210px),calc((100dvh - 28px) * 4 / 3)); aspect-ratio:4/3; background:#fff; border-radius:18px; overflow:hidden; touch-action:none; box-shadow:0 8px 30px #3a2a6b33; }
.stage-inner { width:100%; height:100%; transform-origin:0 0; }
canvas.view { width:100%; height:100%; display:block; cursor:crosshair; touch-action:none; }
.tl, .tr, .bl { position:absolute; z-index:5; display:flex; flex-direction:column; gap:16px; padding:16px; }
.tl { left:0; top:0; } .tr { right:0; top:0; } .bl { left:0; bottom:0; }
.bottomrow { position:absolute; z-index:5; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:10px; max-width:calc(100vw - 220px); overflow-x:auto; padding:6px; }
.prog.top { position:absolute; z-index:4; top:14px; left:50%; transform:translateX(-50%); width:min(34vw,380px); height:14px; border-radius:10px; background:#3a2a6b22; border:3px solid #fff; overflow:hidden; box-shadow:0 2px 6px #0002; }
#progbar { height:100%; width:0; background:linear-gradient(90deg,#ff5fa2,#ffd400,#22cc44,#00c2ff); transition:width .3s; }
.pop { position:absolute; inset:0; pointer-events:none; z-index:8; }
.pop > * { pointer-events:auto; }
.panel { position:absolute; right:112px; top:12px; width:min(350px,calc(100vw - 140px)); max-height:calc(100% - 24px); overflow:auto; background:#fff8e6; border:7px solid #f5d478; border-radius:30px; box-shadow:0 14px 40px #0004; padding:12px; display:flex; flex-direction:column; gap:10px; }
.panel.wide { width:min(640px,calc(100vw - 140px)); }
.trow { display:flex; align-items:center; gap:14px; width:100%; padding:10px 14px; border-radius:20px; border:0; background:#fffdf5; font-size:20px; text-align:left; color:var(--ink); }
.trow .em { font-size:38px; width:56px; text-align:center; }
.trow.on { background:#f6e0b0; box-shadow:inset 0 0 0 4px #f5b800; }
.panel label { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.panel input[type=range] { flex:1; accent-color:#8b5cf6; height:28px; }
.panel details { background:#fffdf5; border-radius:18px; padding:8px 12px; }
.panel summary { cursor:pointer; padding:4px 0; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.cgrid { display:grid; grid-template-columns:repeat(8,1fr); gap:9px; }
.cell { position:relative; aspect-ratio:1; border-radius:16px; border:3px solid #0002; padding:0; cursor:pointer; box-shadow:inset 0 -4px 0 #0002; }
.cell::after { content:""; position:absolute; top:5px; left:7px; width:30%; height:18%; border-radius:50%; background:#fff9; transform:rotate(-30deg); }
.cell.sel::before { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:26px; text-shadow:0 2px 3px #000a; z-index:1; }
.cell.rainbow { background:linear-gradient(135deg,#00c2ff 0 20%,#22cc44 20% 40%,#ffd400 40% 60%,#ff5fa2 60% 80%,#b66cff 80%); overflow:hidden; }
.cell.rainbow input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.numrow { display:flex; gap:10px; }
.num { width:62px; height:62px; border-radius:50%; border:5px solid #fff; display:grid; place-items:center; font-size:28px; color:#fff; text-shadow:0 2px 3px #0007; box-shadow:0 4px 0 #0002,0 6px 12px #0003; cursor:pointer; flex:none; }
.num.sel { outline:6px solid #ffd447; outline-offset:2px; transform:translateY(-6px); }
.hintbar { position:absolute; z-index:4; left:50%; bottom:92px; transform:translateX(-50%); background:#fffd; padding:6px 16px; border-radius:20px; font-size:14px; pointer-events:none; white-space:nowrap; }

/* Avisos y modales */
.toast { position:fixed; left:50%; bottom:30px; transform:translateX(-50%); background:#3a2a6b; color:#fff; padding:12px 22px; border-radius:30px; border:4px solid #fff; z-index:50; font-size:16px; }
.modal-bg { position:fixed; inset:0; background:#2b1260aa; display:flex; align-items:center; justify-content:center; z-index:40; padding:16px; }
.modal { background:#fff8e6; border:8px solid #f5d478; border-radius:32px; padding:20px; max-width:440px; width:100%; display:flex; flex-direction:column; gap:12px; box-shadow:0 20px 50px #0006; }
.modal h2 { margin:0; font-size:24px; text-align:center; color:#8f52e6; }
.modal p { margin:0; font-weight:600; }
.modal button { padding:10px 18px; border-radius:20px; border:4px solid #f0dca0; background:#fff; color:var(--ink); }
.modal button.on { background:linear-gradient(180deg,#86e872,#2fb34a); border-color:#fff; color:#fff; text-shadow:0 2px 0 #0003; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .row.end { justify-content:flex-end; }
.hint { opacity:.75; font-weight:600; }
.confetti { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:60; }
.confetti i { position:absolute; top:-20px; width:11px; height:17px; border-radius:3px; animation:fall linear forwards; }
@keyframes fall { to { transform:translateY(110vh) rotate(720deg); } }

/* Pantallas pequeñas */
@media (max-width:760px) {
  .gb { width:58px; height:58px; font-size:26px; border-width:4px; }
  .tl, .tr, .bl { padding:8px; gap:10px; }
  .stage-wrap { width:calc(100vw - 8px); }
  .panel { right:74px; top:8px; width:calc(100vw - 90px); } .panel.wide { width:calc(100vw - 90px); }
  .bottomrow { max-width:calc(100vw - 150px); } .num { width:48px; height:48px; font-size:22px; }
  .rail { grid-auto-columns:62vw; top:90px; } .pill { padding:8px 16px; font-size:16px; }
  .cgrid { grid-template-columns:repeat(6,1fr); }
}

/* ---------- Animaciones y mascota ---------- */
.screen { animation:fadein .25s ease; }
@keyframes fadein { from { opacity:0; } to { opacity:1; } }
@keyframes popin { from { transform:scale(.6); opacity:0; } to { transform:scale(1); opacity:1; } }
.mode { animation:popin .55s cubic-bezier(.2,1.5,.4,1) backwards; animation-delay:calc(var(--i,0) * 55ms); transition:transform .15s; }
.mode:hover { transform:translateY(-5px) rotate(-.7deg); }
.card { animation:popin .45s ease backwards; animation-delay:calc(var(--i,0) * 35ms); transition:transform .15s; }
.card:hover { transform:translateY(-4px) rotate(.5deg); }
.home::before { animation:drift 70s linear infinite; }
@keyframes drift { to { background-position:20px 590px,90px 950px; } }

.mascot { position:relative; display:inline-block; --ex:0; --ey:0; cursor:pointer; user-select:none; animation:bob 2.6s ease-in-out infinite; transform-origin:50% 100%; }
.m-svg { width:100%; height:100%; display:block; overflow:visible; }
.home .mascot { position:absolute; left:18px; bottom:4px; z-index:4; height:clamp(90px,18vh,170px); aspect-ratio:200/210; }
.m-pupil { transform:translate(calc(var(--ex) * 1px),calc(var(--ey) * 1px)); transition:transform .08s; }
.m-eyes { transform-origin:100px 88px; animation:blink 4.2s infinite; }
.mascot.jump { animation:jump .7s ease-out; }
.m-bubble { position:absolute; left:60%; bottom:92%; white-space:nowrap; background:#fff; color:var(--ink); padding:6px 14px; border-radius:18px; border:3px solid #f5d478; opacity:0; transform:scale(.6); transition:.2s; font-size:15px; pointer-events:none; box-shadow:0 4px 10px #0003; }
.m-bubble.show { opacity:1; transform:scale(1); }
.cheer .m-arm.l { transform-origin:46px 130px; animation:armL .45s ease-in-out infinite alternate; }
.cheer .m-arm.r { transform-origin:154px 130px; animation:armR .45s ease-in-out infinite alternate; }
.cheer-pop { position:fixed; left:50%; top:50%; width:min(52vw,260px); aspect-ratio:200/210; transform:translate(-50%,-50%); z-index:70; pointer-events:none; animation:cheerIn .45s cubic-bezier(.2,1.6,.4,1) both, cheerOut .4s 2.2s forwards; }
.cheer-pop .mascot { width:100%; height:100%; animation:bob .6s ease-in-out infinite; }
.cheer-pop .m-bubble { left:50%; bottom:100%; transform:translateX(-50%) scale(1); font-size:20px; }
@keyframes bob { 0%,100% { transform:translateY(0) scale(1,1); } 50% { transform:translateY(-4px) scale(1.015,.985); } }
@keyframes blink { 0%,94%,100% { transform:scaleY(1); } 96.5% { transform:scaleY(.08); } }
@keyframes jump { 0% { transform:translateY(0) scale(1.12,.84); } 35% { transform:translateY(-36px) scale(.92,1.1); } 70% { transform:translateY(0) scale(1.1,.88); } 100% { transform:translateY(0) scale(1); } }
@keyframes armL { from { transform:rotate(0); } to { transform:rotate(-150deg); } }
@keyframes armR { from { transform:rotate(0); } to { transform:rotate(150deg); } }
@keyframes cheerIn { from { transform:translate(-50%,-30%) scale(.3); opacity:0; } to { transform:translate(-50%,-50%) scale(1); opacity:1; } }
@keyframes cheerOut { to { opacity:0; transform:translate(-50%,-70%) scale(.8); } }

.bfly { position:absolute; z-index:3; width:56px; height:46px; top:16%; left:-80px; animation:fly 18s linear infinite; cursor:pointer; filter:drop-shadow(0 3px 3px #0004); }
.bfly svg { width:100%; height:100%; overflow:visible; }
.bfly .wl, .bfly .wr { animation:flap .16s ease-in-out infinite alternate; }
.bfly .wl { transform-origin:30px 25px; } .bfly .wr { transform-origin:30px 25px; animation-name:flap2; }
@keyframes flap { from { transform:scaleX(1); } to { transform:scaleX(.25); } }
@keyframes flap2 { from { transform:scaleX(1); } to { transform:scaleX(.25); } }
@keyframes fly { 0% { transform:translate(0,0) rotate(8deg); } 25% { transform:translate(30vw,-30px) rotate(-6deg); } 50% { transform:translate(55vw,50px) rotate(10deg); } 75% { transform:translate(85vw,-24px) rotate(-8deg); } 100% { transform:translate(115vw,24px) rotate(6deg); } }
.spk { position:fixed; z-index:80; pointer-events:none; font-size:20px; animation:spk .9s ease-out forwards; }
@keyframes spk { to { transform:translate(var(--dx),var(--dy)) scale(.4); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .bfly, .home::before, .mascot, .m-eyes { animation:none !important; } .mode, .card, .screen { animation-duration:.01s !important; } }

.texgrid { display:grid; grid-template-columns:repeat(8,1fr); gap:6px; max-height:118px; overflow:auto; padding:4px; background:#fffdf5; border-radius:16px; }
.tex { aspect-ratio:1; border-radius:12px; border:3px solid #0002; padding:0; background-size:cover; background-position:center; cursor:pointer; }
.tex.sel { outline:4px solid #ffd447; outline-offset:1px; }

/* Animación final */
.play.final .tr, .play.final .bl, .play.final .prog.top, .play.final .numrow, .play.final .hintbar { display:none; }
.play.final .stage-wrap { box-shadow:0 0 0 7px #ffd447, 0 16px 50px rgba(255,190,0,.55); }
.stage-wrap.jelly { animation:jelly .8s ease-out; transform-origin:50% 60%; }
@keyframes jelly { 0% { transform:scale(1,1); } 18% { transform:scale(1.1,.9); } 38% { transform:scale(.93,1.08); } 58% { transform:scale(1.05,.96); } 78% { transform:scale(.98,1.02); } 100% { transform:scale(1,1); } }
.final-actions { position:absolute; z-index:6; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:18px; }

/* Álbum */
.corner.l2 { left:104px; }
.gb .cnt { position:absolute; right:-6px; bottom:-6px; min-width:26px; height:26px; padding:0 6px; border-radius:13px; background:#ff3d9a; border:3px solid #fff; color:#fff; font-size:14px; line-height:20px; text-align:center; text-shadow:none; }
.album { background:radial-gradient(circle at 20% 10%,#ffe9a8 0,transparent 40%),linear-gradient(180deg,#ffd6ec,#d8c9ff); }
.album .title { color:#8f3dd1; text-shadow:0 3px 0 #fff8; }
.album .card { border-color:#b57cff; }
.album .card .cap { color:#8f52e6; }
.album .card .pic { border-color:#e5d3ff; }
.card.locked .pic { position:relative; }
.card.locked .pic canvas { filter:grayscale(1) contrast(.55) brightness(1.12); opacity:.55; }
.card.locked .pic::after { content:"🔒"; position:absolute; inset:0; display:grid; place-items:center; font-size:44px; text-shadow:0 3px 8px #fff; }
.card.locked .cap { opacity:.6; }
.card .pic img.alive { animation:breathe 3.2s ease-in-out infinite; transform-origin:50% 90%; }
@keyframes breathe { 0%,100% { transform:scale(1,1); } 50% { transform:scale(1.035,.965); } }
.card.jelly { animation:jelly .8s ease-out; }
.newbadge { position:absolute; z-index:7; top:22px; left:50%; transform:translate(-50%,-30px) scale(.6); opacity:0; padding:10px 22px; border-radius:30px; background:linear-gradient(180deg,#ffe27a,#ffbf1f); border:5px solid #fff; color:#7a4a00; font-size:20px; box-shadow:0 6px 16px #0004; transition:all .45s cubic-bezier(.2,1.6,.4,1); }
.newbadge.show { opacity:1; transform:translate(-50%,0) scale(1); }

/* Colecciones y temporadas */
.card.cc .cap { color:#6a3fb0; }
.card.cc .pct { left:auto; right:12px; bottom:50px; background:#fffe; }
.ribbon { position:absolute; left:-8px; top:14px; padding:4px 14px 4px 12px; background:linear-gradient(180deg,#ff9acb,#ff3d9a); color:#fff; font-size:13px; border-radius:0 14px 14px 0; box-shadow:0 3px 8px #0003; z-index:2; }
.screen.coll .title { color:#4a2d8a; text-shadow:0 3px 0 #fff8; }
.card.lockedi .pic { filter:grayscale(.7) brightness(.92); }
.card.lockedi .done { background:linear-gradient(180deg,#ffe27a,#ffbf1f); }
.cell.lockedc { filter:saturate(.35) brightness(1.05); }
.cell.lockedc::before { content:"🔒"; position:absolute; inset:0; display:grid; place-items:center; font-size:20px; z-index:1; }
.decor { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.fl { position:absolute; opacity:.85; animation:flit 12s linear infinite; }
.fl.xmas { animation-name:snowfall; top:-10% !important; }
@keyframes flit { 0% { transform:translate(0,0) rotate(-6deg); } 25% { transform:translate(60px,-30px) rotate(8deg); } 50% { transform:translate(120px,18px) rotate(-8deg); } 75% { transform:translate(60px,-12px) rotate(6deg); } 100% { transform:translate(0,0) rotate(-6deg); } }
@keyframes snowfall { 0% { transform:translate(0,-5vh) rotate(0); } 50% { transform:translate(30px,55vh) rotate(180deg); } 100% { transform:translate(-20px,110vh) rotate(360deg); } }
.season-halloween { background:radial-gradient(circle at 85% 12%,#ff9a3c 0,transparent 26%),radial-gradient(circle at 12% 80%,#a24bff 0,transparent 40%),linear-gradient(180deg,#2b0f5c,#4a1a86 55%,#7a2f6a); }
.season-xmas { background:radial-gradient(circle at 15% 12%,#ffffff55 0,transparent 30%),linear-gradient(180deg,#123a78,#2a63b8 58%,#b4404e); }
.season-easter { background:radial-gradient(circle at 80% 10%,#fff6b0 0,transparent 32%),linear-gradient(180deg,#ffc9e6,#fff2b8 55%,#c4f0bd); }
.season-easter .title { color:#e0559a; text-shadow:0 4px 0 #fff9; }
.season-easter::before, .season-xmas::before { opacity:.35; }

/* Oso polar del modo Estrellas */
.bear { position:absolute; left:1.5%; bottom:1%; width:24%; aspect-ratio:1; z-index:3; cursor:pointer; filter:drop-shadow(0 4px 6px #0007); touch-action:none; }

/* Pantalla del personaje animado */
.screen.puppet { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:16px; }
.screen.puppet .title { position:static; transform:none; color:#4a2d8a; text-shadow:0 3px 0 #fff8; margin:0; }
.pstage { width:min(96vw,calc((100dvh - 170px) * 4 / 3)); aspect-ratio:4/3; border-radius:26px; border:8px solid #fff; box-shadow:0 12px 36px #3a2a6b44; background:#fff; touch-action:none; cursor:pointer; }
.hintbar.static { position:static; transform:none; pointer-events:none; }