body {
        margin: 0;
        overflow: hidden;
        background: linear-gradient(180deg, #0a0b1e 0%, #161823 45%, #050508 100%);
        font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
        color: #e2e8f0;
        position: relative;
        min-height: 100vh;
    }

    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image:
            radial-gradient(1px 1px at 25px 35px, #ffffff 100%, transparent),
            radial-gradient(1.5px 1.5px at 120px 50px, #ef4444 100%, transparent),
            radial-gradient(1px 1px at 160px 140px, #ffffff 100%, transparent);
        background-size: 300px 300px;
        opacity: 0.3;
        z-index: -1;
        pointer-events: none;
        animation: starsMove 100s linear infinite;
    }

    @keyframes starsMove {
        from {
            background-position: 0 0;
        }

        to {
            background-position: 300px 600px;
        }
    }

    /* UI LAYER - GLASSMORPHISM */
    #ui-layer {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        padding: 24px;
        z-index: 100;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    /* BARRA DE TEMPO MODERNA */
    #time-container {
        width: 100%;
        max-width: 500px;
        height: 6px;
        background: rgba(255, 255, 255, 0.1);
        margin: 0 auto;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        backdrop-filter: blur(4px);
    }

    #time-bar {
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #f59e0b, #ef4444);
        transition: width 0.1s linear;
        box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
    }

    #time-text {
        position: absolute;
        top: 12px;
        width: 100%;
        text-align: center;
        color: #f8fafc;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    /* PAINEL DE ESTATÍSTICAS E CONTROLE */
    .stats-box {
        position: absolute;
        top: 70px;
        left: 24px;
        background: rgba(15, 23, 42, 0.85);
        backdrop-filter: blur(12px);
        padding: 18px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
        min-width: 220px;
        max-width: 15vw;
    }

    .stat-item {
        margin-bottom: 10px;
    }

    .stat-label {
        font-size: 11px;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 700;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .game-title {
        font-size: 32px;
        font-weight: 900;
        background: linear-gradient(135deg, #fff, #f59e0b);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 2px;
        filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.3));
    }

    .level-indicator {
        font-size: 11px;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 700;
    }

    /* BOTÕES E BOTÕES DE BLOCO */
    #release-btn {
        pointer-events: auto;
        padding: 16px;
        width: 100%;
        border-radius: 16px;
        font-weight: 800;
        background: linear-gradient(135deg, #ffd700, #f59e0b);
        color: #0f172a;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border: none;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        margin-top: 15px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
        display: inline-flex !important;
    }

    #release-btn:disabled {
        background: #334155 !important;
        color: #64748b !important;
        cursor: not-allowed;
        filter: brightness(0.8);
        transform: none !important;
        box-shadow: none !important;
        display: inline-flex;
    }

    #release-btn:hover {
        transform: translateY(-2px);
        filter: brightness(1.1);
        display: inline-flex;
    }

    #release-btn:active {
        transform: translateY(2px);
        display: inline-flex;
    }

    #block-selection {
        pointer-events: auto;
        margin-top: 15px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .stat-label.highlight-gold {
        margin-bottom: 2px;
        color: #f59e0b;
    }

    .guidance-text {
        font-size: 10px;
        color: #94a3b8;
        margin-bottom: 12px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .dot-indicator {
        display: inline-block;
        width: 6px;
        height: 6px;
        background: #fff;
        border-radius: 50%;
    }

    .guidance-objective {
        font-size: 1rem;
    }

    #quick-restart {
        display: none;
        pointer-events: auto;
        background: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.4);
        color: #f87171;
        padding: 8px;
        border-radius: 8px;
        font-size: 10px;
        margin-top: 15px;
        width: 100%;
        cursor: pointer;
        transition: 0.3s;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    #quick-restart:hover {
        background: rgba(239, 68, 68, 0.2);
    }

    /* SELEÇÃO DE BLOCO (ESTILO BOTÃO) */
    .block-selection-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 20px;
        pointer-events: auto;
    }

    .block-option {
        background: rgba(15, 55, 151, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 14px;
        padding: 8px;
        display: flex;
        align-items: center;
        gap: 16px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    @keyframes blockPulse {
        0% {
            border-color: rgba(255, 255, 255, 0.15);
            box-shadow: 0 0 0 rgba(245, 158, 11, 0);
        }

        50% {
            border-color: rgba(245, 158, 11, 0.5);
            box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
            transform: scale(1.02);
        }

        100% {
            border-color: rgba(255, 255, 255, 0.15);
            box-shadow: 0 0 0 rgba(245, 158, 11, 0);
        }
    }

    .block-option.pulse {
        animation: blockPulse 2s infinite;
    }

    .block-option:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(245, 158, 11, 0.4);
        transform: translateX(4px);
    }

    .block-preview {
        width: 54px;
        height: 54px;
        background: rgba(30, 41, 59, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .shape {
        background: #cbd5e1;
        border: 1.5px solid #64748b;
        border-radius: 2px;
    }

    .preview-pilar {
        width: 32px;
        height: 12px;
    }

    .preview-pilar-pequeno {
        width: 16px;
        height: 6px;
    }

    .preview-quadrado {
        width: 20px;
        height: 20px;
    }

    .block-info {
        display: flex;
        flex-direction: column;
    }

    .block-name {
        font-weight: 700;
        font-size: 14px;
        color: #f8fafc;
    }

    .block-desc {
        font-size: 10px;
        color: #64748b;
    }

    /* GAME OVER PRÊMIUM */
    #game-over {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(20px);
        border: 2px solid #f59e0b;
        padding: 48px;
        text-align: center;
        color: white;
        border-radius: 32px;
        pointer-events: auto;
        box-shadow: 0 0 100px rgba(0, 0, 0, 0.9), 0 0 40px rgba(245, 158, 11, 0.2);
        z-index: 1000;
    }

    #game-over h1 {
        font-size: 42px;
        font-weight: 900;
        margin: 0 0 16px;
        background: linear-gradient(135deg, #fff, #f59e0b);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: #ffd700;
        margin-top: 0;
    }

    #game-over h2 {
        font-size: 48px;
        color: #ffd700;
        margin: 15px 0;
    }

    #bonus-info {
        font-size: 14px;
        color: #d3d3d3;
        margin-bottom: 20px;
    }

    .game-over-btn {
        background: #f59e0b;
        color: #0f172a;
        padding: 16px 40px;
        font-size: 18px;
        font-weight: 800;
        border-radius: 16px;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: uppercase;
        margin-top: 32px;
    }

    .game-over-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(245, 158, 11, 0.4);
    }

    canvas {
        display: block;
        background: transparent;
        filter: contrast(1.1);
    }

    .lancar {
        font-size: 16px;
        height: auto;
        padding-top: 20px;
        padding-bottom: 20px;
        vertical-align: middle; 
        display: inline-flex;
        max-height: 3.5rem;
    }



    /* MODULO homeimg */
    .homeimg {
        position: absolute;
        left: 0.4vh;
        top: 1.1vh;
        z-index: 333;
        width: auto;
        height: 5vh;
        display: flex;
        opacity: 0.4;
        transition: all 0.2s ease-in-out;
    }

    .homeimg img {
        display: block;
        object-fit: contain;
        height: 100%;
    }

    .homeimg:hover {
        height: 6vh;
        cursor: pointer;
        opacity: 1;
    }

    /*-----------------------------------------------------------------------*/