/* ============================================================ GLOSSOWS XP — OTIMIZAÇÕES MOBILE (MODO PAISAGEM) Coloque após style.css no ============================================================ */ /* ── 1. AVISO DE PORTRAIT ───────────────────────────────────────────────── */ #rotate-warning { display: none; position: fixed; inset: 0; z-index: 999999; background: linear-gradient(to bottom, #0a2f6b 0%, #1a7de0 50%, #072b5f 100%); flex-direction: column; align-items: center; justify-content: center; gap: 20px; color: #fff; text-align: center; font-family: 'Segoe UI', Tahoma, sans-serif; } #rotate-warning .rotate-icon { font-size: 56px; animation: rotate-pulse 1.5s ease-in-out infinite; } #rotate-warning p { font-size: 15px; font-weight: 300; opacity: 0.9; max-width: 220px; line-height: 1.6; } @keyframes rotate-pulse { 0%,100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(90deg) scale(1.1); } } @media screen and (max-width: 900px) and (orientation: portrait) { #rotate-warning { display: flex !important; } #loadingScreen, #lockscreen, #desktop, #windows-area, #taskbar, #start-menu, #shutdown-screen, #achievement-popup-container { display: none !important; } } /* ══════════════════════════════════════════════════════════════════════════ LANDSCAPE MOBILE — escala densa igual ao desktop em tela pequena Aplica em qualquer tela com altura ≤ 480px e orientação landscape (cobre ~99% dos celulares em landscape: 667×375, 740×360, 812×375 etc.) ══════════════════════════════════════════════════════════════════════════ */ @media screen and (max-height: 480px) and (orientation: landscape) { /* ── 2. VARIÁVEIS ─────────────────────────────────────────────────── */ :root { --taskbar-height: 30px; --title-bar-height: 22px; } body { overflow: hidden; touch-action: none; } /* ── 3. TASKBAR ───────────────────────────────────────────────────── */ #taskbar { height: 30px !important; padding: 0 6px 0 0 !important; font-size: 10px !important; } #start-btn { padding: 3px 10px 3px 8px !important; font-size: 10px !important; font-weight: bold !important; border-radius: 0 11px 11px 0 !important; gap: 4px !important; } #start-btn img { width: 13px !important; height: 13px !important; } #task-time { font-size: 10px !important; line-height: 1.2 !important; } #task-date { font-size: 8px !important; } .taskbar-app { min-width: 28px !important; height: 22px !important; padding: 0 6px !important; font-size: 10px !important; border-radius: 3px !important; } #taskbar-apps { gap: 2px !important; } /* ── 4. DESKTOP ───────────────────────────────────────────────────── */ #desktop { height: calc(100vh - 30px) !important; padding: 3px 4px !important; gap: 1px !important; } /* Ícone — proporcional ao que é no desktop, só menor */ .icon { width: 46px !important; margin: 3px !important; } .icon-img { width: 32px !important; height: 32px !important; font-size: 15px !important; border-radius: 8px !important; margin-bottom: 3px !important; } .icon span { font-size: 8px !important; line-height: 1.2 !important; } /* Title bar — área de toque */ .title-bar { height: 22px !important; min-height: 22px !important; padding: 0 5px !important; font-size: 10px !important; font-weight: bold !important; border-radius: 6px 6px 0 0 !important; touch-action: none; cursor: grab; } .title-bar:active { cursor: grabbing; } .title-bar span { gap: 4px !important; font-size: 10px !important; } .title-bar i { font-size: 9px !important; } /* Botões min/max/close */ .window-controls { gap: 3px !important; } .win-btn { width: 14px !important; height: 14px !important; min-width: 14px !important; font-size: 7px !important; } /* Conteúdo da janela */ .window-content { border-width: 1px !important; } /* ── 6. MENU INICIAR ─────────────────────────────────────────────── */ #start-menu { bottom: 30px !important; width: 190px !important; border-radius: 6px 6px 0 0 !important; font-size: 11px !important; max-height: calc(100vh - 30px) !important; overflow-y: auto !important; } #start-menu > div:first-child { padding: 5px 8px !important; font-size: 11px !important; } #start-menu > div:first-child img { width: 13px !important; height: 13px !important; } .start-item { padding: 6px 10px !important; font-size: 11px !important; gap: 7px !important; } .start-item i { font-size: 11px !important; } /* Wallpaper submenu */ .wallpaper-submenu { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 8px; } .wallpaper-item { padding: 3px !important; flex-direction: column; align-items: center; } .wallpaper-thumb { width: 28px !important; height: 20px !important; border-radius: 3px !important; } .wallpaper-item span { font-size: 8px !important; } /* ── 7. LOCK SCREEN ──────────────────────────────────────────────── */ #lockscreen .lock-glass { padding: 10px 18px !important; gap: 2px !important; border-radius: 16px !important; } .lock-time { font-size: 42px !important; line-height: 1 !important; } .lock-date { font-size: 10px !important; } .slide-hint { font-size: 9px !important; margin-top: 6px !important; } .slide-hint i { font-size: 10px !important; } /* ── 8. APPS INTERNOS ────────────────────────────────────────────── */ /* Calculadora */ .calc-wrap { padding: 4px !important; gap: 3px !important; } .calc-display, #calc-result { font-size: 18px !important; padding: 3px 6px !important; } .calc-expr { font-size: 9px !important; } .calc-mode-btn { font-size: 9px !important; padding: 3px 0 !important; } .calc-btn, .calc-btn-sci { padding: 5px 0 !important; font-size: 10px !important; border-radius: 4px !important; } .calc-sci-grid { gap: 3px !important; padding: 4px !important; } /* Bloco de Notas */ .np-menubar { font-size: 10px !important; height: 20px !important; } .np-dd-item { font-size: 10px !important; padding: 4px 8px !important; } .np-find-bar { padding: 3px 5px !important; gap: 4px !important; } .np-textarea { font-size: 11px !important; padding: 4px 6px !important; } .np-statusbar { height: 16px !important; font-size: 9px !important; } /* CMD */ .cmd-body { font-size: 10px !important; padding: 3px 5px !important; } .cmd-input { font-size: 10px !important; } /* File Manager */ .fm-sidebar { width: 90px !important; font-size: 10px !important; } .fm-item { font-size: 10px !important; padding: 3px 5px !important; gap: 4px !important; } .fm-item i { font-size: 10px !important; } .fm-toolbar { font-size: 10px !important; padding: 3px 5px !important; gap: 4px !important; } /* Hub */ .hub-nav-btn { font-size: 10px !important; padding: 4px 8px !important; } .hub-title { font-size: 13px !important; } .achievement-card { padding: 5px 7px !important; font-size: 9px !important; } /* Configurações */ .settings-section-title { font-size: 10px !important; } .settings-item { font-size: 10px !important; padding: 4px 8px !important; } /* Music Player */ .music-player { padding: 6px !important; } .music-controls button { width: 28px !important; height: 28px !important; font-size: 12px !important; } .music-title { font-size: 10px !important; } .music-progress { height: 4px !important; } /* Doogly */ #doogly-logo { font-size: 22px !important; } #doogly-search { font-size: 11px !important; padding: 4px 8px !important; } .doogly-btn { font-size: 10px !important; padding: 4px 10px !important; } /* GlossPlay */ .glossplay-wrap { font-size: 10px !important; } .glossplay-item { padding: 4px 6px !important; font-size: 10px !important; } /* ── 9. JOGOS ─────────────────────────────────────────────────────── */ canvas { max-width: 100% !important; max-height: calc(100vh - 30px - 22px - 4px) !important; touch-action: none; display: block; margin: 0 auto; } /* Jogo da Velha */ .ttt-cell { font-size: 22px !important; } .ttt-board { gap: 4px !important; } .ttt-status { font-size: 10px !important; } /* Campo Minado */ .mine-cell { width: 18px !important; height: 18px !important; font-size: 9px !important; border-radius: 2px !important; } .mine-header { font-size: 9px !important; padding: 2px 4px !important; } /* Tetris */ .tetris-wrap { gap: 4px !important; } .tetris-info { font-size: 9px !important; gap: 4px !important; } /* Cobrinha */ .snake-score { font-size: 10px !important; } /* ── 10. POPUPS / MODAIS ─────────────────────────────────────────── */ #achievement-popup-container { bottom: calc(30px + 4px) !important; right: 5px !important; } .achievement-popup { font-size: 10px !important; padding: 6px 10px !important; min-width: 160px !important; max-width: 210px !important; border-radius: 8px !important; gap: 6px !important; } .achievement-popup .ach-icon { font-size: 18px !important; } /* Modal de confirmação */ #reset-modal-box { width: 240px !important; padding: 18px 16px 14px !important; border-radius: 12px !important; } #reset-modal-box h3 { font-size: 13px !important; } #reset-modal-box p { font-size: 10px !important; } .modal-btn { height: 32px !important; font-size: 11px !important; border-radius: 7px !important; } .window { min-width: 0 !important; min-height: 0 !important; max-width: calc(100vw - 6px) !important; max-height: calc(100vh - 30px - 2px) !important; zoom: 0.55; } /* Tamanhos por app — definidos ANTES do zoom, o zoom encolhe tudo junto */ .window:has(.calc-wrap) { width: 280px !important; height: 340px !important; } .window:has(.np-wrap) { width: 680px !important; height: 520px !important; } .window:has(.fm-wrap) { width: 500px !important; height: 380px !important; } .window:has(.music-player) { width: 340px !important; height: 300px !important; } .window:has(.cmd-body) { width: 460px !important; height: 320px !important; } .window:has(#doogly-search) { width: 420px !important; height: 300px !important; } .window:has(.hub-nav-btn) { width: 500px !important; height: 400px !important; } .window:has(.settings-item) { width: 420px !important; height: 360px !important; } .window:has(.glossplay-wrap) { width: 460px !important; height: 340px !important; } .window:has(.ttt-board) { width: 300px !important; height: 340px !important; } .window:has(canvas) { width: 420px !important; height: 380px !important; } } /* ── 11. TOUCH — feedback e scroll em qualquer tamanho ──────────────────── */ @media (hover: none) and (pointer: coarse) { .window-content, .np-body, .fm-content, .cmd-body, .hub-content, .settings-content, #start-menu { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .win-btn, .start-item, .icon, .taskbar-app, .calc-btn, .dorf-btn, .wallpaper-item, .hub-nav-btn { -webkit-tap-highlight-color: rgba(255,255,255,0.15); } /* Impede zoom automático em inputs no iOS */ input, textarea, select { font-size: max(11px, 16px) !important; touch-action: auto; } .title-bar { touch-action: none; } } /* ── 12. SAFE AREA — iPhone notch em landscape ──────────────────────────── */ @supports (padding: max(0px)) { @media screen and (orientation: landscape) { #taskbar { padding-left: max(6px, env(safe-area-inset-left)) !important; padding-right: max(6px, env(safe-area-inset-right)) !important; } #desktop { padding-left: max(3px, env(safe-area-inset-left)) !important; padding-right: max(3px, env(safe-area-inset-right)) !important; } #start-menu { left: max(0px, env(safe-area-inset-left)) !important; } } }