#circle-game { padding: env(safe-area-inset-top) 0 0 0; justify-content: flex-start; }
#circlePlayArea { overflow: visible; }
.circle-stage {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: var(--stage-size);
    height: var(--stage-size);
    pointer-events: none;
}
.circle-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,.12);
    width: var(--ring-diam);
    height: var(--ring-diam);
    pointer-events: none;
}
.circle-bubble {
    position: absolute;
    top: 50%; left: 50%;
    width: var(--bubble-size);
    height: var(--bubble-size);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: calc(var(--bubble-size) * 0.42);
    cursor: pointer;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--radius));
    transition: transform .1s, box-shadow .2s, border-color .2s, background .2s;
    pointer-events: auto;
    user-select: none;
}
.circle-bubble .num {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    transform: rotate(calc(-1 * var(--angle)));
}
/* 简单模式：纯白气泡 */
.circle-bubble.simple {
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(203,213,225,.6);
    color: #1e293b;
    box-shadow: 0 4px 14px rgba(255,255,255,.15);
}
.circle-bubble.simple.correct {
    border-color: rgba(96,165,250,.8);
    box-shadow: 0 0 10px rgba(96,165,250,.35);
}
/* 中级模式：随机彩色 */
.circle-bubble.medium {
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.circle-bubble.medium.correct {
    filter: brightness(1.15);
    box-shadow: 0 0 16px rgba(255,255,255,.35);
}
/* 挑战模式：持续自转 */
.circle-bubble.challenge {
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    box-shadow: 0 0 12px rgba(255,255,255,.08), inset 0 0 12px rgba(255,255,255,.1);
}
.circle-bubble.challenge.correct {
    animation: circleFlash .35s ease-in-out;
}
@keyframes circleFlash {
    0%, 100% { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--radius)) scale(1); }
    50% { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--radius)) scale(1.15); }
}
.circle-bubble.wrong {
    animation: shake .35s ease-in-out;
    border-color: rgba(248,113,113,.8) !important;
    box-shadow: 0 0 20px rgba(248,113,113,.4) !important;
}
.circle-bubble:active { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--radius)) scale(.92); }