/* Cada dia contigo - estilo Pou cuqui. Dos pieles segun la hora real de Madrid: DIA = pastel calido (por defecto), NOCHE = "Anochecer calido" (.night en ). Paleta de Nut: crema (pecho), ambar (ojos), rosa (amor), ciruela (noche). */ @font-face { font-family: 'Fredoka'; src: url('assets/fonts/fredoka-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Fredoka'; src: url('assets/fonts/fredoka-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Fredoka'; src: url('assets/fonts/fredoka-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Caveat'; src: url('assets/fonts/caveat-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } :root { /* --- DIA (pastel) --- */ --bg: #f4e2c4; --bg2: #fff5e6; --surface: #fffaf2; --surface-2: #fbecd5; --cream: #fff6e6; --amber: #ef9f2c; --amber-2: #db8417; --rose: #ec7ba0; --ink: #4b3640; --muted: #9a8590; --track: rgba(75,54,64,.14); --hi: rgba(255,255,255,.9); --btn-edge: rgba(150,108,78,.30); --btn-soft: rgba(150,108,78,.20); --line: rgba(75,54,64,.10); --navbg: rgba(255,255,255,.62); --navborder: rgba(75,54,64,.08); --scrim: rgba(60,40,45,.5); --nutshadow: rgba(90,60,50,.30); --glow: rgba(244,171,62,.28); --c-comida: #f0a35a; --c-agua: #5fb0e8; --c-mimos: #ec8aa8; --c-energia: #f1bf3a; --c-juego: #6cc78c; --c-aseo: #ab8fe0; /* diorama */ --sky1: #bfe3f5; --sky2: #eaf7fd; --frame: rgba(120,84,60,.55); --frametext: #6b4a36; --floorband: rgba(120,84,60,.10); --scene: rgba(75,54,64,.16); --scene-2: rgba(255,255,255,.55); --font-display: 'Fredoka', 'SF Pro Rounded', 'Nunito', system-ui, sans-serif; --font-hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive; --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } .night { /* --- NOCHE (anochecer) --- */ --bg: #1b1326; --bg2: #251a33; --surface: #2c2238; --surface-2: #372a45; --cream: #faecd1; --amber: #f4ab3e; --amber-2: #e2891c; --rose: #ec8aa8; --ink: #f7efe6; --muted: #b6a8c6; --track: rgba(255,255,255,.12); --hi: rgba(255,255,255,.10); --btn-edge: rgba(0,0,0,.42); --btn-soft: rgba(0,0,0,.34); --line: rgba(255,255,255,.08); --navbg: rgba(0,0,0,.28); --navborder: rgba(255,255,255,.07); --scrim: rgba(15,9,22,.78); --nutshadow: rgba(0,0,0,.55); --glow: rgba(244,171,62,.32); --c-energia: #f2c84b; --c-juego: #7fce9e; --c-aseo: #b59be6; --sky1: #2a2150; --sky2: #3b2c5c; --frame: rgba(250,236,209,.5); --frametext: #faecd1; --floorband: rgba(0,0,0,.20); --scene: rgba(255,255,255,.14); --scene-2: rgba(255,255,255,.07); } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; color: var(--ink); font-family: var(--font-body); overscroll-behavior: none; transition: background .5s ease, color .4s ease; background: radial-gradient(1200px 520px at 50% -8%, var(--bg2) 0%, transparent 62%), linear-gradient(180deg, var(--bg2) 0%, var(--bg) 64%); } h1, h2 { font-family: var(--font-display); } button { font-family: var(--font-display); cursor: pointer; border: none; color: inherit; } button:active { transform: scale(.96); } :focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; } img { -webkit-user-drag: none; } /* --- Puerta de PIN --- */ .gate { max-width: 460px; margin: 0 auto; padding: 22px 18px; display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; min-height: 100vh; text-align: center; } .gate h1 { font-size: 2.1rem; font-weight: 700; margin: 0; letter-spacing: -.5px; } .gate h1::before { content: "🐾"; display: block; font-size: 2.4rem; margin-bottom: 6px; } .gate p { color: var(--muted); margin: 0; } .gate input { font-size: 1.5rem; text-align: center; letter-spacing: .3em; font-family: var(--font-display); padding: 14px; border-radius: 18px; border: none; width: 220px; max-width: 80vw; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px var(--btn-soft); } .error { color: #e06262; font-size: .9rem; } .night .error { color: #ffb3b3; } #pin-btn, .lvl-close, .btn-amber { background: linear-gradient(180deg, var(--amber), var(--amber-2)); color: #3a2208; font-weight: 700; padding: 12px 26px; border-radius: 16px; font-size: 1rem; box-shadow: 0 6px 0 var(--btn-edge), 0 10px 20px var(--btn-soft), inset 0 2px 0 rgba(255,255,255,.4); } #pin-btn:active, .lvl-close:active, .btn-amber:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--btn-edge), 0 4px 10px var(--btn-soft); } /* --- Shell del juego (pantalla completa) --- */ .app-game { position: fixed; inset: 0; } .game { display: flex; flex-direction: column; width: 100%; max-width: 480px; height: 100%; margin: 0 auto; user-select: none; -webkit-user-select: none; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); } .topbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; } .tb-level { flex: 1; display: flex; align-items: center; gap: 8px; } .tb-lv { font-family: var(--font-display); font-weight: 700; color: var(--amber); font-size: .85rem; white-space: nowrap; } .tb-xp { flex: 1; max-width: 130px; height: 9px; background: var(--track); border-radius: 6px; overflow: hidden; } .tb-xp i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--amber-2), var(--amber)); transition: width .5s cubic-bezier(.2,.8,.2,1); } .tb-right { display: flex; align-items: center; gap: 8px; } .tb-chip { font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--ink); padding: 5px 11px; border-radius: 16px; background: var(--track); box-shadow: inset 0 1px 0 var(--hi); } .tb-streak { background: rgba(236,123,160,.18); } .tb-coins { background: rgba(239,159,44,.20); } .tb-shop { background: var(--surface); width: 40px; height: 40px; border-radius: 14px; box-shadow: 0 4px 0 var(--btn-edge), 0 7px 14px var(--btn-soft), inset 0 2px 0 var(--hi); } .tb-shop:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-edge); } .room { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; position: relative; transition: background .45s ease; background: linear-gradient(180deg, var(--r1), var(--r2)); } .room[data-room="cocina"] { --r1: #ffe7c6; --r2: #ffd6ad; --rug: #f3c79a; } .room[data-room="aseo"] { --r1: #d6f0f2; --r2: #bfe6ee; --rug: #a8dbe6; } .room[data-room="dormir"] { --r1: #ddd6f4; --r2: #cabfee; --rug: #b9a9e6; } .room[data-room="juegos"] { --r1: #d7f0d8; --r2: #c1e7c6; --rug: #a9dcb1; } .room[data-room="nut"] { --r1: #ffe9cc; --r2: #ffdcc0; --rug: #f0bfc9; } .night .room[data-room="cocina"] { --r1: #3a2a22; --r2: #221925; --rug: rgba(240,163,90,.18); } .night .room[data-room="aseo"] { --r1: #1f3038; --r2: #182430; --rug: rgba(95,176,232,.16); } .night .room[data-room="dormir"] { --r1: #191430; --r2: #110d20; --rug: rgba(181,155,230,.16); } .night .room[data-room="juegos"] { --r1: #1f3326; --r2: #15231b; --rug: rgba(127,206,158,.16); } .night .room[data-room="nut"] { --r1: #2a1f38; --r2: #1b1326; --rug: rgba(236,138,168,.16); } .room-content { flex: 0 0 auto; padding: 8px 14px 0; overflow-y: auto; max-height: 40%; position: relative; z-index: 8; } .room-title { font-family: var(--font-display); font-weight: 700; text-align: center; margin: 4px 0 8px; } .greet { text-align: center; margin-bottom: 8px; } .greet-count { margin: 0; color: var(--muted); font-size: .85rem; } .greet-count b { font-family: var(--font-display); color: var(--amber); font-size: 1.1rem; } .greet-foto { width: 100%; max-height: 120px; object-fit: cover; border-radius: 16px; margin: 8px 0; box-shadow: 0 6px 16px var(--btn-soft); } .greet-frase { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; line-height: 1.35; margin: 6px 4px; } .wish { font-size: .85rem; color: var(--ink); margin: 4px 0 0; } .wish b { font-family: var(--font-display); } .room-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; max-width: 340px; margin: 6px auto 0; font-size: .76rem; color: var(--muted); } .room[data-room="aseo"] .room-stats, .room[data-room="dormir"] .room-stats, .room[data-room="juegos"] .room-stats { grid-template-columns: 1fr; max-width: 240px; } .stat { display: flex; align-items: center; gap: 7px; } .stat-bar { flex: 1; height: 10px; background: var(--track); border-radius: 6px; overflow: hidden; box-shadow: inset 0 1px 2px var(--btn-soft); } .stat-bar i { display: block; height: 100%; border-radius: 6px; transition: width .35s ease; background: var(--amber); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); } .stat[data-k="comida"] .stat-bar i { background: var(--c-comida); } .stat[data-k="agua"] .stat-bar i { background: var(--c-agua); } .stat[data-k="mimos"] .stat-bar i { background: var(--c-mimos); } .stat[data-k="energia"] .stat-bar i { background: var(--c-energia); } .stat[data-k="juego"] .stat-bar i { background: var(--c-juego); } .stat[data-k="aseo"] .stat-bar i { background: var(--c-aseo); } .stage-wrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .playground { position: relative; flex: 1 1 auto; width: 100%; min-height: 0; overflow: hidden; } .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, transparent, var(--floorband)); pointer-events: none; } .nut-shadow { position: absolute; top: 0; left: 0; width: 80px; height: 16px; border-radius: 50%; background: radial-gradient(ellipse at center, var(--nutshadow), transparent 72%); pointer-events: none; z-index: 2; } .nut { position: absolute; top: 0; left: 0; width: min(48vw, 172px); height: min(48vw, 172px); z-index: 3; cursor: grab; touch-action: none; will-change: transform; } .nut:active { cursor: grabbing; } .nut::before { content: ''; position: absolute; inset: -14%; background: radial-gradient(circle at 50% 46%, var(--glow), transparent 64%); z-index: -1; pointer-events: none; } .nut-flip { position: absolute; inset: 0; } .nut-img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; animation: nutFloat 3.4s ease-in-out infinite; transform-origin: 50% 92%; } .nut.land .nut-img { animation: landsquash .2s ease; } @keyframes landsquash { 0% { transform: scaleY(.82) scaleX(1.12); } 60% { transform: scaleY(1.05) scaleX(.96); } 100% { transform: scale(1); } } @keyframes nutFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.025); } } .nut.boop .nut-img { animation: boop .42s ease; } @keyframes boop { 0% { transform: scale(1) rotate(0); } 30% { transform: scale(1.12) rotate(-5deg); } 60% { transform: scale(1.06) rotate(4deg); } 100% { transform: scale(1) rotate(0); } } .acc-overlay { position: absolute; top: -8%; left: 50%; transform: translateX(-50%); font-size: 30px; z-index: 4; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); } .nut-mute { position: absolute; top: 8px; right: 8px; z-index: 9; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 var(--btn-edge), 0 5px 12px var(--btn-soft); } .nut-mute svg { display: block; } .nut-fx { position: absolute; inset: 0; pointer-events: none; } .nut-fx.hearts span { position: absolute; bottom: 16%; font-size: 24px; opacity: 0; color: var(--rose); animation: floatHeart 1.6s ease-out infinite; } .nut-fx.hearts span:nth-child(1) { left: 30%; } .nut-fx.hearts span:nth-child(2) { left: 50%; animation-delay: .4s; } .nut-fx.hearts span:nth-child(3) { left: 68%; animation-delay: .8s; } @keyframes floatHeart { 0% { transform: translateY(0) scale(.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-110px) scale(1.1); opacity: 0; } } .nut-mood { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin: 10px 0 6px; min-height: 1.2em; text-align: center; } .room-actions { flex: 0 0 auto; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 6px 10px 10px; position: relative; z-index: 8; } .act-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 62px; padding: 10px 9px; background: var(--surface); color: var(--ink); border-radius: 20px; box-shadow: 0 5px 0 var(--btn-edge), 0 9px 16px var(--btn-soft), inset 0 2px 0 var(--hi); transition: transform .1s, box-shadow .1s; } .act-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--btn-edge), 0 3px 8px var(--btn-soft); } .act-btn span { font-family: var(--font-display); font-size: .62rem; font-weight: 600; color: var(--muted); } .g-lv { font-family: var(--font-display); font-size: .5rem; font-weight: 700; color: var(--amber); background: var(--track); padding: 0 5px; border-radius: 7px; margin-top: 1px; line-height: 1.5; } .act-btn.wanted { box-shadow: 0 5px 0 var(--btn-edge), 0 0 0 2px var(--amber), 0 0 18px var(--glow); animation: wantPulse 1.3s ease-in-out infinite; } @keyframes wantPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } } .bottomnav { flex: 0 0 auto; display: flex; background: var(--navbg); backdrop-filter: blur(10px); border-top: 1px solid var(--navborder); box-shadow: 0 -4px 16px var(--btn-soft); } .nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 2px; background: transparent; color: var(--muted); position: relative; transition: color .2s, transform .12s; } .nav-btn span { font-family: var(--font-display); font-size: .6rem; font-weight: 600; } .nav-btn.active { color: var(--amber); } .nav-btn.active .nav-ic { transform: translateY(-2px) scale(1.08); } .nav-ic { transition: transform .18s cubic-bezier(.2,.9,.3,1.3); } .nav-btn.active::after { content: ''; position: absolute; bottom: 3px; width: 18px; height: 3px; border-radius: 3px; background: var(--amber); } .nav-btn.alert::before { content: ''; position: absolute; top: 7px; right: 26%; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--glow); animation: wantPulse 1.2s ease-in-out infinite; } /* --- Efectos (juice) --- */ .fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; } .fx-pop { position: absolute; top: 30%; left: 40%; font-family: var(--font-display); font-weight: 700; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); animation: fxpop 1.1s ease-out forwards; } @keyframes fxpop { 0% { opacity: 0; transform: translateY(0) scale(.7); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px) scale(1.12); } } .fx-particle { position: absolute; left: 50%; top: 45%; font-size: 22px; animation: fxpart .9s ease-out forwards; } @keyframes fxpart { 0% { opacity: 0; transform: translate(0,0) scale(.5); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1); } } .fx-confetti { position: fixed; top: -12px; width: 10px; height: 10px; border-radius: 50%; z-index: 90; animation: fxconf var(--dur, 1.6s) cubic-bezier(.3,.5,.5,1) forwards; } @keyframes fxconf { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: .85; transform: translateY(104vh) rotate(var(--rot, 360deg)); } } /* --- Overlays --- */ .nut-overlay { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 18px; z-index: 60; animation: fadeIn .2s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .lvl-card { background: linear-gradient(180deg, var(--surface), var(--surface-2)); color: var(--ink); border-radius: 26px; padding: 22px; max-width: 360px; width: 100%; text-align: center; box-shadow: 0 22px 60px var(--btn-soft), inset 0 2px 0 var(--hi); animation: cardIn .35s cubic-bezier(.2,.9,.3,1.2); } .lvl-card.panel { max-height: 84vh; overflow: auto; } .lvl-big { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; margin: 0 0 6px; } .lvl-sub { color: var(--muted); font-size: .86rem; margin: 0 0 14px; } .lvl-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .lvl-btns .lvl-close { background: var(--track); color: var(--ink); box-shadow: 0 4px 0 var(--btn-edge); } .lvl-btns .lvl-close:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-edge); } .lvl-mem { margin-bottom: 16px; } @keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } } .gal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; margin: 6px 0 16px; } .ach-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; text-align: left; } .ach { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-radius: 14px; background: var(--track); font-size: .9rem; font-weight: 600; } .ach-ic { line-height: 0; display: inline-flex; flex: none; } .ach.got { background: rgba(244,171,62,.18); } .ach.locked { color: var(--muted); font-weight: 500; } /* --- Recuerdos: scrapbook (polaroids + cinta washi + manuscrita) --- */ .polaroid { background: #fffdf8; padding: 9px 9px 0; border-radius: 6px; box-shadow: 0 8px 18px rgba(60,40,30,.32); position: relative; transform: rotate(-2deg); } .polaroid::before { content: ''; position: absolute; top: -9px; left: 50%; width: 54px; height: 20px; transform: translateX(-50%) rotate(-4deg); background: rgba(244,171,62,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); border-radius: 2px; } .polaroid .mem-photo { width: 100%; display: block; border-radius: 2px; } .polaroid .mem-frase { font-family: var(--font-hand); font-size: 1.5rem; line-height: 1.1; color: #4a3328; margin: 0; padding: 6px 4px 4px; min-height: 2.4em; display: flex; align-items: center; justify-content: center; text-align: center; } .polaroid .cap { font-family: var(--font-hand); font-size: 1.15rem; color: #6b4a36; text-align: center; padding: 5px 2px 8px; margin: 0; } .gal-item:nth-child(even) .polaroid { transform: rotate(2.4deg); } .gal-item:nth-child(3n) .polaroid { transform: rotate(-3deg); } .lvl-mem .polaroid { transform: rotate(-1.5deg); margin: 0 auto; max-width: 260px; } .shop-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .shop-item { display: flex; align-items: center; gap: 10px; background: var(--track); border-radius: 14px; padding: 9px 12px; box-shadow: inset 0 1px 0 var(--hi); } .shop-l { flex: 1; text-align: left; font-weight: 600; } .shop-item button { background: linear-gradient(180deg, var(--amber), var(--amber-2)); color: #3a2208; font-weight: 700; padding: 8px 14px; border-radius: 13px; font-size: .82rem; box-shadow: 0 4px 0 var(--btn-edge), inset 0 1px 0 rgba(255,255,255,.4); } .shop-item button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-edge); } .mg { display: flex; flex-direction: column; gap: 10px; } .mg-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: .95rem; } .mg-sc svg, .mg-top svg { vertical-align: -3px; } .mg-combo { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--amber); opacity: 0; transform: scale(.6); transition: opacity .15s; } .mg-combo.show { opacity: 1; transform: scale(1); } .mg-combo.pulse { animation: comboPulse .3s ease; } @keyframes comboPulse { 0% { transform: scale(1.45); } 100% { transform: scale(1); } } .mg-level { text-align: center; margin: -4px 0 0; color: var(--muted); font-size: .82rem; } .mg-level b { font-family: var(--font-display); color: var(--amber); } .mg-level.reached .mg-target { color: #45ad72; } .mg-level.reached .mg-target::after { content: ' ✓'; } .mg-hint { color: var(--muted); font-size: .8rem; text-align: center; margin: 0; } .mg-area { position: relative; height: 46vh; max-height: 340px; background: linear-gradient(180deg, var(--track), transparent); border-radius: 18px; overflow: hidden; box-shadow: inset 0 2px 10px var(--btn-soft); } .mg-item { position: absolute; top: -14%; background: transparent; padding: 4px; animation: mgfall linear forwards; filter: drop-shadow(0 3px 4px rgba(0,0,0,.22)); } .mg-item svg, .mg-balloon svg, .mg-mole svg { display: block; } .mg-item:active, .mg-balloon:active { transform: scale(.9); } .mg-gold { filter: drop-shadow(0 0 8px rgba(244,194,90,.9)); } @keyframes mgfall { to { top: 114%; } } .mg-balloon { position: absolute; bottom: -18%; background: transparent; animation: balloonUp linear forwards; filter: drop-shadow(0 3px 5px rgba(0,0,0,.22)); } @keyframes balloonUp { to { bottom: 118%; } } .mg-fuse { position: absolute; top: 1px; left: 50%; width: 3px; height: 8px; background: #d98a4e; transform: translateX(-50%) rotate(12deg); border-radius: 2px; } .mg-fuse::after { content: ''; position: absolute; top: -4px; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 6px #ff7a3c; animation: wantPulse .5s infinite; } .mg-float { position: absolute; transform: translate(-50%,-50%); font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.5); pointer-events: none; animation: mgFloat .76s ease-out forwards; z-index: 5; } .mg-float.gold { color: #ffe08a; } .mg-float.bad { color: #ff9a9a; } @keyframes mgFloat { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-150%) scale(1.1); } } .mg-spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #ffd86b; transform: translate(-50%,-50%); pointer-events: none; animation: mgSpark .6s ease-out forwards; z-index: 5; } @keyframes mgSpark { 0% { opacity: 1; transform: translate(-50%,-50%); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.4); } } .mg-holes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 6px; } .mg-hole { position: relative; aspect-ratio: 1; border-radius: 50% 50% 46% 46%; background: radial-gradient(120% 80% at 50% 18%, var(--surface-2), var(--track)); box-shadow: inset 0 -6px 10px var(--btn-soft); overflow: hidden; } .mg-hole::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 9%; height: 26%; border-radius: 50%; background: rgba(0,0,0,.16); } .mg-mole { position: absolute; left: 50%; bottom: 14%; transform: translate(-50%, 128%); transition: transform .13s cubic-bezier(.3,.8,.4,1.2); will-change: transform; } .mg-hole.up .mg-mole { transform: translate(-50%, 0); } .mg-mole svg { filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); } .mg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; perspective: 700px; } .mg-grid-5 { grid-template-columns: repeat(5, 1fr); gap: 6px; } .mg-card { position: relative; aspect-ratio: 3/4; background: transparent; padding: 0; } .mg-cardin { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .42s cubic-bezier(.2,.8,.3,1.15); } .mg-card.flipped .mg-cardin { transform: rotateY(180deg); } .mg-card.bad .mg-cardin { animation: mgshake .34s; } @keyframes mgshake { 0%,100% { transform: rotateY(180deg) translateX(0); } 25% { transform: rotateY(180deg) translateX(-5px); } 75% { transform: rotateY(180deg) translateX(5px); } } .mg-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 13px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 4px 0 var(--btn-edge), inset 0 2px 0 rgba(255,255,255,.3); } .mg-back { background: linear-gradient(160deg, var(--amber), var(--amber-2)); } .mg-front { background: var(--cream); transform: rotateY(180deg); } .mg-card.matched .mg-front { box-shadow: 0 0 0 2px var(--amber), 0 3px 0 var(--btn-edge); } .mg-pads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 240px; margin: 10px auto; } .mg-pad { aspect-ratio: 1; border-radius: 20px; opacity: .5; transition: opacity .1s, transform .1s; box-shadow: 0 5px 0 var(--btn-edge), inset 0 2px 0 rgba(255,255,255,.3); } .mg-pad.on { opacity: 1; transform: scale(1.06); box-shadow: 0 5px 0 var(--btn-edge), 0 0 22px currentColor; } .pad-a { background: var(--c-juego); color: var(--c-juego); } .pad-b { background: var(--c-agua); color: var(--c-agua); } .pad-c { background: var(--c-mimos); color: var(--c-mimos); } .pad-d { background: var(--c-energia); color: var(--c-energia); } /* tornillos (screw sort) */ .sw-game { gap: 8px; } .sw-status { text-align: center; margin: 0; color: var(--muted); font-size: .82rem; } .sw-status b { font-family: var(--font-display); color: var(--amber); } .sw-boxes { display: flex; gap: 6px; justify-content: center; } .sw-box { display: flex; flex-direction: column; align-items: center; gap: 2px; } .sw-handle { width: 24px; height: 7px; border-radius: 5px 5px 0 0; background: var(--c); } .sw-bin { display: flex; gap: 3px; padding: 5px; border-radius: 5px 9px 12px 12px; background: #fffdf8; box-shadow: 0 3px 0 var(--btn-edge), inset 0 0 0 2px var(--c); } .sw-box.empty .sw-handle { opacity: .35; } .sw-box.empty .sw-bin { opacity: .5; box-shadow: 0 3px 0 var(--btn-edge); } .sw-slot { width: 18px; height: 18px; border-radius: 50%; background: #e7dcc6; display: flex; align-items: center; justify-content: center; } .sw-slot svg { display: block; } .sw-queue { display: flex; gap: 4px; justify-content: center; align-items: center; min-height: 11px; margin-top: 1px; } .sw-qdot { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 -1px 1px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.12); } .sw-tray { display: flex; gap: 6px; justify-content: center; padding: 6px 12px; margin: 3px auto 0; border-radius: 14px; background: linear-gradient(180deg, #caa56e, #a9824f); box-shadow: inset 0 2px 6px rgba(0,0,0,.32); } .sw-tslot { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.28); display: flex; align-items: center; justify-content: center; } .sw-tslot svg { display: block; } .sw-tray.full { animation: trayWarn .4s ease 3; } @keyframes trayWarn { 0%,100% { box-shadow: inset 0 2px 6px rgba(0,0,0,.32); } 50% { box-shadow: 0 0 0 3px #e0655f, inset 0 2px 6px rgba(0,0,0,.32); } } .sw-board { position: relative; height: 42vh; max-height: 340px; border-radius: 18px; overflow: hidden; background: linear-gradient(160deg, rgba(201,163,106,.22), rgba(138,102,52,.22)); box-shadow: inset 0 2px 10px var(--btn-soft); } .sw-panel { position: absolute; pointer-events: none; filter: drop-shadow(0 4px 7px rgba(0,0,0,.2)); } .sw-shape { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; } .sw-screw { position: absolute; transform: translate(-50%, -50%); background: transparent; padding: 0; line-height: 0; pointer-events: auto; filter: drop-shadow(0 2px 2px rgba(0,0,0,.32)); transition: opacity .15s; } .sw-screw svg { display: block; } .sw-screw:active { transform: translate(-50%, -50%) scale(.84); } .sw-screw.locked { opacity: .4; filter: none; } .nut-toast { position: fixed; left: 0; right: 0; bottom: 80px; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 70; pointer-events: none; } .toast { font-family: var(--font-display); background: linear-gradient(180deg, var(--surface), var(--surface-2)); color: var(--ink); padding: 9px 18px; border-radius: 22px; font-size: .86rem; font-weight: 700; box-shadow: 0 8px 22px var(--btn-soft), inset 0 1px 0 var(--hi); animation: toastIn .3s ease, toastOut .4s ease 2.2s forwards; } @keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } } .poop { position: absolute; bottom: 4%; width: 46px; height: 46px; background: transparent; z-index: 4; animation: poopIn .3s ease; } @keyframes poopIn { from { transform: translateY(-14px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } .nut.dirty::after { content: ''; position: absolute; inset: 14%; z-index: 2; pointer-events: none; background: radial-gradient(circle at 32% 58%, rgba(110,80,38,.55) 0 5px, transparent 6px), radial-gradient(circle at 62% 40%, rgba(110,80,38,.5) 0 4px, transparent 5px), radial-gradient(circle at 52% 72%, rgba(110,80,38,.5) 0 5px, transparent 6px); } .food-hint { text-align: center; color: var(--muted); font-size: .8rem; margin: 8px 0 4px; } .food-tray { display: flex; gap: 12px; justify-content: center; } .food-item { position: relative; background: var(--surface); border-radius: 16px; padding: 9px 15px; box-shadow: 0 4px 0 var(--btn-edge), 0 7px 14px var(--btn-soft), inset 0 2px 0 var(--hi); touch-action: none; cursor: grab; } .food-item:active { transform: translateY(2px); } .food-item i { position: absolute; bottom: -4px; right: -4px; font-style: normal; font-size: .58rem; font-weight: 700; background: var(--amber); color: #3a2208; border-radius: 9px; padding: 1px 5px; box-shadow: 0 2px 4px var(--btn-soft); } .food-ghost { position: fixed; transform: translate(-50%,-50%); pointer-events: none; z-index: 80; filter: drop-shadow(0 6px 8px rgba(0,0,0,.3)); } .lights { position: absolute; inset: 0; background: rgba(8,6,22,.82); opacity: 0; transition: opacity .45s ease; pointer-events: none; z-index: 7; } .room.lights-off .lights { opacity: 1; } .wake-btn { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 8; display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(180deg, var(--amber), var(--amber-2)); color: #3a2208; font-weight: 700; padding: 11px 24px; border-radius: 20px; box-shadow: 0 6px 0 var(--btn-edge), 0 10px 20px rgba(0,0,0,.4); } .wake-btn svg { display: block; } .sick-overlay { position: absolute; top: 0; right: 6%; font-size: 26px; z-index: 4; pointer-events: none; } .nut.sick .nut-img { filter: brightness(.9) saturate(.7); } .ball { position: absolute; left: 0; top: 0; z-index: 5; cursor: grab; touch-action: none; user-select: none; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); } .ball:active { cursor: grabbing; } .brush-cursor { position: fixed; transform: translate(-50%,-50%); pointer-events: none; z-index: 80; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); } .shop-cat { font-family: var(--font-display); font-weight: 700; text-align: left; margin: 12px 0 4px; color: var(--amber); font-size: .85rem; } .shop-l i { font-style: normal; color: var(--amber); font-weight: 700; } .room-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .96; } .scn-night { display: none; } .night .scn-night { display: inline; } .night .scn-day { display: none; } .speech { position: absolute; left: 50%; top: -16px; transform: translateX(-50%) scale(.6); background: #fffdf8; color: #2a1622; font-family: var(--font-display); font-weight: 700; font-size: .72rem; padding: 5px 11px; border-radius: 16px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 7; box-shadow: 0 4px 10px rgba(0,0,0,.28); } .speech::after { content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #fffdf8; } .speech.show { opacity: 1; transform: translateX(-50%) scale(1); } .fly { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; transition: left .9s ease-in-out, top .9s ease-in-out; } .floor-coin { position: absolute; bottom: 6%; background: transparent; z-index: 5; animation: poopIn .3s ease; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); } /* --- iconos ilustrados (SVG) --- */ .stat-l { display: flex; align-items: center; gap: 5px; white-space: nowrap; } .stat-ic { line-height: 0; display: inline-flex; } .tb-star { line-height: 0; display: inline-flex; } .tb-chip svg { vertical-align: -3px; } .nav-ic { line-height: 0; display: inline-flex; } .nav-btn svg, .nav-ic svg { display: block; } .act-ic { line-height: 0; display: inline-flex; min-height: 26px; align-items: center; } .act-btn svg { display: block; } .room-title-ic, .wish-ic { display: inline-flex; vertical-align: -4px; } .shop-ic { display: inline-flex; align-items: center; line-height: 0; } .shop-item button svg { vertical-align: -2px; } .food-item svg, .food-ghost svg, .ball svg, .poop svg, .floor-coin svg, .fly svg, .brush-cursor svg { display: block; } .lvl-big svg { vertical-align: -5px; } .lvl-sub svg { vertical-align: -2px; } @media (prefers-reduced-motion: reduce) { .nut-img, .act-btn.wanted, .nav-btn.alert::before { animation: none; } * { transition: none !important; } }