/* ==========================================================================
   game.css — Oyun ekranı: üst bilgi, tahta, tüpler, alt çubuk
   ========================================================================== */

/* ---------- Üst bilgi ---------- */
.hud { position: relative; flex: none; padding: 12px 14px 4px; text-align: center; }
.hud-level { position: absolute; left: 14px; top: 14px; font-size: 15px; font-weight: 900; letter-spacing: 0.08em; color: #d4d4da; }
.hud-moves { font-size: 20px; font-weight: 900; letter-spacing: 0.04em; }
.hud-moves b { font-weight: 900; }
.hud-bar { width: 58%; height: 12px; margin: 8px auto 0; border-radius: 99px; background: #f1f1f4; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.hud-bar i { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(180deg, #ffe45c, #f5b800); transition: width 0.35s ease; }
.hud-stars { display: flex; justify-content: center; gap: 6px; margin-top: 8px; font-size: 32px; }
.hud-stars .star:nth-child(2) { transform: translateY(-3px); }

/* ---------- Tahta ---------- */
.board { position: relative; flex: 1; min-height: 0; margin: 0 6px; }

.tube {
    position: absolute; left: 0; top: 0; transform-origin: 50% 0; cursor: pointer; will-change: transform;
    transition: transform 0.26s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.tube::before { content: ""; position: absolute; inset: -8px -12px -4px -12px; }   /* dokunma alanını büyütür */
.tube.enter { animation: tubeIn 0.4s both; }
@keyframes tubeIn { from { opacity: 0; } to { opacity: 1; } }

.t-glass {
    position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--rim) / 2);
    border: 3px solid rgba(255, 255, 255, 0.96); border-top: 0;
    border-radius: 0 0 calc(var(--tw) / 2) calc(var(--tw) / 2);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.45), inset 0 0 10px rgba(255, 255, 255, 0.08);
}
.t-liquid {
    position: absolute; left: 3px; right: 3px; bottom: 3px; height: calc(var(--cap) * var(--unit));
    display: flex; flex-direction: column-reverse; overflow: hidden;
    border-radius: 0 0 calc(var(--tw) / 2 - 3px) calc(var(--tw) / 2 - 3px);
}
.layer { flex: none; width: 100%; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2); }
.t-gloss {
    position: absolute; left: 20%; width: 13%; top: calc(var(--rim) / 2 + 6px); bottom: calc(var(--tw) * 0.45);
    border-radius: 10px; pointer-events: none;
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.06));
}
.t-rim {
    position: absolute; left: -4px; right: -4px; top: 0; height: var(--rim); border-radius: 999px;
    background: linear-gradient(180deg, #9fd3e6, #4f8fa8); border: 2px solid #fff;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.35);
}
.t-rim::after { content: ""; position: absolute; left: 14%; right: 14%; top: 28%; bottom: 28%; border-radius: 999px; background: rgba(10, 30, 45, 0.55); }

.tube.selected .t-glass { box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.45), 0 0 16px rgba(255, 255, 255, 0.7); }
.tube.done .t-rim { background: linear-gradient(180deg, #ffe88a, #d9a21b); }
.tube.done .t-glass { box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.45), 0 0 12px rgba(255, 210, 31, 0.55); }
.tube.pop { animation: tubePop 0.6s; }
@keyframes tubePop { 0%, 100% { filter: none; } 35% { filter: brightness(1.7) drop-shadow(0 0 14px #fff); } }

.tube.shake .t-glass, .tube.shake .t-liquid, .tube.shake .t-rim, .tube.shake .t-gloss { animation: shakeX 0.35s; }
@keyframes shakeX { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }

.tube.celebrate .t-glass, .tube.celebrate .t-liquid, .tube.celebrate .t-rim, .tube.celebrate .t-gloss { animation: hop 0.7s ease; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } 70% { transform: translateY(2px); } }

.tube.hint-src .t-glass { animation: hintGold 0.9s ease-in-out infinite; }
.tube.hint-dst .t-glass { animation: hintGreen 0.9s ease-in-out infinite; }
@keyframes hintGold { 0%, 100% { box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.45), 0 0 4px rgba(255, 210, 31, 0.4); } 50% { box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.45), 0 0 22px 4px rgba(255, 210, 31, 0.95); } }
@keyframes hintGreen { 0%, 100% { box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.45), 0 0 4px rgba(47, 208, 106, 0.4); } 50% { box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.45), 0 0 22px 4px rgba(47, 208, 106, 0.95); } }

.stream { position: absolute; z-index: 55; border-radius: 3px; pointer-events: none; }

/* ---------- Alt çubuk ---------- */
.dock-wrap { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px 10px; }

.round-btn {
    flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.14);
    background: radial-gradient(circle at 35% 30%, #3a3a40, #1f1f23); display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.round-btn svg { width: 22px; height: 22px; fill: #f2f2f4; }
.round-btn:active { transform: scale(0.92); }

.dock {
    flex: 1; display: flex; justify-content: space-around; align-items: flex-start; padding: 10px 10px 7px;
    border-radius: 44px; background: linear-gradient(180deg, #2c2c31, #202024); border: 2px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
.dock-item { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.dock-item > span { font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; color: #8d8d96; }

.dock-btn {
    position: relative; width: 56px; height: 56px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.07);
    display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
    background: radial-gradient(circle at 35% 28%, #3b3b42, #19191c);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); transition: transform 0.1s;
}
.dock-btn:active { transform: scale(0.9); }
.dock-btn > svg { width: 30px; height: 30px; }
.dock-btn.green > svg { fill: #7be03a; filter: drop-shadow(0 0 4px rgba(123, 224, 58, 0.5)); }
.dock-btn.dark > svg.ic-tube { fill: #bfe6f5; }
.dock-btn.yellow { background: radial-gradient(circle at 35% 28%, #ffe66e, #f0a500); border-color: rgba(255, 255, 255, 0.35); }
.dock-btn.yellow > svg { fill: #fff; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }

.dock-btn.pulse { animation: dockPulse 0.8s ease-in-out infinite; }
@keyframes dockPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 31, 0.8); } 50% { box-shadow: 0 0 0 10px rgba(255, 210, 31, 0); } }

.badge {
    position: absolute; top: -6px; right: -7px; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 99px;
    background: var(--blue); color: #fff; border: 2px solid #fff; font-style: normal; font-size: 12px; font-weight: 900;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.badge svg { width: 14px; height: 14px; fill: #fff; }
.badge.video, .badge.is-ad { background: var(--gold-2); }
.badge.is-ad::before { content: ""; width: 0; height: 0; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }