/* ============================================================
   MOBILE FIX — load LAST after all other stylesheets
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   1. HEADER — equal spacing between all icons
   ══════════════════════════════════════════════════════════ */
#site-header {
    padding: 0 16px !important;
    box-sizing: border-box !important;
}

.header-content {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
}

.header-content .logo      { flex-shrink: 0 !important; margin-right: 12px !important; }
.header-content .nav-links { flex-shrink: 0 !important; margin-right: auto !important; }

/* Group the right-side icons with equal gap between them */
#donation-toggle,
#rules-toggle,
#sound-toggle,
#dark-mode-toggle {
    margin-left: 14px !important;  /* uniform gap between every icon */
}

#donation-toggle, #rules-toggle, #sound-toggle {
    position: static !important; bottom: auto !important; right: auto !important;
    font-size: 20px !important; background: none !important; border: none !important;
    cursor: pointer !important; padding: 0 !important; flex-shrink: 0 !important;
    line-height: 1 !important; color: inherit !important;
    transition: transform 0.2s ease;
}
#donation-toggle:hover, #rules-toggle:hover, #sound-toggle:hover { transform: scale(1.2); }
#dark-mode-toggle {
    flex-shrink: 0 !important;
    padding: 0 !important;
}


/* ══════════════════════════════════════════════════════════
   2. STATS BAR — centered below header, text on one line
   ══════════════════════════════════════════════════════════ */
#level-progress-section {
    top: 70px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Force each badge to show label + number on the same line */
#level-display,
#progress-display,
#score-display,
#mode-switch {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}


/* ══════════════════════════════════════════════════════════
   3. GAME WRAPPER — below stats bar
   ══════════════════════════════════════════════════════════ */
#game-wrapper {
    top: 108px !important;
    height: calc(100dvh - 108px) !important;
}


/* ══════════════════════════════════════════════════════════
   4. GAME CONTAINER — prevent right edge being clipped.
      The JS computes box size using pad:24 but game-wrapper
      has padding:8px 12px, so total horizontal padding is 24px.
      We just ensure no overflow clipping on the container.
   ══════════════════════════════════════════════════════════ */
#game-container {
    overflow: visible !important;
    /* Slight horizontal padding so the last box border isn't cut */
    padding: 2px 4px !important;
    box-sizing: border-box !important;
}


/* ══════════════════════════════════════════════════════════
   5. KEYPAD CONTAINER — flex column, correct height so
      cycle button always visible below the panels
   ══════════════════════════════════════════════════════════ */
#keypad-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow: hidden !important;
    height: 220px !important;
}

#mobile-keypad-panel,
#mobile-calculator-panel,
#mobile-drawing-panel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

#mobile-bottom-cycle-btn {
    flex: 0 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


/* ══════════════════════════════════════════════════════════
   6. MOBILE-SPECIFIC (≤768px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Smaller stats text but still one line */
    #level-display, #progress-display, #score-display,
    #mode-switch {
        padding: 4px 10px !important;
        font-size: 11px !important;
        letter-spacing: 0.3px !important;
    }

    /* All four icons the same size, and a slightly tighter gap.
       WebKit renders these emoji about 3px wider each than Blink does, which
       is enough to push the last one past the right edge on an iPhone-width
       screen — measured 4px over at 393px in Safari's engine while Chrome was
       fine, so it never showed up in a Chromium-only sweep. #dark-mode-toggle
       was also the odd one out at 20px against its siblings' 18px. */
    #donation-toggle,
    #rules-toggle,
    #sound-toggle,
    #dark-mode-toggle { font-size: 18px !important; margin-left: 8px !important; }

    #keypad-container {
        height: clamp(160px, 25vh, 200px) !important;
    }

    #game-wrapper { zoom: 1 !important; }
}

/* 392px, not 380px: WebKit's wider emoji kept the icon row 2-7px past the
   edge between 381 and 386, where the 380px rules had not yet applied. */
@media (max-width: 392px) {
    /* The icons were already tightened here, but the logo and nav label were
       not, and the row still ran over — measured 10px past the right edge at
       360px. The 340px block below takes the space out of the logo and nav;
       this band needs the same treatment, just less of it. */
    .header-content .logo img { height: 30px !important; }
    .nav-links a { font-size: 12px !important; }
    #donation-toggle, #rules-toggle, #sound-toggle { font-size: 16px !important; }
    #dark-mode-toggle { font-size: 16px !important; }
    #donation-toggle,
    #rules-toggle,
    #sound-toggle,
    #dark-mode-toggle { margin-left: 8px !important; }
    #keypad-container { height: clamp(145px, 24vh, 185px) !important; }
}

/* The block above tightens the icons, but at 320px (iPhone SE, and the
   narrowest width worth supporting) the row still overflowed: 32px of header
   padding + a 40px logo + the nav text + four icons came to ~322px, which put
   the dark-mode toggle off the right edge. The icons were already as small as
   they should go, so take the remaining space out of the logo and the nav
   label instead. */
@media (max-width: 340px) {
    #site-header { padding: 0 8px !important; }
    .header-content .logo { margin-right: 6px !important; }
    .header-content .logo img { height: 28px !important; }
    .nav-links a { font-size: 12px !important; }
    #donation-toggle,
    #rules-toggle,
    #sound-toggle,
    #dark-mode-toggle { margin-left: 6px !important; }
}

@media (max-width: 768px) and (max-height: 500px) {
    /* This used to hide the stats row outright to reclaim vertical space,
       which also hid the only control for switching between the Daily
       Challenge and Free Play — on a phone in landscape there was no way to
       change mode at all. Keep the row, but strip it to the two things worth
       the pixels here: the mode toggle and the score. */
    #level-progress-section {
        display: flex !important;
        top: 48px !important;
        gap: 4px !important;
    }
    #level-display,
    #progress-display,

    #mode-switch, #score-display {
        padding: 2px 7px !important;
        font-size: 9px !important;
        border-width: 1px !important;
    }

    #game-wrapper { top: 76px !important; height: calc(100dvh - 76px) !important; }
    #keypad-container { height: clamp(100px, 32vh, 140px) !important; }
}
/* FIX: canvases must have NO border directly on them. With
   box-sizing:border-box + width:100%, a border on the canvas shrinks
   the paintable content-box below what getBoundingClientRect() reports,
   causing every stroke to land above/left of the pointer. Moving the
   border to the wrapper makes rect == the canvas's actual paint area,
   matching the desktop canvas's (accidentally correct) behavior. */
#mobile-drawing-canvas,
#drawing-canvas {
    border: none !important;
}

#mobile-drawing-panel {
    border: 2px solid #031427;
    border-radius: 8px;
    padding: 2px;
    box-sizing: border-box;
}

body.dark-mode #mobile-drawing-panel {
    border-color: #555;
}

/* #drawing-container already carries its own border/padding as a
   wrapper, so #drawing-canvas losing its border is purely additive —
   no layout change there. */

   /* FIX: remove border from the canvas element itself. With box-sizing:
   border-box + a border, getBoundingClientRect() reports a box bigger
   than the actual paintable area, offsetting every drawn point toward
   the top-left of the real cursor position. Moving the border to the
   wrapper eliminates the mismatch entirely. */
#mobile-drawing-canvas {
    border: none !important;
}

#mobile-drawing-panel {
    border: 2px solid #031427;
    border-radius: 8px;
    padding: 2px;
    box-sizing: border-box;
}

body.dark-mode #mobile-drawing-panel {
    border-color: #555;
}
/* ════════════════════════════════════════════════════════════════════════
   SINGLE-PLAYER LAYOUT — same treatment the multiplayer page already has.

   #keypad-container was a fixed 260px tall and #game-container took its
   content height first, so on a short viewport (320x454, or any phone in
   landscape) the number keys ran off the bottom of the screen and the cycle
   button ended up painted over them. The grid is what should give way: it is
   read, the keypad is tapped.

   The three panels also stack in one cell and switch with `visibility`, so
   cycling Keypad -> Calc -> Draw no longer reflows everything above them.
   ════════════════════════════════════════════════════════════════════════ */
#game-wrapper {
    justify-content: flex-start !important;
    gap: 6px !important;
}

#level-progress-section { flex: 0 0 auto !important; }

#game-container {
    flex: 1 1 0% !important;       /* zero basis: the height must not depend
                                      on the box size we derive from it */
    min-height: 0 !important;
    align-content: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

#keypad-container {
    flex: 4 1 0% !important;       /* was a hard 260px, then content-sized */
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 1fr auto;
    grid-template-columns: 100%;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    padding-bottom: max(0px, env(safe-area-inset-bottom)) !important;
}

#keypad-container > #mobile-keypad-panel,
#keypad-container > #mobile-calculator-panel,
#keypad-container > #mobile-drawing-panel {
    grid-row: 1;
    grid-column: 1;
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    visibility: hidden;
    pointer-events: none;
}

#keypad-container > .panel-active {
    visibility: visible !important;
    pointer-events: auto !important;
}

#keypad-container > #mobile-bottom-cycle-btn {
    grid-row: 2;
    grid-column: 1;
    width: 100%;
    margin-top: 6px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Floors low enough that the rows can share a small panel instead of
   spilling out of it. */
@media (max-height: 700px) {
    #mobile-numpad-grid { gap: 4px !important; }
    #mobile-nav-row { gap: 4px !important; margin-top: 4px !important; }
    .mobile-num-btn  { min-height: 22px !important; }
    .mobile-nav-btn  { min-height: 24px !important; height: auto !important; }
    .mobile-calc-btn { min-height: 18px !important; }
    #mobile-drawing-canvas { min-height: 70px !important; }
    #mobile-bottom-cycle-btn { height: 28px !important; min-height: 28px !important; font-size: 0.75rem !important; }
}

@media (max-height: 500px) {
    #keypad-container { max-height: 64% !important; }
    .mobile-num-btn  { min-height: 18px !important; font-size: 0.85rem !important; }
    .mobile-nav-btn  { min-height: 20px !important; font-size: 0.7rem !important; }
    .mobile-calc-btn { min-height: 15px !important; font-size: 0.65rem !important; }
    #mobile-calc-display { height: 18px !important; font-size: 0.65rem !important; }
    #mobile-drawing-canvas { min-height: 56px !important; }
    #mobile-bottom-cycle-btn { height: 24px !important; min-height: 24px !important; font-size: 0.68rem !important; }
}

/* The real flex children of #game-wrapper are #main-content and
   #keypad-container — #game-container lives *inside*
   #main-content, so giving it `flex: 1` did nothing: it was not a flex item
   of the wrapper. Stretch the actual child, and drop the keypad's 20px
   margins (the wrapper already has a gap). Without this the column totalled
   ~500px inside 445px and the bottom of the keypad was clipped away. */
#game-wrapper > #main-content {
    /* Share the column by proportion, the way the multiplayer page does. With
       the grid on `flex: 1` and the keypad content-sized, the grid took 385px
       of 592 and left the drawing pad ~116px to write in. */
    flex: 5 1 0% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    overflow: hidden !important;
}

#main-content > #game-container {
    flex: 1 1 0% !important;
    min-height: 0 !important;
}

#game-wrapper > #keypad-container {
    margin: 0 !important;
}


/* The nav row is a plain flex row whose buttons size to their own text, so on
   a 280–320px wide screen "← Left | ✓ Enter | Right →" was wider than the
   row and the last button hung off the right edge. Share the row evenly and
   let the labels trim instead. */
#mobile-nav-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    min-width: 0;
}

#mobile-nav-row > .mobile-nav-btn {
    min-width: 0 !important;
    width: auto !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding-left: 2px;
    padding-right: 2px;
}

@media (max-width: 360px) {
    #mobile-nav-row > .mobile-nav-btn { font-size: 0.68rem !important; }
}

/* The boxes were rendering 4px larger than --box-size because the 2px border
   sat outside the declared height. Everything that budgets space for the grid
   works in border-box terms, so a 20px box that is really 24px overflowed the
   container by a row's worth. */
.box {
    box-sizing: border-box !important;
}

/* ── Single player in landscape ───────────────────────────────────────────
   A phone on its side is wide and short: stacking a six-row grid above a
   full keypad leaves the grid ~56px, which is not enough for any legible box
   size. Put them next to each other, the way the multiplayer page already
   does, so both get a usable share. */
@media (orientation: landscape) and (max-height: 560px) {
    #game-wrapper {
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    #game-wrapper > #main-content {
        flex: 1 1 55% !important;
        max-width: 58%;
        min-width: 0 !important;
        align-self: stretch !important;
    }

    #game-wrapper > #keypad-container {
        flex: 1 1 45% !important;
        max-width: 420px;
        max-height: 100% !important;
        align-self: stretch !important;
        min-width: 0 !important;
    }

    /* Same reasoning as the ≤768px short-landscape block: keep the mode
       toggle reachable, drop the pills that are not worth the height here,
       and start the board below the row rather than under it. This block
       also covers landscape phones wider than 768px (an iPhone on its side
       is 844px), which that one misses. */
    #level-progress-section {
        display: flex !important;
        top: 48px !important;
        font-size: 0.65rem !important;
        padding: 0 !important;
        gap: 4px !important;
    }

    #level-display,
    #progress-display,

    #mode-switch,
    #score-display {
        padding: 2px 7px !important;
        font-size: 9px !important;
        border-width: 1px !important;
    }

    #game-wrapper {
        top: 76px !important;
        height: calc(100dvh - 76px) !important;
    }
}

/* Same canvas feedback loop as multiplayer — see the note in multiplayer.css.
   The backing store's intrinsic aspect ratio was setting the element height,
   and we size the backing store from the element. */
#mobile-drawing-canvas {
    height: 0 !important;
    flex: 1 1 0 !important;
}

/* ── Roomy screens: size to content and keep the two halves together ──────
   The 5:4 split is what makes a short screen work — the grid gives way so
   the keypad stays usable. On a large screen there is no such pressure, and
   stretching both halves to fill it just pushed them apart: at 2560x1440 the
   grid container was 732px tall around 274px of squares, leaving ~230px of
   dead space between the last row and the keypad.

   With plenty of height, size both to their content and centre the pair, so
   the surplus goes above and below the game rather than through the middle
   of it. `safe center` so a sudden shrink never hides the top. */
@media (min-height: 720px) and (min-width: 700px) {
    #game-wrapper {
        justify-content: center !important;
        justify-content: safe center !important;
        gap: 10px !important;
    }

    #game-wrapper > #main-content    { flex: 0 0 auto !important; }
    #main-content  > #game-container { flex: 0 0 auto !important; }

    #game-wrapper > #keypad-container {
        flex: 0 0 auto !important;
        max-height: 400px !important;   /* a numpad 600px tall helps nobody */
        /* Line the pad up with the board. Clamped so a narrow 4-column
           pattern does not squeeze it, and a very wide one does not stretch
           it past a comfortable reach. */
        width: 100% !important;
        max-width: clamp(320px, var(--sp-grid-width, 420px), 560px) !important;
    }
}

/* The stats row is position:fixed and centred, and #game-wrapper starts at a
   hard 108px below it — so this row must never wrap onto a second line or it
   would sit under the board. Free Play carries four pills (toggle, level,
   progress, score), which is the tight case; trim them as the screen narrows
   so all four stay on one line. */
#level-progress-section {
    max-width: calc(100vw - 8px) !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
}

@media (max-width: 480px) {
    #level-progress-section { gap: 5px !important; }
    #level-display, #progress-display, #score-display,
    #mode-switch {
        padding: 4px 8px !important;
        font-size: 10px !important;
        letter-spacing: 0 !important;
    }
}

@media (max-width: 380px) {
    #level-progress-section { gap: 4px !important; }
    #level-display, #progress-display, #score-display,
    #mode-switch {
        padding: 3px 6px !important;
        font-size: 9px !important;
        border-width: 1px !important;
    }
}

/* #mode-switch is a wrapper around two buttons, so padding set on it by the
   breakpoint rules above pads the border, not the labels. Zero it there and
   let .mode-opt carry it — the buttons use em padding and inherit the
   font-size, so one declaration resizes the whole control. */
#mode-switch { padding: 0 !important; }