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

:root {
            --primary: #8a2be2;
            --secondary: #ff0055;
            --accent: #00f2ff;
            --dark: #090210;
            --panel: #150525;
            
            
            --rank-bronze: #cd7f32;
            --rank-silver: #c0c0c0;
            --rank-gold: #ffd700;
            --rank-platinum: #00ced1;
            --rank-diamond: #b9f2ff;
            
            --font-display: 'Black Ops One', cursive;
            --font-ui: 'Orbitron', sans-serif;
            --font-body: 'Rajdhani', sans-serif;
        }
.jg-blockboom #app-frame {
            position: relative; width: 100%; height: 100%;
            background: var(--dark);
            display: flex; flex-direction: column;
            overflow: hidden;
        }
.jg-blockboom .app-header {
            height: 3.75rem; background: rgba(21, 5, 37, 0.95);
            border-bottom: 0.125rem solid #2a0e4a;
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 1.25rem; z-index: 100;
        }
.jg-blockboom .logo-text {
            font-family: var(--font-display); font-size: 1.5rem;
            background: linear-gradient(to right, #fff, var(--accent));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            text-shadow: 0 0 0.625rem rgba(0, 242, 255, 0.3);
            cursor: pointer; transition: transform 0.2s;
        }
.jg-blockboom .logo-text:active { transform: scale(0.95); }
.jg-blockboom .app-footer {
            height: 3.125rem; background: #05010a;
            border-top: 1px solid #333;
            display: flex; align-items: center; justify-content: center;
            gap: 2.5rem; color: #666; font-size: 0.8rem; z-index: 100;
        }
.jg-blockboom .nav-btn {
            font-size: 1.4rem; color: #555; transition: 0.3s; cursor: pointer;
            position: relative;
        }
.jg-blockboom .nav-btn:hover { color: #aaa; }
.jg-blockboom .nav-btn.active { color: var(--accent); transform: translateY(-3px); text-shadow: 0 5px 15px rgba(0,242,255,0.4); }
.jg-blockboom .nav-btn.active::after {
            content:''; position: absolute; bottom: -0.3125rem; left: 50%; transform: translateX(-50%);
            width: 0.25rem; height: 0.25rem; background: var(--accent); border-radius: 50%;
        }
.jg-blockboom .view-container { flex: 1; position: relative; overflow: hidden; }
.jg-blockboom .view {
            position: absolute; inset: 0;
            background: var(--dark);
            transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.3s;
            display: flex; flex-direction: column;
            opacity: 0; pointer-events: none; transform: scale(0.95);
        }
.jg-blockboom .view.active { opacity: 1; pointer-events: auto; transform: scale(1); z-index: 10; }
.jg-blockboom #view-settings {
            background: #0c0414;
            padding: 1.875rem 1.25rem;
            overflow-y: auto;
        }
.jg-blockboom .settings-group {
            background: rgba(255,255,255,0.03);
            border: 1px solid #333; border-radius: 0.75rem;
            padding: 1.25rem; margin-bottom: 1.25rem;
        }
.jg-blockboom .settings-label {
            font-family: var(--font-ui); color: #ccc; font-size: 0.9rem; margin-bottom: 0.625rem; display: block;
        }
.jg-blockboom input[type=range] {
            -webkit-appearance: none; width: 100%; background: transparent;
        }
.jg-blockboom input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none; height: 1.25rem; width: 1.25rem; border-radius: 50%;
            background: var(--accent); cursor: pointer; margin-top: -0.5rem;
            box-shadow: 0 0 0.625rem var(--accent);
        }
.jg-blockboom input[type=range]::-webkit-slider-runnable-track {
            width: 100%; height: 0.25rem; cursor: pointer;
            background: #333; border-radius: 0.125rem;
        }
.jg-blockboom .toggle-switch {
            position: relative; display: inline-block; width: 3.125rem; height: 1.625rem; float: right;
        }
.jg-blockboom .toggle-switch input { opacity: 0; width: 0; height: 0; }
.jg-blockboom .slider {
            position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
            background-color: #333; transition: .4s; border-radius: 2.125rem;
        }
.jg-blockboom .slider:before {
            position: absolute; content: ""; height: 1.25rem; width: 1.25rem; left: 0.1875rem; bottom: 0.1875rem;
            background-color: white; transition: .4s; border-radius: 50%;
        }
.jg-blockboom input:checked + .slider { background-color: var(--primary); }
.jg-blockboom input:checked + .slider:before { transform: translateX(1.5rem); }
.jg-blockboom .btn-danger-zone {
            width: 100%; padding: 0.9375rem; border: 1px solid var(--secondary);
            background: rgba(255, 0, 85, 0.1); color: var(--secondary);
            font-family: var(--font-ui); text-transform: uppercase;
            border-radius: 0.5rem; transition: 0.2s;
        }
.jg-blockboom .btn-danger-zone:active { background: var(--secondary); color: #fff; }
.jg-blockboom #view-home {
            background: radial-gradient(circle at center, #2a0e35 0%, #000 100%);
            align-items: center; justify-content: center; text-align: center;
        }
.jg-blockboom .big-logo {
            font-family: var(--font-display); font-size: clamp(2.5rem, 12vw, 4rem); line-height: 0.9;
            color: #fff; text-shadow: 0.25rem 0.25rem 0 var(--primary);
            margin-bottom: 1.25rem; animation: floatLogo 3s ease-in-out infinite;
        }
@keyframes floatLogo{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.jg-blockboom .play-btn-pulse {
            width: 5.625rem; height: 5.625rem; border-radius: 50%;
            background: var(--accent); border: none; font-size: 2.5rem; color: #000;
            display: grid; place-items: center; cursor: pointer;
            box-shadow: 0 0 0 0 rgba(0, 242, 255, 0.7);
            animation: pulseWhite 1.5s infinite;
        }
@keyframes pulseWhite{ 0% { box-shadow: 0 0 0 0 rgba(0, 242, 255, 0.7); } 70% { box-shadow: 0 0 0 1.25rem rgba(0, 242, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 242, 255, 0); } }
.jg-blockboom #game-stage {
            flex: 1; position: relative; width: 100%; height: 100%; cursor: pointer;
            background: radial-gradient(circle at bottom, #1a0b2e, #000);
        }
.jg-blockboom .hud-bar {
            position: absolute; top: 0.625rem; left: 0.625rem; right: 0.625rem;
            display: flex; justify-content: space-between; z-index: 20; pointer-events: none;
        }
.jg-blockboom .hud-pill {
            background: rgba(0,0,0,0.7); border: 1px solid #444; color: #fff;
            font-family: var(--font-ui); padding: 0.3125rem 0.9375rem; border-radius: 1.25rem;
            font-size: 0.9rem; backdrop-filter: blur(4px);
        }
.jg-blockboom .hud-score { color: var(--accent); border-color: var(--accent); }
.jg-blockboom .modal-overlay {
            position: absolute; inset: 0; background: rgba(5, 1, 10, 0.95);
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            z-index: 50; text-align: center;
        }
.jg-blockboom .modal-overlay.hidden { display: none !important; }
.jg-blockboom .rank-display-lg {
            font-size: clamp(2.5rem, 12vw, 4rem); font-family: var(--font-display); margin: 1.25rem 0; text-shadow: 0 0 1.875rem currentColor;
        }
.jg-blockboom .btn-action {
            background: transparent; border: 0.125rem solid; padding: 0.75rem 1.875rem;
            font-family: var(--font-ui); font-size: 1.1rem; border-radius: 3.125rem;
            text-transform: uppercase; cursor: pointer; margin-top: 0.625rem;
            transition: 0.2s; color: #fff;
        }
.jg-blockboom .btn-action:active { transform: scale(0.95); }
@keyframes bounce{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }