/* 全能海洋 - 波浪流式 */
.allround-ocean {
    min-height: 100vh; padding: 12px;
    background: linear-gradient(180deg, #E3F2FD 0%, #BBDEFB 25%, #64B5F6 55%, #1976D2 100%);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.ocean-bg {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 60% 25% at 50% 100%, rgba(66,153,225,0.2) 0%, transparent 60%),
        radial-gradient(ellipse 40% 15% at 30% 95%, rgba(99,179,237,0.15) 0%, transparent 50%);
}
.ocean-waves {
    position: fixed; bottom: 0; left: 0; right: 0; height: 80px; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 100% 100% at 50% 100%, rgba(255,255,255,0.3) 0%, transparent 50%),
        radial-gradient(ellipse 80% 80% at 20% 100%, rgba(255,255,255,0.2) 0%, transparent 40%),
        radial-gradient(ellipse 80% 80% at 80% 100%, rgba(255,255,255,0.2) 0%, transparent 40%);
}
.ocean-header {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px; margin-bottom: 14px;
}
.ocean-header .o-icon { font-size: 28px; }
.ocean-header .o-name { font-size: 20px; font-weight: 700; color: #2b6cb0; }
.ocean-header .o-lv { font-size: 14px; font-weight: 600; color: #2b6cb0; }
.ocean-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.o-card {
    position: relative;
    background: rgba(255,255,255,0.85); border-radius: 16px 16px 16px 4px;
    padding: 18px 14px; text-align: center;
    box-shadow: 0 2px 10px rgba(66,153,225,0.1);
    border: 2px solid rgba(66,153,225,0.15);
    cursor: pointer; transition: all 0.2s;
    overflow: hidden;
}
.o-card:hover {
    border-color: #4299e1; box-shadow: 0 4px 16px rgba(66,153,225,0.25);
    transform: translateY(-3px);
}
.o-card.locked {
    opacity: 0.45; background: rgba(240,245,250,0.8); border-color: rgba(66,153,225,0.08);
    cursor: default; border-radius: 16px;
}
.o-card.locked:hover { transform: none; box-shadow: 0 2px 10px rgba(66,153,225,0.1); }
.o-card-wave {
    position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, transparent, rgba(66,153,225,0.5), transparent);
    border-radius: 0 0 16px 4px;
}
.o-card.locked .o-card-wave { opacity: 0.3; }
.o-num {
    width: 34px; height: 34px; margin: 0 auto 8px;
    border-radius: 50%; background: linear-gradient(135deg, #4299e1, #2b6cb0);
    color: white; font-size: 15px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.o-card.locked .o-num { background: #cbd5e0; }
.o-title { font-size: 17px; font-weight: 700; color: #2b6cb0; margin-bottom: 8px; }
.o-stars { display: flex; justify-content: center; gap: 2px; }
.o-stars span { font-size: 16px; }
.o-stars .on { color: #63b3ed; }
.o-stars .off { color: #e0e0e0; }