/* MathGuru — shared operation-page shell styles.
   Linked by addition / subtraction / multiplication (division later).
   Single source for the cross-operation "shell" look — grow THIS file instead of pasting
   the same rules inline into each page. */

/* Black outline on the column-method digits + answer inputs (LIGHT theme only) so the
   numbers stand out from the scene background. paint-order keeps the fill colour on top of
   the stroke. (Dark theme: no stroke — digits are white on the dark panel.) */
body.theme-light #problemArea .cell,
body.theme-light #problemArea .input-box {
    -webkit-text-stroke: 1.6px #111111 !important;
    text-stroke: 1.6px #111111 !important;
    paint-order: stroke fill;
}

/* Sidebar column wrapper (desktop): one grid cell in col 2 spanning the same rows as the math
   box, so it stretches to the box's height and scales by the SAME factor when the box shrinks —
   keeping the last stat card's bottom aligned with the box's bottom. Cards laid out by flex;
   `order` restores level-on-top. Under 1024px it's a plain block (cards stack in DOM order). */
@media (min-width: 1024px) {
    #sidebarCol {
        grid-column: 2 !important;
        grid-row: 2 / 6 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        gap: 16px !important;
        min-width: 0;
        transform-origin: top center;
    }
    #sidebarCol .level-display   { order: 1; margin: 0 !important; }
    #sidebarCol .score-panel     { order: 2; margin: 0 !important; }
    #sidebarCol .phase-indicator { order: 3; margin: 0 !important; }
    #sidebarCol .progress-info   { order: 4; margin: 0 !important; }
}

/* ---- Gel number keypad (canonical = addition's version). Structural CSS only; each page's JS
   sets the per-key --c-* colour vars (game-fx.js for mult/sub/div, setupGelKeypad() for addition). ---- */
.gel-keypad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px 30px;
    justify-items: center;
    max-width: 600px;
    margin: 22px auto 4px;
}
.gel-keypad .gel {
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Fredoka', system-ui, sans-serif; font-weight: 700; line-height: 1;
    border: none; cursor: pointer; color: var(--c-ink);
    background: linear-gradient(180deg, var(--c-top) 0%, var(--c-mid) 52%, var(--c-bot) 100%);
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s cubic-bezier(.34,1.4,.6,1), box-shadow .12s ease, filter .16s ease;
    box-shadow:
        0 2px 3px rgba(0,0,0,0.18),
        0 12px 24px -8px var(--c-glow),
        inset 0 2px 2px rgba(255,255,255,0.6),
        inset 0 -6px 10px -5px rgba(0,0,0,0.28),
        inset 0 0 0 1px rgba(0,0,0,0.12);
}
.gel-keypad .gel.ink-light { text-shadow: 0 1px 0 rgba(0,0,0,0.28); }
.gel-keypad .gel.ink-dark  { text-shadow: 0 1px 0 rgba(255,255,255,0.45); }
.gel-keypad .gel.sz-icon { width: 76px; height: 76px; padding: 0; border-radius: 50%; font-size: 44px; }
.gel-keypad .gel.back { grid-column: span 2; width: 100%; height: 50px; border-radius: 999px; font-size: 26px; }
.gel-keypad .gel.check { grid-column: span 3; width: 100%; height: 50px; border-radius: 999px; font-size: 24px; font-weight: 700; }
/* the gel Check (inside the keypad) replaces the flat button in BOTH themes + both modes. */
body #problemArea .buttons { display: none !important; }
.gel-keypad .gel::before {
    content:""; position:absolute; z-index:0; pointer-events:none;
    top:4%; left:7%; right:7%; height:50%;
    background:linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.74) 28%, rgba(255,255,255,0.2) 74%, rgba(255,255,255,0) 100%);
    border-radius:inherit;
}
.gel-keypad .gel::after {
    content:""; position:absolute; z-index:0; pointer-events:none;
    left:20%; right:20%; bottom:9%; height:22%;
    background:linear-gradient(0deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 100%);
    border-radius:inherit; opacity:0.85;
}
.gel-keypad .gel:hover {
    filter: brightness(1.07) saturate(1.05); transform: translateY(-2px);
    box-shadow:
        0 4px 6px rgba(0,0,0,0.20),
        0 18px 32px -8px var(--c-glow),
        inset 0 2px 2px rgba(255,255,255,0.6),
        inset 0 -8px 14px -4px rgba(0,0,0,0.30),
        inset 0 0 0 1px rgba(0,0,0,0.10);
}
.gel-keypad .gel:active {
    transform: translateY(1px); filter: brightness(0.95);
    box-shadow:
        0 1px 2px rgba(0,0,0,0.22),
        0 6px 12px -8px var(--c-glow),
        inset 0 2px 3px rgba(0,0,0,0.28),
        inset 0 8px 14px -6px rgba(0,0,0,0.30),
        inset 0 0 0 1px rgba(0,0,0,0.12);
}
body.theme-dark .gel-keypad .gel {
    box-shadow:
        0 2px 4px rgba(0,0,0,0.26),
        0 4px 10px -8px var(--c-glow),
        inset 0 3px 3px rgba(255,255,255,0.8),
        inset 0 1px 0 rgba(255,255,255,0.42),
        inset 0 -8px 12px -5px rgba(0,0,0,0.34),
        inset 0 0 0 1px rgba(0,0,0,0.14);
}
body.theme-dark .gel-keypad .gel:hover {
    box-shadow:
        0 4px 7px rgba(0,0,0,0.28),
        0 8px 16px -8px var(--c-glow),
        inset 0 3px 3px rgba(255,255,255,0.85),
        inset 0 1px 0 rgba(255,255,255,0.48),
        inset 0 -10px 15px -4px rgba(0,0,0,0.36),
        inset 0 0 0 1px rgba(0,0,0,0.12);
}
body.theme-dark .gel-keypad .gel::before {
    background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.82) 26%, rgba(255,255,255,0.3) 72%, rgba(255,255,255,0) 100%);
}
body.theme-dark .gel-keypad .gel.sz-icon {
    border-radius: 22px;
    box-shadow:
        0 8px 0 var(--c-rim),
        0 18px 26px -10px rgba(0,0,0,0.5),
        inset 0 3px 2px rgba(255,255,255,0.7),
        inset 0 -7px 11px rgba(0,0,0,0.22);
}
body.theme-dark .gel-keypad .gel.sz-icon::before {
    top: 6px; left: 11%; right: 11%; height: 42%;
    background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.5) 42%, rgba(255,255,255,0) 100%);
    border-radius: 16px 16px 46% 46% / 14px 14px 100% 100%;
}
body.theme-dark .gel-keypad .gel.sz-icon::after {
    top: auto; left: 20%; right: 20%; bottom: 7px; height: 18%;
    background: linear-gradient(0deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 100%);
    border-radius: 50%; opacity: 1;
}
body.theme-dark .gel-keypad .gel.sz-icon:hover {
    transform: translateY(-2px); filter: brightness(1.06) saturate(1.05);
    box-shadow:
        0 10px 0 var(--c-rim),
        0 24px 32px -10px rgba(0,0,0,0.52),
        inset 0 3px 2px rgba(255,255,255,0.7),
        inset 0 -7px 11px rgba(0,0,0,0.22);
}
body.theme-dark .gel-keypad .gel.sz-icon:active {
    transform: translateY(7px); filter: brightness(0.98);
    box-shadow:
        0 1px 0 var(--c-rim),
        0 5px 10px rgba(0,0,0,0.4),
        inset 0 3px 2px rgba(255,255,255,0.55),
        inset 0 -4px 8px rgba(0,0,0,0.22);
}

/* ---- Shared mathbox shell (canonical = addition). Box compaction, number-fonts, .line, and
   each page's scene background stay INLINE per-page. ---- */
body #problemArea #dynamicGrid { margin: 4px auto !important; padding: 8px 20px !important; }
body #problemArea #gelKeypad { margin-top: 2px !important; }
body #problemArea .title { font-size: 26px !important; margin-bottom: 6px !important; }
body.theme-light #problemArea { position: relative; }
body.theme-light #problemArea > *:not(.add-scene) { position: relative; z-index: 1; }

/* ---- Fullscreen for overflow ("tall") levels: the .container (math box + sidebar) fills the
   screen so the problem shows FULL-SIZE (no font shrink). Fullscreen defaults to a black backdrop,
   so restore the page's theme background and let it use the whole width. ---- */
.container:fullscreen {
    max-width: none !important; width: 100vw !important; height: 100vh !important;
    min-height: 0 !important; padding: 14px 22px !important;
}
.container:fullscreen .navigation { display: none !important; }   /* only the box + sidebar in fullscreen */
/* The box fills the screen at a STABLE height (no align-content:center — that made the row track the
   content, so JS-zooming the content resized the box → ResizeObserver loop → flicker, esp. in match
   mode). The content is scaled to fit by JS (fitFullscreenContent), then centred here; no scroll. */
.container:fullscreen #problemArea {
    justify-content: center !important;
    overflow: hidden !important;
}
body.theme-light .container:fullscreen { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 50%, #ff9a9e 100%) !important; }
body.theme-dark  .container:fullscreen { background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #0d0d1f 100%) !important; }

/* Floating Home button — the ONLY way out in fullscreen (header's home link is hidden, nav is hidden,
   and Esc just bounces back). Sits in the bottom-right FAB cluster, left of the theme + audio icons.
   Hidden in normal mode (the header home covers that); shown only in fullscreen. */
.mg-home-fab {
    position: fixed; bottom: 20px; right: 160px; z-index: 9999;
    width: 55px; height: 55px; border: none; border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    font-size: 1.5rem; text-decoration: none; cursor: pointer;
    background: linear-gradient(135deg, #4ECDC4 0%, #2EA39A 100%);
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mg-home-fab:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.container:fullscreen .mg-home-fab { display: flex; }