/* ============================================================================
   game-fx.css — shared "juice" layer for the operation pages
   (subtraction / multiplication / division). Addition has its own inline copy.

   Provides: open-scroll gap, hidden in-flow feedback (toast replaces it),
   floating feedback toast, reward fly-mark, level-up banner, and the
   collapsible desktop sidebar (overrides theme-toggle.js's 2-col grid).
   Paired with game-fx.js + a tiny pre-paint inline script in each template.
   ============================================================================ */

/* background scrolls with the page (default). `fixed` was removed: it forced the browser to
   repaint the whole viewport-sized gradient on EVERY scroll frame (the main scroll-jank cause).
   The gradient still covers the full page height, so no white shows. */
body { background-attachment: scroll; }

/* Small gap above the problem box when it is auto-scrolled into view on open */
#problemArea { scroll-margin-top: 12px; }

/* The in-flow feedback card is superseded by the fixed toast — hide it so the same
   message doesn't render twice (once as the toast, once as a card below the fold). */
#feedback { display: none !important; }

/* ---- Floating answer-feedback toast (always visible, fixed to viewport) ---- */
.feedback-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    pointer-events: none;
    padding: 14px 30px;
    border-radius: 16px;
    font-size: 1.5rem;
    font-weight: 800;
    text-align: center;
    max-width: 90vw;
    z-index: 1100;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feedback-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.feedback-toast.success {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: #053b29;
    border: 2px solid #059669;
}
.feedback-toast.error {
    background: linear-gradient(135deg, #fda4af 0%, #fb7185 100%);
    color: #4c0519;
    border: 2px solid #e11d48;
}

/* ---- Reward mark: flashes big at the problem, then flies to the stats sidebar ---- */
.fly-mark {
    position: fixed;
    z-index: 1200;
    font-size: 1.7rem;
    font-weight: 900;
    color: #f59e0b;
    text-shadow: 0 2px 10px rgba(245, 158, 11, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    will-change: transform, opacity;
}
.fly-mark.flash { animation: markFlash 0.5s ease-out forwards; }
@keyframes markFlash {
    0%   { transform: translate(-50%, -50%) scale(0.3) rotate(-8deg); opacity: 0; }
    22%  { transform: translate(-50%, -50%) scale(4.7) rotate(5deg);  opacity: 1; }
    40%  { transform: translate(-50%, -50%) scale(3.2) rotate(-3deg); opacity: 1; }
    58%  { transform: translate(-50%, -50%) scale(4.0) rotate(1deg);  opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(3.4) rotate(0deg);  opacity: 1; }
}
.fly-mark.fly { transition: transform 0.7s cubic-bezier(0.5, 0, 0.65, 1), opacity 0.7s ease-in; }

/* ---- Floating LEVEL UP! banner (the level badge lives in the hidden sidebar) ---- */
.levelup-float {
    position: fixed;
    left: 50%;
    top: 40%;
    z-index: 1300;
    padding: 18px 44px;
    border-radius: 22px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #4a2c00;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(245, 158, 11, 0.5);
    pointer-events: none;
    animation: levelUpFloat 1.7s ease-out forwards;
}
@keyframes levelUpFloat {
    0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
    14%  { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
    28%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    68%  { transform: translate(-50%, -95%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -165%) scale(0.9); opacity: 0; }
}

/* ---- Collapsible sidebar — desktop (>=1024px) only ---- */
#sidebarToggle { display: none; }   /* under 1024 the sidebar stacks below; nothing to collapse */
@media (min-width: 1024px) {
    #sidebarToggle {
        display: flex; align-items: center; justify-content: center;
        position: fixed; top: 50%; right: 0; transform: translateY(-50%);
        z-index: 600;
        width: 30px; height: 92px;
        border: none; cursor: pointer;
        border-radius: 14px 0 0 14px;
        background: linear-gradient(180deg, #7c6cf0 0%, #5b4bd6 100%);
        color: #fff; font-size: 18px; line-height: 1;
        box-shadow: -4px 0 14px rgba(0, 0, 0, 0.25);
        transition: filter 0.15s ease, width 0.15s ease;
    }
    #sidebarToggle:hover { filter: brightness(1.08); width: 34px; }
    #sidebarToggle::after { content: '\276F'; }                          /* expanded → click to collapse (›) */
    html.sidebar-collapsed #sidebarToggle::after { content: '\276E'; }   /* collapsed → click to expand (‹) */

    @keyframes tabPulse {
        0%   { transform: translateY(-50%) scale(1); }
        45%  { transform: translateY(-50%) scale(1.28); box-shadow: -6px 0 24px rgba(124, 108, 240, 0.85); }
        100% { transform: translateY(-50%) scale(1); }
    }
    #sidebarToggle.pulse { animation: tabPulse 0.5s ease; }

    /* Collapsed: single column, box spans full width, right column hidden */
    html.sidebar-collapsed .container { grid-template-columns: 1fr !important; }
    html.sidebar-collapsed #problemArea { grid-column: 1 / -1 !important; }
    html.sidebar-collapsed .level-display,
    html.sidebar-collapsed .score-panel,
    html.sidebar-collapsed .phase-indicator,
    html.sidebar-collapsed .progress-info { display: none !important; }
}

/* #sidebarCol layout → moved to shared css/operation-shell.css */

/* Gel number keypad CSS -> moved to shared css/operation-shell.css (canonical = addition) */