body { font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif; overscroll-behavior-y: none; }
    img { -webkit-user-drag: none; user-select: none; }

    /* --- Unified motion language (#5) ---
       One spring curve + one snappy curve, reused everywhere for a cohesive feel. */
    :root {
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-snap:   cubic-bezier(0.4, 0, 0.2, 1);
      --dur-fast: 0.14s;
      --dur-base: 0.25s;
    }

    /* Soft depth on every piece (#7) */
    #board-container img,
    #board-container span { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.28)); }
    /* The lifted piece during a drag floats higher (#7) */
    .drag-piece { filter: drop-shadow(0 8px 10px rgba(0,0,0,0.45)) !important; transform: scale(1.06); }

    @keyframes king-shake {
      0%, 100% { transform: translateX(0) rotate(0deg); }
      25% { transform: translateX(-4px) rotate(-5deg); }
      75% { transform: translateX(4px) rotate(5deg); }
    }
    @keyframes mc-confetti {
      0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
      70% { opacity: 1; }
      100% { transform: translate(var(--tx), calc(var(--ty) + 200px)) rotate(var(--rot)) scale(0.2); opacity: 0; }
    }
    @keyframes pp-pop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.15); } }
    @keyframes slide-up { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
    @keyframes float-up { 0% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -80px) scale(1.4); } }

    .shake-piece { animation: king-shake 0.4s ease-in-out; }
    .pp-pop { animation: pp-pop 0.3s ease-out; }
    .slide-up { animation: slide-up 0.25s ease-out; }
    .float-up { animation: float-up 1.2s forwards; }

    /* Piece move animations */
    @keyframes piece-land {
      from { transform: scale(0.78); opacity: 0.55; }
      to   { transform: scale(1);    opacity: 1; }
    }
    @keyframes sq-flash {
      from { background-color: rgba(234, 179, 8, 0.85); }
      to   { background-color: rgba(234, 179, 8, 0.42); }
    }
    .piece-land { animation: piece-land var(--dur-fast) var(--ease-spring); }
    .sq-from    { background-color: rgba(234, 179, 8, 0.32); }
    .sq-to      { animation: sq-flash 0.35s ease-out forwards; }

    /* --- Loading / cold-start mask (#6) --- */
    @keyframes shimmer { 0% { background-position: -800px 0; } 100% { background-position: 800px 0; } }
    #board-loader {
      position: absolute; inset: 0; z-index: 30;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;
      background: linear-gradient(110deg, rgba(148,163,184,0.10) 8%, rgba(148,163,184,0.28) 18%, rgba(148,163,184,0.10) 33%);
      background-size: 800px 100%; animation: shimmer 1.4s linear infinite;
      border-radius: 4px; transition: opacity 0.4s var(--ease-snap);
    }
    .dark #board-loader { background: linear-gradient(110deg, rgba(30,34,42,0.4) 8%, rgba(55,65,81,0.65) 18%, rgba(30,34,42,0.4) 33%); background-size: 800px 100%; animation: shimmer 1.4s linear infinite; }
    #board-loader.fade-out { opacity: 0; pointer-events: none; }
    .loader-panda { font-size: 3rem; animation: loader-bob 1.1s var(--ease-spring) infinite; }
    @keyframes loader-bob { 0%,100% { transform: translateY(0) rotate(-4deg);} 50% { transform: translateY(-10px) rotate(4deg);} }

    /* --- Signature solve celebration (#4) --- */
    @keyframes board-solve-flash {
      0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
      25%  { box-shadow: 0 0 32px 10px rgba(16,185,129,0.65), inset 0 0 40px 8px rgba(16,185,129,0.35); }
      100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
    }
    .board-solve-flash { animation: board-solve-flash 0.7s var(--ease-snap); }
    @keyframes count-pop { 0% { transform: scale(1);} 35% { transform: scale(1.35); color:#10b981;} 100% { transform: scale(1);} }
    .count-pop { animation: count-pop 0.45s var(--ease-spring); display:inline-block; }

    /* --- Day streak badge (#8) --- */
    @keyframes flame-pulse { 0%,100% { transform: scale(1) rotate(-2deg);} 50% { transform: scale(1.18) rotate(3deg);} }
    #day-streak-badge .flame { display:inline-block; animation: flame-pulse 1.3s ease-in-out infinite; }

    /* --- Optimistic "checking" pulse (#2) --- */
    @keyframes checking-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.82; } }
    #board-surface.checking #board-container { animation: checking-pulse 0.8s ease-in-out infinite; }

    /* --- Near-miss retry button (#9) --- */
    @keyframes retry-rise { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform: translateY(0);} }
    #retry-btn { animation: retry-rise 0.3s var(--ease-spring); }

    /* Unify the core motion vocabulary onto the spring/snap curves (#5) */
    .pp-pop   { animation: pp-pop 0.3s var(--ease-spring); }
    .slide-up { animation: slide-up var(--dur-base) var(--ease-spring); }

    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
    .dark ::-webkit-scrollbar-thumb { background: #374151; }

    .board-wrapper { max-width: min(100%, calc(100dvh - 280px)); transition: max-width 0.3s ease; position: relative; }
    @media (min-width: 1024px) { .board-wrapper { max-width: min(100%, calc(100vh - 120px)); } }

    input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    #board-surface { touch-action: none; overflow: hidden; }
    .hint-highlight { box-shadow: inset 0 0 0 4px #fbbf24; }

    @keyframes streak-fire-glow {
      0%, 100% { box-shadow: 0 0 15px 5px rgba(249, 115, 22, 0.5), inset 0 0 10px 2px rgba(249, 115, 22, 0.3); border-color: #f97316; }
      50% { box-shadow: 0 0 25px 8px rgba(234, 179, 8, 0.6), inset 0 0 15px 5px rgba(234, 179, 8, 0.4); border-color: #eab308; }
    }
    .streak-fire {
      animation: streak-fire-glow 1.5s infinite ease-in-out;
      border-color: #f97316 !important;
    }

    /* --- Zen Mode --- */
    body.zen-mode header {
        display: none !important;
    }
    body.zen-mode #game-picker-btn {
        display: none !important;
    }
    body.zen-mode #move-history {
        display: none !important;
    }
    body.zen-mode main {
        max-width: 100vw !important;
        padding: 1rem !important;
    }
    body.zen-mode .lg\\:w-\\[420px\\] {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    body.zen-mode .board-wrapper {
        max-width: min(100%, calc(100dvh - 30px)) !important;
    }
/* 📺 Lecture mode — declutter for the class projector (presentational only).
   Hides gamification chrome and enlarges the prompt; board + theme untouched. */
body.lecture #progress-badge,
body.lecture #rank-badge,
body.lecture #day-streak-badge,
body.lecture #best-streak-wrap,
body.lecture #pp-panel { display: none !important; }
/* NOTE: #more-menu-wrapper deliberately NOT hidden — it holds Paste PGN /
   Import PGN file; hiding it made loading databases impossible in lecture mode. */
body.lecture #lecture-btn { color: #10b981; }
body.lecture #prompt-title { font-size: 2.6rem; line-height: 1.1; }
@media (min-width: 1024px) {
  body.lecture #prompt-title { font-size: 3.25rem; }
  body.lecture #game-title { font-size: 1.35rem; }
}