<style>
        /* Reset e Layout Base Compactados */
        *{box-sizing:border-box;margin:0;padding:0}
        body,html{width:100%;height:100%;background:#000;font-family:sans-serif;overflow:hidden;user-select:none;display:flex;flex-direction:column}
        .container{display:flex;flex:1;width:100%;height:100dvh}
        button{touch-action:manipulation;cursor:pointer}
        
        /* Barras Laterais */
        .col-left,.col-right{width:140px;min-width:140px;display:flex;flex-direction:column;padding:4px;background:#000;gap:6px}
        
        /* ID e Saldo (Responsividade com Clamp) */
        .lbl-id,.saldo-display-sidebar{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 2px;border-radius:6px;text-align:center;font-weight:900;font-size:clamp(0.5rem, 1.2vw, 0.65rem);line-height:1.2}
        .lbl-id{color:#ffea00;background:#1a1a1a;border:1px solid #333;margin-bottom:2px}
        .saldo-display-sidebar{background:#111;border:1px solid #ffd700;color:#ffd700;margin:2px 0}
        
        /* Área do Jogo */
        .game-area{flex:1;min-height:0;position:relative;background:#000;display:flex;justify-content:center;align-items:center;overflow:hidden}
        canvas{width:100%;height:100%;display:block}
        #msg-bloqueio{position:absolute;top:20px;right:20px;background:rgba(20,0,0,.9);color:#ff4d4d;font-size:clamp(0.9rem, 2vw, 1.1rem);text-align:center;padding:15px;border:1px solid #ff4d4d;border-radius:8px;box-shadow:0 4px 10px rgba(255,0,0,.3);z-index:10;display:none;pointer-events:none}
        
        /* Botões */
        .btn-game{width:100%;flex:1;min-height:45px;background:linear-gradient(180deg,#e6e6e6 0%,#a6a6a6 50%,#737373 100%);border:2px solid #fff;border-radius:8px;color:#000;font-size:clamp(0.7rem, 1.5vw, 0.85rem);font-weight:900;transition:.2s;box-shadow:inset 0 2px 5px rgba(255,255,255,.8),0 2px 5px rgba(0,0,0,.8);text-transform:uppercase}
        .btn-game:active{transform:scale(.96);box-shadow:inset 0 4px 8px rgba(0,0,0,.6)}
        .btn-sair{background:linear-gradient(180deg,#d43ed6 0%,#971899 50%,#e4afa8 100%);color:#fff;border-color:#ffaaaa;min-height:55px}
        .btn-notas{background:linear-gradient(180deg,#2bcf2e 0%,#0e8010 50%,#073d11 100%);color:#fff;border-color:#ffaaaa;min-height:55px}
        
        /* Modais Base */
        .modal,.modal-pix,.modal-notas{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);justify-content:center;align-items:center;z-index:2000;padding:10px}
        .modal.active,.modal-pix.active,.modal-notas.active{display:flex}
        #erro{display:none;position:fixed;inset:0;background:#900;color:#fff;z-index:9999;justify-content:center;align-items:center}
        
        /* Modal Notas */
        .modal-notas-box{background:#1f2833;padding:20px;border-radius:12px;width:100%;max-width:800px;border:1px solid #2d3748;display:flex;flex-direction:column;gap:15px}
        .header-notas{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
        .saldo-carteira-texto{background:#ffcc00;color:#250fe1;font-weight:900;padding:8px 12px;border-radius:6px;font-size:clamp(0.8rem, 2vw, 10px);border:1px solid #05840c;flex:1;text-align:center}
        .btn-fechar-notas{background:0 0;border:none;font-size:14px;font-weight:700;color:#a0aec0;display:flex;align-items:center;gap:5px}
        .btn-fechar-notas span{background:#2d3748;color:#9511bd;padding:5px 10px;border-radius:6px}
        
        /* Grid das Notas */
        .creditos-grid-modal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
        .note-item{background:#0b0c10;aspect-ratio:2/1;height:auto;border-radius:8px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden;border:2px solid #2d3748;transition:.3s;padding:0}
        .note-item.disponivel{border-color:#27ae60;cursor:pointer}
        .note-item.disponivel:hover{transform:scale(1.03);border-color:#0f6;box-shadow:0 4px 10px rgba(0,255,102,.2)}
        .note-item img{width:100%;height:100%;object-fit:cover;display:block}
        .nota-erro-txt{color:#0f6;font-size:clamp(1rem, 3vw, 2rem);font-weight:900;z-index:2}
        .nota-overlay{position:absolute;inset:0;background:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;color:#ff4757;font-size:clamp(10px, 2vw, 12px);font-weight:900;text-align:center;line-height:1.2;z-index:1}
        
        .notas-actions{display:flex;gap:10px;flex-wrap:wrap}
        .btn-deposito,.btn-saque{flex:1;padding:12px;border:none;border-radius:6px;font-weight:900;font-size:clamp(12px, 2vw, 14px);text-transform:uppercase;transition:.2s;color:#fff}
        .btn-deposito{background:#27ae60}.btn-deposito:hover{background:#219653}
        .btn-saque{background:#007bff}.btn-saque:hover{background:#0056b3}
        
        /* Modal PIX */
        .modal-content-pix{background:#1f2833;padding:25px;border-radius:12px;width:100%;max-width:400px;border:1px solid #2d3748;text-align:center}
        .modal-content-pix h3{color:#0f6;margin:0 0 10px;font-size:1.3rem}
        .modal-content-pix p{color:#a0aec0;font-size:.9rem;margin-bottom:15px}
        .modal-content-pix input{width:100%;padding:12px;background:#0b0c10;border:1px solid #2d3748;color:#fff;border-radius:6px;margin:10px 0;font-size:1rem}
        .modal-content-pix input:focus{outline:0;border-color:#0f6}
        .modal-content-pix button{width:100%;padding:12px;border:none;border-radius:6px;font-weight:900;margin:5px 0;font-size:1rem;transition:.2s}
        .btn-confirm{background:#0f6;color:#000}.btn-confirm:hover{background:#0c5}
        .btn-cancel{background:#2d3748;color:#fff}.btn-cancel:hover{background:#40556b}
        .btn-copiar{margin-top:5px;width:auto;padding:8px 20px}
        .pix-option{display:flex;align-items:center;gap:10px;padding:12px;background:#0b0c10;border-radius:6px;margin:6px 0;border:1px solid #2d3748;cursor:pointer;text-align:left;transition:.2s}
        .pix-option.selected,.pix-option:hover{border-color:#0f6}
        .pix-option input[type=radio]{accent-color:#0f6;width:18px;height:18px}
        .pix-option label{cursor:pointer;flex:1;color:#e0e0e0;font-size:.9rem;font-weight:700}
        .pix-option .badge{background:#0f6;color:#000;padding:2px 8px;border-radius:4px;font-size:.65rem;font-weight:900}
        .pix-option .badge.other{background:#2d3748;color:#a0aec0}
        .lbl-chave{text-align:left;color:#a0aec0;font-size:.85rem;margin:10px 0 5px;font-weight:700}
        #qr-recarga-container,#nova-chave-pix{display:none}
        .qr-container{margin:15px 0;flex-direction:column;align-items:center;gap:10px}
        .qr-container img{max-width:180px;border-radius:8px;border:2px solid #fff}
        .erro-msg{color:#ff4757;font-size:.9rem;margin:5px 0;min-height:20px;font-weight:700}
        
        /* ─── SISTEMA DE ROLES (ADMIN / JOGADOR) ─── */
        .admin-only { display: none !important; }
        body.mode-admin .admin-only { display: flex !important; }
        body.mode-admin .player-only { display: none !important; }

        /* Responsividade */
        @media(max-width:900px) and (orientation:landscape){
            .col-left,.col-right{width:110px;min-width:110px;padding:6px;gap:5px}
            .btn-game{min-height:38px}
            .btn-sair,.btn-notas{min-height:45px}
            .modal-notas-box{padding:15px}
        }
        @media(max-width:768px) and (orientation:portrait){
            .container{flex-direction:column}
            .game-area{order:1;flex:1;width:100%;min-height:40vh}
            .col-right,.col-left{order:2;width:100%;min-width:100%;flex-direction:row;flex-wrap:wrap;padding:8px;gap:6px;justify-content:center}
            .col-left{order:3;padding-bottom:15px}
            .lbl-id,.saldo-display-sidebar{width:100%;flex-direction:row;gap:3px;padding:3px}
            .btn-game{flex:1 1 calc(33.333% - 12px);min-height:38px}
            body.mode-admin .btn-game { flex:1 1 calc(25% - 12px); } /* Ajuste de largura para fluxo do admin */
            .creditos-grid-modal{gap:8px}
        }
        @media(max-width:480px) and (orientation:portrait){
            .btn-game{flex:1 1 calc(50% - 6px);font-size:clamp(0.6rem, 2.5vw, 0.75rem)}
            body.mode-admin .btn-game { flex:1 1 calc(50% - 6px); }
            .creditos-grid-modal{grid-template-columns:repeat(2,1fr)}
            .notas-actions{flex-direction:column}
        }
    </style>