* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background-color: #000000 !important; /* Pure black outer frame */
    width: 100%;
    height: 100%;
    height: 100svh; /* iOS Fix: Set structural height to true visible viewport */
    overflow: hidden;
}

/* 2. THE PLAYING THEATER CANVAS */
body {
    width: 100%;
    height: 100%;
    height: 100svh; /* iOS Fix: Match the true visible viewport */
    background-color: #1a1a1a;

    /* Safely bleed the charcoal background out to the screen edges */
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);

    /* Keep your perfect centered layout mechanics */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-sizing: border-box;
}

/* Master alignment container - strips out extra vertical padding completely */
.game-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* THE VERTICAL MAXIMIZER:
 * Now safely anchored to Short Viewport Height (svh) to accommodate iOS overlays.
 */
.game-container {
    position: relative;

    /* Fallbacks for older browsers */
    height: 88vh;
    width: 176vh;

    /* Modern Viewport Fix: Locks the 2:1 ratio to the *visible* screen height */
    height: 85svh;          /* Slightly reduced from 88 to perfectly respect iOS home indicator bars */
    width: 170svh;          /* Mathematically locked 2:1 aspect ratio asset box (85 * 2) */

    max-width: 96vw;       /* Safety guardrail so it doesn't bleed off the sides on ultra-narrow phones */

    background: #2a2a2a;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box; /* Crucial to prevent padding from expanding the calculated 2:1 box width/height */
}

/* 2x4 Grid Core - Safe for both Android and iOS Safari */
.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr)); /* Rigid container-clamped heights */
    gap: 8px;
    flex: 1;
    width: 100%;
    align-items: stretch;
    justify-items: stretch;
}
/* Skinny Jewel Dashboard Row - Sits right at the base with zero wasted margins */
.jewel-dashboard-row {
    display: flex;
    justify-content: space-between; /* Spreads flanking zones perfectly edge-to-edge */
    align-items: center;
    width: 100%;
    height: 36px;          /* Adjusted slightly to scale cleanly with 36px action buttons */
    padding: 0 4px;
}

/* --- UPGRADED JEWEL CONTAINER & SIZING --- */
.jewel-track {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;             /* Generous spacing between indicators */
    flex-grow: 1;          /* Claims the entire middle row column channel dynamically */
}

.jewel {
    width: 22px;        /* Increased size from standard dots */
    height: 22px;       /* Increased size from standard dots */
    border-radius: 50%;
    background-color: #222222; /* Sleek, dark default socket */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 1px 1px rgba(255, 255, 255, 0.05);
    transition: all 0.25s ease-in-out; /* Smooth transition when colors snap change */
}

/* --- THE SYMMETRICAL CENTERING EQUILIBRIUM --- */
/* We allocate identical layout footprints (2 buttons + gap = 76px) to both boundaries
 *  to secure absolute pixel alignment for the center track element. */
#btn-eye-solution {
flex-basis: 76px;
display: flex;
justify-content: flex-start; /* Aligns eye icon flat against the far-left border */
}

.track-action-group-right {
    flex-basis: 76px;
    display: flex;
    justify-content: flex-end;   /* Aligns menu icon flat against the far-right border */
    align-items: center;
    gap: 4px;                    /* Separation spacing between your mute and menu buttons */
}

/* Inline Action Icons Left/Right of Jewels */
.track-action-btn {
    background: none;
    border: none;
    color: #888888;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s ease, filter 0.2s ease, color 0.15s, transform 0.1s;
}

.track-action-btn:hover { color: #ffffff; }
.track-action-btn:active { transform: scale(0.9); }
.track-action-btn svg { width: 24px; height: 24px; }

/* Optional visual feedback for the eye button itself when active vs inactive */
#btn-eye-solution.inactive {
opacity: 0.4;
filter: grayscale(1);
}

/* When the eye button is active (showing solutions), hide the crossed-out slash line */
#btn-eye-solution:not(.inactive) .eye-slash-line {
display: none;
}

/* --- HIGH-INTENSITY NEON EMBEDDED GLOW STATES --- */
.jewel.jewel-red {
    background-color: hsl(355, 100%, 60%);
    box-shadow: 0 0 14px hsl(355, 100%, 60%), inset 0 2px 2px rgba(255, 255, 255, 0.6);
}
.jewel.jewel-orange {
    background-color: hsl(28, 100%, 55%);
    box-shadow: 0 0 14px hsl(28, 100%, 55%), inset 0 2px 2px rgba(255, 255, 255, 0.6);
}
.jewel.jewel-yellow {
    background-color: hsl(55, 100%, 55%);
    box-shadow: 0 0 14px hsl(55, 100%, 55%), inset 0 2px 2px rgba(255, 255, 255, 0.6);
}
.jewel.jewel-blue {
    background-color: hsl(205, 100%, 55%);
    box-shadow: 0 0 14px hsl(205, 100%, 55%), inset 0 2px 2px rgba(255, 255, 255, 0.6);
}
.jewel.jewel-green {
    /* 🎨 MATCHED TO TILE-5 (#38b000) */
    background-color: hsl(101, 100%, 35%);
    box-shadow: 0 0 16px hsl(101, 100%, 35%), inset 0 2px 2px rgba(255, 255, 255, 0.5);
}
.jewel.jewel-purple {
    background-color: hsl(275, 100%, 60%);
    box-shadow: 0 0 14px hsl(275, 100%, 60%), inset 0 2px 2px rgba(255, 255, 255, 0.6);
}
.jewel.jewel-gray {
    background-color: hsl(200, 8%, 50%); /* Clean, balanced slate gray */
    box-shadow: 0 0 14px hsl(200, 10%, 75%), inset 0 2px 2px rgba(255, 255, 255, 0.6); /* Bright silver-ash glow */
}

/* For complete unlit placeholder slots */
.jewel.unlit {
    background-color: #1a1a1a !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.8) !important;
}

/* Base Tile Styling Elements */
/* Base Tile Styling Elements */
/* Base Tile Styling Elements */
.tile {
    position: relative;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    user-select: none;

    /* REMOVED container-type to stop Safari from guessing layout widths */
}

.tile-1 { background-color: #d32f2f; }
.tile-2 { background-color: #ff9800; }
.tile-3 { background-color: #f5f35c; }
.tile-4 { background-color: #35a7ff; }
.tile-5 { background-color: #38b000; }
.tile-6 { background-color: #9c27b0; }
.tile-7 { background-color: #70777a; }
.tile-empty {
    background-color: #ffffff;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.15);
}
.character-slot svg {
    width: 100%;
    height: 100%;
    display: block;
}
.character-slot {
    width: 80%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
/* Pac-Man Portals Structuring */
/* Pac-Man Portals Structuring */
.door {
    position: absolute;
    width: 16px;
    height: 22%;
    background-color: #1a1a1a;
    z-index: 10;
}

.door-left { left: -8px; border-radius: 0 6px 6px 0; }
.door-right { right: -8px; border-radius: 6px 0 0 6px; }

/* TOP PORTAL CONFIGURATION */
.door-top {
    top: 25%;
    transform: translateY(-50%); /* Keeps default middle anchoring */
}

/* BOTTOM PORTAL CONFIGURATION */
.door-bottom {
    top: 75%;
    transform: translateY(-100%); /* NEW: Pulls the element up by an extra 1/2 door height! */
}

.door-left { left: -8px; border-radius: 0 6px 6px 0; }
.door-right { right: -8px; border-radius: 6px 0 0 6px; }

/* --- Keep all your excellent neon glow states exactly the same --- */
.door-top.door-left { border-right: 4px solid #ff007f; filter: drop-shadow(2px 0px 6px #ff007f); }
.door-top.door-right { border-left: 4px solid #ff007f; filter: drop-shadow(-2px 0px 6px #ff007f); }
.door-bottom.door-left { border-right: 4px solid #00f5d4; filter: drop-shadow(2px 0px 6px #00f5d4); }
.door-bottom.door-right { border-left: 4px solid #00f5d4; filter: drop-shadow(-2px 0px 6px #00f5d4); }

/* --- Full Screen Menu Overlay System --- */
#menu-overlay, #custom-rules-overlay {
/* Disables pinch-zoom and double-tap zoom, but allows normal vertical scrolling */
touch-action: pan-y !important;
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.35);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 100;

    /* 1. ENABLE VERTICAL SCROLLING FOR OVERLAY */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    display: flex;
    justify-content: center;

    /* CHANGE HERE: Shift from 'center' to 'flex-start' */
    align-items: flex-start;

    /* CHANGE HERE: Add generous top padding to place it beautifully,
     *      and a large bottom safety buffer for the iOS home bar */
    padding: 12vh 0 60px 0;
    box-sizing: border-box;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Active overlay state toggle */
.menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.menu-card {
    background-color: #242424;
    border: 2px solid #444444;
    border-radius: 16px;
    width: 280px;
    padding: 20px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    text-align: center;

    /* CHANGE HERE: Reset the margin cleanly since parent padding handles it now */
    margin: 0;

    transform: translateY(20px);
    transition: transform 0.2s ease;
}

.menu-overlay.active .menu-card {
    transform: translateY(0);
}

.menu-title {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.menu-button-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Action button configurations inside overlay stack */
.menu-btn {
    width: 100%;
    height: 44px;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #ffffff;
    transition: filter 0.1s, transform 0.1s;
}

.menu-btn:active { transform: scale(0.97); }
.menu-btn:hover { filter: brightness(1.1); }

.btn-prime { background-color: #35a7ff; }
.btn-danger { background-color: #ff5964; }
.btn-info { background-color: #4a6fa5; }
/* Custom Embedded Scramble block in the card framework */
.menu-scramble-wrapper {
    background-color: #1a1a1a;
    border: 2px solid #f7b05b;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.scramble-mini-label {
    color: #f7b05b;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.scramble-icons-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.scramble-target-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 22px;
    height: 22px;
    padding: 0;
    transition: transform 0.1s;
}

.scramble-target-btn:active { transform: scale(0.85); }
.scramble-target-btn svg { width: 100%; height: 100%; }

/* 1. Mobile Fluid Baseline (Perfect for both Android & iPhone screens)
 *  By tying font size to the short viewport height (svh), the emojis scale
 *  proportionally with the game container, preventing row stretching. */
/* Container-Relative Emojis (Perfectly uniform across Android, iOS Safari, and Desktop) */
/* Container-Relative Emojis */
/* Container-Relative Emojis (Perfect, stable scaling everywhere) */
.emoji-text {
    /* Hard target: Make the text boundary box consume exactly 60% of its tile */
    width: 60%;
    height: 60%;
    aspect-ratio: 1 / 1;

    /* Use a fluid viewport layout fallback that plays nice inside aspect-ratio boxes */
    font-size: 3.5rem;

    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    pointer-events: none;
    transition: font-size 0.15s ease;
}



/* Desktop Boost */
@media (min-width: 1100px) {
    .emoji-text {
        width: 70%;
        height: 70%;
        font-size: 8.5rem;
    }
}

/* Home Glow Pulsing System Rules */
.character-slot.at-home {
    /* Merges your original pulse animation with a scale and brightness transition */
    animation: homeGlowPulse 1.6s infinite ease-in-out;
    transition: transform 0.3s ease;
}

@keyframes homeGlowPulse {
    0%, 100% {
        /* Your original inner shadow */
        box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.4);
        border-radius: 8px;

        /* New: A crisp, sharp white outline effect to make the emoji pop */
        filter: drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.6));
        transform: scale(1.0);
    }
    50% {
        /* Your original intense inner shadow */
        box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.9);
        border-radius: 8px;

        /* New: The glow intensifies and the emoji breathes outward slightly */
        filter: drop-shadow(0px 0px 14px rgba(255, 255, 255, 1));
        transform: scale(1.04);
    }
}

/* When a jewel is active/lit during gameplay */
.jewel.lit {
    background-color: #00f5d4;
    box-shadow: 0 0 8px #00f5d4, inset 0 2px 2px rgba(255, 255, 255, 0.5);
}

/* When the game is won, flash all jewels neon green! */
.jewel.solved {
    background-color: #2ecc71;
    box-shadow: 0 0 12px #2ecc71, inset 0 2px 2px rgba(255, 255, 255, 0.5);
    animation: jewelWinPulse 1s infinite alternate;
}

@keyframes jewelWinPulse {
    0% { filter: brightness(1); transform: scale(1); }
    100% { filter: brightness(1.3); transform: scale(1.05); }
}

/* Mask state when the user is playing blind (solution hidden) */
.jewel.hidden-mode {
    background-color: #2b2b36 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 4px rgba(157, 78, 221, 0.2) !important;
    opacity: 1.0 !important;
}

/* Custom Isolated Overlay Container - Now Scrollable */
#custom-rules-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 200;
display: none;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 20px 0;
box-sizing: border-box;
}

/* The Content Card Box - Shifted to flex margins for safe scrolling */
.custom-rules-card {
    background-color: #242424;
    border: 2px solid #f7b05b;
    border-radius: 16px;
    width: 290px;
    padding: 20px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    text-align: center;
    font-family: system-ui, -apple-system, sans-serif;
    margin: auto;
}

.custom-rules-title {
    color: #ffffff;
    font-size: 1.2rem;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.custom-rules-body ul {
    text-align: left;
    padding-left: 18px;
    line-height: 1.5;
    font-size: 14px;
    color: #e0e0e6;
    margin-bottom: 15px;
}

.custom-rules-body li {
    margin-bottom: 10px;
}

.custom-rules-footer {
    background: rgba(0, 0, 0, 0.2);
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 13px;
}

.custom-rules-footer p {
    color: #888888;
    font-size: 11px;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.custom-rules-footer a {
    color: #35a7ff;
    text-decoration: none;
    font-weight: bold;
}

/* Dedicated Dismiss Button styling */
#btn-custom-rules-close {
width: 100%;
height: 44px;
font-size: 0.95rem;
font-weight: 600;
border: none;
border-radius: 8px;
cursor: pointer;
background-color: #35a7ff;
color: #ffffff;
transition: transform 0.1s;
}

#btn-custom-rules-close:active {
transform: scale(0.97);
}
/* --- Eye Button State Modifiers --- */

/* State 0: Open Eye -> Hide all slash lines */
.track-action-btn.state-open .eye-slash-1,
.track-action-btn.state-open .eye-slash-2 {
    display: none;
}

/* State 1: Closed Eye -> Show only the first slash line */
.track-action-btn.state-closed .eye-slash-1 {
    display: block;
    opacity: 0.6;
}
.track-action-btn.state-closed .eye-slash-2 {
    display: none;
}

/* State 2: Fully Blind Eye -> Show both lines making a distinct X overlay */
.track-action-btn.state-blind .eye-slash-1,
.track-action-btn.state-blind .eye-slash-2 {
    display: block;
    stroke: #e74c3c; /* Optional: turn lines red for a cool hardcore look */
}
/* By default, hide the hint completely */
.rotate-device-hint {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #111111; /* Match your game background */
    color: #ffffff;
    z-index: 9999; /* Stay on top of everything */
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* 📱 ONLY show the hint if the device is held vertically (Portrait) */
@media screen and (orientation: portrait) {
    .rotate-device-hint {
        display: flex;
    }
}

/* Subtle animation to make the icon look like it's tilting */
.hint-icon {
    font-size: 3rem;
    display: inline-block;
    animation: pulseRotation 2s infinite ease-in-out;
}

@keyframes pulseRotation {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-90deg); }
}