:root {
    --primary: #00f3ff;
    --secondary: #ff0055;
    --glass: rgba(10, 16, 25, 0.85);
    --bg-dark: #020406;
}

body {
    background-color: var(--bg-dark);
    font-family: 'Rajdhani', sans-serif;
    color: #e0e0e0;
}

/* 網格背景 (無圖片) */
.grid-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -1;
}

/* 頂部導航 */
.sys-nav {
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.2);
    background: rgba(0,0,0,0.5);
}
.sys-id { font-family: 'Orbitron'; color: var(--primary); }
.logout-btn { color: var(--secondary); text-decoration: none; font-weight: bold; }

.league-title {
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    margin: 40px 0;
    text-shadow: 0 0 15px var(--primary);
}

/* 賽博面板 */
.cyber-panel {
    background: var(--glass);
    border: 1px solid var(--primary);
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
}

.panel-header {
    background: rgba(0, 243, 255, 0.1);
    padding: 10px 20px;
    font-family: 'Orbitron';
    color: var(--primary);
    border-bottom: 1px solid var(--primary);
}

.panel-body { padding: 20px; }

/* 輸入框 */
.cyber-input, .cyber-select {
    background: rgba(0,0,0,0.5);
    border: 1px solid #444;
    color: #fff;
    padding: 8px;
    font-family: 'Rajdhani';
}
.cyber-input:focus { border-color: var(--primary); outline: none; }

/* 按鈕 */
.btn-neon {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 8px 20px;
    font-family: 'Orbitron';
    transition: 0.3s;
}
.btn-neon:hover {
    background: var(--primary);
    color: #000;
    box-shadow: 0 0 15px var(--primary);
}
.btn-danger { border-color: var(--secondary); color: var(--secondary); }
.btn-danger:hover { background: var(--secondary); color: #fff; box-shadow: 0 0 15px var(--secondary); }

/* 列表 */
.cyber-list { list-style: none; padding: 0; }
.cyber-list-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* 輔助類 */
.full-width { width: 100%; }
.width-30 { width: 30%; }
.width-20 { width: 20%; }
.vs-tag { color: var(--secondary); font-weight: bold; font-family: 'Orbitron'; }
.space-between { justify-content: space-between; }

/* D3 Bracket 覆蓋 */
#bracket svg line { stroke: var(--primary) !important; stroke-width: 2px; }
#bracket svg rect { fill: rgba(0,20,40,0.9) !important; stroke: var(--primary) !important; }
#bracket svg text { fill: #fff !important; font-family: 'Rajdhani' !important; }

.match-card {
    background: rgba(0, 15, 30, 0.9);
    border: 1px solid #00eaff;
    padding: 12px 16px;
    margin-bottom: 14px;
    border-radius: 8px;
    font-family: 'Rajdhani', sans-serif;
    color: #fff;
    position: relative;
    overflow: hidden;
    text-shadow: 0 0 3px #00eaff;
    transition: 0.3s ease;
    animation: cyberFadeIn 0.5s ease;
}

/* 讓整體字級縮小一點點（最重要） */
.match-card * {
    font-size: 90%;
}

.match-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap; /* 不換行 */
    gap: 6px; /* 避免太擠 */
}

.team {
    flex: 1;
    font-size: 18px; /* ⭐縮小 */
    font-weight: 700;
    text-overflow: clip; /* ⭐不加省略號 */
    overflow: visible;   /* ⭐最重要：不要裁字 */
}

/* 左右對齊 */
.team-left { text-align: left; }
.team-right { text-align: right; }

/* Score 大小調整避免壓縮隊名 */
.score {
    flex: 0 0 auto;
    font-size: 22px;  /* ⭐縮小 */
    font-weight: 800;
    color: #00f3ff;
    text-shadow: 0 0 5px #00ffff;
}

/* Winner Row */
.winner-row {
    margin-top: 6px;
    font-size: 14px; /* ⭐縮小 */
    display: flex;
    align-items: center;
    gap: 4px;
}

.trophy {
    color: #ffd447;
}

.winner-name {
    color: #00f3ff;
    font-weight: 700;
    text-shadow: 0 0 4px #00f3ff;
}

/* =========================================
   MOBILE / APP-LIKE RESPONSIVE OVERRIDES
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. 容器與版面優化：去邊距，最大化空間 */
    .container {
        padding-left: 10px;
        padding-right: 10px;
        max-width: 100%;
    }
    
    /* 頂部導航：縮小間距，讓字體適應 */
    .sys-nav {
        padding: 15px;
        align-items: center;
    }
    .sys-id { font-size: 1.1rem; }
    .logout-btn { font-size: 0.9rem; }

    /* 2. 表單全面改為垂直堆疊 (像 App 的填寫介面) */
    .form-inline {
        flex-direction: column;
        align-items: stretch; /* 拉伸至全寬 */
        gap: 10px; /* 元素間距 */
        margin-bottom: 20px;
    }

    /* 強制所有輸入框與按鈕全寬，方便手指點擊 */
    .form-inline .cyber-input,
    .form-inline .cyber-select,
    .form-inline button,
    .btn-neon.full-width,
    .width-30, .width-20 {
        width: 100% !important;
        margin: 0 !important; /* 移除原本的 mr-2 */
        height: 48px; /* App 標準觸控高度 */
        font-size: 16px; /* 防止 iOS 自動縮放 */
    }

    /* 隱藏 VS 標籤，改用間距，或單獨一行 */
    .vs-tag {
        display: block;
        text-align: center;
        margin: 5px 0;
        font-size: 14px;
        opacity: 0.7;
    }

    /* 3. 隊伍列表優化 */
    .cyber-list-item {
        flex-direction: column; /* 上下排列 */
        align-items: stretch;
        background: rgba(0, 243, 255, 0.05); /* 增加底色區分 */
        margin-bottom: 10px;
        border: 1px solid rgba(0, 243, 255, 0.2);
        border-radius: 4px;
    }

    .team-name {
        text-align: center;
        font-size: 1.2rem;
        padding: 10px 0;
        font-weight: bold;
    }

    /* 列表按鈕群組：並排顯示且好按 */
    .cyber-list-item > div {
        display: flex;
        gap: 10px;
        margin-top: 5px;
    }
    
    .cyber-list-item button {
        flex: 1; /* 按鈕平分寬度 */
        padding: 10px;
    }

    /* 4. Match Card 戰績卡片響應式 (App 視圖) */
    .match-card {
        padding: 15px 10px;
    }

    .match-row {
        /* 在極小螢幕(如 iPhone SE)允許換行，但盡量保持同一行 */
        flex-wrap: wrap; 
        justify-content: center;
    }

    .team {
        /* 手機上隊名太長時，允許換行，避免撐爆版面 */
        white-space: normal;
        font-size: 16px;
        text-align: center;
        word-break: break-word; /* 強制換行 */
        min-width: 80px; /* 確保有點寬度 */
    }

    .team-left { text-align: center; order: 1; }
    .team-right { text-align: center; order: 3; }

    .score {
        order: 2;
        margin: 0 10px;
        font-size: 24px; /* 分數稍微放大 */
        min-width: 60px;
        text-align: center;
    }

    /* 編輯模式下的下拉選單 */
    .edit-form {
        flex-direction: column;
        gap: 8px;
        margin-top: 10px;
    }
    .edit-form select, .edit-form input {
        width: 100%;
    }

    /* 5. 賽程圖 Bracket (最棘手的部分) */
    /* 手機上無法完整顯示樹狀圖，改為橫向滾動 */
    #bracket-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* iOS 滑動慣性 */
        padding-bottom: 20px;
        background: rgba(0,0,0,0.3); /* 提示這是可滑動區域 */
        border-radius: 4px;
        border: 1px dashed rgba(0, 243, 255, 0.3);
    }
    
    /* 讓 SVG 保持原始寬度，不要縮小，強迫滾動 */
    #bracket svg {
        min-width: 600px; /* 強制最小寬度 */
        display: block;
        margin: 0 auto;
    }

    /* 6. 四強設定區 (Slot 選擇器) */
    .bracket-inputs select {
        font-size: 16px;
        height: 48px;
        margin-bottom: 12px;
    }
}