/* ===== Family Game - Base Styles ===== */

/* Universal box-sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Font family */
body,
.fg-join-wrap,
.fg-waiting-wrap,
.bowling-master-wrap,
.bowling-player-wrap,
.yut-master-wrap,
.yut-player-wrap {
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* iOS viewport height fix */
.fg-waiting-wrap,
.bowling-master-wrap,
.bowling-player-wrap,
.yut-master-wrap,
.yut-player-wrap {
    height: 100vh; /* Fallback for older browsers */
    height: calc(var(--vh, 1vh) * 100); /* iOS 주소창 대응 */
}

/* Safe area inset for iOS */
.fg-join-wrap {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}

.bottom-info {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* Common background gradients */
.fg-join-wrap {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.fg-waiting-wrap {
    background: radial-gradient(ellipse at center, #4a3728 0%, #2d1f16 100%);
    background-image:
        radial-gradient(ellipse at center, rgba(74, 55, 40, 0.9) 0%, rgba(45, 31, 22, 1) 100%),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,.03) 2px, rgba(0,0,0,.03) 4px),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.03) 2px, rgba(0,0,0,.03) 4px);
}

.bowling-master-wrap,
.bowling-player-wrap {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.yut-master-wrap,
.yut-player-wrap {
    background: linear-gradient(180deg, #2d1810 0%, #4a2c17 50%, #3d2212 100%);
}

/* Fixed positioning for full-screen games */
.bowling-master-wrap,
.bowling-player-wrap,
.yut-master-wrap,
.yut-player-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}