/* ============================================
   MENU POPUPS STYLES
   HTML implementation of menu system
   ============================================ */

/* BGPP-668 (review): the Coiny display font renders ASCII punctuation
   (slash, quotes, parens, brackets) with stylised glyphs that read as
   backslash / curly quotes / weird shapes on testers' devices. This
   @font-face declares a virtual font that maps ONLY those punctuation
   code points to a clean system sans-serif — letters and digits still
   come from Coiny because they fall outside the unicode-range. Used
   below on rules / how-to-play text via `'CoinyOverride', 'Coiny'`. */
@font-face {
    font-family: 'CoinyOverride';
    src: local('Arial'), local('Helvetica'), local('sans-serif');
    unicode-range:
        U+0022,        /* "  straight double quote */
        U+0027,        /* '  straight apostrophe */
        U+0028-0029,   /* ( ) parentheses */
        U+002F,        /* /  forward slash */
        U+005B-005D,   /* [ \ ] square brackets + backslash */
        U+007B-007D;   /* { | } curly braces + pipe */
}

/* BGPP-207: standalone buttons (#home-btn, #error-btn-secondary, etc.) need
   display:none when the .hidden class is toggled. The popup-level .hidden
   rule (.menu-popup.hidden / .error-popup.hidden) only fades opacity, and
   .intro-slide.hidden uses opacity for slide transitions — we deliberately
   target only buttons here so those fade rules keep working. */
button.hidden,
.menu-btn.hidden,
.error-btn.hidden {
    display: none !important;
}

.menu-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10002; /* Above restoration popup */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease;
    touch-action: manipulation;
    overscroll-behavior: none;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.menu-popup.hidden {
    opacity: 0;
    pointer-events: none;
}

.menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

/* Menu Modal */
.menu-modal {
    position: relative;
    background: linear-gradient(145deg, #303030, #252525);
    border-radius: 20px;
    padding: 35px 12px;
    min-width: 200px;
    max-width: 250px;
    width: 70%;
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.8),
        0 15px 40px rgba(0, 0, 0, 0.6),
        0 5px 15px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: menuPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
        "close close close close"
        "title title title title"
        ". sound music ."
        "howtoplay howtoplay howtoplay howtoplay"
        "home home home home";
    gap: 20px;
    align-items: center;
    justify-items: center;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    transform-origin: center center;
    transition: transform 0.2s ease-out;
}

.menu-close {
    grid-area: close;
    justify-self: end;
    align-self: flex-start;
    margin-left: auto;
}

.menu-title {
    grid-area: title;
    width: 100%;
}

#sound-toggle {
    grid-area: sound;
}

#music-toggle {
    grid-area: music;
}

#how-to-play-btn {
    grid-area: howtoplay;
}

#home-btn {
    grid-area: home;
}

.menu-modal-large {
    max-width: 500px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
    padding: 35px 20px;
    min-width: 280px;
    width: 85%;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-origin: center center;
    transition: transform 0.2s ease-out;
}

.menu-modal-large .menu-close {
    align-self: flex-end;
}

.menu-modal-large .menu-btn {
    min-width: 200px;
    padding: 16px 20px;
}

@keyframes menuPopIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Close Button */
.menu-close {
    min-width: 34px;
    max-width: 34px;
    width: 34px;
    min-height: 34px;
    max-height: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(102, 102, 102, 0.8);
    border: none;
    color: white;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-family: Arial, sans-serif;
    line-height: 1;
    margin: -20px -10px 0 0;
    flex-shrink: 0;
    padding: 0;
}

.menu-close:hover {
    background-color: rgba(102, 102, 102, 1);
    transform: scale(1.1);
}

.menu-close:active {
    transform: scale(0.95);
}

/* Title */
.menu-title {
    font-family: 'Coiny', cursive;
    font-size: 42px;
    color: white;
    margin: -15px 0 0 0;
    text-align: center;
}

/* Toggle Switches */
.menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(251, 203, 19, 0.3);
}

.toggle-icon-container {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #d3d3d3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.menu-toggle:active .toggle-icon-container {
    transform: scale(0.95);
    background-color: #c0c0c0;
}

.toggle-icon {
    width: 30px;
    height: 30px;
}

.toggle-label {
    font-family: 'Coiny', cursive;
    font-size: 18px;
    color: white;
    text-align: center;
}

.toggle-switch {
    position: relative;
}

.toggle-track {
    width: 54px;
    height: 28px;
    border-radius: 20px;
    background-color: #a0a0a0;
    border: 2px solid black;
    position: relative;
    transition: background-color 0.3s ease;
}

.toggle-track.active {
    background-color: #4CAF50;
}

.toggle-thumb {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: white;
    border: 2px solid black;
    transition: left 0.3s ease;
}

.toggle-track.active .toggle-thumb {
    left: 26px;
}

/* Buttons */
.menu-btn {
    font-family: 'Coiny', cursive;
    font-size: 24px;
    padding: 16px 12px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: bold;
    min-width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    white-space: nowrap;
    position: relative;
}

.menu-btn-primary {
    background-color: #fbcb13;
    color: #000000;
    box-shadow: 0 5px 0 #ff7200;
}

.menu-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #ff7200;
}

.menu-btn-primary:active {
    transform: translateY(2px);
    box-shadow: 0 3px 0 #ff7200;
}

.menu-btn-secondary {
    background-color: #d3d3d3;
    color: #333333;
    box-shadow: 0 5px 0 #a0a0a0;
}

.menu-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #a0a0a0;
}

.menu-btn-secondary:active {
    transform: translateY(2px);
    box-shadow: 0 3px 0 #a0a0a0;
}

.btn-icon {
    display: none;
}

.menu-btn-secondary .btn-icon {
    display: none;
}

.btn-icon img {
    display: none;
}

.btn-text {
    flex: 1;
    text-align: center;
    font-size: 24px;
    width: 100%;
}

/* How to Play Content */
.howtoplay-content {
    max-width: 400px;
    padding: 20px;
    text-align: left;
}

.howtoplay-text {
    font-family: 'Coiny', cursive;
    font-size: 18px;
    color: white;
    line-height: 1.6;
    margin: 0;
    white-space: pre-line;
}

/* Rules Content */
/* BGPP-1147: layout shifting between pages — fixed height + scroll on
   overflow keeps the modal from jumping when card content has different
   line counts. */
.rules-content {
    max-width: 400px;
    padding: 20px;
    text-align: center;
    height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    justify-content: flex-start;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    isolation: isolate;
    opacity: 1;
    transition: opacity 0.1s ease-in-out;
}

.rules-card-title {
    font-family: 'Coiny', cursive;
    font-size: 18px;
    color: white;
    font-weight: bold;
    margin: 0;
}

.rules-card-text {
    font-family: 'Coiny', cursive;
    font-size: 20px;
    color: white;
    line-height: 1.5;
    margin: 0;
    text-align: center;
    text-decoration: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Rules Navigation */
.rules-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 10px 0;
}

/* BGPP-668: rules-arrow uses pure-CSS border triangles (button content is
   empty in the HTML). This avoids Unicode characters being rendered as
   colour emoji on iOS/Android/Samsung — they are pure geometry and centre
   reliably with flex inside the circle. */
.rules-arrow {
    position: relative;
    min-width: 50px;
    max-width: 50px;
    width: 50px;
    min-height: 50px;
    max-height: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #d3d3d3;
    border: none;
    color: #333333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
    /* BGPP-668 (review): real Pixel 9 / iPhone 17 testers reported
       arrows not responding. Bypass the 300ms tap delay and the
       browser's default tap-highlight, keep the button above any
       same-bottom siblings, and ensure the triangle pseudo-element
       lets clicks fall through to the button. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    z-index: 2;
}

.rules-arrow::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    /* Let touches on the triangle fall through to the parent button. */
    pointer-events: none;
}

.rules-arrow-left::before {
    border-right: 12px solid #333333;
    margin-left: -3px; /* optical centering */
}

.rules-arrow-right::before {
    border-left: 12px solid #333333;
    margin-right: -3px; /* optical centering */
}

.rules-arrow:hover {
    background-color: #c0c0c0;
    transform: scale(1.1);
}

.rules-arrow:active {
    transform: scale(0.95);
}

.rules-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.rules-page-indicator {
    /* CoinyOverride routes punctuation (the '/' in '1/10') to Arial,
       letters/digits still come from Coiny. */
    font-family: 'CoinyOverride', 'Coiny', cursive;
    font-size: 20px;
    color: white;
    min-width: 60px;
    text-align: center;
}

/* BGPP-668 (review): use CoinyOverride for rules/how-to-play so quotes,
   parens, brackets, and slashes render with clean ASCII glyphs (Coiny's
   ornamental versions read as curly quotes / weird shapes to testers). */
.rules-card-title,
.rules-card-text,
.howtoplay-text {
    font-family: 'CoinyOverride', 'Coiny', cursive;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    .menu-modal {
        padding: 30px 20px;
        min-width: 280px;
        max-width: 90%;
    }

    .menu-modal-large {
        /* max-height removed - using JavaScript scale instead */
    }

    .menu-title {
        font-size: 28px;
    }

    .menu-btn {
        font-size: 20px;
        padding: 14px 25px;
        min-width: 200px;
    }

    .toggle-label {
        font-size: 16px;
    }

    .howtoplay-text {
        font-size: 16px;
    }

    .rules-card-title {
        font-size: 17px;
    }

    .rules-card-text {
        font-size: 17px;
    }

    /* BGPP-668 (review): on mobile the arrows were 45px which is below
       the WCAG 44px minimum and noticeably hard to tap. Bump to 60px —
       comfortable thumb target without dominating the modal. */
    .rules-arrow {
        min-width: 60px;
        max-width: 60px;
        width: 60px;
        min-height: 60px;
        max-height: 60px;
        height: 60px;
        font-size: 28px;
    }

    .rules-page-indicator {
        font-size: 18px;
    }
}

/* Long text adaptation */
.menu-btn .btn-text {
    font-size: inherit;
}

/* For very long button texts (like French translations) */
@media (max-width: 500px) {
    .menu-btn {
        min-width: 180px;
        font-size: 18px;
        padding: 14px 22px;
    }
}

/* Desktop adjustments */
@media (min-width: 601px) {
    .menu-modal {
        padding: 30px 15px;
        min-width: 280px;
        max-width: 320px;
        gap: 15px;
    }

    .menu-modal-large {
        max-width: 420px;
        min-width: 320px;
        max-height: 75vh;
        padding: 25px 15px;
        gap: 12px;
    }

    .menu-modal-large .menu-btn {
        min-width: 180px;
        padding: 14px 16px;
        font-size: 18px;
    }

    .menu-btn {
        font-size: 18px;
        padding: 14px 10px;
        min-width: 140px;
    }

    .btn-text {
        font-size: 18px;
    }

    .menu-title {
        font-size: 36px;
    }

    .toggle-label {
        font-size: 16px;
    }

    .howtoplay-text {
        font-size: 16px;
    }

    .rules-card-text {
        font-size: 18px;
    }

    .rules-content {
        padding: 10px 20px;
        gap: 10px;
        min-height: 250px;
    }
}

/* ============================================
   LANDSCAPE-MOBILE PROFILE OVERRIDES
   Activated by body.is-landscape-mobile (set by LayoutProfile.js).
   Goal: same visual layout as portrait-mobile (5-row grid, vertical
   toggles), just dimensionally smaller so the modal fits in a 320–500px
   tall viewport. Modal stays centered; JS scalePopup() can shrink
   further if a particular rule card overflows.
   ============================================ */

/* Kill the menuPopIn keyframe in landscape — it animates `transform`,
   which fights JS-applied inline `transform: scale()` from scalePopup()
   for the first 300ms and can leave the modal clipped during entry. */
body.is-landscape-mobile .menu-modal,
body.is-landscape-mobile .menu-modal-large {
    animation: none;
}

/* Main menu modal: smaller paddings/gaps/fonts, same 5-row grid. */
body.is-landscape-mobile .menu-modal {
    padding: 12px 16px;
    gap: 8px;
    min-width: 0;
    max-width: 360px;
}

body.is-landscape-mobile .menu-modal .menu-title {
    font-size: 22px;
    margin: -6px 0 0 0;
}

body.is-landscape-mobile .menu-modal .menu-close {
    margin: -10px -4px 0 0;
}

body.is-landscape-mobile .menu-modal .toggle-icon-container {
    width: 38px;
    height: 38px;
}

body.is-landscape-mobile .menu-modal .toggle-icon {
    width: 22px;
    height: 22px;
}

body.is-landscape-mobile .menu-modal .toggle-label {
    font-size: 13px;
}

body.is-landscape-mobile .menu-modal .toggle-track {
    width: 44px;
    height: 22px;
}

body.is-landscape-mobile .menu-modal .toggle-thumb {
    width: 16px;
    height: 16px;
}

body.is-landscape-mobile .menu-modal .toggle-track.active .toggle-thumb {
    left: 22px;
}

body.is-landscape-mobile .menu-modal .menu-btn {
    font-size: 14px;
    padding: 9px 18px;
    min-width: 0;
}

/* Large modal (How-to-play / Rules) in landscape: enough width that
   rule-card descriptions fit on few lines. Width is min(540px, 95vw)
   so phones narrower than 540 still see the modal with side margins.
   No max-height — modal grows with content, JS scalePopup() shrinks
   the whole element via transform: scale if it exceeds viewport. A
   CSS max-height would cause content to spill past the modal bg
   (overflow: visible from base) and look cut off. */
body.is-landscape-mobile .menu-modal-large {
    padding: 6px 14px;
    gap: 4px;
    max-width: 540px;
    min-width: 0;
    width: 95%;
}

body.is-landscape-mobile .menu-modal-large .menu-title {
    font-size: 14px;
    margin: 0;
}

body.is-landscape-mobile .menu-modal-large .menu-close {
    margin: -2px -2px 0 0;
    width: 26px;
    min-width: 26px;
    max-width: 26px;
    height: 26px;
    min-height: 26px;
    max-height: 26px;
    font-size: 18px;
}

body.is-landscape-mobile .menu-modal-large .menu-btn {
    font-size: 12px;
    padding: 6px 10px;
    min-width: 0;
}

body.is-landscape-mobile .menu-modal-large .howtoplay-text {
    font-size: 11px;
    line-height: 1.25;
}

body.is-landscape-mobile .menu-modal-large .rules-content {
    padding: 2px 32px;
    gap: 4px;
    /* Fixed height so the modal doesn't reflow between rule pages.
       110px fits the longest card body at 10px font with tight
       line-height — keeps the rules popup compact in the short
       landscape viewport. */
    height: 110px !important;
    max-height: 110px !important;
    min-height: 110px !important;
    overflow: hidden !important;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    display: block;
    text-align: center;
}

/* h3 / p as block elements with explicit max-width + auto margins so they
   sit centered within the rules-content column regardless of any flex
   alignment quirks. */
body.is-landscape-mobile .menu-modal-large .rules-card-title,
body.is-landscape-mobile .menu-modal-large .rules-card-text {
    display: block;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    text-align: center;
}

/* Landscape rules bottom row: arrows flank BACK TO MENU, no page
   indicator. Implemented with absolute positioning so all three sit
   on the same visual row — the modal reserves space via padding-bottom
   and the elements pin to bottom of the modal. */
body.is-landscape-mobile #rules-popup .menu-modal-large {
    position: relative;
    padding-bottom: 48px;
}

body.is-landscape-mobile #rules-popup .rules-page-indicator {
    display: none;
}

body.is-landscape-mobile #rules-popup .rules-navigation {
    /* Same-row layout with back-btn: navigation is absolute so its
       children (arrows) overlay the bottom row. The back-btn (also
       absolute) is between them. No pointer-events: none — arrows now
       use a higher z-index instead. */
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
}

body.is-landscape-mobile #rules-popup .rules-arrow {
    /* 48×48 — comfortably above the WCAG 44px floor. Real-device
       testers reported smaller sizes were hard to hit. */
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    font-size: 22px;
}

body.is-landscape-mobile #rules-popup #rules-back-btn {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 220px;
    min-width: 140px;
    padding: 8px 24px;
    z-index: 1;
}

body.is-landscape-mobile .menu-modal-large .rules-card-title {
    font-size: 13px;
}

body.is-landscape-mobile .menu-modal-large .rules-card-text {
    font-size: 11px;
    line-height: 1.2;
}

body.is-landscape-mobile .menu-modal-large .rules-navigation {
    gap: 6px;
}

body.is-landscape-mobile .menu-modal-large .rules-arrow {
    min-width: 26px;
    max-width: 26px;
    width: 26px;
    min-height: 26px;
    max-height: 26px;
    height: 26px;
    font-size: 14px;
}

body.is-landscape-mobile .menu-modal-large .rules-page-indicator {
    font-size: 11px;
}

/* How-to-play in landscape: 2-column grid — text on the left, buttons
   stacked on the right with a small fixed height (not stretched). */
body.is-landscape-mobile #howtoplay-popup .menu-modal-large {
    display: grid;
    grid-template-columns: 1fr 140px;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "title close"
        "text  see"
        "text  back";
    gap: 8px 14px;
    max-width: 480px;
    width: auto;
    padding: 10px 14px;
}

body.is-landscape-mobile #howtoplay-popup .menu-modal-large .menu-title {
    grid-area: title;
    font-size: 16px;
    margin: 0;
    align-self: center;
}

body.is-landscape-mobile #howtoplay-popup .menu-modal-large .menu-close {
    grid-area: close;
    margin: 0;
    align-self: center;
    justify-self: end;
}

body.is-landscape-mobile #howtoplay-popup .menu-modal-large .howtoplay-content {
    grid-area: text;
    /* Long instructions scroll inside their cell rather than pushing
       the buttons or the modal past the viewport. */
    overflow-y: auto;
    max-height: 100%;
    min-height: 0;
}

body.is-landscape-mobile #howtoplay-popup .menu-modal-large .howtoplay-text {
    font-size: 11px;
    line-height: 1.25;
    margin: 0;
}

body.is-landscape-mobile #howtoplay-popup .menu-modal-large #see-rules-btn {
    grid-area: see;
}

body.is-landscape-mobile #howtoplay-popup .menu-modal-large #howtoplay-back-btn {
    grid-area: back;
}

body.is-landscape-mobile #howtoplay-popup .menu-modal-large .menu-btn {
    font-size: 12px;
    padding: 0 8px;
    min-width: 0;
    width: 100%;
    height: 34px;
    line-height: 1;
    white-space: nowrap;
    align-self: center;
}

body.is-landscape-mobile .menu-modal-large .rules-arrow {
    min-width: 36px;
    max-width: 36px;
    width: 36px;
    min-height: 36px;
    max-height: 36px;
    height: 36px;
    font-size: 18px;
}

body.is-landscape-mobile .menu-modal-large .rules-page-indicator {
    font-size: 14px;
}