/* Bunker Defender — CSS escopado do game (cores próprias do game preservadas).
   Layout de tela cheia via modo stage. */
.jg-bunker{position:absolute;inset:0;width:100%;height:100%;}
.jg-bunker canvas{background:transparent;box-shadow:none;border-radius:0;}

.jg-bunker #gameCanvas {
            position: absolute; top: 0; left: 0;
            width: 100%; height: 100%; z-index: 1;
            display: block;
        }
.jg-bunker #ui-layer {
            position: absolute; inset: 0; z-index: 10;
            pointer-events: none; 
            display: flex; flex-direction: column; justify-content: space-between;
            padding: 1rem;
        }
.jg-bunker .pointer-auto { pointer-events: auto; }
.jg-bunker .ui-panel {
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
            border: 0.125rem solid #334155; border-radius: 1rem; color: white;
            box-shadow: 0 0.625rem 1.5625rem rgba(0,0,0,0.5);
        }
.jg-bunker .btn-game {
            transition: transform 0.1s, filter 0.1s;
            cursor: pointer;
        }
.jg-bunker .btn-game:active:not(:disabled) { transform: scale(0.95); }
.jg-bunker .btn-game:disabled { filter: grayscale(100%); opacity: 0.5; cursor: not-allowed; }
@keyframes slideUp{
            from { transform: translateY(120%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
.jg-bunker .animate-slide-up { animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* ==========================================================================
   UTILITÁRIOS TAILWIND usados pelo Bunker (sem carregar a biblioteca)
   Escopados em .jg-bunker para não vazar para outros games.
   ========================================================================== */
/* Display — CRÍTICO: hidden/flex controlam a visibilidade das telas */
.jg-bunker .hidden { display: none !important; }
.jg-bunker .flex { display: flex; }
.jg-bunker .block { display: block; }

/* Flexbox */
.jg-bunker .flex-col { flex-direction: column; }
.jg-bunker .justify-center { justify-content: center; }
.jg-bunker .justify-between { justify-content: space-between; }
.jg-bunker .items-center { align-items: center; }
.jg-bunker .items-start { align-items: flex-start; }
.jg-bunker .gap-1 { gap: 0.25rem; }
.jg-bunker .gap-2 { gap: 0.5rem; }
.jg-bunker .gap-3 { gap: 1rem; }
.jg-bunker .gap-4 { gap: 1.5rem; }

/* Espaçamentos */
.jg-bunker .p-1 { padding: 0.25rem; }
.jg-bunker .p-3 { padding: 1rem; }
.jg-bunker .p-4 { padding: 1.5rem; }
.jg-bunker .p-8 { padding: 2rem; }
.jg-bunker .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.jg-bunker .px-3 { padding-left: 1rem; padding-right: 1rem; }
.jg-bunker .px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.jg-bunker .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.jg-bunker .py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.jg-bunker .pb-2 { padding-bottom: 0.5rem; }
.jg-bunker .mb-2 { margin-bottom: 0.5rem; }
.jg-bunker .mb-4 { margin-bottom: 1.5rem; }
.jg-bunker .mb-6 { margin-bottom: 1.5rem; }
.jg-bunker .mb-8 { margin-bottom: 2rem; }

/* Tipografia */
.jg-bunker .font-bold { font-weight: 700; }
.jg-bunker .font-black { font-weight: 900; }
.jg-bunker .text-sm { font-size: 0.875rem; }
.jg-bunker .text-base { font-size: 1rem; }
.jg-bunker .text-lg { font-size: 1.125rem; }
.jg-bunker .text-3xl { font-size: 1.875rem; }

/* Dimensões */
.jg-bunker .w-full { width: 100%; }
.jg-bunker .w-4 { width: 1rem; }
.jg-bunker .w-5 { width: 1.25rem; }
.jg-bunker .w-8 { width: 2rem; }
.jg-bunker .w-16 { width: 4rem; }
.jg-bunker .w-20 { width: 5rem; }
.jg-bunker .h-4 { height: 1rem; }
.jg-bunker .h-5 { height: 1.25rem; }
.jg-bunker .h-6 { height: 1.5rem; }
.jg-bunker .h-8 { height: 2rem; }
.jg-bunker .h-16 { height: 4rem; }
.jg-bunker .h-20 { height: 5rem; }
.jg-bunker .w-px { width: 0.0625rem; }

/* Bordas arredondadas */
.jg-bunker .rounded-xl { border-radius: 0.75rem; }
.jg-bunker .rounded-2xl { border-radius: 1rem; }
.jg-bunker .rounded-full { border-radius: 50rem; }

/* Sombras */
.jg-bunker .shadow-lg { box-shadow: 0 0.625rem 1.5625rem rgba(0,0,0,0.5); }
.jg-bunker .shadow-xl { box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,0.6); }

/* Bordas inferiores grossas (borda decorativa dos botões) */
.jg-bunker .border-b-4 { border-bottom-width: 0.25rem; border-bottom-style: solid; }

.jg-bunker .flex-1 { flex: 1 1 0%; }
.jg-bunker .fixed { position: fixed; }
.jg-bunker .absolute { position: absolute; }
.jg-bunker .inset-0 { inset: 0; }
.jg-bunker .z-50 { z-index: 50; }
.jg-bunker .max-w-sm { max-width: 24rem; }
.jg-bunker .max-w-md { max-width: 28rem; }
.jg-bunker .text-xs { font-size: 0.75rem; }
.jg-bunker .text-\[0.625rem\] { font-size: 0.625rem; }
.jg-bunker .tracking-wider { letter-spacing: 0.05em; }
.jg-bunker .uppercase { text-transform: uppercase; }
.jg-bunker .pointer-events-none { pointer-events: none; }
.jg-bunker .pointer-events-auto, .jg-bunker .pointer-auto { pointer-events: auto; }

/* SVG fill/stroke */
.jg-bunker .fill-current { fill: currentColor; }
.jg-bunker .fill-white { fill: #fff; }
.jg-bunker .fill-none { fill: none; }
.jg-bunker .fill-rose-500 { fill: #f43f5e; }
.jg-bunker .stroke-current { stroke: currentColor; }
.jg-bunker .stroke-2 { stroke-width: 2; }

/* Backgrounds com opacidade (Tailwind slash syntax) */
.jg-bunker .bg-slate-900\/95 { background-color: rgba(15, 23, 42, 0.95); }
.jg-bunker .bg-rose-950\/95 { background-color: rgba(76, 5, 25, 0.95); }

/* Cores de fundo sólidas */
.jg-bunker .bg-blue-600 { background-color: #2563eb; }
.jg-bunker .bg-sky-600 { background-color: #0284c7; }
.jg-bunker .bg-rose-600 { background-color: #e11d48; }
.jg-bunker .bg-amber-600 { background-color: #d97706; }
.jg-bunker .bg-emerald-500 { background-color: #10b981; }
.jg-bunker .bg-emerald-600 { background-color: #059669; }
.jg-bunker .bg-white { background-color: #fff; }

/* Hover de fundo */
.jg-bunker .hover\:bg-blue-500:hover { background-color: #3b82f6; }
.jg-bunker .hover\:bg-emerald-500:hover { background-color: #10b981; }
.jg-bunker .hover\:bg-rose-500:hover { background-color: #f43f5e; }
.jg-bunker .hover\:bg-amber-500:hover { background-color: #f59e0b; }
.jg-bunker .hover\:text-white:hover { color: #fff; }

/* Cores de texto */
.jg-bunker .text-emerald-200 { color: #a7f3d0; }
.jg-bunker .text-emerald-300 { color: #6ee7b7; }
.jg-bunker .text-emerald-400 { color: #34d399; }
.jg-bunker .text-sky-200 { color: #bae6fd; }
.jg-bunker .text-sky-400 { color: #38bdf8; }
.jg-bunker .text-rose-200 { color: #fecdd3; }
.jg-bunker .text-rose-500 { color: #f43f5e; }
.jg-bunker .text-slate-300 { color: #cbd5e1; }
.jg-bunker .text-slate-400 { color: #94a3b8; }
.jg-bunker .text-slate-900 { color: #0f172a; }

/* Bordas coloridas (border-b-4 já existe no _util; aqui só as cores) */
.jg-bunker .border-slate-300 { border-color: #cbd5e1; }
.jg-bunker .border-slate-700 { border-color: #334155; }
.jg-bunker .border-emerald-700 { border-color: #047857; }
.jg-bunker .border-emerald-800 { border-color: #065f46; }
.jg-bunker .border-blue-800 { border-color: #1e40af; }
.jg-bunker .border-sky-800 { border-color: #075985; }
.jg-bunker .border-rose-500 { border-color: #f43f5e; }
.jg-bunker .border-rose-800 { border-color: #9f1239; }
.jg-bunker .border-amber-800 { border-color: #92400e; }
.jg-bunker .border-b { border-bottom-width: 1px; border-bottom-style: solid; }