body { margin: 0; overflow: hidden; font-family: 'Segoe UI', sans-serif; background-color: #1e1e1e; color: white; }
        #canvas-container { width: 100vw; height: 100vh; }
        #ui-panel {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 280px;
            background: rgba(0, 0, 0, 0.8);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
            user-select: none;
        }
        h2 { margin-top: 0; font-size: 18px; color: #4facfe; border-bottom: 1px solid #555; padding-bottom: 10px; }
        #ui-toggle {
            position: absolute;
            top: 12px;
            right: 12px;
            min-width: 64px;
            height: 34px;
            padding: 4px 8px;
            background: rgba(0,0,0,0.6);
            border: 1px solid #444;
            color: #fff;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            white-space: nowrap;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .control-group { margin-bottom: 15px; }
        /* 让标签成为行内 flex，扩大点击区域并对齐控件 */
        label {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
            cursor: pointer;
            padding: 4px 2px;
        }
        /* 放大复选框/单选按钮并提升可点击性 */
        input[type="radio"], input[type="checkbox"] {
            width: 18px;
            height: 18px;
            margin-right: 6px;
            transform: scale(1.2);
            transform-origin: center;
            vertical-align: middle;
            cursor: pointer;
            accent-color: #4facfe;
        }
        .legend { font-size: 15px; margin-top: 15px; border-top: 1px solid #555; padding-top: 10px; }
        .legend-item { display: flex; align-items: center; margin-bottom: 5px; }
        .color-box { width: 15px; height: 15px; margin-right: 10px; display: inline-block; }
        .status { font-size: 12px; color: #aaa; margin-top: 5px; font-style: italic; }
        #speed-control { width: 100%; }
        #wind-control { width: 100%; }

        /* Collapsed UI panel */
        /* Collapsed: 保留标题，隐藏内容但保持足够背景宽度 */
        #ui-panel.collapsed {
            width: 220px;
            padding: 10px;
            overflow: visible;
        }
        /* 折叠时保留标题，保持与正常状态相同的字号 */
        #ui-panel.collapsed h2 {
            display: block;
            font-size: 18px; /* 与默认 h2 保持一致，不缩小 */
            margin-top: 0;
            margin-bottom: 6px;
            color: #4facfe;
        }
        /* 折叠时隐藏控制项和图例，仅保留标题和背景 */
        #ui-panel.collapsed .control-group,
        #ui-panel.collapsed .legend,
        #ui-panel.collapsed .status {
            display: none;
        }
        /* 调整折叠时开关按钮位置 */
        #ui-panel.collapsed #ui-toggle {
            right: 12px;
            top: 10px;
        }

/* Mobile portrait: enlarge control panel height and fonts (keep desktop unchanged) */
@media (max-width: 600px) and (orientation: portrait) {
    #ui-panel {
        width: 80vw;
        right: 4vw;
        left: auto;
        top: 12px;
        padding: 16px;
        border-radius: 10px;
        min-height: 300px;
        max-height: calc(100vh - 24px);
        overflow-y: auto; /* 当内容超过时可滚动 */
        background: rgba(0, 0, 0, 0.92);
    }

    /* 字号调整为更紧凑的手机视图 */
    #ui-panel, #ui-panel .control-group, #ui-panel .legend, #ui-panel .status {
        font-size: 15px;
        line-height: 1.3;
    }

    #ui-panel h2 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    label {
        font-size: 15px;
        gap: 10px;
        padding: 6px 2px;
    }

    input[type="radio"], input[type="checkbox"] {
        width: 20px;
        height: 20px;
        transform: scale(1.3);
    }

    #ui-toggle {
        height: 40px;
        min-width: 76px;
        padding: 6px 8px;
        font-size: 15px;
        top: 8px;
        right: 8px;
    }

    .legend { font-size: 14px; }
    .status { font-size: 13px; }

    /* range 控件尺寸微调，保持便于触控同时节省空间 */
    #speed-control, #wind-control {
        height: 28px;
    }

    /* 在移动竖屏下的折叠样式：只显示标题栏和折叠按钮，内容隐藏 */
    #ui-panel.collapsed {
        width: 72vw;
        padding: 8px 12px;
        min-height: 48px;
        max-height: none;
        overflow: visible;
        box-shadow: 0 6px 18px rgba(0,0,0,0.55);
    }

    #ui-panel.collapsed h2 {
        font-size: 18px;
        margin: 0;
        padding: 6px 0;
        border-bottom: none;
    }

    #ui-panel.collapsed .control-group,
    #ui-panel.collapsed .legend,
    #ui-panel.collapsed .status {
        display: none;
    }

    #ui-panel.collapsed #ui-toggle {
        top: 8px;
        right: 8px;
        height: 34px;
        min-width: 64px;
        font-size: 14px;
    }
}