/* ============================================================
   VikaBu — style.css
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

:root {
  --bg-1:#9b8dd4; --bg-2:#7c6bbf; --bg-3:#6e60ad;
  --accent:#ff7b9c; --accent-2:#ffa8bd; --accent-shadow:rgba(255,123,156,.5);
  --lava-1:#ff7b9c; --lava-2:#9b8dd4;
  --glass:rgba(255,255,255,.13); --glass-hover:rgba(255,255,255,.22);
  --glass-strong:rgba(255,255,255,.2); --glass-border:rgba(255,255,255,.1);
  --text:#fff; --text-soft:rgba(255,255,255,.72); --text-faint:rgba(255,255,255,.42);
  --success:#4ade80; --warning:#f87171;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --fs: 1;
  --bg-img-opacity: 0;
  --scrabble-tile-bg: linear-gradient(145deg, #f7ead0, #d8b78c);
  --scrabble-tile-text: #4a3a1f;
}
body[data-fs="s"] { --fs: 0.85; }
body[data-fs="m"] { --fs: 1; }
body[data-fs="l"] { --fs: 1.15; }
body[data-fs="xl"] { --fs: 1.32; }

body.dark {
  --glass:rgba(255,255,255,.09); --glass-hover:rgba(255,255,255,.16);
  --glass-strong:rgba(255,255,255,.14); --glass-border:rgba(255,255,255,.09);
  --text:#f8fafc; --text-soft:rgba(248,250,252,.78); --text-faint:rgba(248,250,252,.5);
  --scrabble-tile-bg: linear-gradient(145deg, #c9b48a, #a08860);
  --scrabble-tile-text: #2a2215;
}
body.light-theme {
  --glass:rgba(255,255,255,.6); --glass-hover:rgba(255,255,255,.85);
  --glass-strong:rgba(255,255,255,.75); --glass-border:rgba(15,23,42,.1);
  --text:#0f172a; --text-soft:rgba(15,23,42,.75); --text-faint:rgba(15,23,42,.5);
}
body.light-theme .modal-box,
body.light-theme .settings-box,
body.light-theme .achievement-popup,
body.light-theme .ach-detail-card,
body.light-theme .tutorial-box { background:#fff; }

html, body { height: 100%; width: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.3; font-size: calc(16px * var(--fs)); }
body { display: flex; justify-content: center; align-items: center; background: #14122a; color: var(--text); }

.bg-tint { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(165deg, var(--bg-1), var(--bg-2) 55%, var(--bg-3)); }
.bg-image { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-size: cover; background-position: center; opacity: var(--bg-img-opacity); transition: opacity .5s; }

#app {
  width: 100%;
  max-width: 480px;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
#app::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%);
  z-index: 0;
  transition: background .5s;
  border-radius: inherit;
}
@media (min-width: 500px) {
  body { padding: 14px; }
  #app {
    height: calc(100vh - 28px);
    height: calc(100dvh - 28px);
    min-height: auto;
    border-radius: 28px;
    box-shadow: 0 30px 70px rgba(0,0,0,.5);
  }
}

.content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 12px 16px 14px;
  overflow: hidden;
}

/* ============================================================
   ANIMATIONEN
   ============================================================ */
.anim-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; transition: opacity .6s; }
.anim-bg.off { opacity: 0; }
.anim-bg .ab { position: absolute; will-change: transform, opacity; pointer-events: none; }
.anim-bg.v-off .ab { display: none; }

.anim-bg.v-soft .ab { width: 220px; height: 220px; border-radius: 50%; filter: blur(60px); opacity: .55; background: var(--lava-1); animation: softDrift 50s ease-in-out infinite; }
.anim-bg.v-soft .ab:nth-child(1) { top: -60px; left: -60px; }
.anim-bg.v-soft .ab:nth-child(2) { bottom: -80px; right: -60px; background: var(--lava-2); animation-delay: -22s; }
.anim-bg.v-soft .ab:nth-child(n+3) { display: none; }
@keyframes softDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.1); } }

.anim-bg.v-lava .ab { border-radius: 48% 52% 55% 45% / 52% 48% 52% 48%; filter: blur(30px); opacity: .72; background: radial-gradient(ellipse at 40% 40%, var(--lava-1) 0%, var(--lava-1) 35%, transparent 75%); mix-blend-mode: screen; }
.anim-bg.v-lava .ab:nth-child(1) { width: 190px; height: 200px; top: 5%; left: -40px; animation: lavaBlob1 22s ease-in-out infinite; }
.anim-bg.v-lava .ab:nth-child(2) { width: 170px; height: 180px; top: 35%; right: -50px; background: radial-gradient(ellipse at 60% 40%, var(--lava-2) 0%, var(--lava-2) 35%, transparent 75%); animation: lavaBlob2 28s ease-in-out infinite; }
.anim-bg.v-lava .ab:nth-child(3) { width: 200px; height: 210px; bottom: -50px; left: 20%; animation: lavaBlob3 32s ease-in-out infinite; opacity: .65; }
.anim-bg.v-lava .ab:nth-child(4) { width: 150px; height: 160px; top: 55%; left: 40%; background: radial-gradient(ellipse at 40% 60%, var(--lava-2) 0%, var(--lava-2) 35%, transparent 75%); animation: lavaBlob4 26s ease-in-out infinite; }
.anim-bg.v-lava .ab:nth-child(5) { width: 130px; height: 140px; top: 20%; left: 45%; animation: lavaBlob5 30s ease-in-out infinite; opacity: .55; }
.anim-bg.v-lava .ab:nth-child(6) { width: 160px; height: 170px; bottom: 25%; right: 15%; background: radial-gradient(ellipse at 60% 50%, var(--lava-2) 0%, var(--lava-2) 35%, transparent 75%); animation: lavaBlob6 34s ease-in-out infinite; opacity: .6; }
.anim-bg.v-lava .ab:nth-child(n+7) { display: none; }
@keyframes lavaBlob1 { 0%,100% { transform: translate(0,0) scale(1) rotate(0); border-radius: 48% 52% 55% 45% / 52% 48% 52% 48%; } 33% { transform: translate(30px,50px) scale(1.15) rotate(20deg); border-radius: 60% 40% 45% 55% / 45% 55% 40% 60%; } 66% { transform: translate(-20px,90px) scale(.92) rotate(-15deg); border-radius: 42% 58% 62% 38% / 58% 42% 62% 38%; } }
@keyframes lavaBlob2 { 0%,100% { transform: translate(0,0) scale(1); border-radius: 52% 48% 45% 55% / 48% 52% 48% 52%; } 25% { transform: translate(-40px,-35px) scale(1.12); border-radius: 60% 40% 55% 45% / 55% 45% 60% 40%; } 50% { transform: translate(-15px,30px) scale(.95); border-radius: 45% 55% 40% 60% / 40% 60% 45% 55%; } 75% { transform: translate(-60px,-10px) scale(1.08); border-radius: 55% 45% 60% 40% / 45% 55% 40% 60%; } }
@keyframes lavaBlob3 { 0%,100% { transform: translate(0,0) scale(1); border-radius: 50% 50% 55% 45% / 55% 45% 50% 50%; } 40% { transform: translate(-30px,-60px) scale(1.18); border-radius: 60% 40% 50% 50% / 40% 60% 55% 45%; } 70% { transform: translate(50px,-25px) scale(.9); border-radius: 42% 58% 60% 40% / 58% 42% 40% 60%; } }
@keyframes lavaBlob4 { 0%,100% { transform: translate(0,0) scale(1); border-radius: 48% 52% 55% 45% / 48% 52% 52% 48%; } 50% { transform: translate(25px,40px) scale(1.22); border-radius: 62% 38% 45% 55% / 55% 45% 38% 62%; } }
@keyframes lavaBlob5 { 0%,100% { transform: translate(0,0) scale(1); border-radius: 45% 55% 50% 50% / 55% 45% 50% 50%; } 50% { transform: translate(-30px,50px) scale(1.15); border-radius: 58% 42% 60% 40% / 42% 58% 40% 60%; } }
@keyframes lavaBlob6 { 0%,100% { transform: translate(0,0) scale(1); border-radius: 52% 48% 50% 50% / 48% 52% 55% 45%; } 33% { transform: translate(-50px,-30px) scale(1.1); border-radius: 40% 60% 55% 45% / 60% 40% 45% 55%; } 66% { transform: translate(20px,-60px) scale(.95); border-radius: 55% 45% 62% 38% / 45% 55% 38% 62%; } }

.anim-bg.v-aurora .ab { width: 140%; height: 140px; left: -20%; border-radius: 100px; filter: blur(40px); opacity: .55; background: linear-gradient(90deg, transparent 0%, var(--lava-1) 30%, var(--lava-2) 70%, transparent 100%); animation: auroraWave 40s ease-in-out infinite; }
.anim-bg.v-aurora .ab:nth-child(1) { top: 12%; }
.anim-bg.v-aurora .ab:nth-child(2) { top: 42%; animation-delay: -14s; height: 160px; }
.anim-bg.v-aurora .ab:nth-child(3) { top: 70%; animation-delay: -26s; height: 120px; opacity: .4; }
.anim-bg.v-aurora .ab:nth-child(n+4) { display: none; }
@keyframes auroraWave { 0%,100% { transform: translateX(-10%) scaleY(1); opacity: .42; } 50% { transform: translateX(10%) scaleY(1.3); opacity: .75; } }

.anim-bg.v-stars .ab { top: 0; left: 0; width: 2px; height: 2px; background: transparent; border-radius: 50%; }
.anim-bg.v-stars .ab:nth-child(1) { animation: starTwinkle 3s ease-in-out infinite; box-shadow: 40px 60px 0 0 #fff, 120px 30px 0 0 rgba(255,255,255,.85), 200px 80px 0 0 #fff, 280px 40px 0 0 rgba(255,255,255,.9), 360px 100px 0 0 #fff, 30px 160px 0 0 rgba(255,255,255,.7), 140px 200px 0 0 #fff, 250px 180px 0 0 rgba(255,255,255,.95), 340px 220px 0 0 #fff, 80px 280px 0 0 rgba(255,255,255,.85), 190px 320px 0 0 #fff, 310px 340px 0 0 rgba(255,255,255,.9), 60px 400px 0 0 #fff, 220px 440px 0 0 rgba(255,255,255,.8), 380px 480px 0 0 #fff, 110px 520px 0 0 rgba(255,255,255,.95); }
.anim-bg.v-stars .ab:nth-child(2) { animation: starTwinkle 4s ease-in-out infinite -1.5s; box-shadow: 90px 90px 0 0 rgba(255,255,255,.8), 170px 140px 0 0 #fff, 260px 60px 0 0 rgba(255,255,255,.9), 340px 180px 0 0 #fff, 60px 240px 0 0 rgba(255,255,255,.75), 210px 260px 0 0 #fff, 380px 280px 0 0 rgba(255,255,255,.7), 120px 380px 0 0 #fff, 300px 400px 0 0 rgba(255,255,255,.9), 20px 500px 0 0 #fff, 160px 560px 0 0 rgba(255,255,255,.85), 320px 600px 0 0 #fff; }
.anim-bg.v-stars .ab:nth-child(3) { animation: starTwinkle 5s ease-in-out infinite -2.5s; box-shadow: 50px 20px 0 0 #fff, 130px 110px 0 0 rgba(255,255,255,.8), 230px 20px 0 0 #fff, 320px 60px 0 0 rgba(255,255,255,.7), 20px 100px 0 0 rgba(255,255,255,.75), 180px 250px 0 0 #fff, 280px 220px 0 0 rgba(255,255,255,.9), 380px 160px 0 0 #fff, 100px 300px 0 0 rgba(255,255,255,.8), 220px 360px 0 0 #fff, 30px 450px 0 0 rgba(255,255,255,.85), 350px 550px 0 0 #fff; }
.anim-bg.v-stars .ab:nth-child(4), .anim-bg.v-stars .ab:nth-child(5) { width: 2px; height: 2px; background: #fff; border-radius: 50%; top: 15%; left: -20%; box-shadow: 0 0 6px 2px #fff, 0 0 12px 4px rgba(255,255,255,.6); }
.anim-bg.v-stars .ab:nth-child(4) { animation: shootingStar 8s linear infinite 2s; }
.anim-bg.v-stars .ab:nth-child(5) { top: 45%; animation: shootingStar 12s linear infinite 7s; }
.anim-bg.v-stars .ab:nth-child(n+6) { display: none; }
@keyframes starTwinkle { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes shootingStar { 0% { transform: translate(0,0) rotate(-15deg); opacity: 0; } 5% { opacity: 1; } 15% { transform: translate(120vw, 30vh) rotate(-15deg); opacity: 0; } 100% { transform: translate(120vw, 30vh) rotate(-15deg); opacity: 0; } }

.anim-bg.v-clouds .ab { height: 55px; background: rgba(255,255,255,.75); border-radius: 100px; filter: blur(5px); box-shadow: -25px 6px 0 -4px rgba(255,255,255,.7), 25px 6px 0 -4px rgba(255,255,255,.7), -40px 12px 0 -8px rgba(255,255,255,.5), 40px 12px 0 -8px rgba(255,255,255,.5); }
.anim-bg.v-clouds .ab:nth-child(1) { width: 130px; top: 8%; left: -180px; animation: cloudMove 45s linear infinite; }
.anim-bg.v-clouds .ab:nth-child(2) { width: 170px; height: 65px; top: 22%; left: -220px; animation: cloudMove 65s linear infinite -20s; opacity: .85; }
.anim-bg.v-clouds .ab:nth-child(3) { width: 100px; height: 45px; top: 42%; left: -140px; animation: cloudMove 55s linear infinite -35s; }
.anim-bg.v-clouds .ab:nth-child(4) { width: 150px; top: 60%; left: -200px; animation: cloudMove 75s linear infinite -50s; opacity: .8; }
.anim-bg.v-clouds .ab:nth-child(5) { width: 120px; height: 50px; top: 78%; left: -160px; animation: cloudMove 60s linear infinite -15s; }
.anim-bg.v-clouds .ab:nth-child(6) { width: 140px; top: 33%; left: -190px; animation: cloudMove 70s linear infinite -45s; opacity: .75; }
.anim-bg.v-clouds .ab:nth-child(n+7) { display: none; }
@keyframes cloudMove { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 250px)); } }

.anim-bg.v-rain .ab { width: 2px; height: 20px; background: linear-gradient(to bottom, rgba(220,235,255,0) 0%, rgba(220,235,255,.95) 100%); border-radius: 2px; top: -30px; }
.anim-bg.v-rain .ab:nth-child(odd) { width: 2.5px; height: 24px; opacity: .9; }
.anim-bg.v-rain .ab:nth-child(even) { width: 1.5px; height: 16px; opacity: .65; }
.anim-bg.v-rain .ab:nth-child(1) { left: 4%; animation: rainFall 1.1s linear infinite -0.2s; }
.anim-bg.v-rain .ab:nth-child(2) { left: 11%; animation: rainFall 1.4s linear infinite -0.8s; }
.anim-bg.v-rain .ab:nth-child(3) { left: 18%; animation: rainFall 1.2s linear infinite -0.5s; }
.anim-bg.v-rain .ab:nth-child(4) { left: 25%; animation: rainFall 1.3s linear infinite -1.1s; }
.anim-bg.v-rain .ab:nth-child(5) { left: 32%; animation: rainFall 1.0s linear infinite -0.3s; }
.anim-bg.v-rain .ab:nth-child(6) { left: 39%; animation: rainFall 1.5s linear infinite -0.9s; }
.anim-bg.v-rain .ab:nth-child(7) { left: 46%; animation: rainFall 1.1s linear infinite -0.6s; }
.anim-bg.v-rain .ab:nth-child(8) { left: 53%; animation: rainFall 1.4s linear infinite -0.1s; }
.anim-bg.v-rain .ab:nth-child(9) { left: 60%; animation: rainFall 1.2s linear infinite -1.0s; }
.anim-bg.v-rain .ab:nth-child(10) { left: 67%; animation: rainFall 1.3s linear infinite -0.4s; }
.anim-bg.v-rain .ab:nth-child(11) { left: 74%; animation: rainFall 1.0s linear infinite -0.7s; }
.anim-bg.v-rain .ab:nth-child(12) { left: 81%; animation: rainFall 1.5s linear infinite -0.2s; }
.anim-bg.v-rain .ab:nth-child(13) { left: 88%; animation: rainFall 1.3s linear infinite -1.3s; }
.anim-bg.v-rain .ab:nth-child(14) { left: 95%; animation: rainFall 1.1s linear infinite -0.8s; }
.anim-bg.v-rain .ab:nth-child(15) { left: 7%; animation: rainFall 1.4s linear infinite -0.5s; }
.anim-bg.v-rain .ab:nth-child(16) { left: 22%; animation: rainFall 1.2s linear infinite -1.1s; }
.anim-bg.v-rain .ab:nth-child(17) { left: 36%; animation: rainFall 1.3s linear infinite -0.3s; }
.anim-bg.v-rain .ab:nth-child(18) { left: 50%; animation: rainFall 1.0s linear infinite -0.6s; }
.anim-bg.v-rain .ab:nth-child(19) { left: 64%; animation: rainFall 1.4s linear infinite -1.2s; }
.anim-bg.v-rain .ab:nth-child(20) { left: 78%; animation: rainFall 1.2s linear infinite -0.9s; }
.anim-bg.v-rain .ab:nth-child(n+21) { display: none; }
@keyframes rainFall { from { transform: translateY(0); } to { transform: translateY(calc(100vh + 50px)); } }

.anim-bg.v-snow .ab { background: #fff; border-radius: 50%; top: -20px; box-shadow: 0 0 6px rgba(255,255,255,.95), 0 0 12px rgba(255,255,255,.5); }
.anim-bg.v-snow .ab:nth-child(3n) { width: 8px; height: 8px; }
.anim-bg.v-snow .ab:nth-child(3n+1) { width: 5px; height: 5px; opacity: .9; }
.anim-bg.v-snow .ab:nth-child(3n+2) { width: 10px; height: 10px; opacity: .8; }
.anim-bg.v-snow .ab:nth-child(1) { left: 4%; animation: snowFall 9s linear infinite -1s; }
.anim-bg.v-snow .ab:nth-child(2) { left: 11%; animation: snowFall 12s linear infinite -3s; }
.anim-bg.v-snow .ab:nth-child(3) { left: 18%; animation: snowFall 10s linear infinite -5s; }
.anim-bg.v-snow .ab:nth-child(4) { left: 25%; animation: snowFall 13s linear infinite -2s; }
.anim-bg.v-snow .ab:nth-child(5) { left: 32%; animation: snowFall 11s linear infinite -6s; }
.anim-bg.v-snow .ab:nth-child(6) { left: 39%; animation: snowFall 9.5s linear infinite -4s; }
.anim-bg.v-snow .ab:nth-child(7) { left: 46%; animation: snowFall 12.5s linear infinite -7s; }
.anim-bg.v-snow .ab:nth-child(8) { left: 53%; animation: snowFall 10.5s linear infinite -1.5s; }
.anim-bg.v-snow .ab:nth-child(9) { left: 60%; animation: snowFall 11.5s linear infinite -5.5s; }
.anim-bg.v-snow .ab:nth-child(10) { left: 67%; animation: snowFall 9.8s linear infinite -3.5s; }
.anim-bg.v-snow .ab:nth-child(11) { left: 74%; animation: snowFall 12.2s linear infinite -8s; }
.anim-bg.v-snow .ab:nth-child(12) { left: 81%; animation: snowFall 10.8s linear infinite -2.5s; }
.anim-bg.v-snow .ab:nth-child(13) { left: 88%; animation: snowFall 11.2s linear infinite -6.5s; }
.anim-bg.v-snow .ab:nth-child(14) { left: 95%; animation: snowFall 13.5s linear infinite -9s; }
.anim-bg.v-snow .ab:nth-child(15) { left: 7%; animation: snowFall 10.2s linear infinite -4.5s; }
.anim-bg.v-snow .ab:nth-child(16) { left: 22%; animation: snowFall 11.8s linear infinite -7.5s; }
.anim-bg.v-snow .ab:nth-child(17) { left: 36%; animation: snowFall 10.5s linear infinite -3s; }
.anim-bg.v-snow .ab:nth-child(18) { left: 50%; animation: snowFall 12s linear infinite -8.5s; }
.anim-bg.v-snow .ab:nth-child(n+19) { display: none; }
@keyframes snowFall { 0% { transform: translateY(0) translateX(0); } 50% { transform: translateY(50vh) translateX(25px); } 100% { transform: translateY(calc(100vh + 50px)) translateX(-15px); } }

.anim-bg.v-waves .ab {
  width: 200%;
  height: 200px;
  left: -50%;
  background: var(--lava-1);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'><path d='M0,100 Q50,40 100,100 T200,100 T300,100 T400,100 L400,200 L0,200 Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'><path d='M0,100 Q50,40 100,100 T200,100 T300,100 T400,100 L400,200 L0,200 Z' fill='black'/></svg>");
  -webkit-mask-size: 400px 200px;
  mask-size: 400px 200px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}
.anim-bg.v-waves .ab:nth-child(1) { bottom: -100px; opacity: .8; animation: waveScroll 10s linear infinite; }
.anim-bg.v-waves .ab:nth-child(2) { bottom: -60px; background: var(--lava-2); opacity: .65; animation: waveScroll 14s linear infinite reverse; -webkit-mask-size: 500px 200px; mask-size: 500px 200px; }
.anim-bg.v-waves .ab:nth-child(3) { bottom: -20px; opacity: .5; animation: waveScroll 18s linear infinite; -webkit-mask-size: 350px 200px; mask-size: 350px 200px; }
.anim-bg.v-waves .ab:nth-child(n+4) { display: none; }
@keyframes waveScroll { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: -400px 0; mask-position: -400px 0; } }

.anim-bg.v-godrays { background: radial-gradient(ellipse 80% 50% at 30% -15%, rgba(255,250,215,.22) 0%, transparent 70%); }
.anim-bg.v-godrays .ab {
  top: -30%;
  left: 25%;
  width: 60px;
  height: 170%;
  background: linear-gradient(180deg, rgba(255,255,225,.9) 0%, rgba(255,255,225,.45) 45%, rgba(255,255,225,.12) 80%, transparent 100%);
  filter: blur(10px);
  transform-origin: top center;
  mix-blend-mode: screen;
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(255,250,200,.3);
}
.anim-bg.v-godrays .ab:nth-child(1) { transform: rotate(8deg); animation: godrayShimmer 6s ease-in-out infinite; }
.anim-bg.v-godrays .ab:nth-child(2) { transform: rotate(24deg) scaleX(.75); animation: godrayShimmer 8s ease-in-out infinite -2s; }
.anim-bg.v-godrays .ab:nth-child(3) { transform: rotate(-10deg) scaleX(1.3); animation: godrayShimmer 7s ease-in-out infinite -4s; }
.anim-bg.v-godrays .ab:nth-child(4) { transform: rotate(42deg) scaleX(.55); animation: godrayShimmer 9s ease-in-out infinite -1s; }
.anim-bg.v-godrays .ab:nth-child(5) { transform: rotate(-24deg) scaleX(1.05); animation: godrayShimmer 10s ease-in-out infinite -3s; }
.anim-bg.v-godrays .ab:nth-child(n+6) { display: none; }
@keyframes godrayShimmer { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

.anim-bg.v-wind .ab:nth-child(1), .anim-bg.v-wind .ab:nth-child(2), .anim-bg.v-wind .ab:nth-child(3), .anim-bg.v-wind .ab:nth-child(4), .anim-bg.v-wind .ab:nth-child(5), .anim-bg.v-wind .ab:nth-child(6), .anim-bg.v-wind .ab:nth-child(7), .anim-bg.v-wind .ab:nth-child(8) { width: 60px; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.75) 50%, transparent 100%); border-radius: 2px; left: -80px; }
.anim-bg.v-wind .ab:nth-child(1) { top: 10%; animation: windBlow 3.5s linear infinite; }
.anim-bg.v-wind .ab:nth-child(2) { top: 22%; animation: windBlow 4.2s linear infinite -0.6s; width: 80px; }
.anim-bg.v-wind .ab:nth-child(3) { top: 35%; animation: windBlow 3.8s linear infinite -1.2s; width: 50px; }
.anim-bg.v-wind .ab:nth-child(4) { top: 48%; animation: windBlow 4.5s linear infinite -1.8s; width: 70px; }
.anim-bg.v-wind .ab:nth-child(5) { top: 60%; animation: windBlow 3.6s linear infinite -0.3s; }
.anim-bg.v-wind .ab:nth-child(6) { top: 72%; animation: windBlow 4.8s linear infinite -1.5s; width: 90px; }
.anim-bg.v-wind .ab:nth-child(7) { top: 84%; animation: windBlow 4s linear infinite -2.1s; width: 55px; }
.anim-bg.v-wind .ab:nth-child(8) { top: 92%; animation: windBlow 3.4s linear infinite -0.9s; width: 75px; }
.anim-bg.v-wind .ab:nth-child(9) { width: 70px; height: 160px; left: -100px; top: 30%; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); background: repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0, rgba(255,255,255,.5) 2px, transparent 2px, transparent 6px); border-radius: 0 0 40% 40% / 0 0 60% 60%; animation: tornadoMove 22s linear infinite -4s; filter: blur(.5px); }
.anim-bg.v-wind .ab:nth-child(10) { width: 100px; height: 200px; left: -140px; top: 40%; clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%); background: repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0, rgba(255,255,255,.35) 3px, transparent 3px, transparent 8px); border-radius: 0 0 45% 45% / 0 0 65% 65%; animation: tornadoMove 32s linear infinite -14s; filter: blur(1px); }
.anim-bg.v-wind .ab:nth-child(n+11) { display: none; }
@keyframes windBlow { from { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { transform: translateX(calc(100vw + 100px)); opacity: 0; } }
@keyframes tornadoMove { from { transform: translateX(0) rotate(0deg); } to { transform: translateX(calc(100vw + 200px)) rotate(720deg); } }

.sky-live { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .6s; }
.sky-live.active { opacity: 1; }
.sky-gradient { position: absolute; inset: 0; opacity: .5; transition: background 4s ease; }
.sky-stars { position: absolute; inset: 0; opacity: 0; transition: opacity 4s ease; }
.sky-stars .star { position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%; animation: starTwinkle 4s ease-in-out infinite; }
.sky-sun, .sky-moon { position: absolute; width: 55px; height: 55px; transition: transform 4s ease; will-change: transform; }
.sky-sun-core { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, #fff6c4 0%, #ffd93d 40%, #ffb340 70%, transparent 100%); box-shadow: 0 0 40px rgba(255,217,61,.8), 0 0 80px rgba(255,179,64,.5); }
.sky-moon-core { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffffff 0%, #e8e4f5 60%, #c3bfd6 100%); box-shadow: 0 0 25px rgba(255,255,255,.5), 0 0 50px rgba(200,200,255,.3); }

@media (prefers-reduced-motion: reduce) { .anim-bg .ab, .sky-stars .star { animation: none !important; } }

/* ============================================================
   LAYOUT
   ============================================================ */
.brand-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; flex-shrink: 0; }
.brand-logo-wrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 52px; }
.brand-logo-wrap img { height: 52px; width: auto; max-width: 100%; object-fit: contain; display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
.brand-logo-wrap .fallback { display: none; align-items: center; gap: 6px; color: var(--text); }
.brand-logo-wrap.no-logo img { display: none; }
/* Logo ist weiß: auf hellen Themes bleibt es weiß, bekommt aber einen kräftigen Schatten als Kontur */
body.light-theme .brand-logo-wrap img { filter: drop-shadow(0 0 1px rgba(0,0,0,0.55)) drop-shadow(0 1px 2px rgba(0,0,0,0.45)) drop-shadow(0 3px 8px rgba(0,0,0,0.35)); }
.brand-logo-wrap.no-logo .fallback { display: flex; }
.brand-name { font-weight: 800; font-size: calc(19px * var(--fs)); letter-spacing: -0.4px; color: var(--text); }
.icon-btn { width: 38px; height: 38px; border-radius: 11px; background: var(--glass); border: 1px solid var(--glass-border); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all .25s; }
.icon-btn:hover { background: var(--glass-hover); transform: scale(1.06); }

.datetime-bar { display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 100px; padding: 4px 12px; font-size: calc(11px * var(--fs)); font-weight: 600; color: var(--text-soft); margin-bottom: 8px; flex-shrink: 0; }
.datetime-bar iconify-icon { color: var(--accent); }
.datetime-sep { opacity: .4; }

.screen { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.screen.active { display: flex; }

.screen-title { font-size: calc(16px * var(--fs)); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; color: var(--text); flex-shrink: 0; }
.hint-text { font-size: calc(11px * var(--fs)); color: var(--text-faint); margin-bottom: 6px; flex-shrink: 0; }

.hero-compact { padding: 0 2px 8px; flex-shrink: 0; }
.hero-greet { font-size: calc(19px * var(--fs)); font-weight: 800; color: var(--text); line-height: 1.2; }
.hero-sub { font-size: calc(12px * var(--fs)); color: var(--text-soft); font-weight: 500; margin-top: 2px; }

.mood-row { display: flex; gap: 8px; margin-bottom: 9px; flex-shrink: 0; }
.mood-card { flex: 1; min-height: 94px; background: var(--glass); border-radius: var(--r-md); padding: 8px 5px 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; position: relative; backdrop-filter: blur(14px); border: 1px solid var(--glass-border); color: var(--text); transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .25s; }
.mood-card:hover { transform: translateY(-2px); background: var(--glass-hover); }
.mood-card:active { transform: translateY(0) scale(.97); }
.mood-icon { color: var(--accent); }
.mood-name { font-size: calc(13px * var(--fs)); font-weight: 800; color: var(--text); }
.mood-desc { font-size: calc(9.5px * var(--fs)); font-weight: 500; color: var(--text-faint); }
.mood-count { position: absolute; top: 5px; right: 5px; font-size: calc(10px * var(--fs)); font-weight: 800; background: var(--glass-strong); color: var(--text); padding: 2px 6px; border-radius: 100px; }
.mood-card.featured { background: linear-gradient(145deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 26px var(--accent-shadow); border-color: transparent; }
.mood-card.featured .mood-name, .mood-card.featured .mood-desc, .mood-card.featured .mood-count { color: #fff; }
.mood-card.featured .mood-icon { color: #fff; }
.mood-card.featured .mood-desc { opacity: .85; }
.mood-card.featured .mood-count { background: rgba(255,255,255,.3); }

.filter-compact { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-md); padding: 8px 9px; margin-bottom: 8px; backdrop-filter: blur(14px); flex-shrink: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; }
.chip { padding: 4px 9px; border: 1px solid var(--glass-border); border-radius: 100px; background: var(--glass); color: var(--text); font-weight: 700; font-size: calc(10.5px * var(--fs)); cursor: pointer; transition: all .2s; font-family: inherit; position: relative; }
.chip:hover { transform: translateY(-1px); background: var(--glass-hover); }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-prog { font-size: calc(8px * var(--fs)); opacity: .85; margin-left: 2px; font-weight: 700; }
.chip-sep { width: 1px; height: 14px; background: var(--glass-border); margin: 0 2px; }
.page-input { width: 100%; padding: 8px 11px; border: 1px solid var(--glass-border); border-radius: 9px; font-size: calc(12.5px * var(--fs)); font-weight: 500; outline: none; color: var(--text); background: var(--glass); font-family: inherit; }
.page-input::placeholder { color: var(--text-faint); }
.page-input:disabled { opacity: .5; cursor: not-allowed; }
.page-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-shadow); }
.page-info { font-size: calc(10px * var(--fs)); font-weight: 600; margin-top: 4px; text-align: center; min-height: 13px; }
.page-error { color: var(--warning); }
.page-success { color: var(--success); }

.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 6px; margin-bottom: 9px; flex-shrink: 0; }
.menu-tile { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-md); padding: 8px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--text); font-family: inherit; transition: all .2s; min-height: 56px; }
.menu-tile:hover { background: var(--glass-hover); transform: translateY(-2px); }
.menu-tile:active { transform: translateY(0) scale(.96); }
.menu-tile iconify-icon { color: var(--accent); }
.menu-tile span { font-size: calc(10.5px * var(--fs)); font-weight: 700; color: var(--text); }

.tip-box { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 8px; flex-shrink: 0; transition: opacity .3s; }
.tip-box.hidden { display: none; }
.tip-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.tip-label { display: flex; align-items: center; gap: 4px; font-size: calc(10px * var(--fs)); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.tip-timer { font-size: calc(10px * var(--fs)); font-weight: 700; color: var(--text-faint); background: var(--glass-strong); padding: 3px 8px; border-radius: 100px; }
.tip-text { font-size: calc(14.5px * var(--fs)); line-height: 1.45; color: var(--text); font-weight: 500; }

.scrabble-box { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 8px; flex-shrink: 0; transition: opacity .3s; }
.scrabble-box.hidden { display: none; }
.scrabble-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.scrabble-title { display: flex; align-items: center; gap: 4px; font-size: calc(10px * var(--fs)); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.scrabble-streak { font-size: calc(10px * var(--fs)); font-weight: 700; color: var(--text-faint); background: var(--glass-strong); padding: 3px 8px; border-radius: 100px; }
.scrabble-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 8px; min-height: 34px; align-items: flex-end; }
.scrabble-word-group { display: flex; gap: 4px; margin: 0 5px; }
.scrabble-slot { width: 24px; height: 32px; border-bottom: 2.5px solid var(--text-soft); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: calc(16px * var(--fs)); color: var(--text); cursor: default; transition: all .15s; border-radius: 3px 3px 0 0; }
.scrabble-slot.filled { background: var(--accent); color: #fff; border-radius: 4px; border-bottom-color: var(--accent); cursor: pointer; transform: translateY(-1px); }
.scrabble-slot.correct { background: var(--success); border-bottom-color: var(--success); animation: scrabblePop .35s ease; }
.scrabble-slot.wrong { background: var(--warning); border-bottom-color: var(--warning); animation: scrabbleShake .4s ease; }
@keyframes scrabblePop { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes scrabbleShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.scrabble-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 4px 0; min-height: 42px; align-items: center; }
.scrabble-tile { width: 32px; height: 36px; background: var(--scrabble-tile-bg); color: var(--scrabble-tile-text); border-radius: 5px; border: none; font-weight: 900; font-size: calc(16px * var(--fs)); font-family: 'Georgia', serif; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.18), 0 4px 8px rgba(0,0,0,.2); transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .25s; display: flex; align-items: center; justify-content: center; padding: 0; transform: rotate(var(--tilt, 0deg)); }
.scrabble-tile:hover { transform: rotate(var(--tilt, 0deg)) translateY(-3px) scale(1.08); }
.scrabble-tile:active { transform: rotate(var(--tilt, 0deg)) translateY(1px) scale(.96); }
.scrabble-tile.used { opacity: 0; pointer-events: none; transform: rotate(var(--tilt, 0deg)) scale(0); }
.scrabble-tile.wrong { animation: scrabbleShake .4s ease; }
.scrabble-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; font-size: calc(10px * var(--fs)); color: var(--text-faint); font-weight: 600; }
.scrabble-solved { color: var(--success); font-weight: 800; }
.scrabble-solved.hidden { display: none; }

.mini-bar { background: var(--glass); border-radius: var(--r-md); padding: 7px 11px; display: flex; align-items: center; gap: 9px; backdrop-filter: blur(20px); border: 1px solid var(--glass-border); margin-top: auto; flex-shrink: 0; }
.mini-thumb { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.mini-info { flex: 1; min-width: 0; }
.mini-label { font-size: calc(9px * var(--fs)); font-weight: 700; color: var(--text-faint); letter-spacing: 1.2px; text-transform: uppercase; }
.mini-title { font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--text); }
.mini-play { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.scroll-area { flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.scroll-area::-webkit-scrollbar { width: 3px; }
.scroll-area::-webkit-scrollbar-thumb { background: var(--glass-strong); border-radius: 100px; }

.screen-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 5px; color: var(--text); flex-shrink: 0; }
.screen-header h2 { font-size: calc(15px * var(--fs)); margin: 0; display: flex; align-items: center; gap: 5px; }
.screen-header h2 iconify-icon { color: var(--accent); }
.count { font-size: calc(11px * var(--fs)); color: var(--text-faint); }
.sort-row { display: flex; gap: 4px; }
.sort-btn { padding: 5px 10px; border: 1px solid var(--glass-border); border-radius: 100px; font-size: calc(10px * var(--fs)); font-weight: 700; background: var(--glass); color: var(--text); cursor: pointer; font-family: inherit; }
.sort-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.index-list { flex: 1; min-height: 0; overflow-y: auto; background: var(--glass); border-radius: var(--r-md); padding: 8px; color: var(--text); scrollbar-width: thin; }
.index-list::-webkit-scrollbar { width: 3px; }
.index-list::-webkit-scrollbar-thumb { background: var(--glass-strong); border-radius: 100px; }
.index-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-bottom: 1px dashed var(--glass-border); font-size: calc(11.5px * var(--fs)); cursor: pointer; border-radius: 5px; gap: 6px; }
.index-item:hover { background: var(--glass-hover); }
.index-item:last-child { border-bottom: none; }
.index-item.range-selected { background: var(--glass-hover); }
.index-en { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.index-en.start-mark { color: var(--success); font-weight: 800; }
.index-en.end-mark { color: var(--warning); font-weight: 800; }
.index-de { color: var(--text-soft); flex: 1.4; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.index-pg { color: var(--text-faint); font-weight: 700; font-size: calc(10px * var(--fs)); background: var(--glass-strong); padding: 2px 6px; border-radius: 100px; flex-shrink: 0; }
#indexSelectionActionBar { margin-top: 8px; display: none; justify-content: space-between; align-items: center; background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 8px; padding: 6px 10px; color: var(--text); font-size: calc(11px * var(--fs)); flex-shrink: 0; }
#indexSelectionActionBar.show { display: flex; }

.btn { padding: 10px; border: 1px solid var(--glass-border); border-radius: 100px; font-weight: 600; font-size: calc(13px * var(--fs)); background: var(--glass-strong); color: var(--text); cursor: pointer; width: 100%; margin-top: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: all .25s; font-family: inherit; flex-shrink: 0; }
.btn:hover { background: var(--glass-hover); }
.btn.pri { background: var(--accent); border-color: transparent; color: #fff; }
.btn.tiny { padding: 5px 10px; width: auto; margin: 0; font-size: calc(11.5px * var(--fs)); }
.nav-btn { flex: 1; padding: 11px 6px; border: 1px solid var(--glass-border); border-radius: 100px; font-weight: 600; font-size: calc(13px * var(--fs)); background: var(--glass); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-family: inherit; }
.nav-btn.pri { background: var(--accent); border-color: transparent; color: #fff; }
.nav-btn.sec { background: var(--glass); }
.nav-btn.small { padding: 5px 10px; font-size: calc(11.5px * var(--fs)); }
.m-btn { flex: 1; padding: 11px; border: none; border-radius: 100px; font-weight: 600; font-size: calc(13.5px * var(--fs)); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-family: inherit; }
.m-btn.pri { background: var(--accent); color: #fff; }
.m-btn.sec { background: var(--glass); border: 1px solid var(--glass-border); color: var(--text); }
.f-btn { flex: 1; padding: 10px; border: none; border-radius: 100px; font-weight: 600; font-size: calc(12.5px * var(--fs)); cursor: pointer; font-family: inherit; }
.f-btn.next { background: var(--accent); color: #fff; }
.f-btn.noidea { background: var(--glass-strong); color: var(--text); }
.speak { position: absolute; top: 8px; right: 8px; background: var(--glass); border: 1px solid var(--glass-border); cursor: pointer; opacity: .8; padding: 6px; border-radius: 50%; z-index: 10; color: var(--text); }
.speak.active { animation: pulse .8s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.15);} }
.problem-word-btn { margin-top: 5px; padding: 5px 12px; border: 1px solid var(--glass-border); background: var(--glass-strong); border-radius: 100px; font-size: calc(10.5px * var(--fs)); font-weight: 600; color: var(--text); cursor: pointer; font-family: inherit; }
.problem-word-btn.added { background: var(--warning); border-color: transparent; color: #fff; }

.practice-stats, .test-stats { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 100px; padding: 6px 11px; margin-bottom: 7px; display: flex; justify-content: center; gap: 10px; font-weight: 600; font-size: calc(12px * var(--fs)); color: var(--text); flex-shrink: 0; }
.test-stats { justify-content: space-between; }
.scene { width: 100%; flex: 1; min-height: 0; perspective: 1200px; margin: 7px 0; }
.card { width: 100%; height: 100%; position: relative; cursor: pointer; transition: transform .7s cubic-bezier(.22,1,.36,1); transform-style: preserve-3d; }
.card.flipped { transform: rotateY(180deg); }
.face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 16px 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: var(--glass-strong); backdrop-filter: blur(14px); color: var(--text); }
.face.back { transform: rotateY(180deg); }
.word { font-size: calc(26px * var(--fs)); font-weight: 700; margin-bottom: 5px; word-break: break-word; color: var(--text); }
.trans { font-size: calc(19px * var(--fs)); color: var(--accent); font-weight: 600; word-break: break-word; }
.hint { font-size: calc(11px * var(--fs)); color: var(--text-faint); margin-top: 7px; }
.nav { display: flex; gap: 7px; margin: 5px 0; flex-shrink: 0; }

.progress-bar { width: 100%; height: 5px; background: var(--glass); border-radius: 100px; margin: 5px 0 7px; overflow: hidden; flex-shrink: 0; }
.progress-bar div { height: 100%; background: var(--accent); border-radius: 100px; width: 0; transition: width .4s; }
.timer-display { text-align: center; font-size: calc(12px * var(--fs)); color: var(--text-soft); margin-bottom: 5px; display: flex; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; }
.grade-counter { text-align: center; font-size: calc(12px * var(--fs)); color: var(--text-soft); margin-bottom: 7px; font-weight: 600; flex-shrink: 0; }
.grade-counter.ready { color: var(--success); }
.test-card { flex: 1; min-height: 0; background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 16px 14px; text-align: center; color: var(--text); display: flex; flex-direction: column; justify-content: center; position: relative; backdrop-filter: blur(14px); }
.test-word { font-size: calc(24px * var(--fs)); font-weight: 700; margin-bottom: 9px; word-break: break-word; color: var(--text); }
.input { width: 100%; padding: 10px; border: 1px solid var(--glass-border); border-radius: 100px; font-size: calc(15px * var(--fs)); font-weight: 600; margin-bottom: 9px; text-align: center; outline: none; color: var(--text); background: var(--glass); font-family: inherit; text-transform: lowercase; }
.input::placeholder { color: var(--text-faint); font-size: calc(12px * var(--fs)); text-transform: none; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-shadow); }
.feedback { text-align: center; padding: 8px; border-radius: 100px; margin: 7px 0; font-weight: 600; font-size: calc(13px * var(--fs)); color: #fff; }
.feedback.ok { background: #4CAF50; }
.feedback.bad { background: #ef4444; }
.test-actions { display: flex; gap: 7px; margin-top: 7px; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 7px; flex-shrink: 0; }
.stat-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-sm); padding: 8px 5px; text-align: center; color: var(--text); }
.stat-val { font-size: calc(17px * var(--fs)); font-weight: 700; }
.stat-lbl { font-size: calc(10px * var(--fs)); color: var(--text-faint); }
.stats-section { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-sm); padding: 10px; margin-bottom: 7px; color: var(--text); }
.stats-section h3 { font-size: calc(12.5px * var(--fs)); margin-bottom: 5px; }
.session-list { max-height: 130px; overflow-y: auto; }
.session-item { display: flex; justify-content: space-between; align-items: center; padding: 5px 9px; margin-bottom: 4px; background: var(--glass); border-radius: 8px; font-size: calc(11px * var(--fs)); color: var(--text); }
.result-good { color: #4ade80; font-weight: 600; }
.result-bad { color: #f87171; font-weight: 600; }
.delete-btn { background: none; border: none; cursor: pointer; opacity: .7; color: var(--text); }
.dir-bar { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: calc(11px * var(--fs)); color: var(--text); }
.dir-bar-label { min-width: 58px; font-weight: 600; }
.dir-bar-track { flex: 1; height: 9px; background: var(--glass); border-radius: 100px; overflow: hidden; }
.dir-bar-fill { height: 100%; background: var(--success); border-radius: 100px; transition: width .5s; }
.dir-bar-fill.bad { background: #f87171; }
.dir-bar-fill.mid { background: #fbbf24; }
.hard-word-item { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--glass-border); font-size: calc(11px * var(--fs)); color: var(--text); }
.hard-word-item:last-child { border-bottom: none; }
.hard-word-en { font-weight: 600; }
.hard-word-rate { color: #f87171; font-weight: 700; }
.hard-word-meta { color: var(--text-faint); font-size: calc(9.5px * var(--fs)); }
.data-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 5px; }
.data-btn { padding: 8px; border: 1px solid var(--glass-border); border-radius: 8px; background: var(--glass); color: var(--text); font-weight: 600; font-size: calc(11.5px * var(--fs)); cursor: pointer; font-family: inherit; }
.data-btn:hover { background: var(--glass-hover); }
.data-btn.primary { background: var(--accent); border-color: transparent; color: #fff; }
.badge-mini { background: var(--accent); color: #fff; padding: 0 6px; border-radius: 100px; font-size: calc(9.5px * var(--fs)); margin-left: 3px; }

.ach-progress-bar { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 100px; height: 7px; margin-bottom: 5px; overflow: hidden; flex-shrink: 0; }
.ach-progress-bar div { height: 100%; background: var(--accent); border-radius: 100px; transition: width .5s; width: 0; }
.ach-progress-text { font-size: calc(10px * var(--fs)); color: var(--text-faint); text-align: center; margin-bottom: 7px; flex-shrink: 0; }
.ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-right: 2px; }
.ach-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-sm); padding: 7px 3px; text-align: center; position: relative; color: var(--text); }
.ach-card.unlocked { background: var(--glass-hover); }
.ach-card.locked { opacity: .4; filter: grayscale(.8); }
.ach-icon { display: block; margin-bottom: 2px; color: var(--accent); }
.ach-name { font-size: calc(9.5px * var(--fs)); font-weight: 700; color: var(--text); }
.ach-check { position: absolute; top: 3px; right: 3px; color: var(--success); opacity: 0; }
.ach-card.unlocked .ach-check { opacity: 1; }

.streak-display { text-align: center; margin-bottom: 8px; flex-shrink: 0; }
.streak-num { font-size: calc(22px * var(--fs)); font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--text); }
.streak-num iconify-icon { color: var(--accent); }
.streak-lbl { font-size: calc(11px * var(--fs)); color: var(--text-faint); }
.cal-month-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; flex-shrink: 0; }
.cal-month-nav h3 { font-size: calc(13px * var(--fs)); margin: 0; color: var(--text); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; color: var(--text); margin-bottom: 7px; }
.cal-day { aspect-ratio: 1; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: calc(11px * var(--fs)); font-weight: 600; color: var(--text); }
.cal-head { text-align: center; font-weight: 600; font-size: calc(10px * var(--fs)); color: var(--text-faint); }
.cal-active { background: var(--accent); color: #fff !important; }
.cal-today { border: 2px solid var(--accent); }
.cal-empty { background: transparent; }

.problem-item { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--glass-border); color: var(--text); }
.problem-item:last-child { border-bottom: none; }
.problem-word-en { font-weight: 600; font-size: calc(12.5px * var(--fs)); color: var(--text); }
.problem-word-de { color: var(--text-soft); font-size: calc(11px * var(--fs)); }
.problem-count { color: #f87171; font-weight: 700; font-size: calc(11px * var(--fs)); margin-right: 6px; }
.problem-remove { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 6px; padding: 3px 7px; font-size: calc(10px * var(--fs)); color: var(--text); cursor: pointer; font-family: inherit; }

.hidden { display: none !important; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 3000; opacity: 0; visibility: hidden; transition: all .3s; padding: 16px; }
.modal-overlay.show { opacity: 1; visibility: visible; }
.modal-box { background: var(--bg-3); border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 18px 16px; max-width: 380px; width: 100%; transform: scale(.92) translateY(16px); transition: transform .3s cubic-bezier(.34,1.56,.64,1); max-height: 90vh; overflow-y: auto; color: var(--text); }
.modal-overlay.show .modal-box { transform: scale(1) translateY(0); }
.modal-title { text-align: center; font-size: calc(16px * var(--fs)); font-weight: 700; margin-bottom: 9px; color: var(--text); }
.modal-content { font-size: calc(12.5px * var(--fs)); margin-bottom: 11px; text-align: center; line-height: 1.4; color: var(--text); }
.modal-btns { display: flex; gap: 7px; margin-top: 11px; }
.grade-info-box { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-sm); padding: 9px; margin: 9px 0; text-align: center; font-size: calc(11.5px * var(--fs)); color: var(--text-soft); line-height: 1.45; }
.grade-info-box strong { color: var(--accent); }

.ob-field { margin-bottom: 11px; }
.ob-field label { font-size: calc(10.5px * var(--fs)); font-weight: 800; text-transform: uppercase; color: var(--text-faint); letter-spacing: 1px; display: block; margin-bottom: 5px; }
.input-text { width: 100%; padding: 9px 13px; border: 1px solid var(--glass-border); border-radius: 10px; font-size: calc(13.5px * var(--fs)); font-weight: 500; outline: none; color: var(--text); background: var(--glass); font-family: inherit; }
.input-text::placeholder { color: var(--text-faint); }
.input-text:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-shadow); }
.ob-class-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ob-class-btn { padding: 9px 2px; border: 1px solid var(--glass-border); border-radius: 8px; background: var(--glass); color: var(--text); font-weight: 700; font-size: calc(12.5px * var(--fs)); cursor: pointer; font-family: inherit; transition: all .2s; }
.ob-class-btn:hover { background: var(--glass-hover); }
.ob-class-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ============================================================
   SETTINGS
   ============================================================ */
.settings-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  z-index: 4000;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
  display: flex; align-items: center; justify-content: center;
  padding: 6px;
}
.settings-overlay.show { opacity: 1; visibility: visible; }

.settings-box {
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 440px;
  max-height: 98vh;
  overflow-y: auto;
  padding: 12px 14px;
  color: var(--text);
  transform: scale(.94) translateY(18px);
  transition: transform .35s;
  scrollbar-width: thin;
}
.settings-box::-webkit-scrollbar { width: 3px; }
.settings-box::-webkit-scrollbar-thumb { background: var(--glass-strong); border-radius: 100px; }
.settings-overlay.show .settings-box { transform: scale(1) translateY(0); }

.settings-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.settings-header h2 { font-size: calc(15px * var(--fs)); color: var(--text); font-weight: 700; }
.settings-close {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text);
  font-size: calc(12px * var(--fs));
  display: flex; align-items: center; justify-content: center;
}

.settings-section { margin-bottom: 8px; }
.settings-section-title {
  font-size: calc(9px * var(--fs));
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-faint);
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.settings-section .input-text {
  padding: 6px 11px;
  font-size: calc(12px * var(--fs));
  border-radius: 8px;
}

/* ============ THEME-AUSWAHL ============ */
.theme-selector {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  padding: 0;
}
.theme-dot {
  aspect-ratio: 1;
  max-width: 34px;
  margin: 0 auto;
  width: 100%;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  padding: 0;
  background: linear-gradient(90deg, var(--c1) 50%, var(--c2) 50%);
  box-shadow: 0 3px 8px rgba(0,0,0,.2);
  transition: transform .25s;
  position: relative;
  overflow: hidden;
}
.theme-dot:hover { transform: scale(1.08); }
.theme-dot.active { transform: scale(1.15); box-shadow: 0 4px 12px rgba(0,0,0,.3), 0 0 0 2px var(--text); }
.theme-dot iconify-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* ============ CUSTOM COLOR PICKER ============ */
.custom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 6px;
}
.color-field {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 4px 8px;
}
.color-field span {
  font-size: calc(10px * var(--fs));
  font-weight: 700;
  color: var(--text-soft);
  flex: 1;
}
.color-field input[type=color] {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
}
.color-field input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.color-field input[type=color]::-webkit-color-swatch {
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 8px;
}

/* ============ BUTTONS (Zufall/Auto) ============ */
.action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin: 5px 0 0;
}
.action-btn {
  padding: 7px 6px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--text);
  font-weight: 700;
  font-size: calc(11px * var(--fs));
  cursor: pointer;
  font-family: inherit;
}
.action-btn:hover { background: var(--glass-hover); }

/* ============ SCHRIFTGRÖSSE ============ */
.fs-selector { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.fs-btn {
  padding: 7px 4px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--glass);
  color: var(--text);
  font-weight: 700;
  font-size: calc(11px * var(--fs));
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.fs-btn:hover { background: var(--glass-hover); }
.fs-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ============ ANIMATIONEN-AUSWAHL ============ */
.anim-selector {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}
.anim-dot {
  aspect-ratio: 1;
  border-radius: 8px;
  cursor: pointer;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px;
  color: var(--text);
  transition: all .2s;
  font-family: inherit;
}
.anim-dot:hover { background: var(--glass-hover); }
.anim-dot.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.anim-dot iconify-icon { width: 15px; height: 15px; }
.anim-dot-label { font-size: calc(7px * var(--fs)); font-weight: 700; text-align: center; line-height: 1; }

/* ============ TOGGLES ============ */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 6px 8px;
}
.setting-row span {
  font-size: calc(10.5px * var(--fs));
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toggle {
  position: relative;
  width: 30px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--glass-strong);
  border-radius: 100px;
  transition: .3s;
  border: 1px solid var(--glass-border);
}
.toggle-slider:before {
  content: '';
  position: absolute;
  height: 12px; width: 12px;
  left: 2px; bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: .3s;
}
.toggle input:checked + .toggle-slider { background: var(--accent); }
.toggle input:checked + .toggle-slider:before { transform: translateX(12px); }

/* ============ HINTERGRUNDBILD ============ */
.bg-image-row {
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--text);
}
.bg-image-row input[type=range] { flex: 1; accent-color: var(--accent); }
.bg-image-row .slider-value {
  min-width: 34px;
  text-align: right;
  font-size: calc(11px * var(--fs));
  font-weight: 700;
  color: var(--accent);
}
.data-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.data-btn {
  padding: 7px 9px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--glass);
  color: var(--text);
  font-weight: 600;
  font-size: calc(11px * var(--fs));
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.data-btn:hover { background: var(--glass-hover); }
.data-btn.primary { background: var(--accent); border-color: transparent; color: #fff; }

/* ============ SYSTEMCHECK ============ */
#systemcheckResult {
  background: var(--glass);
  border-radius: var(--r-sm);
  padding: 6px;
  border: 1px solid var(--glass-border);
  max-height: 100px;
  overflow-y: auto;
}
.syscheck-line {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 0;
  font-size: calc(10px * var(--fs));
  color: var(--text);
}
.syscheck-line.ok::before { content: '✓'; color: var(--success); font-weight: 800; }
.syscheck-line.fail::before { content: '✗'; color: var(--warning); font-weight: 800; }
.syscheck-summary {
  margin-top: 4px; padding-top: 4px;
  border-top: 1px solid var(--glass-border);
  font-weight: 700;
  text-align: center;
  font-size: calc(11px * var(--fs));
}

/* ============ POPUPS ============ */
.achievement-overlay, .ach-detail-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 5500; opacity: 0; visibility: hidden; transition: all .3s; padding: 14px; }
.achievement-overlay.show, .ach-detail-overlay.show { opacity: 1; visibility: visible; }
.achievement-popup, .ach-detail-card { background: var(--bg-2); border: 2px solid var(--accent); border-radius: var(--r-lg); padding: 20px 18px; max-width: 320px; width: 100%; text-align: center; color: var(--text); transform: scale(.85) translateY(20px); transition: transform .45s cubic-bezier(.34,1.56,.64,1); position: relative; }
.achievement-overlay.show .achievement-popup, .ach-detail-overlay.show .ach-detail-card { transform: scale(1) translateY(0); }
.achievement-close-btn { position: absolute; top: 5px; right: 5px; background: none; border: none; color: var(--text); cursor: pointer; opacity: .6; width: 26px; height: 26px; }
.achievement-icon, .ach-detail-icon { color: var(--accent); margin-bottom: 4px; display: flex; align-items: center; justify-content: center; }
.achievement-title, .ach-detail-title { font-size: calc(16px * var(--fs)); font-weight: 800; margin-bottom: 4px; color: var(--text); }
.achievement-desc, .ach-detail-desc { font-size: calc(12px * var(--fs)); color: var(--text-soft); line-height: 1.45; margin-bottom: 11px; }
.ach-detail-close { width: 100%; padding: 9px; background: var(--accent); color: #fff; border: none; border-radius: 100px; font-weight: 600; font-size: calc(12.5px * var(--fs)); cursor: pointer; font-family: inherit; }

/* ============ TUTORIAL ============ */
.tutorial-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); backdrop-filter: blur(8px); z-index: 9000; display: none; align-items: center; justify-content: center; padding: 16px; }
.tutorial-overlay.show { display: flex; }
.tutorial-box { background: var(--bg-2); border: 2px solid var(--accent); border-radius: var(--r-lg); padding: 22px 20px; max-width: 360px; width: 100%; text-align: center; color: var(--text); }
.tutorial-step { display: none; }
.tutorial-step.active { display: block; }
.tutorial-icon { color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 7px; }
.tutorial-title { font-size: calc(16px * var(--fs)); font-weight: 800; margin-bottom: 6px; color: var(--text); }
.tutorial-text { font-size: calc(12.5px * var(--fs)); color: var(--text-soft); line-height: 1.5; margin-bottom: 13px; }
.tutorial-progress { display: flex; gap: 5px; justify-content: center; margin-bottom: 11px; }
.tutorial-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--glass-strong); transition: all .3s; }
.tutorial-dot.active { background: var(--accent); width: 20px; border-radius: 4px; }
.tutorial-nav { display: flex; gap: 7px; }
.tutorial-btn { flex: 1; padding: 10px; border: none; border-radius: 100px; font-weight: 600; font-size: calc(12.5px * var(--fs)); cursor: pointer; font-family: inherit; }
.tutorial-btn.prev { background: var(--glass); color: var(--text); border: 1px solid var(--glass-border); }
.tutorial-btn.next { background: var(--accent); color: #fff; }
.tutorial-btn.skip { background: transparent; color: var(--text-faint); font-size: calc(11.5px * var(--fs)); padding: 5px; width: 100%; margin-top: 7px; }

/* ============ CELEBRATION ============ */
.celebration-layer { position: fixed; inset: 0; z-index: 6000; pointer-events: none; overflow: hidden; }
.celebration-layer .cel { position: absolute; pointer-events: none; }
.cel-confetti { width: 8px; height: 8px; animation: celFall 2.6s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes celFall { 0% { transform: translateY(-20px) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg) scale(.3); opacity: 0; } }
.cel-drop { width: 10px; height: 10px; border-radius: 50% 50% 50% 0; animation: celDrop 2.2s cubic-bezier(.4,0,.7,1) forwards; }
@keyframes celDrop { 0% { transform: translateY(-40px) rotate(-45deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(-45deg); opacity: 0; } }
.cel-wave { width: 80px; height: 80px; border-radius: 50%; border: 3px solid; animation: celWave 2s ease-out forwards; }
@keyframes celWave { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(5); opacity: 0; } }
.cel-leaf { width: 12px; height: 16px; border-radius: 50% 0 50% 0; animation: celLeaf 3s ease-in forwards; }
@keyframes celLeaf { 0% { transform: translateY(-40px) rotate(0); opacity: 1; } 100% { transform: translateY(105vh) rotate(540deg); opacity: 0; } }
.cel-spark { width: 8px; height: 8px; border-radius: 50%; animation: celSpark 1.6s ease-out forwards; }
@keyframes celSpark { 0% { transform: scale(0); opacity: 1; } 50% { transform: scale(1.6); opacity: 1; } 100% { transform: scale(.4); opacity: 0; } }
.cel-heart { width: 14px; height: 14px; animation: celHeart 2.8s ease-out forwards; }
@keyframes celHeart { 0% { transform: translateY(20px) scale(0); opacity: 0; } 20% { transform: translateY(0) scale(1.1); opacity: 1; } 100% { transform: translateY(-90vh) scale(.9); opacity: 0; } }
.cel-blossom { width: 10px; height: 10px; border-radius: 50%; animation: celBlossom 2.8s ease-in forwards; }
@keyframes celBlossom { 0% { transform: translateY(-20px) scale(0); opacity: 1; } 100% { transform: translateY(105vh) rotate(400deg); opacity: 0; } }
.cel-star { width: 16px; height: 16px; animation: celStar 2.6s ease-out forwards; }
@keyframes celStar { 0% { transform: translateY(20vh) scale(0); opacity: 0; } 30% { transform: translateY(0) scale(1.2); opacity: 1; } 100% { transform: translateY(-90vh) scale(1.4); opacity: 0; } }
.cel-glitter { width: 5px; height: 5px; border-radius: 50%; animation: celGlitter 1.8s ease-in-out infinite; }
@keyframes celGlitter { 0%, 100% { transform: scale(.5); opacity: .3; } 50% { transform: scale(1.5); opacity: 1; } }
.cel-shape { width: 10px; height: 10px; animation: celShape 2.4s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes celShape { 0% { transform: translateY(-20px); opacity: 1; } 100% { transform: translateY(105vh) rotate(540deg); opacity: 0; } }
/* ============================================================
   COPYRIGHT
   ============================================================ */
.copyright {
  text-align: center;
  font-size: 9px;
  font-weight: 500;
  color: var(--text-faint);
  opacity: .55;
  margin-top: 10px;
  margin-bottom: 2px;
  letter-spacing: .3px;
  user-select: none;
  pointer-events: none;
}