/* Huevos de la caja secreta: fiesta, dormir, bardo, uwu, 404, artkuwu. Todo CSS/SVG.
   Fotosensibilidad: nada parpadea mas de ~3 veces por segundo y no hay destellos blancos a pantalla completa (las luces barren, no destellan). */
[id^="fx-"] { display:none; pointer-events:none; }
html.fiesta #fx-fiesta, html.dormir #fx-dormir, html.dormir #fx-zz, html.bardo #fx-bardo, html.uwu #fx-uwu, html.artkuwu #fx-art { display:block; }
[id^="fx-"] i, #fx-zz b { position:absolute; display:block; font-style:normal; }

/* ---------- fiesta ---------- */
#fx-fiesta { position:fixed; inset:0; z-index:4; overflow:hidden; }
#fx-fiesta .luz { top:-6vh; width:20vw; height:125vh; margin-left:-10vw; transform-origin:50% 0; background:linear-gradient(var(--c), transparent 82%); opacity:.26; mix-blend-mode:screen;
  clip-path:polygon(47% 0, 53% 0, 100% 100%, 0 100%); animation:fiBarrido var(--d) ease-in-out var(--r) infinite alternate; }
@keyframes fiBarrido { from { transform:rotate(-38deg); } to { transform:rotate(38deg); } }
#fx-fiesta .bola { position:absolute; left:91%; top:-2px; width:clamp(70px,7vw,130px); margin-left:calc(clamp(70px,7vw,130px) / -2); transform-origin:50% 0; animation:fiBola 4.2s ease-in-out infinite alternate; }
@keyframes fiBola { from { transform:rotate(-5deg); } to { transform:rotate(5deg); } }
#fx-fiesta .bri { animation:fiTitila 2.6s ease-in-out infinite alternate; } @keyframes fiTitila { from { opacity:.25; } to { opacity:1; } }
#fx-fiesta .confeti { position:absolute; inset:0; z-index:2; }
#fx-fiesta .confeti i { top:0; }
html.fiesta body { animation:fiFondo 18s ease-in-out infinite; }
@keyframes fiFondo { 0%,100% { background-color:#7A4878; } 25% { background-color:#6a4aa6; } 50% { background-color:#a24a90; } 75% { background-color:#4f5fae; } }
html.fiesta #sticker { animation:fiRebote .4762s cubic-bezier(.3,0,.6,1) infinite alternate; transform-origin:50% 100%; }   /* un salto por pulso (126 bpm) */
@keyframes fiRebote { from { transform:translateY(0) scale(1.06,.92) rotate(-3deg); } to { transform:translateY(-14%) scale(.96,1.06) rotate(3deg); } }
html.fiesta #sheet { box-shadow:0 0 0 4px #ffd45e, 6px 8px 0 rgba(0,0,0,.28), 0 0 50px rgba(255,150,220,.45); }
html.fiesta .chip[aria-pressed=true] { background:#7b3fa8; }

/* ---------- dormir ---------- */
#fx-dormir { position:fixed; inset:0; z-index:-1; overflow:hidden; }
#fx-dormir > i { width:var(--s); height:var(--s); border-radius:50%; background:#fff3c8; box-shadow:0 0 6px 1px rgba(255,243,200,.6); animation:doTitila var(--d) ease-in-out var(--r) infinite alternate; }
@keyframes doTitila { from { opacity:.2; } to { opacity:.95; } }
#fx-dormir .lampara { position:absolute; left:1vw; top:12vh; width:clamp(90px,9vw,170px); overflow:visible; filter:drop-shadow(0 0 28px rgba(255,200,110,.55)); }
#fx-zz { position:fixed; inset:0; z-index:4; overflow:hidden; }
#fx-zz b { color:#9d8cf0; font:400 1em "Patrick Hand",cursive; -webkit-text-stroke:1.5px #fff; paint-order:stroke fill; text-shadow:0 0 12px rgba(170,190,255,.9); }
html.dormir body { background:radial-gradient(ellipse 60% 55% at 48% 50%, rgba(255,190,110,.2), transparent 72%), #0d0b24; }
html.dormir body::before { opacity:.1; animation-duration:240s; }
html.dormir .cielo { z-index:-1; }
html.dormir #sheet { filter:sepia(.4) saturate(1.2); box-shadow:0 0 0 3px rgba(255,205,130,.35), 0 0 120px 36px rgba(255,190,100,.32), 6px 8px 0 rgba(0,0,0,.45); }
html.dormir .chip { opacity:.6; } html.dormir .chip[aria-pressed=true] { background:#4a3f86; opacity:.9; }
html.dormir #next { background:#4a3f86; border-color:#b9a8ff; color:#e8e0ff; box-shadow:6px 6px 0 #05040f; opacity:.85; }
html.dormir #sticker { animation:doRespira 4.5s ease-in-out infinite alternate; }
@keyframes doRespira { from { transform:scale(1) rotate(-2deg); } to { transform:scale(1.04) translateY(-2%) rotate(2deg); } }
.gorro { position:absolute; left:6%; top:-30%; width:76%; pointer-events:none; transform:rotate(-14deg); transform-origin:50% 100%; }
.gorro svg { display:block; width:100%; overflow:visible; }

/* ---------- bardo ---------- */
#fx-bardo { position:fixed; inset:0; z-index:4; overflow:hidden; }
#fx-bardo i { top:0; filter:drop-shadow(0 3px 0 rgba(58,42,10,.28)); }
#fx-bardo svg { display:block; width:100%; overflow:visible; }
html.bardo body { background:radial-gradient(ellipse 65% 55% at 50% 45%, rgba(255,222,130,.38), transparent 72%), #4682c4; }
html.bardo body::before { filter:sepia(1) hue-rotate(5deg) saturate(2); opacity:.5; }
html.bardo #sheet { box-shadow:0 0 0 5px #e8b93f, 0 0 46px rgba(255,214,110,.55), 6px 8px 0 rgba(0,0,0,.28); }
html.bardo .chip { border-color:#fff3c0; } html.bardo .chip[aria-pressed=true] { background:#d9a21e; color:#3a2a0a; border-color:#3a2a0a; box-shadow:3px 3px 0 #3a2a0a; }
html.bardo #next { background:#e8b93f; color:#3a2a0a; border-color:#3a2a0a; box-shadow:6px 6px 0 #3a2a0a; }
html.bardo #q { -webkit-text-stroke-color:#3a4f86; } html.bardo .row b { text-decoration-color:#4a9ad8; }

/* ---------- uwu ---------- */
#fx-uwu { position:fixed; inset:0; z-index:4; overflow:hidden; }
#fx-uwu i { bottom:-60px; }
#fx-uwu svg { display:block; width:100%; overflow:visible; }
html.uwu body { background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255,214,236,.5), transparent 72%), #c36da6; }
html.uwu #sheet { box-shadow:0 0 0 5px #ffb3d3, 0 0 50px rgba(255,170,215,.6), 6px 8px 0 rgba(0,0,0,.25); }
html.uwu #q { text-shadow:2px 2px 0 rgba(255,150,200,.45); }
html.uwu #sticker { animation:uwBalanceo 1.4s ease-in-out infinite alternate; }
@keyframes uwBalanceo { from { transform:rotate(-6deg) scale(1); } to { transform:rotate(6deg) scale(1.07); } }
html.uwu .chip { border-color:#ffd3e6; border-radius:20px; } html.uwu .chip[aria-pressed=true] { background:#e0558f; }

/* ---------- 404 ---------- */
#fx-rota { display:block; pointer-events:none; position:fixed; left:50%; top:22%; z-index:60; width:min(520px,90vw); transform:translateX(-50%) rotate(1.2deg); padding:16px 22px 18px; text-align:center;
  background:#FFF5FA; color:#714460; border:4px solid #714460; border-radius:6px; box-shadow:7px 8px 0 rgba(0,0,0,.4); font:clamp(20px,2vw,28px)/1.3 "Patrick Hand",cursive; animation:roAviso .3s ease-out; }
html.rota, html.rota body { overflow:hidden; }
#fx-rota b { position:static; display:block; margin-bottom:.15em; font:800 clamp(34px,4.4vw,64px)/1 Nunito,sans-serif; color:#C2456D; letter-spacing:.04em; }
#fx-rota p { margin:.3em 0 0; } #fx-rota .s { font-size:.8em; color:#8c5d7a; }
#fx-rota .barra { height:14px; margin-top:12px; border:3px solid #714460; border-radius:8px; overflow:hidden; background:#f1d6e3; }
#fx-rota .barra i { position:static; display:block; height:100%; background:repeating-linear-gradient(45deg,#D9577F 0 10px,#E5799B 10px 20px); transform-origin:left; animation:roBarra 4s linear both; }
@keyframes roBarra { from { transform:scaleX(0); } }
@keyframes roAviso { from { transform:translateX(-50%) rotate(1.2deg) scale(.7); opacity:0; } }

/* ---------- artkuwu ---------- */
#fx-art { position:fixed; inset:0; z-index:-1; }   /* detras de la hoja y los botones: nunca los tapa */
.pol, .vacio, .ver, .aviso { position:absolute; margin:0; pointer-events:auto; }
.pol { padding-bottom:0; }
.pol { padding:8px 8px 0; background:#FFF5FA; box-shadow:4px 6px 0 rgba(0,0,0,.3); cursor:pointer; transform:rotate(var(--r));
  animation:arFlota var(--d) ease-in-out var(--w) infinite alternate; }
.pol:hover, .pol:focus-visible { animation-play-state:paused; }
@keyframes arFlota { from { transform:translateY(0) rotate(var(--r)); } to { transform:translateY(-14px) rotate(calc(var(--r) * -.6)); } }
.pol img, #fx-zoom img { display:block; width:100%; aspect-ratio:1; object-fit:cover; background:#f1d6e3; }
.pol figcaption { padding:.25em 0 .2em; text-align:center; font:clamp(14px,1.1vw,19px)/1.2 "Patrick Hand",cursive; color:#714460; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
img.sin { background:repeating-linear-gradient(45deg,#f1d6e3 0 10px,#FFF5FA 10px 20px); color:transparent; }
.cinta { position:absolute; left:50%; top:-12px; width:46%; height:24px; margin-left:-23px; transform:rotate(-4deg); pointer-events:none; opacity:.92;
  background:var(--tape,#F7B7C8) repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 2px, transparent 2px 7px); box-shadow:0 2px 4px rgba(63,34,53,.22);
  clip-path:polygon(0 4%, 3% 22%, 1% 41%, 4% 60%, 1% 79%, 3% 100%, 97% 96%, 99% 78%, 96% 58%, 99% 39%, 97% 20%, 100% 0); }
.vacio { padding:8px 8px 4px; text-align:center; background:#FFF5FA; box-shadow:5px 7px 0 rgba(0,0,0,.35); transform:rotate(-3deg); }
.ver, .aviso { left:12px; bottom:12px; font:800 16px Nunito,sans-serif; color:#fff; background:#D9577F; border:3px solid #714460; border-radius:12px; padding:.3em .9em; box-shadow:3px 3px 0 #3f2235; cursor:pointer; }
.aviso { cursor:default; color:#714460; background:#FFF5FA; font:18px "Patrick Hand",cursive; pointer-events:none; }
.vacio .marco { display:grid; place-items:center; aspect-ratio:1; border:3px dashed #D9577F; background:#fde8f1; }
.vacio .marco img { width:55%; opacity:.55; filter:grayscale(.3); }
.vacio p { margin:.4em 0 .2em; font:clamp(13px,1.1vw,18px)/1.15 "Patrick Hand",cursive; color:#714460; }
#fx-zoom { pointer-events:auto; position:fixed; inset:0; z-index:62; display:grid; place-content:center; justify-items:center; gap:16px; background:rgba(40,15,35,.72); }
#fx-zoom figure { position:relative; margin:0; padding:14px 14px 0; background:#FFF5FA; box-shadow:8px 10px 0 rgba(0,0,0,.4); transform:rotate(-1.5deg); }
#fx-zoom img { width:auto; height:auto; max-width:min(80vw,900px); max-height:68vh; aspect-ratio:auto; object-fit:contain; min-width:240px; min-height:240px; }
#fx-zoom figcaption { padding:.4em 0; text-align:center; font:clamp(22px,2vw,32px)/1.2 "Patrick Hand",cursive; color:#714460; }
#fx-zoom .cinta { top:-14px; width:140px; margin-left:-70px; height:30px; }
#fx-zoom button { font:800 clamp(18px,1.6vw,26px) Nunito,sans-serif; color:#fff; background:#D9577F; border:4px solid #714460; border-radius:14px; padding:.25em 1.2em; box-shadow:5px 5px 0 #3f2235; cursor:pointer; }
@media (prefers-reduced-motion:reduce) { html.fiesta body, html.fiesta #sticker, html.uwu #sticker, html.dormir #sticker, .pol, #fx-fiesta .luz, #fx-fiesta .bola { animation:none; } }