:root {
        --primary: #00ffcc;
        --secondary: #ff0055;
        --line-color: #ffeb3b;
    }

    * { box-sizing: border-box; font-family: 'Kanit', sans-serif; user-select: none; }

    body, html {
        margin: 0; padding: 0;
        width: 100vw; height: 100vh;
        overflow: hidden;
        background-color: #000;
        color: white;
    }

    .video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
    #webcam { display: none; }
    #output_canvas { width: 100%; height: 100%; display: block; transform: scaleX(-1); }

    #game-ui {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        z-index: 10; display: flex; flex-direction: column;
        pointer-events: none; padding: 20px;
    }

    /* เส้นเป้าหมายกลางจอ */
    #target-line {
        position: absolute; left: 0; width: 100%; height: 6px;
        background-color: var(--line-color);
        box-shadow: 0 0 20px var(--line-color), 0 0 40px var(--line-color);
        transform: translateY(-50%); z-index: 105; pointer-events: none;
    }
    /* โซนกันสั่น (dead zone) แสดงให้เห็นว่าต้องข้ามพ้นแค่ไหนถึงนับ */
    #dead-zone {
        position: absolute; left: 0; width: 100%;
        background: rgba(255, 235, 59, 0.12);
        border-top: 1.5px dashed rgba(255,235,59,0.6);
        border-bottom: 1.5px dashed rgba(255,235,59,0.6);
        transform: translateY(-50%); z-index: 104; pointer-events: none;
    }
    .line-flash {
        background-color: var(--primary) !important;
        box-shadow: 0 0 40px var(--primary), 0 0 80px var(--primary) !important;
        height: 12px !important;
    }

    .top-bar {
        display: flex; justify-content: space-between; align-items: center;
        background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px);
        padding: 12px 24px; border-radius: 20px;
        border: 2px solid var(--primary);
        box-shadow: 0 0 20px rgba(0, 255, 204, 0.3); z-index: 10;
    }
    .timer-box { font-size: 28px; font-weight: 900; color: var(--secondary); text-shadow: 0 0 10px var(--secondary); }
    .score-box { font-size: 50px; font-weight: 900; color: var(--primary); text-shadow: 0 0 20px var(--primary); }

    /* ไฟบอกสถานะมือซ้าย/ขวา */
    .hand-status { display: flex; gap: 8px; }
    .pill {
        font-size: 16px; font-weight: 700; padding: 6px 12px; border-radius: 30px;
        border: 2px solid rgba(255,255,255,0.35); color: rgba(255,255,255,0.5);
        transition: all 0.12s;
    }
    .pill.up { background: var(--primary); color: #000; border-color: var(--primary); box-shadow: 0 0 15px var(--primary); }
    .pill.down { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.6); }
    .pill.lost { background: var(--secondary); color: #fff; border-color: var(--secondary); }

    #warning-banner {
        position: absolute; top: 130px; left: 50%; transform: translateX(-50%);
        background: rgba(255, 0, 85, 0.92); color: white;
        padding: 10px 26px; border-radius: 50px;
        font-size: 22px; font-weight: bold; box-shadow: 0 0 20px var(--secondary);
        animation: pulse-warning 1s infinite; z-index: 15; display: none; white-space: nowrap;
    }
    @keyframes pulse-warning {
        0%, 100% { transform: translateX(-50%) scale(1); }
        50% { transform: translateX(-50%) scale(1.05); }
    }

    .progress-container {
        width: 100%; height: 20px; background: rgba(255, 255, 255, 0.2);
        border-radius: 10px; margin-top: 16px; overflow: hidden;
        border: 2px solid white; z-index: 10;
    }
    .progress-bar {
        height: 100%; width: 100%;
        background: linear-gradient(90deg, var(--primary), var(--secondary));
        transition: width 0.1s linear;
    }

    .screen {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.68);
        backdrop-filter: blur(4px);
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        z-index: 100; pointer-events: auto; text-align: center; padding: 24px;
    }
    .hidden { display: none !important; }

    .title {
        font-size: 72px; font-weight: 900;
        background: -webkit-linear-gradient(#00ffcc, #ffeb3b);
        -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        margin-bottom: 10px; line-height: 1;
    }
    .subtitle { font-size: 24px; color: #fff; margin-bottom: 36px; line-height: 1.6; }

    button {
        font-size: 30px; padding: 20px 60px;
        background: var(--primary); color: #000; border: none; border-radius: 50px;
        cursor: pointer; font-weight: 900; text-transform: uppercase;
        box-shadow: 0 10px 0 #00b38f, 0 0 30px var(--primary); transition: all 0.1s;
    }
    button:active { transform: translateY(10px); box-shadow: 0 0 0 #00b38f, 0 0 10px var(--primary); }

    .score-pop { animation: pop 0.2s ease-out; }
    @keyframes pop {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.3); color: #fff; text-shadow: 0 0 30px #fff; }
    }

    @media (max-width: 480px) {
        .title { font-size: 48px; }
        .subtitle { font-size: 18px; }
        .score-box { font-size: 40px; }
        .timer-box { font-size: 22px; }
        button { font-size: 24px; padding: 16px 40px; }
    }