.bubbles-panel { overflow: hidden; }
.bubble-sky { position: relative; width: min(690px, 100%); height: 390px; overflow: hidden; border-radius: 24px; background: linear-gradient(180deg, #dff1ff, #effbff 65%, #d8f2e9); }
.bubble-sky::after { content: ""; position: absolute; inset: auto 0 0; height: 42px; background: radial-gradient(ellipse at center, #94ddb1 0 28%, transparent 29%) 0 0 / 58px 30px repeat-x; opacity: .58; pointer-events: none; }
.flying-bubble { position: absolute; bottom: -90px; left: var(--left); width: var(--size); height: var(--size); border-radius: 50%; background: radial-gradient(circle at 32% 27%, #fff 0 5%, #ffffffaa 6% 12%, transparent 13%), radial-gradient(circle at 37% 31%, #fff8 0 16%, transparent 36%), var(--bubble); border: 2px solid #fff9; box-shadow: inset -7px -8px 13px #00000012, 0 5px 12px #456c7c25; animation: bubble-flight var(--flight) linear forwards; }
.flying-bubble:hover { transform: scale(1.08); }
.flying-bubble.pop { animation: bubble-pop .18s ease-out forwards; pointer-events: none; }
.flying-bubble.wrong { filter: saturate(.4); animation: bubble-wrong .18s linear 2; }
@keyframes bubble-flight { to { bottom: 430px; transform: translateX(24px); } }
@keyframes bubble-pop { to { transform: scale(1.55); opacity: 0; } }
@keyframes bubble-wrong { 50% { transform: translateX(-7px); } }
.traffic-panel { text-align: center; }
.traffic-signal { width: 176px; height: 176px; border-radius: 50%; margin: 28px auto 18px; display: grid; place-items: center; background: #d7d4e2; box-shadow: inset 0 -13px #00000017, 0 18px 32px #3124551f; transition: transform .15s, background .2s; }
.traffic-signal span { width: 112px; height: 112px; border-radius: 50%; background: #f4f2f7; box-shadow: inset 0 9px #fff8; }
.traffic-signal.active { cursor: pointer; }.traffic-signal.hit { transform: scale(.92); }.traffic-signal.wrong { animation: traffic-shake .25s linear 2; }
@keyframes traffic-shake { 50% { transform: translateX(-8px); } }
.letter-grid { max-width: 510px; margin: 26px auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.letter-card { aspect-ratio: 1; border-radius: 16px; background: #f2edff; color: #6751d6; font: 700 clamp(1.65rem, 4vw, 2.45rem) Unbounded; transition: transform .15s, background .15s; }
.letter-card:hover { transform: translateY(-2px); background: #e4d9ff; }.letter-card.letter-hit { background: #8ee0a6; color: #16492c; }.letter-card.wrong { background: #f79baa; color: #762033; }
@media(max-width:760px){ .bubble-sky{height:340px}.letter-grid{gap:7px}.letter-card{border-radius:12px}.traffic-signal{width:146px;height:146px}.traffic-signal span{width:91px;height:91px} }