@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
    --gm-bg: #f8f9fa;
    --gm-surface: #ffffff;
    --gm-text: #202124;
    --gm-text-secondary: #5f6368;
    --gm-border: #dadce0;
    --gm-green: #2d8cff;
    --gm-green-hover: #1a73e8;
    --gm-red: #d93025;
    --gm-red-hover: #b31412;
    --gm-blue: #2d8cff;
    --gm-blue-hover: #1a73e8;
    --gm-gray-btn: #3c4043;
    --gm-gray-btn-bg: rgba(60,64,67,0.08);
    --gm-gray-btn-bg-hover: rgba(60,64,67,0.12);
}

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

body {
    font-family: 'Roboto', Arial, sans-serif;
    background: var(--gm-bg);
    color: var(--gm-text);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
    .preview-tile { border-radius: 12px; }
    .preview-avatar { width: 88px; height: 88px; font-size: 36px; }
    .controls-bar { gap: 8px; padding: 12px 16px 20px; }
    .join-btn { padding: 0 20px; margin-left: 8px; }
    header { padding: 12px 16px; }
}