/* KidzTalk Play Menu Plugin v1.65
   Adds the Play nav item and /play landing page for Chess and Checkers.

   Notes:
   - Uses the bordered chess-home-preview.jpg for the Chess card preview image.
   - Desktop Play button uses a fixed 59px height so its top and bottom
     line up with the other desktop nav buttons.
   - Desktop Play icon uses 13px top padding because that lined up the
     dice/puzzle icon with the other menu icons.
   - Mobile/collapsed menu switches at 980px so Play does not float
     in the middle of the menu at tablet widths.
*/

/* ===================================================
   Play nav item reset
=================================================== */



.qa-nav-main-play .qa-nav-main-link:before,
.qa-nav-main-play a:before {
    content: none !important;
}

/* Selected/current Play button */
.qa-nav-main-play.qa-nav-main-selected .qa-nav-main-link,
.qa-nav-main-play .qa-nav-main-selected {
    background: #3498db !important;
    color: #fff !important;
}

/* ===================================================
   Desktop + in-between top menu

   Total desktop height:
   13px top padding
   + 25px icon row
   + 4px gap
   + 16px text row
   + 1px bottom padding
   = 59px
=================================================== */

@media (min-width: 981px) {
    .qa-nav-main-play {
        position: static !important;
        top: auto !important;
        margin-top: 0 !important;

        height: 59px !important;
        min-height: 59px !important;
        max-height: 59px !important;

        vertical-align: top !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .qa-nav-main-play .qa-nav-main-link {
        position: static !important;
        top: auto !important;
        margin-top: 0 !important;

        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;

        box-sizing: border-box !important;
        display: grid !important;
        grid-template-rows: 25px 16px !important;
        align-content: center !important;
        justify-items: center !important;
        row-gap: 4px !important;

        padding: 8px 3px 3px 3px !important;
        text-align: center !important;
        line-height: 1 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        font-size: 13px !important;
    }

    .qa-nav-main-play .qa-nav-main-link:before {
        content: "" !important;
        display: block !important;
        align-self: start !important;

        width: 25px !important;
        height: 25px !important;
        min-width: 25px !important;
        max-width: 25px !important;
        min-height: 25px !important;
        max-height: 25px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent url("play-puzzle-icon-5.png?v=1.46") center center / 25px 25px no-repeat !important;
        border: 0 !important;
        font-size: 0 !important;
        line-height: 25px !important;
        font-family: initial !important;
        text-indent: 0 !important;
        overflow: hidden !important;
        filter: drop-shadow(0 0 1px rgba(255,255,255,.65)) !important;
        transform: none !important;
    }
}

/* ===================================================
   Mobile / collapsed menu

   At about 900px the theme is already using the
   vertical/collapsed menu, so Play switches to the
   mobile row layout at 980px and below.
=================================================== */

@media (max-width: 980px) {
    .qa-nav-main-play {
        position: static !important;
        top: auto !important;
        margin-top: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
        text-align: left !important;
        vertical-align: top !important;
        box-sizing: border-box !important;
    }

    .qa-nav-main-play .qa-nav-main-link {
        position: static !important;
        top: auto !important;
        margin-top: 0 !important;

        height: auto !important;
        min-height: 46px !important;
        max-height: none !important;

        display: block !important;
        padding: 5px 12px 5px 0 !important;
        margin: 0 !important;

        text-align: left !important;
        white-space: normal !important;
        line-height: 32px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .qa-nav-main-play .qa-nav-main-link:before {
        content: "" !important;
        display: inline-block !important;

        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;

        margin: 0 10px 0 0 !important;
        padding: 0 !important;

        background: transparent url("play-puzzle-icon-5.png?v=1.46") center center / 25px 25px no-repeat !important;
        border: 0 !important;
        vertical-align: middle !important;
        line-height: 28px !important;
        text-align: center !important;
        transform: translateX(-1px) !important;
        filter: drop-shadow(0 0 1px rgba(255,255,255,.65)) !important;
    }
}

/* ===================================================
   Mobile Dark row alignment

   Keeps Dark lined up with the other collapsed menu rows.
   This only affects collapsed/mobile widths.
=================================================== */

@media (max-width: 980px) {
    .qa-nav-main li[class*="dark"],
    .qa-nav-main li[class*="Dark"] {
        position: static !important;
        top: auto !important;
        margin-top: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    .qa-nav-main li[class*="dark"] > a,
    .qa-nav-main li[class*="Dark"] > a {
        position: static !important;
        top: auto !important;
        margin-top: 0 !important;

        height: auto !important;
        min-height: 46px !important;
        max-height: none !important;

        display: block !important;
        padding: 5px 12px 5px 0 !important;
        margin: 0 !important;

        text-align: left !important;
        white-space: normal !important;
        line-height: 32px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .qa-nav-main li[class*="dark"] > a:before,
    .qa-nav-main li[class*="Dark"] > a:before {
        display: inline-block !important;

        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;

        margin: 0 10px 0 0 !important;
        padding: 0 !important;

        vertical-align: middle !important;
        line-height: 28px !important;
        text-align: center !important;
        transform: translateX(-1px) !important;
    }
}

/* ===================================================
   Play landing page
=================================================== */

.kt-play-shell {
    max-width: 900px;
    margin: 18px auto 34px auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.kt-play-intro {
    background: #fff;
    border: 1px solid #dfe7ef;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(15,23,42,.05);
}

.kt-play-intro h2 {
    margin: 0 0 6px 0;
    font-size: 28px;
    line-height: 1.15;
    color: #17324d;
}

.kt-play-intro p {
    margin: 0;
    color: #475569;
    font-size: 16px;
    line-height: 1.45;
}

.kt-play-games {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.kt-play-game-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1px solid #dfe7ef;
    border-radius: 12px;
    padding: 16px;
    text-decoration: none !important;
    color: #17324d;
    box-shadow: 0 3px 10px rgba(15,23,42,.06);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.kt-play-game-card:hover,
.kt-play-game-card:focus {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15,23,42,.12);
    border-color: #2b95d6;
    text-decoration: none !important;
    outline: none;
}

.kt-play-game-thumb {
    flex: 0 0 150px;
    width: 150px;
    height: 150px;
    border-radius: 14px;
    background: #16273a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.kt-play-game-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    filter: none;
}
.kt-play-game-body {
    flex: 1 1 auto;
    min-width: 0;
}

.kt-play-game-body h3 {
    margin: 0 0 8px 0;
    font-size: 24px;
    line-height: 1.15;
    color: #116aa7;
}

.kt-play-game-body p {
    margin: 0 0 12px 0;
    color: #475569;
    font-size: 15px;
    line-height: 1.45;
}

.kt-play-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #2563a8;
    color: #fff;
    font-weight: bold;
    padding: 8px 13px;
}

.kt-play-coming {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 16px 18px;
    color: #475569;
}

.kt-play-coming h3 {
    margin: 0 0 6px 0;
    color: #17324d;
    font-size: 20px;
}

.kt-play-coming p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}

/* ===================================================
   Play landing page dark mode
=================================================== */

html.qa-dark-mode .kt-play-intro,
body.qa-dark-mode .kt-play-intro,
.qa-dark-mode .kt-play-intro,
html.qa-dark-mode .kt-play-game-card,
body.qa-dark-mode .kt-play-game-card,
.qa-dark-mode .kt-play-game-card {
    background: #202830;
    border-color: rgba(255,255,255,.14);
    color: #fff;
}

html.qa-dark-mode .kt-play-intro h2,
body.qa-dark-mode .kt-play-intro h2,
.qa-dark-mode .kt-play-intro h2,
html.qa-dark-mode .kt-play-game-body h3,
body.qa-dark-mode .kt-play-game-body h3,
.qa-dark-mode .kt-play-game-body h3,
html.qa-dark-mode .kt-play-coming h3,
body.qa-dark-mode .kt-play-coming h3,
.qa-dark-mode .kt-play-coming h3 {
    color: #fff;
}

html.qa-dark-mode .kt-play-intro p,
body.qa-dark-mode .kt-play-intro p,
.qa-dark-mode .kt-play-intro p,
html.qa-dark-mode .kt-play-game-body p,
body.qa-dark-mode .kt-play-game-body p,
.qa-dark-mode .kt-play-game-body p {
    color: rgba(255,255,255,.82);
}

html.qa-dark-mode .kt-play-coming,
body.qa-dark-mode .kt-play-coming,
.qa-dark-mode .kt-play-coming {
    background: #1b232b;
    border-color: rgba(255,255,255,.18);
    color: rgba(255,255,255,.82);
}

/* ===================================================
   Play landing page small screens
=================================================== */

@media (max-width: 640px) {
    .kt-play-shell {
        padding: 0 10px;
        margin-top: 12px;
    }

    .kt-play-game-card {
        align-items: flex-start;
        gap: 12px;
        padding: 13px;
    }

    .kt-play-game-thumb {
        flex-basis: 92px;
        width: 92px;
        height: 92px;
        border-radius: 10px;
    }

    .kt-play-game-thumb img {
        width: 100%;
        height: 100%;
    }

    .kt-play-game-body h3 {
        font-size: 21px;
    }

    .kt-play-intro h2 {
        font-size: 25px;
    }
}

/* ===================================================
   v1.49: Keep desktop top menu from wrapping under logo
=================================================== */

@media (min-width: 981px) {
    .qa-header,
    .qam-header,
    .qa-header-clear,
    .qa-nav-main {
        white-space: nowrap !important;
    }

    .qa-logo,
    .qam-logo,
    .qa-nav-main {
        display: inline-block !important;
        vertical-align: top !important;
    }

    .qa-nav-main {
        clear: none !important;
        max-width: none !important;
    }

    .qa-nav-main-list,
    .qa-nav-main ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        white-space: nowrap !important;
    }

    .qa-nav-main-item,
    .qa-nav-main-list > li,
    .qa-nav-main ul > li {
        flex: 0 0 auto !important;
        float: none !important;
    }

    .qa-nav-main-link,
    .qa-nav-main-list > li > a,
    .qa-nav-main ul > li > a {
        box-sizing: border-box !important;
    }

    /* Keep Play compact so it does not force wrapping */
    .qa-nav-main-play {
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
    }

    .qa-nav-main-play .qa-nav-main-link {
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
    }
}

/* ===================================================
   v1.51 Admin/mobile nav alignment fix

   The Admin/moderator menu can keep extra theme padding on custom nav items.
   Use flex for the collapsed menu so the Play icon occupies the same fixed
   left column as the other menu icons and the Play text starts in the same
   position as Questions, Tags, Admin, etc.
=================================================== */

@media (max-width: 980px) {
    .qa-nav-main-play {
        position: static !important;
        top: auto !important;
        margin-top: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        text-align: left !important;
        vertical-align: top !important;
        box-sizing: border-box !important;
    }

    .qa-nav-main-play .qa-nav-main-link,
    .qa-nav-main-play > a {
        position: relative !important;
        top: auto !important;
        margin-top: 0 !important;
        height: auto !important;
        min-height: 46px !important;
        max-height: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        padding: 5px 12px 5px 0 !important;
        margin: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        line-height: 32px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        text-indent: 0 !important;
    }

    .qa-nav-main-play .qa-nav-main-link:before,
    .qa-nav-main-play > a:before {
        content: "" !important;
        display: inline-block !important;
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        margin: 0 10px 0 0 !important;
        padding: 0 !important;
        background: transparent url("play-puzzle-icon-7.png?v=1.51") center center / 25px 25px no-repeat !important;
        border: 0 !important;
        vertical-align: middle !important;
        line-height: 28px !important;
        text-align: center !important;
        transform: none !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        filter: drop-shadow(0 0 1px rgba(255,255,255,.65)) !important;
    }
}
    
    
/* ===================================================
   Dark mode Play icon dimming - all Q2A page templates
=================================================== */

html.qa-dark-mode .qa-nav-main-play a:before,
html.qa-dark-mode .qa-nav-main-play .qa-nav-main-link:before,
html.qa-dark-mode .qa-nav-main-play > a:before,
body.qa-dark-mode .qa-nav-main-play a:before,
body.qa-dark-mode .qa-nav-main-play .qa-nav-main-link:before,
body.qa-dark-mode .qa-nav-main-play > a:before,
.qa-dark-mode .qa-nav-main-play a:before,
.qa-dark-mode .qa-nav-main-play .qa-nav-main-link:before,
.qa-dark-mode .qa-nav-main-play > a:before {
    opacity: .92 !important;
    filter: brightness(.86) saturate(.95) drop-shadow(0 0 1px rgba(255,255,255,.42)) !important;
    outline: none !important;
}



/* ===================================================
   Dark mode Play icon dimming - matched to other nav icons
=================================================== */

html.qa-dark-mode .qa-nav-main-play .qa-nav-main-link:before,
html.qa-dark-mode .qa-nav-main-play > a:before,
html.qa-dark-mode .qa-nav-main-play a:before,
body.qa-dark-mode .qa-nav-main-play .qa-nav-main-link:before,
body.qa-dark-mode .qa-nav-main-play > a:before,
body.qa-dark-mode .qa-nav-main-play a:before {
    opacity: .96 !important;
    filter: brightness(.94) saturate(.96) drop-shadow(0 0 1px rgba(255,255,255,.50)) !important;
    outline: none !important;
}


/* ===================================================
   FINAL Play nav width match
   Match live Play width on all desktop page types.
=================================================== */

@media (min-width: 980px) {
    .qa-nav-main-play,
    .qa-nav-main-list > li.qa-nav-main-play,
    .qa-nav-main ul > li.qa-nav-main-play {
        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
        flex: 0 0 58px !important;
        box-sizing: border-box !important;
    }

    .qa-nav-main-play .qa-nav-main-link,
    .qa-nav-main-play > a {
        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
        box-sizing: border-box !important;
    }
}




/* Hide Play nav on themes that do not use SnowFlat/QAM nav */
body:not(:has(.qam-main-nav-wrapper)) .qa-nav-main-play {
    display: none !important;
}


/* ===================================================
   Side/mobile menu Play alignment
   Makes Play line up left like the other menu items.
=================================================== */

#qam-sidepanel-mobile .qa-nav-main-play,
.qa-sidepanel .qa-nav-main-play,
.qam-sidepanel .qa-nav-main-play,
.qam-main-nav-wrapper .qa-nav-main.qam-menu-open .qa-nav-main-play,
body.qam-body-fixed .qa-nav-main-play {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    overflow: visible !important;
}

#qam-sidepanel-mobile .qa-nav-main-play .qa-nav-main-link,
#qam-sidepanel-mobile .qa-nav-main-play > a,
.qa-sidepanel .qa-nav-main-play .qa-nav-main-link,
.qa-sidepanel .qa-nav-main-play > a,
.qam-sidepanel .qa-nav-main-play .qa-nav-main-link,
.qam-sidepanel .qa-nav-main-play > a,
.qam-main-nav-wrapper .qa-nav-main.qam-menu-open .qa-nav-main-play .qa-nav-main-link,
.qam-main-nav-wrapper .qa-nav-main.qam-menu-open .qa-nav-main-play > a,
body.qam-body-fixed .qa-nav-main-play .qa-nav-main-link,
body.qam-body-fixed .qa-nav-main-play > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 42px !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 8px 12px 8px 26px !important;

    text-align: left !important;
    line-height: 24px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-indent: 0 !important;
    box-sizing: border-box !important;
}

#qam-sidepanel-mobile .qa-nav-main-play .qa-nav-main-link:before,
#qam-sidepanel-mobile .qa-nav-main-play > a:before,
.qa-sidepanel .qa-nav-main-play .qa-nav-main-link:before,
.qa-sidepanel .qa-nav-main-play > a:before,
.qam-sidepanel .qa-nav-main-play .qa-nav-main-link:before,
.qam-sidepanel .qa-nav-main-play > a:before,
.qam-main-nav-wrapper .qa-nav-main.qam-menu-open .qa-nav-main-play .qa-nav-main-link:before,
.qam-main-nav-wrapper .qa-nav-main.qam-menu-open .qa-nav-main-play > a:before,
body.qam-body-fixed .qa-nav-main-play .qa-nav-main-link:before,
body.qam-body-fixed .qa-nav-main-play > a:before {
    content: "" !important;
    display: inline-block !important;
    flex: 0 0 30px !important;

    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;

    margin: 0 12px 0 0 !important;
    padding: 0 !important;

    background: transparent url("play-puzzle-icon-7.png?v=side-left") center center / 24px 24px no-repeat !important;
    border: 0 !important;
    vertical-align: middle !important;
    line-height: 24px !important;
    text-align: center !important;
    transform: none !important;
    position: static !important;
}

/* ===================================================
   v1.65 Moderator/Admin collapsed-menu background fix

   Some moderator/admin menu layouts make custom nav list items shrink to
   their contents. Force the Play row to occupy the whole drawer width so
   the page underneath cannot show through beside it. The open-menu state
   selectors also cover customized themes that collapse the menu above the
   normal SnowFlat breakpoint.
=================================================== */

@media (max-width: 980px) {
    .qam-main-nav-wrapper .qa-nav-main-play {
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: #34495e !important;
        box-sizing: border-box !important;
    }

    .qam-main-nav-wrapper .qa-nav-main-play > .qa-nav-main-link,
    .qam-main-nav-wrapper .qa-nav-main-play > a {
        display: flex !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

.qam-main-nav-wrapper:has(.qam-menu-toggle.current) .qa-nav-main-play,
.qam-main-nav-wrapper .qam-menu-toggle.current ~ .qa-nav-main .qa-nav-main-play {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #34495e !important;
    box-sizing: border-box !important;
}

.qam-main-nav-wrapper:has(.qam-menu-toggle.current) .qa-nav-main-play > .qa-nav-main-link,
.qam-main-nav-wrapper:has(.qam-menu-toggle.current) .qa-nav-main-play > a,
.qam-main-nav-wrapper .qam-menu-toggle.current ~ .qa-nav-main .qa-nav-main-play > .qa-nav-main-link,
.qam-main-nav-wrapper .qam-menu-toggle.current ~ .qa-nav-main .qa-nav-main-play > a {
    display: flex !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}