/* public/modules/data-stream/style.css */

:root {
    --glass-bg: rgba(13, 17, 23, 0.9);
        --glass-border: rgba(255, 255, 255, 0.1);
            --neon-cyan: #00f3ff;
                --neon-pink: #ff00c8;
                    --neon-blue: #0088ff;
                        --neon-green: #00ff88;
                            --neon-red: #ff3b3b;
                                --neon-yellow: #ffdd00;
                                    --bg-dark: #050510;
                                    }

                                    body {
                                        background-color: var(--bg-dark);
                                            font-family: 'Rajdhani', sans-serif;
                                                overflow: hidden;
                                                    height: 100vh;
                                                        display: flex; flex-direction: column;
                                                            margin: 0;
                                                                /* Impede o browser do telemóvel de fazer zoom ou scroll ao arrastar a peça */
                                                                    touch-action: none; 
                                                                    }

                                                                    /* --- FUNDO E CABEÇALHO (HEADER) --- */
                                                                    .bg-grid {
                                                                        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
                                                                            background-image: 
                                                                                    linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
                                                                                            linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
                                                                                                background-size: 40px 40px;
                                                                                                    z-index: -1; pointer-events: none;
                                                                                                    }

                                                                                                    .app-header {
                                                                                                        height: 60px; padding: 0 20px;
                                                                                                            display: flex; align-items: center; justify-content: space-between;
                                                                                                                background: rgba(5, 5, 16, 0.8);
                                                                                                                    backdrop-filter: blur(10px);
                                                                                                                        border-bottom: 1px solid var(--glass-border);
                                                                                                                            z-index: 100;
                                                                                                                            }

                                                                                                                            .btn-config-header {
                                                                                                                                color: white; text-decoration: none; width: 40px; height: 40px;
                                                                                                                                    display: flex; align-items: center; justify-content: center;
                                                                                                                                        border-radius: 50%; transition: 0.2s; background: rgba(255,255,255,0.05);
                                                                                                                                        }
                                                                                                                                        .btn-config-header:hover { background: rgba(255,255,255,0.1); color: var(--neon-cyan); }
                                                                                                                                        .app-logo { font-weight: 700; font-size: 1.4rem; color: white; letter-spacing: 1px; }


                                                                                                                                        /* --- ESTRUTURA DAS TELAS --- */
                                                                                                                                        .hub-container {
                                                                                                                                            flex: 1; display: flex; flex-direction: column;
                                                                                                                                                position: relative; overflow: hidden;
                                                                                                                                                }

                                                                                                                                                .screen { display: none; width: 100%; height: 100%; position: relative; }
                                                                                                                                                .screen.active { display: flex; flex-direction: column; }


                                                                                                                                                /* --- ÁREA DE JOGO --- */
                                                                                                                                                .game-layout {
                                                                                                                                                    display: flex; height: 100%; width: 100%;
                                                                                                                                                        position: relative; overflow: hidden;
                                                                                                                                                        }

                                                                                                                                                        /* Painel superior (Tempo e Pontos) dentro da arena */
                                                                                                                                                        .hud-bar {
                                                                                                                                                            position: absolute; top: 10px; left: 0; width: 100%;
                                                                                                                                                                display: flex; justify-content: center; gap: 20px;
                                                                                                                                                                    z-index: 20; pointer-events: none; 
                                                                                                                                                                    }
                                                                                                                                                                    .hud-bar > * { pointer-events: auto; }

                                                                                                                                                                    .score-badge {
                                                                                                                                                                        background: rgba(0, 0, 0, 0.5);
                                                                                                                                                                            border: 1px solid rgba(255, 255, 255, 0.2);
                                                                                                                                                                                padding: 5px 15px; border-radius: 20px;
                                                                                                                                                                                    font-weight: bold; font-size: 1.2rem;
                                                                                                                                                                                        backdrop-filter: blur(5px);
                                                                                                                                                                                        }

                                                                                                                                                                                        .icon-btn {
                                                                                                                                                                                            background: rgba(0,0,0,0.5); border: 1px solid #ff5555;
                                                                                                                                                                                                border-radius: 50%; width: 35px; height: 35px;
                                                                                                                                                                                                    display: flex; align-items: center; justify-content: center;
                                                                                                                                                                                                        cursor: pointer; font-size: 1.2rem; transition: 0.2s;
                                                                                                                                                                                                        }
                                                                                                                                                                                                        .icon-btn:hover { background: #ff5555; color: white; }

                                                                                                                                                                                                        /* Zonas Laterais de Classificação */
                                                                                                                                                                                                        .drop-zone {
                                                                                                                                                                                                            flex: 1; display: flex; flex-direction: column; 
                                                                                                                                                                                                                align-items: center; justify-content: center;
                                                                                                                                                                                                                    border-right: 1px solid var(--glass-border);
                                                                                                                                                                                                                        position: relative; transition: background-color 0.3s, box-shadow 0.3s;
                                                                                                                                                                                                                        }
                                                                                                                                                                                                                        .drop-zone.right { border-right: none; border-left: 1px solid var(--glass-border); }

                                                                                                                                                                                                                        .drop-zone h2 {
                                                                                                                                                                                                                            font-size: 2.5rem; z-index: 2; margin-bottom: 20px;
                                                                                                                                                                                                                                text-shadow: 0 0 15px rgba(0,0,0,0.8); pointer-events: none;
                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                .zone-bg {
                                                                                                                                                                                                                                    position: absolute; top:0; left:0; width:100%; height:100%;
                                                                                                                                                                                                                                        opacity: 0.1; transition: 0.3s; z-index: 1;
                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                        /* Cores específicas das Zonas */
                                                                                                                                                                                                                                        .drop-zone.left { color: var(--neon-pink); }
                                                                                                                                                                                                                                        .drop-zone.left .zone-bg { background: var(--neon-pink); }
                                                                                                                                                                                                                                        .drop-zone.left.highlight { background: rgba(255, 0, 200, 0.2); box-shadow: inset -10px 0 30px rgba(255,0,200,0.3); }

                                                                                                                                                                                                                                        .drop-zone.right { color: var(--neon-cyan); }
                                                                                                                                                                                                                                        .drop-zone.right .zone-bg { background: var(--neon-cyan); }
                                                                                                                                                                                                                                        .drop-zone.right.highlight { background: rgba(0, 243, 255, 0.2); box-shadow: inset 10px 0 30px rgba(0,243,255,0.3); }


                                                                                                                                                                                                                                        /* Esteira Central (onde a peça aparece) */
                                                                                                                                                                                                                                        .conveyor-belt {
                                                                                                                                                                                                                                            width: 250px; display: flex; flex-direction: column;
                                                                                                                                                                                                                                                align-items: center; justify-content: center;
                                                                                                                                                                                                                                                    background: rgba(0,0,0,0.5);
                                                                                                                                                                                                                                                        border-left: 1px solid rgba(255,255,255,0.05);
                                                                                                                                                                                                                                                            border-right: 1px solid rgba(255,255,255,0.05);
                                                                                                                                                                                                                                                                position: relative; z-index: 10;
                                                                                                                                                                                                                                                                    box-shadow: 0 0 30px rgba(0,0,0,0.8);
                                                                                                                                                                                                                                                                    }

                                                                                                                                                                                                                                                                    .item-container {
                                                                                                                                                                                                                                                                        width: 160px; height: 160px;
                                                                                                                                                                                                                                                                            display: flex; align-items: center; justify-content: center;
                                                                                                                                                                                                                                                                                position: relative; perspective: 1000px;
                                                                                                                                                                                                                                                                                }

                                                                                                                                                                                                                                                                                /* O Cubo/Bloco com a palavra */
                                                                                                                                                                                                                                                                                .data-item {
                                                                                                                                                                                                                                                                                    width: 140px; height: 140px;
                                                                                                                                                                                                                                                                                        background: #fff; color: #000;
                                                                                                                                                                                                                                                                                            border-radius: 15px;
                                                                                                                                                                                                                                                                                                display: flex; align-items: center; justify-content: center;
                                                                                                                                                                                                                                                                                                    font-size: 1.5rem; font-weight: bold;
                                                                                                                                                                                                                                                                                                        box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 0 10px rgba(0,0,0,0.2);
                                                                                                                                                                                                                                                                                                            cursor: grab; user-select: none;
                                                                                                                                                                                                                                                                                                                transition: transform 0.1s;
                                                                                                                                                                                                                                                                                                                    text-align: center; padding: 10px;
                                                                                                                                                                                                                                                                                                                        word-break: break-word;
                                                                                                                                                                                                                                                                                                                            border: 4px solid #ddd;
                                                                                                                                                                                                                                                                                                                                touch-action: none; /* Regra vital para os gestos de arrastar funcionarem no mobile */
                                                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                                                .data-item:active { cursor: grabbing; transform: scale(0.95); border-color: var(--neon-cyan); }

                                                                                                                                                                                                                                                                                                                                /* Dicas de botões */
                                                                                                                                                                                                                                                                                                                                .controls-hint {
                                                                                                                                                                                                                                                                                                                                    margin-top: 50px; display: flex; gap: 20px;
                                                                                                                                                                                                                                                                                                                                        font-size: 1.2rem; color: #aaa; opacity: 0.7;
                                                                                                                                                                                                                                                                                                                                            font-weight: bold;
                                                                                                                                                                                                                                                                                                                                            }


                                                                                                                                                                                                                                                                                                                                            /* --- MODAL DE GAME OVER --- */
                                                                                                                                                                                                                                                                                                                                            .modal-overlay {
                                                                                                                                                                                                                                                                                                                                                position: fixed; top: 0; left: 0; width: 100%; height: 100%;
                                                                                                                                                                                                                                                                                                                                                    background: rgba(0,0,0,0.9); z-index: 200;
                                                                                                                                                                                                                                                                                                                                                        display: none; align-items: center; justify-content: center;
                                                                                                                                                                                                                                                                                                                                                            backdrop-filter: blur(5px);
                                                                                                                                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                                                                                                                                            .modal-card {
                                                                                                                                                                                                                                                                                                                                                                background: #0d0d12; border: 1px solid var(--neon-cyan);
                                                                                                                                                                                                                                                                                                                                                                    padding: 40px; border-radius: 20px; text-align: center;
                                                                                                                                                                                                                                                                                                                                                                        width: 90%; max-width: 400px; position: relative;
                                                                                                                                                                                                                                                                                                                                                                            box-shadow: 0 0 50px rgba(0, 243, 255, 0.2);
                                                                                                                                                                                                                                                                                                                                                                            }
                                                                                                                                                                                                                                                                                                                                                                            .result-box {
                                                                                                                                                                                                                                                                                                                                                                                background: rgba(255,255,255,0.05); padding: 15px; border-radius: 10px;
                                                                                                                                                                                                                                                                                                                                                                                    margin: 20px 0; border: 1px solid rgba(255,255,255,0.1);
                                                                                                                                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                                                                                                                                    .btn-neon {
                                                                                                                                                                                                                                                                                                                                                                                        background: transparent; color: var(--neon-cyan);
                                                                                                                                                                                                                                                                                                                                                                                            border: 2px solid var(--neon-cyan); padding: 12px 20px;
                                                                                                                                                                                                                                                                                                                                                                                                border-radius: 8px; font-weight: bold; font-family: 'Rajdhani';
                                                                                                                                                                                                                                                                                                                                                                                                    font-size: 1.2rem; cursor: pointer; transition: 0.3s; width: 100%;
                                                                                                                                                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                                                                                                                                                    .btn-neon:hover {
                                                                                                                                                                                                                                                                                                                                                                                                        background: var(--neon-cyan); color: black;
                                                                                                                                                                                                                                                                                                                                                                                                            box-shadow: 0 0 20px var(--neon-cyan);
                                                                                                                                                                                                                                                                                                                                                                                                            }


                                                                                                                                                                                                                                                                                                                                                                                                            /* =======================================================
                                                                                                                                                                                                                                                                                                                                                                                                               RESPONSIVIDADE PARA DISPOSITIVOS MÓVEIS (MOBILE)
                                                                                                                                                                                                                                                                                                                                                                                                                  ======================================================= */
                                                                                                                                                                                                                                                                                                                                                                                                                  @media (max-width: 768px) {
                                                                                                                                                                                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                                                                                                                                                                                          /* 1. Ajusta o HUD para ecrãs pequenos */
                                                                                                                                                                                                                                                                                                                                                                                                                              .hud-bar { top: 5px; gap: 10px; }
                                                                                                                                                                                                                                                                                                                                                                                                                                  .score-badge { padding: 5px 10px; font-size: 1rem; }
                                                                                                                                                                                                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                                                                                                                                                                                                          /* 2. Reduz a largura da esteira para libertar espaço às zonas laterais (o "drop") */
                                                                                                                                                                                                                                                                                                                                                                                                                                              .conveyor-belt {
                                                                                                                                                                                                                                                                                                                                                                                                                                                      width: 130px; 
                                                                                                                                                                                                                                                                                                                                                                                                                                                          }

                                                                                                                                                                                                                                                                                                                                                                                                                                                              /* 3. Reduz o tamanho do bloco arrastável */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                  .item-container {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                          width: 100px; height: 100px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  .data-item {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          width: 90px; height: 90px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  font-size: 1.1rem;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          padding: 5px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  border-width: 3px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          /* 4. Gira os títulos das zonas de "ESQUERDA / DIREITA" para a vertical 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 Isto evita que os textos longos "esmaguem" ou partam a área de jogo */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     .drop-zone h2 {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             font-size: 1.5rem;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     writing-mode: vertical-rl; /* Texto lido de cima para baixo */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             text-orientation: upright; /* Letras colocadas direitas (em pé) */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     letter-spacing: -2px; /* Encurta a distância entre as letras */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             margin: 0;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     text-align: center;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         }

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             /* 5. Alinha as dicas (setas) em coluna e não em linha */
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 .controls-hint {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         flex-direction: column;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 gap: 15px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         font-size: 0.9rem;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 text-align: center;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         margin-top: 30px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             }