/* static/css/leaf_style.css — dùng kèm race_style.css (sidebar, modal, timer, countdown) */
body { overflow: hidden; }
#control-panel { z-index: 10000; }
#race-track-container { z-index: 9000; }
#result-modal { z-index: 11000; }

/* ===== Bầu trời bão ===== */
#leaf-stage {
    position: absolute; inset: 0; overflow: hidden; z-index: 0; font-family: 'Nunito', sans-serif;
    background: linear-gradient(#0b1726 0, #1a2f45 55%, #23393a 100%);
}
#moon { position: absolute; right: 12%; top: 9%; width: 70px; height: 70px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fffbe6, #e6dfb0); box-shadow: 0 0 50px 14px rgba(255, 248, 200, .22); }
.cloud { position: absolute; height: 90px; border-radius: 50%; background: rgba(22, 32, 48, .9); filter: blur(14px); animation: drift 38s ease-in-out infinite alternate; }
.cloud.c1 { width: 42%; left: -6%; top: 1%; }
.cloud.c2 { width: 36%; left: 40%; top: 5%; animation-duration: 52s; }
.cloud.c3 { width: 40%; left: 70%; top: -1%; animation-duration: 45s; animation-direction: alternate-reverse; }
@keyframes drift { to { transform: translateX(9%); } }
#dawn { position: absolute; inset: 0; z-index: 12; pointer-events: none; opacity: 0; transition: opacity 2.5s;
    background: radial-gradient(ellipse at 50% 30%, rgba(255, 226, 150, .6), rgba(255, 170, 90, .22) 60%, transparent); }
#leaf-stage.finale #dawn { opacity: 1; }
#leaf-stage.finale .cloud { opacity: .25; transition: opacity 3s; }
#leaf-stage.tense::after { content: ""; position: absolute; inset: 0; z-index: 42; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .6)); }

#ground { position: absolute; left: 0; right: 0; bottom: 0; height: 10%; z-index: 15;
    background: linear-gradient(#1f3a2a, #0b150f); border-top: 3px solid #2e5a3a; }
.tree { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 18; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .5)); }
#rain { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
#flash { position: absolute; inset: 0; z-index: 40; background: #dcecff; opacity: 0; pointer-events: none; }
#fx { position: absolute; inset: 0; z-index: 44; pointer-events: none; }
#leaves { position: absolute; inset: 0; z-index: 20; }

/* ===== Chiếc lá ===== */
.leaf { position: absolute; left: 0; top: 0; transform-origin: 50% 0; pointer-events: none; }
.stem { position: absolute; left: 50%; top: 0; width: 3px; height: calc(var(--s) * .3); margin-left: -1.5px; background: #5a3a1a; border-radius: 2px; }
.blade { position: absolute; left: 0; right: 0; top: calc(var(--s) * .28); height: calc(var(--s) * 1.25); animation: grow .5s ease-out backwards; transform-origin: 50% 0; }
.blade svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5)); }
@keyframes grow { from { transform: scale(0); } }
.lf-face { position: absolute; left: 22%; right: 22%; top: calc(var(--s) * .74); height: calc(var(--s) * .3); }
.lf-face i { position: absolute; top: 0; width: 30%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 60% 55%, #1a0f06 0 38%, #fff 42%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); transition: transform .15s; }
.lf-face i:first-child { left: 6%; } .lf-face i:nth-child(2) { right: 6%; }
.lf-face b { position: absolute; left: 50%; top: 52%; width: 34%; height: 20%; transform: translateX(-50%);
    border-bottom: 2px solid #2b1608; border-radius: 0 0 60% 60%; }
.lf-name { position: absolute; left: 50%; top: calc(var(--s) * 1.55); transform: translateX(-50%); white-space: nowrap;
    max-width: calc(var(--s) * 1.6); overflow: hidden; text-overflow: ellipsis; font-weight: 800;
    font-size: clamp(9px, calc(var(--s) * .19), 15px); color: #dff1ff; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.lf-badge { position: absolute; left: -4%; top: calc(var(--s) * .3); min-width: 1.7em; padding: 0 .3em; border-radius: 99px; text-align: center;
    background: #ffd23f; color: #3b0d0a; font: 800 12px 'Nunito', sans-serif; text-decoration: none; }
.lf-badge:empty { display: none; }

/* Sắp rụng: mặt hoảng + tên sáng lên */
.leaf.warning .lf-face i { transform: scale(1.4); }
.leaf.warning .lf-face b { width: 20%; height: 30%; top: 46%; border: 2px solid #2b1608; border-radius: 50%; }
.leaf.warning .lf-name { max-width: none; overflow: visible; padding: 1px 8px; border-radius: 99px; background: rgba(50, 0, 0, .88); color: #fff6b0;
    text-shadow: 0 0 6px #ffb347; box-shadow: 0 0 10px 2px rgba(255, 160, 40, .85); animation: namePulse .3s ease-in-out infinite alternate; }
@keyframes namePulse { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.18); } }
.leaf.charred .blade svg { filter: grayscale(1) brightness(.3); }
.leaf.winner .blade svg { filter: drop-shadow(0 0 10px #ffd23f) drop-shadow(0 0 22px #ffd23f) brightness(1.15); }
.leaf.winner .lf-name { max-width: none; overflow: visible; color: #ffe38a; font-size: 15px; }
.leaf.winner .lf-face b { height: 28%; border-width: 3px; }

/* ===== Hiệu ứng hài hước ===== */
.bubble { position: absolute; left: 0; top: 0; padding: 3px 10px; border-radius: 12px; background: #fff; color: #222; font: 800 12px 'Nunito', sans-serif; white-space: nowrap; box-shadow: 0 2px 6px #0008; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; }
.bird { position: absolute; left: 0; top: 0; line-height: 1; z-index: 2; }
.bolt { position: absolute; width: 60px; background: linear-gradient(#fff, #bfe3ff); z-index: 43; box-shadow: 0 0 30px 10px rgba(190, 225, 255, .7);
    clip-path: polygon(40% 0, 62% 0, 48% 30%, 70% 30%, 34% 70%, 48% 70%, 30% 100%, 36% 62%, 22% 62%, 46% 28%, 34% 28%); }
.float { position: absolute; left: 0; top: 0; font: 1.3rem 'Fredoka One', cursive; color: #fff; text-shadow: 0 2px 4px #000; white-space: nowrap; }
.ripple { position: absolute; left: -25px; top: -8px; width: 50px; height: 16px; border-radius: 50%; border: 2px solid rgba(190, 225, 255, .8); }
#caption { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); z-index: 46; opacity: 0; white-space: nowrap;
    font: 3rem 'Fredoka One', cursive; color: #fff; text-shadow: 0 0 20px #8ec5ff, 0 3px 6px #000; pointer-events: none; }

/* HUD */
#hud { position: absolute; left: 14px; right: 14px; top: 12px; height: 34px; z-index: 45; display: flex; gap: 18px; align-items: center;
    padding: 0 16px; border-radius: 99px; background: rgba(5, 12, 20, .75); color: #dff1ff; font-weight: 800; font-size: 13px; white-space: nowrap; }
#hud-log { margin-left: auto; color: #ffd23f; overflow: hidden; text-overflow: ellipsis; }
#btn-floating-start { z-index: 9500; }

@media (max-width: 700px) { #hud { font-size: 11px; gap: 10px; } #caption { font-size: 2rem; } }
@media (prefers-reduced-motion: reduce) { .cloud, .blade { animation: none; } }