/*
    KartMatch Pure-App Luxury CSS (v2.4)
    Design System: Zero-Web, Native Feedback, Smooth Transitions
*/

:root {
    --bg-main: #000000;
    --bg-content: #000000;
    --bg-card: #1c1c1e;
    --bg-glass: rgba(20, 20, 20, 0.8);
    --border-glass: rgba(255, 255, 255, 0.1);
    --text-primary: #ffffff;
    --text-secondary: #8e8e93;
    --accent-blue: #0a84ff;
    
    --grad-pro: linear-gradient(135deg, #ff3b30, #ff7f50);
    --grad-gang: linear-gradient(135deg, #ff9500, #ffcc00);
    --grad-ju: linear-gradient(135deg, #ffd60a, #fff176);
    --grad-1: linear-gradient(135deg, #34c759, #a3ffb4);
    --grad-2: linear-gradient(135deg, #007aff, #5ac8fa);
    
    --header-height: 60px;
    --nav-height: 70px;
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
}

body.light-mode {
    --bg-main: #f2f2f7;
    --bg-content: #f2f2f7;
    --bg-card: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.85);
    --border-glass: rgba(0, 0, 0, 0.05);
    --text-primary: #000000;
    --text-secondary: #8a8a8e;
}

/* =========================================
   1. Pure-App Body Reset (Web-Smell 박멸)
   ========================================= */
* {
    margin: 0; padding: 0; box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

html, body {
    width: 100%; height: 100%;
    overflow: hidden; /* Fix body height */
    position: fixed; /* Prevent scroll bouncing at body level */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none; /* No browser refresh pull */
}

/* =========================================
   2. Layout: Symmetrical & Immersive
   ========================================= */
#app {
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.header {
    flex: 0 0 auto;
    height: calc(var(--header-height) + var(--safe-top));
    padding-top: var(--safe-top);
    background: var(--bg-glass);
    backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    border-bottom: 0.5px solid var(--border-glass);
    z-index: 1000;
}

.header-content {
    height: var(--header-height);
    padding: 0 20px; display: flex; justify-content: space-between; align-items: center;
}

.logo { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; }

/* Main Scroll Area: Native Inertial Feel */
.main {
    flex: 1; overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Momentum scroll */
    padding: 16px 16px calc(var(--nav-height) + var(--safe-bottom) + 20px) 16px;
}

/* =========================================
   3. Native-Style Interaction
   ========================================= */
.match-card {
    background: var(--bg-card); border-radius: 24px;
    padding: 16px; margin-bottom: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    border: 1px solid var(--border-glass);
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column; gap: 8px;
}

/* Haptic scale on press */
.match-card:active { transform: scale(0.96); opacity: 0.9; }

.match-card-team { font-size: 1rem; font-weight: 800; }
.match-card-tiers { display: flex; gap: 4px; }

.tier-badge {
    width: 22px; height: 22px; border-radius: 6px;
    font-size: 0.8rem; font-weight: 900; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Page Transition Animation */
.page-enter {
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   4. Permanent Bottom Tab Bar
   ========================================= */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: calc(var(--nav-height) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--bg-glass);
    backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    border-top: 0.5px solid var(--border-glass);
    display: flex; justify-content: space-around; align-items: center;
    z-index: 1000;
}

.nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    color: var(--text-secondary); transition: color 0.2s;
}
.nav-item.active { color: var(--accent-blue); }
.nav-icon { font-size: 1.6rem; }
.nav-label { font-size: 0.65rem; font-weight: 700; margin-top: 2px; }

/* Filter Bar: Horizontal App Style */
.filter-bar { padding: 4px 0 16px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex; gap: 10px; }
.filter-chip {
    flex: 0 0 auto; padding: 8px 16px; border-radius: 100px;
    background: var(--bg-card); border: 1px solid var(--border-glass);
    font-size: 0.85rem; font-weight: 700; color: var(--text-secondary);
}
.filter-chip.active { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }

/* Custom Toast: App Message Style */
.toast {
    position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.85); color: #fff; padding: 12px 24px;
    border-radius: 100px; font-weight: 600; font-size: 0.9rem; z-index: 3000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}