:root { 
      --cell: 64px; 
      --gap: 8px; 
      --backdrop: rgba(0,0,0,.55); 
      --avatar-scale: 1.0; 

      /* Ghost-Animation */
      --ghost-start-delay:   1000ms; /* Delay nach anzeigen des Captchas bis zum Beginn der Ghost-Animation */
      --ghost-move-ms:       2500ms; /* Bewegung */
      --ghost-fade-in-ms:     500ms; /* Einblenden (weicher) */
      --ghost-fade-in-delay:    0ms; /* Einblendverzögerung, optional */
      --ghost-fade-out-ms:    500ms; /* Ausblenden (weicher) */

    }
    html, body { height: 100%; }
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.5; margin:0; color:#111; background:#fff; }
    .page { min-height: 100svh; padding: 1rem; }

    label { display:block; margin:.5rem 0 .25rem; }
    input[type="text"], input[type="password"] { width:100%; padding:.6rem; border:1px solid #bbb; border-radius:.3rem; }
    button { background:#0a66c2; color:#fff; border:0; border-radius:.4rem; padding:.8rem 1rem; font-weight:600; cursor:pointer; }
    button:disabled { opacity:.6; cursor:not-allowed; }
    .row { margin:.75rem 0; }
    .assist { font-size:.9rem; color:#555; }

    /* Farben (hell/kräftig) */
    .c0 { background:#ff3b30; color:#222; } /* rot */
    .c1 { background:#ff9500; color:#222; } /* orange */
    .c2 { background:#ffd60a; color:#222; } /* gelb */
    .c3 { background:#0a84ff; color:#222; } /* blau */
    .c4 { background:#34c759; color:#222; } /* grün */
    .c5 { background:#af52de; color:#222; } /* lila */

    /* MODAL OVERLAY */
    .modal {
      position: fixed; inset: 0;
      display: none;
      align-items: center; justify-content: center;
      background: var(--backdrop);
      -webkit-backdrop-filter: blur(8px) saturate(110%);
      backdrop-filter: blur(8px) saturate(110%);
      z-index: 9990;
      overscroll-behavior: contain;
      padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    }
    .modal.open { display: flex; }
    .modal-card {
      background: #fff; color:#111; border-radius: .75rem;
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
      width: min(96vw, 540px);
      max-height: 90svh; overflow: auto;
      padding: 1rem;
    }
    .modal-header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; }
    .modal-title { font-weight:700; font-size:1.05rem; }
    .modal-close { background:transparent; color:#333; border:1px solid #ccc; padding:.4rem .6rem; border-radius:.4rem; cursor:pointer; }

    /* FLEX-Layout im Modal: Portrait = Spalte, Landscape (Phone) = Reihe */
    .captcha-flex { display:flex; flex-direction: column; gap: 12px; }
    .captcha-info { flex: 0 0 auto; }
    .captcha-grid { flex: 1 1 auto; display:flex; align-items:center; justify-content:center; min-height: 40svh; }

    /* Phone-Querformat (bis ~900px Breite): links Info, rechts Grid */
    @media (orientation: landscape) and (max-width: 900px) {
      .captcha-flex { flex-direction: row; align-items: top; }
      .captcha-info { flex: 1 1 42%; }
      .captcha-grid { flex: 1 1 58%; min-height: 60svh; }
    }
    @media (max-height: 520px) {
      :root { --cell: 48px; --gap: 4px; }
    }
    @media (max-height: 560px) {
      #captchaInfo { line-height: 1.4; }
      #captchaInfo .modal-title { margin-bottom: .25rem; }
    }    

    /* GRID im Modal */
    .grid { display:grid; gap:var(--gap); touch-action: none; user-select:none; }
    .grid[data-n="3"] { grid-template-columns: repeat(3, var(--cell)); }
    .grid[data-n="4"] { grid-template-columns: repeat(4, var(--cell)); }

    .cell {
      background: #ffffff;            /* Jelly-Formen sitzen auf weißem Grund */
      position: relative;
      width: var(--cell); height: var(--cell);
      border-radius: .6rem;
      box-shadow: 0 1px 2px rgba(0,0,0,.18), inset 0 0 0 3px rgba(0,0,0,.12);
      display: flex; align-items: center; justify-content: center;
      cursor: grab; outline-offset: 2px;
      user-select: none;
      overflow: hidden;               /* falls eine Form minimal übersteht */
    }

    .cell.dim { opacity:.30; }
    .dragging { outline:3px dashed rgba(0,0,0,.5); cursor:grabbing; }
    .swap-hint { outline:3px solid rgba(0,0,0,.3); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.49); }
    .previewed-src { /* optional: leichte Markierung, dass hier die Zielform steht */
      /* z.B. keine Styles nötig, nur falls debug hilfreich */
    }
    .previewed-dst { /* dito */ }

    @keyframes wobble {
      0%   { transform: scale(1.00); }
      30%  { transform: scale(1.10, 0.90); }
      60%  { transform: scale(0.92, 1.08); }
      100% { transform: scale(1.00); }
    }

    .sparkle {
      position: fixed; /* wichtig: fixed statt absolute */
      width: 12px;
      height: 12px;
      z-index: 99999; /* über Modal und Avatare! */
      background: radial-gradient(circle,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,0.2) 60%,
        rgba(255,255,255,0) 100%);
      border-radius: 50%;
      pointer-events: none;
      opacity: 0;
      animation: sparkleAnim 700ms ease-out forwards;
    }

    @keyframes sparkleAnim {
      0%   { transform: scale(0.4); opacity: 1; }
      40%  { transform: scale(1.4); opacity: 1; }
      100% { transform: scale(0.1); opacity: 0; }
    }

    /* Drag-/Swap-Avatare (per left/top) */
    .drag-avatar, .swap-avatar {
      position: fixed; 
      left: 0; 
      top: 0;
      width:var(--cell); 
      height:var(--cell);
      border-radius:.6rem;
      box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 0 0 3px rgba(0,0,0,.28);
      pointer-events: none;
      z-index: 9999;
      transform: scale(var(--avatar-scale));
      transform-origin: center;
    }
    /*.animating { transition: left 200ms ease, top 200ms ease, opacity 200ms ease; }*/
    /* Sanftere, deutlichere Bewegung */
    .animating {
      transition:
        left 260ms cubic-bezier(.4, 0, .2, 1),
        top  260ms cubic-bezier(.4, 0, .2, 1),
        opacity 200ms ease;
    }

    /* FEEDBACK: Shake bei Fehlzug */
    @keyframes shake {
      0% { transform: translateX(0); }
      20%{ transform: translateX(-6px); }
      40%{ transform: translateX(6px); }
      60%{ transform: translateX(-4px); }
      80%{ transform: translateX(4px); }
      100%{ transform: translateX(0); }
    }
    .shake { animation: shake 240ms ease; }

    /* FEEDBACK: Erfolgsglow auf den passenden Steinen */

    @keyframes matchPulse {
      0% {
        box-shadow: 0 0 0 0 var(--match-color),
        inset 0 0 0 3px rgba(255,255,255,0.9);
        transform: scale(1.04);
      }
      60% {
        box-shadow: 0 0 20px 10px var(--match-color),
        inset 0 0 0 3px rgba(255,255,255,0.9);
        transform: scale(1.0);
      }
      100% {
        box-shadow: 0 0 0 0 var(--match-color),
        inset 0 0 0 3px rgba(255,255,255,0.9);
        transform: scale(1.0);
      }
    }

    .match { animation: matchPulse 900ms ease-out both; }

    /* Sehr schmale Phones: Basis-Zellgröße runter */
    @media (max-width: 360px) { :root { --cell: 56px; --gap: 6px; } }
    @media (max-width: 320px) { :root { --cell: 48px; --gap: 6px; } }

    /* Ghost-Avatare für Demo (einmalig beim Öffnen) */
    .ghost-avatar {
      position: fixed; left: 0; top: 0;
      width: var(--cell); height: var(--cell);
      border-radius: .6rem;
      pointer-events: none;
      z-index: 9998; /* unter drag-avatar (9999), über Modal */
      opacity: 0;
      filter: saturate(0.9) brightness(1.05);
      box-shadow:
        0 6px 16px rgba(0,0,0,.38),
        inset 0 0 0 3px rgba(0,0,0,.50),
        inset 0 0 16px rgba(0,0,0,.12);
      transform: translate(-50%, -50%);

      transition:
        left var(--ghost-move-ms) cubic-bezier(.3,0,.3,1),
        top  var(--ghost-move-ms) cubic-bezier(.3,0,.3,1),
        opacity var(--ghost-fade-in-ms) ease var(--ghost-fade-in-delay),
        transform var(--ghost-fade-in-ms) ease var(--ghost-fade-in-delay);
    }
    /* Start- / Laufzustand */
    .ghost-start { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
    .ghost-run   { transform: translate(-50%,-50%) scale(1.0); }

    /* Sichtbar (separat, damit Fade-In sauber verzögert werden kann) */
    .ghost-visible { opacity: .95; }

    /* Beim Ausblenden: Dauer/Delay auf Fade-Out-Werte umschalten */
    .ghost-fadeout {
      transition:
        left var(--ghost-move-ms) cubic-bezier(.3,0,.3,1),
        top  var(--ghost-move-ms) cubic-bezier(.3,0,.3,1),
        opacity var(--ghost-fade-out-ms) ease 0ms,
        transform var(--ghost-fade-out-ms) ease 0ms;
    }


  
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) { .animating{transition:none!important;} .match{animation:none!important;} .sparkle,.ghost-avatar{display:none!important;} }
.captcha-busy{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(255,255,255,.6);}
.captcha-busy.open{display:flex;}
.captcha-spinner{width:28px;height:28px;border:3px solid #ccc;border-top-color:#0a66c2;border-radius:50%;animation:spin 900ms linear infinite;}
@keyframes spin { to{ transform: rotate(360deg);} }