:root { --bg-color: #F0F2F5; --sidebar-width: 260px; --highlight-color: #2980b9; }
        /* Allow page scrolling on mobile devices; previously overflow:hidden caused real-device truncation */
        body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg-color); overflow: auto; -webkit-overflow-scrolling: touch; user-select: none; }
        /* Safe-area padding so fixed headers / controls are not hidden under notches/status bars on iOS */
        html, body, #app { padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); }
        img.pixel-art { image-rendering: pixelated; }
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
        
        .sidebar { width: var(--sidebar-width); background: white; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; z-index: 50; }
        .menu-item { padding: 12px 20px; cursor: pointer; display: flex; align-items: center; gap: 10px; color: #666; font-size: 14px; font-weight: 600; border-left: 4px solid transparent; }
        .menu-item:hover { background: #f8f9fa; color: #2c3e50; }
        .menu-item.active { background: #ecf0f1; color: var(--highlight-color); border-left-color: var(--highlight-color); }
        
        .btn { background: var(--highlight-color); color: white; padding: 6px 16px; border-radius: 4px; font-size: 13px; font-weight: bold; transition: 0.2s; border: none; cursor: pointer; }
        .btn:hover { filter: brightness(1.1); }
        .btn:disabled { background: #bdc3c7; cursor: not-allowed; }
        .btn.secondary { background: #ecf0f1; color: #2c3e50; }
        .btn.danger { background: #e74c3c; color: white; }
        
        .card { background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid #eee; overflow: hidden; }
        
        table { width: 100%; border-collapse: collapse; text-align: left; }
        th { background: #f8f9fa; padding: 8px; font-size: 12px; color: #888; border-bottom: 2px solid #eee; position: sticky; top: 0; z-index: 10; }
        td { padding: 8px; font-size: 13px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
        tr:hover td { background: #fbfbfb; }

        .badge { padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: bold; white-space: nowrap; }
        .badge.G1 { background: #8e44ad; color: white; }
        .badge.Achievement { 
            background-color: #333333; 
            color: #ffd700; /* 金色 */
            border: 1px solid #555;
            box-shadow: 0 1px 2px rgba(0,0,0,0.3);
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: bold;
            white-space: nowrap;
        }
        .badge.G2 { background: #e74c3c; color: white; }
        .badge.G3 { background: #27ae60; color: white; }
        .badge.OP { background: #f39c12; color: white; }
        .badge.L { background: #d35400; color: white; }
        .badge.Cond { background: #95a5a6; color: white; }
        .badge.New { background: #16a085; color: white; }
        .badge.Jpn { background: #795548; color: white; }
        
        .modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); z-index: 100; display: flex; align-items: center; justify-content: center; }
        /* ★★★ 防止页面加载时弹窗闪现 ★★★ */
        .prevent-modal-flash .modal-mask { display: none !important; }
        .modal-body { background: white; width: 950px; max-height: 90vh; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
        
        .stat-bar { height: 6px; background: #eee; border-radius: 3px; overflow: hidden; margin-top: 4px; }
        .stat-fill { height: 100%; transition: width 0.3s; }

        .waku-1 { background-color: #ffffff; color: #333; border: 1px solid #ccc; }
        .waku-2 { background-color: #222222; color: #fff; }
        .waku-3 { background-color: #e74c3c; color: #fff; }
        .waku-4 { background-color: #3498db; color: #fff; }
        .waku-5 { background-color: #f1c40f; color: #333; }
        .waku-6 { background-color: #2ecc71; color: #fff; }
        .waku-7 { background-color: #e67e22; color: #fff; }
        .waku-8 { background-color: #fd79a8; color: #fff; }
        .helmet-icon { width: 18px; height: 18px; display: inline-block; border-radius: 50%; text-align: center; font-size: 11px; line-height: 18px; font-weight: bold; margin-right: 4px; }
        
        .retired { filter: grayscale(100%); opacity: 0.7; pointer-events: none; }
        .retired-badge { 
            position: absolute; 
            top: 12px;           
            right: 60px;        
            background: #e74c3c; 
            color: white; 
            padding: 4px 12px; 
            font-weight: 900;    
            transform: rotate(-8deg); 
            border: 2px solid white; 
            box-shadow: 0 2px 4px rgba(0,0,0,0.3); 
            z-index: 40;         
            pointer-events: none; 
        }

        .pixel-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; }
        .pixel-container img { width: 100%; height: 100%; object-fit: contain; }
        
.achievement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin-top: 5px; }
        .ach-item { background: #fff8e1; border: 1px solid #ffe082; color: #b7791f; padding: 6px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: 0.2s; }
        .ach-item:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .ach-icon { font-size: 18px; margin-bottom: 2px; }
    /* --- 联机模式新增样式 --- */
    .lobby-container { display: flex; gap: 20px; height: 100%; padding: 20px; }
    .lobby-panel { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); flex: 1; display: flex; flex-direction: column; }
    .player-list-item { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid #eee; gap: 10px; }
    .player-list-item:last-child { border-bottom: none; }
    .ready-status { font-size: 12px; padding: 2px 8px; border-radius: 10px; font-weight: bold; }
    .ready-status.yes { background: #d1fae5; color: #065f46; }
    .ready-status.no { background: #f3f4f6; color: #9ca3af; }
    .silk-preview-sm { width: 40px; height: 40px; border: 1px solid #ddd; border-radius: 4px; display: flex; justify-content: center; align-items: center; background: #f9f9f9; }
    .waiting-overlay { position: absolute; inset: 0; background: rgba(255,255,255,0.8); z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: bold; color: #555; }

/* ==================== 移动端适配 ==================== */
@media (max-width: 768px) {
    /* 全局调整 */
    body { font-size: 12px; }
    
    /* 联机大厅优化 */
    .player-list-item {
        padding: 8px;
        gap: 8px;
    }
    
    /* 汉堡菜单按钮 */
    .mobile-menu-btn {
        position: fixed;
        top: calc(env(safe-area-inset-top, 12px) + 6px);
        left: 12px;
        z-index: 1100;
        width: 44px;
        height: 44px;
        background: white;
        border: 2px solid #3498db;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #3498db;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        cursor: pointer;
        transition: all 0.3s;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
        50% { box-shadow: 0 2px 12px rgba(52, 152, 219, 0.4); }
    }
    
    .mobile-menu-btn:active {
        transform: scale(0.95);
        background: #3498db;
        color: white;
        animation: none;
    }
    
    /* 侧边栏打开时，按钮样式改变 */
    .sidebar-open ~ .mobile-menu-btn {
        animation: none;
    }
    
    /* 侧边栏遮罩层 */
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        animation: fadeIn 0.3s;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    /* 侧边栏适配 - 移动端默认隐藏，滑入显示 */
    :root { --sidebar-width: 280px; }
    
    .sidebar { 
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--sidebar-width);
        height: 100vh;
        max-height: 100vh;
        border-right: none;
        border-bottom: none;
        flex-direction: column;
        overflow: visible;
        background: white;
        z-index: 1000;
        transform: translateX(-100%); /* 默认隐藏在左侧 */
        transition: transform 0.3s ease-in-out;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    
    /* 侧边栏展开状态 */
    .sidebar-open {
        transform: translateX(0) !important;
    }
    
    /* 侧边栏头部 - 固定不滚动 */
    .sidebar-header {
        flex-shrink: 0;
        background: white;
        border-bottom: 1px solid #e0e0e0;
    }
    
    /* 侧边栏菜单区域 - 可滚动 */
    .sidebar-menu {
        flex: 1; /* 占据剩余空间 */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        background: white;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e0 #f7fafc;
    }
    
    /* WebKit浏览器滚动条样式 */
    .sidebar-menu::-webkit-scrollbar {
        width: 4px;
    }
    
    .sidebar-menu::-webkit-scrollbar-track {
        background: #f7fafc;
    }
    
    .sidebar-menu::-webkit-scrollbar-thumb {
        background: #cbd5e0;
        border-radius: 2px;
    }
    
    .sidebar-menu::-webkit-scrollbar-thumb:hover {
        background: #a0aec0;
    }
    
    /* 侧边栏底部 - 固定不滚动 */
    .sidebar-footer {
        flex-shrink: 0;
        background: #f9fafb;
        border-top: 1px solid #e0e0e0;
    }
    
    /* 菜单项保持垂直排列 */
    .menu-item { 
        padding: 12px 16px; 
        font-size: 13px;
        white-space: nowrap;
        border-left: 4px solid transparent;
        border-bottom: none;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .menu-item:active {
        background: #f0f0f0;
    }
    
    .menu-item.active {
        border-left-color: var(--highlight-color);
        border-bottom: none;
        background: #ecf0f1;
        color: var(--highlight-color);
    }
    
    /* 菜单项图标 */
    .menu-item i {
        font-size: 16px;
        min-width: 20px;
        text-align: center;
    }
    
    /* 菜单项文本 */
    .menu-item-text {
        flex: 1;
    }
    
    /* 按钮适配 */
    .btn { 
        padding: 10px 16px; 
        font-size: 13px;
        touch-action: manipulation;
        min-height: 44px; /* iOS推荐的最小触摸目标 */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    
    /* 输入框优化 */
    input, select, textarea {
        font-size: 16px !important; /* 防止iOS自动缩放 */
        min-height: 44px;
        padding: 8px 12px;
    }
    
    /* 触摸优化 */
    button, .btn, .menu-item, .card, a {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    /* 卡片适配 */
    .card { border-radius: 6px; }
    
    /* 表格适配 */
    table { 
        font-size: 11px;
        width: 100%;
        min-width: 100%;
    }
    
    /* 表格容器横向滚动 */
    .card:has(table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }
    
    /* 横向滚动提示 */
    .card:has(.stable-table)::after {
        content: '← 左右滑动查看更多 →';
        position: sticky;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to top, rgba(249, 250, 251, 0.95), transparent);
        text-align: center;
        padding: 8px;
        font-size: 10px;
        color: #9ca3af;
        pointer-events: none;
        z-index: 5;
    }
    
    th { 
        padding: 8px 6px; 
        font-size: 10px;
        white-space: nowrap;
        position: sticky;
        top: 0;
        background: #f8f9fa;
        z-index: 10;
    }
    
    td { 
        padding: 8px 6px; 
        font-size: 11px;
        vertical-align: middle;
    }
    
    /* 马房管理表格优化 */
    .stable-table {
        min-width: 900px; /* 确保表格有足够宽度 */
    }
    
    .stable-table th:nth-child(1),
    .stable-table td:nth-child(1) {
        min-width: 180px; /* 马名列 */
        width: 25%;
    }
    
    .stable-table th:nth-child(2),
    .stable-table td:nth-child(2) {
        min-width: 60px; /* 级别 */
        width: 8%;
    }
    
    .stable-table th:nth-child(3),
    .stable-table td:nth-child(3) {
        min-width: 160px; /* 调教指示 */
        width: 20%;
    }
    
    /* 调教指示下拉框优化 */
    .stable-table select {
        min-width: 100px;
        max-width: 120px;
    }
    
    .stable-table th:nth-child(4),
    .stable-table td:nth-child(4) {
        min-width: 80px; /* 体力 */
        width: 10%;
    }
    
    .stable-table th:nth-child(5),
    .stable-table td:nth-child(5) {
        min-width: 100px; /* 调教师 */
        width: 12%;
    }
    
    .stable-table th:nth-child(6),
    .stable-table td:nth-child(6) {
        min-width: 90px; /* 本赏金 */
        width: 12%;
    }
    
    .stable-table th:nth-child(7),
    .stable-table td:nth-child(7) {
        min-width: 120px; /* 下场比赛 */
        width: 13%;
    }
    
    /* 徽章适配 */
    .badge { 
        padding: 2px 4px; 
        font-size: 9px; 
    }
    
    /* 模态框适配
       Use dynamic viewport units to avoid content being hidden behind mobile browser UI (address/nav bars).
       100dvh and -webkit-fill-available are preferred on mobile; include safe-area inset padding. */
    .modal-body { 
        width: 100vw; 
        max-width: 100vw;
        /* prefer dynamic viewport height to avoid oversizing behind browser chrome */
        height: 100dvh;
        max-height: 100dvh;
        min-height: -webkit-fill-available;
        box-sizing: border-box;
        /* ensure content isn't hidden under notch/home indicator */
        padding-bottom: env(safe-area-inset-bottom, 0);
        border-radius: 0;
        margin: 0;
    }
    
    /* 模态框内容区域 */
    .modal-body > div {
        max-height: 100%;
    }
    
    /* 标题屏幕适配 */
    .title-container {
        width: 95% !important;
        max-width: 400px !important;
        padding: 20px !important;
    }
    
    /* 大厅适配 */
    .lobby-container {
        flex-direction: column;
        padding: 10px;
        gap: 10px;
    }
    
    /* 拍卖会适配 */
    .auction-controls {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #e0e0e0;
        max-height: 40vh;
        overflow-y: auto;
    }
    
    /* 拍卖会候选马卡片 */
    .candidate-card {
        min-width: 280px;
    }
    
    /* 俱乐部和种马网格 */
    .club-grid,
    .stud-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* 游戏主界面适配 */
    .game-layout {
        flex-direction: column !important;
        position: relative;
    }
    
    /* 主内容区域在移动端占满全屏 */
    .game-layout > .flex-1 {
        width: 100% !important;
        height: 100vh !important;
        padding-top: 60px; /* 为汉堡按钮留出空间 */
    }
    
    /* 马匹详情弹窗网格布局 */
    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* 成就网格 */
    .achievement-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
        gap: 8px !important;
    }
    
    /* 统计条适配 */
    .stat-bar { height: 4px; }
    
    /* 头盔图标适配 */
    .helmet-icon { 
        width: 14px; 
        height: 14px; 
        font-size: 9px; 
        line-height: 14px; 
    }
    
    /* 滚动条在移动端更细 */
    ::-webkit-scrollbar { width: 3px; height: 3px; }
}

@media (max-width: 480px) {
    /* 超小屏幕额外适配 */
    body { font-size: 11px; }
    
    .btn { 
        padding: 8px 12px; 
        font-size: 12px;
        min-height: 40px;
    }
    
    table { font-size: 10px; }
    th { padding: 6px 3px; font-size: 9px; }
    td { padding: 6px 3px; font-size: 10px; }
    
    .badge { 
        padding: 2px 4px; 
        font-size: 8px; 
    }
    
    .modal-body {
        width: 100vw;
        max-height: 100vh;
        height: 100vh;
    }
    
    /* 标题屏幕 */
    .title-container {
        padding: 16px !important;
    }
    
    /* 候选马卡片 */
    .candidate-card {
        min-width: 260px;
    }
}

/* 横屏适配 */
@media (max-width: 768px) and (orientation: landscape) {
    /* 横屏时侧边栏菜单区域更小 */
    .sidebar-menu {
        max-height: 25vh;
    }
    
    /* 横屏时按钮更紧凑 */
    .sidebar-footer {
        padding: 8px 12px;
    }
    
    .sidebar-footer .btn {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .modal-body {
        max-height: 95vh;
    }
}

/* 超小屏幕横屏优化 */
@media (max-width: 480px) and (orientation: landscape) {
    .sidebar-menu {
        max-height: 20vh;
    }
    
    .menu-item {
        padding: 8px 12px;
        font-size: 11px;
    }
}

/* 移动端表格优化 */
@media (max-width: 768px) {
    /* 表格横向滚动 */
    .card table {
        /* display: block; */
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    /* 触摸优化 */
    button, .btn, .menu-item, .card {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    /* 输入框优化 */
    input, select, textarea {
        font-size: 16px !important; /* 防止iOS自动缩放 */
    }
    
    /* 退役马匹卡片堆叠 */
    .retired-horse-card {
        flex-direction: column !important;
    }
    
    .retired-horse-card > div {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }
    
    /* Hall of Fame 网格 */
    .hall-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* 俱乐部网格 */
    .club-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* 种马网格 */
    .stud-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* 比赛直播区域 */
    .race-live-container {
        flex-direction: column !important;
    }
    
    .race-list-sidebar {
        width: 100% !important;
        max-height: 200px !important;
        border-right: none !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }
}

/* ==================== 中等屏幕优化 (适配笔记本) ==================== */
@media (min-width: 769px) and (max-width: 1366px) {
    /* 联机大厅在中等屏幕上的优化 */
    .player-list-item {
        padding: 8px;
        font-size: 12px;
    }
    
    /* 确保ID文本可以换行 */
    .font-mono {
        word-break: break-all;
    }
}

/* ==================== 移动端额外优化 ==================== */
@media (max-width: 768px) {
    /* 防止页面缩放 */
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    
    /* 优化滚动性能 */
    * {
        -webkit-overflow-scrolling: touch;
    }
    
    /* 新马搜索模态框 */
    .modal-body.w-full.max-w-6xl {
        max-width: 100vw !important;
        /* use dynamic viewport height to avoid oversizing behind browser chrome */
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: -webkit-fill-available !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }
    
    /* 拍卖会候选马列表 */
    .candidate-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    /* 比赛结果卡片 */
    .race-result-card {
        padding: 12px !important;
    }
    
    /* 统计图表 */
    .stat-bar {
        height: 6px !important;
    }
    
    /* 像素艺术容器 */
    .pixel-container {
        image-rendering: pixelated;
        image-rendering: -moz-crisp-edges;
        image-rendering: crisp-edges;
    }
    
    /* 胜负服预览 */
    .silk-preview-sm {
        width: 36px;
        height: 36px;
    }
    
    /* 成就项 */
    .ach-item {
        padding: 8px 4px;
        font-size: 10px;
    }
    
    /* 头盔图标在表格中 */
    .helmet-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* 确保所有弹出层全屏显示 */
    .modal-mask {
        padding: 0 !important;
    }
    
    /* 详情页面内边距 */
    .modal-body .p-6 {
        padding: 16px !important;
    }
    
    .modal-body .p-5 {
        padding: 12px !important;
    }
    
    /* 网格间距优化 */
    .grid {
        gap: 12px !important;
    }
    
    /* 选择器优化 */
    select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
        padding-right: 32px;
    }
}