/* =========================================================
   ROOFGAZERS — FINAL CLEAN ADDITIONAL CSS
   Replace EVERYTHING currently in:
   Appearance → Customize → Additional CSS
   with this file.

   Goals:
   - Keep desktop/laptop styling intact
   - One coordinated mobile override
   - BUILD boxes separated + draggable
   - TOOL match draggable/strikeable
   - Mobile bookshelf titles hidden
   - Mobile books sit on shelf boards
   - Open-book note cannot be blocked by 3D pages
   - "turning the pages..." removed
   ========================================================= */


/* =========================================================
   1. POSTS + NORMAL WORDPRESS PAGES — TYPOGRAPHY
   ========================================================= */

.single-post .entry-content,
.single-post .entry-content p,
.single-post .entry-content li,
.single-post .entry-content blockquote,
.single-post .entry-content figcaption,
.single-post .entry-content h1,
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4,
.single-post .entry-content h5,
.single-post .entry-content h6,
.single-post .entry-title,
.single-post .wp-block-paragraph,
.single-post .entry-content ul,
.single-post .entry-content ol,
.single-post .entry-content a,
.single-post .entry-meta,
.single-post .posted-on,
.single-post .cat-links,
.single-post .tags-links,
body.page .entry-content,
body.page .entry-content p,
body.page .entry-content li,
body.page .entry-content blockquote,
body.page .entry-title,
body.page .entry-content h1,
body.page .entry-content h2,
body.page .entry-content h3,
body.page .entry-content h4,
body.page .entry-content h5,
body.page .entry-content h6,
body.page .entry-content a,
body.page .entry-content figcaption,
body.page .wp-element-caption {
    font-family: "Patrick Hand", cursive !important;
    font-weight: 400;
}

.single-post .entry-content,
.single-post .entry-content p,
.single-post .entry-content li,
.single-post .entry-content blockquote,
.single-post .entry-content figcaption {
    font-size: 1.45rem;
    line-height: 1.55;
}

.single-post .entry-content blockquote {
    margin: 1.8em 0;
    padding-left: 1.2em;
    border-left: 3px solid #1260df;
}

.single-post .entry-content a {
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.single-post .wp-element-caption,
.single-post figcaption {
    font-size: 1rem;
}

body.page .entry-content p {
    font-size: 1.35rem;
    line-height: 1.55;
}


/* =========================================================
   2. TABLET / PHONE TYPOGRAPHY
   ========================================================= */

@media (max-width: 768px) {

    .single-post .entry-content,
    .single-post .entry-content p,
    .single-post .entry-content li,
    body.page .entry-content,
    body.page .entry-content p,
    body.page .entry-content li {
        font-size: 1.18rem;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {

    .single-post .entry-content,
    .single-post .entry-content p,
    .single-post .entry-content li,
    body.page .entry-content,
    body.page .entry-content p,
    body.page .entry-content li {
        font-size: 1.1rem;
        line-height: 1.5;
    }
}


/* =========================================================
   3. BOOK READER — REMOVE STATUS TEXT EVERYWHERE
   ========================================================= */

.rg-book-turn-status {
    display: none !important;
}


/* =========================================================
   4. MOBILE PATCH
   ========================================================= */

@media (max-width: 700px) {


    /* =====================================================
       GLOBAL
       ===================================================== */

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .rg-shell {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    img,
    svg,
    video,
    canvas {
        max-width: 100%;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    .rg-topbar {
        min-height: 58px !important;
        gap: 12px !important;
    }

    .rg-brand {
        font-size: 1.6rem !important;
    }

    .rg-toplinks {
        gap: 8px 12px !important;
        font-size: .88rem !important;
        flex-wrap: wrap !important;
    }


    /* =====================================================
       MAIN NAVIGATION
       ===================================================== */

    .rg-mainnav {
        width: 100% !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 7px 0 16px !important;
    }

    .rg-navitem {
        min-width: 0 !important;
    }

    .rg-nav-icon {
        height: 34px !important;
        margin-bottom: 2px !important;
    }

    .rg-nav-icon svg {
        width: 34px !important;
        height: 34px !important;
    }

    .rg-nav-label {
        font-size: clamp(13px, 4vw, 17px) !important;
        letter-spacing: -.04em !important;
    }


    /* =====================================================
       HOMEPAGE
       ===================================================== */

    .rg-home-hero {
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 14px 0 24px !important;
    }

    .rg-home-copy {
        width: 100% !important;
        max-width: 330px !important;
        margin: 0 !important;
    }

    .rg-home-copy h1 {
        font-size: clamp(28px, 8vw, 37px) !important;
        line-height: 1.16 !important;
        margin: 0 !important;
    }


    /* =====================================================
       HOMEPAGE GUITAR
       ===================================================== */

    .rg-guitar-stage {
        position: relative !important;
        width: 100% !important;
        height: 440px !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        overflow: visible !important;
        transform: none !important;
    }

    .rg-guitar-stage .rg-guitar {
        position: absolute !important;
        left: 58% !important;
        top: 53% !important;
        width: 235px !important;
        max-width: 64vw !important;
        height: auto !important;
        transform: translate(-50%, -50%) rotate(7deg) !important;
        transform-origin: center center !important;
    }

    .rg-guitar-stage .rg-guitar-hit {
        position: absolute !important;
        left: 39% !important;
        top: 7% !important;
        width: 58% !important;
        height: 88% !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 20 !important;
    }

    .rg-guitar-stage .rg-chords {
        position: absolute !important;
        left: 1% !important;
        top: 18% !important;
        width: 112px !important;
        max-width: 112px !important;
        transform: none !important;
        z-index: 30 !important;
    }

    .rg-guitar-stage .rg-chord-btn {
        width: 31px !important;
        height: 31px !important;
        min-height: 31px !important;
        margin: 2px !important;
        font-size: 11px !important;
    }

    .rg-guitar-stage .rg-chord-invite {
        font-size: 11px !important;
    }


    /* =====================================================
       CATEGORY PAGES
       ===================================================== */

    .rg-category-hero {
        width: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 14px 0 24px !important;
    }

    .rg-category-copy {
        width: 100% !important;
    }

    .rg-category-copy h1 {
        width: 100% !important;
        max-width: 330px !important;
        font-size: clamp(29px, 8vw, 39px) !important;
        line-height: 1.14 !important;
        margin: 0 0 7px !important;
    }


    /* =====================================================
       SHARED INTERACTION STAGE
       ===================================================== */

    .rg-category-hero .rg-stage {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 390px !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        overflow: hidden !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    .rg-category-hero .rg-stage-canvas {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        pointer-events: auto !important;
    }


    /* =====================================================
       INTERACTION HINTS
       ===================================================== */

    .rg-stage[data-kind="see"] .rg-stage-caption,
    .rg-stage[data-kind="think"] .rg-stage-caption,
    .rg-stage[data-kind="build"] .rg-stage-caption,
    .rg-stage[data-kind="play"] .rg-stage-caption,
    .rg-stage[data-kind="tool"] .rg-stage-caption {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: 8px !important;
        bottom: auto !important;
        width: max-content !important;
        max-width: 82% !important;
        margin: 0 !important;
        padding: 5px 9px 6px !important;
        transform: translateX(-50%) rotate(-2deg) !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
        text-align: center !important;
        z-index: 100 !important;
        pointer-events: none !important;
    }


    /* =====================================================
       SEE
       ===================================================== */

    .rg-stage[data-kind="see"] .rg-see-sketch {
        position: absolute !important;
        inset: 46px 0 0 !important;
        width: 100% !important;
        height: calc(100% - 46px) !important;
        display: grid !important;
        place-items: center !important;
        transform: none !important;
    }

    .rg-stage[data-kind="see"] .rg-leaf-svg {
        width: 86% !important;
        max-width: 330px !important;
        height: auto !important;
        margin: auto !important;
    }


    /* =====================================================
       THINK
       ===================================================== */

    .rg-stage[data-kind="think"] .rg-think-smooth-scene,
    .rg-stage[data-kind="think"] .rg-think-wire-scene,
    .rg-stage[data-kind="think"] .rg-think-tight-scene {
        position: absolute !important;
        left: 50% !important;
        top: 54% !important;
        width: 100% !important;
        height: 100% !important;
        inset: auto !important;
        transform: translate(-50%, -50%) scale(.76) !important;
        transform-origin: center center !important;
    }


    /* =====================================================
       BUILD — MOBILE LAYOUT + DRAGGING
       IMPORTANT:
       Draggable coordinates intentionally DO NOT use
       !important so JavaScript can change them.
       ===================================================== */

    .rg-stage[data-kind="build"] {
        position: relative !important;
        height: 360px !important;
        min-height: 360px !important;
        overflow: hidden !important;
        pointer-events: auto !important;
    }

    .rg-stage[data-kind="build"] .rg-stage-canvas {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        pointer-events: auto !important;
        z-index: 5 !important;
    }

    .rg-stage[data-kind="build"] .rg-stack-zone,
    .rg-stage[data-kind="build"] .rg-shape-stack-zone {
        position: absolute !important;
        inset: auto !important;
        left: 50% !important;
        top: 105px !important;
        width: min(94%, 360px) !important;
        height: 200px !important;
        transform: translateX(-50%) !important;
        overflow: visible !important;
        pointer-events: auto !important;
        touch-action: none !important;
        z-index: 10 !important;
    }

    .rg-stage[data-kind="build"] .rg-stack-block {
        position: absolute;
        width: 52px !important;
        height: 52px !important;
        margin: 0;
        pointer-events: auto !important;
        touch-action: none !important;
        cursor: grab !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent;
        z-index: 30;
    }

    /* Starting positions only — JS can overwrite these */
    .rg-stage[data-kind="build"] .rg-stack-block:nth-child(1) {
        left: 3%;
        bottom: 12px;
    }

    .rg-stage[data-kind="build"] .rg-stack-block:nth-child(2) {
        left: 29%;
        bottom: 12px;
    }

    .rg-stage[data-kind="build"] .rg-stack-block:nth-child(3) {
        left: 55%;
        bottom: 12px;
    }

    .rg-stage[data-kind="build"] .rg-stack-block:nth-child(4) {
        left: 81%;
        bottom: 12px;
    }

    .rg-stage[data-kind="build"] .rg-stack-block.is-dragging {
        z-index: 200 !important;
        cursor: grabbing !important;
    }


    /* =====================================================
       PLAY
       ===================================================== */

    .rg-stage[data-kind="play"] .rg-handheld-game {
        position: absolute !important;
        left: 50% !important;
        top: 54% !important;
        width: 320px !important;
        max-width: 92% !important;
        height: auto !important;
        transform: translate(-50%, -50%) scale(.82) !important;
        transform-origin: center center !important;
    }


    /* =====================================================
       TOOL — MOBILE LAYOUT + DRAGGING
       IMPORTANT:
       Match left/top/transform intentionally DO NOT use
       !important so JavaScript can move it.
       ===================================================== */

    .rg-stage[data-kind="tool"] {
        position: relative !important;
        height: 360px !important;
        min-height: 360px !important;
        overflow: hidden !important;
        pointer-events: auto !important;
    }

    .rg-stage[data-kind="tool"] .rg-stage-canvas {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        overflow: hidden !important;
        pointer-events: auto !important;
        z-index: 5 !important;
    }

    .rg-stage[data-kind="tool"] .rg-match-only-scene,
    .rg-stage[data-kind="tool"] .rg-match-strike-scene,
    .rg-stage[data-kind="tool"] .rg-match-scene,
    .rg-stage[data-kind="tool"] .rg-toolbox-scene {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        overflow: visible !important;
        pointer-events: auto !important;
        touch-action: none !important;
        z-index: 10 !important;
    }

    .rg-stage[data-kind="tool"] .rg-match-strike-strip {
        position: absolute !important;
        left: 62% !important;
        top: 53% !important;
        width: 220px !important;
        height: 76px !important;
        transform: translate(-50%, -50%) rotate(-2deg) !important;
        margin: 0 !important;
        pointer-events: none !important;
        z-index: 12 !important;
    }

    .rg-stage[data-kind="tool"] .rg-match-only-stick {
        position: absolute;
        left: 18%;
        top: 31%;
        width: 58px !important;
        height: 220px !important;
        transform: rotate(-7deg);
        transform-origin: 50% 90%;
        margin: 0;
        pointer-events: auto !important;
        touch-action: none !important;
        cursor: grab !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        z-index: 30;
    }

    .rg-stage[data-kind="tool"] .rg-match-only-hit {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        background: transparent !important;
        pointer-events: auto !important;
        touch-action: none !important;
        z-index: 50 !important;
    }

    .rg-stage[data-kind="tool"] .rg-match-only-sparks,
    .rg-stage[data-kind="tool"] .rg-match-only-flame {
        pointer-events: none !important;
    }


    /* =====================================================
       CONTENT UNDER INTERACTIONS
       ===================================================== */

    .rg-section {
        padding-top: 18px !important;
    }

    .rg-section-number {
        font-size: clamp(44px, 13vw, 66px) !important;
    }

    .rg-section-title {
        font-size: clamp(25px, 7.5vw, 36px) !important;
    }

    .rg-section-intro {
        max-width: 100% !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
    }


    /* =====================================================
       BOOKSHELF — MOBILE
       ===================================================== */

    .rg-bookshelf-page {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        overflow-x: hidden !important;
    }

    .rg-bookshelf-page .rg-bookshelf-intro h1 {
        font-size: clamp(36px, 10vw, 43px) !important;
        line-height: 1.06 !important;
        margin: 10px 0 14px !important;
    }

    .rg-bookshelf-page .rg-bookshelf-intro p {
        font-size: 16px !important;
        line-height: 1.35 !important;
        margin-bottom: 14px !important;
    }

    .rg-bookshelf-page .rg-bookshelf-hint {
        font-size: 14px !important;
    }

    .rg-bookshelf-page .rg-bookshelf-carousel {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        padding-bottom: 78px !important;
        overflow: visible !important;
    }

    /* Only active shelf exists on mobile */
    .rg-bookshelf-page .rg-shelf-pages {
        position: relative !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .rg-bookshelf-page .rg-shelf-page {
        display: none !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .rg-bookshelf-page .rg-shelf-page.is-active {
        display: block !important;
    }

    /* Shelf number + range */
    .rg-bookshelf-page .rg-shelf-set-title {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 14px !important;
        transform: none !important;
        padding: 0 9px 9px !important;
        margin: 0 !important;
    }

    .rg-bookshelf-page .rg-shelf-set-title span,
    .rg-bookshelf-page .rg-shelf-set-title small {
        position: static !important;
        transform: none !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .rg-bookshelf-page .rg-shelf-set-title span {
        font-size: 12px !important;
    }

    .rg-bookshelf-page .rg-shelf-set-title small {
        font-size: 10px !important;
        opacity: .55;
    }

    /* Shelf frame */
    .rg-bookshelf-page .rg-shelf-frame {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        transform: none !important;
    }

    /* Each row = books + shelf board */
    .rg-bookshelf-page .rg-shelf-row {
        position: relative !important;
        width: 100% !important;
        min-height: 125px !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        column-gap: 5px !important;
        align-items: end !important;
        padding: 0 4px 18px !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .rg-bookshelf-page .rg-shelf-row:last-child {
        margin-bottom: 24px !important;
    }

    /* Shelf board sits under the books */
    .rg-bookshelf-page .rg-shelf-board {
        position: absolute !important;
        left: 3% !important;
        right: 3% !important;
        bottom: 0 !important;
        width: 94% !important;
        height: 14px !important;
        margin: 0 !important;
        z-index: 2 !important;
    }

    /* Book cards */
    .rg-bookshelf-page .rg-book-card {
        position: relative !important;
        width: 100% !important;
        max-width: 70px !important;
        min-width: 0 !important;
        align-self: end !important;
        justify-self: center !important;
        margin: 0 !important;
        padding: 0 0 4px !important;
        gap: 0 !important;
        transform: none !important;
        z-index: 5 !important;
    }

    .rg-bookshelf-page .rg-book-cover-wrap {
        width: 64px !important;
        max-width: 64px !important;
        height: 96px !important;
        max-height: 96px !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        overflow: hidden !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .rg-bookshelf-page .rg-book-cover-img {
        display: block !important;
        width: 64px !important;
        max-width: 64px !important;
        height: 96px !important;
        max-height: 96px !important;
        object-fit: contain !important;
        object-position: center bottom !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        filter: none !important;
    }

    /* Remove decorative mobile cover/spine lines */
    .rg-bookshelf-page .rg-book-cover-wrap::before,
    .rg-bookshelf-page .rg-book-cover-wrap::after {
        display: none !important;
        content: none !important;
    }

    /* Hide book titles on mobile */
    .rg-bookshelf-page .rg-book-label {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .rg-bookshelf-page .rg-book-slot-empty {
        align-self: end !important;
        margin-bottom: 4px !important;
        z-index: 5 !important;
    }

    .rg-bookshelf-page .rg-shelf-prev {
        left: 2px !important;
    }

    .rg-bookshelf-page .rg-shelf-next {
        right: 2px !important;
    }


    /* =====================================================
       OPEN BOOK — MOBILE
       FINAL STATE USES A FLAT SPREAD SO NOTHING CAN BLOCK TEXT
       ===================================================== */

    .rg-book-reader-overlay {
        width: 100vw !important;
        height: 100dvh !important;
    }

    .rg-book-reader-stage {
        position: relative !important;
        isolation: isolate !important;
        width: 100vw !important;
        height: 100dvh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 48px 8px 24px !important;
    }

    .rg-open-book {
        position: relative !important;
        width: 92vw !important;
        max-width: 500px !important;
        aspect-ratio: 1.48 / 1 !important;
        transform: none !important;
        z-index: 10 !important;
    }

    /*
       Once the note is ready, hide ALL 3D page pieces.
       The final spread below redraws the open book as a flat layer.
    */
    .rg-book-reader-overlay.is-note-ready .rg-open-book-base,
    .rg-book-reader-overlay.is-note-ready .rg-open-book-left,
    .rg-book-reader-overlay.is-note-ready .rg-open-book-right,
    .rg-book-reader-overlay.is-note-ready .rg-open-book-cover,
    .rg-book-reader-overlay.is-note-ready .rg-flip-page {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /*
       Final spread becomes BOTH the paper and the note layer.
       Therefore the left 3D page can never cover the note.
    */
    .rg-final-spread {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 92vw !important;
        max-width: 500px !important;
        aspect-ratio: 1.48 / 1 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        transform: translate(-50%, -50%) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        padding: 11% 15% 10% !important;
        margin: 0 !important;

        /* flat open-book paper */
        background:
            linear-gradient(
                90deg,
                #fffaf1 0%,
                #fffaf1 49.2%,
                #eadccc 49.6%,
                #d9c7b5 50%,
                #eadccc 50.4%,
                #fffaf1 50.8%,
                #fffaf1 100%
            ) !important;

        border: 10px solid #f3e9da !important;
        border-radius: 14px !important;

        box-shadow: 0 20px 45px rgba(0,0,0,.10) !important;

        overflow: hidden !important;

        z-index: 1000 !important;

        pointer-events: none !important;
    }

    /* notebook lines over the flat paper */
    .rg-final-spread::before {
        content: "" !important;
        position: absolute !important;
        inset: 10px !important;
        border-radius: 8px !important;
        background:
            repeating-linear-gradient(
                to bottom,
                transparent 0px,
                transparent 27px,
                rgba(16,93,214,.08) 28px
            ) !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }

    .rg-book-reader-overlay.is-note-ready .rg-final-spread {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1000 !important;
    }

    .rg-final-spread-title {
        position: relative !important;
        width: 72% !important;
        max-width: 72% !important;
        margin: 0 auto 8px !important;
        padding: 0 !important;
        text-align: center !important;
        font-size: 13px !important;
        line-height: 1.15 !important;
        z-index: 2 !important;
    }

    .rg-final-spread-note {
        position: relative !important;
        width: 72% !important;
        max-width: 72% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
        font-size: 12px !important;
        line-height: 1.32 !important;
        white-space: pre-line !important;
        overflow-wrap: anywhere !important;
        z-index: 2 !important;
    }

    .rg-final-spread-link {
        position: relative !important;
        z-index: 3 !important;
        margin-top: 8px !important;
        font-size: 10px !important;
        pointer-events: auto !important;
    }

    .rg-book-reader-close {
        position: fixed !important;
        top: max(14px, env(safe-area-inset-top)) !important;
        right: 14px !important;
        width: 36px !important;
        height: 36px !important;
        z-index: 9999999 !important;
    }


    /* =====================================================
       ABOUT
       ===================================================== */

    .rg-about-page,
    .rg-about-wrap,
    .rg-about-copy,
    .rg-about-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    .rg-about-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }


    /* =====================================================
       TOUCH
       ===================================================== */

    .rg-book-card:hover {
        transform: none !important;
    }
}


/* =========================================================
   5. VERY SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

    .rg-shell {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }

    .rg-home-copy h1,
    .rg-category-copy h1 {
        font-size: 28px !important;
    }

    .rg-guitar-stage {
        height: 410px !important;
    }

    .rg-guitar-stage .rg-guitar {
        width: 215px !important;
    }

    .rg-category-hero .rg-stage {
        height: 365px !important;
    }


    /* BUILD */
    .rg-stage[data-kind="build"] .rg-stack-zone,
    .rg-stage[data-kind="build"] .rg-shape-stack-zone {
        width: 95% !important;
        height: 190px !important;
    }

    .rg-stage[data-kind="build"] .rg-stack-block {
        width: 46px !important;
        height: 46px !important;
    }

    .rg-stage[data-kind="build"] .rg-stack-block:nth-child(1) {
        left: 2%;
    }

    .rg-stage[data-kind="build"] .rg-stack-block:nth-child(2) {
        left: 29%;
    }

    .rg-stage[data-kind="build"] .rg-stack-block:nth-child(3) {
        left: 56%;
    }

    .rg-stage[data-kind="build"] .rg-stack-block:nth-child(4) {
        left: 83%;
    }


    /* TOOL */
    .rg-stage[data-kind="tool"] .rg-match-strike-strip {
        width: 195px !important;
    }

    .rg-stage[data-kind="tool"] .rg-match-only-stick {
        width: 52px !important;
        height: 205px !important;
    }


    /* BOOKSHELF */
    .rg-bookshelf-page .rg-shelf-row {
        min-height: 116px !important;
        padding-bottom: 17px !important;
        column-gap: 3px !important;
    }

    .rg-bookshelf-page .rg-book-card {
        max-width: 62px !important;
    }

    .rg-bookshelf-page .rg-book-cover-wrap,
    .rg-bookshelf-page .rg-book-cover-img {
        width: 58px !important;
        max-width: 58px !important;
        height: 88px !important;
        max-height: 88px !important;
    }

    .rg-open-book,
    .rg-final-spread {
        width: 94vw !important;
    }

    .rg-final-spread-title {
        font-size: 12px !important;
    }

    .rg-final-spread-note {
        font-size: 11px !important;
    }
}

/* =========================================================
   6. FINAL BOOK READER SIZE LOCK — MOBILE
   Every opened book keeps the same dimensions regardless
   of note length. Long notes scroll inside the fixed pages.
   ========================================================= */

@media (max-width: 700px) {

    .rg-open-book,
    .rg-final-spread,
    .rg-book-reader-overlay.is-note-ready .rg-final-spread {
        width: min(92vw, 500px) !important;
        height: min(62.2vw, 338px) !important;
        max-width: 500px !important;
        max-height: 338px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        flex: none !important;
    }

    .rg-final-spread {
        box-sizing: border-box !important;
        padding: 34px 42px 30px !important;
        overflow: hidden !important;
    }

    .rg-final-spread-title {
        flex: 0 0 auto !important;
        width: 76% !important;
        max-width: 76% !important;
        margin: 0 auto 8px !important;
    }

    .rg-final-spread-note {
        flex: 0 1 auto !important;
        width: 76% !important;
        max-width: 76% !important;
        max-height: 145px !important;
        margin: 0 auto !important;
        padding: 0 3px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .rg-final-spread-link {
        flex: 0 0 auto !important;
        margin-top: 7px !important;
    }
}

@media (max-width: 390px) {

    .rg-open-book,
    .rg-final-spread,
    .rg-book-reader-overlay.is-note-ready .rg-final-spread {
        width: 94vw !important;
        height: 63.5vw !important;
        max-height: 248px !important;
    }

    .rg-final-spread {
        padding: 27px 30px 24px !important;
    }

    .rg-final-spread-note {
        max-height: 108px !important;
    }
}


    /* =====================================================
       PLAY
       Make joystick easy to use with a finger
       WITHOUT making the whole console huge.
       ===================================================== */

    .rg-stage[data-kind="play"] {

        position: relative !important;

        overflow: visible !important;
    }


    .rg-stage[data-kind="play"]
    .rg-handheld-game {

        position: absolute !important;

        left: 50% !important;
        top: 54% !important;

        width: 340px !important;

        max-width: 94vw !important;

        height: auto !important;

        /*
           Remove the extra .82 shrink.
        */

        transform:
            translate(-50%, -50%) !important;

        transform-origin:
            center center !important;

        overflow:
            visible !important;
    }


    /*
       Visible stick itself slightly larger.
    */

    .rg-stage[data-kind="play"]
    .rg-stick,

    .rg-stage[data-kind="play"]
    .rg-joystick {

        transform:
            scale(1.18);

        transform-origin:
            center center;
    }


    /*
       Main fix:
       make the invisible touch area MUCH larger
       than the visible stick.
    */

    .rg-stage[data-kind="play"]
    .rg-stick-hit,

    .rg-stage[data-kind="play"]
    .rg-joystick-hit {

        width: 74px !important;
        height: 74px !important;

        min-width: 74px !important;
        min-height: 74px !important;

        margin-left:
            -20px !important;

        margin-top:
            -20px !important;

        pointer-events:
            auto !important;

        touch-action:
            none !important;

        cursor:
            grab !important;

        -webkit-user-select:
            none !important;

        user-select:
            none !important;

        -webkit-tap-highlight-color:
            transparent !important;

        z-index:
            100 !important;
    }


    /*
       If the knob is a child, enlarge only visually.
    */

    .rg-stage[data-kind="play"]
    .rg-stick-knob,

    .rg-stage[data-kind="play"]
    .rg-joystick-knob,

    .rg-stage[data-kind="play"]
    .rg-stick-cap {

        transform:
            scale(1.15);

        transform-origin:
            center center;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

    .rg-stage[data-kind="see"]
    .rg-see-sketch {

        width:
            300px !important;

        height:
            235px !important;
    }


    .rg-stage[data-kind="see"]
    .see-lens,

    .rg-stage[data-kind="see"]
    .lens,

    .rg-stage[data-kind="see"]
    .rg-see-lens {

        width:
            108px !important;

        height:
            108px !important;
    }


    .rg-stage[data-kind="play"]
    .rg-handheld-game {

        width:
            315px !important;
    }


    .rg-stage[data-kind="play"]
    .rg-stick-hit,

    .rg-stage[data-kind="play"]
    .rg-joystick-hit {

        width:
            70px !important;

        height:
            70px !important;

        min-width:
            70px !important;

        min-height:
            70px !important;
    }

}

/* =========================================================
   SEE — FINAL MOBILE MAGNIFIER
   Desktop/laptop remains untouched
   ========================================================= */

@media (max-width:700px) {

    /* Interaction area */

    .rg-stage[data-kind="see"]
    .rg-see-sketch {

        position: relative !important;

        touch-action:
            manipulation !important;

        overflow:
            visible !important;
    }


    /* Magnifying glass */

    .rg-stage[data-kind="see"]
    .rg-magnifier {

        width:
            72px !important;

        height:
            72px !important;

        pointer-events:
            none !important;

        z-index:
            100 !important;

        overflow:
            visible !important;

        /*
         * Don't force white inside the glass.
         */

        background:
            transparent !important;

        transition:
            left .18s ease,
            top .18s ease !important;
    }


    /* Circular zoom window */

    .rg-stage[data-kind="see"]
    .rg-magnifier-inner {

        position:
            absolute !important;

        inset:
            0 !important;

        width:
            100% !important;

        height:
            100% !important;

        overflow:
            hidden !important;

        border-radius:
            50% !important;

        background:
            #fffaf7 !important;
    }


    /*
     * Keep ALL original SVG classes/details.
     */

    .rg-stage[data-kind="see"]
    .rg-magnifier-inner
    .rg-leaf-svg.rg-magnifier-clone {

        position:
            absolute !important;

        left:
            0 !important;

        top:
            0 !important;

        width:
            100% !important;

        height:
            100% !important;

        max-width:
            none !important;

        margin:
            0 !important;

        animation:
            none !important;

        transform:
            none !important;

        pointer-events:
            none !important;

        visibility:
            visible !important;

        opacity:
            1 !important;
    }

}

/* =========================================================
   PLAY — LAPTOP / DESKTOP ONLY
   Larger game station + joystick hit area alignment

   Mobile <= 700px is NOT affected.
   ========================================================= */

@media (min-width: 701px) {

    /* -----------------------------------------------------
       1. MAKE THE WHOLE GAME STATION LARGER
       ----------------------------------------------------- */

    .rg-stage[data-kind="play"]
    .rg-handheld-game {

        /*
         * Increase this if you want it even larger.
         * 1.18 = 18% larger.
         */
        transform:
            translate(-50%, -50%)
            scale(1.50) !important;

        transform-origin:
            center center !important;
    }


    /* -----------------------------------------------------
       2. JOYSTICK / MOVEMENT STICK
       Keep the interaction zone around the visible stick
       ----------------------------------------------------- */

    .rg-stage[data-kind="play"]
    .rg-stick-hit,

    .rg-stage[data-kind="play"]
    .rg-joystick-hit {

        /*
         * Larger invisible clickable/rotatable area.
         */
        width:
            58px !important;

        height:
            58px !important;

        min-width:
            58px !important;

        min-height:
            58px !important;

        /*
         * Center the hit area around its existing
         * joystick position.
         */
        margin-left:
            -12px !important;

        margin-top:
            -12px !important;

        pointer-events:
            auto !important;

        cursor:
            grab !important;

        touch-action:
            none !important;

        z-index:
            100 !important;
    }


    .rg-stage[data-kind="play"]
    .rg-stick-hit:active,

    .rg-stage[data-kind="play"]
    .rg-joystick-hit:active {

        cursor:
            grabbing !important;
    }


    /* -----------------------------------------------------
       3. KEEP VISIBLE STICK ABOVE THE CONSOLE
       ----------------------------------------------------- */

    .rg-stage[data-kind="play"]
    .rg-stick,

    .rg-stage[data-kind="play"]
    .rg-joystick {

        position:
            relative !important;

        z-index:
            20 !important;
    }

}

/* Hide Roofgazers theme's duplicate numbered pagination */
.navigation.pagination,
nav.pagination:not(.roofgazers-pagination),
.posts-navigation:not(.roofgazers-pagination),
.page-links {
    display: none !important;
}

/* Keep the clean pagination visible */
.roofgazers-pagination {
    display: grid !important;
}