/* Bejeweled X — project-specific styles */

/* Exposes the device's notch/Dynamic-Island insets as custom properties so
   BejeweledX.js can read them via getComputedStyle (env() itself isn't
   readable from JS) and work out how much of that clearance #bj-frame's own
   letterbox margin already provides — see --bj-safe-top/--bj-safe-right. */
:root {
    --bj-sat: env(safe-area-inset-top, 0px);
    --bj-sar: env(safe-area-inset-right, 0px);
}

/* Centered game stage, mirrors the in-page layout used by other canvas projects. */
#bj-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    /* iOS: a long-press (e.g. the debug hold gesture) must not start text
       selection of the page or pop the magnifier/callout over the board */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* The canvas's parent box: defines the area the game sizes itself into. */
#bj-frame {
    position: relative;
    display: inline-flex;          /* shrink-to-fit the canvas, no side gutters */
    align-items: center;
    justify-content: center;
    background: #0a1740;            /* deep cosmic background, shown before load */
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    line-height: 0;                /* remove inline-canvas baseline gap */
}

#bj-canvas {
    display: block;
    touch-action: none;
    cursor: pointer;
}

/* When the frame goes fullscreen, fill the screen and keep the game centered.
   The board's own aspect ratio rarely matches the screen's, so #bj-canvas gets
   letterboxed within this box — rather than showing flat color in that gutter,
   fill it with the game's own background art (same file the canvas itself
   draws), cover-cropped to the full screen at native resolution. */
#bj-frame:fullscreen {
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 0;
    background: #000 url("../img/background.jpg") center / cover no-repeat;
}

/* CSS-only fullscreen fallback for browsers without an element Fullscreen API
   (iOS Safari never implements requestFullscreen on non-video elements). */
#bj-frame.bj-fake-fullscreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    border-radius: 0;
    background: #000 url("../img/background.jpg") center / cover no-repeat;
    z-index: 1000;
}

.bj-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

#bj-fullscreen {
    cursor: pointer;
}

#bj-open-app {
    font-size: 0.85rem;
    text-decoration: none;
    padding: 0.2rem 0.6rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    opacity: 0.8;
    white-space: nowrap;
}

#bj-open-app:hover {
    opacity: 1;
}

.bj-hint {
    font-size: 0.8rem;
    opacity: 0.6;
    margin: 0;
}

/* ---- Top-right icon buttons (gear, game mode, ...), styled to match the game's
   jewelled look: deep cosmic panel, gold outlines, gem-green switches. Buttons
   share .bj-icon-btn for the common box styling and only override `right` to
   line up in a row. ---- */
.bj-icon-btn {
    /* --bj-ui-scale (set from JS in fitCanvas) shrinks these in lockstep with the
       canvas whenever it renders below its logical resolution, so the buttons can
       never end up taller than the HUD strip they're meant to sit inside of.
       --bj-safe-top/--bj-safe-right (also from fitCanvas) are the notch/Dynamic
       Island clearance MINUS whatever letterbox margin #bj-frame already has on
       that side — #bj-frame floats centered rather than flush to the screen edge,
       so blindly adding the full device inset here would double up on clearance
       it already has and shove the buttons down into the board / too far right. */
    position: absolute;
    top: calc(10px * var(--bj-ui-scale, 1) + var(--bj-safe-top, 0px));
    width: calc(40px * var(--bj-ui-scale, 1));
    height: calc(40px * var(--bj-ui-scale, 1));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* !important: the template's global `button` rule (main.css) forces
       color: #585858 !important on every <button>, which would otherwise
       gray out these icons instead of the intended white/gold theme. */
    color: #fff !important;
    background: #1b2a6b;             /* sapphire blue */
    border-width: calc(3px * var(--bj-ui-scale, 1));
    border-style: solid;
    border-color: #f3c200;           /* gold outline */
    border-radius: calc(8px * var(--bj-ui-scale, 1));
    box-shadow: 0 3px 0 #b08a00, 0 4px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 20;
    -webkit-tap-highlight-color: transparent;
}
.bj-icon-btn svg {
    width: calc(22px * var(--bj-ui-scale, 1));
    height: calc(22px * var(--bj-ui-scale, 1));
    display: block;
}
.bj-icon-btn:hover { color: #fff !important; filter: brightness(1.08); }
.bj-icon-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #b08a00, 0 2px 4px rgba(0, 0, 0, 0.3);
}

.bj-gear { right: calc(10px * var(--bj-ui-scale, 1) + var(--bj-safe-right, 0px)); }
.bj-gamemode { right: calc(58px * var(--bj-ui-scale, 1) + var(--bj-safe-right, 0px)); }

.bj-settings-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    /* Transparent (no dim) — still covers the screen so it captures taps and the
       game doesn't react behind it, but it won't darken the game. */
    background: transparent;
    z-index: 30;
    -webkit-tap-highlight-color: transparent;
}
.bj-settings-overlay.open { display: flex; }

.bj-settings-panel {
    width: min(82%, 280px);
    box-sizing: border-box;
    padding: 18px 16px 16px;
    background: #14225a;             /* deep blue, like the in-game panels */
    border: 4px solid #f3c200;
    border-radius: 12px;
    box-shadow: 0 6px 0 #b08a00, 0 12px 22px rgba(0, 0, 0, 0.45);
    color: #ffe9a8;
    font-family: "Trebuchet MS", Verdana, Geneva, sans-serif;
    text-align: center;
}
.bj-settings-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 12px;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}
.bj-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 2px;
    cursor: pointer;
    user-select: none;
}
.bj-setting-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}
.bj-debug-label {
    text-decoration: underline dotted rgba(255, 233, 168, 0.6);
    text-underline-offset: 3px;
}
.bj-debug-label:hover { color: #fff; }

/* Debug sub-menu: three toggle rows (radio behaviour handled in JS) instead
   of the Game Mode overlay's button list. */
.bj-debugmode-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 4px;
    text-align: left;
}
.bj-debugmode-row {
    align-items: center;
    padding: 8px 2px;
}
.bj-debugmode-row .bj-setting-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 10px;
    /* #bj-frame sets line-height: 0 (to remove the canvas's inline baseline gap);
       inherited here it collapses the label + description to overlapping zero-height
       lines instead of stacking them. */
    line-height: normal;
}
.bj-debugmode-desc {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    opacity: 0.75;
}

.bj-toggle {                     /* hide the real checkbox; the span is the UI */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
/* Sound row: volume slider + mute toggle side by side. The toggle keeps its own
   small <label> wrapper (bj-toggle-wrap) so it still forwards clicks onto the
   zero-size checkbox — the outer row is a plain <div> now that it holds two
   separate controls instead of just one. */
.bj-sound-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bj-toggle-wrap {
    display: flex;
    cursor: pointer;
}
.bj-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 84px;
    height: 6px;
    border-radius: 999px;
    background: #3a3f66;
    outline: none;
    cursor: pointer;
}
.bj-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f3c200;
    border: 2px solid #b08a00;
    cursor: pointer;
}
.bj-volume-slider::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: #3a3f66;
}
.bj-volume-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f3c200;
    border: 2px solid #b08a00;
    cursor: pointer;
}
.bj-volume-slider:disabled {
    opacity: 0.4;
    cursor: default;
}
.bj-switch {
    position: relative;
    flex: none;
    width: 52px;
    height: 28px;
    background: #3a3f66;             /* off */
    border: 3px solid #f3c200;
    border-radius: 999px;
    transition: background 0.15s ease;
}
.bj-switch::after {
    content: "";
    position: absolute;
    top: 0;
    left: 1px;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    background: #fff;
    border: 2px solid #b08a00;
    border-radius: 50%;
    transition: transform 0.15s ease;
}
.bj-toggle:checked ~ .bj-switch { background: #2ec27e; }  /* on = emerald green */
.bj-toggle:checked ~ .bj-switch::after { transform: translateX(24px); }
.bj-toggle:focus-visible ~ .bj-switch {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.bj-settings-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 14px auto 0;
    padding: 8px 24px;
    line-height: 1;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #1b1140 !important;       /* !important: overrides main.css's global button rule */
    background: #f3c200;             /* gold, like the in-game buttons */
    border: 3px solid #b08a00;
    border-radius: 8px;
    box-shadow: 0 3px 0 #8a6a00;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.25);
    cursor: pointer;
}
.bj-settings-close:hover { color: #1b1140 !important; }
.bj-settings-close:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #8a6a00;
}

.bj-resume { background: #2ec27e; }  /* "go" green for resume */

.bj-reset {
    background: #7a1a1a;
    color: #ffe9a8 !important;       /* !important: overrides main.css's global button rule */
    border-color: #c03030;
    box-shadow: 0 3px 0 #4a0a0a;
}
.bj-reset:hover  { background: #9a2020; color: #ffe9a8 !important; }
.bj-reset:active { box-shadow: 0 1px 0 #4a0a0a; }

.bj-mode-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
}
.bj-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    box-sizing: border-box;
    /* main.css's global button rule sets a fixed height/line-height + overflow:
       hidden sized for a single line of uppercase text — override them so this
       two-line (name + description) button can size to its content and center
       both lines vertically instead of getting clipped/pinned to the top. */
    height: auto;
    line-height: normal;
    overflow: visible;
    white-space: normal;             /* main.css forces nowrap; the description needs to wrap */
    padding: 10px 12px;
    font-family: inherit;
    text-align: center;
    color: #cfe0ff !important;       /* !important: overrides main.css's global button rule */
    background: linear-gradient(180deg, #24337c 0%, #16214f 100%);
    border: 3px solid #3a4a90;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.bj-mode-btn:hover:not(:disabled):not(.active) {
    color: #cfe0ff !important;       /* !important: overrides main.css's global button:hover rule */
    border-color: #6ea8ff;
    transform: translateY(-1px);
}
.bj-mode-btn.active:hover { color: #1b1140 !important; }
.bj-mode-btn.active {
    color: #1b1140 !important;       /* !important: overrides main.css's global button rule */
    background: linear-gradient(180deg, #ffe27a 0%, #f3c200 100%);
    border-color: #ffef9e;
    box-shadow: 0 0 0 2px #b08a00 inset, 0 0 14px rgba(243, 194, 0, 0.65);
}
.bj-mode-btn.active .bj-mode-desc { opacity: 0.85; }
.bj-mode-btn:active:not(:disabled) { transform: translateY(1px); }
.bj-mode-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.bj-mode-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}
.bj-mode-btn.active .bj-mode-name { text-shadow: none; }
.bj-mode-desc {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.75;
}

/* Mode-selected toast: brief popup confirming the picked mode + its description,
   shown over the board after the Game Mode overlay closes, auto-dismissing itself. */
.bj-mode-toast {
    position: absolute;
    left: 50%;
    top: 50%;
    box-sizing: border-box;
    width: min(80%, 280px);
    padding: 14px 18px;
    background: #14225a;
    border: 3px solid #f3c200;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
    color: #ffe9a8;
    text-align: center;
    font-family: "Trebuchet MS", Verdana, Geneva, sans-serif;
    /* #bj-frame sets line-height: 0 (to remove the canvas's inline baseline
       gap), which this toast would otherwise inherit — collapsing the name
       and description lines to near-zero height and making them overlap. */
    line-height: normal;
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.94);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.bj-mode-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.bj-mode-toast-name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}
.bj-mode-toast-desc {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.85;
}

/* Timed mode: Time's Up stat rows (level reached / final score) */
.bj-timeup-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 0 4px;
}
.bj-timeup-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    /* #bj-frame sets line-height: 0 (to remove the canvas's inline baseline gap);
       inherited here it collapses each label/value to a zero-height line box,
       making adjacent rows overlap instead of stacking. */
    line-height: normal;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}
.bj-timeup-row span:last-child {
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}

.bj-version {
    margin-top: 12px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffe9a8;
    opacity: 0.5;
}

/* Debug Mode's hold-and-drag picker ("Spawn any special" / "Change any color"):
   holding a gem pops this up above it (Bomb/Cross/Hyper, or the color swatches);
   drag onto a button and release to apply it, release elsewhere to close. Fixed
   to the viewport since it tracks a canvas coordinate translated to screen space. */
.bj-debug-picker {
    position: fixed;
    display: none;
    gap: 8px;
    padding: 6px;
    transform: translate(-50%, calc(-100% - 14px));
    background: #14225a;
    border: 3px solid #f3c200;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    z-index: 50;
}
.bj-debug-picker.open { display: flex; }
.bj-debug-pick-btn {
    box-sizing: border-box;
    /* grid + place-items keeps the emoji glyph dead-center regardless of its
       baseline metrics (flex centering let some emoji sit off-center) */
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 3px solid #3a4a90;
    background: #1b2760;
    font-size: 20px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: transform 0.1s ease, border-color 0.1s ease;
}
/* inline SVG icon (block kills the inline-baseline gap so grid centers it exactly) */
.bj-debug-pick-btn svg { display: block; }
/* .hover is toggled from JS while dragging over a button (the canvas holds
   pointer capture, so native :hover never fires during the drag) */
.bj-debug-pick-btn:hover,
.bj-debug-pick-btn.hover {
    border-color: #fff;
    transform: scale(1.15);
}