#compass-menu { justify-content: flex-start; padding-top: max(50px, env(safe-area-inset-top)); overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
#compass-game { padding: env(safe-area-inset-top) 0 0 0; justify-content: flex-start; }
#compassPlayArea { overflow: visible; }
.compass-stage {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: var(--compass-size);
    height: var(--compass-size);
    pointer-events: none;
}
.compass-stage svg {
    width: 100%; height: 100%;
    overflow: visible;
    pointer-events: none;
}
.compass-ring {
    pointer-events: none;
}
.compass-sector {
    pointer-events: auto;
    cursor: pointer;
    stroke: rgba(80,110,100,.35);
    stroke-width: 1.5;
    transition: fill .15s, stroke .15s, filter .15s;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.05));
}
.compass-sector:active { filter: brightness(0.9); }
/* 简单模式：统一浅米色 */
.compass-sector.simple {
    fill: rgba(254,252,246,.95);
}
.compass-sector.simple.correct {
    stroke: rgba(96,165,250,.9);
    stroke-width: 2.5;
    filter: drop-shadow(0 0 6px rgba(96,165,250,.35));
}
/* 中级 / 挑战：随机彩色 */
.compass-sector.colored.correct {
    stroke: rgba(255,255,255,.9);
    stroke-width: 2.5;
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(255,255,255,.3));
}
.compass-sector.wrong {
    animation: compassShake .35s ease-in-out;
    stroke: rgba(248,113,113,.9) !important;
    stroke-width: 2.5 !important;
}
@keyframes compassShake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-2px, 2px); }
    50% { transform: translate(2px, -2px); }
    75% { transform: translate(-2px, -2px); }
}
.compass-text {
    pointer-events: none;
    font-weight: 800;
    fill: #1e293b;
    text-anchor: middle;
    dominant-baseline: central;
}