/* Dead Zone Test Grid Styles */
/* ------------------------------------------------------------------------- */
/* 1. Container & Layout                                                     */
/* ------------------------------------------------------------------------- */
.test-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 30px 20px;
    background: linear-gradient(to bottom, #f8f9fa, #ffffff);
}

.max-w-600 {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.max-w-800 {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.text-center {
    text-align: center;
}

/* ------------------------------------------------------------------------- */
/* 2. Hero Typography                                                        */
/* ------------------------------------------------------------------------- */
.hero h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: -webkit-linear-gradient(45deg, #007bff, #00d4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
}

.hero .tagline {
    font-size: 1.25rem;
    color: #495057;
    margin-bottom: 1rem;
    font-weight: 600;
}

.hero .subtitle {
    color: #6c757d;
    font-size: 1rem;
    line-height: 1.6;
}

/* ------------------------------------------------------------------------- */
/* 3. Controls Toolbar                                                       */
/* ------------------------------------------------------------------------- */
.controls-toolbar {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    background: #ffffff;
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.btn-pill {
    border-radius: 50px;
    padding: 10px 24px;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: #007bff;
    color: white;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}

.btn-primary:hover {
    background: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.4);
}

.btn-secondary {
    background: #f1f3f5;
    color: #495057;
}

.btn-secondary:hover {
    background: #e9ecef;
    color: #212529;
}

/* ------------------------------------------------------------------------- */
/* 4. The Grid                                                               */
/* ------------------------------------------------------------------------- */
.grid-container {
    display: grid;
    width: 70%;
    /* Desktop optimal width */
    min-width: 320px;
    height: 55vh;
    border: 1px solid #e9ecef;
    background-color: #ffffff;
    margin-bottom: 25px;
    touch-action: none;
    cursor: crosshair;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    /* Deep premium shadow */
    border-radius: 16px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .grid-container {
        width: 95%;
        height: 60vh;
        border-radius: 12px;
    }
}

.grid-cell {
    background-color: transparent;
    border: 1px solid #f8f9fa;
    /* Extremely subtle */
    box-sizing: border-box;
}

/* Active State - "Filling" look */
.grid-cell.active {
    background-color: #10b981;
    /* Success Green */
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
    /* Glow effect */
    z-index: 1;
    /* Bring above borders */
}

/* ------------------------------------------------------------------------- */
/* 5. Info Badge & Sections                                                  */
/* ------------------------------------------------------------------------- */
.touch-info-badge {
    background: #e7f5ff;
    color: #0056b3;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(0, 123, 255, 0.1);
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;
    padding: 20px;
}

@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
}

.info-card {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    border: 1px solid #f1f3f5;
}

.info-card h3 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    color: #212529;
}

.info-card ul {
    list-style: none;
    padding: 0;
}

.info-card ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 15px;
    line-height: 1.6;
    color: #555;
}

.info-card ul li:before {
    content: "•";
    color: #007bff;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.info-card.highlight {
    background: #f8f9fa;
    border-color: #e9ecef;
}

.tip-item {
    margin-bottom: 20px;
}

.tip-item strong {
    display: block;
    color: #343a40;
    margin-bottom: 4px;
}

.tip-item p {
    font-size: 0.95rem;
    color: #6c757d;
    margin: 0;
}

/* ------------------------------------------------------------------------- */
/* 6. Fullscreen Overrides                                                   */
/* ------------------------------------------------------------------------- */
body.fullscreen {
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    zoom: 1 !important;
    transform: none !important;
}

body.fullscreen .grid-container {
    height: 100vh !important;
    height: 100dvh !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999;
    max-width: none !important;
}

body.fullscreen .site-header,
body.fullscreen .hero,
body.fullscreen .content-section,
body.fullscreen .touch-info-badge,
/* body.fullscreen .controls-toolbar, REMOVED - we need this container */
body.fullscreen footer,
body.fullscreen main>*:not(.test-container) {
    display: none !important;
}

/* Fullscreen Toolbar Container - Must be visible but invisible */
body.fullscreen .controls-toolbar {
    display: block !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    position: static !important;
    pointer-events: none;
    /* Let clicks pass through */
    margin: 0 !important;
    padding: 0 !important;
}

/* Make sure children that are NOT the exit button are hidden */
body.fullscreen .controls-toolbar>*:not(#fullscreenBtn) {
    display: none !important;
}

/* Fullscreen Controls - Floating X */
body.fullscreen .controls {
    /* Use legacy controls container if JS appends it, or just target the button if moving to new structure */
    /* Our new structure doesn't use .controls class for the toolbar. 
       We need to ensure the JS can find the button. 
       The JS targets #fullscreenBtn. We need to make sure if the entire toolbar is hidden, how do we show the exit button? 
       Wait! JS code appends controls? No, JS code listens to #fullscreenBtn. 
       The current `dead-zone.php` has #fullscreenBtn inside `.controls-toolbar`.
       In fullscreen, `.controls-toolbar` is hidden. 
       So the button disappears! 
       
       Solution: Clone the button or move it? 
       Actually, the legacy `dead-zone.js` uses `.controls` class for drag logic. 
       My new PHP uses `.controls-toolbar`. 
       I need to update `dead-zone.js` to target `.controls-toolbar` OR update the CSS to handle this.
       
       Better: Let's create a *specific* floating container for fullscreen that contains just the exit button, or style the button itself to break out.
       
       Actually, the simplest way is to NOT hide the toolbar but style it differently in fullscreen.
       OR, make the #fullscreenBtn `position: fixed` in fullscreen and break it out of the container.
    */
    display: none;
    /* Just in case */
}

/* Force the fullscreen button to fly out and become the floating X */
body.fullscreen #fullscreenBtn {
    position: fixed !important;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    z-index: 10001;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    pointer-events: auto !important;
    /* Re-enable clicks */
}

/* Hide the text span inside the button in fullscreen */
body.fullscreen #fullscreenBtn #fullscreenText {
    display: none;
}

body.fullscreen #icon-exit-fullscreen {
    width: 28px;
    height: 28px;
    display: block !important;
}

body.fullscreen #icon-fullscreen {
    display: none !important;
}