#smg-game-wrapper {
    --sm-bg: #0f172a;
    --sm-card: #1e293b;
    --sm-primary: #fbbf24;
    --sm-secondary: #38bdf8;
    --sm-text: #f8fafc;
    --sm-danger: #f43f5e;
    --sm-success: #22c55e;
    width: 100%;
    background-color: var(--sm-bg);
    display: flex;
    justify-content: center;
    padding: 40px 10px;
    font-family: 'Inter', sans-serif !important;
}

.smg-container {
    width: 100% !important;
    max-width: 450px !important;
    background: var(--sm-card) !important;
    border-radius: 24px !important;
    padding: 25px !important;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5) !important;
}

.smg-screen { display: flex !important; flex-direction: column !important; align-items: center !important; }
.smg-hidden { display: none !important; }
.smg-invisible { visibility: hidden !important; pointer-events: none !important; }

.smg-hud {
    width: 100% !important; display: flex !important; justify-content: space-between !important;
    margin-bottom: 25px !important; padding: 15px !important;
    background: #0f172a !important; border-radius: 15px !important;
}

.smg-stat { display: flex !important; flex-direction: column !important; }
.smg-label { font-size: 0.7rem !important; color: #94a3b8 !important; text-transform: uppercase; }
.smg-value { font-size: 1.4rem !important; color: var(--sm-primary) !important; font-weight: bold !important; }

.smg-target-grid {
    display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important; width: 100% !important; margin-top: 20px !important;
}

.smg-target-btn {
    background: #334155 !important; border: 2px solid #475569 !important;
    color: white !important; padding: 15px 5px !important;
    font-size: 1.2rem !important; border-radius: 12px !important; cursor: pointer;
}

.smg-active-target { font-size: 4rem !important; font-weight: 900 !important; color: var(--sm-primary) !important; margin: 10px 0 25px 0 !important; }

.smg-grid {
    display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important; width: 100% !important; margin-bottom: 25px !important;
}

.smg-tile {
    aspect-ratio: 1; background: #334155 !important; border-radius: 14px !important;
    display: flex !important; justify-content: center !important; align-items: center !important;
    font-size: 1.5rem !important; font-weight: 700 !important; cursor: pointer; color: white !important;
}

.smg-tile.selected { background: var(--sm-secondary) !important; }
.smg-tile.correct { background: var(--sm-success) !important; transform: scale(0.5); transition: 0.3s; }
.smg-tile.wrong { background: var(--sm-danger) !important; }

.smg-btn { padding: 18px !important; border-radius: 16px !important; border: none !important; font-weight: bold !important; cursor: pointer; width: 100% !important; }
.smg-btn-primary { background: var(--sm-primary) !important; color: #000 !important; }
.smg-btn-exit { background: transparent !important; border: 2px solid #475569 !important; color: #94a3b8 !important; margin-top: 15px !important; }
.smg-btn-finish { background: var(--sm-danger) !important; color: white !important; margin-top: 10px !important; }

.smg-result-box { width: 100% !important; padding: 25px !important; background: #0f172a !important; border-radius: 20px !important; margin: 20px 0 !important; color: white; }
.smg-big-text { font-size: 4rem !important; font-weight: 800 !important; color: var(--sm-primary) !important; }