/* =======================================================
   Alina Games - Styles der animierten Spiel-Szenen (siehe scenes.js).
   Praefix asc- ("alina scene"). Farb-Tokens aus ui.css.
   Bewusst OHNE mix-blend-mode und OHNE Masken - iOS Safari verrechnet
   Blend-Ebenen sonst mit dem Seitenhintergrund.
   ======================================================= */
.asc-memwrap, .asc-rushwrap, .asc-pz, .asc-senso, .asc-fl, .asc-gal { font-size: 0; }
.asc-memwrap img, .asc-mini img, .asc-quad img, .asc-fl img, .asc-gal img { display: block; object-fit: cover; }

/* ---- Memory ---- */
.asc-memwrap { position: relative; width: 122px; height: 104px; }
.asc-card { position: absolute; width: 34px; height: 40px; perspective: 400px; }
.asc-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .44s cubic-bezier(.4,.2,.2,1); }
.asc-card.up .asc-flip { transform: rotateY(180deg); }
.asc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 6px; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.22); overflow: hidden; background: #fff; }
.asc-front { background: var(--ag-accent-soft, #f9a8d4) repeating-linear-gradient(45deg, transparent 0 4px, rgba(255,255,255,.55) 4px 8px); }
.asc-back { transform: rotateY(180deg); }
.asc-back img { width: 100%; height: 100%; }
.asc-card.match .asc-back { animation: asc-matchblink .45s ease-in-out 3; }
@keyframes asc-matchblink { 0%,100% { box-shadow: 0 2px 6px rgba(0,0,0,.22); border-color: #fff; } 50% { box-shadow: 0 0 0 3px #34D399, 0 0 14px #34D399; border-color: #34D399; } }

/* ---- Rush ---- */
.asc-rushwrap { position: relative; width: 108px; height: 108px; }
.asc-mini { display: grid; grid-template-columns: repeat(3, 34px); gap: 3px; }
.asc-mini img { width: 34px; height: 34px; border-radius: 6px; outline: 3px solid transparent; outline-offset: -1px; transition: outline-color .2s; }
.asc-mini img.hit { outline-color: #34D399; animation: asc-hitflash .35s ease-in-out 2; }
@keyframes asc-hitflash { 50% { filter: brightness(1.35); } }
.asc-loupe { position: absolute; left: 82px; top: 82px; width: 38px; height: 38px; box-sizing: border-box; border: 4px solid #3f3f46; border-radius: 50%;
             background: rgba(255,255,255,.18); box-shadow: 0 2px 5px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.55);
             transition: transform 1.1s cubic-bezier(.4,.1,.2,1); z-index: 3; }
.asc-loupe::after { content: ""; position: absolute; width: 7px; height: 20px; background: #3f3f46; border-radius: 4px; right: -11px; bottom: -16px; transform: rotate(-45deg); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
/* Bildmitte des mittleren Feldes (54,54); Lupenmitte = left+19 -> translate(-47,-47) */
.asc-loupe.go { transform: translate(-47px, -47px); }
.asc-loupe.click { transform: translate(-47px, -47px) scale(.85); transition: transform .12s; }

/* ---- Puzzle ---- */
.asc-pz { position: relative; width: 112px; height: 112px; padding: 4px; background: #e7e5e4; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,.18); transition: box-shadow .4s; }
.asc-pz.solved { box-shadow: 0 0 0 4px #34D399, 0 4px 14px rgba(52,211,153,.5); }
.asc-pt { position: absolute; width: 34px; height: 34px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); background-size: 102px 102px; transition: transform .45s cubic-bezier(.4,.2,.2,1), opacity .5s; }
.asc-pt.final { opacity: 0; } .asc-pz.solved .asc-pt.final { opacity: 1; }
.asc-ok { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0); font-size: 2.2rem; line-height: 1; transition: transform .35s cubic-bezier(.3,1.4,.5,1); z-index: 6; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.asc-pz.solved .asc-ok { transform: translate(-50%,-50%) scale(1); }
.asc-finger { position: absolute; font-size: 1.5rem; line-height: 1; z-index: 5; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); transition: left .5s cubic-bezier(.4,.1,.2,1), top .5s cubic-bezier(.4,.1,.2,1), transform .12s, opacity .3s; pointer-events: none; }
.asc-finger.press { transform: scale(.8) translateY(3px); }
.asc-finger.hide { opacity: 0; }

/* ---- Senso ---- */
.asc-senso { position: relative; width: 116px; height: 116px; border-radius: 50%; background: #111; box-shadow: 0 8px 18px rgba(0,0,0,.35); overflow: hidden; }
.asc-senso::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 7px solid #111; box-shadow: inset 0 0 0 2px #2a2a2a; z-index: 4; pointer-events: none; }
.asc-quad { position: absolute; width: 49px; height: 49px; overflow: hidden; }
.asc-quad img { width: 100%; height: 100%; filter: saturate(.7); transition: filter .15s; }
.asc-quad::after { content: ""; position: absolute; inset: 0; opacity: .5; transition: opacity .15s; }
.asc-q1 { left: 7px; top: 7px; border-radius: 49px 0 0 0; }  .asc-q1::after { background: #ef4444; }
.asc-q2 { right: 7px; top: 7px; border-radius: 0 49px 0 0; } .asc-q2::after { background: #3b82f6; }
.asc-q3 { left: 7px; bottom: 7px; border-radius: 0 0 0 49px; } .asc-q3::after { background: #facc15; }
.asc-q4 { right: 7px; bottom: 7px; border-radius: 0 0 49px 0; } .asc-q4::after { background: #22c55e; }
.asc-quad.lit::after { opacity: .08; }
.asc-quad.lit img { filter: saturate(1.1) brightness(1.3); }
.asc-quad.lit { box-shadow: inset 0 0 0 3px rgba(255,255,255,.95), inset 0 0 22px 6px rgba(255,255,255,.85); z-index: 2; }
.asc-hub { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: #111; box-shadow: 0 0 0 3px #333, 0 2px 6px rgba(0,0,0,.5); z-index: 5; display: flex; align-items: center; justify-content: center; gap: 3px; }
.asc-hub i { width: 5px; height: 5px; border-radius: 50%; background: #f87171; display: block; }
.asc-hub i:nth-child(2) { background: #fbbf24; } .asc-hub i:nth-child(3) { background: #4ade80; }

/* ---- Flash ---- */
.asc-fl { display: grid; grid-template-columns: repeat(3, 34px); gap: 3px; }
.asc-fl > div { width: 34px; height: 34px; border-radius: 6px; background: #fde68a; position: relative; }
.asc-fl img { width: 34px; height: 34px; border-radius: 6px; transition: opacity .25s; }
.asc-fl.answer .pool img { opacity: 0; }
.asc-fl.answer .alina img { box-shadow: 0 0 0 3px #fff, 0 0 14px #f59e0b; animation: asc-blink 1.5s ease-in-out infinite; }
.asc-fl .b { position: absolute; top: -12px; right: -9px; font-size: 1.1rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); opacity: 0; }
.asc-fl.answer .b { animation: asc-blink 1.5s ease-in-out infinite; }
.asc-fl.answer .alina.d2 img, .asc-fl.answer .alina.d2 .b { animation-delay: .25s; }
.asc-fl.answer .alina.d3 img, .asc-fl.answer .alina.d3 .b { animation-delay: .5s; }
@keyframes asc-blink { 0%,15% { opacity: 1; } 50%,65% { opacity: .15; } 100% { opacity: 1; } }

/* ---- Galerie ---- */
.asc-gal { position: relative; width: 112px; height: 104px; }
.asc-gal img { position: absolute; width: 58px; height: 58px; border: 4px solid #fff; border-bottom-width: 13px; box-shadow: 0 3px 8px rgba(0,0,0,.22); }