@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .app-container { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(200px, 30vh) minmax(400px, 1fr); width: 100vw; height: 100vh; height: 100dvh; transform: none !important; gap: var(--space-2); padding: var(--space-2); padding-top: calc(60px + var(--safe-area-top) + var(--space-2)); max-width: none; margin: 0; } .panel { flex: unset; width: auto; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-2); background: var(--color-bg-surface); overflow: hidden; } .video-panel { grid-row: 1; order: -1; border-left: 1px solid var(--color-border); min-height: 0; } .game-panel { grid-row: 2; border-right: 1px solid var(--color-border); min-height: 0; } .mobile-top-nav { display: flex !important; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); padding-top: calc(var(--safe-area-top) + var(--space-2)); min-height: 60px; gap: var(--space-2); } .nav-title-bar { flex: 0 0 auto; padding: 0; min-height: auto; gap: var(--space-3); } .nav-action-bar { flex: 1 1 auto; justify-content: flex-end; padding: 0; gap: var(--space-2); } .nav-segment { display: none !important; } .nav-contextual-btn { margin-top: 0; } .nav-context-pip { display: none !important; } .nav-context-chat { position: relative; opacity: 1 !important; transform: none !important; pointer-events: auto !important; } .nav-action-contextual { min-width: 100px; height: 38px; } .nav-action-btn { padding: 0 var(--space-3); min-width: 70px; height: 36px; } .video-grid { display: flex; flex-direction: row; gap: var(--space-2); flex: 1; min-height: 0; overflow: hidden; } .video-tile-remote { flex: 1.5; min-width: 0; min-height: 0; aspect-ratio: 4 / 3; max-height: 100%; } .video-tile-local { flex: 1; min-width: 0; min-height: 0; aspect-ratio: 4 / 3; max-height: 100%; } .video-tile { border-radius: var(--radius-md); position: relative; overflow: hidden; } .video-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .game-host { flex: 1; border-radius: var(--radius-md); min-height: 0; } .game-host iframe { border-radius: var(--radius-md); } .panel-header { display: none; } .desktop-only { display: none !important; } .mobile-only { display: flex !important; } .pip { display: none !important; visibility: hidden !important; pointer-events: none !important; } .edge-swipe { display: none !important; pointer-events: none !important; } .video-controls { opacity: 1; visibility: visible; transform: translateX(0); gap: var(--space-1); } .control-circle { --circle-size: 36px; } .control-icon, .control-icon-off { width: 16px; height: 16px; } .control-circle[data-tooltip]::before { display: none; } .chat-drawer { width: 100%; max-width: 400px; } .call-controls { display: none !important; } .panel-actions { display: none; } .video-label { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); } .muted-badge { font-size: 0.5rem; padding: 2px 6px; } .muted-badge svg { width: 12px; height: 12px; } .tile-state-icon { width: 40px; height: 40px; } .tile-state-text { font-size: var(--text-xs); max-width: 150px; } .overlay-icon { width: 36px; height: 36px; } .overlay-text { font-size: var(--text-xs); } } @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (max-height: 900px) { .app-container { grid-template-rows: minmax(150px, 25vh) minmax(400px, 1fr); } .video-tile { border-radius: var(--radius-sm); } .video-tile-remote, .video-tile-local { aspect-ratio: 16 / 9; } .tile-state-icon { width: 32px; height: 32px; } .tile-state-text { font-size: 0.65rem; } } @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (max-height: 700px) { .app-container { grid-template-rows: minmax(100px, 18vh) minmax(350px, 1fr); } .video-grid { gap: var(--space-1); } .video-tile-remote, .video-tile-local { aspect-ratio: 2 / 1; } .video-label { font-size: 0.625rem; padding: 2px 4px; } .tile-state-overlay .tile-state-content { gap: var(--space-1); padding: var(--space-2); } .tile-state-icon { width: 24px; height: 24px; } .tile-state-text { display: none; } .video-controls { bottom: var(--space-1); right: var(--space-1); gap: 2px; } .control-circle { --circle-size: 28px; } .control-icon, .control-icon-off { width: 14px; height: 14px; } } @media (min-width: 768px) and (max-width: 1024px) { .app-container { transition: grid-template-rows var(--duration-slow) var(--ease-out), grid-template-columns var(--duration-slow) var(--ease-out), padding var(--duration-slow) var(--ease-out), width var(--duration-slow) var(--ease-out); } .panel { transition: width var(--duration-slow) var(--ease-out), height var(--duration-slow) var(--ease-out), padding var(--duration-slow) var(--ease-out), border-radius var(--duration-slow) var(--ease-out); } .video-grid { transition: flex-direction var(--duration-slow) var(--ease-out), gap var(--duration-slow) var(--ease-out); } .video-tile { transition: flex var(--duration-slow) var(--ease-out), border-radius var(--duration-slow) var(--ease-out); } .game-host { transition: border-radius var(--duration-slow) var(--ease-out), flex var(--duration-slow) var(--ease-out); } .mobile-top-nav { transition: padding var(--duration-slow) var(--ease-out), min-height var(--duration-slow) var(--ease-out), flex-direction var(--duration-slow) var(--ease-out); } .app-container.is-interacting, .app-container.is-interacting .panel, .app-container.is-interacting .video-grid, .app-container.is-interacting .video-tile, .app-container.is-interacting .game-host { transition: none !important; } } @media (min-width: 768px) and (max-width: 1024px) and (prefers-reduced-motion: reduce) { .app-container, .panel, .video-grid, .video-tile, .game-host, .mobile-top-nav { transition: none !important; } }