/* static/css/popcorn_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; }

/* ===== Tủ máy bắp rang ===== */
#popcorn-stage {
    position: absolute; inset: 0; overflow: hidden; z-index: 0; --heat: 0;
    font-family: 'Nunito', sans-serif;
    background: radial-gradient(ellipse at 50% 40%, #5c201a 0, #2b0d0c 65%, #170606 100%);
    box-shadow: inset 0 0 0 10px #8e1b16, inset 0 0 0 14px #f4c542, inset 0 0 140px rgba(255, 170, 50, .22);
}
#popcorn-stage::before { /* khung kính */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 58px, rgba(255, 205, 100, .05) 58px 60px);
}
#marquee {
    position: absolute; left: 14px; right: 14px; top: 14px; height: 26px; z-index: 7100;
    background: repeating-linear-gradient(90deg, #c1121f 0 28px, #fff3d6 28px 56px);
    border-radius: 0 0 14px 14px; box-shadow: 0 4px 10px #0009;
}
#items { position: absolute; inset: 0; }

/* Chảo nung + lửa */
#kettle {
    position: absolute; left: 3.5%; right: 3.5%; bottom: 5%; height: 27%; z-index: 10;
    border-radius: 18px 18px 40px 40px;
    background: linear-gradient(#7a7e88, #30333b 38%, #14161a);
    box-shadow: inset 0 6px 12px rgba(255, 255, 255, .18),
        0 0 calc(var(--heat) * 80px) calc(var(--heat) * 14px) rgba(255, 110, 20, calc(var(--heat) * .75));
}
#kettle::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(ellipse at 50% 120%, #ff6a1a, transparent 70%);
    opacity: calc(var(--heat) * .9);
}
#flames {
    position: absolute; left: 7%; right: 7%; bottom: 0; height: 6.5%; z-index: 5;
    display: flex; justify-content: space-around; align-items: flex-end;
    opacity: calc(.25 + var(--heat) * .75);
}
#flames i {
    width: 5%; height: calc(35% + var(--heat) * 65%);
    background: linear-gradient(#ffe066, #ff5a1f 65%, transparent);
    border-radius: 50% 50% 20% 20% / 80% 80% 20% 20%;
    animation: flick .22s ease-in-out infinite alternate;
}
#flames i:nth-child(odd) { animation-delay: -.11s; }
#flames i:nth-child(3n) { animation-duration: .3s; }
@keyframes flick { from { transform: scaleY(.8) skewX(-6deg); } to { transform: scaleY(1.15) skewX(6deg); } }

/* ===== Hạt bắp ===== */
.kernel { /* khung chứa: đổ bóng / phát sáng; hình dạng nằm ở .k-body */
    position: absolute; z-index: 50; transform: translate(-50%, -50%);
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .55)); animation: kshake .14s linear infinite;
}
.k-body { /* hình hạt bắp thật: vai rộng, thon dần xuống đáy (clip-path sinh từ JS) */
    position: absolute; inset: 0; clip-path: var(--kclip);
    background:
        radial-gradient(ellipse 24% 14% at 28% 14%, rgba(255, 255, 255, .8) 0, transparent 100%),             /* bóng sáng */
        radial-gradient(ellipse 6.5% 8.5% at 37% 40%, #fff 0 38%, transparent 44%),                           /* ánh mắt */
        radial-gradient(ellipse 6.5% 8.5% at 67% 40%, #fff 0 38%, transparent 44%),
        radial-gradient(ellipse 8% 10% at 38% 42%, #2b1608 96%, transparent 100%),                            /* mắt */
        radial-gradient(ellipse 8% 10% at 66% 42%, #2b1608 96%, transparent 100%),
        radial-gradient(ellipse 9% 6% at 25% 55%, rgba(255, 105, 135, .75) 80%, transparent 100%),            /* má hồng */
        radial-gradient(ellipse 9% 6% at 79% 55%, rgba(255, 105, 135, .75) 80%, transparent 100%),
        radial-gradient(ellipse 6% 3.5% at 46% 9%, rgba(120, 60, 0, .4) 0, transparent 100%),                 /* vết lõm đỉnh */
        radial-gradient(ellipse 30% 34% at 50% 64%, rgba(255, 255, 215, .5) 0, transparent 100%),             /* vùng mầm sáng */
        linear-gradient(0deg, rgba(255, 250, 215, .85) 0, transparent 17%),                                   /* đáy nhạt */
        linear-gradient(200deg, color-mix(in srgb, var(--c) 70%, #ff8c00) 0, var(--c) 42%, color-mix(in srgb, var(--c) 60%, #fff) 100%);
    box-shadow: inset -4px -5px 8px rgba(0, 0, 0, .2), inset 4px 4px 7px rgba(255, 255, 255, .3);
}
.k-body::before { /* miệng cười */
    content: ""; position: absolute; left: 53%; top: 51%; width: 20%; height: 9%;
    transform: translateX(-50%); border-bottom: 2px solid #2b1608; border-radius: 0 0 60% 60%;
}
@keyframes kshake {
    0%   { transform: translate(-50%, -50%) translate(calc(var(--heat) * -2.5px), 0) rotate(calc(var(--heat) * -6deg)); }
    50%  { transform: translate(-50%, -50%) translate(0, calc(var(--heat) * -3px)); }
    100% { transform: translate(-50%, -50%) translate(calc(var(--heat) * 2.5px), 0) rotate(calc(var(--heat) * 6deg)); }
}
.kernel.warming { animation-duration: .06s; filter: brightness(1.35) saturate(1.5) drop-shadow(0 0 6px #ff7a1a) drop-shadow(0 0 14px rgba(255, 61, 0, .75)); }
.kernel.warming { z-index: 60; }
.kernel.warming .k-name { z-index: 2; padding: 1px 7px; border-radius: 99px; background: rgba(60, 12, 0, .85); color: #fff6b0; font-size: 12px; font-weight: 800;
    text-shadow: 0 0 6px #ffb347, 0 0 12px #ff7a1a; box-shadow: 0 0 10px 2px rgba(255, 160, 40, .8); animation: namePulse .3s ease-in-out infinite alternate; }
@keyframes namePulse { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.18); } }
.kernel.warming .k-body::before { top: 50%; width: 14%; height: 14%; border: 2px solid #2b1608; border-radius: 50%; } /* hoảng: miệng chữ O */
.k-name { position: absolute; top: 108%; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 10px 'Nunito', sans-serif; color: #ffe9b8; text-shadow: 0 1px 2px #000; }

/* ===== Bắp đã nổ ===== */
.pc { position: absolute; left: 0; top: 0; pointer-events: none; }
.pc-glow { position: absolute; inset: -35%; border-radius: 50%; background: radial-gradient(circle, hsl(var(--h) 100% 70% / .8), transparent 65%); }
.pc-body { position: absolute; inset: 0; filter: brightness(var(--b)) drop-shadow(0 4px 4px rgba(0, 0, 0, .45)); }
.pc-body i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0, hsl(var(--h) 85% 88%) 45%, hsl(var(--h) 75% 66%) 100%); }
.pc-seed { position: absolute; left: 42%; bottom: -3%; width: 16%; height: 20%; border-radius: 50% 50% 46% 46%; background: hsl(var(--h) 80% 48%); }
.pc-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; color: #3b1a0a; font-weight: 800; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 5px #fff; }
.pc-badge { position: absolute; left: -4%; top: -4%; min-width: 1.6em; padding: 0 .3em; text-align: center; border-radius: 99px; background: #ffd23f; color: #3b0d0a; font: 800 12px 'Nunito', sans-serif; text-decoration: none; }
.pc-badge:empty { display: none; }
.pc.in-top::after { content: ""; position: absolute; inset: -7%; border: 3px dashed #ffd23f; border-radius: 50%; animation: spin 6s linear infinite; }
.pc.is-leader::before { content: "👑"; position: absolute; left: 50%; top: -32%; transform: translateX(-50%); font-size: calc(var(--sz) * .36); z-index: 2; animation: bob .7s ease-in-out infinite alternate; }
.finale .pc:not(.in-top) { opacity: .4; transition: opacity 1s; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { to { top: -38%; } }

/* Hiệu ứng nổ */
.spark { position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; z-index: 6000; }
.pop-ring { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; border: 3px solid; z-index: 5900; }
.pop-score { position: absolute; left: 0; top: 0; z-index: 6500; font: 1.1rem 'Fredoka One', cursive; color: #ffe9a8; text-shadow: 0 2px 4px #000; transform: translate(-50%, 0); white-space: nowrap; }
#pop-flash { position: absolute; inset: 0; background: #fff3c4; opacity: 0; z-index: 7200; pointer-events: none; }
#lead-toast { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); padding: 8px 20px; border-radius: 99px; background: #ffd23f; color: #3b0d0a; font: 1.05rem 'Fredoka One', cursive; opacity: 0; z-index: 7500; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }

/* HUD */
#hud { position: absolute; left: 24px; top: 52px; width: 210px; z-index: 7000; padding: 10px 12px; border-radius: 12px; background: rgba(20, 6, 6, .72); border: 1px solid rgba(244, 197, 66, .4); color: #ffe9b8; font-size: 13px; }
#remain-box { font-weight: 800; margin-bottom: 6px; color: #ffd23f; }
.lb-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.lb-row i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.lb-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row b { color: #ffd23f; }
#heat-meter { position: absolute; right: 28px; top: 56px; width: 24px; height: 40%; z-index: 7000; border-radius: 12px; background: rgba(0, 0, 0, .55); border: 2px solid #f4c542; overflow: hidden; }
#heat-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(#ffd23f, #ff5a1f, #c1121f); }
#heat-temp { position: absolute; right: 14px; top: calc(56px + 40% + 6px); z-index: 7000; width: 56px; text-align: center; color: #ffd23f; font: 1rem 'Fredoka One', cursive; }
#btn-floating-start { z-index: 9500; }

@media (max-width: 700px) { #hud { width: 140px; font-size: 11px; left: 18px; } }
@media (prefers-reduced-motion: reduce) { .kernel, #flames i, .pc.in-top::after, .pc.is-leader::before { animation: none; } }